nie działają mi playery w firefoxie #frontend

Cześć ludziska,

jestem na juniorskim stanowisku front-end developera, ale obecna praca nie do końca pozwala mi na działanie w nowych technologiach (w pracy używamy kilku technologii bardziej opartych na PHP niż na JS np. Laravel, Wordpress). Chciałbym ją zmienić, ale praktycznie wszędzie wymagany jest React - i właśnie tutaj jest moje pytanie.

Czy obecnie jest sens uczyć się Reacta czy jednak zainteresować się innymi technologami gdzie jest mniejsza konkurencja? Vue? Angular?

#programowanie #frontend #pytanie #praca

Znacie `@container` i `@container style`? - link https://ishadeed.com/article/css-container-style-queries/?)

Mam pomysł na rozwinięcie...

Tak wygląda `@container style`:

```

.page-header {

 display: flex;

}

@container style(display: flex) {

 .page-header__start {

   flex: 1;

   display: flex;

   align-items: center;

   border-right: 1px solid lightgrey;

 }

}

```

Mój pomysł: Dodanie możliwości tworzenia zmiennej, na bazie właściwości kontenera, np. szerokość kontenera jako --container-width` i można jej użyć jak zwykłej zmiennej, tylko jest dynamiczna (zmienia się w zależności od rozmiaru kontenera):

```

@container (width as --container-width) {

 height: calc(var( --container-width) - 10px);

```

Co sądzicie?

Chyba czegoś podobnego nie ma jeszcze w planach, a fajnie by uzupełniało te nowe standardy, nie?

#css #html #programowanie #webdev #frontend

#programowanie #programista15k #frontend #ui #ux #zajebanezreddita #heheszki #2jednostkowe0integracyjnych

#frontend #heheszki #programowanie

Właśnie wylądowało Astro JS w wersji 2.0!

Astro to taki "generator stron" na podstawie mdx lub api, oparty o JS i pozwalający na łączenie statycznych stron z interaktywnymi wyspami stworzonymi w jsowych frameworkach (preact, react, vue, etc). Nowości w tej wersji:

• kolekcje treści (type safe)
  

• renderowanie hybdrydowe
  

• lepsza obsługa błędów
  

• poprawki dev serwera
  

• integracja z Vite 4.0
  

https://astro.build/blog/astro-2/

Ktoś już coś w Astro rzeźbił?

#webdev #webdesign #frontend #ux #programowanie #js #javascript #typescript

TailwindCSS

Jakie macie lub znacie sposoby na lepszą organizację klas zamiast bezpośrednio w DOM w className?

W jednym z projektów wyciągnąłem klasy do czegoś takiego:

const cls = {

container: "...",

text: "..."

}

I później w DOM'ie można było użyć className={cls.container} z tym że traciłem wtedy wszystkie ficzery związane z podpowiadaniem kodu i sortowaniem klas.

#tailwindcss #frontend #react #angular #vue #programowanie

#rowerowyrownik #rower #programowanie #programista15k #frontend

2733 + 51 = 2784

https://www.strava.com/activities/8419223885

Zimno, mokro i wietrznie. I do tego mgliście.

Z kręcenia to by było tyle - teraz ważniejsze info; osoby odpowiedzialne za utrzymanie rowerowego równika na wykopie oznajmiły iż NIE BĘDĄ oni dokonywać przenoszenia serwisu na hejto. Ja zobaczę jak w najbliższym czasie będzie się hejto rozwijało, czy będą dymy i jak wgl temat dostępu do API hejto by wyglądał dla apek zewnętrznych. Jeżeli będzie wszystko miało to ręce i nogi - spróbuję podjąć się napisania równika od nowa. Zamiast klepania vanilla JS + PHP myślę o rozstawieniu: Front - Angular, Backend - Node.js, baza na postgresie.

Planowane funkcjonalności:

• zakładanie konta
  

• możliwość zapisania w konfiguracji konta integracji z Strava Api v3 oraz (jeżeli wgl istnieje) - Api Hejto do dodawania wpisów
  

• bardziej zaawansowany widok prezentujący statystyki w odniesieniu nie tylko do dni ale do bardziej szczegółowych kategorii
  

• tworzenie i zapisywanie podstawowych szablonów wpisu gdzie w przypadku dokonania importu na hejto, część pól byłaby automatycznie uzupełniana na podstawie ostatnich aktywności ze stravy
  

Opcjonalne funkcjonalności:

• dodanie możliwości konfiguracji dla użytkownika roweru - będzie możliwość wyboru wcześniej skonfigurowanego obiektu przy imporcie wpisu na hejto - z możliwością wyboru kategorii roweru, marki, modelu, rocznik, grubość opon etc etc
  

• w widoku prezentacji statystyk możliwość filtrowania po zapisanych zimportowanych wpisach ze stravy wg wprowadzonych danych na jakim rowerze użytkownicy jeździli np możliwość wyświetlenia statystyk np z ostatniego dnia dla wszystkich szosowców
  

Co sądzicie o takim pomyśle? Poza pewnymi dodatkowymi opcjami, na pewno w pewnym sensie zdecentralizowałoby to równik który byłby niezależny od jakiś trzecich API bo sam portal by pośredniczył w eksporcie wpisów wraz z ich zapisywaniem w bazie.

Macie jeszcze jakieś inne pomysły lub sugestie?

Ps. Sprawa jest rozwojowa, ale nie nastawiałbym się na dość szybkie napisanie projektu, zależy to od faktu ile miałbym czasu na napisanie, jakie funkcjonalności miałyby się pojawić oraz czy ktoś byłby potencjalnie zainteresowany rozwojem projektu (czy to jako programista, czy tester, czy grafik)

Dwa lata temu wydałem razem z ziomkami ebooka dla junior frontendów.

Książka była sprzedawana po $50/70.

No ale od jakiegoś tygodnia udostąpliniśmy ją za darmoszkę. Także zapraszam juniorów do pobierania ( ͡° ͜ʖ ͡°)

https://h4academy.gumroad.com/l/frontendunicorn

PS: za darmoszkę, bo zwijamy spółkę xD

#programowanie #frontend #webdev

www.hejto.pl##.grid-cols-12:style (grid-template-columns: repeat(1,minmax(0,1fr)) !important)

www.hejto.pl##.pt-14.gap-4.flex-col.md\\:flex.hidden.md\\:col-span-3.col-span-12

Dwa filtry do #ublock poprawiające czytelność - ukrywamy sidebar po prawej i rozciągamy treść.

#frontend proszę nie bić - u mnie działa

#hejto

W stylu dziennym czcionka w guziku jest biała tak jak w nocnym.

@hejto @lubieplackijohn nie dało by się na szybko załatać tego drobiazgu? Pierdoła, ale kłuje w oczy, sorry że się czepiam.

Na Windowsie przy instalacji Gita można sobie dodatkowo doinstalować też nowy terminal - Git Bash. Fajnie, bo jest bashowy shell, więc osobiście pochodząc z unixowych środowisk (zawodowo) jest mi łatwiej, bo znam wszystkie komendy.

Dzialam we frontendzie i nie mogę nigdzie w internecie znaleźć odpowiedzi

Czy da się na Windowsie, pewnie w Git Bashu prędzej, odpalać skrypty NPMowe itp, które ustawiają zmienne środowiskowe? Mam na myśli coś w stylu `NODE_ENV=production npm run build`

Windows w Git Bash wywala mi się, bo nie zna składni `NODE_ENV=production` ale może jest jakaś metoda?

I myślę o czymś szerszym, niż doinstalowanie cross-env, bo chodzi mi o wszystkie rodzaje zmiennych, nie tylko NODE_ENV

Dziękuję za pomoc ( ͡° ͜ʖ ͡°)

te miniaturki podstawowe xD

są nieczytelne

nie lepiej ( ಠ_ಠ)

?

React newsletter #2

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.

React newsletter #1

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.

• 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

◢ #unknownews ◣

Tak, to już piątek - czas na nowe zestawienie ciekawych linków z branży IT

Sugeruję jednak zapisać się na newsletter, aby nie przeoczyć kolejnych wydań

➤ 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

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 ️️️

--

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