pi膮tek, 24 marca 2017

Polecane 藕r贸d艂a wiedzy - front end i og贸lnie, programowanie

Stale aktualizowana lista 藕r贸de艂 wiedzy na temat HTML, CSS, JS i pokrewnych. Je艣li masz swoje propozycje, pisz w komentarzu!

Kana艂y YT zagraniczne

  • Net Ninja - 艣wietnie przygotowane tutoriale na temat front-endu
  • The New Boston - facet specjalizuje si臋 w robieniu tutoriali wprowadzaj膮cych do r贸偶nych technologiiUW-
  • Gynvael Coldwind - og贸lnie o programowaniu
  • Traversy Media - bardzo dobre tutoriale na temat programowania webowego. Polecam
  • Mindspace - g艂贸wnie tutoriale Angular 
  • Chris Coyier - kana艂 za艂o偶yciela CSS-tricks
  • Adam Khoury - autor dawno nic nie wrzuca艂, tutoriale z czystego JS + PHP i inne technologie webowe
  • JSConf - jak sama nazwa wskazuje, prelekcje na temat JS
Polskie
  • Kodu.je - polski kana艂 na temat JS, HTML, CSS. Polecam webinary
  • Adrian Bienias - mi臋dzy innymi dzi臋ki niemu, kilka lat temu zacza艂em programowa膰. 
  • Od zera do WebDeva
  • UW-TEAM.org - na temat Linuxa, serwer贸w i bezpiecze艅stwa w sieci
  • Gynvael Coldwind - na temat programowania, tak偶e niskopoziomowego, oraz bezpiecze艅stwa w sieci
Blogi

艣roda, 22 marca 2017

Debugowanie strony WWW na Twoim smartfonie

Debugowanie b艂臋d贸w pojawiaj膮cych si臋 na smartfonach, potrafi by膰 m臋czarni膮.

Zwykle zmiany w kodzie musimy wprowadza膰 intuicyjnie, bez mo偶liwo艣ci szybkiego podgl膮du b艂臋du na telefonie (potrzebny jest deploy), albo korzysta膰 z serwis贸w, kt贸re emuluj膮 dzia艂anie telefonu. W tych ostatnich, cz臋sto nie mo偶na korzysta膰 z podgl膮du strony umieszczonej na localho艣cie, a tak偶e nie mo偶na podejrze膰 藕r贸d艂a strony. WEAK!

wtorek, 21 marca 2017

Najwa偶niejsze b艂臋dy w podej艣ciu do programowania u pocz膮tkuj膮cych. Newbies FAQ


Poni偶ej przedstawiam typowe wypowiedzi i niepokoje pocz膮tkuj膮cych adept贸w programowania. Padawanie, nie id藕 t膮 drog膮!

Czy Pan X nagra kurs na temat Y, bo chcia艂bym si臋 tego nauczy膰? - je艣li chcesz si臋 czego艣 nauczy膰, nie czekaj na to, a偶 kto艣 nagra na ten temat tutorial. Ucz si臋 szukania odpowiedzi na w艂asn膮 r臋k臋.

Czy warto uczy膰 si臋 frameworka X, czy j臋zyka, na kt贸rego podstawie zosta艂 stworzony - zdecydowanie, j臋zyka. Nauka np. Angulara bez znajomo艣ci JS (a w przypadku Angular 2 - tak偶e typescriptu), jest bezmy艣lnym przepisywaniem bez zrozumienia.

niedziela, 19 marca 2017

poniedzia艂ek, 13 marca 2017

Najwa偶niejsze technologie, kt贸re musisz pozna膰 w pracy developera, a nie poznasz ich z tutoriali

Gdy zaczyna艂em programowanie, du偶o czasu sp臋dza艂em na ogl膮danie tutoriali i przepisywanie z nich kodu. Wszystko wygl膮da wtedy pi臋knie, a偶 do momentu, gdy idealnie przepisany kod, przestaje dzia艂a膰, bo na przyk艂ad wysz艂a nowa wersja frameworka i tutorial jest ju偶 nieaktualny, lub nie masz w systemie jakiej艣 potrzebnej aplikacji.
W pracy okazuje si臋, 偶e du偶o czasu sp臋dzamy w艂a艣nie na rozwi膮zywaniu problem贸w pod tytu艂em "dlaczego nie dzia艂a", oraz na zajmowaniu si臋 wieloma innymi rzeczami, niezwi膮zanymi z kodem. Oto kilka przyk艂ad贸w:
  1. Praca z systemami zarz膮dzania zadaniami - Trello, Jira, Asana i wiele innych. Zadania cz臋sto s膮 po angielsku, a co gorsza, czasem nawet po niemiecku :(
  2. Wsp贸艂praca z innymi lud藕mi - praca front enda, to tak偶e rozmowy z innymi programistami i niekiedy - wyznaczanie im zada艅, kt贸re umo偶liwi膮 nam wykonanie naszych task贸w. Tak偶e umiej臋tno艣膰 wymigania si臋 od tych zada艅, kt贸rych wiemy, 偶e nie uda nam si臋 wykona膰. Je艣li jeste艣 jedynym front-endowcem w okolicy, b臋dziesz musia艂 pomaga膰 tak偶e innym programistom w rozwi膮zywaniu problem贸w, zwi膮zanych np z jQuery.
  3. Praca z serwerem lokalnym - stawianie serwera, 艂膮czenie si臋 z nim przez SSH lub aplikacje typu WinSCP, czasem edytowanie plik贸w na serwerze za pomoc膮 edytor贸w takich, jak Nano lub VIM. Tutaj mo偶esz liczy膰 na pomoc backendowc贸w.
  4. Konsola - sprawne poruszanie si臋 w Windows i Linux, uruchamianie kompilator贸w (np Sass), czasem stawianie ca艂ych projekt贸w za pomoc膮 takich narz臋dzi, jak Angular CLI. Warto pozna膰 tak偶e emulatory konsoli, jak ConEmu czy CMDR.
    #edit 10.2017 - od d艂u偶szego czasu zarzuci艂em u偶ywanie emulator贸w konsoli, powoduj膮 one sporo b艂臋d贸w.
  5. Zarz膮dzanie czasem - deklarowanie czasu na wykonanie zadania, pomiary, jak d艂ugo zajmuje nam praca, planowanie sobie dnia i przygotowanie si臋 do stand-up贸w. Cz臋sto praca z terminami.
  6. Praca z GIT - pobieranie projekt贸w, tworzenie branchy i ich 艂膮czenie, rozwi膮zywanie konflikt贸w. Im wi臋kszy projekt, tym bardziej staje si臋 to skomplikowane. Warto pozna膰 klienty Git (lub innych system贸w kontroli wersji), jak SourceTree czy te wbudowane w edytor.
  7. Czytanie i edytowanie PHP (na przyk艂ad przy pracy z TWIG lub Wordpress) i innymi j臋zykami backendowymi- warto pozna膰 konstrukcje u偶ywane przy templatkach oraz zapozna膰 si臋 z podstawami sk艂adni. Je艣li poznasz drugi j臋zyk programowania, b臋dziesz m贸g艂 艂atwiej wybra膰 rozwi膮zanie odpowiednie do problemu. To samo dotyczy innych j臋zyk贸w backendowych.
  8. Rozwi膮zywanie zupe艂nie nietypowych przypadk贸w - na przyk艂ad, stylowanie ekranu wydruku dynamicznie generowanego dokumentu, czy zastanawianie si臋 nad tym, dlaczego szablon responsywnego maila nie wy艣wietla si臋 w Outlook 2016, a dzia艂a na iPhonie 7. Inny przyk艂ad - menu na pewnej szeroko艣ci ekranu zas艂ania logo i trzeba to poprawi膰, bez rozwalania ca艂ego projektu. 
  9. Konfigurowanie wtyczek - dla oszcz臋dno艣ci czasu, znacznie 艂atwiej jest zaimplementowa膰 gotowy slider, ni偶 go tworzy膰 od nowa. Zadaniem front-enda jest zapoznanie si臋 ze specyfikacj膮 i wdro偶enie widgetu (oraz zastanawianie si臋, dlaczego nie dzia艂a ;)
  10. Instalacja 艣rodowisk - to co艣, czego najbardziej nie lubi臋. Ustawianie r贸偶nych program贸w tak, by umo偶liwi艂y wydajn膮 prac臋, zmiana 艣cie偶ek 艣rodowiskowych itp. Cz臋sto wspieram si臋 tutaj wideotutorialami.
  11. Praca z zupe艂nie nowymi rzeczami - nowe frameworki, biblioteki itp, kt贸re trzeba szybko zrozumie膰 i zastosowa膰.

niedziela, 12 marca 2017

Najpopularniejsze problemy z HTML i CSS vol 2 - border-box vs content-box

Jedno z najcz臋stszych pyta艅 na rozmowie kwalifikacyjnej - czym si臋 r贸偶ni box-sizing: border-box od content-box.

Naj艂atwiej b臋dzie pokaza膰 to na przyk艂adzie:

See the Pen box sizing by Kamil (@KamilNaja) on CodePen.


Div content-box ma nadany box-sizing: content-box i jest wyra藕nie wi臋kszy od swojego kolegi, kt贸ry ma nadany box-sizing: border-box.
Pierwotnie, jedynym dost臋pnym ustawieniem by艂 box-sizing: content-box, w kt贸rym na wysoko艣膰 elementu wp艂ywa艂a:

  • Jego wysoko艣膰 w height +
  • Jego border +
  • Jego padding g贸rny i dolny
Podobnie, na szeroko艣膰 elementu wp艂ywa jego szeroko艣膰 + padding lewy i prawy + border.
Takie ustawienie jest te偶 domy艣lne, je艣li nie u偶ywasz reset.css czy normalize.css i cz臋sto prowadzi to do problem贸w z ustawieniem odpowiedniej wysoko艣ci i szeroko艣ci element贸w. Rozwi膮zaniem tego problemu jest box-sizing: border-box, w kt贸rym na ustawion膮 szeroko艣膰 i wysoko艣膰, nie maj膮 wp艂ywu ustawienia border lub padding.

Wyobra藕 sobie, 偶e na przyk艂ad tworzysz design strony z dwoma kolumnami o szeroko艣ci 50% obok siebie. Je艣li nadasz im jaki艣 border lub padding, uk艂ad si臋 zepsuje. Rozwi膮zaniem problemu jest nadanie elementom odpowiedniego box-sizing, czyli border-box.

Jak to wygl膮da w praktyce?

W praktyce, w wi臋kszo艣ci przypadk贸w, nadpisanie box-sizing: content-box jest jedn膮 z pierwszych czynno艣ci, kt贸r膮 robimy przy tworzeniu strony. Mo偶na to zrobi膰 za pomoc膮 arkusza Normalize.css lub zadeklarowa膰 to w arkuszu CSS. Odpowiedni kod znajdziesz na stronie css-tricks. Je艣li tworzysz stron臋 na Bootstrapie, masz ju偶 ustawiony box-sizing na border-box.

殴r贸d艂a:
https://css-tricks.com/box-sizing/
http://webroad.pl/html5-css3/525-box-sizing-powrot-do-przeszlosci

sobota, 11 marca 2017

Dlaczego m贸j CSS nie dzia艂a - checklista


Standardowa sytuacja w pracy front-end developera. W艂膮czasz komputer, zaczynasz stylowa膰 jaki艣 element i … nie dzia艂a. Wielu m艂odych developer贸w, zamiast rozwi膮za膰 problem samemu, zwykle po 15 minutach zak艂ada temat na forum. :) Zamiast to robi膰, znacznie lepiej jest samodzielnie zdebugowa膰.
Poni偶ej lista podpowiedzi, dlaczego Tw贸j CSS nie dzia艂a.

sobota, 4 marca 2017

Najpopularniejsze problemy z HTML i CSS vol 1 - margin vs padding

Margin i padding to dwie w艂a艣ciwo艣ci CSS, kt贸re potrafi膮 sprawi膰 wiele trudno艣ci, zw艂aszcza pocz膮tkuj膮cym osobom. Poni偶ej opis ka偶dej z nich.

Margin:
* margines zewn臋trzny
* pozwala "odsun膮膰" element od innego elementu
* je艣li nadasz jednemu elementowi margin-top, a elementowi pod nim margin-bottom, w艂a艣ciwo艣ci nie b臋d膮 si臋 sumowa艂y - zostanie wybrana ta, kt贸ra ma wi臋ksz膮 warto艣膰.
* nie wp艂ywa na wielko艣膰 elementu
* mo偶e mie膰 ujemn膮 warto艣膰

Padding:
* margines wewn臋trzny
* pozwala odsun膮膰 zawarto艣膰 elementu od jego kraw臋dzi
* paddingi nie sumuj膮 si臋
* cz臋sto stosowany do odsuwania na przyk艂ad tekstu od kraw臋dzi elementu nadrz臋dnego
* mo偶e wp艂ywa膰 na wielko艣膰 elementu (je艣li ma on ustawiony box-sizing: content-box)
* mo偶e pos艂u偶y膰 do zmiany wysoko艣ci elementu - jest to wskazane, poniewa偶 zwykle nie ustawia si臋 sztywnej warto艣ci dla wysoko艣ci
* nie mo偶e mie膰 ujemnej warto艣ci

Poni偶ej ilustracja diva bez paddingu oraz z paddingiem.

See the Pen EWyvJX by Kamil (@KamilNaja) on CodePen.

pi膮tek, 3 marca 2017

Szybki spos贸b na stworzenie szkieletu strony WWW z u偶yciem Codepen


Codepen to 艣wietna aplikacja WWW, pozwalaj膮ca na 艂atwe testowanie i udost臋pnianie kodu. Dzisiaj znalaz艂em dla niej jeszcze jedno zastosowanie - pozwala ona na bardzo szybkie stworzenie szkieletu strony, gotowego do rozpocz臋cia pracy.

艣roda, 1 marca 2017

Pierwszy dzie艅 w pracy developera

Tworzenie w艂asnych projekt贸w z my艣l膮 o pracy, wbrew temu co si臋 m贸wi, tylko w niewielkim stopniu przygotowuje nas do przysz艂ego stanowiska. Tworz膮c stron臋, znamy ka偶dy plik, a projekt zwykle nie rozrasta si臋 bardziej, ni偶 do kilku podstron, arkusza styl贸w i podfolder贸w na zdj臋cia, pliki JS i pliki wektorowe.

Tw贸j pierwszy dzie艅 w pracy, zmieni Twoje podej艣cie do deweloperki o 180 stopni. W przypadku mojej znajomej, Ani, wygl膮da艂o to tak:

Pierwszym zadaniem, by艂o skonfigurowanie sobie komputera, pocz膮wszy od "znalezienia" jakiej艣 klawiatury i myszki, zainstalowanie systemu i zainstalowanie IDE. Okaza艂o si臋, 偶e Ania b臋dzie pracowa艂a na PHPStormie, kt贸rego nie widzia艂a nigdy wcze艣niej. B艂膮d - mog艂a zapyta膰 o edytor tekstu stosowany w firmie w czasie rozmowy kwalifikacyjnej lub nawet po uzyskaniu prawid艂owej odpowiedzi. Nic to, 偶e by艂a power userem Sublime Text.

Po drugie - w jej firmie w cz臋艣ci projekt贸w u偶ywano SVN zamiast Gita, a wszyscy pracownicy, korzystali z systemu kontroli wersji w PHPStormie, a nie w konsoli. Inne rzeczy, takie, jak kompilacja Sass czy Less, tak偶e by艂y robione przez IDE.

Dzie艅 zacz膮艂 si臋 od daily scrum, na kt贸rym pozna艂a kilkunastoosoobowy zesp贸艂. Zapami臋ta艂a podczas niego tylko imi臋 full stacka, od kt贸rego mia艂a otrzymywa膰 zadania i w razie trudno艣ci, prosi膰 go o pomoc.

Pierwszym zadaniem Ani w pracy, by艂o zrobienie animacji pasku post臋pu. Tutaj przera偶enie, bo nie robi艂a nigdy ani animacji, a przez d艂u偶szy czas, nie mog艂a zrozumie膰, jak dzia艂a projekt. Wordpress by艂 艣ci膮gany z Gita i nast臋pnie trafia艂 na dysk sieciowy, kt贸ry s艂u偶y艂 za podr臋czny serwer. Troch臋 r贸偶ni艂o si臋 to w stosunku do pracy w XAMPP. Na szcz臋艣cie, od frontend developera na pocz膮tku nie wymaga si臋 znajomo艣ci takich konfiguracji i kolega siedz膮cy obok, pom贸g艂 艣ci膮gn膮膰 i odpali膰 projekt. Konfiguracj膮 Sass zaj臋艂a si臋 sama.

Gdy Ania ju偶 dopyta艂a, jak znale藕膰 potrzebny plik i mog艂a go stylowa膰 w CSS, pojawi艂 si臋 kolejny problem - komputer, mimo tego, 偶e pot臋偶ny, dawa艂 bardzo du偶e op贸藕nienie od zapisania do zobaczenia efekt贸w w przegl膮darce. Sprawdzenie czasu kompilacji przez Compass watch --time pokaza艂o, 偶e plik najpierw jest automatycznie wysy艂any na serwer, a dopiero po 2 sekundach si臋 kompiluje. Nie by艂o to zbyt dziwne, poniewa偶 gotowy CSS liczy艂 ponad 15 000 wierszy kodu. Nie mniej, kosztowa艂o to troch臋 nerw贸w i pyta艅 w stylu "dlaczego to nie dzia艂a". Czasem trudno te偶 by艂o si臋 jej po艂apa膰, kt贸ry fragment kodu HTML jest generowany przez PHP, a kt贸ry mo偶na zmieni膰 w szablonie. Bardzo przyda艂o si臋 tutaj wyszukiwanie string贸w w ca艂ym projekcie.

Problemem by艂 te偶 rozw贸j szablonu na WP, poniewa偶 cz臋艣膰 plik贸w Ania musia艂a edytowa膰 w CSS, a cz臋艣膰 w Visual Composer. Nie mia艂a te偶 pewno艣ci, czy te zmiany s膮 widziane przez innych pracownik贸w, kt贸rzy pracowali przy tym samym szablonie. Na szcz臋艣cie zna艂a Gita i zatwierdzanie zmian nie stanowi艂o problemu. Zaskoczy艂a nawet koleg贸w z pracy tym, 偶e korzysta z konsoli.

Pierwszego dnia w pracy okaza艂o si臋 tak偶e, 偶e licz膮 si臋 umiej臋tno艣ci komunikacji. Ania dosta艂a na przyk艂ad zadanie, kt贸re wymaga艂o dodania do menu WP custom data-attributes. Musia艂a to przeanalizowa膰, porozmawia膰 o tym z backendowcem i dok艂adnie wyja艣ni膰 mu, o jaki efekt chodzi.

Co wi臋cej, du偶a cz臋艣膰 zada艅 polega艂a na wdra偶aniu gotowych rozwi膮za艅, takich, jak slidery w JS.

Podsumowuj膮c - praca w zespole, w niczym nie przypomina spokojnego rozwijania swoich projekt贸w. Najwi臋ksz膮 r贸偶nic膮, jest skala i skomplikowanie projektu - te czynniki sprawiaj膮, 偶e przez pierwsze dni, musimy si臋 wdra偶a膰 i tracimy sporo czasu na szukanie r贸偶nych rzeczy. W komentarzu opisz, jaki by艂 Tw贸j pierwszy dzie艅 w pracy dewa.