Comiesięczna aktualizacja tworzenia stron internetowych 2⁄2018: Dorosła sieć, szczegóły brandingu i szybkie przewijanie przeglądarki

Każdy zawód to szeroka dziedzina, w której wiele osób znajduje swoje własne, niestandardowe nisze. Podobnie jest z projektowaniem i tworzeniem stron internetowych. Zacząłem budować swoją pierwszą stronę internetową z zestawami ramek i HTML4.0, obrazami i bardzo ograniczonym zestawem CSS, a także — jakże wymyślne — GIF-ami i wbudowanym JavaScriptem (pamiętaj atrybut?) około półtorej dekady temu. Zajęło mi cztery dni, aby nauczyć się wstępnych, niezbędnych do tego umiejętności.

Ale czasy są dziś zupełnie inne, a kiedy widzę, jak sprawna stała się sieć, rozsądnie jest powiedzieć, że może to utrudnić ludziom rozpoczęcie działalności w tej dziedzinie, a ludzie mogą rozsądnie powiedzieć, że chcą skoncentruj się tylko na jednej konkretnej części tworzenia stron internetowych . W dzisiejszych czasach mamy programistów JavaScript, którzy nie znają zbyt wiele HTML lub CSS, i mamy programistów, którzy nie są w stanie pracować na nowoczesnym stosie JavaScript, ale są bohaterami w tym, co osiągają dzięki CSS. Są ludzie specjalizujący się w ładowaniu czcionek internetowych, wydajności sieci, bezpieczeństwie, prywatności lub użyteczności.

Tworzenie stron internetowych wyrosło na solidny zawód — coś, co wymaga ogromnej wiedzy, aby być ekspertem, coś, czego nie można się już nauczyć w ciągu kilku dni. Zamiast tego jesteśmy teraz w stanie tworzyć aplikacje w sieci i robić rzeczy, których nigdy bym sobie nie wyobrażał, gdy sieć była zdolna, gdy zaczynałem 16 lat temu. Jeśli przyjrzymy się, ile wysiłku kosztuje na przykład praca w drewnie, zdajemy sobie sprawę, że tworzenie stron internetowych nie różni się zbytnio. Oczywiście w kilka godzin można osiągnąć jakiś efekt, ale wyprodukowanie czegoś trwałego, solidnego i świetnie wyglądającego wymaga dużej wiedzy, doświadczenia, niepowodzeń i cierpliwości. Podobnie jak budowanie wspaniałego doświadczenia internetowego.

Aktualności

• Wielkie wieści od dostawców przeglądarek nie przestają napływać: Google Chrome ogłosił teraz, że począwszy od Chrome 68 (który ma zostać wydany w lipcu 2018 r.) przeglądarka będzie oznaczać niezabezpieczone witryny (HTTP) jako „niezabezpieczone” — koniec strony internetowe inne niż HTTPS. Po prostu wyobrażam sobie wszystkich klientów z ich witrynami i portfelami małych firm, zdesperowanych z powodu tej zmiany. Wspaniale jest widzieć przejście na bezpieczniejszą sieć, ale czasami mam wrażenie, że ci, którzy decydują, nie zastanawiają się wystarczająco nad wpływem, jaki ich decyzje mają również na małe podmioty korzystające z Internetu.
• Przegląd technologii Safari 49 oferuje kilka interesujących funkcji: Inteligentna ochrona przed śledzeniem ma teraz narzędzie do debugowania w trybie eksperymentalnym, column-gap obsługuje teraz wartości % , obsługiwany jest również active-descendant , a konsola wyświetli ostrzeżenie, jeśli jest używany AppCache .
• Idziemy z ogłoszeniem ostatniego głównego dostawcy przeglądarek, który obsługuje progresywne aplikacje internetowe: tym razem Microsoft w systemie Windows i przeglądarce Edge. Edge 17 będzie zawierał Service Workery i powiadomienia push, ale jeszcze ciekawsze jest to, że firma dzieli się swoją strategią dotyczącą tego, w jaki sposób będą wspierać takie aplikacje na poziomie systemu operacyjnego: Microsoft Store zacznie wyświetlać progresywne aplikacje internetowe przez ręczne przesyłanie, co jest duży krok naprzód, aby aplikacje internetowe były tak użyteczne, jak aplikacje natywne. Mogę sobie wyobrazić, że wiele aplikacji Electron stanie się przestarzałych, jeśli ta koncepcja zostanie przyjęta również przez innych dostawców systemu operacyjnego.
• Google Chrome 64 jest dostępny i wprowadza ResizeObserver , znacznie silniejszy mechanizm blokowania wyskakujących okienek. window.alert nie będzie już zmieniać fokusu, a aby zaoszczędzić przepustowość, nowy Chrome zmienia również zachowanie wstępnego ładowania plików multimedialnych tylko na metadane.
• W nadchodzącej wersji 65 przeglądarki Chrome przeglądarka będzie blokować certyfikaty ze starszej infrastruktury PKI firmy Symantec oraz, w celu ochrony bezpieczeństwa użytkowników, atrybut download , jeśli cel jest odwołaniem z różnych źródeł.
• Firefox 58 został wydany w tym tygodniu z dużymi ulepszeniami wydajności. Ogranicza liczniki czasu w zakładkach w tle, wprowadza font-display jako właściwość CSS i obsługuje Intl.PluralRules . Nowością jest również to, że interfejs API WebVR jest teraz domyślnie włączony w systemie macOS, a WebAssembly otrzymał niesamowity kompilator strumieniowania.
• Safari 11.1 jest dostarczane z systemami iOS 11.3 i macOS 10.13.4. Jest również dostępny w starszych wersjach systemu macOS 10.12.6 i 10.11.6. Aktualizacja wprowadza Service Workers, interfejs API żądania płatności, w tym Apple Pay, HTMLImageElement.decode() , interfejs API File and Directory Entries, Beacon API, wideo jako zasób obrazu w elementach <img> , obsługę rozszerzeń Encrypted Media w Safari na iOS , obsługa allow="camera" w WebRTC i Media Capture, właściwość font-display CSS do kontrolowania flashowania tekstu bez stylu za pomocą czcionek internetowych oraz manifest aplikacji internetowej. Pod względem bezpieczeństwa dodaje obsługę integralności podzasobów, ostrzeżenia „strona nie jest bezpieczna”, zamrożony ciąg Safari User-Agent. Myślę, że to kamień milowy, który pokazuje, że Apple wkłada wiele wysiłku w aktualizowanie Safari. Interesujące jest również to, że Safari automatycznie usuwa stare, nieużywane od dawna Service Workery, aby nie marnować miejsca na dysku użytkownika.

Ogólny

• Frank Chimero opublikował nowy artykuł, w którym wyjaśnia, że ​​walka z ciągle zmieniającymi się technologiami jest normalna. To także przyjemna podróż przez rozpoczęcie pracy w biznesie i poznanie dogłębnych szczegółów rzemiosła.
• Eric Meyer jest jedną z osób, które pracują z CSS od samego początku i mają głęboki wgląd w jego rozwój. Teraz napisał kilka przemyśleń na temat tego, jak złożoność CSS zmieniała się w czasie.
• Vitaly Friedman napisał artykuł, w którym prosi nas jako programistów, nas jako założycieli firmy o szacunek dla użytkowników i dlaczego powinno to mieć dla nas większe znaczenie.
• W zeszłym roku Matt Ludwig opublikował artykuł o problemie kompatybilności oprogramowania w czasie i dlaczego przepisanie Progressive Web App będzie rozwiązaniem, które sprawi, że będzie nadal działać za pięćdziesiąt lat. Błędem jest tutaj myślenie, że sieć jest taka sama jak dwadzieścia pięć lat temu. Dziś mamy do czynienia z przeglądarkami usuwającymi wiele interfejsów API po kilku latach, umieszczaniem istniejących funkcji za ścianą HTTPS oraz programistami budującymi kod w oparciu o niezliczone zależności, które po pewnym czasie są porzucane przez ich autorów. A kiedy budujemy na czymś, co nie jest zwykłym standardem sieciowym, nie możemy już mówić, że kod będzie trwał długo.
• Tim Kadlec kwestionuje dwie twarze Google AMP i twierdzi, że może to być albo narzędzie do marketingu w wyszukiwarkach Google, albo narzędzie otwartej sieci do poprawy wydajności witryny, ale nie obie, jak próbuje być.
• John Cobb opowiada, dlaczego zaczął inaczej myśleć o jakości kodu i dlaczego przeglądy kodu muszą obejmować coś więcej niż tylko przeglądanie kodu.

UI/UX

• To studium przypadku, w którym marka Lufthansa ewoluowała z biegiem czasu język projektowania i logo, w tym ostatnią subtelną, ale wciąż bardzo inną zmianę brandingu, pokazuje, jak duże znaczenie mają drobne szczegóły, jeśli chodzi o poprawę wyglądu wizualnego marki.
• Naema Baskanderi dzieli się najlepszymi praktykami dotyczącymi okien modalnych i okien dialogowych, analizując dobrze znane modalne i ulepszając je.

Prywatność

• Firefox już od dłuższego czasu dostarcza ochronę przed śledzeniem prywatności. Teraz dzielą się wyciągniętymi z niego naukami i wiedzą, jak możemy poprawić prywatność bez łamania sieci.
• Holger Bartel wykorzystuje artykuł Witalija Friedmana „Szacunek zawsze jest na pierwszym miejscu” jako okazję do podkreślenia wagi szacunku dla użytkowników, zadając bardzo interesujące pytanie: Każdy chce tworzyć lepsze doświadczenia, ale co chcesz dla niego zrobić? Nie jest łatwo znaleźć odpowiedź i przecierać szlaki w naszej pracy, ale jest to ważna część produktów budowlanych.

Bezpieczeństwo

• Jak się wydaje, Mixpanel od miesięcy nieumyślnie zbiera hasła użytkowników dzięki funkcji Autotrack. Jeśli używasz Mixpanel, powinieneś jak najszybciej uaktualnić do najnowszej wersji.

Obróbka

• Monica Dinculescu dzieli się tym, jak napisała skrypt z Puppeteer, biblioteką referencyjną zespołu Chrome, która ma zautomatyzować bezgłowe Chrome w celu osiągnięcia automatycznego porównywania wizualnego.
• Chrome 65 pojawi się wkrótce i wprowadzi bardzo przydatną funkcję do Narzędzi dla programistów: narzędzie współczynnika kontrastu w próbniku kolorów, które pomoże zidentyfikować kontrast w parach kolorów.
• Webpack 4 jest w przygotowaniu z pewnymi ulepszeniami wydajności. Jest to teraz gotowy do pakowania pakiet z zerową konfiguracją i ma znacznie lepsze rozmiary pakietów ze względu na znacznie lepsze drżenie drzewa.

Wydajność sieciowa

• Ben Robertson opowiada, jak możemy leniwie ładować filmy i wybierać jakość w oparciu o szybkość połączenia użytkownika.
• Seva Zaikov pyta, czy trend budowania wszystkiego jako aplikacji jednostronicowych może być w interesie użytkowników i próbuje sprawdzić, czy jego założenie, że spowalniają one strony internetowe, może być poparte danymi. Artykuł nie jest tyradą o narzędziach takich jak React, ale zadaje ważne pytania, które powinniśmy sobie zadać przed rozpoczęciem budowania architektury technicznej nowego projektu.

HTML i SVG

• Czy wiesz, że w przypadku dostępnych tabel wymagany jest element caption w kodzie HTML? Stefan Judis wyjaśnia, jak to zrobić.

JavaScript

• Wokół jest nowy framework JavaScript: Stimulus, który jest całkowicie zgodny z kodem HTML, który już posiadasz, i poprawia wrażenia z korzystania ze statycznych szablonów.
• Dave Rupert dzieli się bardzo prostym, nowoczesnym sposobem tworzenia efektu paralaksy poprzez manipulowanie niestandardowymi właściwościami CSS za pomocą JavaScript.
• Do jednokierunkowego przepływu danych zwykle używamy WebSockets. Ale w przypadku HTTP/2 możemy również użyć zdarzeń wysłanych przez serwer, jak wyjaśnia Martin Chaov w swoim przykładowym artykule.

CSS

• Już kilka razy słyszeliśmy o Houdini w przeglądarkach, sposobie dodawania własnej funkcjonalności CSS za pomocą JavaScript. Teraz Surma dzieli się sposobem działania interfejsu API CSS Paint, który będzie dostępny od Chrome 65 w górę. W efekcie daje nam to wiele możliwości, które zwykle są dostępne tylko dla grafiki lub SVG do CSS.
• Sarah Dayan wyjaśnia, w jaki sposób możemy tworzyć wielokolorowe ikony za pomocą symboli SVG i zmiennych CSS.

Dostępność

• Prezentacja Marcy Sutton „Automatyzacja spokoju ducha dzięki testowaniu dostępności i ciągłej integracji” daje pomysł i kilka wskazówek, w jaki sposób możemy stale testować dostępność stron internetowych.

Życie zawodowe

• Jon Gold napisał o znalezieniu otworów wydechowych. Dobra lektura o tym, jak technologia wpływa na nas.
• Istnieje pewien zdrowy rozsądek, że firmy technologiczne, które dobrze sobie radzą, zawsze zatrudniają. David Heinemeier Hansson wyjaśnia, dlaczego w Basecamp zdecydowali teraz, że sprawy idą tak dobrze, że mają zamrożenie zatrudnienia.
• Jak decydujemy, kiedy iterować, a kiedy odbudowywać? Często zadaję sobie to pytanie, a teraz napisałem kilka wniosków, jak poprawić sytuację.

Wykraczając poza…

• Stephen Ilardi opowiada, dlaczego technologie osobiste są przygnębiające.
• Mike Gifford dzieli się swoimi przemyśleniami na temat zmniejszenia ilości odpadów biurowych, o którym rzadko rozmawiamy, ale tak łatwo byłoby poprawić sytuację i kształtować przyszłość, w której nadal chcemy żyć.

Na koniec napisałem kilka osobistych notatek na temat radzenia sobie z powiadomieniami Slack i dlaczego używanie akronimów jest złym pomysłem. Jeśli masz jakieś przemyślenia na ten temat, możesz mi odpowiedzieć tutaj lub na Twitterze.

Mamy nadzieję, że podobała Ci się ta aktualizacja tworzenia stron internetowych. Kolejna zaplanowana jest na 16 marca. Bądźcie czujni.