bookmarks

🔖 Bookmarks

🌐 Basic

• https://www.youtube.com/watch?v=7_LPdttKXPc - Jak działa internet?
• https://www.youtube.com/watch?v=DuSURHrZG6I - Jak przeglądarka wyświetla stronę internetową?

📜 Dokumentacje nieoficjalne

• https://devdocs.io/ - agregat wielu języków
• https://developer.mozilla.org/pl/docs/Web

🚨 Walidacja (Lintery)

HTML

• https://validator.w3.org/

CSS

• https://jigsaw.w3.org/css-validator/

JavaScript

• https://www.jslint.com/
• https://jshint.com/
• https://eslint.org/

JSON

• http://jsonlint.com/
• https://jsonblob.com/

Markdown

• https://github.com/DavidAnson/markdownlint
• https://github.com/igorshubovych/markdownlint-cli

⛺ CSS

• http://learnlayout.com/ - nauka budowania layoutów krok po kroku
• http://learn.shayhowe.com/html-css/
• http://learn.shayhowe.com/advanced-html-css/
• https://csstriggers.com/ - prezentacja listy reguł wraz z informacją jakie procesy powodują w przeglądarce
• http://web-profile.net/css/docs/css-styles-priority/
• http://www.patternify.com/ - generator wzorców w obrazkach
• http://inamidst.com/stuff/notes/csspx
• https://tympanus.net/Tutorials/CSS3ContentTabs/index3.html
• http://css3pie.com/
• https://mediaqueri.es/ - przykłady stron z Media Queries (RWD)
• http://css-101.org/ - nauka CSS-ów
• https://csslayout.io/ - Zestaw prawie 100 różnych komponentów
• https://pattle.github.io/simpsons-in-css/ — The Simpsons in CSS
• https://tachyons.io/

🔌 Selektory

• https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
• https://css-tricks.com/almanac/ - lista selektorów
• https://cssreference.io/ - opis wszystkich selektorów CSS
• http://nthmaster.com/ - przewodnik po selektorach wyliczeniowych np. nth-child
• https://josh.github.io/css-explain/ - analiza złożoności selektorów CSS
• https://specificity.keegan.st/ - analiza złożoności selektorów CSS
• https://www.w3.org/TR/selectors-4/ - specyfikacja selektorów

🏔 HTML

• https://docs.emmet.io/cheat-sheet/ - lista wszystkich skrótów w Emmet
• https://html5demos.com/
• https://html5please.com/
• https://mcdlr.com/utf-8/ - lista wszystkich encji w UTF-8
• https://w3c.github.io/html/links.html - opis osadzenia favicona

📚 Książki

• https://eloquentjavascript.net/
• https://github.com/vhf/free-programming-books/
• https://it-ebooks.info/
• https://jsbooks.revolunet.com/
• https://leanpub.com/
• https://pragprog.com/

📥 Kursy online

Bez rejestracji

• https://pl.khanacademy.org/computing/computer-programming/
• http://www.crunchzilla.com/code-monster
• https://www.javascript.com/
• https://www.javascript30.com/

Rejestracja - Darmowe

• https://www.freecodecamp.org/
• https://fullstackopen.com/en/

Płatne

• https://code.tutsplus.com/categories/javascript/courses
• https://frontendmasters.com/
• https://teamtreehouse.com/
• https://www.codeavengers.com/
• https://www.codecademy.com/learn/introduction-to-javascript
• https://www.pluralsight.com/paths/javascript

Kursy w stylu grania w grę

• https://codecombat.com/
• https://www.codingame.com/
• https://flexboxfroggy.com/

📔 Nauka

• https://developer.mozilla.org/en-US/docs/Learn
• http://wtfhtmlcss.com/ - teoretycznie o CSS i HTML
• https://www.kirupa.com/ - teoretycznie o Front-end
• https://bonsaiden.github.io/JavaScript-Garden/pl/ - opisanie języka JavaScript
• https://johnresig.com/apps/learn/ - zaawansowany JavaScript
• https://kursownik.pl/kursy/html5_canvas/

Wskazówki

• http://perfectionkills.com/
• https://github.com/loverajoel/jstips
• http://superherojs.com/

🎥 Wideo / Kanały na YouTube

Prywatne

• https://www.youtube.com/channel/UCfetJpmQH2XpFj8uFgWsezw - Addy Osmani
• https://www.youtube.com/channel/UC_MIaHmSkt9JHNZfQ_gUmrg - Adam Gospodarczyk
• https://www.youtube.com/channel/UC_DEBDpgRyBZAT85tJ1QZBw - Codewithstyle.info
• https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q - Fun Fun Function
• https://www.youtube.com/channel/UCq8XmOMtrUCb8FcFHQEd8_g - hello roman
• https://www.youtube.com/channel/UCZUQDF--vGfJIgfM3MRIt_A - Jakub Gutkowski
• https://www.youtube.com/channel/UCffjO7O5ELIUrFWIhpf64uw - Piotr Kowalski
• https://www.youtube.com/channel/UCnrmvLXGA-EX-O4aBHAlipw - Przemek Smyrdek
• https://www.youtube.com/channel/UCXTBCjgq2gETxq1KJbeKyzQ - Żaneta Jażdżyk

Organizacje

• https://www.youtube.com/channel/UCVz-Bml3D7HleF0sAgyUMbQ - BenjiJS
• https://www.youtube.com/channel/UC0ffaY8-W6eotEveH4DtS3w - HannoverJS
• https://www.youtube.com/channel/UCIo6TsJzLVRGbRZxKzoNeFQ - MoscowJS
• https://www.youtube.com/channel/UCr5lOCcjZzNprLrhxO0WZQw - SeattleJS
• https://www.youtube.com/channel/UCzYf3wdKSKnR5lvkRVUyCYg - WarsawJS

Konferencje

• https://www.youtube.com/channel/UC2Jwo4Q0s-ucjGseHP8XUSQ - HolyJS
• https://www.youtube.com/channel/UCzoVCacndDCfGDf41P-z0iA - JSConf
• https://www.youtube.com/channel/UCKY4rlnOOWp_FfGrIjQVmtQ - Frontend Union Conf
• https://www.youtube.com/channel/UCpIBwBITpXelDgDwe-16zWA - Front-Trends
• https://www.youtube.com/channel/UCTZ3O2cZo1b4JSwvhgBnAbw - Nordic.js
• https://www.youtube.com/channel/UCj7q1yKjZXaRcFJ-Lr-YJhA - PolyConf
• https://www.youtube.com/channel/UCU-fOxx_kT5OARG0KiksiCA - You Gotta Love Frontend
• https://www.youtube.com/channel/UCImlZXX470Pl8N_CUy3E2Zw - ngVikings

Różne

• https://www.youtube.com/channel/UCbn1OgGei-DV7aSRo_HaAiw - Angular
• https://www.youtube.com/channel/UCp6r12AIAaiehka-tkG7dmw - Devcorner
• https://www.youtube.com/channel/UCTSA-dtbDpReq0UMdj7efWg - Frontendy
• https://www.youtube.com/channel/UCztRO4rG71uxuR-Tpf_biww - Front End TV
• https://www.youtube.com/channel/UC__NR52nzDsbmy2y0S13JIQ - HTML5DevConf & IoTaconf
• https://www.youtube.com/channel/UC1g3pzYoPPNEpBrvBQh7rkA - Na Frontendzie
• https://www.youtube.com/channel/UC_SlZN44IUi-rBHVOiAWp3g - NetflixOpenSource
• https://www.youtube.com/channel/UCGGRRqAjPm6sL3-WGBDnKJA - Netflix UI Engineering
• https://www.youtube.com/channel/UCb2Y3vMeD6N4WDt5Acw7Arw - Przeprogramowani
• https://www.youtube.com/channel/UCS8HoD9qcAHezDLtDS-8xOg - StaticWebTech
• https://www.youtube.com/channel/UCaycmZ0kLzlh3fVJZlUvwxw - Twórca Stron
• https://www.youtube.com/channel/UCR4qSQa8JFh6zeR5Idvnewg - Type of Web
• https://www.youtube.com/channel/UCvO38KP1n_dw6GY2azgzbjQ - webMASTAH

🗞 Blogi

🇵🇱 Blogi: Polskie

• https://ach-te-internety.pl/
• https://bd90.pl/
• https://bedekodzic.pl/
• https://blog.comandeer.pl/
• https://blog.piotrnalepa.pl/
• https://blog.robertorlinski.pl/
• https://cezarywalenciuk.pl/
• https://devinspe.blogspot.com/
• https://kamilmysliwiec.com/
• https://kamilrogala.it/
• https://kot-zrodlowy.pl/
• https://mateuszstanek.pl/
• https://pawelochota.pl/
• https://piecioshka.pl/blog/
• https://typeofweb.com/
• https://webroad.pl/
• https://webmastah.pl/
• https://www.angular.love/
• https://www.czterytygodnie.pl/
• https://www.idaszak.com/
• https://www.nafrontendzie.pl/
• https://www.webkrytyk.pl/

🇺🇸 Blogi: Angielskie

• https://blog.domenic.me/
• https://blogjs.github.io/
• https://codewithstyle.info/
• https://davidwalsh.name/
• https://michalzalecki.com/
• https://pawelgrzybek.com/
• https://tech.evojam.com/
• https://wesbos.com/blog/
• https://www.2ality.com/

📮 Agregaty źródeł

🇵🇱 Agregaty źródeł: Polskie

• https://github.com/piecioshka/warto-wiedziec
• https://polskifrontend.pl/
• https://devcorner.pl/
• http://shebang.pl/

🇺🇸 Agregaty źródeł: Angielskie

• http://fredsarmento.me/
• https://gist.github.com/tonymtz/3c11d75fa7ba7e682355
• https://github.com/funzeye/dev-bookmarks
• https://movethewebforward.org/
• https://www.echojs.com/

📻 News

• https://ecmascript-daily.github.io/
• https://frontendfront.com/
• https://hacks.mozilla.org/
• https://thefullstack.xyz/
• https://uptodate.frontendrescue.org/pl/
• https://www.facebook.com/warsawjs
• https://www.facebook.com/groups/217169631654737/ - JS News
• https://www.reddit.com/r/javascript/
• https://www.wykop.pl/tag/javascript/

📨 Newslettery

• https://frontendfoc.us/
• https://gamedevjsweekly.com/
• https://javascriptweekly.com/
• https://mobiledevweekly.com/
• https://nodeweekly.com/
• https://phaser.io/community/newsletter
• https://react.statuscode.com/
• https://fullstak.pl/newsletter
• https://typeofnan.dev/

🚴 Lifestyle

• http://jstherightway.org/
• https://uptodate.frontendrescue.org/

📦 CDN (cache)

• https://cdnjs.com/
• http://microjs.com/
• https://unpkg.com/
• https://www.unheap.com/
• https://www.javascripting.com/

👥 Rekrutacja

• https://github.com/h5bp/Front-end-Developer-Interview-Questions
• https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95

🌻 Kolory

Lista kolorów

• https://github.com/piecioshka/colors
• http://colours.neilorangepeel.com/
• https://www.behance.net/gallery/45420609/Colours-for-Designers
• http://www.colorlisa.com/
• https://www.materialui.co/colors
• http://www.colors.commutercreative.com/grid/
• http://www.coleure.com/
• http://colorsafe.co/
• https://flatuicolors.com/
• https://clrs.cc/
• http://www.cssmania.com/colors/
• https://www.color-hex.com/
• https://uigradients.com/

Pickery

• https://color.adobe.com/pl/
• https://paletton.com/
• https://htmlcolorcodes.com/

Rysowanie

• http://zwibbler.com/demo/

🌾 Ikony

• https://useiconic.com/icons/
• http://thesquid.ink/mini-icons/
• https://tympanus.net/codrops/2016/04/15/freebie-responsive-office-icons/
• http://p.yusukekamiyamane.com/
• http://famfamfam.com/
• https://icons8.com/

🍱 Programy graficzne

• https://www.spriters-resource.com/
• https://www.aseprite.org/
• https://www.codeandweb.com/

🏓 Favicon

Konwersja obrazu na favicon

• https://www.favicomatic.com/
• https://www.favicon-generator.org/
• https://www.favicongenerator.com/

Tworzenie favicon

• https://www.favicon.cc/
• https://www.degraeve.com/favicon/
• https://onlinefavicon.com/

🗿 “Prawdziwe” obrazki i zdjęcia

• https://www.toptal.com/designers/subtlepatterns/ - lista teł
• http://publicdomainarchive.com/ - darmowe obrazki na licencji Public Domain

💷 Fake images (Fałszywe obrazki)

• https://dummyimage.com/
  • przykład:
    • https://dummyimage.com/400x200/
    • https://dummyimage.com/400x200&text=DOWOLNY
    • https://dummyimage.com/400x200/000/fff
    • https://dummyimage.com/400x200/000/fff/?text=DOWOLNY
  • cechy:
    • działa po HTTPS
    • prezentacja rozdzielczości
    • zdefiniowanie prezentowanego tekstu
• https://placehold.co/
  • przykład:
    • https://placehold.co/400x200
  • cechy:
    • prezentacja rozdzielczości
    • szare tło
    • ustawienie kolorów: tła i tekstu
    • zdefiniowanie prezentowanego tekstu
• https://fakeimg.pl/
  • przykład:
    • https://fakeimg.pl/400x200/
    • https://fakeimg.pl/400x200/ff0000/fff/?text=DOWOLNY&font=lobster
  • cechy:
    • ⚠️ często blokowany przez Cloudflare (403) przy hotlinkowaniu z innych domen
    • prezentacja rozdzielczości
    • ustawienie kolorów: tła i tekstu
    • zdefiniowanie prezentowanego tekstu
    • ustawienie typu fontu (parametr: font, możliwości: lobster, bebas, museo)
    • ustawienie wielkości fontu (parametr: font_size)
• https://placem.at/
  • przykład:
    • https://placem.at/things?w=400&h=200
    • https://placem.at/things?w=400&h=200&txt=DOWOLNY
    • https://placem.at/things?w=400&h=200&overlay_color=ffffff
    • https://placem.at/things?w=400&h=200&overlay_color=fff&overlay_blend=multiply
  • cechy:
    • prezentacja rozdzielczości
    • ładne obrazki w tle
    • ustawienie kolorów: tła i tekstu
    • zdefiniowanie prezentowanego tekstu
• http://placeskull.com/
  • przykład:
    • http://placeskull.com/400/200
  • cechy:
    • nie działa po HTTPS
    • prezentacja zdjęcia z czaszką
• https://baconmockup.com/
  • przykład:
    • https://baconmockup.com/400/200/
  • cechy:
    • działa po HTTPS
    • prezentacja zdjęcia z bekonem
• https://picsum.photos/
  • przykład:
    • https://picsum.photos/400/200
  • cechy:
    • prezentacja losowych zdjęć
    • prezentacja rozdzielczości
• https://visualhunt.com/
  • cechy:
    • bardziej do pobierania obrazów, niż jako placeholder
    • nie można podać rozdzielczości

⛩ PSD

• https://freepsdfiles.net/
• https://www.freepik.com/free-psd/
• https://begha.deviantart.com/art/Motion-single-page-PSD-web-template-for-free-380143270

ℹ️ Pomocne (szablony)

• https://startbootstrap.com/ - szablony elementów
• https://pikock.github.io/bootstrap-magic/ - stwórz własny temat do Bootstrap-a

🎮 Gamedev

• https://github.com/DaRaFF/jsgamewiki
• https://html5gameengine.com/
• https://opengameart.org/

🎲 Gry

• https://mdn.github.io/canvas-raycaster/ - Quake
• https://ondras.github.io/blockout/ - Tetris
• https://ondras.zarovi.cz/demos/rubik/ - Kostka Rubika

🔠 Fonty

• https://fonts.google.com/
• https://www.fontsquirrel.com/
• https://wordmark.it/ - wymaga Adobe Flash Player
• https://fontpair.co/ - Wybiera fonty pasujące do siebie
• https://www.myfonts.com/WhatTheFont/ - Identyfikuje fonty na obrazku
• https://www.fontsquirrel.com/matcherator - Identyfikuje fonty na obrazku
• http://getfound.pl/102-darmowe-fonty-z-polskimi-znakami/

✏️ Edytory

• https://codepen.io/
• https://jsfiddle.net/
• https://jsbin.com/

🔒 ASCII

• http://asciiflow.com/ - tworzenie obiektów w ASCII
• http://www.network-science.de/ascii/
• http://patorjk.com/software/taag/

💰 RegExp

• https://www.regexpal.com/
• https://regex101.com/

⚔ TypeScript

• https://www.typescriptlang.org/
• https://basarat.gitbooks.io/typescript/

⚙ Wzorce projektowe

• https://sourcemaking.com/design_patterns
• https://addyosmani.com/resources/essentialjsdesignpatterns/book/

📦 Biblioteki

• https://w3techs.com/technologies/history_overview/javascript_library/all
• https://w3techs.com/technologies/overview/javascript_library/all
• https://w3techs.com/technologies/topsite/javascript_library

🗣 JSON API

• https://jsonplaceholder.typicode.com/
• https://reqres.in/
• https://randomuser.me/

🍹 Efekty

• https://h5bp.github.io/Effeckt.css/
• https://webcamtoy.com/pl/app/ - Obraz z kamery
• https://www.airtightinteractive.com/demos/js/webcammesh/ - Obraz z kamery
• https://codepen.io/juliangarnier/pen/idhuG - 3D Układ Słoneczny
• https://threejs.org/examples/css3d_periodictable.html - 3D Układ Okresowy Mendelejewa
• https://zenphoton.com/
• https://tympanus.net/Tutorials/3DHoverEffects/
• https://tympanus.net/Tutorials/OriginalHoverEffects/index4.html
• http://www.lutanho.net/svgvml3d/platonic.html
• https://viliusle.github.io/miniPaint/ - Rysowanie (Paint)
• https://mrdoob.com/projects/harmony/ - Rysowanie
• https://galactic.ink/sketchpad/ - Rysowanie
• https://www.sketchtoy.com/ - Rysowanie
• https://sketch.io/sketchpad/?lang=pl - Rysowanie
• https://alteredqualia.com/touchtoy/

🌊 Inspiracje graficzne

• http://rogerdudler.github.io/git-guide/index.pl.html - grafika + nagłówki
• https://dev.to/ - cały design
• https://snook.ca/contact/ - twarz na dole

Bez kategorii

• https://www.behindthename.com/random/random.php - generator nazw
• https://niebezpiecznik.pl/ciastko - świetny obrazek strony 404
• https://webkit.org/blog-files/3d-transforms/poster-circle.html - 3D walec z kwadratami
• https://www.npmjs.com/package/chalk - świetne logo w ciele strony (tak w połowie strony - takie kredkowe)
• http://screensiz.es/ - rozdzielczości ekranów
• https://openexchangerates.github.io/javascript-sandbox-console/
• https://int3.github.io/metajs/
• https://aem1k.com/world/
• https://github.com/piecioshka/Moj_Stary_to_Fanatyk_JS
• https://webhook.site/
• https://andreasbm.github.io/web-skills/
• https://devfacts.io/
• https://httptoolkit.tech/will-it-cors/
• https://htmldom.dev/
• https://1loc.dev/
• https://dev.kasiaizak.pl/