Czy programowanie jest trudne?

czy programowanie jest trudne

czy programowanie jest trudne

Czy programowanie jest trudne?

Jak to jest z tym programowaniem? Czy jest proste czy trudne? Przekonaj się co doświadczeni programiści, blogerzy sądzą na ten temat.

Czy programowanie jest trudne?

„Powiedziałbym, że jest to „easy to learn, hard to master”. By stworzyć pierwszy prosty program, wystarczy parę godzin nauki. Później im dalej w las, tym więcej drzew. 😉 Szczególnie gdy pisany program to komercyjny produkt i pracuje nad nim więcej osób. Wtedy kończy się wesoła twórczość i zaczyna się praca.”

Mateusz Kupilas; blog: javadevmatt.pl

Czy programowanie jest trudne?

„To zależy – między innymi od osoby, która wykonuje tę czynność. Wygląda to podobnie jak np. nauka gry na gitarze – niektórym zajmie więcej czasu poznanie podstawowych chwytów, innym mniej. W obydwu przypadkach trzeba jednak ćwiczyć, żeby osiągnąć cel. Nic nie przychodzi samo i od razu – niektórzy potrzebują 2 dni, a inni 2 miesięcy. Problemem może być to, że ciągle coś się zmienia, powstają nowe frameworki, które warto znać. Trudnością może być wybranie swojej ścieżki i podążanie nią.

Ale z drugiej strony też wydaje mi się, że istnieje pewna idealizacja programowania. Niektórzy z góry zakładają, że jest trudne. Bo tu trzeba trochę logiki, umysłu ścisłego, znajomości komputerów i nie wiadomo czego jeszcze. A tak na prawdę można powiedzieć że coś jest trudne dopiero po tym, jak się tego spróbuje 🙂

Pomijam sam fakt, że termin programowanie jest bardzo ogólny – jeden język może być łatwiejszy do opanowania (na poziomie podstawowym) w krótkim czasie, a drugi trudniejszy. Poznanie podstaw może być proste. Może być łatwo tworzyć mało skomplikowane algorytmy lub aplikacje. Ale wraz z czasem okazuje się, że trzeba umieć coraz więcej, trzeba poświęcić wiele czasu i napisać wiele linijek kodu, żeby być naprawdę dobrym. Wiąże się to również z odpowiedzialnością za własny kod.”

Programmer Girl, blog: programmer-girl.com

Czy programowanie jest trudne?

„I tak i nie, z przewagą na tak – przynajmniej na razie. Z jednej strony jest łatwe ponieważ – właściwie niezależnie od technologii – program robi dokładnie to, co rozkazał programista (bądź programistka). Z drugiej strony jest trudne, ponieważ program robi dokładnie to, co rozkazał rzeczony programista. Inaczej mówiąc: programowanie wymaga innego trybu myślenia, ponieważ komputer bezmyślnie wykona nawet najgłupszy rozkaz i nie domyśli się, że twórcy chodziło o coś innego. Być może właśnie z tego powodu programowanie jest postrzegane jako dziedzina wymagająca szczególnych umiejętności, jednak w mojej opinii najtrudniejszą częścią pisania programu jest zapewnienie skuteczności działania zbliżonej do 100% – w celu uniknięcia ingerencji ludzkiej w jego późniejsze działanie – oraz odszyfrowywanie tego, co klient miał na myśli w specyfikacji :)”

KrzaQ, blog: dsp.krzaq.cc

Czy programowanie jest trudne?

„To zależy. Z mojej perspektywy – ścisłowca – było to naturalne. Najpierw bawiłem się Flashem, potem w technikum Turbo Pascal i Java. Na studiach głównie csharp, okazjonalnie C++ i Java, gdzie skupiłem się na mobilkach, którymi wtedy byłem zafascynowany. Była to najpierw nauka na zasadzie prób i błędów z tutoriali, a potem szkoła dobrego kodu. Jak już się zrozumie podstawy oraz o co w tym wszystkim chodzi, dalsza nauka idzie naturalnie. Obecnie zajmuję się nauką w technologii Unity3d , ASP.Net Core oraz Xamarin. Wszystkie wymienione technologie wykorzystują język c# od Microsoftu, który proponuję do nauki jako jeden z pierwszych języków.”

Szymon Motyka, blog: szymonmotyka.pl

Czy programowanie jest trudne?

„Początki bywają trudne. W moim przypadku musiałem się przyłożyć.
Programowanie na pewno jest pełne wyzwań! Tych lżejszych, łatwiejszych oraz takich gdzie wysilasz przez kilka dni szare komórki na maksa aby znaleźć jakieś rozwiązanie problemu. Wszystko zależy od charakteru projektu nad którym pracujesz. Popularne dzisiaj aplikacje webowe mogą być łatwe do napisania i szybko możemy uzyskać tzw. mvp (minimum valuable product) – tam próg wejścia nie jest wysoki i może dać wiele satysfakcji w krótkim okresie czasu. Ale jeśli marzysz o napisaniu własnej biblioteki przetwarzającej dźwięk czy obraz video to może okazać się to nie lada wyzwaniem na dłużysz okres. I trudność nie sprawi ci brak znajomości danego języka, algorytmów tylko to czy będziesz wytrwale dążył do celu. I dla niektórych to będzie największa trudność w programowaniu!”

Grzegorz Kotfis, blog: gkotfis.blogspot.com

Czy programowanie jest trudne?

„Tak. Ale jak każda dziedzina ma swoje łatwiejsze i trudniejsze obszary. Przy czym programowanie jest baaardzo rozległą dziedziną. Pytanie to przywodzi mi na myśl pewną analogię. Czy języki obce są trudne? Czy ich nauka jest trudna? Ja powiedziałabym, że to zależy. Zależy o jakim języku mówimy. Zależy jak danej osobie idzie przyswajanie języków obcych. Zależy, który to język z kolei 😉 W programowaniu jest tak samo. Najtrudniejsze są początki. Pierwszy język, pierwsza aplikacja, pierwszy problem. Wraz z wiedzą i doświadczeniem staje się coraz łatwiejsze. Języki i technologie stają się tylko narzędziami w drodze do celu.”

Żaneta Jażdżyk, blog: nettecode.com; grupa edukacyjno-motywacyjna: Programowanie – wsparcie na starcie

Czy programowanie jest trudne?

„To tak po prawdzie trudne pytanie! Zależy, jaką działką programowania się zajmujemy. Ja od dawna siedzę w webdevie, początkowo w backendzie, obecnie niemal wyłącznie we frontendzie. To ten dział programowania, w którym nikt nie będzie się z Ciebie śmiał, że nie ogarniasz matematyki czy innych rzeczy, które nieodłącznie kojarzą się ludziom z „prawdziwym” programowaniem. Ba, śmiem powiedzieć, że do JS-a nie dotarły nawet w pełni wszystkie „dobre praktyki” z jego starszych braci (na was patrzę, Java i PHP) – co ma zarówno swoje minusy, jak i plusy.

Jak na razie dość ponury roztaczam widok frontendu: ani wzorców projektowych nie ma za bardzo, ani matematyka niepotrzebna… Niemniej nie jest to świat pozbawiony wyzwań. Wciąż, mimo nieustannych starań ze strony W3C i WHATWG, istnieją spore różnice pomiędzy poszczególnymi przeglądarkami i wciąż frontend sprowadza się w głównej mierze do pisania takiego kodu, by działał znośnie w jak największej liczbie przeglądarek. Mimo to narzędzia, jakie mamy obecnie, są o wiele, wiele bardziej złożone niż choćby 5 lat temu. W czasach jQuery wystarczyło siąść i napisać kod. Dzisiaj potrzebujemy Node.js, npm, Babela, Rollupa, ESlinta, Mochę, Karmę, Chai, Sinona, Istanbula, żeby… móc zacząć pisać kod. Sama kompleksowość obecnego ekosystemu wskazuje na to, że frontend się dynamicznie rozwija. Liczba frameworków, która powstaje _codziennie_ jest po prostu zatrważająca. Wystarczy wyjechać na dzień do puszczy i jesteśmy w lesie…

Samo programowanie jako tako nie stało się trudniejsze: to wciąż tylko pisanie kodu. Niemniej mnogość przeglądarek, szybki rozwój ekosystemu i standardy sieciowe pojawiające się i zmieniane dosłownie codziennie sprawiają, że ogarnięcie tego wszystkiego wymaga sporej wprawy. Zwłaszcza, że przeszliśmy od padających płatków śniegu do skomplikowanych aplikacji do edytowania treści multimedialnych czy wręcz do tworzenia silników gier. Większość czasu obecnie spędza się nad projektowaniem rozwiązań poszczególnych problemów niż nad faktycznym rozwiązywaniem problemu. I to sprawia, że programowanie jako proces stało się bardziej złożone – ale czy trudniejsze? Raczej po prostu bardziej dojrzałe.”

Comandeer, blog: comandeer.github.io/blog/

Czy programowanie jest trudne?

„Cóż, pytanie o to, czy coś jest trudne nigdy nie miało zbyt wiele sensu. Bo czy pływanie, taniec, matematyka i historia jest trudna? To zależy od podejścia do problemu. Na pewno jest wymagające, kiedy zaczynasz się go uczyć. I jeśli chcesz, to będzie wymagające przez całe życie, jeśli za każdym razem będziesz uczył się nowych dziedzin. Ale po zrozumieniu którejś z nich, można już w niej w miarę swobodnie pracować, zwracając tylko uwagę na nowości w niej. Ale najistotniejsze, żeby sytuacja w której ciągle pojawia się coś nowego była dla Ciebie komfortowa.”

Michał Gellert, blog: michalgellert.pl

Czy programowanie jest trudne?

„Odpowiedź nie jest taka prosta. Bo to zależy. Równie dobrze można spytać, czy rozwiązywanie sudoku jest trudne, albo czy Tetris to trudna gra. No na początku to banał, ale z czasem staje się coraz trudniejsze. Podobnie jest z programowaniem. Na początku się wszystkiego boisz (zaznajamiasz z klockami Tetrisa, albo poznajesz ogólne zasady sudoku), po pewnym czasie już znasz podstawową składnię danego języka i wydaje ci się, że możesz wszystko. Dopiero mija pewien czas i zauważasz, że ty tak naprawdę dalej nic nie umiesz. To jest ten moment, kiedy wkraczasz na ścieżkę mistrza programowania i zaczynasz się uczyć. Ja osobiście lubię wyzwania i nudzi mnie, gdy jest zbyt łatwo.”

Kot Źrodłowy, blog: kot-zrodlowy.pl

Na koniec

  • Programowanie to umiejętność, która pozwala na tworzenie ciekawych i praktycznych rzeczy.
  • Nauka programowania (tak jak nauka języków obcych, gry na gitarze) wymaga czasu, praktyki oraz determinacji.
  • Szybkość nauki programowania zależy od predyspozycji, wcześniejszego doświadczenia i czasu jaki poświęcimy na rozwijanie się w tym kierunku.
  • Praca programisty wymaga nieustannego kształcenia.
  • Nigdy nie jest za późno na naukę programowania.
  • Programowanie wymaga rozwiązywania problemów, co może być fajne i angażujące, ale również frustrujące.

Chciałam podziękować wymienionym blogerom, którzy wzięli udział w tworzeniu tego tekstu. Cieszę się, że wspólnie mogliśmy zastanowić się nad tą kwestią.

Mam nadzieję, że artykuł ten jest dla Ciebie pomocny. Powiedz, co Ty sądzisz na ten temat? Czy programowanie jest trudne? Koniecznie daj znać w komentarzu!

Jak zostałam Junior Frontend Developerem?

jak zostalam forntend developerem

jak zostalam forntend developerem

Chcesz wiedzieć skąd ja się wzięłam i jak to się stało, że zaczęłam się interesować Frontend Developmentem?

Gdyby ktoś 5 lat temu powiedział, że będę programistką, to odpowiedziałabym mu, że ma bardzo ciekawe poczucie humoru.

Programowanie? To na pewno dla mnie za trudne

Moja wiedza o programowaniu była bardzo ograniczona. W gimnazjum na informatyce dowiedziałam się, że jest coś takiego jak HTML, tam jest head i body i z tego powstaje strona internetowa. Z programowaniem kojarzyła mi się konsola, gdzie programista wpisuje jakieś dziwne niezrozumiałe dla mnie komendy, w wyniku czego na ekranie pojawia się długi ciąg znaków. Czarna magia!

Komputery mnie nie pociągały. Wolałam nie kombinować, bo bałam się, że coś zepsuję. Z resztą, nie miałam w otoczeniu osoby, która mogłaby mnie do tego zachęcić i powiedzieć więcej na ten temat.

Sprawnie posługiwałam się pakietem Microsoft Office, korzystałam z programów graficznych i potrafiłam skonfigurować drukarkę.

Z branżą IT zaczęłam mieć większą styczność w pracy, w telewizji internetowej, w agencji reklamowej i firmie programistycznej gdzie zajmowałam się marketingiem i rekrutacją. Czasami zdarzało mi się nawet testować manualnie aplikacje mobilne bądź strony internetowe.

Jak zaczęła się moja przygoda z Frontend Developmentem?

Mój partner jest Frontend Developerem. Czasami wspominał mi co robi, nad czym obecnie pracuje, a ja słuchałam i powoli oswajałam się ze światem IT. Często wracał do domu po pracy i dalej siadał do kodu robiąc swoje projekty. Pewnego wieczoru ja usiadłam koło niego i powiedziałam „Pokaż mi co Ty tam robisz. Na czym to polega?”. Paweł odpalił CodePena i wytłumaczył mi podstawy. Tego wieczoru napisałam swoje pierwsze linie kodu i co więcej, spodobało mi się to. Przez następne kilka dni poznawałam tajniki HTMLa i CSSa. Jak czegoś nie rozumiałam to pytałam, a Paweł cierpliwie i interesująco odpowiadał. I tak to się zaczęło. Po miesiącu ciekawych konwersacji i poznawania podstaw podjęłam decyzję. Chcę zostać programistką i będę do tego konsekwentnie dążyć. Nie wiedziałam jeszcze wtedy za dużo na ten temat, ale ciekawił mnie ten dla mnie nowy, pełen możliwości świat.

Studia? Rzuciłam na pierwszym roku

Od gimnazjum interesowałam się geografią. Miałam spore osiągnięcia w tej dziedzinie. Wiedziałam, że nie chcę zostać nauczycielem geografii. Rozważałam rozwój w kierunku geoinformatyki lub geologii. Nie pamiętam już kto mi to powiedział, ale mocno wpłynęło to na moje życie: „Łatwiej z informatyka niż z geografa stać się geoinformatykiem”. Co możliwe, że jest prawdą. Moja wiedza z informatyki była mocno ograniczona, a sama utożsamiałam się z byciem geografem. Myślałam, że sobie nie poradzę. Kilka dodatkowych czynników spowodowało, że zdecydowałam się pójść w kierunku geologii.

Ze studiów geologicznych zrezygnowałam na pierwszym roku. Nie była to do końca przemyślana decyzja. Jednak po 6 latach interesowania się geografią i geologią przyszedł czas na zmiany. Studia zaczęły mnie denerwować: koszmarny plan zajęć, brak przemyślanej organizacji, wredni wykładowcy. Zajęć z geologii było tyle co kot napłakał. Z resztą, co ja będę robić tych studiach? Potrzebowałam zmiany, ale nie wiedziałam co chcę ze sobą zrobić.

Mam 22 lata i pracowałam w wielu branżach

To może dla niektórych brzmieć dość dziwnie, ale taka jest prawda. Mam 22 lata i pracowałam w wielu branżach. Po tym jak rzuciłam studia podejmowałam się różnych prac. Nie zawsze było łatwo, ale pomogło mi to poznać samą siebie. Z ciekawszych rzeczy to sprzedawałam żywe choinki przez internet z dowozem do klienta (współzałożycielka startupu), robiłam notatki wizualne z webinarów dla klientów zagranicznych, rekrutowałam programistów, byłam kelnerką i pokojówką w ośrodku wypoczynkowym w Australii. A to nie wszystko, mogłabym jeszcze trochę wymienić ;). Względnie długo zajmowałam się też marketingiem, ale nudziło mnie to i nie dawało mi to satysfakcji. Stąd pojawiła się u mnie motywacja aby zdobyć zawód, który będzie dla mnie interesujący. W pracy chciałam się czuć zaangażowana, chciałam szybko widzieć efekty swojej pracy.

Postrzegałam błędy jako coś złego

Dlaczego wcześniej nie przyszło mi do głowy, żeby się zainteresować programowaniem?

Myślę, że nie chciałam się czuć głupia, że czegoś nie rozumiem. Myślałam, że to jest za trudne (mimo, że tego nigdy tego nie spróbowałam). Sądziłam, że programowaniu jest na pewno dużo matematyki, a ja za nią nie przepadałam, bo czasami popełniałam błędy, nie umiem biegle liczyć w pamięci i czasami mi coś nie wychodzi. Wtedy jeszcze postrzegałam błędy jako coś złego i myślałam, że mi one nie mogą się przytrafiać. Tak to jest właśnie jak się jest perfekcjonistą. Unikałam tego w czym potencjalnie mogło mi coś nie wyjść. Rozwijałam się w kierunku, w którym odnosiłam sukcesy.

Blog programistyczny? Założyłam go spontanicznie

Wcześniej mi nawet przez myśl nie przyszło, że mogłabym prowadzić bloga o tematyce związanej z IT. Wszystko wydarzyło się spontanicznie. W marcu zobaczyłam czyjegoś posta na Facebooku, szukał on partnera do projektu w ramach Daj się Poznać, napisał również, że każdy uczestnik w ramach konkursu musi prowadzić bloga. Weszłam z ciekawości na stronę konkursu i okazało się, że zapisy dobiegają końca i to jest ostatnia szansa, żeby się znaleźć się na liście uczestników. Podjęłam decyzję. Trzeba było na poczekaniu wymyślić nazwę bloga, kupić domenę, wymyślić temat projektu. Postanowiłam, że dotrwam do końca konkursu i udało mi się. Plan został zrealizowany w 200%, ponieważ nie dość, że spełniłam wymagania i zostałam finalistką, to zajęłam 3 miejsce w tym konkursie, przełamałam swoje bariery i poznałam wielu ciekawych ludzi.

Moje dalsze plany

Zamierzam dalej pogłębiać swoją  wiedzę z zakresu Frontend Developmentu. Interesuję mnie również UX. Na pewno będę rozwijać bloga, mam kilka ciekawych pomysłów, które chcę zrealizować. Wiem, że jestem na początku drogi związanej z programowaniem i że jeszcze sporo muszę się nauczyć. Nie jest łatwo (czasami się denerwuję, bo coś mi nie działa) ale każde rozwiązanie problemu daje mi ogromną satysfakcję i kolejną lekcję.

Wnioski

  • Działaj, ponieważ to działania kreują rzeczywistość
  • Nie mów, że coś jest dla Ciebie za trudne jeśli tego nie spróbowałeś / spróbowałaś
  • Bądź ciekawy / ciekawa, pytaj napotkanych przez siebie ludzi co robią, co ich pasjonuje i ucz się od nich
  • Zawsze będzie ktoś kto wie na dany temat więcej od Ciebie, nie pozwól żeby to Cię ograniczało i hamowało

 

Reaktywacja animacji SVG za pomocą JavaScript

Niedawno w ramach konkursu  organizowanego przez Kodu.je wykonałam projekt animacji grafiki SVG. Mogę się pochwalić, że jury konkursu przyznało mojej animacji wyróżnienie, z czego się bardzo cieszę. 🙂 Efekty mojej pracy można oglądać na CodePenie:

See the Pen SVG animation by SowaProgramuje (@sowaProgramuje) on CodePen.

Jak dodać klasę na elemencie SVG za pomocą JavaScript?

Podczas pracy nad tym projektem napotkałam na pewien problem. Chciałam żeby klasa ze zdefiniowaną animacją była nadawana, a następnie usuwana po konkretnym interwale czasowym. W ten sposób chciałam ponownie zainicjować animację, dlatego potrzebowałam nadać klasę elementowi SVG za pomocą JavaScript. Ku mojemu zaskoczeniu .className() nie zadział

Trochę mi zajęło czasu, żeby rozwiązać ten problem, z pomocą przyszedł StackOverflow. Dotarłam do informacji, że na elemencie SVG klasę w czystym JavaScript można nadać za pomocą .element.classList.add().

Pamiętaj, manipulacja SVG różni się od manipulacji HTML. Jest to dość obszerny i ciekawy temat warty zgłębienia.

Reaktywacja animacji SVG za pomocą JavaScript

Animacja w CSS może być nieskończona (animation-iteration-count: infinite;), bądź wykonana konkretną ilość razy (animation-iteration-count: 2;). Animację można również opóźnić (animation-delay: 200ms;), ale działa to jedynie raz, na początku animacji. Stąd pojawiła się potrzeba napisania funkcji, która pozwoli na zatrzymanie i ponowne wznowienie animacji, co umożliwi jej zapętlenie i jednocześnie dodanie interwałów, w których animacja nie jest wykonywana.

Przykładowo: animujemy symbol Yin yang i chcemy, żeby obrócił się o 360 stopni, zatrzymał się się na 2 sekundy i następnie ponownie wykonał obrót o 360 stopni oraz chcemy aby ten cykl się powtarzał w nieskończoność.

See the Pen SVG animation reactivate by SowaProgramuje (@sowaProgramuje) on CodePen.

Aby uzyskać taki efekt napisałam funkcję w JS. Przyjmuje ona 4 argumenty:

  • id elementu, który chcemy animować – w kodzie nadajemy id na danym elemencie
  • animationTime – czyli całkowity czas animacji; i tutaj uwaga – jeśli wykonują się np. 3 powtórzenia  (animation-iteration-count: 3;), musimy pomnożyć czas trwania jednej animacji (animation-duration: 500ms) przez ilość powtórzeń. W tym przypadku animationTime wyniesie 1500ms.
  • interval – czas pomiędzy zakończeniem jednego powtórzenia animacji a rozpoczęciem kolejnego
  • animationDelay – opóźnienie animacji; dlaczego się zdecydowałam na to rozwiązanie? Napotkałam na buga, wydaje mi się, że był związany z ładowaniem się stylów oraz funkcją .setTimeout(), ale niestety nie byłam sama w stanie zidentyfikować problemu (jak wiele muszę jeszcze się nauczyć!). Domyślam się, że nie jest to najpiękniejsze rozwiązanie, może ktoś będzie umiał jakoś inaczej to rozgryźć. Należy jednocześnie pamiętać, że animation-delay w CSS powinien wynosić zero.

W funkcji wzięłam pod uwagę to, że dany element może mieć już wcześniej nadaną klasę. Nie nadpisuję jej, tylko dodaję dodatkową klasę, która jest taka sama jak id. Tutaj niestety należy pamiętać, że przy takim rozwiązaniu klasa z animacją zadeklarowaną w CSS musi być taka sama jak id elementu. Nie jest to do końca optymalne rozwiązanie, dlatego zastanawiam się jak można to udoskonalić. Jak masz jakieś sugestie to napisz w komentarzu.

Myślę, że zagadnienie animacji plików SVG jest bardzo ciekawe i na pewno będę je jeszcze zgłębiać. Jeśli masz jakieś uwagi lub pytania, daj znać w komentarzu 🙂

Chciałam Ci podziękować za to, że jesteś na tym blogu 🙂

Update:

Kod refactoringu:

See the Pen SVG animation after refactoring by SowaProgramuje (@sowaProgramuje) on CodePen.

10 błędów początkujących Frontend Developerów część 1

błędy frontend deweloperów

W programowaniu od samego początku warto dbać o dobre praktyki. Jednak czasami w trakcie nauki można przeoczyć lub zbagatelizować pewne kwestie. Stąd u początkujących Frontend Developerów pojawiają się błędy w kodzie. Razem z Mariuszem Bugajskim, autorem bloga blog.bugajsky.pl i zwycięzcą konkursu Daj się Poznać 2017, zdecydowaliśmy się napisać serię postów o tej tematyce, aby pomóc w eliminacji takich błędów.

Pamiętaj:

  1. Unikaj nadużywania id
  2. Unikaj nadawania stylów elementom w HTML
  3. Nie ładuj wszystkich skryptów w sekcji head dokumentu
  4. Nadawaj nazwy w języku angielskim
  5. Zmieniaj nazwy klasy/id/funkcji we wszystkich miejscach gdzie są używane
  6. Uważaj na ścieżki do plików
  7. Pamiętaj o semantyce
  8. Strzeż się literówek
  9. Pamiętaj o initial-scale=1 w meta tagu viewport
  10. Unikaj niepotrzebnego zagnieżdżania i nadużywania tagów div
  11. Bonus 😉

Poniżej znajdziesz wyjaśnienie do każdego z tych podpunktów.

1. Unikaj nadużywania id

Nie wszystkie elementy w Twoim kodzie HTML muszą mieć id. Nadanie id powinno być przemyślane i mieć swój konkretny cel. Jeśli nie zamierzasz stylować danego elementu używając id, bądź manipulować nim poprzez użycie JavaScript, nie jest ono potrzebne. Pamiętaj również, że id jest unikatowe – tylko jeden element na stronie może mieć dane id.

Można np. używać pseudoselektorów (tj. first-child), które umożliwiają wybieranie elementów bez nadawania im klasy czy id.

See the Pen Good example of naming by SowaProgramuje (@sowaProgramuje) on CodePen.

Tutaj stylujemy bezpośrednie dzieci elementu o klasie .menu oraz korzystamy z pseudoselektora, dzięki któremu nie musimy stylować elementu przez id.

2. Unikaj nadawania stylów elementom w HTML

Pamiętaj, że HTML jest językiem do opisywania struktury, dlatego unikaj dodawania stylów na poszczególnych elementach za pomocą atrybutu <style> (style inline). Najlepiej zapisywać style w jednej regule w CSS.

Dlaczego należy tak robić?

Ponieważ jest to antypattern, czyli łamanie podstawowych założeń. W razie jakiś problemów z kodem będzie Ci dużo łatwiej go debugować, jeśli style będą tylko w CSSie. Nie będziesz musieć przeszukiwać dwóch różnych plików lub co gorsza nadpisywać kodu. To prowadzi do bałaganu, a tego każdy Frotend Developer powinien unikać jak ognia.

Czasami bywa tak, że manipulujemy kodem używając do tego JavaScript. Na przykład po kliknięciu na button zmieni on kolor z czerwonego na niebieski. W tym przypadku najlepiej jest nadać elementowi klasę, która będzie nadawała mu dane styl.

Używając jQuery i metody .css() nadajemy atrybut w HTML

See the Pen Change button color jQuery by SowaProgramuje (@sowaProgramuje) on CodePen.

Używając metody .addClass() nie dodajemy stylów inline tylko klasę

See the Pen NgYeXR by SowaProgramuje (@sowaProgramuje) on CodePen.

3. Nie ładuj wszystkich skryptów w sekcji head dokumentu

Jeśli nie potrzebujesz, aby kod JavaScript był ładowany w sekcji head, należy umieścić go przed tagiem zamykającym body. Wynika to z tego, że skrypty ładują się synchronicznie, czyli jeśli masz przykładowo 5 różnych skryptów które ładujesz w sekcji head to muszą się one w całości pobrać zanim w ogóle dojdzie do budowania DOM, co znacznie opóźni ładowanie strony internetowej. Dlatego jeśli nie potrzebujesz, aby skrypt odpalił się przed załadowaniem DOM umieszczaj go przed </body>.

4. Nadawaj nazwy w języku angielskim

W programowaniu bardzo duży nacisk stawia się na uniwersalność kodu. Stąd nadawanie nazw klas, funkcji itd. w innym języku niż angielski może przysporzyć problemy. Wyobraź sobie co by było, gdybyś trafił / trafiła do projektu, w którym nazwy pisane są w języku Swahili. Mogłoby być dość ciężko ze zrozumieniem co w danym kodzie się dzieje. Dlatego pamiętaj, używaj języka angielskiego, obecnie jest to standard w tej branży i tego się trzymajmy. 😉 Więcej o nadawaniu nazw pisałam tutaj.

5. Zmieniaj nazwy klasy/id/funkcji we wszystkich miejscach gdzie są używane

Twój kod nie działa, a chwilę wcześniej zmieniłeś / zmieniłaś klasę bądź id jakiegoś elementu lub nazwę funkcji? Istnieje spore prawdopodobieństwo, że nazwa nie została uaktualniona wszystkich miejscach, w których jest używana. Jeśli chcesz zmienić nazwę – użyj wyszukiwania we wszystkich plikach i zastąp konkretną nazwę.

6. Uważaj na ścieżki do plików

Nie wyświetla się jakaś grafika w Twoim projekcie? A może nie ładują Ci się style? Pierwsza rzecz jaką należy sprawdzić w takiej sytuacji to ścieżka do pliku, którą podałeś/podałaś. Sprawdź też czy nie zrobiłeś literówki w nazwie pliku lub folderu, oraz czy rozszerzenie pliku się zgadza np.: pułapką jest .jpg oraz .jpeg.

<img src=”heroimage.jpg”> – w przypadku, gdy plik heroimage.jpg znajduje się w tym samym folderze co dany plik HTML

<img src=”folderName/heroimage.jpg”> – w przypadku, gdy heroimage.jpg w podfolderze folderu, w którym jest plik HTML

<img src=”/folderName/heroimage.jpg”> – w przypadku, gdy heroimage.jpg jest w rootcie

<img src=”../heroimage.jpg”>w przypadku, gdy heroimage.jpg poziom wyżej (gdy musisz się cofnąć)

7. Pamiętaj o semantyce

Semantyka to dostosowanie tagów w htmlu do tego czym są dane elementy na stronie tj. jeśli chcesz zrobić listę używaj tagu <ul> bądź <ol> a nie <p>.

To nie jest semantyczny kod:

See the Pen Non semantic code by SowaProgramuje (@sowaProgramuje) on CodePen.

To jest semantyczny kod:

See the Pen Example of semantic code by SowaProgramuje (@sowaProgramuje) on CodePen.

To nie zawsze jest takie oczywiste np.: jeśli tworzymy menu to również używajmy listy, a nie divów i paragrafów. Tak samo jeśli chcemy opisać input to używaj tagu <label> a nie <p>, ponieważ <label> jest stworzony właśnie do tego.

Nie nadużywaj tagu <h1>, jest zarezerwowany dla najważniejszych treści na stronie np. : tytuł artykułu.

8. Strzeż się literówek

Literówki to kolejny powód dla którego Twój kod może nie działać. Zanim poprosisz o pomoc starszego programistę upewnij się, że dobrze przepisałeś nazwę klasy, funkcji czy jakiegoś atrybutu. Mi osobiście kilka razy zdarzyło się zamiast src=” ” napisać scr=” ” i potem się bardzo dziwiłam, że zdjęcie się nie ładowało.

Jak uniknąć literówek?

  • Korzystaj z wtyczek do edytorów, które automatycznie podpowiadają konkretne własności, wartości, nazwy metod i funkcji.
  • Kopiuj nazwy klas, id – w ten sposób unikniesz niepożądanych problemów

9. Pamiętaj o initial-scale=1 w meta tagu viewport

Twoja strona nie jest responsywna pomimo, że dodałeś media queries? Upewnij się, że w sekcji head dokumentu masz meta tag:

<meta name=”viewport”, content=”initial-scale=1.0”, content=”width=device-width” >

Dlaczego jest to potrzebne?

To powoduje, że strona skaluję się do takiej szerokości jakiej jest dane urządzenie, na którym wyświetlana jest strona.

Na portalu CSS-tricks jest artykuł na ten temat.

10. Unikaj niepotrzebnego zagnieżdżania, a także nadużywania tagów div

Struktura w HTML powinna być wykonana jak najmniejszą ilością elementów. Jeśli potrzeby dwie kolumny i w każdej paragraf to nie zagnieżdżaj ich w divy tylko nadaj im szerokość po 50%.  Tak samo jeśli chcesz aby np. span zajmował całą szerokość rodzica, to nie wrappuj go w diva tylko nadaj mu display block.

Przykład zbyt dużego i niepotrzebnego zagnieżdżenia:

See the Pen Divitis by SowaProgramuje (@sowaProgramuje) on CodePen.

Poprawny sposób:

See the Pen Paragraf by SowaProgramuje (@sowaProgramuje) on CodePen.

Rezultat jest ten sam, ale w przykładzie drugim mamy bardziej przejrzystą strukturę.  Trzymajmy się zasady KISS (Keep it simple Stupid)

Bonus! 🙂

11. Usuwaj martwy kod

Martwy kod (ang. dead code) to fragment kodu, który nic nie wnosi do naszego projektu: tj. kod który jest zakomentowany bądź np. funkcja, która nigdzie nie jest i nigdy nie zostanie wykorzystana. Jeśli jakiś fragment kodu nie jest potrzebny należy go usunąć. Najlepiej jest to zrobić podczas refactoringu.

Podsumowanie

Postaraj się aby dbanie o dobrą jakość kodu stało się Twoim nawykiem. To naprawdę nie kosztuje wiele, a robi ogromną różnicę.

Spodobał Ci się ten artykuł i chcesz dowiedzieć się więcej? Koniecznie odwiedź bloga Mariusza Bugajskiego, tam niebawem znajdziesz nasz kolejny wartościowy post z tej serii.

Masz jakieś pytania? Daj znać w komentarzu

12 przydatnych narzędzi Frontend Developera

frontend developer narzędzia

frontend developer narzędzia

Oto 12 darmowych narzędzi online, które są przydatne w pracy Frontend Developera.

1. Generator cieni

Problem z tworzeniem cieni na elementach w CSSie? Korzystaj z tego generatora, zdecydowanie ułatwia sprawę 😉

generator box-shadow
źródło: http://www.cssmatic.com/box-shadow

2. Generator gradientów

Potrzebujesz na swojej stronie użyć gradientu? Nie ma sprawy, oto proste narzędzie do mieszania kolorów i generowania kodu.

generator gradientów
źródło: http://www.colinkeany.com/blend/

3. Cubic Bézier generator

Dla fanów CSSa i animacji polecam ten generator krzywych Béziera. Dzięki nim twoje animacje będą ciekawsze i bardziej efektowne.

krzywa beziera
źródło: http://cubic-bezier.com/

4. Lorem impsum

Znajdziesz tu przykładowe teksty: paragrafy krótkie i długie, a także elementy list. Wystarczy tylko skopiować i wkleić do swojego projektu.

lorem ipsum generator
źródło: http://lorem2.com/

5. Font awesome

Szukasz darmowych ikon? Font awesome to miejsce, które ci się bardzo spodoba. Zostało stworzone z myślą o frontend developerach. Ikony dostępne jako czcionka. Wersja premium jest płatna.

font awesome
źródło: http://fontawesome.io/

6. Google fonts

Szeroki wybór darmowych czcionek – prosto do Twojego projektu.

google fonts
źródło: https://fonts.google.com/

7. Walidator

Chcesz mieć pewność, że Twój kod jest poprawny? Skorzystaj z walidatora W3C (World Wide Web Consortium). Wklej swój HTML i sprawdź czy nie masz żadnych błędów. Pliki CSS możesz sprawdzać pod tym adresem: https://jigsaw.w3.org/css-validator/

walidator
źródło: https://validator.w3.org/

8. Can I use… ?

Zastanawiasz się czy to co chcesz użyć w swoim kodzie jest wspierane przez wszystkie przeglądarki? Wejdź na Can I use, tam znajdziesz potrzebne informacje.

can i use
źródło: https://caniuse.com/

9. Compress jpg

Kompresja plików jest istotna pod kątem optymalizacji stron internetowych. Warto o to zadbać z wielu powodów m.in. prędkość ładowania stron będzie dużo szybsza.

compress jpg
źródło: http://compressjpeg.com/

10. Pexels

Portal z darmowymi stockowymi zdjęciami. Bez obawy możesz je wykorzystywać do celów prywatnych jak i komercyjnych. Zdjęcia mają licencję Creative Commons Zero (CC0), co oznacza, że nie musisz podawać autora zdjęcia.

pexels
źródło: https://www.pexels.com/

11. HTTP status dogs

Co łączy protokół HTTP i psa? Kod odpowiedzi! Jeśli masz problem z zapamiętaniem znaczenia kodu odpowiedzi koniecznie odwieź tą stronę 😉

Wolisz koty? Zerknij tutaj 😉

http status dogs
źródło: https://httpstatusdogs.com/

12. Stack Overflow

Nie jest to do końca narzędzie, ale prawie każdy developer z tego korzysta. Masz problemu z kodem? Poszukaj odpowiedzi na StackOverflow. Jak nie znajdziesz rozwiązania zawsze możesz zadać pytanie, deweloperzy z całego świata gromadzą się tam aby pomagać sobie nawzajem. 

stack overflow
źródło: https://stackoverflow.com/

Dodatkowo:

13. Avocode

Aplikacja do dzielenia się plikami graficznymi, kooperacji, generowania snippetów kodu, eksportowania grafik, mierzenia paddingów, marginesów. W przeciwieństwie do poprzednich narzędzi ta aplikacja płatna, ale ma darmowy okres próbny. Więcej o Avocode pisałam w tym artykule.

Avocode
źródło: https://avocode.com/

 

A jakie jest Twoje ulubione narzędzie, które pomaga ci w pracy? Podziel się  w komentarzu!