#frontend

React newsletter #1

Dzień dobry reactowe świry! :female-technologist: Żyjemy i pracujemy w niestabilnym świecie, frameworki zmieniają się jak szalone i trzeba ciągle śledzić zmiany. Robię sobie regularnie prasówkę, żeby trzymać rękę na pulsie i pomyślałam, że tutaj może się komuś przydać. Będę wrzucać zajawki ciekawych artykułów / filmów z Reacta i tematów okołoreactowych.

* React Labs: What We've Been Working On - aktualnie rozwijane funkcjonalności biblioteki, z oficjalnego bloga Reacta.
* The future of rendering in React - lista patternów w renderowaniu z wadami i zaletami danego podejścia.
* Turn around your Git mistakes in 17 ways - parę gitowych komend ułatwiających życie.

pomyślałbym o odseparowaniu tego J od krechy... 😅

#typografia #kerning

Architektura mikro-frontend pozwala na podzielenie frontendowej części aplikacji, w kilka mniejszych, po części niezależnych od siebie aplikacji, które wspólnie tworzą całość większej aplikacji.

◢ #unknownews ◣

Tak, to już piątek - czas na nowe zestawienie ciekawych linków z branży IT :slightly_smiling_face:
Sugeruję jednak zapisać się na newsletter, aby nie przeoczyć kolejnych wydań :arrow_down:
➤ https://unknow.news

1) Pełna roadmapa umiejętności wartych opanowania przez web developera
https://andreasbm.github.io/web-skills/
INFO: użyj drag&drop, aby zobaczyć całą listę. Po najechaniu myszką zobaczysz linki do stron, które ułatwią Ci naukę

2) Elevator Saga - czy umiałbyś zaprogramować algorytm do obsługi windy w JavaScript?
https://play.elevatorsaga.com/
INFO: stara, dobrze znana gra, do której warto wrócić po latach. Kliknij start i po każdej zmianie kodu 'Apply'. Koniecznie przeczytaj dokumentację (przykładowy kod nie obsługuje nawet naciśnięcia przycisku w windzie i operuje tylko jedną kabiną!). Wysiadłem przy 4 poziomie.

3) Untursted - gra programistyczna. Po prostu wyjdź bohaterem przez drzwi.
https://alexnisnevich.github.io/untrusted/
INFO: zadanie wydaje się banalnie proste, ale wraz z kolejnymi etapami, staje się to coraz trudniejsze. Musisz modyfikować kod aplikacji widoczny na ekranie, ale część czerwona jest w trybie read-only. Gra uczy bardziej czytania cudzego kodu niż programowania.

4) Jaki film oglądnąć dziś wieczorem?
https://datenightmovies.com/
INFO: w teorii to aplikacja 'dla dwojga', ale w praktyce podaj dwa filmy, które sam lubisz, a w odpowiedzi otrzymasz kilkanaście innych, które mogą mieć podobny klimat. Są tam też polskie

5) Atak 'relay' na Apple Pay z dodaną kartą Visa
https://practical_emv.gitlab.io
INFO: jest to atak możliwy do przeprowadzenia (zobacz film), ale raczej teoretyczny, bo takie oszustwo byłoby szybko wykryte. Nie jest to dziura w Apple Pay, ani dziura w kartach Visa, a luka w implementacji komunikacji między tymi dwoma systemami. Karty Visa np. na Androidzie nie mają tego problemu tak jak i Mastercardy na iOS

6) Obsługa CURLa jest dla Ciebie za trudna? To używaj HURLa - wersja curla dla ludzi
https://hurl.dev/index.html
INFO: bardzo fajne narzędzie i to nie tylko dla początkujących. Korzystając z prostego pliku TXT, można w tym napisać proste testy aplikacji webowej. Projekt pod spodem i tak korzysta z curla.

7) Na czym dokładnie polegała awaria Facebooka - techniczne wyjaśnienie problemu od Cloudflare
https://blog.cloudflare.com/october-2021-facebook-outage/
INFO: ciekawe wyjaśnienie tego, czym jest ASN, jak działa DNS, na czym polega rozgłaszanie adresów po BGP. Dobra czytanka dla technicznych geeków.

😎 Używasz aplikacji do generowania kodów (OTP) w stylu Authy lub Google Authenticatora? Czas na nowe zagrożenie...
https://krebsonsecurity.com/2021/09/the-rise-of-one-time-password-interception-bots/
INFO: powstają boty wycelowane w użytkowników tego rodzaju aplikacji. Może już czas kupić klucz U2F?

9) Geo Detektyw - czy można namierzyć lokalizację zrobienia danego zdjęcia (bez metadanych!)
https://is.gd/1iYiaK
INFO: ciekawy kanał (to link do playlisty), gdzie autor stara się stwierdzić, gdzie zostało zrobione dane zdjęcie. Momentami autor używa ciekawych technik (używając narzędzi tak zaawansowanych, jak MS Paint)

10) W jaki sposób działa "Find My iPhone", gdy telefon jest wyłączony?
https://naehrdine.blogspot.com/2021/09/always-on-processor-magic-how-find-my.html?m=1
INFO: Apple opracowało ciekawą metodę namierzania nawet wyłączonych urządzeń.

11) WebGoat - dziurawa aplikacja webowa od OWASP do nauki pentestingu/hackingu
https://owasp.org/www-project-webgoat/
INFO: aplikacja została stworzona w Javie z użyciem popularnych komponentów. Można ją uruchomić jako obraz dockera. Projekt istnieje już wiele lat, ale 3 dni temu wydano uaktualnioną wersję.

12) Power Automate - czyli zautomatyzuj swojego Windowsa
https://is.gd/g3Kgs5
INFO: interesująca treść zaczyna się dopiero po około 7 minucie. Warto też rzucić okiem na inne filmy na kanale.

13) Absolutne podstawy IPv6 dla osób pracujących jedynie z adresacją IPv4
https://metebalci.com/blog/hello-ipv6/
INFO: jak zbudowane są adresy (dlaczego to 2 części po 64 bity?), dlaczego NAT jest zazwyczaj zbyteczny? gdzie się podział broadcast i wiele innych ciekawych zagadnień dla początkujących (ale nie tylko).

14) Jakie słowo jest najczęściej wpisywane w wyszukiwarkę Bing?
https://www.bbc.com/news/technology-58749525
INFO: nie będę robił spoilera...

15) Czy tokeny NFT to po prostu MLMy dla ludzi technicznych?
https://every.to/napkin-math/nft-projects-are-just-mlms-for-tech-elites
INFO: ciekawa analiza modelu biznesowego stojącego za NFT i wyszczególnienie cech wspólnych z MLM i schematem Ponziego

16) Fizyczny kalendarz zbudowany na wyświetlaczu e-Papierowym, sterowany przez Raspberry Pi i synchronizujący się z Google Calendar
https://github.com/speedyg0nz/MagInkCal
INFO: projekt jest bardzo prosty w budowie (dwa gotowe komponenty, bez lutowania itp). Jeśli tylko zamienimy 12-calowy, kolorowy wyświetlacz na jego monochromatyczną wersję mającą 7 cali, to z projektem zmieścimy się w 300-350zł (sam wyświetlacz 12 cali+kolor to około 1000zł)

17) Czy tryb incognito w przeglądarce zabezpieczy Cię przed śledzeniem przez reklamodawców? Niekoniecznie.
https://www.nothingprivate.ml/
INFO: ten serwis udowadnia, że będąc w trybie incognito, właściciel strony nadal wie, ze to Ty. Odwiedź stronę, napisz coś, a następnie wejdź na nią w trybie incognito.

18) Jedna spójna skórka dla wszystkich elementów systemu
https://themer.dev
INFO: IDE, przeglądarka, terminal i wiele innych aplikacji mogą mieć jednolite kolory, a ten generator Ci to umożliwi. W polu do podawania ceny za skórkę można wpisać zero, ale może daj coś autorowi, jeśli jego praca Ci się podoba :slightly_smiling_face:

19) Generator 'gładkich' animacji w CSS - ustawiamy tam ścieżki dla easing
https://easyeasings.com
INFO: gotowy, wygenerowany kod masz w prawym górnym rogu

20) Skrajnie prosty serwer WWW podający statyczne, zdefiniowane przez Ciebie treści
https://github.com/xnbox/DeepfakeHTTP
INFO: to nie jest serwer do użytku produkcyjnego. Przyda się do eksperymentów z API, do hackathonów, robienia zaślepek w aplikacji testowej itp.

21) Generator layoutów w CSS
https://layout.bradwoods.io
INFO: wybierz jeden z pięciu układów jako punkt startowy i

22) Baza kanałów YT dla uczniów i studentów
https://docs.google.com/spreadsheets/d/1WYv42MiodovhUDb8XwRVbn24gS1AgIY57xDc8OcXRz4/edit?usp=sharing
INFO: arkusz Google z zebranymi linkami do kanałów związanych z nauczaniem matematyki, biologii, historii i innych

23) Do jakich kategorii reklamowych zaklasyfikowało Cię Google?
https://adssettings.google.com/authenticated
INFO: aby link działał, musisz być zalogowany na swoje konto. Ja dowiedziałem się, że interesuję się ponoć kwiatami, hip-hopem i wioślarstwem, ale reszta kategorii była niezwykle trafna.

24) Archivematica - narzędzie self-hosted do archiwizowania zasobów internetu
https://www.archivematica.org/en/
INFO: to coś jak Web Archive, ale w prywatnej wersji, która działa na Twoich zasadach i archiwizuje to, co sam wskażesz. Działa na Windowsie, Macu i Linuksie

25) HelloSystem - otwartoźródłowy system operacyjny przeznaczony dla byłych użytkowników Maców
https://is.gd/JTTsCI
INFO: wygląda i działa niemal identycznie jak MacOS. Nie jest to dystrybucja Linuksa, a system bazujący na FreeBSD. Link do systemu (można pobrać ISO dla VM od testów) jest w opisie do filmu

26) Firefox zacznie wyświetlać reklamy kontekstowe w miejscu podpowiedzi paska adresu?
https://support.mozilla.org/en-US/kb/navigate-web-faster-firefox-suggest
INFO: jak podaje Mozilla, będą to "podpowiedzi od zaufanych partnerów" (np. prognoza pogody), ale dodaje też, że będą tam "wyniki sponsorowane" (czyli reklamy)

27) Atropos JS - biblioteka do tworzenia efektu 3D Parallax
https://atroposjs.com/?utm_source=tldrnewsletter
INFO: pomachaj myszką nad głównym zdjęciem lub obiektami z sekcji 'showcase', a natychmiast zrozumiesz, o co chodzi. Wygląda świetnie.

== LINKI TYLKO DLA PATRONÓW ==

28) Nauka Pythona od zera z interaktywnego kursu online
https://uw7.org/un_6160330befe18
INFO: wykonujesz zadania krok po kroku. Jeśli nie pojawia się przycisk 'next', to znak, że albo nie zrobiłeś zadania, albo wynik nie jest taki jak oczekiwany.

29) Optymalizacja ustawień VS Code dla maksymalnej produktywności
https://uw7.org/un_61603312cd9d4
INFO: łącznie 17 porad, co i jak ustawić, aby pracowało nam się przyjemniej i efektywniej

30) Tworzenie gier w JavaScript, a dokładniej to tworzenie 28 gier (playlista)
https://uw7.org/un_61603318c9856
INFO: filmy są długie (przeważnie 30-50 minut), ale prowadząca youtuberka fajnie umie wszystko wytłumaczyć, więc warto oglądać.

==
Chcesz, aby Twój link pojawił się tutaj?
Po prostu mi go zgłoś. To zupełnie NIC nie kosztuje - dodaję jednak tylko to, co mi przypadnie do gustu.
https://mrugalski.pl/suggest.html

Podobało się? To kliknij :zap:️:zap:️:zap:️

--
Podoba Ci się moja działalność w sieci?
Zostań patronem i wspieraj moje działania: https://patronite.pl/unknow

Projektowanie ZŁYCH interfejsów użytkownika to sztuka!
Poczekaj, aż zobaczysz tryb zaawansowany 😂

https://streamable.com/v8qari

◢ #unknownews ◣

Taka mała niespodzianka — publikacja zestawienia w czwartek :slightly_smiling_face:
Jestem na wyjeździe służbowym, więc jutro nie mam szans wrzucić linków.
Zapraszam do lektury :point_down:

1) HTMLQ - narzędzie w stylu JQ (dla jsona), ale operujące na plikach HTML
https://github.com/mgdm/htmlq
INFO: to daje programiście nieograniczone możliwości bardzo prostego parsowania stron WWW w skryptach shellowych.

2) Jak działają kody OTP np. w Google Authenticator
https://prezu.ca/post/2021-07-30-totp-1/
INFO: jest to wyjaśnienie działania algorytmu. Artykuł ma dwie części.

3) Która domena internetowa (TLD) jest najlepsza pod względem wolnościowym?
https://slc.is/#The%20Best%20TLD%20is%20Not%20.com
INFO: zamknięcie strony internetowej to często tylko jedno polecenie władzy i gotowe. Czy gdzieś na świecie istnieje państwo, w którym utrata domeny jest dość trudna?

4) Jak ustawiać odstępy między elementami przy projektowaniu UI - teoria przyjaciół
https://uxdesign.cc/ui-cheat-sheet-spacing-friendships-e37a6fccc407
INFO: najlepsi przyjaciele, bliscy przyjaciele, znajomi, totalnie obcy... co te wszystkie określenia mają wspólnego z UI?

5) Przegląd ewolucji messengerów od Google - jak zmieniały się na przestrzeni ostatnich 15 lat?
https://arstechnica.com/gadgets/2021/08/a-decade-and-a-half-of-instability-the-history-of-google-messaging-apps/
INFO: Google Talk, Google Allo, Google Duo, Google Hangouts, Google Meet, Google Buzz i kilka innych

6) W pełni automatyczny, bazujący na AI system do wymyślania nazw dla startupów
https://namelix.com/
INFO: podajesz kilka słów kluczowych, a narzędzie generuje dla Ciebie potencjalne nazwy dla startupu (kilkadziesiąt).

7) Miller - narzędzie do wyciągania danych z plików CSV, TSV i JSON
https://github.com/johnkerl/miller
INFO: potrafi nie tylko odszukać interesujące nas dane, ale i wypisać je w czytelnej formie na ekranie. Składnia jest bardzo intuicyjna

8 ) PAM Dures - alternatywne, awaryjne hasło do Twojego Linuksa/Unixa
https://github.com/nuvious/pam-duress
INFO: działa to tak, że jeśli zamiast prawdziwego hasła wpiszesz to z 'dures' (zdefinowane przez Ciebie), to, zamiast wpuścić Cię do systemu, system logowania wykona zdefiniowany wcześniej skrypt (np. niszczenie pewnych danych na dysku). Przydatne, gdy ktoś zmusza Cię do podania haseł dostępowych.

9) Trójwymiarowy sequencer muzyki - pozwala tworzyć utwory w świecie 3D
https://ludotune.com
INFO: obsługa jest dość prosta, a konkretne nuty możesz wybrać z klawiatury na dole ekranu i przypisać je do konkretnej kostki

10) Lepiej używać WikiData, czy po prostu scrapować Wikipedię przy pozyskiwaniu informacji?
http://simia.net/wiki/Wikidata_or_scraping_Wikipedia
INFO: Wikidata to API pozwalające uzyskać dane w czytelnej dla programisty (np. JSON) formie. API to zawiera w teorii te same informacje, co sama Wikipedia.

11) Wprowadzenie do narzędzia JQ - terminalowego parsera plików JSON
https://earthly.dev/blog/jq-select/
INFO: jego obsługa przy dostatecznie skomplikowanej strukturze danych nie należy do najprostszych. Ten artykuł rozjaśnia wiele rzeczy.

12) Obliczenie wartości bezwzględnej z liczby w Javie nie jest takie proste, jak mogłoby się wydawać
https://habr.com/en/post/574082/
INFO: okazuje się, że istnieją pewne przypadki, dla których najprostsza i najbardziej oczywista do napisania funkcja nie działa poprawnie

13) Czy oczyszczacz powietrza domowej roboty ma szansę osiągnąć wyniki jak komercyjne rozwiązania?
https://dynomight.net/2020/12/15/some-real-data-on-a-DIY-box-fan-air-purifier/
INFO: autor artykułu buduje swoje urządzenie w cenie około $50. Zobacz, jak się ono sprawdza w praktyce.

14) ListMonk - narzędzie selfhosted do zarządzania newsletterami i listami wysyłkowymi (dla twórców tych newsletterów)
https://github.com/knadh/listmonk
INFO: dobre rozwiązanie do mniej profesjonalnych zastosowań i wszędzie tam, gdzie każdy grosz wydany na projekt się liczy

15) Niebawem możliwe będzie umieszczenie swojego prawa jazdy i dowodu osobistego w Apple Wallet? - obecnie tylko w USA
https://www.apple.com/newsroom/2021/09/apple-announces-first-states-to-adopt-drivers-licenses-and-state-ids-in-wallet/
INFO: aplikacja do przetrzymywania kart płatniczych od Apple (dostępna na iPhone/iPada/Apple Watcha) być może będzie zdolna do przetrzymywania także plastikowych dokumentów

16) Jak używać media query znanych z CSS w kodzie JavaScript
https://dev.to/koralarts/media-queries-in-js-31do
INFO: istnieje do tego jedna, bardzo prosta funkcja, która zaoszczędzi nam sporo pisania (przyjmuje składnie z CSS)

17) Frontendowcy świetnie znają serwis 'CanIUse', ale okazuje się, że wsparcie dla technologii nie tylko się pojawia, ale i zanika
https://blog.jim-nielsen.com/2021/canistilluse.com/
INFO: wiele przeglądarek wycofuje wsparcie dla konkretnych rozwiązań. Alert, prompt, confirm - to tylko niektóre z przykładów

18) Pliki CSV - co jest z nimi nie tak?
https://www.bitsondisk.com/writing/2021/retire-the-csv/
INFO: przemyślenia na temat popularnego formatu składowania danych. Dlaczego powinniśmy z niego zrezygnować?

19) Aktywuj, a nie deaktywuj właściwości CSSa - czyli nieco odmienne podejście do stylowania
https://css-tricks.com/you-want-enabling-css-selectors-not-disabling-ones/
INFO: można oczywiście ustawiać globalne style na wszystkie elementy, a następnie deaktywować ten styl np. na ostatnim z nich. Można też podejść do tematu od drugiej strony i o tym jest ten krótki tekst

20) Sprytne użycie niedocenianego znacznika HTML, czyli DL
https://benmyers.dev/blog/on-the-dl/
INFO: czym jest znacznik description list i dlaczego warto się nim zainteresować, zwłaszcza w kontekście stylowania elementów?

21) Neumorphism - nowy trend w projektowaniu UI
https://www.toptal.com/designers/ui/neumorphic-ui-design
INFO: na czym to polega i jak wygląda, o tym w artykule.

22) Ponad połowa czytelników technicznych serwisów blokuje skrypty Google Analytics
https://plausible.io/blog/google-analytics-adblockers-missing-data
INFO: czy to oznacza, że bazowanie na czystym GA do oceny oglądalności strony WWW może okazać się już niewystarczające?

23) Procedura uruchamiania DOOMa na biurowym telefonie stacjonarnym
https://neilbostian.github.io/#/doomphone
INFO: techniczne wyjaśnienie jak to jest możliwe i jak tego dokonać. Dużym ułatwieniem był fakt, że wybrany telefon działa pod kontrolą mocno ograniczonej dystrybucji Linuksa i posiada dość standardowy procesor (ARM)

24) Jak sprytnie zarządzać Z-Indeksem na stronie
https://dev.to/mimafogeus2/a-better-way-to-manage-z-indexes-1nf
INFO: wartości typu 999999 nie są czymś niezwykłym u początkujących frontendowców. Można to jednak rozwiązać sprytniej.

25) Ile danych można upchnąć w obiekcie typu Map w JavaScript?
https://searchvoidstar.tumblr.com/post/659634228574715904/an-amazing-error-message-if-you-put-more-than-2-24
INFO: artykuł niby odpowiada jaka jest górna w pełni działająca granica, ale powiedzmy szczerze, że dodawanie elementu trwające ponad minutę, to ja bym "działającym", a przynajmniej użytecznym nie nazwał 😉

26) ProtonMail nie loguje adresów IP swoich użytkowników, dbając o prywatność użytkowników? - nooo... niezupełnie
https://www.theregister.com/2021/09/07/protonmail_hands_user_ip_address_police/
INFO: Proton usunął ze swojej strony wzmiankę o nielogowaniu IP, po tym, gdy przekazał Szwedzkiej policji adres IP i wszelkie dane jednego ze swoich użytkowników (uwaga: maile nadal są niedostępne! - można przekazać tylko metadane np. urządzenia dostępowego)

27) Salwador przyjął Bitcoina jako jedną z obowiązujących w kraju walut
https://www.nbcnews.com/news/latino/el-salvador-adopts-bitcoin-official-currency-first-country-rcna1910
INFO: to pierwszy kraj, który zdecydował się na taki krok. Może to być ciekawy eksperyment. Powodem adopcji BTC jest chęć oszczędności na przelewach zagranicznych, kosztach przewalutowania itp.

== LINKI TYLKO DLA PATRONÓW ==

28) Wstęp do webscrappingu z użyciem nodeJS
https://uw7.org/un_6139a81cd305d
INFO: jak to robić asynchronicznie, bez zbytecznego blokowania wątków itp.

29) Pomysły (100 sztuk) na wpisy na bloga developerskiego
https://uw7.org/un_6139a823ef5c9
INFO: inspiracja dla devów, którzy chcą pisać, ale nie mają pomysłów o czym. Niektóre z pomysłów są ciekawe, a inne dość oklepane

30) Przegląd kanałów YouTube na temat matematyki
https://uw7.org/un_6139a829aec01
INFO: wiem, że wśród czytelników moich zestawień są także wielbiciele tej dziedziny nauki, więc może Cię to zainteresować

==
Chcesz, aby Twój link pojawił się tutaj?
Po prostu mi go zgłoś. To zupełnie NIC nie kosztuje - dodaję jednak tylko to, co mi przypadnie do gustu.
https://mrugalski.pl/suggest.html

Podobało się? To kliknij :zap:️:zap:️:zap:️

Zestawienei powstaje dzięki patronom - zostań jednym z nich :point_down:
🔥 https://patronite.pl/unknow

Jak ktoś chce spróbować sił z VUE.JS to VUE MASTERY w ten weekend całe odblokowane. Krótkie kursy pozwalające szybko wejść w temat. https://www.vuemastery.com/free-weekend/

Siemanko, jak mija dzień?
U mnie - nie mogę się doczekać aż skończę programować w pracy i zacznę programować po pracy 🙂 Dłubię małą apkę do DnD dla siebie i znajomych, Firebase+Angular (myślałam nad backendem, ale to takie małe, że szkoda czasu i zachodu). I jest tak niesamowita różnica w jakości pracy między Vue (gdzie zaczęłam pisać) i Angularem (na którego się przerzuciłam), że głowa mała. Nie wiem, jak Vue+TS, bo część z tej jakości robi sam TS, ale pisze się z przyjemnością. Największa różnica jest w bindingach do Realtime Database między vuefire i angular-fire - z tych drugich korzysta się z przyjemnością (niech żyje AsyncPipe!). Jak jesteście zainteresowani, mogę podrzucić snippety z porównaniem, nie wiem jak na hejto pisze się posty typowo pod programowanie 🙂
Zgadzacie się? Czy jednak team Vue/React?
I bardzo chętnie posłucham co wy dłubiecie po godzinach.