Prezentacja przygotowana na Bydgoszcz Web Development Meetup #4. Prezentacja porusza tematykę dobrych praktyk CSS, BEM i OOCSS na przykładzie inuit.css.
Czy następuje taki moment w życiu programisty, kiedy może on stwierdzić, że jego warsztat jest już doskonały? Nie, jeżeli pracuje w technologiach internetowych. Ta dziedzina informatyki rozwija się w niesamowicie szybkim tempie, a stworzone wczoraj rozwiązania warto stosować już dziś! Podczas prelekcji słuchacze poznają aktualne możliwości, jakie dają web developerowi różne biblioteki, narzędzia developerskie oraz usługi.
4Developers 2015: Frameworki jee vs cross-site scripting (xss) - Piotr BuckiPROIDEA
Speaker: Piotr Bucki
Language: Polish
Celem wykład jest pokazanie na czym polega atak XSS i jakie są jego rodzaje oraz dostępne zabezpieczenia w popularnych frameworkach Java. Wykład jest przeznaczony dla osób tworzących aplikacje korzystając z WEBowych frameworków Java.
XSS (Cross-site scripting) jest rodzajem ataku na użytkownika serwis WWW, który polega na wykonaniu kodu przygotowanego przez atakującego (zazwyczaj JavaScript, ale także AciveX, Flash czy Silverlight) w przeglądarce ofiary.
4Developers: http://4developers.org.pl/pl/
DynamoDB jest z nami od dłuższego czasu i pomimo rosnącej popularności dla części z nas logika kryjąca się za DynamoDB nie wydaje się być jasna. Wymaga od nas zmiany myślenia o strukturze danych, zmiany naszych przyzwyczajeń oraz dostosowania się do mocno wyznaczonych reguł. W swojej prezentacji Marcin postara się wytłumaczyć skąd biorą się różnice pomiędzy dobrze nam znanym światem SQL a światem NoSQL. Opowie również o tym, jak zacząć modelowanie tabel oraz czym są i do czego służą GSI.
Dobre i złe praktyki kodowania w CSS czyli...
zostań nindżą CSS już dziś*!
*satysfakcja z udziału w prezentacji ani zwrot pieniędzy nie są gwarantowane
Prezentacja przygotowana na Bydgoszcz Web Development Meetup #4. Prezentacja porusza tematykę dobrych praktyk CSS, BEM i OOCSS na przykładzie inuit.css.
Czy następuje taki moment w życiu programisty, kiedy może on stwierdzić, że jego warsztat jest już doskonały? Nie, jeżeli pracuje w technologiach internetowych. Ta dziedzina informatyki rozwija się w niesamowicie szybkim tempie, a stworzone wczoraj rozwiązania warto stosować już dziś! Podczas prelekcji słuchacze poznają aktualne możliwości, jakie dają web developerowi różne biblioteki, narzędzia developerskie oraz usługi.
4Developers 2015: Frameworki jee vs cross-site scripting (xss) - Piotr BuckiPROIDEA
Speaker: Piotr Bucki
Language: Polish
Celem wykład jest pokazanie na czym polega atak XSS i jakie są jego rodzaje oraz dostępne zabezpieczenia w popularnych frameworkach Java. Wykład jest przeznaczony dla osób tworzących aplikacje korzystając z WEBowych frameworków Java.
XSS (Cross-site scripting) jest rodzajem ataku na użytkownika serwis WWW, który polega na wykonaniu kodu przygotowanego przez atakującego (zazwyczaj JavaScript, ale także AciveX, Flash czy Silverlight) w przeglądarce ofiary.
4Developers: http://4developers.org.pl/pl/
DynamoDB jest z nami od dłuższego czasu i pomimo rosnącej popularności dla części z nas logika kryjąca się za DynamoDB nie wydaje się być jasna. Wymaga od nas zmiany myślenia o strukturze danych, zmiany naszych przyzwyczajeń oraz dostosowania się do mocno wyznaczonych reguł. W swojej prezentacji Marcin postara się wytłumaczyć skąd biorą się różnice pomiędzy dobrze nam znanym światem SQL a światem NoSQL. Opowie również o tym, jak zacząć modelowanie tabel oraz czym są i do czego służą GSI.
Dobre i złe praktyki kodowania w CSS czyli...
zostań nindżą CSS już dziś*!
*satysfakcja z udziału w prezentacji ani zwrot pieniędzy nie są gwarantowane
Foundations of Foundation 6 - Jakub Włodaczyk (pl)Sunscrapers
How can you get your projects from prototype to production in a faster, lighter and more flexible way?
Kuba familiarized us with Foundation 6 frontend framework and its features.
Podczas prezentacji Michał pokaże, w jaki sposób możemy wykorzystać zasady znane z tworzenia oprogramowania w różnych językach backendowych, oraz jak zastosować je do tworzenia styli stron internetowych. Dzięki ich wykorzystaniu projekt, nad którym pracujemy, jest bardziej przejrzysty oraz optymalnie napisany, co pozwala na szybsze poprawki w przyszłości.
***
Michał Strześniewski podczas WordCamp Lublin 2017:
http://2017.lublin.wordcamp.org/session/css-workflow-czyli-jak-pracowac-z-css-em/
4Developers 2015: .NET 2015 - co nowego? - Michał Dudak, Future ProcessingPROIDEA
Language: Polish
Rok 2015 przynosi spore zmiany w środowisku .NET. Całkiem nowy ASP.NET, .NET Core, C# 6.0 czy Entity Framework 7 to tylko niektóre z nowości, których możemy spodziewać w tym roku. Na wykładzie chciałbym opowiedzieć o nowych możliwościach czekających na .netowców w połowie roku.
Jak 5 narzędzi złożyło się na sukces hurtowni
Maciek jest kierownikiem projektu hurtowni danych, Przemek liderem zespołu programistów. Razem zaprezentują jakie (darmowe) narzędzia developerskie usprawniły prace programistom oraz jakie pozytywne „efekty uboczne” przyniosły one zarówno w samym projekcie jak i w jego otoczeniu. Następnie przedstawią jak doprowadziło ich to – szybciej niż myśleli – do automatu, który na bieżąco buduje z najnowszych źródeł, wdraża i testuje hurtownię danych.
W sieci znajdziemy obecnie ponad 60 mln stron opartych na WordPressie. Korzystają z niego nie tylko blogerzy, ale także agencje interaktywne, tworzące złożone strony firmowe i pojedyncze osoby zakładające własną stronę internetową.
Zacznij swoją przygodę z tworzeniem stron i dowiedz się jak w jeden wieczór postawić i dostosować własnego bloga, portfolio czy stronę firmową. Na spotkaniu omówimy podstawy, takie jak struktura i funkcjonowanie WordPressa, jego instalacja czy dostosowywanie szablonu.
Marta Sztybor - Zorientowany obiektowo CSS, czyli jak tworzyć layouty aplikac...The Awwwesomes
Jak projektować layouty aplikacji, żeby ułatwić frontendowcom ich kodowanie i oszczędzić problemów z utrzymaniem kodu? Czemu chcemy, aby nasze dizajny były modularne?
Prezentacja wprowadzi Was w świat obiektowego, modularnego CSS.
Frontendowcy dowiedzą się, dlaczego stosujemy konwencje nazewnictwa w CSS oraz jak podejść do kodowania w sposób zorientowany na komponenty (obiekty).
Projektanci poznają korzyści z tworzenia layoutów jako całości zbudowanej z reużywalnych bloków (wspomnianych wcześniej komponentów) oraz jak pomóc sobie przy współpracy z frontendowcami nad aplikacją.
Kod do demonstracyjnej "aplikacji" znajduje się na repozytorium: https://github.com/sztyborek/obiektowy-css-demo
Wtyczka W3 Total Cache to potężne narzędzie, za pomocą którego można znacząco przyśpieszyć działanie naszego serwisu. Warto wiedzieć jak używać różnych mechanizmów cache, ograniczyć ilość żądań wysyłanych do serwera, zmniejszyć rozmiar strony czy korzystać z CDN.
Foundations of Foundation 6 - Jakub Włodaczyk (pl)Sunscrapers
How can you get your projects from prototype to production in a faster, lighter and more flexible way?
Kuba familiarized us with Foundation 6 frontend framework and its features.
Podczas prezentacji Michał pokaże, w jaki sposób możemy wykorzystać zasady znane z tworzenia oprogramowania w różnych językach backendowych, oraz jak zastosować je do tworzenia styli stron internetowych. Dzięki ich wykorzystaniu projekt, nad którym pracujemy, jest bardziej przejrzysty oraz optymalnie napisany, co pozwala na szybsze poprawki w przyszłości.
***
Michał Strześniewski podczas WordCamp Lublin 2017:
http://2017.lublin.wordcamp.org/session/css-workflow-czyli-jak-pracowac-z-css-em/
4Developers 2015: .NET 2015 - co nowego? - Michał Dudak, Future ProcessingPROIDEA
Language: Polish
Rok 2015 przynosi spore zmiany w środowisku .NET. Całkiem nowy ASP.NET, .NET Core, C# 6.0 czy Entity Framework 7 to tylko niektóre z nowości, których możemy spodziewać w tym roku. Na wykładzie chciałbym opowiedzieć o nowych możliwościach czekających na .netowców w połowie roku.
Jak 5 narzędzi złożyło się na sukces hurtowni
Maciek jest kierownikiem projektu hurtowni danych, Przemek liderem zespołu programistów. Razem zaprezentują jakie (darmowe) narzędzia developerskie usprawniły prace programistom oraz jakie pozytywne „efekty uboczne” przyniosły one zarówno w samym projekcie jak i w jego otoczeniu. Następnie przedstawią jak doprowadziło ich to – szybciej niż myśleli – do automatu, który na bieżąco buduje z najnowszych źródeł, wdraża i testuje hurtownię danych.
W sieci znajdziemy obecnie ponad 60 mln stron opartych na WordPressie. Korzystają z niego nie tylko blogerzy, ale także agencje interaktywne, tworzące złożone strony firmowe i pojedyncze osoby zakładające własną stronę internetową.
Zacznij swoją przygodę z tworzeniem stron i dowiedz się jak w jeden wieczór postawić i dostosować własnego bloga, portfolio czy stronę firmową. Na spotkaniu omówimy podstawy, takie jak struktura i funkcjonowanie WordPressa, jego instalacja czy dostosowywanie szablonu.
Marta Sztybor - Zorientowany obiektowo CSS, czyli jak tworzyć layouty aplikac...The Awwwesomes
Jak projektować layouty aplikacji, żeby ułatwić frontendowcom ich kodowanie i oszczędzić problemów z utrzymaniem kodu? Czemu chcemy, aby nasze dizajny były modularne?
Prezentacja wprowadzi Was w świat obiektowego, modularnego CSS.
Frontendowcy dowiedzą się, dlaczego stosujemy konwencje nazewnictwa w CSS oraz jak podejść do kodowania w sposób zorientowany na komponenty (obiekty).
Projektanci poznają korzyści z tworzenia layoutów jako całości zbudowanej z reużywalnych bloków (wspomnianych wcześniej komponentów) oraz jak pomóc sobie przy współpracy z frontendowcami nad aplikacją.
Kod do demonstracyjnej "aplikacji" znajduje się na repozytorium: https://github.com/sztyborek/obiektowy-css-demo
Wtyczka W3 Total Cache to potężne narzędzie, za pomocą którego można znacząco przyśpieszyć działanie naszego serwisu. Warto wiedzieć jak używać różnych mechanizmów cache, ograniczyć ilość żądań wysyłanych do serwera, zmniejszyć rozmiar strony czy korzystać z CDN.
Contributor Day - WordCamp Lublin 2017 - przegląd motywówTomasz Dziuda
Zbiór porad i informacji dla osób chcących zajmować się przeglądem motywów kandydujących do pojawienia się na oficjalnym repozytorium WordPress.org. Przygotowany z myślą o uczestnikach Contributor Day
Na Contributor Day przed WordCampem w Gdyni przeprowadziłem review motywu na żywo dla uczestników, którzy również przeglądali motywy. Zauważyłem, że dla wszystkich było to interesujące doświadczenie i pokazywało wiele kwestii, które normalnie się pomija mówiąc jak przeglądać motywy.
Dlatego przejrzałem kod kilkudziesięciu motywów (nie mylić z pełnym review) z kilkuset czekających w kolejce do przejrzenia i wybrałem najciekawsze błędy developerów motywów, aby je omówić i zaproponować lepsze rozwiązania.
Dlaczego? Bo jedną z idei oprogramowania Open Source jest wspólna nauka (także ta na cudzych błędach).
Prezentacja otwierająca WordCamp Gdynia 2016, traktująca o czynnikach wpływających na ekosystem WordPressa oraz o tym jak będzie wyglądała przyszłość WordPressa.
Webinar: 5 Tricks for WordPress web administratorsTomasz Dziuda
This document provides 5 tricks for WordPress web administrators. It discusses limiting user permissions, using activity logs, must-use plugins, customizing the dashboard UI, and optimizing workflows. Some key tips include using plugins to limit user permissions, enable activity logs, adjust dashboard colors and menus, and automate backups and updates. It recommends using custom CSS or child themes cautiously and considering alternatives to major version updates.
5. Dlaczego warto poznać LESS?
• Popularność (np. Bootstrap, Joomla!)
• Ponowne wykorzystanie kodu
• Udostępnia to czego nie ma (a powinien) CSS
• Dobry na początek przygody z preprocessorami CSS
6. Zalety LESS
1. Łatwe zarządzanie kolorami, rozmiarami tekstu etc.
2. Pozwala zapomnieć o vendor prefixes
3. Zmniejszenie liczby plików CSS
4. Łatwiejsze tworzenie dedykowanych plików CSS
dla wybranych podstron
7. Wady LESS
• Wymaga dodatkowego kroku przy pracy z plikami
• Może powodować problemy ze znalezieniem
odpowiedniego fragmentu kodu w Chrome Dev
Tools czy Firebugu
• Nieumiejętnie stosowany może wygenerować sporo
nadmiarowego kodu CSS.
• Wciąż brakuje mu wielu udogodnień znanych np. z
SASS
8. IE a duże pliki CSS
Przy korzystaniu z jednego pliku warto pamiętać, że
IE < 10 ma limit 4095 selektorów w jednym pliku:
http://marc.baffl.co.uk/browser_bugs/css-selector-limit/
12. Sublime Text 2
Dzięki rozszerzeniom posiada zaawansowane
wsparcie dla LESS: parsowanie plików przy
zapisie, określanie miejsca docelowego dla
plików LESS, pomijanie plików przy
generowaniu plików CSS etc.
13. Espresso, Dreamweaver i inne
Pozostałe edytory z reguły pozwalają co najmniej
na dodanie wsparcia dla składni LESS.
27. Parsowanie CSS w przeglądarkach
Warto na to zwrócić uwagę gdy:
• Liczy się dla nas każda milisekunda
• Nasz kod CSS jest naprawdę złożony
• Gdy mamy problemy z wydajnością
renderowania się strony (głównie
urządzenia mobilne)
28. Parsowanie CSS w przeglądarkach
Przeglądarki parsują selektory
od prawej do lewej:
#menu li a
29. Parsowanie CSS w przeglądarkach
Selektor potomka jest najwolniejszym z selektorów
#menu li a
(trochę) lepiej jest użyć:
#menu > li > a
30. Parsowanie CSS w przeglądarkach
Klasyfikacja reguł według wydajności (malejąco):
1. reguły ID
2. reguły klas
3. reguły tagów
4. reguły uniwersalne
Powyższa klasyfikacja jest uproszczona dla celów poglądowych - tak naprawdę
najwolniejsze są pseudoklasy i selektory atrybutów, a dodatkowo pomiędzy ID a
klasami z reguły nie ma zbyt wielkich różnic w wydajności.
36. Podwójne właściwości
Nawet jeżeli powtórzymy jakąś właściwość,
to jeżeli w obu wypadkach ma ona taką samą
wartość - nie zostanie ona powielona
(pod warunkiem, że powielimy ją w obrębie jednej klasy/mixinu)
37. Ukrywanie mixinów
Mixiny traktowane są jak klasy CSS chyba, że zrobimy
z nich mixiny bezparametrowe:
.shadows() {
box-shadow: 0 0 3px #000;
text-shadow: 0 0 3px #000;
}
Są one wtedy ukrywane w wynikowym kodzie CSS
40. Mixiny - !important
Użycie !important po mixinie powoduje automatyczne
dodanie !important do wszystkich właściwości w nim użytych
.shadows(20px; #aaa) !important;
41. Guard mixins
.mixin(@a) when (@a > 10)
.mixin(@a) when (@a > 10), (@a < 100) // OR
.mixin(@a) when (@a > 10) and (@a < 100)
.mixin(@a) when not (@a > 10)
42. Selektory w mixinach
W mixinach można umieszczać też całe grupy
selektorów, co powoduje, że możemy generować
fragmenty kodu zależnie od wartości zmiennych:
.mixin() {
.selector {
property: value;
}
}
45. Importowanie kodu
LESS pozwala zarówno na importowanie plików *.css jak i *.less
W wypadku plików *.css wszystkie deklaracje @import
przenoszone są podczas kompilacji na samą górę pliku
(ewentualnie są umieszczane zaraz po @charset)
46. Importowanie kodu
Pliki *.less można importować wewnątrz reguł CSS:
.class {
@import “test.less”;
border: 10px solid #aaa;
}
49. Przecinki a średniki
Parametry można rozdzielać przecinkami lub średnikami, przy
czym średniki są bezpieczniejsze:
.shadows(@size: 3px; @color: #000) {
box-shadow: 0 0 @size @color;
text-shadow: 0 0 @size @color;
}
Na końcu parametru z przecinkami można dodać średnik aby był
traktowany jako jeden argument:
.test(a, b, c;);
50. Drugi sposób na przecinki
~”text”
Ważne!
samo “text” powoduje wstawienie wartości z cudzysłowami
52. Takie same nazwy mixinów
Możemy zdefiniować kilka mixinów o tej samej nazwie - użyte
zostaną wszystkie mixiny, które mają odpowiednie argumenty
.mixin(@a; @b: 10);
.mixin(@a: 20; @b: 10);
.mixin(@a:30; @b);
W powyższym wypadku wywołanie:
.mixin(10);
spowoduje wykorzystanie kodu CSS z pierwszego i drugiego
mixinu (i powielenie właściwości CSS!)
53. Złożone argumenty mixinów
@arguments pozwala użyć wartości
wszystkich parametrów za jednym zamachem:
.shadows(@size: 3px; @color: #000) {
box-shadow: 0 0 @arguments;
text-shadow: 0 0 @arguments;
}
54. Mixiny - @rest
LESS pozwala na określenie zmiennej ilości
argumentów - tutaj przydaje się zmienna @rest:
.shadows(@pos: 3px 4px; @rest...) {
box-shadow: @pos @rest;
text-shadow: @pos @rest;
}
Można też sprawić, że pierwsza zmienna przyjmie
dowolny ciąg argumentów:
.test(@a...) {
...
}
55. Mixiny - pattern matching
Jako pierwszy argument mixina możemy podać ciąg znaków -
wtedy będzie wymagał do swojego wywołania podania tego
ciągu znaków jako pierwszego argumentu:
.margins(mobile; @value: 20px)
.margins(tablet; @value: 30px)
.margins(@_;@value: 50px)
Wtedy pierwszy mixin wywoła się gdy:
@mode: mobile;
.margins(@mode);
.margins(@mode; 10px);
56. Kod JS w mixinach
Kod JS jest wykonywany gdy użyjemy składni:
`kod JS`
.class {
height: `document.body.clientHeight`;
}
(działa tylko z less.js)
60. Co dalej?
• LESS się ciągle rozwija - trzeba być na bieżąco ;-)
• Analiza kodu LESS popularnych otwartych projektów
• Praktyka, praktyka i jeszcze raz... praktyka ;-)
• SASS?
61. Źródła informacji
1. http://lesscss.org/ (EN)
2. http://ciembor.github.io/lesscss.org/ (PL)
3. https://github.com/cloudhead/less.js/wiki (EN)
4. Stack Overflow ;-)