Toolbox
@Media Queries - A tool for live CSS media query which displays results for the current browser.Check GZIP compression - A simple tool for checking if GZIP compression is enabled or not.
Clippy - Clippy is a handy CSS clip-path tool that helps make working with clip-path shapes easier.
CodePen - CodePen is a playground for the front end side of the web. It's all about inspiration, education, and sharing. A great place for UI references and daily doses of code experiments.
Compressor.io - Compressor.io is a powerful online tool for reducing drastically the size of your images and photos whilst maintaining a high quality with almost no difference before and after compression.
Conditionizr - Conditionizr is a standalone JavaScript tool that detects front-end environments and returns an Object with boolean values on given test states.
CSS Specificity Graph Generator - A nice and simple tool that allows you to generate interactive specificity graphs for your CSS.
CSS Stats - A useful webapp for visualizing various stats about your css, or viewing stats for various popular sites and frameworks.
Enquire.js - Enquire.js is a lightweight, pure JavaScript library for responding to CSS media queries.
Easings.net - Easings.net is a great tool for visualizing CSS Easing functions.
HTML Arrows - A clean and colorful place for all the html symbol codes we could never seem to remember.
Icomoon - Icomoon is an icon management tool for building and using SVG/PNG iconography.
ImageOptim - ImageOptim is a free app that makes images take up less disk space and load faster, without sacrificing quality. It optimizes compression parameters, removes junk metadata and unnecessary color profiles.
Improving Your CSS with Parker - A guide to using Parker, a simple static analysis tool that gives you some very insightful metrics about your CSS files.
ManifeStation - A tool for generating W3C Web App Manifest automagically from its existing HTML.
MyDevice.io - A simple online tool that displays information about your current device, including screen information, browser features, user agent string, and more.
Nth-Test - A simple tool for testing nth-child and nth-of-type that displays the results as you type.
Performance Budget Builder - An awesome tool for defining performance budgets by Brad Frost. Lay out your template types, set a size budget for each template type, then plug in the sizes for each asset category that will load in the template.
Pattern Lab by Brad Frost - A collection of tools to help you create atomic design systems, a methodology in which design is contructed as a system of components that work together to form a whole. Perfectly suited for our complex device landscape.
Placehold.it - A helpful tool for placeholder images. Just put your image size after our URL and you'll get a placeholder.
PWA Builder - All the tools you need to build and deploy your Progressive Web Apps.
RegExr - An incredibly handy online tool to learn, build, & test regular expressions, with plenty of additional features to make testing regular expressions fun.
Responsive Image Breakpoints Generator - A tool that allows you to easily generate best matching breakpoints for each uploaded image.
Sache - A great tool for finding Sass & Compass extensions for your project.
TestMyCSS - A helpful tool for testing CSS selectors by complexity and performance.
Transfonter - Modern and simple css @font-face generator.
Unheap - A jQuery plugin repository that provides a better experience for browsing & staying on top of the latest jQuery plugins.
You Might Not Need jQuery Plugins - An excellent tool for finding dependency-free Javascript plugins.
No comments:
Post a Comment