Za co uwielbiam SASS & Compass?

<brak wstępu>

• Zagnieżdżanie - podstawowa funkcja Sass, pozwalająca uniknąć powtarzania dużej ilości kodu. Świetne jest także odwoływanie się do referencji przez &. 
• Łatwe wyszukiwanie odpowiedniej linijki CSS w przeglądarce - Chrome Devtools pokazują, która linijka Sass jest odpowiedzialna za konkretną regułę CSS. Wystarczy przeskoczyć do pliku i ją wyszukać, a następnie zmienić w pliku. 

Front-endowe zagadki wszechczasów vol 1 - tajemnicza lupka

Witam z nową serią, w której będę przedstawiał zagadki z dziedziny front-endu. Pierwsza z nich:

Irek pracuje wraz z innymi deweloperami nad stroną, na której pojawił się dziwny błąd. Przy inpucie wyszukiwania czasem pojawia się jedna ikona lupki, a innym razem, nie ma jej wcale. Błąd pojawia się na komputerze klienta i nie ma na komputerze Irka oraz jego kolegów, niezależnie od rozdzielczości. Jest jednak na komputerze jego szefa, który pracuje na takich samych ekranach jak reszta + na laptopie. Błąd pojawia się także w trybie mobile na wszystkich komputerach.

Co może być przyczyną błędu Irka? Odpowiedź wkrótce.

PHPStorm vs Sublime Text - który edytor warto wybrać

Sublime Text był jedynym monitorem, jaki używałem przez ponad rok nauki i pracy w HTML, CSS i JS. Po zmianie pracy, dowiedziałem się, że w firmie używają PHPStorma i pierwsza myśl, która się pojawiła to:
"Czy będę mógł korzystać z Sublime?".
Drugą myślą, było zainstalowanie Storma i przetestowanie jego funkcji. Wcześniej korzystałem z wersji testowej, jednak nie potrafiłem zrobić w niej nic więcej, niż otworzenie i zamknięcie pliku. Po ponad miesiącu pracy z PHPStormem mam wyrobioną na jego temat bardzo pozytywną (chociaż może przedwczesną) opinię.

Firefox Developer Edition i Chrome Canary - przeglądarki dla deweloperów

Podczas pracy przy tworzeniu stron lub aplikacji mobilnych, często korzystamy z tego samego komputera do rozrywki. Zauważyłem, że częstym problemem staje się wtedy duża ilość zainstalowanych deweloperskich wtyczek, które zabierają pamięć RAM i moc procesora. Niektóre z nich trzeba regularnie włączać i wyłączać, ponieważ potrafią wyłączać niektóre funkcje przeglądarki - tak jest na przykład z wtyczkami, które wyłączają obsługę JS.

Vis.js - biblioteka JS do pięknego przedstawiania danych

Cześć,
w tym krótkim wpisie chciałem polecić bibliotekę Vis.js, która umożliwia łatwe i ładne przedstawianie różnych danych.
http://visjs.org/
Poniżej przedstawiam podstawowe zastosowanie tej biblioteki - wizualnizacja danych na timeline.

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

Button między sekcjami w Bootstrap 3

Jednym z najważniejszych pytań ludzkości jest to, jak zrobić button, który znajduje się na granicy dwóch containerów w Bootstrapie. Sam zmagałem się z tym wyzwaniem przez dłuższy czas, stosując różne, gorzej lub lepiej działające metody. Dzięki rozpisaniu tego problemu na Codepen, udało mi sie przypadkiem wpaść na rozwiązanie, które pozwala na uzyskanie zadowalającego efektu bez względu na rozmiar ekranu.
W skrócie - w col-md-x (ustala wielkość buttona) wrzucamy przycisk o klasie btn-block i stosujemy na nim translateY 50%, który przysuwa go o 50% wysokości do góry. Klasa btn-block dopasowuje  button do wielkości elementu nadrzędnego.

See the Pen button on the edge - bootstrap nightmare by Kamil (@KamilNaja) on CodePen.