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
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

AngularJS - DIY (do it yourself)

Bez zbędnego gadania - zestaw gotowców na różne elementy w AngularJS. Na bazie tutoriala z kanału - kudvenkat

Sortowanie tabeli



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:



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.

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.