Narzędzia do programowania front-end

Tworzenie stron internetowych można podzielić na dwie części – front-end i back-end. Front-end (część kliencka) powinien zawierać układ HTML ze stylami CSS i JavaScript, a back-end – część serwerową, która jest zwykle napisana w Pythonie, PHP, Ruby i tak dalej.

Mówiąc prościej, to, co końcowy użytkownik widzi w przeglądarce, najbardziej rzuca się w oczy to front-end.

A to, co kryje się przed ludzkimi oczami pod maską, to back-end.

Jak być może zauważyłeś, jeśli istnieje długa lista języków programowania po stronie serwera, to po stronie klienta JavaScript nie ma konkurencji.

Często też front-end dzieli się na projektowanie i rozwój. Projektant front-end bardziej zajmuje się tworzeniem interfejsów użytkownika i dobrze zna HTML i CSS.

Ma też dobre narzędzia do tworzenia layoutów, ma poczucie piękna. Czasami nie lubi JavaScript, ale umiejętnie korzysta z dodatków, takich jak jQuery.

Zasadniczo lubi wdrażać rozwiązania projektowe. Deweloperzy Front-End zwracają większą uwagę na pisanie kodu w JavaScript. Ramy, algorytmy, paradygmaty programowania itp. nie są dla niego czymś niezrozumiałym.

Jakie zatem są narzędzia, które ułatwią życie front-end developerowi w 2021 roku? Omówmy ten aktualny temat.

Brzmi to ironicznie, ale chociaż rozwój front-endu ma modułowe zalety komponentów, nadal jest bardziej monolityczny niż mikrousługi back-endowe.

Micro-front-end zapewnia możliwość podzielenia architektury front-endu na różne części dla wielu zespołów.

Każdy zespół zarządza kompleksowym cyklem życia określonego mikro-frontonu dostępnego do niestandardowego programowania, wersjonowania, testowania, renderowania, aktualizowania i wdrażania (na przykład przy użyciu narzędzi takich jak Bit).

Współczesny ekosystem wciąż ma pewne wady. Najczęstsze problemy to wdrażanie oddzielnych frontonów, łączenie, różnice w środowiskach i tak dalej.

Dzięki Bitowi możesz izolować, wersjonować, rozwijać, testować i aktualizować poszczególne interfejsy/komponenty.

Obecnie te możliwości są wykorzystywane podczas pracy z wieloma aplikacjami (a także do stopniowej refaktoryzacji części istniejących aplikacji za pomocą komponentów).

Projektowanie atomowe to bardziej filozofia niż czysta metodologia.

Teoria przedstawiona przez programistę Brada Frosta porównuje skład aplikacji internetowych do naturalnego składu atomów, cząsteczek, organizmów i tak dalej.

Atomy tworzą cząsteczki (np. wprowadzanie tekstu + przycisk + etykieta atom = szukana cząsteczka). Cząsteczki tworzą ciało. Organizmy żyją w szablonie warstwy, który można przekształcić w stronę prezentowaną użytkownikom.

Korzyści z komponentów atomowych wykraczają poza budowanie modułowych aplikacji interfejsu użytkownika za pomocą komponentów modułowych i wielokrotnego użytku.

Ten paradygmat zmusza Cię do zastanowienia się nad kompozycją, aby lepiej zrozumieć rolę i API każdego komponentu, ich hierarchię oraz jak skutecznie abstrahować proces tworzenia aplikacji.

Moim zdaniem przyszłość należy do nich.

Czemu? Ponieważ te czyste komponenty sieciowe są niezależne od frameworka, mogą działać bez użycia go lub bez standaryzacji.

Nie zawierają JS i są obsługiwane przez nowoczesne przeglądarki. Ich rozmiar i zużycie pakietów są optymalne, a renderowanie DOM jest niesamowite.

Te komponenty dostarczają Custom Element, JavaScript API do definiowania nowego typu tagów HTML, szablony HTML do definiowania warstw oraz shadow DOM dostarczany z komponentami.

Godne uwagi narzędzia w tym frameworku to Lit-HTML (i element Lit), StencilJS, SvelteJS i Bit.

Nadejście rozwoju opartego na komponentach zrodziło wiele narzędzi. Jednym z najbardziej znanych jest Bit i jego platforma hostingowa Bit.dev.

Dzięki Bitowi możesz wyizolować i wyeksportować istniejące komponenty do dynamicznej, udostępnionej kolekcji wielokrotnego użytku.

Na platformie bit.dev (lub na serwerze) komponenty mogą być zdalnie organizowane dla wielu zespołów, dzięki czemu każdy zespół kontroluje rozwój własnych komponentów.

Platforma zapewnia również wbudowany ekosystem dla typowych komponentów: automatycznie dokumentuje komponenty interfejsu użytkownika, renderuje je na interaktywnej platformie, a nawet zapewnia wbudowany rejestr do instalowania ich za pomocą npm / przędzy.

Alternatywnie możesz użyć importu bitów do importowania komponentów i wprowadzania zmian w dowolnym repozytorium.

W krótkim okresie podejście to zrewolucjonizuje współdzielenie komponentów, aw dłuższej pomoże utorować drogę mikrofrontom.

Jak? Dzięki niemu możesz już budować wersje, testować, rozwijać i aktualizować części aplikacji UI.

Podczas gdy wyzwania związane z globalnym zarządzaniem stanem w aplikacji stają się coraz bardziej widoczne wraz ze wzrostem modułowości interfejsu, Redux staje się ratunkiem dla wielu zespołów.

Czy pożegnamy się z Redux w 2021 roku? Brzmi jak nie?

Jednak pojawienie się nowych funkcji we frameworkach obsługujących stany (haki React, Context-API itp.) toruje drogę do przyszłości bez pamięci globalnej.

Narzędzia takie jak Mobx stają się coraz bardziej popularne każdego dnia ze względu na ich zorientowaną na komponenty i skalowalną naturę.

ES Modules to standard ECMAScript do pracy z modułami w przeglądarce. Mogą być używane do łatwego enkapsulacji funkcjonalności w modułach używanych za pośrednictwem sieci CDN itp.

Wraz z wydaniem Firefoksa 60 wszystkie główne przeglądarki będą obsługiwać moduły ES, a zespół Node już pracuje nad dodaniem ich obsługi w Node.js.

Ponadto zostaną one zintegrowane z WebAssembly w ciągu najbliższych kilku lat.

Sprite CSS to ważna technika optymalizacji czasu ładowania, łącząca wiele małych grafik w jeden duży plik graficzny.

Poszczególne grafiki można następnie wyświetlić, odpowiednio umieszczając grafikę jako obraz tła w żądanym miejscu.

Brzmi to skomplikowanie i wymaga wiele dopracowania. Byłoby bez następujących przydatnych narzędzi:

Optymalizuj witrynę: Jeśli chcesz wyposażyć istniejącą witrynę w sprite CSS (co polecam wszystkim), narzędzie SpriteMe może pomóc.

Po prostu przejdź do spriteme.org i przeciągnij wyświetlony tam link do paska zakładek przeglądarki. Możesz teraz wywołać narzędzie, klikając łącze.

Następnie analizuje aktualnie otwartą stronę internetową i proponuje kombinację sprite'ów, którą można pobrać bezpośrednio jako gotową grafikę.

SpriteMe generuje również odpowiedni kod CSS, który wystarczy umieścić na swojej stronie wraz z grafiką.

Grafika Sprite z pojedynczych grafik: Aby automatycznie wygenerować grafikę Sprite + kod CSS z poszczególnych grafik, po prostu prześlij swoją grafikę jako spakowany ZIP do Generatora Sprite CSS. Narzędzie zajmie się resztą.

Generuj CSS z grafiki Sprite: Jeśli sam stworzyłeś już grafikę Sprite i chcesz, aby odpowiedni kod CSS odnosił się do poszczególnych grafik, możesz użyć Sprite Cow.

Tam wgrywasz grafikę, wybierasz poszczególne elementy, a kod CSS wyświetla się natychmiast.

Właściwość CSS border-radius staje się coraz bardziej popularna i oszczędza wielu programistom front-end konieczności wypychania pikseli.

Zaokrąglone przyciski, pola, koła i inne kształty można tworzyć za pomocą czystego HTML + CSS. Gdyby nie ta strasznie długa składnia:

-webkit-border-górny-lewy-promień: 10px;
-webkit-border-dolny-prawy-promień: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-border-górny-lewy-promień: 10px;
-border-bottom-right-radius: 10px;

…za dwa zaokrąglone rogi?! Cóż, cztery z sześciu wierszy pochodzą z prefiksów specyficznych dla przeglądarki (przedrostków dostawcy), które, miejmy nadzieję, w pewnym momencie przestaną istnieć.

Niemniej jednak w tym miejscu należy wspomnieć o małej, użytecznej stronie internetowej border-radius.com (łatwej do zapamiętania!).

Tam po prostu wpisujesz żądaną wartość promienia obramowania w każdym rogu prostokąta, otrzymujesz podgląd, a powiązany kod CSS pojawia się na środku.

Wskazówka: jeśli chcesz całkowicie zablokować prefiksy dostawców, możesz wypróbować jedno z następujących dwóch narzędzi: Prefiks CSS (konsola, Python), Prefiks wolny (JavaScript)

Kto tego nie wie? Masz spontaniczny pomysł lub fragmenty kodu CSS/JS, które chciałbyś wypróbować.

Tylko trochę prób i błędów. Strona jsFiddle oferuje najłatwiejszą i najszybszą opcję. Na pełnym ekranie masz cztery okna: „HTML”, „CSS”, „JavaScript” i „Result”.

Wpisz kod, ewentualnie wybierz framework JavaScript, naciśnij „Uruchom”, gotowe!

Wynik jest wyświetlany bezpośrednio w oknie „Wynik” i oczywiście możesz z nim wchodzić w interakcję.

Ale jsFiddle oferuje również o wiele więcej opcji i funkcji, takich jak zapisywanie „skrzypek” na koncie, czyszczenie kodu, osadzanie „skrzypek” w innych witrynach itp.

Ponadto usługa jest nadal w fazie alfa, więc możemy spodziewać się kolejnych funkcji i ulepszeń.

Jeśli przywiązujesz dużą wagę do kompatybilności z różnymi przeglądarkami i określasz różne domyślne ustawienia (rozmiar ekranu, głębię kolorów, JavaScript, Java, Flash).

Istnieje łącznie ponad 100 różnych wariantów przeglądarek. Każdy wybrany wariant jest umieszczany w kolejce i w zależności od tego, ile innych żądań pozostało do przetworzenia, może minąć trochę czasu, zanim otrzymasz wszystkie zrzuty ekranu.

Jeśli chcesz przyjrzeć się bliżej swojej stronie internetowej w problematycznym dziecku „Internet Explorer”, możesz to zrobić za pomocą przydatnego programu IETester.

Potrzebujesz komputera z Win XP lub nowszym i możesz testować prawie wszystkie wersje IE (IE10 Preview, IE9, IE8, IE7, IE 6 i IE5.5) w jednym programie, a nawet równolegle.

Całość jest całkiem praktyczna, zwłaszcza że są tam inne przydatne opcje, takie jak „Załaduj ponownie z opróżnianiem pamięci podręcznej”.

Wskazówka: Jeśli masz zainstalowany IE8 lub nowszy, możesz przełączyć się na silnik IE7 za pomocą narzędzi programistycznych (naciśnij F12), wybierając go w „Trybie dokumentu”.

Osobiście uważam, że czcionki internetowe są świetne, a także niezwykle ważne, jeśli chcesz stworzyć rozsądną i nowoczesną stronę internetową.

Już niedługo trudno będzie sobie wyobrazić bez nich życie.

Dlatego prosimy o zapoznanie się ze wspaniałą witryną fontsquirrel.com, która oferuje obecnie ponad 700 bezpłatnych czcionek.

Większość czcionek można pobrać jako zestaw @font-face, który zawiera czcionkę w różnych formatach, odpowiedni plik CSS oraz wersję demonstracyjną.

W ten sposób możesz mieć czcionkę, którą chcesz na swojej stronie w ciągu zaledwie kilku minut.

Załączone formaty zapewniają kompatybilność z następującymi przeglądarkami: Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+, Internet Explorer 4+, iPad i iPhone.

Wskazówka: Istnieje również świetny moduł Drupal, za pomocą którego Font Squirrel i inni dostawcy czcionek internetowych mogą być bardzo łatwo zintegrowani ze stroną Drupal: @ moduł font-your-face.

„Nie, lepiej trochę lżejszy. Albo lepiej jak ten kolor tam…”

Podczas gdy informatyk konwertuje wartości RGB na przestrzeń kolorów HSV w takich sytuacjach, zwiększa jasność i przelicza ją z powrotem na szesnastkową reprezentację RGB, programista front-end myśli:

„Hej, nie martw się. Spójrz na rozszerzenie przeglądarki. „Od dłuższego czasu korzystam z rozszerzenia ColorZilla dla przeglądarki Firefox, które jest teraz dostępne również w przeglądarce Chrome.

Główną funkcją rozszerzenia jest selektor kolorów, za pomocą którego można znaleźć kolor w dowolnym miejscu na stronie internetowej.

Nawiasem mówiąc, działa to również z obrazami, więc właściwości CSS nie są po prostu oceniane. Wartość jest następnie np. kopiowana bezpośrednio do schowka jako wartość szesnastkowa (można określić format).

Niezwykle praktyczny! Dostępny jest również selektor kolorów, taki jak znasz z Photoshopa i Co, historia wybranych kolorów i wiele więcej.

Wskazówka: jeśli szukasz pasującego koloru uzupełniającego lub innych harmonijnych kombinacji kolorów dla koloru, koniecznie zajrzyj tutaj: colorschemedesigner dot com

Na koniec narzędzie, którego używam do tej pory najczęściej: Chrome. F12. Narzędzia deweloperskie.

Nie chcę tutaj bardziej szczegółowo omawiać poszczególnych funkcji. Myślę, że każdy, kto go użyje, doceni to.

Jeśli nie, zdecydowanie powinieneś to wypróbować. Inspekcja HTML, edycja na żywo CSS + HTML, konsola debugowania JavaScript, analiza czasu ładowania i i i.

Po prostu super praktyczne i bardzo dobrze zrealizowane.

Co więcej, możesz rzucić okiem na te wtyczki WordPress i rozszerzenia Chrome.