Wordpress - czy początkujący front-end developer powinien go znać?

Gdy po raz pierwszy zainteresowałem się tworzeniem stron WWW, najpierw zacząłem od przerobienia (bardzo pobieżnego) książki na temat HTML. Mój znajomy z pracy (pozdrawiam Pawła), pokazał mi wtedy CMS strony firmowej i byłem bardzo zaskoczony, że strony WWW edytuje się w ten sposób, a nie w kodzie. Potem przez dłuższy czas bawiłem się Joomlą (Panie, strzeż mnie od niej), by następnie pobrać Wordpressa. To było coś.

Pierwszy raz zainstalowałem go na Xampie i to był opad szczęki, w porównaniu do Joomli. Piękny i przejrzysty interface, wygodna edycja i świetny wygląd samego bloga "out of the box". Po jakimś czasie, ten CMS zmienił się i ludzie zaczęli używać go nie tylko do stawiania blogów, ale także stron Internetowych. W sieci pojawiły się miliony darmowych i płatnych szablonów, a także pluginów i … dodatków do pluginów. 
Pojawiło się coś jeszcze, mianowicie, fala hejtu na Wordpressa, głównie ze strony deweloperów. Sprzeczność - z Wordpresa korzystają miliony ludzi, a jednocześnie, jest on wyklikany, za wolne działanie, poważne luki czy trudności w modyfikacji i rozszerzaniu.

Wypada zatem zadać sobie pytanie - czy warto uczyć się Wordpressa, czy też lepiej dać sobie z nim spokój, i zacząć naukę czegoś innego. 

Czy warto uczyć się Vima? Edytor dla początkującego

Pytanie na dzisiaj - czy warto uczyć się Vima?

Na wstępie chcę zaznaczyć, że Vima znam pobieżnie i nie używałem go, jako narzędzia do pracy zarobkowej. Tekst pisany z poziomu amatora, który wypróbował Vima, odbił się od niego i kilkukrotnie wracał. 

Jednym z ważnych czynników, decydującym o wydajności pracy programisty, jest dobra znajomość edytora tekstu. Dziś jesteśmy rozpieszczani przez twórców oprogramowania i możemy korzystać z takich doskonałych (mniej lub bardziej) edytorów, jak:

O co warto zapytać na rozmowie kwalifikacyjnej?

Najtrudniejsze pytanie na rozmowie kwalifikacyjnej dla wielu osób, to "czy ma Pan/Pani jakieś pytania. Początkujący deweloperzy, często patrzą wtedy na swoje sznurowadła i mówią, że "na ten moment, to pytań nie mam". To błąd!! Oto lista kilku rzeczy, o które powinieneś zapytać rekrutera/osobę z działu technicznego.

1. Na jakim sprzęcie pracujecie - pytaj o system operacyjny, rodzaj komputerów (stacjonarne, laptopy), ilość monitorów.
2. Stak technologiczny - czyli czego używa się przy projektach.
3. Na jakim oprogramowaniu pracujecie - niektóre firmy używają jednego IDE (np Webstorma, Intellij, VSCode) i warto się go poduczyć, przed przyjściem do pracy. Mi to bardzo pomogło.
4. Czy w firmie będę pracował nad jednym projektem, czy nad wieloma różnymi?
5. Jak dużo osób pracuje w firmie?
6. Jak wygląda siedziba firmy? Właściciele chętnie chwalą się wypasioną siedzibą. Czasem projekt jest u klienta i spotkałem się już z pracą w bardzo złych warunkach, typu za mało miejsca.
7. Rozrywki w pracy - czy firma oferuje na przykład piłkarzyki (pomału staje się to standardem).
8. Czy firma zatrudnia osoby na moim stanowisku (to ważne, gdy jesteś początkujący i okazuje się, że w firmie nie masz się kogo zapytać o rozwiązania w danej technologii).
9. Czy godziny pracy są elastyczne?
10. Benefity (chociaż jeśli są, to rekruter wspomina o nich zwykle na początku)
11. Możliwość pracy zdalnej (na początku raczej nastaw się na pracę stacjonarną)
12. Urlopy, dni wolne - w niektórych firmach są bezpłatne, w innych, dostajesz urlop w pełnym wymiarze jak na etacie (chodzi o umowy B2B)
13. Rodzaj umowy - B2B, o pracę, o dzieło (najczęściej jest wymieniona w ogłoszeniu)
14. Sposób rozliczania nadgodzin i czy występują nadgodziny. 
15. Możliwość rozwoju w ramach firmy, dostęp do książek, materiałów edukacyjnych itd
16. Najważniejsze pytanie ever - czy w firmie obowiązuje dress code. Na szczęście, dzisiaj już nikogo nie dziwi deweloper w bojówkach:)

Jeśli masz swoje propozycje, to dopisz je w komentarzu.

Jak stworzyć tła elementów za pomocą sprajtów?

Bez zbędnych wstępów:

1 - Przed stworzeniem sprajta, warto zmierzyć, jakie wymiary mają mieć docelowo obrazki. Po jego utworzeniu, będzie to trudne i często kończy się koniecznością dopasowywania obrazków od nowa.

2 - Obrazki przycinamy w ulubionym programie graficznym do odpowiedniego rozmiaru. W Photoshopie rozmiar zdjęcia zmieniamy skrótem ctrl+shift+i.  Najlepiej, jeśli są to pliki PNG z przezroczystym tłem. Wrzuć je do jednego folderu, by nie zapomnieć o żadnym z obrazków.

3 - Nadaj obrazkom odpowiednie nazwy - jeśli nazywają się na przykład img0adfadsadsd.png, będziesz miał potem więcej pracy przy tworzeniu klas.

3 - Wejdź na stronę http://spritegen.website-performance.org/ i załaduj swoje obrazki. W pierwszej kolejności kliknij "clear" by wyczyścić canvas.

4 - W ustawieniach wybrałem ułożenie obrazków w linii i zmniejszyłem padding.

5 - Wybierz eksport i pobierz spritesheet oraz plik CSS. Od tej pory nie powinieneś manipulować rozmiarami spritesheet, bo konieczne będzie jego utworzenie od nowa. Przy ułożeniu liniowym, można jednak łatwiej dodać na przykład jeszcze jedną ikonkę.

6 - Wrzuć plik sprajtów do folderu ze zdjęciami Twojej strony WWW i do Twojego arkusza CSS (SCSS), wklej kod CSS. Warto sobie zaznaczyć, że tego kodu nie powinniśmy zmieniać. Konieczna jest zmiana ścieżki do folderu ze sprajtem.

7 - Plik CSS zawiera zwykle dwa rodzaje klas - jedną ogólną, która wskazuje na plik z backgroundami (np .sp), oraz kilka klas z przedrostkiem (np. sp-dom), które  wskazują na pozycję elementu na sprajcie. Aby dodać obrazek tła do elementu, dodaj do niego jedną i drugą klasę. Podobnie z kolejnymi elementami.

W załączonym penie pokazuje sam HTML, bez arkusza ze sprajtami.

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

Achtung!

Jeśli Twój element miał określony background-color przez  właściwość background i dodasz do niego klasę określającą background-image, kolor przestanie się wyświetlać. Aby z tego wybrnąć, określ kolor przez bardziej specyficzną właściwość background-color.

Tak nie zadziała, background nadpisuje background-color

Jeśli chcesz na przykład zmienić kolor wszystkich ikonek, to możesz to zrobić po stworzeniu sprajta, by nie przeprowadzać tej operacji osobno dla każdego pliku.

Attenzione Attenzione!

Gdy Twój element ma duży padding i małe kafelek tła w środku, tło też musi mieć duże obramowanie.

PS - jest jeszcze lepszy przepis na sprity, mianowicie, wykorzystanie Compass (http://compass-style.org/help/tutorials/spriting/), ale to temat na inny wpis.

Prosta lista rzeczy do zrobienia w ... Twoim edytorze

Listy To Do pozwalają zorganizować pracę i zdziałać więcej w krótszym czasie. Jeśli działasz w kilku projektach, trudno Ci będzie bez nich się obyć. Największym problemem z zarządzaniem zadaniami, jest zdecydowanie się na odpowiednie narzędzie.
Przykładowo - Trello jest super, ale nie pozwala przyjrzeć się jednocześnie kilku projektom na jednym ekranie. Asana jest ciekawa, ale ma denerwującego latającego jednorożca (kiedyś napiszę o tym, jak nie dostałem przez niego pracy). Wunderlist - wygląda super, ale nie ma wielu potrzebnych opcji. PHPStorm ma bardzo rozbudowane opcje zarządzania zadaniami, które są dla mnie zbyt skomplikowane, natomiast do Sublime Text, można doinstalować Plain Task, oferujący ciekawe opcje. Niestety, ale Plain Task nie działa na innych edytorach :( Przykłady można mnożyć w nieskończoność.

A gdyby tak, korzystać z najprostszych narzędzi, takich, jak zwykły plik HTML, który załadujesz do swojego edytora tekstu? Nasz będzie obsługiwał metodologię Kanban.

1 - Stwórz w dowolnym miejscu plik task.html (nazwa dowolna). Możesz wrzucić plik na Dropboxa albo na Githuba (raczej w repozytorium prywatne)
2 - W pliku stwórz trzy sekcje, dla rzeczy do zrobienia, robionych i zrobionych

3 - Do sekcji Todo dodaj kilka rzeczy do zrobienia. Gdy zaczynasz je robić, przenieś do sekcji In progress. Wszystkie nowoczesne edytory, obsługują skrót przeniesienia wiersza powyżej/poniżej (w Sublime Text i PHPStorm to ctrl + shift + strzałka)

4 - Gdy rzeczy są zrobione, przenieś je do sekcji Done. Gdy nagromadzi się w niej nadmiar niepotrzebnych rzeczy, wyczyść ją!
Możesz zrobić takie osobne listy zadań do każdego projektu. Możesz też stworzyć projekt i wcięciami pokazać, że pewne rzeczy przynależą do niego. Pamiętaj, że w sekcji In progress powinna znajdować się jednocześnie tylko jedna rzecz !