W swojej prezentacji Szymon pokaże usprawnienia, które stosuje na co dzień w swojej pracy przy tworzeniu motywu: * edytor kodu z pluginem Emmet * hosting wspierający git i staging (plus aliasy w konsoli) * synchronizacja bazy danych i katalogu uploads z localhost do serwera zdalnego w dwie strony * wykorzystanie task runnerów (modułowy CSS dzięki SASS + automatyczny prefixer, łączenie plików JS i minifikacja, automatyczne przeładowanie przeglądarki po zapisaniu pliku, sprawdzanie poprawności kodu (linter), generowanie sprite’ów) * plus kilka dobrych rad *** Szymon Kądzielawa podczas WordCamp Lublin 2017: http://2017.lublin.wordcamp.org/session/optymalizacja-pracy-front-end-developera/

1. Optymalizacja pracy
front-end developera
Szymon Kądzielawa

2. Szymon Kądzielawa

3. Optymalizacja
«organizowanie jakichś działań, procesów itp.
w taki sposób, aby dały jak największe efekty
przy jak najmniejszych nakładach»
- Słownik języka polskiego pod red. W. Doroszewskiego, PWN

4. Dlaczego to ma znaczenie?
= 504 minuty = 8,4h
załóżmy:
- 252 dni pracujących w roku
- oszczędność tylko 2 minut dziennie
ponad 1 dzień!

5. Dlaczego jeszcze warto?
Lepszy komfort pracy
Wyższa jakość oprogramowania

6. Skróty
Twórz skróty do miejsc, gdzie często zaglądasz
np. katalog motywu dla bieżących projektów

7. Edytor tekstu
Dobrze wybierz i poznaj edytor tekstu!
Atom Sublime Text WebStorm

8. Szybkie przełączanie projektów
Zapisywanie obszaru roboczego
w edytorze tekstu

9. Szybkie przełączanie projektów
Zapisywanie obszaru roboczego
w edytorze tekstu

10. Jednoczesna edycja kilku linii kodu
ctrl + d / cmd + d w Sublime Text zaznaczamy te same
fragmenty kodu i możemy je jednocześnie edytować

11. Pluginy do edytora tekstu
Emmet
pozwala na szybsze tworzenie bloków HTML

12. Pluginy do edytora tekstu
Open-Include
pozwala na szybkie otwieranie importowanych plików
ALT
+ d

13. Opcja staging na hostingu
Umożliwia łatwe utworzenie kopii strony
w celu wprowadzenia zmian, po czym
zaaplikowanie ich „na żywo”

14. Strona produkcyjna
domena.wpengine.com

15. W panelu admina tworzymy staging

16. Gotowy staging
domena.staging.wpengine.com

18. Serwer z obsługą Gita
Praca wielu osób na tym samym projekcie,
bez obaw o nadpisanie kodu
Tworzenie gałęzi (git branch)
Pełna historia i możliwość cofnięcia zmian
Szybki podgląd zmian na stronie www (git push)

19. Aliasy w konsoli
Wpisanie danego aliasu zamiast pełnej komendy
gaa = git add --all
gcmsg "wiadomość" = git commit -m "wiadomość"
gpsm = git push staging master
glsm = git pull staging master
Pod MacOS i Linuksa polecam powłokę zsh z frameworkiem oh-my-zsh

20. „Synchronizacja” bazy danych
Problem:
Front-End dev
statyczna strona
Backend dev
dynamiczna wersja
Front-End dev
pobiera pliki

21. Rozwiązanie:
Plugin WP Migrate DB Pro
wysyłanie bazy danych
w obie strony z podmianą
URLi „w locie“
synchronizacja biblioteki
mediów

22. UWAGA!
Migracja =/= Synchronizacja!
Można stracić dane gdy na stronie pracuje kilka osób!

23. Systemy automatyzacji pracy

24. Kompilacja SASS / SCSS
Modularyzacja plików
projektu
Zmienne, zagnieżdżanie,
dziedziczenie etc.

25. Zarządzanie plikami JS
Łączenie małych modułów w jeden plik (konkatenacja)
Odchudzanie pliku wyjściowego (minifikacja)
Modularyzacja plików projektu

26. Tworzenie map kodu dla CSS i JS
Inspektor pokazuje plik źródłowy pliku
oraz numer linii

27. Automatyczne odświeżenie strony w przeglądarce
po zapisaniu pliku projektu (SCSS / JS / PHP etc.)

28. Linter kodu SCSS i JS
Sprawdzanie poprawności kodu SCSS i JavaScript
z regułami sass-lint i JSLint
Automatyczne dodawanie prefiksów do wyjściowego
pliku CSS
Autoprefixer

29. Małe obrazki w postaci spritów
arrow-left.png - 26 × 49px
arrow-right.png - 26 × 49px
calculator.png - 21 × 29px
add.png - 17 × 17px
ask.png - 18 × 18px
cog.png - 20 × 20px
sprite.png - 248 × 294px

30. Małe obrazki
w postaci spritów
Automatyczne utworzenie
mapy obrazków
@include sprite(arrow-left);
Wstawianie:

31. Kompilacja do wersji produkcyjnej
Automatyzacja procesu łączenia
kilku plików CSS/JS w jeden (konkatenacja)
i redukcja ich rozmiaru (minifikacja)
Kompresja obrazków

32. „Szybki” komputer
Zainwestuj w wydajny komputer z dyskiem SSD!
Otwieranie Photoshopa
około 40s vs 6 sekund
Kompilacja SASS i wyświetlenie wyniku w przeglądarce
3-6s vs błyskawicznie

33. Nie przemęcz się!
Szybszy komputer = szybsze tempo pracy!
Pamiętaj o odpoczynku oraz aktywności fizycznej

34. Dziękuję!