💣 #14 How to: nowa strona Next.js, jak sabotować SM?

Kulisy powstawania nowej strony Next.js

Deweloper, który brał udział w budowaniu nowej strony frameworka Next.js popełnił bardzo dobry wpis o technicznych aspektach, z którymi się mierzył.

Dowiesz się m.in. jak zrobiono efekt świecących kropek, przerywane gradientowe linie, spójny focus state,  zadbano o czytniki ekranów i dostępność. ‌‌Plus kilka innych ciekawych rozwiązań.

Crafting the Next.js Website
April 2023

44 praktyki jak sabotować Scrum Mastera (ale 6 za free xD)

Wejdź i przeczytaj ;)

Learn 44 proven tactics from the best students of dozens of Scrum Master classes.
Stefan Wolpers on LinkedIn: How to Best Sabotage a Scrum Master in 44 Examples | 45 comments
😈 How to Best Sabotage a #ScrumMaster? Learn 44 proven tactics from the best students of dozens of Scrum Master classes. One of my favorite exercises from… | 45 comments on LinkedIn

Deep dive in CORS

💥
Access to fetch at ‘https://example.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy.

Na pewno kojarzysz ten błąd. A zastanawiałeś się kiedyś skąd się wziął, czym tak właściwie jest CORS? A temat poruszam, bo w 113 wersji Chrome jest możliwość nadpisania nagłówków i wtyczki do CORS staną się zbędne i warto poznać o co w tym chodzi.

Wszystko zaczęło się w 1993 roku, gdy tag img został po raz pierwszy wykorzystany.

Najpierw wstęp - cross-origin request oznacza pobranie zasobu, który nie znajduje się w tym samym schemacie (hostname i port).

Kiedy jest same origin, a kiedy nie

Cors jest mechanizmem, który pozwala kontrolować dostęp do zasobów strony przez sieć. Tak w skrócie.

Ale po co został stworzony, jakie są zagrożenia z cross-origin i wiele więcej, bo temat jest dogłębnie rozpracowany przeczytasz w podlinkowanym artykule.

Deep dive in CORS: History, how it works, and best practices
Learn the history and evolution of same-origin policy and CORS, understand CORS and the different types of cross-origin access in depth, and learn (some) best practices.

Co dalej z SSR w Angularze?

Rozwój SSR stał się głównym celem na rok 2023 dla zespołu rozwijającego Angulara. A wszystko dzięki nam - społeczności, która się tego domagała 🎉.

Pełne wsparcie dla hydracji

Jednym z największych problemów jest migotanie pomiędzy wyrenderowaniem strony, a gotowością do interakcji.

W wersji 16 zaimplementowano poprawiony mechanizm hydracji - full non-destructive hydration.

Zmiany w HttpClient

Od teraz requesty wykonane po stronie serwera będą cache'owane, żeby uniknąć ponownego pobrania tych samych danych przez klienta.

Kolejne kroki

  • Wkrótce server side rendering będzie integralną częścią Angular CLI,
  • Paczki Angular Universal zostaną przeniesione do Angulara,
  • Dalsza współpraca z Aurora Team nad usprawnieniami SSR

Wszystkie, czekające nas zmiany, poznasz czytając roadmapę Angulara.


Bonus - strony-inspiracje

Dribbble i Behance na pewno znasz, ale jest więcej stron, z których można czerpać inspiracje przy swoich projektach. Dziś pierwsze 3 linki, za tydzień kolejne - Land-book, Lapa Ninja, Refero.

Land-book - website design inspiration gallery
Find the best hand-picked website design inspiration. We’re a curated web design gallery for Creatives, updated daily.
5531 Landing Page Design Inspiration - Lapa Ninja
The best landing page design inspiration from around the web. Lapa Ninja is created to help designers find inspiration, learn and improve design skills. The contents are selected from the best designs, and daily updated.
Refero — design references for your next project
The biggest collection of design references from great web applications