Comiesięczna aktualizacja tworzenia stron internetowych 11⁄2018: projekt just-in-time i zmienne zastępcze czcionki

Jak bardzo design wpływa na postrzeganie naszych produktów i użytkowników, którzy wchodzą z nimi w interakcję? Dla mnie coraz wyraźniej widać, że projekt robi różnicę i że ujednolicenie projektów ze standardowym modelem, takim jak zestaw Google Material Design Kit, nie działa dobrze. Korzystając z niego, otrzymasz przyzwoity projekt, który oczywiście działa z technicznego punktu widzenia. Ale nie stworzysz z nim wyjątkowego doświadczenia, doświadczenia, które trwa lub dociera do ludzi na poziomie osobistym.

Teraz zastanów się, które witryny odwiedzasz i czy lubisz tam być, czytać, a nawet dodawać treści do usługi. Moim zdaniem to jest coś, co Instagram radzi sobie bardzo dobrze. Dobry projekt pasuje do celów Twojej firmy i dopasowuje się do oczekiwań odwiedzających, dzięki czemu czują się komfortowo tam, gdzie się znajdują i umożliwiają im kontakt z produktem. Standardowe rozwiązania mogą być jednak przyjemne i wygodne, ale zawsze będą miały w sobie tę anonimowość, która uniemożliwia ludziom naprawdę dbanie o Twój produkt. W naszych rękach jest kształtowanie lepszego doświadczenia.

Aktualności

• Tak, Firefox 63 jest tutaj, ale co to daje? Obsługa komponentów sieciowych, w tym elementów niestandardowych z wbudowanymi rozszerzeniami i Shadow DOM. Teraz dostępna jest również obsługa zapytań o media prefers-reduced-motion , narzędzia dla programistów mają edytor czcionek, który ułatwia korzystanie z typografii internetowej, a inspektor dostępności jest domyślnie włączony. Element img obsługuje teraz atrybut decoding , który może pobierać wartości sync , async lub auto , aby wskazać przeglądarce preferowany czas dekodowania. Flexbox również otrzymał kilka ulepszeń, teraz obsługuje właściwości gap ( row-gap , column-gap ). I wreszcie, co nie mniej ważne, dodano także interfejs API Media Capabilities, interfejs Async Clipboard API oraz interfejs SecurityPolicyViolationEvent , który umożliwia wysyłanie naruszeń CSP. Wow, co za uwolnienie!
• React 16.6 wyszedł — to nie brzmi jak wielka wiadomość, prawda? Cóż, ta drobna aktualizacja wprowadza React.lazy() , metodę, której możesz użyć do dzielenia kodu poprzez zawinięcie dynamicznego importu w wywołanie React.lazy() . Ogromny krok w kierunku lepszej wydajności. Aktualizacja zawiera również kilka innych przydatnych nowych rzeczy.
• Najnowsza wersja Safari Tech Preview 68 zapewnia obsługę <input type="color"> i zmienia domyślne zachowanie linków, które mają target="_blank" , aby uzyskać domyślny atrybut rel="noopener" . Zawiera również nowe zapytanie o media prefers-color-scheme , które umożliwia programistom dostosowywanie witryn internetowych do ustawień trybu jasnego lub ciemnego systemu macOS.
• Od teraz PageSpeed ​​Insights, prawdopodobnie nadal najczęściej używane narzędzie do analizy wydajności przez Google, jest teraz obsługiwane przez projekt Lighthouse, z którego wielu z Was korzystało już dodatkowo. Fajna iteracja ich narzędzia, która sprawia, że ​​jest o wiele dokładniejsza niż wcześniej.
  

Ogólny

• Przeglądaj ustrukturyzowane ścieżki szkoleniowe, aby dowiedzieć się wszystkiego, co musisz wiedzieć o tworzeniu dla nowoczesnego internetu. web.dev to nowy zasób zespołu Google Web dla programistów.
• Bez względu na to, co myślisz o Apple Maps (przypuszczam, że większość z nas doświadczyła chwil frustracji), ale to porównanie danych map, których używali do tej pory, i danych, które obecnie gromadzą w swoich odnowionych Mapach, jest fascynujące. Jestem pewien, że zwiększony poziom szczegółowości pomoże wielu ludziom na całym świecie. Wyobraź sobie, jak architekci krajobrazu mogliby to wykorzystać lub jak ratownicy mogliby skorzystać na tym poziomie szczegółowości, na przykład po trzęsieniu ziemi.

HTML i SVG

• Andrea Giammarchi napisał bibliotekę polyfill dla Custom Elements, która pozwala nam rozszerzać wbudowane elementy w Safari. Jest to bardzo miłe, ponieważ pozwala nam rozszerzyć natywne elementy o nasze własne niestandardowe funkcje — coś, co działa już w Chrome i Firefox, a teraz jest też mały wypełniacz dla innych przeglądarek.
• Elementy niestandardowe są wciąż bardzo nowe, a obsługa przeglądarek jest różna. Właśnie dlatego ten projekt html-parsed-element jest przydatny, ponieważ zapewnia podstawową klasę niestandardowego elementu z niezawodną metodą parsedCallback .

JavaScript

• Leonardo Maldonado skompilował zbiór koncepcji JavaScript, które są bardzo przydatne dla programistów. Lista zawiera zarówno filmy, jak i artykuły, dzięki czemu możesz wybrać preferowany sposób nauki.
• Gdy wideo nie działa już w witrynie internetowej i używasz Service Workers, problemem może być żądanie zakresu. Phil Nash debugował ten dziwny problem na swojej stronie i wyjaśnia, jak możesz to zrobić.

UI/UX

• Jak budujesz paletę kolorów? Steve Schoger z RefactoringUI podziela świetne podejście, które spełnia rzeczywiste potrzeby.
• Artykuł Matthew Stroma „Projektowanie just-in-time” wspomina o rozwiązaniu minimalizującym rozbieżność między projektowaniem produktu a inżynierią produktu. Chodzi o zaadaptowanie metody Just-in-time do projektowania. Coś, czym mój obecny zespół był bardzo podekscytowany i jestem szczęśliwy, że mogę tego spróbować.
• HolaBrief wygląda obiecująco. Jest to narzędzie, które poprawia sposób tworzenia briefów projektowych, utrzymując wszystkich na tej samej stronie podczas całego procesu.
• Modele mentalne wyjaśniają, jak postrzegamy świat. Teresa Man napisała o tym, jak możemy zastosować modele mentalne do projektowania produktów i dlaczego ma to znaczenie.
• Shelby Rogers opowiada, jak możemy tworzyć lepsze strony błędów 404.

Obróbka

• Generator palety kolorów Palx umożliwia wprowadzenie podstawowej wartości szesnastkowej i na jej podstawie generuje pełną paletę kolorów.

Bezpieczeństwo

• To zgrabne narzędzie Pythona jest świetnym narzędziem do wykrywania XSS.
• Svetlin Nakov napisał książkę o praktycznej kryptografii dla programistów , która jest dostępna za darmo. Jeśli kiedykolwiek chciałeś zrozumieć lub dowiedzieć się więcej o tym, jak działają klucze prywatne/publiczne, skróty, szyfry lub podpisy, jest to świetne miejsce na rozpoczęcie.
• Facebook twierdził, że ujawni, kto płaci za reklamy polityczne. Teraz VICE zbadało tę nową funkcję i podało się, że każdy z obecnych 100 senatorów w USA wyświetla reklamy „przez nich opłacane”. Dość przerażające jest to, jak jedna awaria bezpieczeństwa, która daje użytkownikom więcej władzy zgodnie z intencjami, może zmienić światową politykę.

Prywatność

• Nie lubię linków do płatnych, zastrzeżonych artykułów, ale ten dał mi do myślenia i nie potrzebujesz pełnej historii, aby mnie śledzić. Kiedy Tesla ogłosiła, że ​​zwiększy produkcję modelu 3 do ²⁴ × ₇ , wiele osób chciało to zweryfikować, a firma, która zarabia na dostarczaniu danych geolokalizacyjnych, przechwyciła dane o lokalizacji smartfonów od pracowników z fabryk Tesli, aby potwierdzić, czy to może być prawda. Kolejna smutna historia o tym, jak łatwo jest śledzić kogoś bez zgody, mimo że jest to bardziej przypadek masowego nadzoru niż indywidualnego śledzenia.

Wydajność sieciowa

• Addy Osmani udostępnia studium przypadku wydajności Netflix, aby poprawić czas do interakcji usługi przesyłania strumieniowego. Obejmuje to przełączanie się z React i innych bibliotek na zwykły JavaScript, wstępne pobieranie HTML, CSS i (React) JavaScript oraz użycie React.js po stronie serwera. Całkiem interesujące, aby zobaczyć tak wiele niekonwencjonalnych podejść i ich korzyści. Pamiętaj jednak, że to, co działa dla innych, nie musi być idealnym podejściem do twojego projektu, więc potraktuj to bardziej jako inspirację niż ślepe kopiowanie.
• Harry Roberts wyjaśnia wszystkie ważne szczegóły dotyczące CSS i wydajności sieci. Obszerny zbiór, który zawiera również kilka bardzo interesujących wskazówek dotyczących skryptów async w kodzie.
• Uwielbiam maleńką aplikację ImageOptim do wsadowej optymalizacji moich obrazów do dystrybucji internetowej. Ale teraz jest imponująca aplikacja internetowa o nazwie „Squoosh”, która pozwala idealnie zoptymalizować obrazy w przeglądarce internetowej, a dodatkowo możesz zmienić rozmiar obrazu i wybrać kompresję, której chcesz użyć, w tym mozJPEG i WebP. Wykonane przez zespół Google Chrome.

CSS

• Oliver Schondorfer pokazuje, w jaki sposób możemy wyświetlać czcionkę zmienną w nowoczesnych przeglądarkach, jednocześnie zapewniając zastępczą czcionkę internetową dla starszych przeglądarek. Jest to szczególnie interesujące, ponieważ Oliver zagłębia się w optymalizację czcionki zastępczej i dostosowywanie jej za pomocą CSS, aby jak najdokładniej dopasować czcionkę zmienną w przypadku zamiany czcionki podczas ładowania strony.
• Andy Clarke pokazuje, co jest potrzebne, aby przeprojektować produkt i witrynę internetową, aby obsługiwały tryby jasne i ciemne, które zostały niedawno wprowadzone do kilku systemów operacyjnych i wkrótce będą obsługiwane przez zapytania mediów przez różne przeglądarki.
• Chociaż background-clip nie jest super nowy, nie był zbyt przydatny ze względu na brak obsługi przeglądarki. Ale jak pokazuje Sime Vidas, CSS Background Clip jest teraz szeroko obsługiwany, co daje nam wspaniałe możliwości ulepszania stylizacji tekstu na naszych stronach internetowych.

Życie zawodowe

• Stig Brautaset opisał, dlaczego prawie nie udało mu się dostać do pracy jako operator sonaru łodzi podwodnej z powodu głupich zasad zatrudniania i jak najlepiej wykorzystał sytuację i odniósł sukces. Cenna lekcja, która pokazuje, że nie powinieneś zbytnio trzymać się wytycznych i zasad, jeśli chodzi o zatrudnianie ludzi, ale ufaj swojemu przeczuciu i zamiast tego słuchać ich historii.
• W „People, Not Robots: Bringing the Humanity Back to Customer Support” Kristin Aardsma wyjaśnia, dlaczego ważne jest ponowne przemyślenie sposobu działania obsługi klienta.
• Marcus Wermuth zastanawia się, dlaczego zostanie menedżerem nie jest awansem, ale zmianą kariery.

Wykraczając poza…

• Neil Stevenson o Steve'ie Jobsie, kreatywności i śmierci oraz dlaczego jest to dobra historia na całe życie. Chociaż kopiowanie Steve'a Jobsa prawdopodobnie nie jest dobrym pomysłem, Neil przedstawia różne spojrzenia na to, jak możemy chcieć pracować, co robić z naszym życiem i dlaczego cel jest ważny dla wielu z nas.
• Ryan Broderick zastanawia się, co zrobiliśmy, wymyślając internet. Konkluduje, że cały ten radykalizm na świecie, te dziwne poglądy polityczne są spowodowane wynalezieniem mediów społecznościowych, oprogramowania do czatów i (nie tak sub-)kultury promowania i przyjmowania wszystkich złych rzeczy dziejących się w naszym społeczeństwie. Pamiętasz 4chan, Reddit i podobne usługi, ale także Facebooka i innych? Wnoszą i obejmują nie tylko dobre pomysły, ale często głupie, a nawet szkodliwe. „Tak zradykalizowaliśmy świat” to smutna historia do przeczytania, ale dobrze napisana i zawierająca wiele inspirujących przemyśleń na temat tego, jak kształtujemy społeczeństwo poprzez technologię.
• Przykro mi, to kolejny link dotyczący zużycia energii przez Bitcoin, ale pokazuje, że samo wydobycie Bitcoina może podnieść globalne temperatury powyżej krytycznego limitu (2°C) do 2033 roku. Czas porzucić ten nieefektywny rodzaj kryptowaluty. Ale już.
• Wilderness to coś wyjątkowego. A nasza planeta ma go coraz mniej, jak opisuje ten artykuł. Mapa pokazuje, że tylko niewiele krajów ma obecnie dużo dzikiej przyrody, dając rzadkim zwierzętom i gatunkom miejsce do życia, dając ludziom możliwość odkrywania przyrody, relaksu i przygód.
• Żyjemy w ekscytujących czasach, ale smuci mnie, gdy czytam, że w ciągu ostatnich czterdziestu lat populacja dzikich zwierząt spadła o 60%. To dość masowa skala i jeśli to się utrzyma, świat będzie innym miejscem, kiedy będę stary. Tak, kiedy będę stary, wiele zwierząt, które znałem i widziałem w naturze, już wtedy nie będzie istniało, a następne pokolenie ludzi nie będzie mogło ich zobaczyć inaczej niż w muzeum. Nie jest do końca jasne, jakie są tego powody, ale zmiany klimatyczne mogą być jedną rzeczą, a stale rosnąca ekspansja ludzi na obszary dzikiej przyrody prawdopodobnie również wiele do tego przyczynia.