Wiem, wiem... Długo nic nie publikowałem, ale już jest – świeżutki [ #webstuff ]!

-------------------

➡ Chcesz być wołany do kolejnych wpisów? Zaplusuj ten wpis.

-------------------

● Animacja 3D gry w tenisa stołowego w #css oraz HTML.
https://codepen.io/amit_sheen/pen/PobQjMX

● Kord – Webowa aplikacja, która pozwala połączyć playlisty z Spotify, Soundcloud i YouTube w jednym miejscu.
https://www.kord.app/

● Jak tworzyć tabele, by wyglądały dobrze i były przyjazne dla użytkownika? Krótki tutorial.
https://imgur.com/ZY8dKpA

● Handsfree.js – Biblioteka JS. Dodaj śledzenie twarzy, dłoni, a także całego ciała do swoich projektów – twórz doświadczenia użytkownika bez potrzeby używania myszki oraz klawiatury.
https://handsfree.js.org/

● Explain Shell – Dopasowuje argumenty wiersza poleceń do ich tekstu pomocy.
https://explainshell.com/

● A-Frame – Biblioteka JS do tworzenia VR 3D przy użyciu prostych znaczników.
https://aframe.io/

● AirConsole Meet – Proste gry multiplayer do odtwarzania w programach Zoom, Google Meet, Microsoft Teams i innych.
https://meet.airconsole.com/

● SVG Crop – Narzędzie, które usuwa wszelkie puste przestrzenie z plików SVG.
https://svgcrop.com/

● Keppler – Udostępnianie kodu w czasie rzeczywistym na potrzeby wykładów i prezentacji.
https://brunosimon.github.io/keppler/

● Jak stworzyć funkcjonalność drag&drop w JavaScript przy użyciu natywnego "Drag and Drop API"?
https://www.webtips.dev/how-to-create-native-drag-and-drop-functionality-in-javascript

● Gaze-detection – Biblioteka JS, która wykorzystuje uczenie maszynowe do wykrywania ruchów gałek ocznych. Może służyć do sterowania. Na repozytorium znajduje się link do demo.
https://github.com/charliegerard/gaze-detection

● 10 krótkich wskazówek dotyczących designu, które podniosą poziom Twojego następnego projektu.
https://www.parthean.com/blog/10-design-tips-to-level-up-your-next-project

● github1s – Dodaj "1s" po "github" i naciśnij Enter w pasku adresu przeglądarki dla każdego repozytorium, które chcesz obejrzeć w VSC.
https://github1s.com/

● NanoNeuron – 7 prostych funkcji JS, które wyjaśniają jak wygląda uczenie maszynowe.
https://trekhleb.dev/blog/2019/nano-neuron/

● NetplayJS – Twórz gry wieloosobowe oparte na WebRTC i P2P w Javascript, bez konieczności tworzenia serwera.
https://github.com/rameshvarun/netplayjs

● Bonus: Responsywny gryzoń.
https://gfycat.com/pl/dismalvalidamericangoldfinch

➡ #humorinformatykow pokaż całość

źródło: js-is-the-answer.png

➡ Chcesz być wołany do wpisów z cyklu [ #webstuff ]?
– Zaplusuj ten wpis!

➡ Chcesz się wypisać z listy do wołania?
– Po prostu cofnij plusa :)

#mirkolisty #webdev

źródło: webstuff-lista.jpg

Wszystkim Mirkom i Mirabelkom, a w szczególności obserwatorom tagu #webstuff, życzę, abyście w te święta odnaleźli wewnętrzny spokój i chwilę wytchnienia od trosk codzienności, a nawet od Wykopu (｡◕‿‿◕｡)

#tworczoscwlasna #grafikakomputerowa i trochę #pokazmorde

GIF

źródło: kartka-swiateczna.GIF (3.67MB)

Cześć i czołem! [ #webstuff ]!

Dzisiejsze wydanie zawiera kilka linków do poczytania w przerwie świątecznej :)

-------------------

➡ Chcesz być wołany/a do kolejnego wpisu? Zaplusuj pierwszy komentarz pod wpisem.

-------------------

● Dlaczego żaden pracownik umysłowy nie pracuje 8 godzin dziennie?
https://dev.to/shivenigma/nobody-is-working-for-8-hours-a-day-why-3ilg

● Zaawansowane użycie map Sass, dzięki któremu możemy dostać się do każdego z jej elementów w bardzo prosty sposób: get('color.black.base').
https://itnext.io/advanced-use-of-sass-maps-bd5a47ca0d1a

● "Wiele lat zajęło mi jako programiście, aby czuć się komfortowo w tempie, w jakim pracuję. Jestem powolny i jest to OK!"
https://dev.to/pepopowitz/i-m-slow-and-that-s-okay-239m?

● Nie trać czasu na stronę z portfolio. Dlaczego?
https://dev.to/jkettmann/don-t-waste-your-time-on-a-portfolio-website-314b

● ShareDrop – darmowe narzędzie, które pozwala na łatwe i bezpieczne udostępnianie plików między urządzeniami w tej samej sieci WiFi, bez konieczności wcześniejszego przesyłania ich na serwer.
https://www.sharedrop.io/

● Strona, która wydaje rekomendacje muzycznych artystów na podstawie Twoich 3 ulubionych zespołów/artystów.
https://www.gnoosic.com/

● Slack, ale w skoroszycie Google Sheets.
https://unslack.co/

● Ręcznie rysowana, animowana jazda tramwajem. Trzymaj się lewej lub prawej strony, aby się poruszać. Zatrzymuj się na stacjach, aby pozwolić kitku wsiąść do środka.
https://alexanderperrin.com.au/paper/shorttrip/#

● Cursor Dance Party – to po prostu strona, gdzie wielu użytkowników może zrobić imprezę kursorów.
https://cursordanceparty.com

● Liczba nowości w web devie Cię przytłacza? Po prostu trochę zwolnij. Nie musisz znać każdego frameworka. Przy okazji – wiedziałeś, że można zmienić nazwę pobieranego pliku poprzez HTML?
https://css-tricks.com/slow-movement/

● Istnieje wiele sytuacji, w których dodanie lub usunięcie jednego słowa może zmienić wygląd projektu, a co gorsza, może go zepsuć i uczynić nieużytecznym. Co zrobić z za długimi lub za krótkimi elementami przy użyciu CSS?
https://ishadeed.com/article/css-short-long-content/

➡ BONUSY:
● 50 narzędzi i źródeł, które być może polubisz.
https://dev.to/denicmarko/50-free-tools-and-resources-you-re-gonna-love-4hd0 (warto zajrzeć jeszcze tutaj)

● 101 porad, które sprawią, że będziesz lepszym deweloperem.
https://dev.to/simonholdorf/101-tips-to-make-you-a-better-developer-2jo3

● Dominujące trendy w nadchodzącym roku 2021.
https://dev.to/theme_selection/dominating-web-development-trends-2021-2ihp

➡ #humorinformatykow
Dziś #protip dotyczący zadawania pytań na Stack Overflow ( ͡° ͜ʖ ͡°) pokaż całość

źródło: SO.png

Uwaga! Zmiana zasad wołania użytkowników [ #webstuff ]!

#mirkolisty nie działają, więc zmieniam zasady wołania do kolejnych wpisów z tej serii.

➡ Chcesz być wołany/a do kolejnego wpisu? Zaplusuj ten wpis.
➡ Nie chcesz być wołany/a do kolejnego wpisu? Nie plusuj tego wpisu.

Dziś ostatni raz wołam osoby zapisane na dawną mirkolistę.

PS. Dajcie znać czy wolicie plusować sam wpis czy specjalny komentarz pod wpisem i na podstawie tego wołanie do kolejnych wpisów.

--------------------------------------------------------------------------------

● Aspect Ratio Boxes – Wartość właściwości "padding" wyrażonej w procentach jest obliczana na podstawie szerokości elementu macierzystego. Przydaje się to do zachowania proporcji, np. obrazów. Narzędzie pomaga wygenerować odpowiedni kod #css.
https://css-tricks.com/aspect-ratio-boxes/

● Vue 3.0 zostało wydane!
https://github.com/vuejs/vue-next/releases/tag/v3.0.0

● Krótki przewodnik po budowie i publikacji swojej pierwszej paczki npm.
https://dev.to/assuncaocharles/building-and-publishing-your-first-npm-package-1kpb

● 10 użytecznych funkcji HTML (głównie znaczników), których być może nie używasz lub nie znasz.
https://dev.to/atapas/10-useful-html5-features-you-may-not-be-using-2bk0

● ColorZilla – wtyczka do Chrome i Firefox, które dodaje color picker, eye dropper i gradient generator.
https://www.colorzilla.com/chrome/

● Inspiracja: Ciekawy projekt opakowania na płytę z filmem, która nie ma żadnego nadruku ( ͡° ͜ʖ ͡° )つ──☆*:・ﾟ
https://imgur.com/u4eJRPW

● Wtyczka do VSC, która pozwala na wizualizację struktur danych podczas debugowania.
https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer#hediet

● Inspiracja: Ciekawa koncepcja przejść pomiędzy ekranami aplikacji mobilnej prezentującej różne modele butów.
https://gfycat.com/pl/tighthandmadeincatern

● Anyfiddle – Takie JSFiddle, ale dla wielu języków programowania. Aplikacja pozwala uruchomić dowolną komendę znaną z Linuxa za pomocą wbudowanego terminala i uzyskać dostęp do swoich uruchomionych projektów za pomocą publicznych adresów URL.
https://www.anyfiddle.com

● Inspiracja: Aplikacja prezentująca wizualizację przypadków koronawirusa na świecie w 3D.
https://covid19-globe.web.app

● Ana Tudor – Kobieta, którą określiłbym artystką CSS-a. Tworzy niesamowite rzeczy w samym CSS.
https://codepen.io/thebabydino/pens/showcase

● Inspiracja: Jedna z bardziej pokręconych animacji preloadera jaką widziałem. Implementacja w JS.
https://gfycat.com/pl/brokenspeedyangwantibo

● Moodify – Aplikacja, która generuje muzyczną playlistę w zależności od Twojego nastroju. Wymaga połączenia konta Spotify.
https://moodify.benmiz.com

● "O, Wołacz!" – Moje proste narzędzie do generowania list wołania na Mirko.
https://klocus.pl/wolacz/

● Wiele linków z mojego tagu #webstuff posegregowanych wg odpowiednich kategorii.
https://tagpacker.com/user/klocus

➡ #humorinformatykow pokaż całość

źródło: languages-war.jpg

Nie wiem co napisać we wstępie, więc zapraszam po prostu na [ #webstuff ]!

● Aspect App – Narzędzie, które pozwala wyklikać responsywną stronę.
https://aspect.app

● dbdiagram.io – Darmowe i proste narzędzie do rysowania diagramów relacji DB poprzez zwykłe pisanie kodu. Zaprojektowane dla programistów i analityków danych.
https://dbdiagram.io/

● PHPSandbox – Narzędzie do prototypowania lub współdzielenia projektów PHP z obsługą pakietów Composer.
https://phpsandbox.io/

● Tiiny Host – Wybierasz plik *.zip z plikami strony, wgrywasz i gotowe! Strona jest dostępna w Internecie przez 7 dni.
https://tiiny.host

● 30 seconds of code – Strona, która dostarcza krótkich fragmentów kodu ułatwiających pracę. Można je wyszukiwać według nazwy, tagu, języka lub za pomocą opisu fragmentu. Posiada ponad 400+ snippetów kodu.
https://www.30secondsofcode.org

● Front-end coding challenges using a real-life workflow – Polepszaj swoje umiejętności w zakresie front-endu, budując prawdziwe projekty. Rozwiązuj prawdziwe wyzwania związane z HTML, CSS i JavaScriptem podczas pracy nad profesjonalnymi projektami.
https://www.frontendmentor.io

● Shortcuts.design – Niewielka strona internetowa, która w prosty i przejrzysty sposób wymienia skróty klawiszowe w popularnych aplikacjach projektowych.
https://shortcuts.design

● content-visibility, czyli pomiń renderowanie tego czego jeszcze user nie widzi na ekranie w #css.
https://web.dev/content-visibility/

● Optymalizacja CSS w celu szybszego ładowania strony.
https://pustelto.com/blog/optimizing-css-for-faster-page-loads/

● Strona z czterema różnymi narzędziami: edytor animacji CSS, generator cienia z obsługą orientacji urządzenia (cień zienia swoje położenie wraz z ruchami naszego telefonu), generator palet kolorów, a także lista znaków specjalnych.
https://keyframes.app

● Web Skills – Wizualny przegląd przydatnych umiejętności do nauki jako web developer. Jest on przydatny dla osób, które dopiero co zaczęły uczyć się o rozwoju sieci oraz dla osób, które są w tej dziedzinie od lat i chcą się uczyć nowych rzeczy.
https://andreasbm.github.io/web-skills/

● Themer – Narzędzie, w którym wprowadzasz zestaw kolorów i generuje motywy dla Twojego środowiska programowania (edytory, terminale, tapety i inne).
https://themer.dev

● TV Chart - Rozszerzenie dla Google Chrome, które pokazuje oceny odcinków seriali na Netfliksie przy użyciu API IMDB.
https://chrome.google.com/webstore/detail/tv-chart/hodmmnlcinpkhnkkmfdbblcdnfffakgk

● Maztec – Platforma do tworzenia interaktywnych scenariuszy, np. tekstowych gier RPG.
https://www.mazetec.org

● Brave – Plugin dla #wordpress, który umożliwia w łatwy sposób zbudowanie okienka pop-up (np. z newsletterem), które może zawierać wiele kroków.
https://getbrave.io

● Free for developers – lista oprogramowania (SaaS, PaaS, IaaS, itd.) i innych ofert, które są w jakimś stopniu za darmo dla deweloperów.
https://free-for.dev/

● Wiele linków z mojego tagu #webstuff posegregowanych wg odpowiednich kategorii.
https://tagpacker.com/user/klocus

➡ #ciekawostki
● Dodając kropkę do adresu filmu na YouTube pominiesz reklamy. Kropkę należy dodać zaraz po domenie *.com.

Przykład:
https://www.youtube.com/watch?v=EzDLDLxOVM4 – reklama na początku
https://www.youtube.com./watch?v=EzDLDLxOVM4 – brak reklamy na początku

➡ #humorinformatykow pokaż całość

źródło: flexbox.png

Cześć, webdeveloperskie świry! [ #webstuff ]

● Aplikacja internetowa, która pozwala na oglądanie samouczków kodowania na YouTube bez rozpraszania uwagi i dodawanie do nich notatek.
https://teachyourselfcode.io/

● Zbiór wskazówek projektowych, nad którymi pracował użytkownik Twittera.
https://twitter.com/i/events/994601867987619840

● Wtyczka do Visual Studio Code, która poszerza możliwości edytora o Real-Time Debugging.
https://marketplace.visualstudio.com/items?itemName=hediet.realtime-debugging

● Niewielka i prosta biblioteka JavaScript do dodawania powiązań klawiatury do aplikacji.
https://github.com/lukeraymonddowning/whenipress

● Zbiór zasad UX, które projektanci mogą brać pod uwagę podczas budowania interfejsów użytkownika.
https://lawsofux.com

● Wyjaśnienie działania NgRx w Angularze na prostych przykładach.
https://medium.com/better-programming/angular-getting-started-with-ngrx-75b9139c23eb

● Gitmoji, czyli przewodnik emoji dla Twoich commitów.
https://gitmoji.carloscuesta.me

● Conventional Commits – Specyfikacja dodawania czytelnych commitów.
https://www.conventionalcommits.org/

● GACP – narzędzie, które automatyzuje dodawanie commitów wg specyfikacji dodawania czytelnych commitów + wstawia odpowiednie emoji.
https://github.com/vivaxy/gacp

● Kolekcja komponentów, wzorów, przykładów i inspiracji w zakresie wzornictwa ui/ux.
https://www.niceverynice.com/components

● Wzory tła w CSS, które dodadzą złożoności Twoim projektom.
https://bansal.io/pattern-css

● tailblocks – gotowe komponenty Tailwind CSS.
https://mertjf.github.io/tailblocks/

● Narzędzie, które punktuje SEO, dostępność, szybkość itp.
https://web.dev/

● Dark Mode przy użyciu jednej linijki CSS.
https://dev.to/akhilarjun/one-line-dark-mode-using-css-24li

● Wiele linków z mojego tagu #webstuff posegregowanych wg odpowiednich kategorii.
https://tagpacker.com/user/klocus

➡ #humorinformatykow pokaż całość

źródło: dark-mode.jpg

Bez zbędnego przedłużania – zapraszam na [ #webstuff ]!

● Tworzenie makiet zrzutów ekranu w przeglądarce w kilka sekund. Screenshot.rocks zmienia zwykłe zrzuty ekranu w piękne makiety.
https://screenshot.rocks

● Przydatne jednolinijkowce w JS. #javascript
https://1loc.dev/

● Zbiór lekcji i wiedzy z różnych dziedzin IT: algorytmika, CSS, git, HTML, PHP, JS, Python, C#, LaTex, MySQL, Angular, itd.
https://devtut.github.io/

● Interaktywna nauka gita wraz z wizualizacjami.
https://learngitbranching.js.org/

● Darmowe kursy od Harvardu: Game Development, JavaScript, Python i React Native.
http://ow.ly/H2Yo50zw62v

● Kolekcja elementów UI w CSS i HTML.
https://csslayout.io/patterns/

● Jak zarządzać HTML DOM w czystym JS?
https://htmldom.dev/

● Darmowy kurs online dla programistów na poziomie junior i regular.
https://devupgrade.online/

● Komponenty Vue z konfigurowalnymi klasami przytosowanymi do TailwindCSS, ale są kompatybilne z dowolnym frameworkiem. #vue
https://vue-tailwind.com/

● Nieostylowane i elastyczne komponenty UI do Vue.
http://ow.ly/9Jec50z8CvB

● Ponad 600 ikon SVG na licencji MIT, które można dostosować.
https://tablericons.com

● Wiele linków z mojego tagu #webstuff posegregowanych wg odpowiednich kategorii.
https://tagpacker.com/user/klocus

➡ #ciekawostki
● Protip na #apple #macos: Klawisz "Option" + kliknięcie LPM w wybranym miejscu Terminala umiejscowi tam kursor (⌐ ͡■ ͜ʖ ͡■)
https://streamable.com/aq75p4

➡ #humorinformatykow i trochę #przegryw pokaż całość

źródło: Bing.jpg

Nie ma czasu na wprowadzenie! [ #webstuff ]!

● Kompletny przewodnik dla twórców webdev, którzy są lub chcą zostać freelancerami.
http://ow.ly/MOqb50ylC3U

● Narzędzie z fajnym przedstawieniem graficznym Regexu oraz wieloma przykładami najczęściej używanych formuł.
https://ihateregex.io/

● To narzędzie pozwala szybko wygenerować dane połączenia Wi-FI wraz z kodem QR. Po prostu wprowadź swoje dane logowania i wydrukuj wygenerowany plik PDF.
https://www.mywifisign.com/

● Konsolowe narzędzie, które znajduje publicznie znane luki bezpieczeństwa w frontendowych bibliotekach JavaScript wybranej strony internetowej.
http://ow.ly/e7bJ50ylEaR

● Jak zachować motywację do dalszj nauki nowych technologii, bibliotek lub języka?
https://youtu.be/EINfXAuHORI

● Zbiór pomysłów, które pomogą deweloperom na poziomie podstawowym zbudować portfolio.
http://ow.ly/muhh50ylFkq

● Zestaw 72 pytań wielokrotnego wyboru, które sprawdzą twoją wiedzę na temat JavaScriptu. Każda odpowiedź ma swoje wyjaśnienie.
https://quiz.typeofnan.dev/

➡ Nowości
● Chrome DevTools posiada już inspektora animacji CSS! Możecie zmienić czas, opóźnienia i wiele innych.

● Chrome DevTools ma wbudowany edytor box-shadow, który wyświetla podgląd cienia w czasie rzeczywistym.

● WebComponents są obsługiwane natywnie w każdej liczącej się przeglądarce!
http://ow.ly/T1bE50ylEQ8

➡ #ciekawostki
● Szybkość rozwiązania Recaptchy zależy od tego, na ile pozwalasz śledzić się Google. W przypadku korzystania z ustawień lub rozszerzeń zapewniających prywatność w przeglądarce internetowej (np. blokowanie plików cookies firm trzecich, modułów śledzących itp.) zadanie Recaptcha z pewnością potrwa co najmniej 3-5 razy dłużej niż w przypadku użytkowników, którzy nie dbają o swoją prywatność.
http://ow.ly/iuWp50ylDpV

● Wiecie, że Microsoft, Google i Mozilla wysyłają sobie ciasta z okazji aktualizacji przeglądarek? Ostatnio twórcy Edga otrzymali takie.
http://ow.ly/DuJx50ylFXP

➡ Chcesz być na bieżąco? Zapraszam do obserwowania mojego profilu oraz śledzenia fanpage, który prowadzę!
● https://www.facebook.com/truipl/
● https://www.linkedin.com/company/truipl/

➡ #humorinformatykow pokaż całość

źródło: comments meme.jpg

Hoł, hoł, hoł! Zapraszam na #webstuff!

❶ Internet Society (ISOC) niedawno sprzedało rozszerzenie domen „.org” za 1,35 miliarda dolarów firmie Ethos Capital. Szykujcie się na podwyżkę cen...
http://ow.ly/KmoY50xv8A3

❷ A tak wygląda większość stron internetowych w 2019 :/
http://ow.ly/pFCZ50xv8Rn

❸ Krótki przewodnik wizualny po elementach typografii.
https://imgur.com/a/D3RZwDQ

❹ Etykiety (labelki) nie zawsze są potrzebne, by użytkownik zrozumiał, co przedstawiają dane :)
http://ow.ly/NzSP50xv9az

❺ Proceduralne generowanie krajobrazów jako SVG w JS.
http://ow.ly/uCha50xv9ln

❻ Wiecie, że z jQuery korzysta 85% z 5 milionów najpopularniejszych w Internecie stron?
http://ow.ly/cpNg50xv9t3

❼ Wywiad z web developerem pracującym dla Pornhub.
http://ow.ly/XjJ050xva57

❽ Przewodnik po wszystkich najważniejszych pojęciach w CSS: specificity hierarchy, document flow, positioning, layouts, and responsive design.
http://ow.ly/sMMZ50xvaap

❾ Nauka nowoczesnego JavaScriptu poprzez budowę gry Tetris.
http://ow.ly/Zzf850xvaFr

BONUS: Tetris w 100 linijkach: https://github.com/Alaricus/SimpleTetris

❿ Dwie złośliwe biblioteki Pythona przyłapane na kradzież kluczy SSH i GPG.
http://ow.ly/A4AB50xvaP8

⓫ Dlaczego warto wybrać Figmę zamiast innych popularnych narzędzi, np. zamiast Sketcha?
http://ow.ly/NSen50xvaWY

⓬ Rozszerzenie dla przeglądarki Chrome, które zmienia „nową kartę” w narzędzie do robienia notatek.
http://ow.ly/pzVe50xvbcm

⓭ Prosta i niewielka biblioteka JavaScript, która dodaje efekt paralaksy do dowolnych obrazów.
https://simpleparallax.com/

BONUS: Efekt paralaksy może powodować u niektórych użytkowników zawroty głowy lub uczucie choroby lokomocyjnej.
http://ow.ly/mcBh50xvbxy

⓮ 30 porad i wskazówek dotyczących narzędzi programisty w Firefox.
http://ow.ly/ie3Z50xvbAn

➡ #humorinformatykow

❶ Ktoś ma jakiś pomysł dlaczego nie działa zaznaczone media query na tej stronie?
https://imgur.com/a/u8heDSL

➡ Wyniki ankiety

Około 2 tygodnie temu utworzyłem ankietę na mirko, w której zapytałem o system operacyjny, z którego korzystają czytelnicy webstuff. W ankiecie wzięło udział ponad 400 użytkowników. Dane porównałem z http://ranking.gemius.com/pl/ranking/systems/ pokaż całość

źródło: Zrzut ekranu 2019-12-09 o 14.54.31.png

Witam serdecznie wszystkich obserwatorów tagu o nazwie [ #webstuff ]!

❶ Darmowa i otwartoźródłowa alternatywa dla Postmana dostępna przez przeglądarkę.
https://postwoman.io/

❷ Lista 18 użytecznych narzędzi dla deweloperów.
http://ow.ly/NWPJ50x5D82

❸ Kiedy używać checkboxów, a kiedy switchy?
http://ow.ly/5TEw50x5CRj

❹ "38 osób przegląda ten lot!", czyli jak to jest z tymi licznikami mającymi nas zmusić do szybszej decyzji zakupu?
http://ow.ly/NHrM50x3KHU

❺ Rozszerzenie do Chrome, które zmienia dowolną stronę internetową w interfejs API. Wybierz dane, które chcesz, nazwij je, a po kilku sekundach uzyskasz URL endpoint, który możesz zapytać o wyniki.
https://simplescraper.io/

❻ Bardzo kreatywne portfolio.
https://bruno-simon.com/

❼ The Fuck to wspaniałe narzędzie, które koryguje błędy w poprzednich poleceniach konsoli.
https://github.com/nvbn/thefuck

❽ Darmowy plugin do WooCommerce, który umożliwia dodanie własnych pól do produktu oraz podsumowania zakupów.
http://fieldsfactory.com/

❾ Zmiana favicony w zależności od trybu graficznego (dark mode / light mode).
http://ow.ly/54Vl50wOsrH

❿ Jak nie tworzyć przycisków?
http://ow.ly/DKoW50wOsnS

⓫ Mini kurs Sass w 20 minut.
http://ow.ly/v5UU50wOrP0

⓬ Unikaj korzystania z wartości "100vh" dla urządzeń mobilnych. Zamiast tego można użyć "html, body { height: 100%; }" osiągając ten sam efekt na różnych urządzeniach omijając problem z artykułu.
http://ow.ly/i3ec50wOrHK

⓭ Artykuł, który przedstawia proces tworzenia logo do filmu "Joker".
http://ow.ly/AFDk50xi4Hs

⓮ Przeanalizowano 10 000 000 stron w Internecie pod kątem WCAG (Web Content Accessibility Guidelines) i ADA (Americans with Disabilities Act). Niekiedy wynik dochodził do 98% niezgodności z wytycznymi.
http://ow.ly/fJhq50xf45x

⓯ Zestawy kolorów, fontów, narzędzi w jednym miejscu.
https://www.colorsandfonts.com/

➡ Chcesz być na bieżąco? Zapraszam do obserwowania mojego profilu oraz śledzenia fanpage, który prowadzę!
https://www.facebook.com/truipl/

➡ #humorinformatykow pokaż całość

źródło: trolololo.jpg

Dziś w [ #webstuff ] wyniki ankiety, które nie są ani trochę zaskakujące ( ͡° ͜ʖ ͡° )つ──☆*:・ﾟ

❶ Świetne plakaty pt. "Destroying nature is destroying life".
http://ow.ly/x67850wb3Lx

❷ Leon Sans to geometryczny krój pisma bezszeryfowego wykonany za pomocą kodu przez Jongmin Kim. Pozwala dynamicznie zmieniać grubość czcionki i tworzyć niestandardowe animacje, efekty lub kształty Canvas HTML5. Autor zaprojektował font na cześć swojego nowo narodzonego dziecka Leona.
https://leon-kim.com/

❸ Lepszy sposób na sprzedanie swoich umiejętności jako programisty niż po prostu pisanie „zatrudnij mnie!” lub masowe aplikowanie na stanowiska pracy.
Dowiedz się, jakie są problemy firmy; pokaż, jak możesz pomóc rozwiązać te problemy.
http://ow.ly/IY8s50wcFEp

❹ Google wprowadza dwa nowe atrybuty do linków.
http://ow.ly/2Yo950wcFPg

❺ Bardzo ciekawy wpis pt. "Rzeczy, których nauczyłem się na własnej skórze (w ciągu 30 lat rozwijania oprogramowania)".
http://ow.ly/65Ks50wcG1d

❻ Niesamowity efekt podczas scrollowania od #apple!
https://www.apple.com/ipados/

Dla ciekawskich, którzy chcieliby zobaczyć jak można uzyskać taki efekt przy pomocy HTML, CSS & JS: https://codepen.io/m-mccallum/pen/GRKxqbr

❼ Wycięty tekst na tle obrazkowym w #css? Sprawdź jak to zrobić!
http://ow.ly/qnlW50wcHUE

❽ JSON Storage przez protokół HTTP. Pozwala przechowywać, odczytywać i modyfikować dane JSON przez API HTTP za darmo. Idealny do małych projektów, prototypów lub hackathonów.
https://jsonbox.io/

❾ Nowoczesna aplikacja do robienia notatek oparta na Markdown.
https://notable.md/

❿ Notatki w Markdown z edycją w trybie live.
https://typora.io/

⓫ Wiedzieliście, że w #macos można kliknąć 2x w krawędź aplikacji (górną, dolną, prawą lub lewą), aby została ona rozszerzona w tę stronę?
https://streamable.com/r0nww

⓬ Ależ świetnie wykonane rozwijane menu! Koniecznie sprawdźcie je na wersji desktopowej :)
https://stripe.com/

⓭ "git-blame-someone-else", czyli obwiń kogoś innego za swój commit z kiepskim kodem!
http://ow.ly/mtTJ50wtfJ7

⓮ Skąd symbol "x" w okienkach systemowych do ich zamykania? W jakim komputerze pojawił się po raz pierwszy?
https://medium.com/re-form/x-to-close-417936dfc0dc

⓯ Notatki dla programistów na macOS. Obsługa markdown oraz wersjonowanie przez gita.
https://fsnot.es/

⓰ W CSS można ustawić osobne właściwości w zależności od trybu urządzenia (dark mode / light mode).
http://ow.ly/4lYX50wOqq1

⓱ Dodajesz "dark mode"? Nie zapomnij o jasnych obrazach! Podawaj różne obrazy natywnie w "dark mode".
http://ow.ly/1cm650wOrdL

⓲ Git Cheat Sheet z częstymi zadaniami, przykładami i wyjaśnieniami.
http://ow.ly/BPu650wOsxa

➡ Chcesz być na bieżąco? Zapraszam do obserwowania mojego profilu oraz śledzenia fanpage, który prowadzę!
https://www.facebook.com/truipl/

➡ Ankieta
Jakiś czas temu w tym wpisie przeprowadziłem ankietę wśród Wykopowiczów, którzy zajmują się #webdev. W ankiecie zapytałem się o przeglądarkę z jakiej korzystają podczas pracy. Co (nie)ciekawe, wyniki wyglądają bardzo podobnie do ogólnego udziału przeglądarek desktopowych w Polsce w ubiegłym miesiącu. Niestety byłem zmuszony wrzucić przeglądarki Brave oraz Vivaldi pod "Inne", ponieważ znalezione przeze mnie statystyki udziałów przeglądarek w Polsce ich nie uwzględniają jako osobne byty. pokaż całość

źródło: chart.png

Łolololo! [ #webstuff ]!

❶ Dzięki CRUDPI możesz utworzyć interfejs CRUD API i wypełnić go niestandardowymi danymi-atrapami dla swojego interfejsu w ciągu kilku sekund!
https://crudpi.io/

❷ Jeśli szukasz tutoriali, to koniecznie zajrzyj na stronę, która ułatwia ich odkrywanie i oglądanie.
https://2uts.com/

❸ Git wytłumaczony w jedną godzinę.
https://www.youtube.com/watch?v=BnDiKdG6oUA

❹ Color picker kanapy przy pomocy CSS i SVG
http://ow.ly/agxW50vKEJj

❺ Generator fal SVG.
https://getwaves.io/

❻ Galeria gradientów #css.
https://www.gradientmagic.com/

❼ Wykrywanie trybu incognito w Google Chrome (⌐ ͡■ ͜ʖ ͡■)
http://ow.ly/XvF050vKIBZ

❽ Funkcje map(), filter() oraz reduce() wyjaśnione przy użyciu animacji
https://medium.com/@js_tut/map-filter-and-reduce-animated-7fe391a35a47

❾ Narzędzie, które pokazuje "koszt" dodania paczki npm do projektu.
https://bundlephobia.com/

❿ WebGL Fluid Simulation - bardzo fajnie wygląda.
http://ow.ly/UquX50vT2Kw

⓫ Wielu deweloperów nie przywiązuje wystarczającej uwagi do tworzenia stron, które byłby dostępne również dla osób niepełnosprawnych. Oto krótkie wideo, które wyjaśnia dlaczego to ma znaczenie.
https://youtu.be/dEbl5jvLKGQ

⓬ Najważniejsza umiejętność, jakiej może nauczyć się programista: mówienie NIE!
http://ow.ly/j6PJ50vT3yf

⓭ Świetna i darmowa alternatywa dla Slacka! Oferuje możliwość pisania z użytkownikami Slacka.
https://about.riot.im/

⓮ Uprość #javascript - użyj .some() i .find()
http://ow.ly/he0250vXgPT

⓯ CanIUse.com, ale dla klientów mailowych.
https://www.caniemail.com/

➡ Chcesz być na bieżąco? Zapraszam do śledzenia fanpage, który prowadzę!
https://www.facebook.com/truipl/

➡ #humorinformatykow pokaż całość

źródło: 70433356_2416611948433721_7764642753329233920_n.jpg

Web... Web.... Web... [ #webstuff ]!

❶ Dla większości ludzi "dark mode" zmniejsza czytelność i wydajność. W badaniu z 2003 r. zbadano, w jaki sposób na wykonanie zadań przez użytkowników miały wpływ różne warunki wyświetlania ekranu. Okazało się, że robili to szybciej mając ciemny tekst na jasnym tle.
http://ow.ly/cIg550vr7Z6

❷ Korektor graficzny w adresie!
http://ow.ly/GIWm50vnyJd

❸ Uroczy i animowany ekran logowania
http://ow.ly/c85050vnyGl

❹ Ogromna lista plików cookies na stronie Oracle...
https://i.imgur.com/kqjYVj9.gifv

❺ WTF?! To nie nie może być po prostu sam #css!
http://ow.ly/RaPC50vnysS

❻ Po podjęciu przez Microsoft decyzji o zakończeniu rozwoju własnego silnika renderowania sieci i przejściu na Chromium, kontrola nad siecią została funkcjonalnie przekazana Google. To niepokojący zwrot wydarzeń, biorąc pod uwagę zachowanie firmy w przeszłości.
http://ow.ly/npiZ50vnxZF

❼ Oto niektóre z najlepszych zasobów do poprawy umiejętności kodowania.
http://ow.ly/yiwP50vnxV9

❽ Co się dzieje, kiedy deweloperzy oprogramowania są (nie)szczęśliwi?
http://ow.ly/VlZd50vnx6k

❾ Windows 95 miał rozmiar 30 Mb. Dzisiaj strony internetowe są cięższe! Aplikacja klawiatury Google zjada 150 Mb. Czy aplikacja, która wyświetla 30 klawiszy na ekranie jest naprawdę pięciokrotnie bardziej złożona niż cały system Windows 95?
http://ow.ly/dVjB50vnwXN

❿ Interesujący komentarz na Reddicie o byciu programistą w dzisiejszych czasach. Czy szukanie odpowiedzi w Google jest czymś złym? Czy prawdziwy programista powinien wszystko znać na pamięć?
http://ow.ly/ijln50vmiKf

⓫ Optymalizacja żądań Google Fonts (ograniczenie nawet do 90%, deklarując tylko te znaki, których faktycznie potrzebujesz).
https://www.smashingmagazine.com/2019/06/optimizing-google-fonts-performance/

➡ #ciekawostki
❶ W ten sposób font Times New Roman "spotkał" się z czytelnikami po raz pierwszy.
https://imgur.com/a/PURI9yC

❷ Ewolucja frontendu w latach 1995-2019.
https://imgur.com/a/Pb41KBC

➡ Chcesz być na bieżąco? Zapraszam do śledzenia fanpage, który prowadzę!
https://www.facebook.com/truipl/

➡ #humorinformatykow
Porównanie wyników PageSpeed Insights stron, które piszą o tym jak je ulepszyć... pokaż całość

źródło: 67782535_2360003700761213_8568099347634323456_o.png

Czas na... [ #webstuff ]!

Chcesz być na bieżąco? Zapraszam do śledzenia fanpage, który prowadzę!
➡ https://www.facebook.com/truipl/

❶ Wskazówki, dzięki którym będziesz korzystał(a) efektywniej z Visual Studio Code.
http://ow.ly/xXm550v9t6U

❷ Konfiguracja VS Code dla wydajnego programowania w #php.
http://ow.ly/Ow6a50v9pVR

❸ Znacznik stylu, który styluje sam siebie. #css
http://ow.ly/VXoL50v9cdA

❹ "Responsywna" animacja buźki (zmniejszcie wysokość, aby zobaczyć efekt).
http://ow.ly/tWri50v9brL

❺ laxxx.js - Prosta i lekka wtyczka w czystym javascript do tworzenia animacji podczas scrollowania.
http://ow.ly/wDj050v9b0J

❻ CSS to potrafi? Lista niesamowitych rzeczy, które potrafi CSS!
https://dev.to/ananyaneogi/css-can-do-that-18g7

❼ Czy wiesz o "prefers-reduced-motion" w CSS?
http://ow.ly/tP8950v98Pw

❽ Darmowe kursy programowania.
https://www.theodinproject.com/

❾ Lista zasobów związanych z tworzeniem / projektowaniem stron internetowych. Kolory, obrazy, tła, CSS, HTML, inspiracje i Javascript.
https://webdevresources.info/

❿ Node.js Crash Course w 90 minut.
https://www.youtube.com/watch?v=fBNz5xF-Kx4

⓫ Czy wiesz, że istnieje element #html, który tworzy natywną listę autouzupełniania o nazwie <datalist>?
http://ow.ly/X9Qk50v0DEi

⓬ OriginPHP to dość nowy i open source'owy framework MVC, który umożliwia programistom PHP szybkie tworzenie wysokowydajnych i skalowalnych aplikacji internetowych.
https://www.originphp.com/

⓭ Getting Started with Vue - Omówienie i samouczek dla początkujących.
http://ow.ly/zGdJ50uB8Gg

⓮ Książki, które powinien przeczytać Junior Developer w 2019 roku.
http://ow.ly/CfRF50uB8Cx

⓯ Blobmaker - narzędzie online, które pomaga tworzyć organiczne kształty SVG.
https://www.blobmaker.app/

⓰ "Rzeczy, których nikt nigdy nie nauczył mnie o CSS."
http://ow.ly/bj4950uyR2P

⓱ Zmniejsz rozmiar projektu do 50%, losowo usuwając połowę plików.
https://thanosjs.org/

⓲ Strona internetowa, na której możesz przeglądać projekty open source, do których możesz dołączyć.
https://gauger.io/contrib/

⓳ O tworzeniu mailingów słów kilka.
https://pos.li/2c5ab7

➡ #grafika / #webdesign
❶ Ilustracja wizualnej hierarchii.
https://imgur.com/rF3oDMp

❷ Ponad 52 000 wysokiej jakości obrazów dzieł sztuki zostało udostępnionych na licencji CC0 przez Art Institute of Chicago.
http://ow.ly/wf2l50v99MF

❸ 30 Great Free Fonts
https://medium.muz.li/30-great-free-fonts-for-2019-14814a17e91a

➡ Inspiracje
❶ Liczba 123 w kształcie wiolonczeli.
https://imgur.com/RmGp3M3

❷ Naturalny font z truskawek.
https://imgur.com/HrgI990

❸ Fancy Scroll.
http://ow.ly/BkTb50v99fW

❹ Wystarczy przewinąć w dół, aby zobaczyć coś super!
https://www.apple.com/apple-arcade/

❺ Kreatywna reklama kuchni 3D w gazecie.
https://imgur.com/Kcer7Ta

➡ Nowości
❶ Niedługo pojawi się bardzo ciekawa wtyczka (Gimli) do Visual Studio Code, która zmienia ten edytor w wizualne narzędzie.
https://gimli.app/

❷ Natywne "image lazy-loading" w Chrome nadchodzi!
https://twitter.com/addyosmani/status/1114777583302799360?s=21

➡ #ciekawostki
❶ Ciekawy efekt frezowania w specjalnym wielokolorowym materiale.
https://gfycat.com/everlastingdeficientethiopianwolf

❷ Która jest godzina? Ach, zielona!
http://ow.ly/pTWp50uB8aH

➡ #humorinformatykow
I to się nazywa kreatywna rejestracja! pokaż całość

źródło: 67636967_2357464054348511_2464336124298919936_n.png

Dziś w [ #webstuff ] zdecydowanie więcej treści do poczytania :-)

❶ "Programowanie jest do bani" - zabawnie i dobrze napisany artykuł o programowaniu.

You can’t restart the internet. Trillions of dollars depend on a rickety cobweb of unofficial agreements and “good enough for now” code with comments like “TODO: FIX THIS IT’S A REALLY DANGEROUS HACK BUT I DON’T KNOW WHAT’S WRONG” that were written ten years ago.
https://bit.ly/1NsMtY8

❷ Jak odpowiadać na pytanie klientów "Ile kosztuje u ciebie stworzenie strony internetowej?".
https://bit.ly/2VKzhfM

❸ Kanał z darmowymi kursami Web Dev: HTML, CSS, JS, WordPress, Laravel, React, VUE, Node.js, bazy danych, git, Linux itd.
https://bit.ly/2DPmv5q

❹ Frontend Bootcamp od HTML/CSS/JS po TypeScript/React/Redux od Microsoftu.
https://bit.ly/2PL8gU9

❺ Czy Google AMP to coś dobrego czy złego?
https://bit.ly/2pnQ5HC

➡ Web Design
❶ Ciekawa dyskusja o klientach / szefostwie na Reddicie.

Asking a designer to start designing without content is like asking a house painter to start painting before the house is built. Sure, you can paint the foundation, but you'll just have to redo it when the drywall goes up.
https://bit.ly/2VIsMdf

❷ Problem z dzisiejszym zakresem projektowania graficznego. Ciekawy wywód użytkownika na Reddicie.
https://bit.ly/2vA0HGw

➡ Inspiracje
❶ Świetne logo "panda"
https://imgur.com/a/Oi0knfu

❷ Historia ikon programu Microsoft Word.
https://imgur.com/a/33dpFgx

❸ Minimalistyczny plakat "Hannibal" autorstwa Vier Nev.
https://imgur.com/a/ngmGaqb

➡ Nowości
❶ Redesign Facebooka, nowy Messenger, sekcja randkowa.
https://bit.ly/2WovHF6

➡ #humorinformatykow pokaż całość

źródło: graphic designer naming convention.jpg

Nikt się nie spodziewał dziś [ #webstuff ]-owej inkwizycji! ( ͡° ͜ʖ ͡°)

❶ Flexbox playground. #css
https://bit.ly/2GV4VRl

❷ Interaktywny generator CSS Grid.
https://grid.layoutit.com/

❸ Front-end Road Map
https://imgur.com/a/np96TYs

❹ DNS - Jak to się dzieje, że przeglądarka znajduje stronę w Internecie?
https://imgur.com/a/KaPnQVs

❺ Przewodnik po Lazy Loading Images
https://imgur.com/a/fXkDqPy

➡ #grafika / #webdesign
❶ Rozszerzenie przeglądarki Chrome dla projektantów / koderów do pomiaru wymiarów między elementami HTML.
https://bit.ly/2YDBIiI

❷ 12 zasad UX w ruchu (wzorowanych na "Illusion of Life" Disney'a)
https://bit.ly/2oAIK6w

❸ Dobra wizualizacja tego, jak działa CMYK (możecie kupić takie podkładki pod kubek: https://bit.ly/2UAeFSV)
https://i.imgur.com/dmXoFpw.gifv

❹ Ponad 200 narzędzi dla designerów.
https://flawlessapp.io/designtools

➡ Inspiracje
❶ Płynne przejście pomiędzy przyciskiem a formularzem.
https://i.imgur.com/7rM8VEs.gif

❷ Rysunek pizzy utworzony z wyrazów "Pizza".
https://i.imgur.com/NxClA5L.gifv

❸ Plakat, który ilustruje sposób, w jaki "widzi" Daredevil przy pomocy typografii.
https://imgur.com/a/KrCS0BP

❹ Ciekawy pomysł na biret studentów kończących grafikę.
https://imgur.com/a/Xr1NV3V

➡ Nowości
❶ Wiecie co się stanie w 2020? Microsoft wreszcie zabije IE 10 (szkoda, że nie 11).
https://tek.io/2Pw8tu1

❷ Bootstrap 5 nie będzie wymagał już jQuery do działania swoich komponentów.
https://bit.ly/2L1BRtD

➡ #ciekawostki
❶ Oryginalne szkice Pac-Mana.
https://imgur.com/a/u8cFR5Q

❷ Kiedy Narzędzia Deweloperskie w Chrome są otwarte, można kliknąć PPM na przycisk odświeżania, aby uzyskać więcej opcji.
https://imgur.com/kUjvFAA

❸ W USA żyje nieco ponad 1000 osób o imieniu "Infinity". Metoda ".data()" z jQuery próbuje konwertować tę wartość na liczbę. Za ten błąd jest odpowiedzialny Paul Irish.
https://bit.ly/2Gy2WiF

➡ #humorinformatykow pokaż całość

źródło: design_feedback.jpg

Do przejrzenia przed nowym rokiem! [ #webstuff ]

❶ Prosta instalacja fontów z Google Fonts na #macos.
https://bit.ly/2Gz7WqG

❷ Wpis dla wszystkich programistów #javascript, którzy współtworzą aplikację wraz z innymi osobami lub planują to zrobić.
https://bit.ly/2LvmoyL

❸ Zobaczcie jak pewien serwis zredukował rozmiar JS/CSS o 67%.
https://bit.ly/2Lv9OiO

❹ Stwórz swoją pierwszą aplikację PHP/MySQL w #docker.
https://bit.ly/2LEvyZW

❺ Nowe właściwości logiczne CSS - Kolejny krok ewolucji #css.
https://bit.ly/2EPVota

❻ Sieci neuronowe w JavaScript - darmowy kurs składający się z 19 części.
https://bit.ly/2EJgw3B

❼ Zbiór podręczników, blogów, hacków, jednolinijkowców, narzędzi cli / web i innych. Specjalnie dla administratorów systemów i sieci, DevOps, pentesterów lub badaczy bezpieczeństwa.
https://bit.ly/2UOg3Cx

❽ The Front-End Checklist Application - narzędzie dla drobiazgowych web deweloperów.
https://frontendchecklist.io

❾ Kompletny przewodnik po Lazy Loading Images.
https://bit.ly/2NIhsuD

❿ Praktyczna wartość semantycznego #html.
https://bit.ly/2GJcfj3

➡ #grafika / #webdesign
❶ Wyszukiwarka... Kolorów!
https://picular.co

❷ Pary fontów z Google Fonts: kombinacje fontów, które wyglądają dobrze.
https://bit.ly/2ENNoJ2

❸ "Nie zbudujesz czegoś ładnego za pomocą pięciu kolorów HEX. Aby zbudować coś rzeczywistego, potrzebujesz znacznie bogatszego zestawu kolorów do wyboru."
https://bit.ly/2QR1QGU

❹ SVG Filter Builder.
https://svgfilters.com

➡ Nowości
❶ Electron 4.0.0 ujrzał światło dzienne!
https://bit.ly/2PZrBzt

❷ Nowa biblioteka uczenia maszynowego dla #php.
https://github.com/RubixML

❸ NetBeans 10.0 z obsługą PHP 7.3 został wydany.
https://bit.ly/2Rk1fwB

➡ #humorinformatykow
Właściwie to bardziej humor grafików, ale co tam :-)

-------------------------------------------
Chcesz być na bieżąco? Codziennie dwa posty! Śledź nowy fanpage, który prowadzę: https://www.facebook.com/truipl/ pokaż całość

źródło: 48424009_2021183367976583_4985709547432706048_n.jpg

Hoł, hoł, hoł! Cykliczne wpisy z serii [ #webstuff ] znów na Mirko!

❶ Czy Vue prześcigło Reacta? Tak. Jest to spowodowane w dużej mierze tym, iż Vue jest bardzo popularny w Chinach.
https://bit.ly/2MlPwIN

❷ Wyszukiwanie zdjęć na Twitterze za pomocą rozpoznawania twarzy przy użyciu TensorFlow.js
https://bit.ly/2rwFJWW

❸ Jak wygenerować zrzut strony internetowej w formacie SVG, który będzie skalowalny, a jednocześnie będzie posiadał ponad 10 razy mniejszy rozmiar pliku niż szczegółowy zrzut ekranu w PNG?
https://bit.ly/2QIn0pG

❹ 33 zagadnienia, które każdy programista #javascript powinien znać.
https://bit.ly/2EB53Tx

❺ Wskazówki Kirilla Smelova dotyczące PHPStorma wyjaśnione w 9 gifach. #php
https://bit.ly/2UNkSvR

❻ Narzędzie do tworzenia efektownych animacji w #css.
http://animista.net

❼ Unikalna kolekcja statystyk i spostrzeżeń, które, mam nadzieję, pomogą przejść przez ekosystem JavaScript.
https://2018.stateofjs.com

❽ Przykłady animacji tekstu w JavaScript.
https://bit.ly/2Lkqx8x

❾ Microsoft umożliwia korzystanie z darmowych maszyn wirtualnych z systemem Windows do testowania witryny w przeglądarkach tejże firmy.
https://bit.ly/29MTVTm

❿ Prosta gra przez przeglądarkę do nauki CSS Grid.
https://cssgridgarden.com/

⓫ Dan Abramov (twórca Redux) założył własnego bloga, gdzie wyjaśnia różne ciekawe zagadnienia Reacta.
https://overreacted.io

⓬ Web Development w 2019 - Przewodnik krok po kroku prezentujący etapy zostania web developerem.
https://www.youtube.com/watch?v=UnTQVlqmDQ0

➡ #grafika / #webdesign
❶ Generator favicony, który korzysta z Font Awesome.
https://gauger.io/fonticon/

❷ 7 praktycznych wskazówek wraz z przykładami, które podniosą twoje umiejętności UI poprzez odpowiednią taktykę, a nie talent.
https://bit.ly/2ERaVZo

❸ Data Color Picker to fajne narzędzie dla każdego programisty, który chciałby dobrać ładną paletę kolorów, ale tego nie potrafi.
https://bit.ly/2EpSoDI

❹ 30 darmowych fontów na rok 2019.
https://bit.ly/2rjcqaf

➡ Inspiracje
❶ Bananowy deszcz!
https://bit.ly/2PBwLkY

➡ Nowości
❶ Nowa wersja WordPressa 5.0 z wbudowanym edytorem blokowym.
https://bit.ly/2BTwLsM

❷ Nowa wersja przeglądarki Microsoftu będzie korzystała z Chromium.
https://bit.ly/2UbYdsX

➡ #ciekawostki
❶ Susan Kare, słynna artystka Apple, która zaprojektowała wiele ich fontów, ikon oraz ilustracji, jak również dla firmy NeXT, Microsoft czy IBM. (Zdjęcie z lat 80)
https://imgur.com/a/Zev0fQy

➡ #humorinformatykow
Wybór fontu ma znaczenie ;-)

-------------------------------------------
Chcesz być na bieżąco? Śledź nowy fanpage: https://www.facebook.com/truipl/ pokaż całość

źródło: 47380425_1991804500914470_571814302063788032_n.png

Witam po dłuugiej przerwie i zapraszam do kolejnego wpisu z cyklu [ #webstuff ]!

❶ Zamień maile, HipChat i Slacka na najlepsze oprogramowanie open source do czatowania zespołowego.
https://rocket.chat

❷ Darmowy i praktyczny kurs sieci neuronowych w pythonie z użyciem frameworka PyTorch. #python
http://course.fast.ai

❸ Korzystacie ze Slacka? A może chcielibyście wykorzystywać niektóre ze slackowych komend poza Slackiem?
http://slashcommand.club

❹ Biblia Basha - kolekcja alternatyw dla zewnętrznych operacji w Bashu.
https://bit.ly/2uQtNBs

❺ Klient dla Slacka w... Konsoli.
https://bit.ly/2M9VNKe

❻ #php Sandbox dla wielu wersji do szybkiego przetestowania kodu.
https://bit.ly/1qQFNd4

❼ Zarządzanie wieloma chmurami w jednym miejscu, a w tym bezpłatne migracje pomiędzy nimi.
https://www.multcloud.com/

❽ Darmowe narzędzie w przeglądarce do podglądania plików PSD, a w tym eksportu poszczególnych elementów, wyświetlenia kodu CSS itd.
https://studio.psdetch.com/

❾ Jak przyspieszyć swoją pracę z BrowserSync?
https://bit.ly/2uUXYqu

❿ Otwarta biblioteka #javascript służąca do umieszczania interaktywnych map, np. OpenStreetMap, UMP, Google, HERE i wielu innych.
https://leafletjs.com

⓫ Ceny użytkowania Google Maps, np. na własnej witrynie, podniosły się 14x, a darmowy limit został zmniejszony 30x. Wiecie jednak, że możecie skorzystać z darmowej, polskiej mapy UMP-pcPL? Bez problemu umieścicie na niej marker lub skorzystacie z dostępnego API JS.
https://bit.ly/2NuAO1P
Dokumentacja: https://bit.ly/2LtNp4D

⓬ OpenSource'owy framework do #wordpress, który pozwala utworzyć własne pola, podstrony w panelu administracyjnym itd.
https://typerocket.com

⓭ Dlaczego front-end development jest taki niestabilny?
https://bit.ly/2LLB2k3

⓮ Pływające etykiety pól w #css.
https://bit.ly/2t1Zp5j

⓯ Jak możesz usprawnić swój workflow za pomocą konsoli #javascript?
https://bit.ly/2l5yKky

⓰ PDO vs. MySQLi w PHP.
https://bit.ly/2y374WV

⓱ Interaktywny konstruktor siatki CSS. Obsługuje obszary szablonu, nazwy linii i wiele więcej.
https://www.layoutit.com/grid

⓲ Interaktywna piaskownica do zabawy z gradientem CSS.
https://bit.ly/2ntjsHs

⓳ Post użytkownika na Reddicie, w którym pisze, w jaki sposób przygotować swój profil na GitHubie pod kątem szukania pracy.
https://bit.ly/2B6cnq8

⓴ Pamiętacie Bob Rossa ze słynnego programu "The Joy of Painting"? Powstał "A Happy Lorem Ipsum" generator na jego cześć :-)
http://www.bobrosslipsum.com

➡ #grafika / #webdesign
❶ Biblioteka bardzo ładnych gradientów.
https://webkul.github.io/coolhue/

❷ Darmowe ikony w formie SVG oraz WebFontu.
https://linearicons.com/free

❸ Kolejne darmowe ikony, które z powodzeniem mogą zastąpić Font Awesome.
https://pl.icons8.com/line-awesome

❹ Typowe błędy w projektowaniu stron internetowych + wskazówki jak ich uniknąć.
https://bit.ly/2NUTmbJ

➡ Inspiracje
❶ Dlaczego jedzenie z ulotek, plakatów czy menu różni się od tego, które dostajemy? Jak wygląda proces fotografowania jedzenia? Zobaczcie to na przykładzie zdjęć do McDonald's.
https://www.youtube.com/watch?v=oSd0keSj2W8

❷ Geometryczna seria "odznaczeń" Pucharu Świata 2018.
https://imgur.com/a/vDkPo4y

❸ Świetne logo niemieckiej firmy zajmującej się produkcją papieru.
https://imgur.com/a/mOG1lRm

❹ Gdyby słynni naukowcy mieli swojego logo, to jak mogłoby wyglądać?
https://bit.ly/2OvieqR

➡ Nowości
❶ Let's Encrypt jest teraz oficjalnie uznany za godny zaufania przez wszystkie główne programy, takich firm jak Microsoft, Google, Apple, Mozilla czy Oracle.
https://bit.ly/2OZTubg

❷ Python staje się najpopularniejszym na świecie językiem programowania.
https://econ.st/2JXs3v6

❸ Chrome 68: Oznaczanie HTTP jako niebezpieczne to dopiero początek.
https://bit.ly/2MiKmA0

❹ jQuery zostało usunięte z interfejsu GitHub.com
https://bit.ly/2P3TsPR

➡ #humorinformatykow
❶ Znacie licencję GPL?
http://giant-penis-license.org

❷ pokaż całość

źródło: marquee.png

Witam w kolejnym wpisie z cyklu [ #webstuff ]!
Dzisiejszy wpis zdominował JavaScript, ale czy na pewno powinniśmy go nadal tak nazywać? Dodatkowo przygotowałem dla Was małą atrakcję w postaci kodu zniżkowego, o czym na samym dole.

❶ Usuwanie duplikatów z tablicy przy użyciu obiektu "Set" z ES6.
https://imgur.com/a/qj2zfRg

❷ Podstawowa lista kontrolna bezpieczeństwa dla aplikacji internetowych.
https://bit.ly/2HPdUAJ

❸ Let's Encrypt (darmowe certyfikaty SSL/TLS) posiada już ponad 50% udziału w rynku.
https://bit.ly/2mouyzx

❹ 10 darmowych motywów #bootstrap 4.
https://bit.ly/2HMd5s9

❺ 13 wartych uwagi punktów z przewodnika po najlepszych praktykach JavaScript od Google.
https://bit.ly/2pSDblu

❻ Darmowy podręcznik z tego roku dla Front-endowców.
https://bit.ly/2EPK3F8

❼ Wpis o niefajnym trendzie rozmów o pracę w branży technologicznej: próbne projekty za darmo.
https://bit.ly/2F1qmu9

❽ Trik: Operator "+" w #javascript to skrót do konwersji ciągu znaków na liczbę.
https://imgur.com/a/ImslbN6

❾ Nowoczesny front-end development w 2018 roku, czyli czego powinieneś/powinnaś się nauczyć.
https://bit.ly/2Ix1U63

❿ Omówienie składni i właściwości ES6 wraz z porównaniem do ES5.
https://bit.ly/2JdauHn

⓫ Kilka przykładów bardzo wkurzających poczynań projektantów aplikacji i reklamodawców.
https://bit.ly/2HtAIIf

⓬ Darmowy kurs React w formie wideo, podczas którego stworzysz webową aplikację.
https://bit.ly/2HiSk6s

⓭ Strona, która zamieni Wasze odręczne pismo w komputerowy font.
https://www.calligraphr.com

⓮ JavaScript w 14 minut.
https://bit.ly/2K1AEOs

⓯ Rozszerzenia do Visual Studio Code dla programistów JavaScript.
https://bit.ly/2vw6nUT

⓰ Ścieżka nauki dla full stack dewelopera w 2018 roku.
Cz. 1: Front-end - https://bit.ly/2F1xma9
Cz. 2: Back-end - https://bit.ly/2vz8GXe

⓱ Dlaczego powinniśmy przestać nazywać JS... JavaScriptem?
TL;DR: Okazuje się, że Oracle jest właścicielem znaku towarowego "JavaScript".
https://tek.io/2qJ0VsP

⓲ W jaki sposób budować maile oparte o #html i CSS, by się dobrze wyświetlały w różnych klientach?
https://bit.ly/2GI4ObG

⓳ Jak działa w JavaScript silnik renderujący + wskazówki, jak zoptymalizować jego wydajność.
https://bit.ly/2HMSwvO

⓴ Detekcja twarzy w czasie rzeczywistym z obrazu z kamery wykonana w JavaScript w 200 linijkach kodu.
https://bit.ly/2qPG5XV

➡ #grafika / #webdesign
❶ Logo Paryża na Igrzyska Olimpijskie w 2024 roku. Sprytnie przedstawiono liczbę "2", "4" oraz wieżę Eiffla.
https://imgur.com/a/q9Ca6cc

❷ Facet poprawia UI różnych serwisów. Przykładowy film z pracy:
https://www.youtube.com/watch?v=S6-q5BheEYU

❸ Nie masz pomysłu na kombinację dwóch kolorów? To narzędzie "pomyśli" za Ciebie.
https://bit.ly/2HfKgHH

❹ Zauważyliście, że sporo horrorów do swoich plakatów używa tego samego fontu? Jest nim "Trajan".
https://imgur.com/a/G1YBXOR

❺ Tutorial, który pokazuje jak cieniować przy użyciu tekstur w Adobe Illustratorze.
https://youtu.be/e__cPyVUpE0

❻ Tajemnicze życie UX Designerów.
https://youtu.be/gfHcnig8Lo4

❼ "Oto wszystko, czego nauczyłem się podczas projektowania ponad 10 000 ekranów UI jako lead product designer."
https://bit.ly/2GfbehY

❽ Darmowe zdjęcia typu "mockups" z osobą o ciemnej karnacji.
https://bit.ly/2HhRXJo

➡ Inspiracje
❶ Ekran logowania z kreatywnymi animacjami.
https://i.imgur.com/5MpFURA.gifv

❷ Wspaniały przykład designu strony z lat 90. #gimbynieznajo
https://www.cameronsworld.net

❸ 30 zagrożonych gatunków zwierząt pokazanych w bardzo interesującej formie.
http://species-in-pieces.com/

❹ Bardzo minimalistyczne opakowanie płatków śniadaniowych. Prawda, że się wyróżnia?
https://i.imgur.com/ODER9Ta.jpg

❺ Animowany Mario w samym #css i HTML.
https://codepen.io/alcidesqueiroz/pen/MVJEwd

➡ Nowości
❶ Za trzy miesiące, GitHub przestanie wspierać Internet Explorer.
https://bit.ly/2J8mMk4

❷ Chrome 66 blokuje domyślnie autoodtwarzanie głośnych wideo.
https://bit.ly/2HG0DfW

❸ Photopea, czyli darmowy edytor grafiki przez przeglądarkę obsługujący pliki Gimpa, Sketcha i Photoshopa, wprowadził wektoryzację grafik rastrowych.
https://www.photopea.com

❹ Twórca Vue.js stworzył generator statycznych stron - VuePress.
https://vuepress.vuejs.org

❺ Brave Software przenosi swoją przeglądarkę o krok bliżej Chrome, co oznacza nowy wygląd i możliwość skorzystania z szeregu rozszerzeń.
Jeżeli nie wiecie co to za przeglądarka, to obejrzyjcie ten krótki filmik: https://vimeo.com/228418113
https://cnet.co/2JdfWKl

➡ #humorinformatykow
❶ Stwierdziłem, że do tej pozycji pasuje kategoria humorystyczna. Otóż T-Mobile twierdzi, że nie ma nic złego w przechowywaniu haseł w bazie danych czystym tekstem. #security
https://bit.ly/2HhD1Lk

➡ #cebuladeals
Monsteroid2 od TemplateMonster.com to uniwersalny motyw dla WordPressa. Wyposażony jest w prosty edytor bloczków, które wystarczy przeciągnąć myszką w odpowiednie miejsce. Każdy z bloczków odpowiada za inną funkcję wizualną. Posiada on 9 gotowych stylów. Motyw jest na licencji GPL, a to oznacza, że kupując go raz, możemy go wykorzystać na dowolnej liczbie stron.

Kod "webstuff" upoważnia Was do 50% zniżki na ten motyw, czyli zamiast 254 zł zapłacicie 127 zł (⌐ ͡■ ͜ʖ ͡■) Kod jest ważny do 10 maja.

-----------------------------------
Gdyby ktoś chciał sypnąć złotówą za moje publikacje, to może zrobić to tutaj: https://www.paypal.me/klocus/1 ( ͡° ͜ʖ ͡°) pokaż całość

źródło: monsteroid.png

Zapraszam do kolejnego wpisu z cyklu [ #webstuff ]!

❶ Zbiór przydatnych fragmentów #css, które możesz zrozumieć w 30 sekund lub szybciej.
http://bit.ly/2EWLen7

❷ Aplikacja na macOS X, która wyłącza powiadomienia na pulpicie w czasie udostępniania pulpitu podczas wideorozmowy.
https://muzzleapp.com

❸ Kolekcja tutoriali i przydatnych zasobów dla front-end deweloperów.
http://bit.ly/2FTAl5V

❹ Niektóre z najdziwniejszych funkcji CSS wraz z poradami i sztuczkami dla zaawansowanych użytkowników CSS.
http://bit.ly/2Frhoas

❺ Skrypt JS, który automatycznie dopasowuje jasność obrazu do tekstu, który jest na nim, tak, by był czytelny.
http://bit.ly/2HIo9FE

❻ Zbiór ofert zdalnej pracy, który pobiera ogłoszenia z najpopularniejszych serwisów.
https://ditchtheoffice.co

❼ Visual Studio Code: funkcje, dostosowania i rozszerzenia, które mogą zwiększyć produktywność.
http://bit.ly/2GECBip

❽ 12 najlepszych praktyk dla konta użytkownika, autoryzacji i zarządzania hasłami prosto od Google. #security
http://bit.ly/2FuIOMi

❾ Narzędzie, które przeskanuje Twoją stronę w poszukiwaniu nieużywanych selektorów CSS.
http://bit.ly/2pjSumi

❿ Lista technicznych artykułów na temat tworzenia front-endu w realnym przedsiębiorstwie.
http://bit.ly/2oClzd4

⓫ Biblioteka #javascript, która może przesłać dosłownie wszystko wszystko. Optymalizuje obrazy w celu szybszego przesyłania i oferuje prostą obsługę dla użytkownika.
http://bit.ly/2pnZWg6

⓬ Słownik terminów programistów.
https://www.hackterms.com

⓭ Kompleksowy przewodnik do nauki React.js w 2018 roku.
http://bit.ly/2k1fXIT

⓮ .toLocaleString() to świetny sposób na sformatowanie waluty w JS.
http://bit.ly/2FRiNHx

⓯ Ciekawe narzędzie online do edycji plików *.PNG
https://onlinepngtools.com

⓰ Możesz zbudować sieć neuronową w JavaScript nie wiedząc nawet jak działa ;-)
http://bit.ly/2G5FmLS

⓱ Ech, ciężko przetłumaczyć tę pozycję, żeby nie brzmiała głupio, więc wstawię oryginalny tytuł: Crazy SVG odometer effect library.
http://bit.ly/2u17XNP

⓲ 10 wskazówek, dzięki którym będziesz debugował JavaScript w konsoli jak #programista15k.
http://bit.ly/2GDR3Hu

⓳ Ikona SVG, która zawsze zwraca aktualną datę.
http://bit.ly/2plJH44

⓴ Biblioteka PHP, dzięki której stworzysz menu CLI.
http://bit.ly/2FVRls0

➡ #grafika / #webdesign
❶ Praktyczne wskazówki dotyczące animacji elementów aplikacji.
http://bit.ly/2I7bVr7

❷ Nowa wersja strony z "płaskimi" paletami kolorów (14 palet, 280 kolorów).
https://flatuicolors.com

❸ Wygeneruj gradient w CSS i naucz się samemu pisać kod, który jest za to odpowiedzialny. Wiele fajnych przykładów i tutoriali.
https://cssgradient.io

❹ Mała biblioteka JS, dzięki której dodasz animacje CSS podczas przewijania strony w dół.
http://bit.ly/2FUG4s2

❺ Fajny efekt najechania na przycisk, który wykorzystuje zmienne CSS.
http://bit.ly/2BG9JWR

➡ Inspiracje
❶ Wiecie, że Kanada ma nowy banknot $10? Jest on... Pionowy, a do tego posiada ciekawą stronę.
http://bit.ly/2ttH70l

❷ Świetny efekt na stronie THX. Zwiększcie poziom na słuchawkach / głośnikach i przytrzymajcie wciśnięty LPM na animowanym tle.
http://www.thx.com

❸ Progressbar z donutem i postaciami z The Simpsons.
http://bit.ly/2FIWtUG

❹ Fajna symulacja pory dnia i pogody w WebGL.
http://rainbowhunt.me/

❺ Naprawdę pomysłowe menu obrócone o 45 stopni!
http://bit.ly/2FVNlIo

➡ Nowości
❶ Certyfikaty typu Wildcard są już dostępne w Let's Encrypt.
http://bit.ly/2Dp8gBn

❷ Od niedawna można wgrywać do Wikipedii obiekty 3D.
http://bit.ly/2FMNDW0

❸ Ubuntu 18.04 będzie dostarczane z #php 7.2, co oznacza, że następne Ubuntu LTS będzie pierwszą wersją, gdzie PHP będzie standardowym rozszerzeniem.

❹ Pojawiła się nowa wersja (1.0) najmniejszego edytora WYSIWYG w JS. Skompresowany waży zaledwie 1.29kB.
http://bit.ly/2FST1mq

➡ #ciekawostki
❶ Wiecie, że istnieje font, który wygląda dla większości ludzi jak Helvetica, ale jest na licencji GPL? Różnice są bardzo subtelne ;-)
http://bit.ly/2wDgnIu

❷ W Windows 10 od bulidu nr 10540 możecie wybrać takie nowe fonty jak: Arial Nova, Georgia Pro, Gill Sans Nova, Neue Haas Grotesk, Rockwell Nova oraz Verdana Pro.
(Ustawienia -> Aplikacje -> Aplikacje i funkcje -> Zarządzaj funkcjami opcjonalnymi -> Dodaj funkcję -> Europejskie czcionki dodatkowe)
Dla tych co przeoczyli ciekawostkę z poprzedniego wpisu dodam, że zauważycie tam również OpenSSH.
https://imgur.com/a/V4aTA

❸ Biblioteka bardzo zwariowanych animacji CSS.
http://bit.ly/2plYBHx

❹ Font, który reaguje na dźwięk.
http://bit.ly/2DDrTFQ

➡ #humorinformatykow pokaż całość

źródło: graphic_designer.jpg

Witam po przerwie i zapraszam do kolejnego wpisu z cyklu [ #webstuff ]!

❶ Darmowe lekcje z bezpieczeństwa webowego. #security
https://www.hacker101.com

❷ Szyfrowany protokół HTTPS wyjaśniony na przykładzie gołębi pocztowych.
http://bit.ly/2n22sri

❸ Symulator NES (Nintendo Entertainment System w razie gdyby #gimbynieznajo) w #javascript.
http://bit.ly/2ENFe43

❹ Nowa wersja popularnej biblioteki JavaScript z alertami - SweetAlert2.
http://bit.ly/2FpHZpb

❺ Przewodnik po znaczniku <head> w #html.
https://gethead.info

❻ Darmowy przewodnik z ponad 50 wskazówkami, która mają sprawić, by strona była wyżej w wynikach wyszukiwania.
http://bit.ly/2HG5cnZ

❼ Dlaczego powinieneś / powinnaś używać walidacji formularzy w czystym HTML5? + Przykłady
http://bit.ly/2EM8vvL

❽ Darmowa książka o JavaScript. Pierwsze 12 rozdziałów omawia sam język JavaScript. Następne siedem rozdziałów dotyczy przeglądarek internetowych i sposobu, w jaki JavaScript jest używany do programowania. Na koniec, dwa rozdziały poświęcono Node.js.
http://bit.ly/2CDOHow

❾ basicScroll pozwala na zmianę zmiennych CSS w zależności od pozycji scrolla. Użyj zmiennych bezpośrednio w swoim CSS, aby animować cokolwiek chcesz.
http://bit.ly/2F2gNPx

❿ Wpis wyjaśniający działanie CORS (Cross-Origin Resource Sharing), czyli rządania AJAX pomiędzy serwerami.
http://bit.ly/2FpRh4l

⓫ Biblioteka JavaScript, która obsługuje Force Touch, 3D Touch oraz Pointer Pressure.
https://pressurejs.com

⓬ 100 projektów na 100 dni z JavaScript.
https://100dayz.js.org

⓭ Nowoczesny #css dla dinozaurów.
http://bit.ly/2ot1Ag1

⓮ Zbiór darmowych zdjęć, ikon, szablonów, fontów itd.
http://allthefreestock.com

⓯ TIP: JavaScript Array.from() akceptuje drugi argument będący funkcją "map".
http://bit.ly/2F06cED

⓰ Najważniejsze trendy JavaScript do śledzenia w 2018 roku.
http://bit.ly/2CSq7Ff

⓱ Kanał wykładowcy akademickiego, który uczy JavaScriptu oraz Cordovy.
http://bit.ly/2ELBxM6

⓲ Front End Interview Handbook: Kolekcja pytań na rozmowie o pracę.
http://bit.ly/2ELBWy6

⓳ Przydatne narzędzie, które pomaga skonstruować skomplikowane kształty dla właściwości CSS "clip-path".
http://bit.ly/2EKuV0B

⓴ Gra, w której trzeba zgadąć czy wyświetlana nazwa to font czy rasa świnek.
http://typefaceortrotters.com

➡ #grafika / #webdesign
❶ Strona, która generuje randomowe zlecenia od klientów na logo, dzięki czemu można sobie poćwiczyć.
https://fakeclients.com

❷ Typografia Popkultury - Teledysk ze znanymi logo. Rozpoznacie wszystkie?
https://youtu.be/WwyqQ-o6zHA

❸ Lista stron z darmowymi zdjęciami (Free stock photos).
http://bit.ly/2osm097

❹ Prosty generator palet kolorów.
https://pigment.shapefactory.co/

❺ 7 praktycznych wskazówek odnośnie projektowania interfejsów i stron.
http://bit.ly/2ERaVZo

❻ Wybór fontów: Przewodnik dla początkujących od Google.
http://bit.ly/2C9e71I

➡ Inspiracje
❶ Animowany avatar podczas wpisywania maila i hasła.
http://bit.ly/2F0kSDH

❷ Animacja "kodowania" w CSS.
http://bit.ly/2EP57fR

❸ Fajna animacja kursora.
https://iohk.io

❹ #apple iMac z efektem 3D podczas przewijania strony.
http://bit.ly/2GGFIFF

❺ Bardzo ładnie zaprojektowana strona + nowe narzędzie do projektowania stron i aplikacji.
https://phase.com

➡ Nowości
❶ Chrome od wersji 68, która ukaże się w lipcu tego roku będzie oznaczał strony bez HTTPS jako niebezpieczne.
http://bit.ly/2ENJsrE

❷ React Native zmienił licencję na MIT.
http://bit.ly/2sObUEP

❸ Gmail z AMP - bardziej interaktywne e-maile.
http://bit.ly/2olUjzp

❹ Nowa wersja chyba najlepszego silnika gier HTML5 - Phaser 3.1.2.
http://phaser.io

❺ Chrome w przyszłych wersjach będzie miało wbudowaną funkcję "Image Lazy Loading".
http://bit.ly/2CeHTC4

➡ #humorinformatykow
#tylkonocny ( ͡° ͜ʖ ͡°) pokaż całość

źródło: blind-people.png

Hoł, hoł, hoł! Nieważne czy byliście w tym roku grzeczni czy nie, ja i tak przygotowałem dla Was [ #webstuff ]!

❶ Nie masz czasu lajkować postów swojego różowego paska na Instagramie? Nie ma problemu! Z pomocą przychodzi bot, który zrobi to za Ciebie i powiadomi o tym na Slacku ;-)
http://bit.ly/2C1ftuM

❷ Kolekcja skrawków kodu #javascript, które można zrozumieć w 30 sekund bądź mniej.
https://30secondsofcode.org

❸ 80% witryn jest "napędzanych" przez PHP, lecz 90% z nich korzysta z #php w wersji 5...
http://bit.ly/2BWNTfT

❹ 450 darmowych kursów informatycznych, które możesz zacząć już dziś (albo dodać do zakładek)!
http://bit.ly/2AoEA9v

❺ Thimble to edytor kodu online, który ułatwia tworzenie i publikowanie własnych treści podczas nauki HTML, #css i JavaScript. W narzędziu możemy tworzyć tutoriale, np. dla naszych uczniów.
https://thimble.mozilla.org

❻ Turbo to bardzo szybki klient NPM (instaluje paczki 5x szybciej niż NPM).
http://bit.ly/2jgP7dD

❼ Dlaczego CSS Grid jest lepszy do budowy szkieletu strony niż Bootstrap?
http://bit.ly/2DGCW2w

❽ Jak podłączyć się do API w czystym JavaScript? Tutorial dla początkujących.
http://bit.ly/2kpIMMP

❾ Krótki przewodnik, którzy przygotuje Cię przed rozmową o pracę na stonowisko front-endowca.
http://bit.ly/2DBO4gV

❿ Kanał YT z filmami z zagranicznego uniwersytetu, dzięki którym poznacie Angulara, jQuery, node.js i wiele innych technologii.
http://bit.ly/2l2Hmbq

➡ #grafika / #webdesign
❶ The Futur - kanał, który rozkłada znane grafiki na czynniki pierwsze, uczy designu, identyfikacji wizualnej itd.
https://www.youtube.com/user/TheSkoolRocks/

❷ Ewolucja logo znanych niemieckich marek.
https://imgur.com/a/2vddZ

❸ Ponad 100 godzinny kurs (płatny, ale 7 dni za darmo) dla osób, które chcą zdobyć wiedzę z zakresu UX.
https://uxclub.com

❹ 170 responsywnych bloczków Bootstrapa dostępnych za darmo.
http://bit.ly/2BrKLaE

➡ Inspiracje
❶ Timelapse z bardzo ciekawej kompozycji stworzonej w #photoshop.
https://youtu.be/C4v9QcTt1Cw

❷ Bardzo elastyczny i imponujący Morty z serialu #rickandmorty.
http://bit.ly/2A2JKId

❸ CSS Glitch Effect.
http://bit.ly/2BVqQSC

➡ Nowości
❶ Amazon uruchomił Web IDE oparte o znane wielu deweloperom Cloud9.
http://amzn.to/2ALxFYX

❷ Strona Białego Domu zmieniła CMS z Drupala na WordPress.
https://www.whitehouse.gov

❸ Chrome od połowy lutego przyszłego roku zacznie blokować szczególnie irytujące reklamy.
http://bit.ly/2pmbrYD

➡ #ciekawostki
❶ Gary Anderson to człowiek, który w wieku 23 lat (1970) zaprojektował wszystkim nam znany znak recyklingu (3 zwinięte strzałki).
https://imgur.com/a/3c5X7

❷ Wiecie co robi znacznik <wbr> w #html? Spoko, ja nawet nigdy go nie użyłem :D
http://bit.ly/2BVnbnQ

❸ Witryna Peugeot używa modelu 404 jako stronę "404 Not Found".
https://imgur.com/a/azQ4z

❹ Wiecie, że w #windows10 jest OpenSSH? Dostępny jest z poziomu CMD oraz PowerShell.
http://bit.ly/2plZG4G

❺ Dyslexie to specjalny font opracowany i zaprojektowany dla osób z dysleksją, która ułatwia czytanie, uczenie się i pracę.
https://imgur.com/a/DhuJi pokaż całość

źródło: zyczenia.jpg

Psst! Całkowicie świeży towar z tagu [ #webstuff ] Chce ktoś?

❶ Jak używać SVG jako pleceholdera + inne techniki ładowania obrazów.
http://bit.ly/2jsO1yk

❷ Czym jest "source map"?
http://bit.ly/2AIxlqO

❸ Fizyka w #javascript z wykorzystaniem Matter.js.
http://bit.ly/2AGOKiS

❹ Katalog darmowych kursów dla deweloperów.
http://bit.ly/2zZ3Dk7

❺ Code School jest dostępne za darmo w najbliższy weekend (17-19 listopada).
http://bit.ly/1QLH8f3

❻ Porównanie kilku najpopularniejszych frameworków JavaScript.
http://bit.ly/2zK0Ic3

❼ 7 frameworków do automatycznego testowania aplikacji #php.
http://bit.ly/2zBWB4d

❽ Github Help Wantend to strona, która agreguje open-source'owe projekty, które potrzebują Waszej pomocy lub zaangażowania.
http://github-help-wanted.com

❾ Stackview to wtyczka do Google Chrome, która pokazuje listę technologii, w jakich została stworzona przeglądana strona.
http://bit.ly/2zKYlWq

❿ Animowany placeholder treści (jak na Facebooku) w SASS i #html.
http://bit.ly/2AJkrrE

⓫ Kilka użytecznych wskazówek pisania zgrabnego kodu w JavaScript.
http://bit.ly/2z2Dscn

⓬ Przyspieszamy stronę - 8 przydatnych wskazówek na front-end.
http://bit.ly/2ALjYGb

⓭ Wonder CMS to mikro system zarządzania treścią, który zawiera jedynie 5 plików.
https://www.wondercms.com

⓮ a11y.css to plik #css, który pokaże błędy w zastosowanym kodzie HTML, np. poinformuje o pustym atrybucie "alt".
http://bit.ly/2zL0v8F

⓯ Interfejs API dla publicznych danych Instagrama, działa bez uwierzytelniania ;-)
http://bit.ly/2hv3mKK

⓰ Budowanie układu Trello za pomocą CSS Grid i Flexbox.
http://bit.ly/2gVUNLZ

⓱ Zanurz się i poznaj cuda modelu CSS Flexible Box.
http://bit.ly/2yKmb3D

⓲ Ostateczny przewodnik po CSS Flexbox - nauka poprzez przykłady.
http://bit.ly/2zxrKpM

➡ #grafika / #webdesign
❶ Kolekcja dobrych przykładów UX.
https://www.reallygoodux.io

❷ IBM rzuciło sobie wyzwanie na stworzenie nowej Helvetici. Font o nazwie "IBM Plex" jest dostępny za darmo.
http://bit.ly/2jgkiZx

❸ Darmowe ikony dostępne jako SVG i Web Font.
http://picol.org

❹ Font "Futura" obchodzi 90-te urodziny!
http://bit.ly/2jqzhjr

❺ Darmowy font Metropolis.
http://bit.ly/29LjRBk

❻ Ikony kryptowalut.
http://bit.ly/2iXpvSj

➡ Nowości
❶ Firefox 57, czyli interfejs Photon, silnik Servo, Quantum CSS.
https://mzl.la/2yYXzYT

❷ WebAssembly obsługuje już wszystkie popularne przeglądarki.
https://mzl.la/2zBMFYB

❸ Nowa wersja Bolt CMS (3.4.0).
http://bit.ly/2yDz3s2

❹ Nowa wersja Spectacle (4.0) - biblioteki React.js do tworzenia prezentacji.
http://bit.ly/2zEntkc

❺ Podkreślenia tekstu w Google Chrome 64 mają od teraz przerwę.
https://imgur.com/ZwheMZF

➡ #ciekawostki
Wiecie, że w #windows #windows10 możecie wpisać w pasek adresu eksploratora słowo "cmd" lub "powershell", aby uruchomić wiersz polecenia? pokaż całość

źródło: cmd.png

Żebyście mieli co czytać w pracbazie w poniedziałek :D [ #webstuff ]

❶ TL;DR dla dokumentacji różnych języków i narzędzi.
https://devhints.io

❷ Nowoczesny #javascript dla dinozaurów, czyli osób, które nie wiedzą co to npm, gulp, webpack itd.
http://bit.ly/2yT1bLL

❸ Honest Ipsum to generator tekstu, który jest wypełniaczem treści. Zastępuje niezrozumiały często dla klientów Lorem Ipsum i odpowiada na pytanie czym jest.
http://bit.ly/2lSR3Ng

❹ Zbiór najlepszych front-endowych ściągawek w jednym miejscu.
http://bit.ly/2zicfiV

❺ City Lights to bardzo ładny, ciemny motyw do edytora Atom oraz Visual Studio Code.
http://citylights.xyz

❻ HEML to język znaczników, który służy do budowy responsywnych maili.
https://heml.io

❼ Zastosowanie Google AMP (Accelerated Mobile Pages) przez pewien internetowy magazyn przeniosło się na wzrost liczby odwiedzin o 13%, czyli o tym, że Google faworyzuje szybkie strony w wynikach wyszukiwania.
http://bit.ly/2gABuUP

❽ Funkify to nowa wtyczka do Chrome, która pomaga doświadczyć sieć web z perspektywy osób z pewnymi wadami wzroku i innymi niepełnosprawnościami.
http://www.funkify.org

❾ Tetris w JavaScript oraz HTML w mniej niż 512 bajtów.
http://bit.ly/2hdRj7S

❿ Lista rzeczy na froncie, które musisz sprawdzić zanim Twoja nowa strona ujrzy światło dzienne.
http://bit.ly/2xOPtMZ

⓫ Playlistify to generator playlist podstawie szczegółowych charakterystyk piosenek, artystów i gatunków.
http://www.playlistify.me/

⓬ 14 wskazówek debugowania JavaScript, o których mogłeś nie wiedzieć.
http://bit.ly/2ijHiTi

⓭ PaperCSS to framework #css, który stylistyką przypomina ręcznie narysowane elementy. Nadaje się do tworzenia wireframe'ów.
https://www.getpapercss.com

⓮ Animowana piaskownica do zabawy z Flebox CSS. Przydatna do zrozumienia działania.
http://bit.ly/2zjEY8U

⓯ Wszystko co chcielibyście wiedzieć o atrybucie "alt", ale boicie się zapytać.
http://bit.ly/2y3YDGu

⓰ Podstawy CSS Grid na filmie.
https://www.youtube.com/watch?v=Rpm7cSWjiGA

⓱ Zapowiada się ciekawe narzędzie do animacji.
https://spiritapp.io

⓲ Historia CSS Grid od jego twórcy.
http://bit.ly/2Al1AnE

⓳ HTML Web Component przy użyciu Vanilla JavaScript.
http://bit.ly/2zmuu8P

⓴ Front-End Developer Handbook 2017
http://bit.ly/2kJbG9M

➡ #grafika / #webdesign
❶ Gra, która uczy jak korzystać z narzedzia pióra.
http://bezier.method.ac

❷ Krótki przewodnik po webdesignie dla deweloperów, którzy nie zajmują się grafiką na co dzień.
http://bit.ly/2zeGvLf

❸ Jak przekształcić obraz rastrowy na wektorowy w #photoshop?
https://youtu.be/5ZX890lABFQ

❹ Inter UI to darmowa czcionka stworzona z myślą o tym, by była czytelna w małej skali na ekranach komputerów.
https://rsms.me/inter/

❺ Podstawy teorii koloru.
http://bit.ly/2j5er95

❻ inVision Studio, czyli narzędzie podobne do Sketcha i Adobe XD.
http://bit.ly/2yRoIMN

➡ Inspiracje
❶ Plansza do Monopoly stworzona przy pomocy CSS Grid.
http://bit.ly/2xMVw9C

❷ Ciekawa wizualizacja zasięgu broni Korei Północnej.
http://ab.co/2yMeu06

❸ Animacja nawiązująca do wydarzeń z pierwszego sezonu Stranger Things.
https://vimeo.com/239722120

❹ Ciekawy koncept przycisku "submit".
http://bit.ly/2h7zqEg

❺ Świetny efekt ciekłego / galaretowatego przycisku.
http://bit.ly/2zekIFX

❻ Animowany i pomysłowy przycisk dostawy.
http://bit.ly/2zzrBm0

➡ Nowości
❶ Chrome z wbudowanym dławikiem na koparki kryptowalut?
http://bit.ly/2hex8a3

❷ Mozilla zrzesza Microsoft, Google, W3C oraz Samsunga do wspólnej pracy nad dokumentacją MDN.
https://mzl.la/2xRYKJ2

❸ Po 12 latach projekt "Firebug" (najbardziej popularne narzędzie dla web deweloperów) zostaje zamknięty.
https://mzl.la/2y2oCSw

❹ Google buduje nowy rodzaj clip artów - obiektów 3D.
http://bit.ly/2h2WBD6

❺ Nowa wersja Node.js - 9.0.0
http://bit.ly/2yy56Oh

➡ #ciekawostki
Margaret Hamilton stojąca obok programu nawigacyjnego, który ona i jej zespół MIT napisał ręcznie dla projektu Apollo (1969). pokaż całość

źródło: Margaret Hamilton.jpg

Czy ktoś zamawiał powiększony zestaw [ #webstuff ]? (╭☞σ ͜ʖσ)╭☞

❶ Domknięcia oraz funkcje anonimowe #php w przykładach - część 2 mirka @Daredzik.
http://bit.ly/2y8AiCy

❷ Porównanie sześciu frameworków #css Material Design.
http://bit.ly/2viZ3Ib

❸ Naklejki dzielnego pacjent... Tfu! Frelancera :D
http://bit.ly/2ukbwyh

❹ O śmiesznym lecz prawdziwym problemie: każdy samouczek frameworka #javascript napisany ponad 5 minut temu.
http://bit.ly/2wppVoT

❺ Czas dać liskowi drugą szasnę, czyli Firefox 57.
http://tcrn.ch/2ywDxQU

❻ Najgorszy błąd komputerowy w dziejach historii, przez który stracono 460 milionów USD w 45 minut.
http://bit.ly/2yacL4c

❼ Modern JavaScript Cheatsheet.
http://bit.ly/2yI7JJJ

❽ Strona prezentująca różne algorytmy sortowania przy użyciu wizualizacji graficznej oraz dźwiękowej.
http://bit.ly/2wOCECQ

❾ Klient HTTP w wierszu polecenia.
https://httpie.org

❿ Draggable JS - lekka, elastyczna i nowoczesna biblioteka drag&drop.
http://bit.ly/2x2XpK6

⓫ iPhone X nowym Internet Explorerem, czyli jak dostosować stronę pod nowy produkt Apple.
http://bit.ly/2f3AIiE

⓬ Krótki artykuł o tym, że dziś na stronach firmowych coraz trudniej o informacje czym dana firma się w ogóle zajmuje.
http://bit.ly/2eCo0XQ

⓭ Przewodnik po CSS w najpopularniejszych klientach poczty e-mail.
http://bit.ly/1jBHomU

⓮ 5 właściwości CSS, o których mogliście nie wiedzieć.
http://bit.ly/2wOiWqG

⓯ Tech Interview Handbook - podręcznik dla osób przed rozmową o pracę w firmie technologicznej.
http://bit.ly/2kI6Y0k

⓰ Wprowadzenie do CSS Grid stworzone przez Mozillę.
http://bit.ly/2g2ieiF

⓱ Sprawdź ile rocznie zarabiają deweloperzy z Twoimi umiejętnościami w USA, Kanadzie, UK, Francji lub Niemczech.
http://bit.ly/2ymov4b

⓲ Może nie potrzebujesz jQuery - przewodnik po nowych możliwościach JS zaimplementowanych w przeglądarkach.
http://bit.ly/2h0LwBJ

⓳ O tym jak zwykły "padding" może poprawić czytelność strony.
http://bit.ly/2kyeR8v

⓴ Biblioteka JS, która dodaje efekt bąbelków / bokeh w tle strony.
http://bit.ly/2xeOnde

➡ #grafika / #webdesign
❶ Szybki kurs rysowania w Adobe Illustrator CC.
http://bit.ly/2xypaj2

❷ Katalog darmowych narzędzi i zasobów od Google przeznaczonych do projektowania.
http://bit.ly/2yEgJ5X

❸ 3 nowe darmowe zdjęcia w każdy poniedziałek na licencji Creative Commons.
http://bit.ly/2yglUaB

❹ Logo Crunch to narzędzie, dzięki któremu logo wysokiej rozdzielczości będzie czytelne w niższych rozdzielczościach. Użyjecie go do utworzenia favicona, ikony aplikacji iOS lub Android, a także dostosujecie inne parametry.
http://bit.ly/2fsIxSH

❺ Dlaczego każdy freelancer powinien pracować z przewodnikiem po stylu?
http://bit.ly/2yfXTAw

❻ Design logo od szkicu po sam finał.
http://bit.ly/2gctltn

❼ Jak zrobić optycznie zrównoważone ikony, poprawić wyrównanie kształtów czy dodać doskonałe zaokrąglanie rogu. Ponad 50 zdjęć w zestawieniu.
http://bit.ly/2wum1Lx

❽ 5-minutowy przewodnik po typografii.
http://bit.ly/2fE07Qc

❾ Biblioteka darmowych zasobów graficznych (zdjęcia, wektory, ikony, fonty).
https://www.stockio.com

❿ Katalog open source-owych fontów, z których można dowolnie korzystać.
http://velvetyne.fr

➡ Inspiracje
❶ Comics Sans użyty w znanych logo.
https://imgur.com/a/hw8nj

❷ Krótka lekcja na przykładzie logo Google o tym, że poprawność matematyczna oraz optyczna w grafice, to zupełnie różne rzeczy.
https://imgur.com/a/xQT66

❸ Wizualna podróż po totalitarnym designie Korei Północnej
http://bit.ly/2hRpsKQ

❹ Krótka przejażdżka tramwajem w świecie ilustracji. Przytrzymajcie strzałkę w prawo, aby poruszać postacią.
http://bit.ly/2wMP9D2

❺ Styl komiksu przy użyciu CSS Grid.
http://bit.ly/2yciofC

❻ Katalog stron typu "landing page" z możliwością filtrowania.
http://www.goodweb.design

❼ Ciekawy efekt podczas przewijania strony.
http://www.section32.com

❽ Kolekcja różnego rodzaju wizualizacji danych.
http://datavizproject.com

❾ Biblioteka tytułów filmowych.
http://bit.ly/1dF4yQF

➡ Nowości
❶ Let's Encrypt Wildcard w 2018 roku, czyli SSL dla nowych subdomen.
http://bit.ly/2sKvzVC

❷ Czas dać liskowi drugą szasnę, czyli Firefox 57 nadchodzi.
http://tcrn.ch/2ywDxQU

❸ Google Chrome będzie blokowało dodatkowe zakładki z reklamą, które pojawiają się klikając w jakiś przycisk.
http://bit.ly/2yJcWA3

❹ React w wersji 16.
http://bit.ly/2xXpw1t

➡ #ciekawostki
❶ Czyżby Safari w nowej wersji miało powrócić do MS Windows? Na tej stronie Apple możecie ujrzeć porównanie szybkości działania tej przeglądarki na macOS oraz Windows 10.
https://imgur.com/a/DMQ0S

➡ #humorinformatykow
( ͡° ͜ʖ ͡°) pokaż całość

źródło: friends.png

Czołem Wykopki! Sprawdźcie co dziś dla Was przygotowałem w kolejnym wpisie [ #webstuff ]!

❶ Wpis mireczka @Daredzik o funkcjach anonimowych w #php.
http://bit.ly/2vIVUA7

❷ Prosty, lekki i responsywny system siatki w #css zbudowany przy użyciu flexbox.
http://bit.ly/2uldBsf

❸ Sposób na zapis danych w formularzach po utracie połączenia z siecią.
http://bit.ly/2v4GGtQ

❹ Jak pozyskać dobre zlecenia pracując jako freelancer?
http://bit.ly/2wvUpaM

❺ Biblioteka JS do płynnych przejść pomiędzy ikonami.
http://bit.ly/2cUYrja

❻ Skrypt, który zmienia clickbaitowe nagłówki na zwyczajne, bardziej szczere.
http://bit.ly/2gyTdzt

❼ Wizualny przewodnik po flexbox.
http://bit.ly/1CVXPh5

❽ Biblioteka JS do tworzenia notyfikacji Push w przeglądarce.
https://pushjs.org

❾ Zbiór ciekawych i sprytnych przykładów w #python.
http://bit.ly/2exA9Rp

❿ Mallery - generator statycznych dokumentacji. Aplikacja automatycznie utworzy dokumentację na podstawie zawartości folderu.
http://bit.ly/2gAdUe9

⓫ Wskazówki z książki "Czysty kod. Podręcznik dobrego programisty" dostosowane do języka PHP.
http://bit.ly/2exBqb8

⓬ Nowoczesny odtwarzacz muzyki w #javascript.
http://bit.ly/2exQ7et

⓭ Dlaczego nie warto pisać własnego CMS-a w innych celach niż edukacyjnych?
http://bit.ly/2gqTHaC

⓮ Biblioteka JS, która rozszerza nieco funkcjonalność atrybutu "placeholder" pól formularza. Umożliwia wstawienie kilku następujących po sobie komunikatów.
http://bit.ly/2gsi4Ru

⓯ Wprowadzenie do programowania w języku GO.
http://bit.ly/2exMDZ7

⓰ Don't Use Entities in Symfony Forms. Use Custom Data Objects Instead. PHP
http://bit.ly/2xF7tKM

⓱ Zasób dla każdego, kto chce poprawić typografię na swojej stronie internetowej. Zawiera dobre połączenia fontów wraz z gotowym kodem HTML i CSS.
http://www.baseline-type.com

⓲ Narzędzie, które nagrywa odwiedzających naszą stronę. Wersja darmowa obsługuje do 2 tysięcy odwiedzin miesięcznie.
https://www.smartlook.com/pl/

⓳ Ściągawka obsługi gita linkująca do wyczerpujących odpowiedzi oraz pokazująca wskazówki i skróty.
http://bit.ly/2etj7QS

⓴ Geolokalizacja w HTML5.
http://bit.ly/2wt0k1X

➡ #grafika / #webdesign
❶ Zdecydowanie warty obejrzenia filmik o tym jak Aaron Draplin zabiera się do tworzenia logo.
https://youtu.be/zOPA0NaeTBk

❷ Logo Rank to system AI, który rozumie design logo. Szkolił się na ponad milionie logo, aby móc wyświetlić wskazówki i pomysły. Może być również używany do sprawdzenia, czy projektant wziął inspirację gotowca.
http://bit.ly/2xOTp0z

❸ 100 nowych i starych narzędzi dla designerów, które warto znać.
http://bit.ly/2wX4vEG

❹ Ponad milion darmowych ikonek.
https://thenounproject.com

❺ O tym dlaczego ikony powinny posiadać podpisy.
http://bit.ly/2exWu19

❻ Twoje logo jest kopią. Serio, możesz nawet o tym nie wiedzieć ;-)
http://bit.ly/2wAS6p2

➡ Inspiracje
❶ Kilka ciekawych plakatów filmów dla dorosłych z lat 60 i 70.
http://bit.ly/2wmdKx7

❷ Bardzo kreatywna reklama, która wykorzystuje architekturę. Co prawda przedstawia coś za czym nie przepadam, ale szanuję za kreatywność.
http://imgur.com/oA9CBrX

❸ Strona, która pokazuje swoją treść dopiero, gdy będziesz offline.
http://bit.ly/2vMNqIp

❹ Bardzo ciekawy efekt rozlewającej się farby.
http://bit.ly/2esHUEu

➡ Nowości
❶ Pojawiła się nowa wersja frameworka PHP Laravel (5.5).
http://bit.ly/2x0iQjs

❷ Nowa wersja PhpStorm (2017.2.2).
http://bit.ly/2wwlHxs

➡ #ciekawostki
❶ Wiedzieliście, że "break" w PHP przyjmuje argumenty?
http://bit.ly/2eOStT3

❷ Nginx wyprzedził Apache i jest aktualnie najczęściej wybieranym serwerem WWW wśród miliona najpopularniejszych stron w Internecie.
http://bit.ly/2uBFRYP

➡ #humorinformatykow
A co tam, wpasuję się w ostatni trend ( ͡° ͜ʖ ͡° )つ──☆*:・ﾟ pokaż całość

źródło: rekurencja.jpg

Zapraszam do kolejnego wpisu z cyklu [ #webstuff ]!

❶ Generator filtrów wraz z kolekcją gotowych do użycia na obrazach przy pomocy kodu #css.
http://www.cssfilters.co

❷ Prosta, lekka i szybka biblioteka #javascript do animacji.
http://bit.ly/1zO2gZP

❸ Krótki przewodnik po CSS Grid wraz z kilkoma ćwiczeniami.
http://bit.ly/2x66wv5

❹ Ciekawy pomysł umieszczania pliku "security.txt", który podobnie jak "robots.txt" zawierałby przydatne informacje, ale związane z polityką bezpieczeństwa.
http://bit.ly/2fYRGC9

❺ Jakie są podstawowe rzeczy, które każdy programista powinien wiedzieć?
http://bit.ly/2vXgyhG

❻ Lista przydatnych rozszerzeń do Visual Studio Code.
http://bit.ly/2fYLlGR

❼ Masz startup? Może nie powinieneś wykorzystywać Reacta zważając na licencję "BSD + patents" Facebooka. Wpis o dość kontrowersyjnej licencji w świecie Open Source.
http://bit.ly/2vQZKus

❽ 12 września mija 20 lat odkąd Amazon uzyskał patent na zakupy poprzez "1-click ordering". Oznacza to, że tego dnia patent wygaśnie i każdy inny sklep będzie mógł zaimplementować taką samą funkcjonalność.
http://bit.ly/2uYPUDU

❾ Narzędzie, które generuje animacje CSS z opóźnieniem pomiędzy kolejnymi iteracjami.
http://waitanimate.wstone.io/

❿ System zarządzania treścią, który deweloperowi dostarcza jedynie API do podpięcia pod aplikację, którą buduje, a klient może korzystać z prostego w obsłudze panelu i aktualizować treści.
https://www.contentful.com

⓫ Instrukcja krok po kroku, która pokazuje w jaki sposób wnieść swój wkład w jakieś repozytorium na GitHubie (Contribution).
http://bit.ly/2udvgTx

⓬ Kojarzycie efekt rozwijania informacji o obrazie w Google Grafika? Gridder to plugin jQuery, który pozwala uzyskać bardzo podobny efekt.
http://bit.ly/2fYGDsU

⓭ Biblioteka JavaScript, która ułatwia pisanie wyrażeń regularnych, a dokładniej zastępuje je funkcjami.
http://bit.ly/2ilag8w

⓮ Artykuł o ciekawych wariacjach wzorca architektonicznego MVC.
http://bit.ly/2vhNEHk

⓯ Plugin #jquery, który służy do liniowego animowania krawędzi obiektów SVG.
http://lazylinepainter.info

⓰ Każdy zna metodę Drag & Drop do przeciągania oraz zmiany kolejności elementów. Autor prezentuje co zrobić, by był on wygodniejszy i bardziej intuicyjny dla użytkownika.
http://bit.ly/2xlttcW

⓱ Responsywny harmonogram wysyłki maili Gmaila zbudowany przy użyciu Bootstrapa i Google Apps Scripts.
http://bit.ly/2xlAxGx

⓲ Hyperapp - minimalistyczna biblioteka JavaScript do budowy frontendowych aplikacji.
http://bit.ly/2k8CY9R

⓳ Wprowadzenie do Vue.js dla osób, które znają wystarczająco dobrze jQuery, aby przez nie przejść.
http://bit.ly/2v7BRvV

⓴ Symfony 4: Najlepsze praktyki
http://bit.ly/2paIQ3M

➡ #grafika / #webdesign
❶ Powiedzmy, że masz klienta, który chciałby, aby jego strona internetowa wyglądała dobrze w ciągu najbliższych 10 lat bez jakichkolwiek zmian. Jak byś ją zaprojektował(a)?
http://bit.ly/2fRco7f

➡ Inspiracje
❶ Specyficzne portfolio pewnego programisty, które wygląda jak z lat 90.
http://bit.ly/2uZkgdx

➡ Nowości
❶ Pojawiło się pierwsze stabilne wydanie frameworka CakePHP w wersji 3.5.0.
http://bit.ly/2x5Qv8d

❷ Dodano podświetlanie CSS Grid w narzędziach dewelopera przeglądarki Google Chrome.
http://bit.ly/2ijAkkp

❸ Ogłoszono TypeScript w wersji 2.5 RC.
http://bit.ly/2fUjTdE

❹ Nowa wersja #php (7.2.0 Beta 3).
http://bit.ly/2ij80i3

❺ Joomla w wersji 4 będzie wymagała PHP w wersji minimum 7.
http://bit.ly/2xlBcrv

➡ #humorinformatykow
Przecież nie istnieje większa liczba naturalna od 2147483647, a wiadomo o tym od czasów powstania świata, czyli od pierwszego stycznia 1970 roku ( ͡° ͜ʖ ͡°) pokaż całość

źródło: chatbot.png

Nie spodziewaliście się dziś kolejnego wpisu z cyklu [ #webstuff ], hm? ( ͡° ͜ʖ ͡° )つ──☆*:・ﾟ

❶ Narzędzie do podziału plików TXT oraz CSV na kilka części. Szczególnie przydatne, gdy importując jakieś dane przez przeglądarkę przekraczamy czas połączenia.
http://filesplit.org

❷ Materiały Code School dostępne za darmo w dniach 18 – 20 sierpnia 2017. Platforma należy do dość znanej firmy Pluralsight specjalizującej się w przekazywaniu wiedzy specjalistycznej.
https://www.codeschool.com

❸ Jak wykorzystać Stack Overflow do celów marketingowych na przykładzie autora pewnej usługi dostarczającej informacji o adresach IP.
http://bit.ly/2vFXlT7

❹ Prezentacja o tym jak #css Grid zmienia budowanie stron.
http://bit.ly/2v0Iaot

❺ Bardzo szybki kurs (60 minut) podstaw Vue.js 2
http://bit.ly/2uJ32R8

❻ Film demonstrujący działanie wyskakujących okien przeglądarki chowających się za aktywnym oknem, tzw. PopUnder.
http://bit.ly/2w4zQV5

❼ Prezentacja senior dewelopera firmy Microsoft o możliwościach SVG w sieci web.
http://bit.ly/2x7hnnE

❽ Strona, która generuje obraz złożony z pikseli o odmiennych kolorach (każdy piksel to inny kolor).
http://bit.ly/2i7saLQ

❾ Czy użytkownicy mobilnych wersji stron korzystają z przycisków udostępniania treści na portalach społecznościowych? Pewna firma postanowiła to zbadać. Wynik jest dość zaskakująco niski: otóż zaledwie 0.2% użytkowników klika na telefonie w przyciski udostępniania. Wygląda na to, że nie ma sensu umieszczać takich przycisków na innej wersji niż desktopowa.
http://bit.ly/2okgdDK

❿ Kolejny szybki kurs zajmujący godzinę, ale tym razem Angulara w wersji 4.
http://bit.ly/2vLjluh

⓫ Ion to „framework” CSS, który zawiera elementy systemu Apple MacOS. Ion przeznaczony jest do użytku w szczególności w obrębie frameworka Electron.
http://bit.ly/2uSC9Xv

⓬ Jeff Harris to gość, który podpiął API pod grę DOOM z 1993 roku. Dzięki temu można ją kontrolować używając HTTP i JSON. #gimbynieznajo
http://bit.ly/2vmDdpI

⓭ The JavaScript Way – nowa książka o #javascript dostępna za darmo w formie repozytorium na GitHubie.
http://bit.ly/2w4oP68

⓮ Dlaczego startupy tak chętnie sięgają po MongoDB?
http://bit.ly/2vFZDBC

⓯ Generator zrzutów ekranu w urządzeniach (desktopy, laptopy, tablety i telefony).
http://bit.ly/2wSDQpa

⓰ Sztuczna inteligencja, która zmienia zwykły obraz interfejsu na kod.
http://bit.ly/2rPOkFG

⓱ Śledzenie kursora efektem „:hover” w czystym CSS.
http://bit.ly/2w4Rc4a

⓲ Coroczny konkurs organizowany przez Polaka Andrzeja Mazura od 2012 roku, który polega na stworzeniu gry w JavaScript, której rozmiar nie przekracza 13 kilobajtów. W linku poniżej możecie znaleźć gry z poprzednich edycji.
http://bit.ly/2v4sufm

⓳ Bot na Twitterze, który co 3 godziny przestawia jakąś bibliotekę JavaScript.
http://bit.ly/2v5faaQ

⓴ Mobilne menu zakładek dla Bootstrapa, które jest alternatywą dla „hamburgera”. Coś podobnego możecie znać z mobilnej wersji serwisu Facebook.
http://bit.ly/2wSNN5X

➡ Grafika / #webdesign
❶ Parallax Flipping Cards
http://bit.ly/2w3P7FG

❷ O tym jak globalna sieć odzieżowa – Zara, kradnie projekty niezależnych artystów.
http://www.shoparttheft.com

❸ 10 najlepszych stron z darmowymi zdjęciami.
http://bit.ly/2wcWRFP

❹ Narzędzie do generowania trójkolorowej palety w stylu Material Design.
http://bit.ly/2wY6lkm

❺ Wiecie, że wraz ze zmianą wielkości czcionki powinno używać się innego odcienia szarości? Strona w prosty sposób prezentuje jakich odcieni używać, by tekst nadal był czytelny dla odbiorcy.
http://bit.ly/2wiVZhR

➡ Inspiracje
❶ Świetna animacja reklamowa wody mineralnej.
http://bit.ly/2uT77hU

❷ Jeden z bardziej minimalistycznych sklepów z odzieżą i dodatkami jaki w życiu widziałem.
https://www.balenciaga.com

❸ Bardzo dziwna strona amerykańskiego rapera A$AP Rocky w retro stylu.
https://www.awgeshit.com/

❹ Zaufanie jest fajne, ale może spowodować, że inni zaczną Cię wykorzystywać. Ten dylemat próbuje przedstawić autor nietypowej gry przez przeglądarkę – Ewolucji Zaufania. Zwróćcie uwagę na to jak ładnie gra jest wykonana.
http://ncase.me/trust/

❺ Świetne minimalistyczne obrazy przedstawiające gatunki zwierząt, które są zagrożone wyginięciem.
http://bit.ly/2w4JKGc

➡ Nowości
❶ Czwarta wersja bootstrapa (beta) jest już oficjalnie udostępniona.
http://getbootstrap.com

❷ Nowa wersja Atoma (1.19), czyli dość popularnego edytora, w której zoptymalizowano wykorzystanie pamięci.
http://bit.ly/2fNMOzN

❸ Nowa wersja Visual Studio Code (1.15), w której pojawił się próbnik kolorów.
http://bit.ly/2wiEbDM

➡ #ciekawostki
❶ Ambigram – grafika utworzona kaligraficznie lub obrazowo w taki sposób, że po obróceniu całości można odczytać ten sam lub inny tekst. Daniel Dostal od wielu lat specjalizuje się w tworzeniu tych dzieł. Przykłady oraz proces tworzenia możecie zobaczyć na jego blogu.
http://bit.ly/2w4HNJK

❷ Czy użytkownicy mobilnych wersji stron korzystają z przycisków udostępniania treści na portalach społecznościowych? Pewna firma postanowiła to zbadać. Wynik jest dość zaskakująco niski: otóż zaledwie 0.2% użytkowników klika na telefonie w przyciski udostępniania. Wygląda na to, że nie ma sensu umieszczać takich przycisków na innej wersji niż desktopowa.
http://bit.ly/2okgdDK

➡ #humorinformatykow
( ͡° ͜ʖ ͡°) pokaż całość

źródło: loop.png

Witam po przerwie i zapraszam do kolejnego wpisu z cyklu [ #webstuff ]!

❶ Wprowadzenie do maszynowego uczenia się przy użyciu TensorFlow i #python.
http://bit.ly/2sREe7X

❷ Bardzo prosta aplikacja arkusza kalkulacyjnego w czystym JavaScript oraz #css.
http://bit.ly/2sRKqgB

❸ "Async/await z ES2017 jest najlepszą rzeczą jaka trafiła się w JavaScript". Sprawdźcie dlaczego.
http://bit.ly/2sUuWII

❹ Fidget Spinner jako preloader w CSS.
http://bit.ly/2tutdaM

❺ Narzędzie do tworzenia kopii stron internetowych zachowując przy tym ich dynamiczne elementy (JS, flash). Może się okazać szczególnie przydatne na Wykopie do tworzenia mirrorów :P
https://webrecorder.io

❻ Mówi się, że najlepszą obroną jest atak. Christian Haschek przedstawia dość starą metodę w #php, która polega na obronie strony poprzez bomby ZIP.
http://bit.ly/2trmyOx

❼ Darmowy kurs wzorców projektowych w #javascript.
http://bit.ly/1Q7R3iP

❽ Wybór front-endowego frameworka JavaScript w 2017 roku.
http://bit.ly/2tBGxtl

❾ Kilkadziesiąt obrazów przedstawiających codzienność freelancera z przymrużeniem oka ;)
http://imgur.com/gallery/ijVuF

❿ Wprowadzenie do D3.js (biblioteki do wizualizacji danych).
https://www.youtube.com/watch?v=8jvoTV54nXw

⓫ Lista najlepszych praktyk przy pracy z projektami w JS.
http://bit.ly/2sEVKgG

⓬ Kanał YT z kilkoma kursami (JS, Python, MATLAB, Linux).
http://bit.ly/2sR3pn2

⓭ Amerykańska flaga w CSS bez wykorzystania pseudo elementów.
http://bit.ly/2sR9dgF

⓮ Narzędzie, które wspomaga dostęp do ikon Google Material. Wystarczy wpisać nazwę, wybrać kolor i nazwę.
http://bit.ly/2uPkpvI

⓯ Kurs optymalizacji aplikacji opartych na frameworku PHP Laravel.
http://bit.ly/2tW5Tpd

⓰ Narzędzie do doboru fontu z Google Fonts, jego koloru oraz tła.
https://typehero.now.sh

⓱ Uczysz się Pythona? Nie masz pomysłu na własne programy? Skorzystaj z tego repozytorium, a w razie problemów zajrzyj do gotowego kodu :)
http://bit.ly/2suCgae

⓲ Preprocesor PHP.
https://preprocess.io/

⓳ Skrypt napisany w PHP do łatwego pobierania treści z Instagrama.
http://bit.ly/2tlFLCM

⓴ Ostatnią pozycję tej listy zajmuje quiz, w którym trzeba poprawnie odgadnąć, które z logo przedstawia oryginał z fontem Helvetica.
http://bit.ly/1pkb8mA

➡ #grafika / #webdesign
❶ Jeden z lepszych zbiorów darmowych zasobów graficznych, muzycznych i wideo!
http://makerbook.net/

❷ Proste, ładne i przede wszystkim darmowe ikonki.
https://feather.netlify.com/

❸ UI design na Windows, czyli przegląd oprogramowania.
http://bit.ly/2tWlrtt

❸ Katalog darmowych zasobów.
http://allthefreestock.com/

➡ Inspiracje
❶ Animowane żaluzje w CSS.
http://bit.ly/2sJtol2

❷ Inspiracje UI wraz z demo oraz kodem.
https://codemyui.com

❸ Kolejna biblioteka nawigacji, eksperymentów, templatek itd. w CSS / #html / JS.
https://codyhouse.co/

❹ Pewien turysta odwiedził Portugalię, lecz nie miał przy sobie aparatu. Wyszukał zwiedzone miejsca w Google Maps i użył Photoshopa, by wyglądały tak jak „obrazy”, które zapamiętał w głowie :)
http://imgur.com/a/BnCZh

❺ Zestawienie fontów z Google Fonts oraz klasycznych dzieł sztuki.
http://bit.ly/2tuOMbi

❻ Współczesne filmy na opakowaniach kaset VHS jak z lat 80-90. Aż przypomniał mi się specyficzny zapach mojej osiedlowej wypożyczalni! #nostalgia
http://bit.ly/2bmIO66

❼ Kreatywny projekt wieczka od jogurtu.
https://imgur.com/5QrtJ03

➡ #humorinformatykow
Chyba ktoś wstydził się upomnieć sąsiadów wprost ( ͡° ͜ʖ ͡°) pokaż całość

źródło: slyszejak.jpg

Jak tam [ #webstuff ]? Zmalał, urus? Dziś zdecydowanie urus ( ͡° ͜ʖ ͡°)

❶ Scroller to strona, która agreguje obrazkowe treści z serwisu Reddit, a w tym sztukę, jedzenie, naturę czy zawartość NSFW (⌐ ͡■ ͜ʖ ͡■)
https://scrolller.com

❷ AmplitudeJS - odtwarzacz plików dźwiękowych w #javascript. Obsługuje SoundCloud.
http://bit.ly/2qHiOXb

❸ Lubicie Sublime Text Editor? A co powiecie na coś zbliżonego, ale w terminalu?
http://bit.ly/YXFVhB

❹ Przydatna strona, którą możecie podsyłać klientom ( ͡° ͜ʖ ͡°)
http://didyouclearthecache.com

❺ Strona, która jest swego rodzaju eksperymentem społecznym. Czy zapłaciłbyś jednego dolara, by sprawdzić ilu ludzi już wpłaciło dolara? :D
http://bit.ly/2s0XNdK

❻ Graficzny interfejs dla Composera #php.
http://bit.ly/2qIZht8

❼ The Complete Guide to a Super Productive Docker Development Environment.
http://bit.ly/2qIZP2l

❽ Wywiad z twórcą Vue.js
http://bit.ly/2rYng7z

❾ 2134 strony książki o web deweloperce za darmo! HTML, PHP, MySQL, JavaScript i Linux.
http://bit.ly/2rLTgMy

❿ LateX Resume Generator.
https://latexresu.me/

⓫ Open Source’owe ikonki SVG.
https://feather.netlify.com

⓬ Doge Fidget Spinner.
http://bit.ly/2qHOYli

⓭ Brakuje Tobie ostatniego punktu w Google PageSpeed Insights? Sprawdź jak go zdobyć.
http://bit.ly/2qIUsjL

⓮ Narzędzia do tworzenia maili #html:
http://bit.ly/2rMe46r

⓯ Trzy wskazówki dotyczące Twojego pierwszego klienta w freelancingu.
http://bit.ly/2qGKL0Y

⓰ Jak zoptymalizować obrazy dla sieci web?
http://bit.ly/2qwf6jz

⓱ Nile.js – biblioteka JavaScript służąca do streamowania wideo na żywo używając komunikacji P2P.
http://nilejs.com

⓲ Budowa bota na Twittera w Node.js przy użyciu 38 linijek kodu.
http://bit.ly/2rs5k2B

⓳ Ścieżka rozwoju dla web dewelopera (Front + Back + DevOps).
http://bit.ly/2m4ljEv

➡ Bonusy
❶ Picodom is a 1kb Virtual DOM builder and patch algorithm.
http://bit.ly/2rMjUVB

❷ A lightweight wrapper to operate on nested dictionaries seamlessly. #python
http://bit.ly/2ryBnzI

❸ 11 things I learned reading the flexbox spec.
http://bit.ly/2qtkbs7

❹ Get a glance at a whole web page with an aerial view – UI experiment & JavaScript plugin.
http://bit.ly/2rrJvQH

❺ Should developers know design?
http://bit.ly/2qNQBNl

❻ 70% faster: rewriting the API that serves most of our traffic
http://bit.ly/2ryjYYc

➡ #grafika / #webdesign
❶ Open Source’owe ikonki SVG.
https://feather.netlify.com

❷ Narzędzie do odnajdowania fontów z Google Fonts wg wizualnych filtrów.
http://bit.ly/2qHrXyJ

❸ Trendy w tworzeniu logo na rok 2017.
http://bit.ly/2rw6yvF

❹ Co ten Samsung i jego emoji, to ja nawet nie…
http://bit.ly/2qvOQck

❺ Zasady responsywnej typografii.
http://bit.ly/2nigKWZ

➡ Inspiracje
❶ Jak zwykle, kolejny świetny efekt od Codrops. Tym razem zmiana kształtu w tle podczas przewijania strony.
http://bit.ly/2ryfErU

❷ Ciekawy „progress nav”, który zmienia się wraz z przewijaniem strony.
http://bit.ly/2swiJG7

❸ Perkusja w JavaScript.
http://bit.ly/2rbLOZE

❹ Bardzo ciekawe fotomontaże.
http://bit.ly/2rs503Q

❺ Zbiór inspiracji dla projektantów logo.
http://bit.ly/1h7Zesl

❻ Kolekcja 70 kart CSS.
http://bit.ly/2rAvHpx

➡ Nowości
❶ Skype przechodzi rebranding. Łączy funkcje wiodących komunikatorów na rynku, a w tym Snapa.
http://bit.ly/2qNFsMq

❷ Nowa wersja Node.js (8.0.0)
http://bit.ly/2ryuCyf

❸ Ciekawi co czeka Was w Media Queries Level 4 dla #css?
http://bit.ly/2qNNLrA

❹ Nowa wersja Symfony (3.3.0)
http://bit.ly/2rMeM3F

➡ #ciekawostki
❶ Wiecie, że w konsoli dewelopera możecie umieszczać obiekty SVG? Ba! Można je nawet animować ;-)
http://bit.ly/2qNqZ38

❷ Strona filmu „Kosmiczny mecz” (Space Jam) z Michaelem Jordanem oraz Królikiem Bugsem jest cały czas dostępna w sieci od 1996 roku. #film
http://bit.ly/2muNkCh

❸ Zapewne wiecie już, że Ubisoft zaktualizował swoje logo, ale czy znacie logo z początku działalności tej firmy?
http://bit.ly/2swqKe5

❹ Wiecie, że funkcja isset() w PHP obsługuje wiele argumentów? Niby jest o tym napisane w manualu, ale rzadko kto zwraca na to uwagę. Przykład:
if (isset($array['foo'], $array['bar']))

❺ Rumuński minister komunikacji (Augustin Jianu) jest deweloperem PHP.

➡ #humorinformatykow
Kojarzycie ten słynny kubek z napisem „CSS IS AWESOME”? Już jest naprawiony ( ͡° ͜ʖ ͡°) pokaż całość

źródło: cssisawesome.png