thiscodeWorks - Saving, organizing & sharing the best of code online

Snippets Collections

Recent | Popular

List view

RatioBuddy - Aspect ratio calculator

https://ratiobuddy.com/

SVGOMG - SVGO's Missing GUI

https://jakearchibald.github.io/svgomg/

Hooks Cheatsheet

https://react-hooks-cheatsheet.com/

https://react-tutorial.app/pay.html

Learn to Code with Interactive Tutorials - Scrimba.com

https://scrimba.com/

https://picsum.photos/

https://nicklusk.com/javascript-api-return-json-display.html

SVG Sprite Creation

https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/

The Sass Ampersand

https://css-tricks.com/the-sass-ampersand/

color contrast check

https://snook.ca/technical/colour_contrast/colour.html

WebAIM: Contrast Checker

https://webaim.org/resources/contrastchecker/

WCAG - Contrast Checker

https://contrastchecker.com/

The W3C Markup Validation

https://validator.w3.org/

https://www.sitepoint.com/tips-accessible-svg/

The W3C Markup Validation Service

https://validator.w3.org/

WCAG - Contrast Checker

https://contrastchecker.com/

PageSpeed Insights

https://pagespeed.web.dev/

https://web.dev/font-display/?utm_source

Inspect network activity - Chrome Developers

https://developer.chrome.com/docs/devtools/network/

Prevent image layout shifts with padding hack | charisTheo.io

https://www.charistheo.io/blog/2021/06/prevent-image-layout-shifts-with-padding-hack/

Always Set a Width and Height on Your Images | Aleksandr Hovhannisyan

https://www.aleksandrhovhannisyan.com/blog/setting-width-and-height-on-images/

Aspect Ratio Boxes | CSS-Tricks - CSS-Tricks

https://css-tricks.com/aspect-ratio-boxes/

https://app.logrocket.com/ztfojk/portfolio

Testing Overview – React

https://reactjs.org/docs/testing.html

https://reactjs.org/docs/optimizing-performance.html

Awwwards - Website Awards - Best Web Design Trends

https://www.awwwards.com/

Fixing your NPM Installation

https://hackersandslackers.com/fixing-your-npm-installation/

npm -g install <npm_package>not working as desired. Why ?? Why ?? Why?? | by Jagatjyoti G Tuladhar | Medium

https://medium.com/@jagatjyoti.1si13cs040/npm-g-install-npm-package-not-working-as-desired-why-why-why-19795abf0b59

zsh: command not found: gulp - Stack Overflow

https://stackoverflow.com/questions/29817857/zsh-command-not-found-gulp

Clippy — CSS clip-path maker

https://bennettfeely.com/clippy/

Animating Between Views in React | CSS-Tricks - CSS-Tricks

https://css-tricks.com/animating-between-views-in-react/

Staggered CSS Transitions | CSS-Tricks - CSS-Tricks

https://css-tricks.com/staggered-css-transitions/

Javascript Scroll Animation Tutorial | GSAP and ScrollMagic Tutorial - YouTube

https://www.youtube.com/watch?v

Awesome Full Page Scroll Effect Tutorial! - YouTube

https://www.youtube.com/watch?v

Building an Animated Counter with React and CSS - DEV Community

https://dev.to/cooljasonmelton/building-an-animated-counter-with-react-and-css-59ee

Animatable: One property, two values, endless possibilities

https://projects.verou.me/animatable/

Animate When Element is In-View with Framer Motion | by Chad Murobayashi | JavaScript in Plain English

https://javascript.plainenglish.io/animate-when-element-is-in-view-with-framer-motion-63b254403bf

Handling Scroll Based Animation in React (2-ways) - Ryosuke

https://whoisryosuke.com/blog/2020/handling-scroll-based-animations-in-react/

react-animate-on-scroll - npm

https://www.npmjs.com/package/react-animate-on-scroll

An Explanation of How the Intersection Observer Watches | CSS-Tricks - CSS-Tricks

https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/

Bring Life to Your Website | Parallax Scrolling using React and CSS - YouTube

https://www.youtube.com/watch?v

Fade and scroll items into view while scrolling - YouTube

https://www.youtube.com/watch?v

react-cool-inview: React hook to monitor an element enters or leaves the viewport (or another element) - DEV Community

https://dev.to/wellyshen/introducing-react-cool-inview-react-hook-to-monitor-an-element-enters-or-leaves-the-viewport-or-another-element-117o

Animate SVG with CSS — Jonathan Suh

https://jonsuh.com/blog/animate-svg-with-css/

Need for Speed 2: Improving Front-End Performance — Jonathan Suh

https://jonsuh.com/blog/need-for-speed-2/

A Practical Guide to SVGs on the web

https://svgontheweb.com/

CSS { In Real Life } | A Modern Front End Workflow: Part 1: Building a Project Starter with NPM Scripts

https://css-irl.info/a-modern-front-end-workflow-part-1/

Why npm Scripts? | CSS-Tricks - CSS-Tricks

https://css-tricks.com/why-npm-scripts/

package.json file

https://gist.github.com/loganpowell/026bcb6bf52f0ea97e73470d3447bf44

Accessibility - Awesome Learning

https://wayfair.github.io/awesome-learning/courses/Accessibility/

Save snippets that work with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension