Polski frontend

Frontowisko

Frontend: podsumowanie 2021 – część 1.

Witamy w roku 2022! 🥳 Nadejście Nowego Roku to najlepszy czas, żeby zrobić sobie podsumowanie roku 2021 i tego co zmieniło się we frontend developmencie. W przeciwieństwie do innych dziedzin IT, trendy i zmiany na froncie zachodzą szybko, więc warto być z nimi na bieżąco. Jeśli nie śledziłaś/eś, tego co się działo w ciągu minionego roku, to zapraszamy! 😉 Frontend Wrapped 2021 Nie wiem jak Wy, ale ja bardzo lubię wszelkie coroczne podsumowania w aplikacjach. Tradycją dla mnie jest już Spotify Wrapped, czy podsumowanie na Stravie. Dzięki temu idzie dowiedzieć się rzeczy, o których nie miało się pojęcia – jak przesłuchanie 145 gatunków muzyki, gdzie moja wiedza kończy się pewnie na około 20 z nich 😀 Zatem zacznę również od „osobistych” podsumowań danych technologii. Powiedziałabym, że na pierwszy ogień pójdą HTML i CSS, ale jak można się spodziewać u HTMLa nic się nie zmieniło, cisza, spokój, nic się nie dzieje. Za to CSS nie próżnował – było, jest i będzie sporo nowości!   CSS: zmiany w 2021 Na początku roku 2021 Google wraz z innymi partnerami, jak Mozilla i Microsoft, ogłosiło projekt Web Developer Satisfaction, który miał za zadanie zebrać feedback od programistów i skupić się na kluczowych dla nich sprawach. I tak miniony rok był rokiem skupienia się na zgodności pomiędzy przeglądarkami – #Compat2021.   Źródło: bit.ly/3vO6Axz   Co poprawiono w CSSie? Tak jak już mogłyście/mogliście się dowiedzieć, przeglądarki mają różne silniki.  Przez to właśnie, niektóre właściwości CSSa nie działają tak samo na każdej z nich, a nawet wcale. Dlatego też wybrano 5 najważniejszych obszarów do popawienia błędów i niezgodności, tak aby wszystkim (nam developerom szczególnie) żyło się lepiej 😀 . CSS Flexbox CSS Grid CSS position: sticky CSS aspect-ratio property CSS transforms Pełen raport poprawek, związanych z powyższymi obszarami, znajdziecie na stonie web.dev.   Pod koniec grudnia przedstawiono podsumowanie prac, w tym również wyniki kompatybilności pomiędzy przeglądarkami. Źródło: Wyniki zgodności #Compat2021     Na pewno więkoszość z nas ucieszy możliwość używania już w pełni aspect-ratio, zamiast popularnego hacka z padding-top/padding-bottom. Dla osób, które mogą nie wiedzieć o co chodzi – aspect-ratio to współczynnik proporcji. Współczynnik ten dotyczy responsywności elementów, najczęściej obrazków, tak by zachowały one swoje proporcje przy zmniejszaniu, czy zwiększaniu okna przeglądarki i nie uległy tym samym jakiejś deformacji.   Źródło: web.dev   Nowe właściwości CSS A co z nowości? Ano mamy ich kilka, jednak ze względu, że niektóre mają jeszcze bardzo kiepskie wsparcie lub są wciąż w wersji eksperymentalnej, to przestawie tylko parę. Wprowadzono, m.in.: gap dla flexboxa – coś co najbardziej cieszy ❤ . Z właściwością gap najpewniej spotkaliście się stosując grida, natomiast obowiązuje ona teraz również dla flexboxa. Dzięki temu w bardzo prosty sposób można oddzielać od siebie elementy o zadaną wartość. See the Pen Flexbox gap by frontowisko (@frontowisko) on CodePen.   conic-gradient() – funkcja, dzięki której można stworzyć gradient kolorów zrotowanych wokół punktu środkowego. Dzięki temu robienie, np. wykresów w CSSie może stać się banalne 😉 . Przykład 1. Conic-gradient, zródło: CSS WG   Przykład 2. Repeating-conic-gradient, zródło: CSS WG   content-visibility – bardzo ciekawa właściwość CSS, w wersji jeszcze ograniczonej, bo wspieranej na Chromie, Edgu i Operze. Ma ona poprawiać wydajność renderowania elementów na stronie. To znaczy – element zostanie pominięty przy renderowaniu, dopóki nie będzie widoczny w oknie przeglądarki (dopóki do niego nie zescrollujemy).   CSS logical properties – właściwość nad którą pracowano od 2018, ale od minionego roku już szeroko wspierana. Dotyczy zmiany logiki dla paddingów, marginesów i borderów z uzględnieniem innej właściwości CSS tj. writing-mode czy też ustawionej właściwości lang (języka) w tagu html. O co właściwie w tym chodzi? Normalne flow dla dokumentu to horyzontalne, od lewej do prawej, tak jak teraz Wy to czytacie 😀 . Stąd jeśli ustawimy, np. margin-right: 20px, to pojawi się on po prawej stronie. Co w takim razie z językiem arabskim, gdzie flow dla tekstu jest od prawej do lewej? Czy też niektórymi krajami azjatyckimi, gdzie tekst nie dość, że od jest prawej do lewej, to jeszcze wertykalnie? Ustawiony przez nas margin-right, na pewno nie będzie poprawnie. Stąd do pozycji top, right, bottom, left, wymyślone odpowiedniki – inline/block, start i end, które będą działać niezależnie od flow.   Źródło: https://web.dev/logical-property-shorthands/   See the Pen Logical properties by frontowisko (@frontowisko) on CodePen. Parę słów od nas Przede wszystkim chciałybyśmy powitać Was w Nowym Roku, mamy nadzieję, że będziecie przez niego brnąć razem z nami 😉 . Dla nas to był szczególny rok, ponieważ powstało Frontowisko. Właściwie w grudniu 2020 urodził się pomysł na jego stworzenie, a póżniej zostały podjęte pierwsze kroki do powstania tego bloga. Można by powiedzieć, że dla Pauliny i dla mnie minął już pełen rok tutaj! Także życzymy sobie i Wam, aby nigdy nie brakło motywacji do tego, co sobie postanowicie. No i jeśli macie jakieś postanowienia czy cele na 2022, to śmiało, podzielcie się nimi! A co się tyczy dzisiejszego Frontend Wrapped 2021, to była dopiero pierwsze część – edycja CSS 😀 . Następna ukaże się w przyszłym tygodniu i będzie dotyczyła głównie Javascriptu oraz frameworków. Stay tuned!

Artykuł Frontend: podsumowanie 2021 – część 1. pochodzi z serwisu Frontowisko.