Skip to content

Latest commit

 

History

History
646 lines (559 loc) · 25.3 KB

utils-web-dev.md

File metadata and controls

646 lines (559 loc) · 25.3 KB

Table of Contents generated with DocToc

Web-Style-Guide

SUMMARY

ONLINE IDE

ONLINE EDITOR

CHECK / CHECKLIST

OPTIMIZATION

STARTER

TEMPLATES

COURSES

TOOLS: LIST

TOOLS: CODE

TOOLS: SVG

TOOLS: CSS

TOOLS: IMAGE

TOOLS: PROTOTYPING

TOOLS: DESIGN

TOOLS: PAYING

TOOLS: PRODUCTION

AWESOME

BEST

PLUGINS

DEBUG

https://css-tricks.com/debugging-tips-tricks https://www.youtube.com/watch?v=xkzDaKwinA8 14 Must Know Chrome Dev Tools Tricks (chrome debug tools ) https://medium.freecodecamp.com/10-tips-to-maximize-your-javascript-debugging-experience-b69a75859329#.o1mbuv4hn https://codeburst.io/learn-how-to-debug-javascript-with-chrome-devtools-9514c58479db

NPM

tricks : https://nodesource.com/blog/eleven-npm-tricks-that-will-knock-your-wombat-socks-off tips : https://hackernoon.com/19-things-i-learnt-reading-the-nodejs-docs-8a2dcc7f307f#.v1jfn4pb5 bad practices : https://www.youtube.com/watch?v=pGFQ02qtJ7w

AMP

https://validator.ampproject.org https://www.ampproject.org https://github.com/Lullabot/amp-library

DEBUG

console. https://developers.google.com/web/tools/chrome-devtools/console/console-write

IMAGE

background : https://css-tricks.com/the-blur-up-technique-for-loading-background-images performance : http://csswizardry.com/2016/10/improving-perceived-performance-with-multiple-background-images responsive : https://blog.uploadcare.com/5-steps-to-better-responsive-images-d7cf91e261f4#.f0zcv3ttb responsive cloud : https://ponyfoo.com/articles/make-all-images-on-your-website-responsive-in-3-easy-steps image lazy : http://krasimirtsonev.com/blog/article/lazy-load-your-images-with-coloor alt image : https://bitsofco.de/alternative-text-and-images optimize gif https://bitsofco.de/optimising-gifs/

VARIOUS CSS/JS/HTML/EFFECT UX

examples: https://github.com/bradtraversy/vanillawebprojects best lib : https://hackernoon.com/10-javascript-animation-libraries-to-follow-in-2018-50ff1d905f43 waypoint animation : http://www.oxygenna.com/tutorials/scroll-animations-using-waypoints-js-animate-css
parallax animation : http://pixelcog.github.io/parallax.js/
parallax animation : https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
header animation : http://tympanus.net/codrops/2013/06/06/on-scroll-animated-header/
scrollsnap polyfill : https://github.com/ckrack/scrollsnap-polyfill
parallax : https://developers.google.com/web/updates/2016/12/performant-parallaxing non rectangular header : https://css-tricks.com/creating-non-rectangular-headers/ barba js : http://barbajs.org/demos.html barba js : https://github.com/luruke/barba.js

COMMENTS

habits : http://www.sitepoint.com/how-good-are-your-html-and-css-comments

CANVAS

inspiration https://www.dwitter.net/ particle : https://github.com/jnicol/particleground particles : http://lab.hakim.se/particles/01/ particles: http://lab.hakim.se/particles/02/ paticles : http://spielzeugz.de/html5/liquid-particles/

CSS

base rules : https://www.w3schools.com/cssref/css_selectors.asp base rules : http://taha-sh.com/blog/8-tips-to-write-css-you-wont-hate
base rules : https://github.com/jareware/css-architecture base rules : http://bradfrost.com/blog/post/css-architecture-for-design-systems/ base rules : https://sgom.es/posts/2017-02-10-bridging-css-and-js-with-custom-properties base rules : http://ryanogles.by/css/javascript/2017/05/25/the-state-of-css.html class organization : https://css-tricks.com/bem-101/
grid : https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228 grid : https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431 grid : https://24ways.org/2017/design-systems-and-css-grid grid : http://www.creativebloq.com/features/css-grid-layout-secrets-revealed grid : https://medium.freecodecamp.org/how-to-recreate-mediums-article-layout-with-css-grid-b4608792bad1 buttons : http://blog.dynamicdrive.com/popular-css-button-hover-effects-explained flexbox: https://flexboxfroggy.com/#fr flexbox : http://www.flexboxpatterns.com/home flexbox : https://medium.freecodecamp.com/css-flexbox-explained-by-road-tripping-across-the-country-1217b69c390e#.nkwq5jn7k flexbox : https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/ flexbox : https://medium.freecodecamp.com/even-more-about-how-flexbox-works-explained-in-big-colorful-animated-gifs-a5a74812b053#.173x3ha3f textured gradients : http://rentafounder.com/textured-gradients-in-pure-css/
transition : https://daveceddia.com/css-transitions-explained
animation : https://stories.jotform.com/how-to-use-css-animations-like-a-pro-dfacc1e97338#.7miwowr5s regions : http://www.adobe.com/devnet/archive/html5/articles/css3-regions.html
stripes : https://css-tricks.com/stripes-css/
image filter : http://lukyvj.github.io/colofilter.css
image hover/caption : http://hasinhayder.github.io/ImageCaptionHoverAnimation/index4.html
image hover/caption : http://tympanus.net/Tutorials/OriginalHoverEffects/
image hover/caption : http://tympanus.net/Development/HoverEffectIdeas/
image hover/caption : http://tympanus.net/Tutorials/OriginalHoverEffects/index.html link hover : http://tympanus.net/codrops/2013/08/06/creative-link-effects/
block formatting context : https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context style generator : http://www.css3generator.com/
structure : https://medium.com/peergrade-io/structuring-css-in-large-projects-37f1695f5ec8#.gn9z2owsb utils : https://medium.com/@iamjordanlittle/9-underutilized-features-in-css-90ced6ddbfe7#.yq8fxsqf9 animation : https://www.sitepoint.com/achieve-60-fps-mobile-animations-with-css3 animation example : http://www.creativebloq.com/features/22-stunning-examples-of-css3-animation menu burger : https://scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css text effect : http://codepen.io/collection/DamKJW/ color : https://www.ascii-code.com/html-color-names.php

CSS PAGE TRANSITION

http://git.blivesta.com/animsition/ http://tympanus.net/Development/PageLoadingEffects/index6.html

CSS FRAMEWORK

2016 framework : http://dannyherran.com/2016/03/state-of-affairs-bootstrap-4-vs-foundation-6
flexbox : http://www.useful.ly/ milligram : https://milligram.github.io/ grid lib : https://github.com/FancyGrid/awesome-grid

CSS LAYOUT

modern : https://rachelandrew.co.uk/presentations/modern-css-layout
flexbox : https://www.caktusgroup.com/blog/2016/03/07/time-flexbox-first
flexbox : http://flexbox.io/

CSS PREPROCESSOR

pros : http://stylus-lang.com/
cons : http://www.456bereastreet.com/archive/201603/why_i_dont_use_css_preprocessors

CSS PRINT

https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-f1e6604cfd6#.66l1q2t6l

IMAGE

https://addyosmani.com/blog/lazy-loading/

SVG

generator : https://css-tricks.com/websites-generate-svg-patterns example : http://www.hongkiat.com/blog/svg-animations/ inner html : https://thenewcode.com/1151/Understanding-the-SVG-viewBox inner html : http://fvsch.com/code/svg-icons/how-to/
parallax image : http://www.sitepoint.com/parallax-burns-converting-photographs-2d-3d-svg/
animate svg : https://www.oreilly.com/learning/introduction-to-svg-animation animate svg : https://www.sitepoint.com/how-to-create-the-invisible-pen-effect-in-svg-using-vivus-js animate svg : https://medium.com/bitmatica-lab/svg-line-animation-for-the-uninitiated-5a65d91c6044#.ydo9a7u1l animate svg : https://css-tricks.com/svg-line-animation-works/ scale+viewbox : https://la-cascade.io/comprendre-svg-viewbox-et-viewport/ size+viewbox https://css-tricks.com/scale-svg/ interactive svg : http://tympanus.net/codrops/2013/02/06/interactive-infographic-with-svg-and-css-animations/ libs : http://mediatemple.net/blog/tips/svg-charting-libraries/ generator : https://github.com/carloscabo/svg-triangle-generator

SPRITE

generator : https://eliorshalev.github.io/sprite-spirit

FORM / HTML FORM

https://www.codeproject.com/Articles/1221189/Formidable-Forms-with-HTML

JAVASCRIPT

functions : https://bocoup.com/blog/the-many-faces-of-functions-in-javascript support : http://diveinto.html5doctor.com/detect.html standard : https://github.com/feross/standard format : https://github.com/prettier/prettier format: https://github.com/rohitdhas/shittier es2015 : https://hackernoon.com/why-you-shouldnt-use-var-anymore-f109a58b9b70#.x41dygjuv courses : https://psdtowp.net/learn-javascript.html
immutable : https://auth0.com/blog/2016/03/23/intro-to-immutable-js/
webpack tuto : http://arianv.com/post/Module-Bundling-and-Webpack-in-Simple-Terms/ webpack tuto : https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack async : https://blog.risingstack.com/node-js-async-best-practices-avoiding-callback-hell-node-js-at-scale/

JAVASCRIPT LIBS

HTML

input validation : http://webdesign.tutsplus.com/tutorials/how-to-make-floating-input-labels-with-html5-validation--cms-26120
html5 elements : http://www.html5accessibility.com/html5elements/
form elements : https://mobiforge.com/design-development/html5-mobile-web-forms-and-input-types figure elements : http://www.sitepoint.com/quick-tip-the-right-way-to-use-figure-and-figcaption-elements/
tags: https://localghost.dev/2021/06/the-right-tag-for-the-job-why-you-should-use-semantic-html/

EXPERIMENT

HTML AUDIO

emit/receive : https://github.com/quiet/quiet-js

FRAMEWORK

LIB

WEBCOMPONENTS / COMPONENTS

CWV

IOT

LIB

STARTER: BLOG

STARTER: WEB / CMS

STARTER: SSG

EMAIL TEMPLATE / MAILING LIST

OSS: SELF HOSTED / EMAIL TEMPLATE / MAILING LIST

CREATIVE TOOLS

CREATIVE EXAMPLES

CREATIVE RESOURCES

CREATIVE COURSES

CREATIVE SPEC

TRAINING