KCblama19 / resources

📰 Some actualy helpful resources for web development

resources

Some actualy useful resources for web development/design

Development

News

• regularly updated, curated https://frontendfront.com/

Blogs

• low level javascript discussion http://2ality.com/

• exploring js http://perfectionkills.com/

• blog of dan abramov https://overreacted.io/

• understanding javascript inside the core (sessionstack blog) https://blog.sessionstack.com/tagged/tutorial

• interesting web tech stuff http://blog.danyll.com

• helpful breakdowns of web stuff https://bitsofco.de/

• blog of addy osmani https://addyosmani.com/blog/

UI DEV

• facing ui challenges https://overreacted.io/the-elements-of-ui-engineering/

• http://youmightnotneedjs.com/

Browser & Devices

• overview over browser technologies https://platform.html5.org/

• browser support tables for web technologies https://caniuse.com/

• ES 5/6/+ compatibility Tables http://kangax.github.io/compat-table/es6

• event reference https://developer.mozilla.org/en-US/docs/Web/Events

• web apis https://developer.mozilla.org/en-US/docs/Web/API

• common display resolutions https://en.wikipedia.org/wiki/Display_resolution#Common_display_resolutions

• high performance browser networking https://hpbn.co/

• Apple Display Pixel Dimensions https://stonehippo.com/apple_display_pixel_dimensions/

• Headless Chrome Node API https://pptr.dev/

• what exactly is the dom by Ire Aderinokun https://bitsofco.de/what-exactly-is-the-dom/

• understanding the critical rendering path by Ire Aderinokun https://bitsofco.de/understanding-the-critical-rendering-path/

React

• create react app dokumentation https://create-react-app.dev/docs/getting-started/

• react router https://reactrouter.com/

• Tyler McGinnis https://ui.dev/

Javascript

• guide to writing less error-prone javascript https://molily.de/robust-javascript/

• high performance javascript (zakas) ftp://ftp.micronet-rostov.ru/linux-support/books/programming/JavaScript/[O%60Reilly]%20-%20High%20Performance%20JavaScript%20-%20[Zakas].pdf

• guides to javascript https://developer.mozilla.org/de/docs/Web/JavaScript/Guide, http://eloquentjavascript.net/ (book)

• large scale javascript patterns & design decicions https://addyosmani.com/largescalejavascript/

• jQuery like - pure javascript solutions http://youmightnotneedjquery.com/

• guide to (Javascript) design patterns (book) https://addyosmani.com/resources/essentialjsdesignpatterns/book/

• collection of best practices http://jstherightway.org/#getting-started

• some hints on writing good quality code https://medium.com/@JStheGame/what-does-good-code-look-like-8cb941ea8e49

• you dont know js book series (read online) https://github.com/getify/You-Dont-Know-JS

• a guide to producing readable, reusable, and refactorable software in JavaScript https://github.com/ryanmcdermott/clean-code-javascript

• how to write fast, memory efficient javascript https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/

• google code archive https://code.google.com/archive/

• guide to promises by Jake Archibald https://developers.google.com/web/fundamentals/primers/promises

• introduction to react by Robin Wieruch https://www.robinwieruch.de/javascript-fundamentals-react-requirements/

• es6 cheatsheet https://github.com/DrkSephy/es6-cheatsheet

• javascript data structures and algorithms https://github.com/trekhleb/javascript-algorithms

• implementing privacy in javascript https://philipwalton.com/articles/implementing-private-and-protected-members-in-javascript/

• json !== javascript http://timelessrepo.com/json-isnt-a-javascript-subset

• https://molily.de/js/ german introduction to javascript

• console methods (to get to know others than console.log) https://developer.mozilla.org/en-US/docs/Web/API/Console

• Mikhail Romanov on Time Complexity and Big O Notation https://hackernoon.com/finding-non-unique-elements-in-javascript-d934e6fd6260

• Google Code Jam Challenges from past contests https://code.google.com/codejam/past-contests

• 33 js concepts every js developer should know https://github.com/leonardomso/33-js-concepts#readme

• promise polyfill https://www.npmjs.com/package/promise-polyfill

• speaking js by Dr. Axel Rauschmayer (es5) http://speakingjs.com/es5/index.html

• exploring js by Dr. Axel Rauschmayer (es6) http://exploringjs.com/es6.html

• few "advanced" react things to know https://medium.freecodecamp.org/these-are-the-concepts-you-should-know-in-react-js-after-you-learn-the-basics-ee1d2f4b8030

• details on the execution of javascript code https://medium.com/@siddharthac6/javascript-execution-of-synchronous-and-asynchronous-codes-40f3a199e687

• Scope, context, this https://dev.to/carlillo/understanding-context-scope-execution-context-and-8-different-this-value-in-javascript-explained-by-paw-patrol-2gme

• JS High Level Overview https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95

• Modern Javascript Development Mindset http://2ality.com/2016/02/js-fatigue-fatigue.html

• pixie js demo page http://pixijs.io/pixi-filters/tools/demo/

• comma operator https://javascriptweblog.wordpress.com/2011/04/04/the-javascript-comma-operator/

CSS

• CSS auto prefixer (vendor prefixes) https://autoprefixer.github.io/

• CSS tips https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/

• centering with CSS https://css-tricks.com/centering-css-complete-guide/

• flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

• CSS validator https://jigsaw.w3.org/css-validator/#validate_by_input

• CSS minifier https://cssminifier.com/

• Bulletproof Font Face Declaration https://transfonter.org/formats

• collection of spinners/loaders http://tobiasahlin.com/spinkit/

• organic shapes with css https://medium.com/9elements/css-border-radius-can-do-that-d46df1d013ae

• email client css support (mailchimp) https://templates.mailchimp.com/resources/email-client-css-support/

• email client css support (mailchimp) https://templates.mailchimp.com/resources/email-client-css-support/

• email client css inliner (mailchimp) https://templates.mailchimp.com/resources/inline-css/

• flexbox failure workarounds https://github.com/philipwalton/flexbugs

PHP

• Test/Execute PHP Code live/online http://phptester.net/

Fonts

• tips on using webfonts https://www.zachleat.com/web/font-checklist/

HTML

• cheat sheet https://medium.com/level-up-web/the-mega-html5-cheatsheet-e8c479b1c521

• element reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element

• Validator http://validator.w3.org/#validate_by_input

• structural elements https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#Enter_HTML5_structural_elements

• mailtolink generator https://mailtolink.me/

Haskell

• Introduction to Haskell https://www.seas.upenn.edu/~cis194/fall16/

• Learn you a haskell ebook http://learnyouahaskell.com/chapters

JSON

• geojson simplifier https://mapshaper.org/

• geojson editor http://geojson.io/ https://google-developers.appspot.com/maps/documentation/utils/geojson/

• json formatter/validator https://jsonformatter.curiousconcept.com/

Tools

• text compare tool (similar to svn merge) https://www.diffnow.com/

• file renamer https://www.heise.de/download/product/renamer-51787

• Putty connect to server via ssh (SSH client) https://www.putty.org/

• Filezilla file transfer tool (ftp) https://filezilla-project.org/

• JSHint javascript error/problem detection http://jshint.com/

• JSBeautifier beautifies javascript code (can set own rules) http://jsbeautifier.org/

• CSS formatter http://e10host.com/css-beautifier

• HTML formatter https://www.cleancss.com/html-beautify/

• IE 9-11 testing https://www.browserling.com/

• chrome accessability extension https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en

• everytimezone - shows all the timezones http://everytimezone.com/

• svn cli basics http://www.linuxfromscratch.org/blfs/edguide/chapter03.html

• cross device testing https://www.browserstack.com/

• Epoch & Unix Timestamp Conversion https://www.epochconverter.com/

• JS Test Runner https://www.cypress.io/

• Web Application Bundler (Webpack alternative) https://parceljs.org/

• png size reducer https://pngcrush.com

• image size reduce tool (photoshop save to web legacy alternative) https://squoosh.app/

• get keycode https://keycode.info/ (by Wes Bos)

• grammar correction in german/english/whatever https://www.languagetool.org/

Talks

• simplicity matters by Rich Hickey https://www.youtube.com/watch?v=rI8tNMsozo0

• growing a language by Guy Steele https://www.youtube.com/watch?v=_ahvzDzKdB0

• solid Principles of Object Oriented and Agile Design by Bob Martin https://www.youtube.com/watch?v=TMuno5RZNeE

• the Future of Programming by Bob Martin (partly overlapping with solid principles of oo) https://www.youtube.com/watch?v=ecIWPzGEbFc

• inventing on princible by Bret Victor https://www.youtube.com/watch?v=PUv66718DII

• what the heck is the event loop anyway by Philip Roberts https://www.youtube.com/watch?v=8aGhZQkoFbQ

• 10 things i learned from the jquery source by Paul Irish https://www.youtube.com/watch?v=i_qE1iAmjFg

• Why are software development task estimations regularly off by a factor of 2-3 by Michael Wolfe (read) https://www.quora.com/Why-are-software-development-task-estimations-regularly-off-by-a-factor-of-2-3/answer/Michael-Wolfe?srid=doz3

• Programming Sucks (read) https://www.stilldrinking.org/programming-sucks

• Event Loop in Detail by Jake Archibald https://flaviocopes.com/requestanimationframe/

• Alan Kay - Programming and Scaling https://www.youtube.com/watch?v=YyIQKBzIuBY

Meta

• REST https://restfulapi.net/rest-architectural-constraints/

• udacity code style guides HTML CSS JS & Git (js basically compressed google version) https://udacity.github.io/frontend-nanodegree-styleguide/

• google javascript style guide https://google.github.io/styleguide/jsguide.html

• linux kernel style guide https://www.kernel.org/doc/html/v4.10/process/coding-style.html

• frontend developer skills checklist https://1onjea25cyhx3uvxgs4vu325-wpengine.netdna-ssl.com/wp-content/uploads/2014/12/UdacityUltimateSkillsChecklistforYourFirstFrontEndDeveloperJob.pdf

• frontend developer handbook 2018 https://frontendmasters.com/books/front-end-handbook/2018/

• gdpr summary for developers https://techblog.bozho.net/gdpr-practical-guide-developers/

• help to choose your mv' framework (to-do list built in each modern framework to compare) http://todomvc.com/

• Big O Cheatsheet http://bigocheatsheet.com/

• Recap of 2018 https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2018-715724c9441d

• Sencha's Description of MVC and MVVM https://docs.sencha.com/extjs/6.0.2/guides/application_architecture/application_architecture.html

• Linear Algebra for game devs http://blog.wolfire.com/2009/07/linear-algebra-for-game-developers-part-1/

• floating point arithmetic https://docs.python.org/3/tutorial/floatingpoint.html

• find the cost of adding a npm package to your bundle https://bundlephobia.com/

• view npm dependencies as a graph http://npm-dependencies.com/

• serverless (faas) overview/comparison https://fauna.com/blog/comparison-faas-providers

Cheat Sheets

• es 6 https://devhints.io/es6

• es mixed https://htmlcheatsheet.com/js/

• es3 http://overapi.com/javascript

• regex https://www.debuggex.com/cheatsheet/regex/javascript

• react https://devhints.io/react

• flexbox https://yoksel.github.io/flex-cheatsheet/

• sass https://devhints.io/sass

• graphQL https://raw.githubusercontent.com/sogko/graphql-shorthand-notation-cheat-sheet/master/graphql-shorthand-notation-cheat-sheet.png

Security

• check if your email adress has been found in data of a known databreach https://haveibeenpwned.com

• secure password manager https://1password.com

Wat

• https://www.emojicode.org/docs/reference/controlflow.html
• http://www.jsfuck.com/
• https://slikts.github.io/js-equality-game/
• http://seoi.net/penint/
• https://github.com/EnterpriseQualityCoding/FizzBuzzEnterpriseEdition
• https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

GitHub

• markdown syntax cheat sheet https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf

• markdown documentation https://help.github.com/articles/getting-started-with-writing-and-formatting-on-github/

• markdown viewer https://dillinger.io/

• emoji cheat sheet https://gist.github.com/roachhd/1f029bd4b50b8a524f3c

Design

Design Blogs & Inspiration

• web design project feed on behance https://www.behance.net/search?field=102

• web design trends & awards https://www.awwwards.com/

• user interface design detailed projects https://medium.com/refactoring-ui

• user interface design examples https://www.pages.xyz/

Design Philosophy & Guidelines

• pixel precision design guidelines http://cdn.ustwo.com/PPP/PP3.pdf

• google design philosophy & guidelines https://material.io/

• google visual assets guidelines https://www.behance.net/gallery/9028077/google-visual-assets-guidelines-part-1 https://www.behance.net/gallery/9084309/Google-Visual-Assets-Guidelines-Part-2

Lorem Ipsum Generators

• pictures! https://picsum.photos/

• Samuel L. Jackson http://slipsum.com/

• meat https://baconipsum.com

• star trek http://www.rikeripsum.com

Colors

• advanced color picker https://color.adobe.com/

• color palettes inspiration http://colorpalettes.net/

Tools

• gear generator https://geargenerator.com/

• remove background of image without fiddeling in photoshop https://www.remove.bg/

Royalte Free Pictures

• https://gratisography.com/

Ideas

• https://medium.com/@cassierobinson/a-user-manual-for-me-d3a851fbc694
• make data generator into extra repository
• use this https://labs.spotify.com/2018/03/02/introducing-coordinator-a-new-open-source-project-made-at-spotify-to-inject-some-whimsy-into-data-visualizations/
• https://jsonresume.org/schema/

Web Design Inspiration

• https://www.musikblog.de/label/zwei-bernds-tanken-super/
• https://s.baku89.com/ui/
• https://freebiesupply.com/blog/404-page-templates/

Fun Stuff

• https://geoguessr.com/
• https://github.com/elyase/awesome-gpt3

Try out

• Graph QL
• D3
• CSS Grid
• Express
• React Native
• Typescript
• https://www.youtube.com/watch?v=Anq_N_SY17o

To Do

• skillshots landing plus logo
• pxmaker bugs
• infinite scroller bike game
• data generator
• not supported seite für bardcodeCameraScan
• circular-code.com
• circular-design.com fertig
• ordentliche regions color extension für vscode
• which key (+details) is the given keycode (extending wes bos keycode.info)