Resources for Devs: Frontend Tools

An updated collection of useful resources that I use (almost) regularly.

CSS

• CSS Cheat Sheet

• CSS Validator

• Autoprefixer CSS: a PostCSS plugin which parses your CSS and adds vendor prefixes.

• SVG Path Visualizer

Animations

• Keyframes: generate CSS animations and more.

• Animista: playground with a collection of CSS animations.

• Animate.css: a library of ready-to-use, cross-browser animations for use in your web projects.

Layouts Snippets

• CSS Layout: a collection of popular layouts and patterns made with CSS.

• CodeMyUI: web design & UI Inspiration with code snippets.

Test & Find

• Can I Use: provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

• Regex 101: regex tester.

• Build with Flexbox: flexbox playground.

• Explain Shell: write down a command-line to see the help text that matches each argument.

• Unicode Character Table: Unicode Character Table.

• VSCode Cheat Sheet

Performance

• Progessive Tooling: a list of community-built, third-party tools that can be used to improve page performance

Privacy and Legal

• TLDR Legal: lookup popular software license in plain English.

• Iubenda: generate documents to make your website or app compliant with the law, across multiple languages and legislations

• Blacklight: a real-time website privacy inspector that reveal the specific user-tracking technologies on the site—and who’s getting your data.

Bonus: Interesting Projects

• Skaffolder: create fully working prototype applications in minutes.

• Mermaid JS: diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams.

• Percollate: a command-line tool that turns web pages into beautifully formatted PDF, EPUB, or HTML files.

• Templatemaker: custom sized papercraft and packaging templates for free.

• 1ty: one-time self-destructing links for sharing sensitive information.