Świeże zasoby dla projektantów stron internetowych i programistów (październik 2017)

W tym miesiącu Fresh Resouces będzie nieco inny niż w poprzednich miesiącach. My, programiści, zarabiamy na życie w szybko zmieniającej się branży i widziałem wiele ogłoszeń od największych firm technologicznych, takich jak Google, Microsoft, Firefox i PHP, które zmienią sposób, w jaki budujemy sieć.

W tej części połowa naszej listy będzie dotyczyła tych ogłoszeń. Więc bądźcie gotowi przywitać się z przyszłością!

Niezbędna optymalizacja obrazu

To jest wyczerpujący artykuł, aby zoptymalizować obraz w internecie napisany przez Addy Osmani. To nie jest tak, jak inne zapisy, które kręcą się wokół poradników, nakazów i zakazów.

W tym artykule omówiono szczegóły techniczne, a także nauka za optymalizacją. Znajdziesz tu również szczegółowe informacje na temat kilku podejść optymalizacyjnych i formatów obrazu, narzędzia, wskazówki i przykłady z prawdziwego świata.

PHP 7.2

Kompleksowe odniesienie do tego, co przychodzi do PHP 7.2. Oprócz dodatków, które poprawiają wydajność aplikacji PHP, dołączono również PHP 7.2 amortyzacja, w której kilka rzeczy zostanie usuniętych i nie powinny być dłużej używane.

W PHP 7.2 istnieją dwie funkcje, które będą przestarzałe create_function () i __autoload (). Jeśli jesteś programistą internetowym, przejrzyj swój kod i wprowadź niezbędne zmiany. Widziałem wiele wtyczek WordPress, które nadal używają tych dwóch funkcji.

Interfejs API Web Share

Szczerze mówiąc nie widziałem tego interfejsu API w sieci. Jednakże, ponieważ połowa naszych interakcji w sieci dotyczy “dzielenie się”, ten interfejs API znacznie poprawi sytuację łatwiejsze dla twórców stron internetowych do budowania rodzimych doświadczeń udostępniania, szczególnie na platformie mobilnej.

Ten interfejs API jest obecnie dostępny tylko w przeglądarce Google Chrome na komputery stacjonarne i Android. Obejrzyj ten film z YouTube, aby zobaczyć go w akcji.

Atrybut Async obrazu

Inną rzeczą, która zrewolucjonizuje sieć, jest asynchroniczny atrybut dla elementu img. W czasie pisania jest kilka podejść ładuj obraz asynchronicznie, co wiąże się z małą sztuczką JavaScript. Wkrótce będziemy mogli po prostu dodać async = on na img element.

Firefox Quantum

Mozilla agresywnie aktualizuje Firefoksa, wprowadzając pewne ulepszenia o nazwie kodowej “Projekt Quantum”. Obejmuje Quantum CSS - nowy silnik dla niezwykle szybki rendering CSS, nowy interfejs użytkownika i nowe narzędzia DevTools.

Wydanie jest zdobywanie trakcji u twórców stron internetowych a niektórzy już zmienili swoją główną przeglądarkę na Firefox. W tym projekcie pojawi się więcej, w tym Quantum DOM i WebRender. Czy zobaczymy rywal Node.js oparty na silniku Firefox Quantum? Cóż, może tak.

MS Edge na iOS i Android

Microsoft właśnie ogłosił wypuść swoją najnowszą przeglądarkę, Edge, na iOS i Android. Oznacza to, że jest jeszcze jedna przeglądarka do testowania witryn.

Gutenberg

WordPress realizuje obecnie ambitny projekt o nazwie Gutenberg. Gutenberg jest Modernizacja do edytora WordPress zbudowanego prawie wyłącznie z JavaScript.

W tym momencie Gutenberg jest zbudowany z React ale projekt rozważa inne ramy, takie jak Preact, Vue lub coś innego. Na razie jest to skomplikowana sytuacja. Więc dla programistów WordPress budujących motywy i wtyczki, miejcie oczy na projekt jak zmieni to sposób, w jaki budujemy WordPress na zawsze.

FoitFout

FoitFout to poręczne narzędzie do porównywania dwóch różnych podejść zwanych FOIT i FOUT załaduj niestandardowe czcionki w sieci. Dzięki temu narzędziu możesz naśladować te dwa podejścia i zdecydować, które podejście najlepiej pasuje do Twojej witryny.

Vuera

Vuera jest Biblioteka JavaScript, która pozwala na używanie Vue i React razem. Możesz dołączyć komponent Vue z a .vue lub użyj komponentu React w Vue. Twój zespół może teraz być bardziej produktywny w każdej strukturze które wolą używać.

Przeciągalny

“Przeciągalny” to fantastyczna biblioteka Shopify. Jest zbudowany na rodzimej przeglądarce Drag-n-Drop API i pozwala na rozbudowane API do pracy. W przypadku, gdy nie zapewnia czegoś, czego potrzebujesz, możesz napisać niestandardowy moduł do rozszerzenia jego funkcjonalności. Sprawdź demo, aby zobaczyć, jak to działa.

Schemat blokowy JS

Jak sama nazwa wskazuje, FlowchartJS to biblioteka umożliwiająca tworzenie schematu blokowego, takiego jak w programie PowerPoint. Podobnie można tworzyć różne kształty wykresu, w tym okrąg, elipsę, kwadrat, diament, trójkąt itp.

QuickBill

Lekki i prosta aplikacja internetowa do tworzenia faktury. Używa natywnych technologii przeglądarki i interfejsów API do uruchamiania, więc nie jest potrzebne żadne konto. Po prostu przejdź do witryny, dodaj elementy do faktury i wygeneruj plik PDF. To jest to!

Mocka

Mocka to a symbol zastępczy treści, którego można użyć do tworzenia prototypów witryny. Ma tylko 500 bajtów i jest w pełni konfigurowalny. Możesz łatwo dołączyć go do pliku CSS swojego projektu, używając miksu Sass.

The CSS zapewnia wiele klas włącznie z mocka-media aby utworzyć symbol zastępczy obrazu, mocka-nagłówek stworzyć Nagłówek i tekst makiety aby utworzyć dowolny tekst.

VueStar

VueStar to a Komponent Vue, aby dodać efekt migotania po kliknięciu ikony, podobny do tego, co robi Twitter z “serce” ikona w aplikacji mobilnej. Komponent wprowadza nowy element o nazwie vue-star gdzie możesz go dodać w epoce internetowej. I jesteś skończony!

Plac zabaw dla dzieci

CSS Grid wprowadza nową koncepcję w sieci, aby zbudować układ i jest na pierwszy rzut oka złożony, biorąc pod uwagę liczne nowe właściwości, które posiada.

GridPlayground jest w zasadzie a Inicjatywa Mozilli, aby uczyć CSS Grid i przyspieszyć wdrożenie CSS Grid. Nawet Firefox przynosi nowe narzędzie do DevTools w celu sprawdzenia układu siatki.

Menedżer fragmentów

“Menedżer fragmentów” jest prosty aplikacja do przechowywania i zarządzania fragmentami kodu. Możesz utworzyć nowy element, wkleić kod i ustawić punkt. W tym momencie nic nadzwyczajnego i dostarcza tylko kod źródłowy, który będziesz musiał skompilować przy użyciu NPM.

Interfejs z zakładkami

Wspaniały przejść przez tworzenie progresywnej i dostępnej nawigacji po kartach przy minimalnym wykorzystaniu JavaScript. Świetne źródło informacji dla tych, którzy chcą dowiedzieć się więcej o dostępnym projekcie.

SwissInCSS

SwissInCSS prezentuje kilka klasycznych szwajcarskich projektów plakatów, używając tylko CSS. Kod źródłowy jest dostępny w CodePen.