Kolejna porcja świeżych artykułów z tematów frontendowych / Reactowych.
What is CORS? - Kto z nas nigdy nie został przyblokowany przez CORS? Treściwe wyjaśnienie z czego to się bierze i garść przydatnych porad jak sobie radzić z pobieraniem zewnętrznych danych na środowisku lokalnym.
Why We're Breaking Up with CSS-in-JS - Case study doświadczeń dużej firmy z podejściem tworzenia styli w komponentach reactowych, ciekawe statystyki performance'u i dyskusja pod postem. (Ogółem jako fanka SASSa cieszę się, że następuje trend odchodzenia od CSS-in-JS )
The Web’s Next Transition - historyczny przegląd zmieniającej się architektury aplikacji webowych i prognozy na przyszłość.
BONUS: Smashing Meets Design Systems 15 listopada odbędzie się konferencja na temat Design Systemów prowadzona przez ekipę Smashing Magazine. Bilety na wersję online są darmowe.
Dzień dobry reactowe świry! Ż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.
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.
Untursted - gra programistyczna. Po prostu wyjdź bohaterem przez drzwi.
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.
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
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
Obsługa CURLa jest dla Ciebie za trudna? To używaj HURLa - wersja curla dla ludzi
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.
Na czym dokładnie polegała awaria Facebooka - techniczne wyjaśnienie problemu od Cloudflare
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)
W jaki sposób działa "Find My iPhone", gdy telefon jest wyłączony?
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ę.
Power Automate - czyli zautomatyzuj swojego Windowsa
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).
Jakie słowo jest najczęściej wpisywane w wyszukiwarkę Bing?
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ł)
Czy tryb incognito w przeglądarce zabezpieczy Cię przed śledzeniem przez reklamodawców? Niekoniecznie.
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.
Jedna spójna skórka dla wszystkich elementów systemu
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
Generator 'gładkich' animacji w CSS - ustawiamy tam ścieżki dla easing
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.
Archivematica - narzędzie self-hosted do archiwizowania zasobów internetu
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
HelloSystem - otwartoźródłowy system operacyjny przeznaczony dla byłych użytkowników Maców
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
Firefox zacznie wyświetlać reklamy kontekstowe w miejscu podpowiedzi paska adresu?
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)
Atropos JS - biblioteka do tworzenia efektu 3D Parallax
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.
Optymalizacja ustawień VS Code dla maksymalnej produktywności
News o Firefoksie to straszny syf, jak nie szpiegujące chrome, to chińska opera czy teraz reklamowy (a więc też zacznie szpiegować) lisek. Tęsknię czasem za erą IE, Netscape i wiszenia na GG wieczorami.
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?
Jak ustawiać odstępy między elementami przy projektowaniu UI - teoria przyjaciół
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.
Trójwymiarowy sequencer muzyki - pozwala tworzyć utwory w świecie 3D
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.
Wprowadzenie do narzędzia JQ - terminalowego parsera plików JSON
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
Jak używać media query znanych z CSS w kodzie JavaScript
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
Sprytne użycie niedocenianego znacznika HTML, czyli DL
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)
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ł
ProtonMail nie loguje adresów IP swoich użytkowników, dbając o prywatność użytkowników? - nooo... niezupełnie
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)
Salwador przyjął Bitcoina jako jedną z obowiązujących w kraju walut
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.
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/
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.
@Vakme problemem w tym, że ja żyłem pracą. Wiesz jaki jest efekt? Efekt tego jest taki, że nie mam wspomnień z jakichś 6 lat, nic, zero, null. Tylko praca i ta wiesz, ten taki wewnętrzny dryl i chęć wspinania się po drabinie. Uważaj, to jest pułapka. Ostrzegam jako ten starszy harcerz xdd
@HaHard czaję powiem ci że prawie wpadłam w tę pułapkę na studiach, kosztowało mnie to za dużo zdrowia teraz kodzenia po pracy używam do tego, żeby się pobawić + staram się nie mieszać aktualnych technologii pracowych z poza-pracowymi + mam masę aktywności poza. Niemniej pluję sobie w brodę, jaka byłam głupia kilka lat temu
![Co to jest architektura mikro-frontend [EN]](https://cdn.hejto.pl/uploads/posts/images/250x250/7405994830c2c11b1badefa89d6ef3a9.png)
