Złota rada dla początkujących programistów podaje, że najwięcej uczysz się podczas pracy nad własnymi projektami. Jest ona dobra, ale czasem trudno jest jej słuchać – zwłaszcza jeśli stawiasz na ścieżce IT swoje pierwsze kroki. W artykule tym opisuję krok po kroku, jak w prosty sposób rozpocząć pracę nad własnymi projektami i uczyć się podczas ich realizacji. Moje przykłady opierają się na stosie do tworzenia frontendowych aplikacji internetowych – HTML + CSS + JS – ale przedstawione tu podejście możesz zastosować do każdej wykorzystywanej przez Ciebie technologii.
Wybierz prosty przypadek użycia
Krok pierwszy: nie porywaj się z motyką na słońce. Pracownikom z branży IT często zdarza się budować swego rodzaju klony popularnych stron internetowych. Prowadzi to jednak do mnożenia się funkcji, co uniemożliwia skuteczną pracę nad nimi. Jeśli chcesz inspirować się istniejącymi produktami, spróbuj maksymalnie je uprościć:
- Jeśli klonujesz Reddita, stwórz stałą, hardcodowaną listę linków (na przykład do najlepszych stron internetowych o programowaniu), gdzie ludzie mogą głosować za lub przeciw ALBO stwórz długą listę, do której po prostu dodajesz linki.
- Jeśli klonujesz Airbnb, ogranicz się do wyświetlenia nieruchomości – bez rezerwacji i bez dodawania nowych właściwości.
- Jeśli klonujesz Ubera, stwórz stronę z podsumowaniem zamówienia – przejazd z punktu A do punktu B.
Możesz też zacząć pracować nad nieco już wyświechtanymi produktami: aplikacją z listą rzeczy do zrobienia lub stroną blogową. Może Ci się to wydawać monotonne i nudne, ale taki przypadek użycia jest przynajmniej zrozumiały i nie powinien być przytłaczający.
Naszkicuj interfejs
Po wyborze przypadku użycia weź kartkę papieru i długopis i narysuj swój interfejs. Zacznij od jednej strony, maksymalnie dwóch stron. Na początku szkic na papierze będzie idealny: celem jest szybka iteracja, a mało zaawansowane rozwiązanie nadaje się do tego wyśmienicie. Pracując nad wspólnymi projektami, członkowie zespołu tworzą design przy pomocy wyszukanych aplikacji, ale korzystanie z nich jest czasochłonne – trzeba zainstalować aplikację, nauczyć się interfejsu itd., co spowalnia pracę. Szkic nada kształt Twoim myślom, a kiedy będzie gotowy, będziesz na niego zerkać tylko raz na jakiś czas, budując swój interfejs.
Złota rada dla początkujących programistów podaje, że najwięcej uczysz się podczas pracy nad własnymi projektami. Jest ona dobra, ale czasem trudno jest jej słuchać – zwłaszcza jeśli stawiasz na ścieżce IT swoje pierwsze kroki. W artykule tym opisuję krok po kroku, jak w prosty sposób rozpocząć pracę nad własnymi projektami i uczyć się podczas ich realizacji. Moje przykłady opierają się na stosie do tworzenia frontendowych aplikacji internetowych – HTML + CSS + JS – ale przedstawione tu podejście możesz zastosować do każdej wykorzystywanej przez Ciebie technologii.
Wybierz prosty przypadek użycia
Krok pierwszy: nie porywaj się z motyką na słońce. Pracownikom z branży IT często zdarza się budować swego rodzaju klony popularnych stron internetowych. Prowadzi to jednak do mnożenia się funkcji, co uniemożliwia skuteczną pracę nad nimi. Jeśli chcesz inspirować się istniejącymi produktami, spróbuj maksymalnie je uprościć:
- Jeśli klonujesz Reddita, stwórz stałą, hardcodowaną listę linków (na przykład do najlepszych stron internetowych o programowaniu), gdzie ludzie mogą głosować za lub przeciw ALBO stwórz długą listę, do której po prostu dodajesz linki.
- Jeśli klonujesz Airbnb, ogranicz się do wyświetlenia nieruchomości – bez rezerwacji i bez dodawania nowych właściwości.
- Jeśli klonujesz Ubera, stwórz stronę z podsumowaniem zamówienia – przejazd z punktu A do punktu B.
Możesz też zacząć pracować nad nieco już wyświechtanymi produktami: aplikacją z listą rzeczy do zrobienia lub stroną blogową. Może Ci się to wydawać monotonne i nudne, ale taki przypadek użycia jest przynajmniej zrozumiały i nie powinien być przytłaczający.
Naszkicuj interfejs
Po wyborze przypadku użycia weź kartkę papieru i długopis i narysuj swój interfejs. Zacznij od jednej strony, maksymalnie dwóch stron. Na początku szkic na papierze będzie idealny: celem jest szybka iteracja, a mało zaawansowane rozwiązanie nadaje się do tego wyśmienicie. Pracując nad wspólnymi projektami, członkowie zespołu tworzą design przy pomocy wyszukanych aplikacji, ale korzystanie z nich jest czasochłonne – trzeba zainstalować aplikację, nauczyć się interfejsu itd., co spowalnia pracę. Szkic nada kształt Twoim myślom, a kiedy będzie gotowy, będziesz na niego zerkać tylko raz na jakiś czas, budując swój interfejs.
Zbuduj interfejs
Po tych wszystkich przygotowaniach będziesz gotowy na pracę z kodem. Interfejs użytkownika jest najbardziej namacalnym i prawdopodobnie najprostszym elementem projektu. Stwórz plik HTML i ewentualnie dodaj CSS, jeśli będziesz mieć ochotę na upiększenie swojej aplikacji. Celem jest wykreowanie tego, co narysowałeś wcześniej, i wyświetlenie w jak najciekawszy sposób. Pamiętaj – zwłaszcza jeśli bawisz się w stylizację – że „gotowe jest lepsze niż idealne”: nie spędzaj na tym etapie zbyt dużo czasu, chyba że CSS i design to umiejętności, na których chcesz się skupić.
Stwórz dane fikcyjne i zaktualizuj interfejs tak, aby je wyświetlał
Kiedy skończysz już pracę z HTML i hardcodowanymi danymi, będziesz mógł przejść do stworzenia dynamicznego interfejsu. Na tym etapie wzbogacisz swój projekt przy pomocy języka JS. Możesz się ograniczyć do zwykłego JS i odtworzyć kod HTML jako DOM, albo dodać ramę JS, którą już znasz lub której chcesz się nauczyć. Będziesz musiał stworzyć tymczasową strukturę danych w zmiennej i odtworzyć JS formularza HTML na podstawie danych w tej zmiennej.
Zbuduj interfejs
Po tych wszystkich przygotowaniach będziesz gotowy na pracę z kodem. Interfejs użytkownika jest najbardziej namacalnym i prawdopodobnie najprostszym elementem projektu. Stwórz plik HTML i ewentualnie dodaj CSS, jeśli będziesz mieć ochotę na upiększenie swojej aplikacji. Celem jest wykreowanie tego, co narysowałeś wcześniej, i wyświetlenie w jak najciekawszy sposób. Pamiętaj – zwłaszcza jeśli bawisz się w stylizację – że „gotowe jest lepsze niż idealne”: nie spędzaj na tym etapie zbyt dużo czasu, chyba że CSS i design to umiejętności, na których chcesz się skupić.
Stwórz dane fikcyjne i zaktualizuj interfejs tak, aby je wyświetlał
Kiedy skończysz już pracę z HTML i hardcodowanymi danymi, będziesz mógł przejść do stworzenia dynamicznego interfejsu. Na tym etapie wzbogacisz swój projekt przy pomocy języka JS. Możesz się ograniczyć do zwykłego JS i odtworzyć kod HTML jako DOM, albo dodać ramę JS, którą już znasz lub której chcesz się nauczyć. Będziesz musiał stworzyć tymczasową strukturę danych w zmiennej i odtworzyć JS formularza HTML na podstawie danych w tej zmiennej.
Top comments (0)