Skip to content

utils-web-dev.md

Latest commit

 

History

History
821 lines (683 loc) · 33.1 KB

utils-web-dev.md

File metadata and controls

821 lines (683 loc) · 33.1 KB

Web-Style-Guide

TABLE OF CONTENTS

SUMMARY

ONLINE IDE

ONLINE EDITOR

CHECK / CHECKLIST / ANALYZE

OPTIMIZATION

STARTER

TEMPLATES

COURSES

ENGINE

TOOLS: LIST

TOOLS: CODE

TOOLS: SVG

TOOLS: CSS

TOOLS: IMAGE

TOOLS: PROTOTYPING

TOOLS: DESIGN

TOOLS: PAYING

TOOLS: PRODUCTION

TOOLS: RECORDER / REPLAY

TOOLS: ANALYSIS

AWESOME

BEST

PLUGINS

DEBUG

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

PROPOSAL

https://github.com/jasnell/new-streams

DEBUG

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

LIB

WEBCOMPONENTS / LEARN COMPONENTS

WEBCOMPONENTS / UI COMPONENTS

CWV

IOT

LIB

STARTER: BLOG

STARTER: WEB FRAMEWORK

STARTER: WEB / CMS

STARTER: SSG: ALL

STARTER: SSG: PORTFOLIO

STARTER: SSG: TOOLS

EMAIL TEMPLATE / MAILING LIST

OSS: SELF HOSTED / EMAIL TEMPLATE / MAILING LIST

CREATIVE TOOLS

CREATIVE EXAMPLES

CREATIVE RESOURCES

CREATIVE GRAINY / NOISY

CREATIVE COURSES

CREATIVE SPEC

TRAINING