Here are five useful utilities and tools from our dev team that make it hard to distinguish between developer and ninja:
1. Ponyfill for “CSS Custom Properties” support in older browsers Don’t wait to use CSS Custom properties. Use this css-vars-ponyfill to support older browsers so you can enjoy the sweet magic of CSS custom properties while still hitting your minimum browser target!
2. “SVG Inject” to automatically inline SVGs into your document SVGs are amazing. They open up a whole new world of flexibility for design on the web. However, they really only reach their full potential when they’re inlined into your document. This can leave your markup messy and hard to read.
This little utility allows you to add SVGs to your document as if they were normal images and won’t break the flow of your markup. Once the page loads the utility runs and all of your SVGs will be inlined and ready to modify in real-time with JavaScript and CSS!
3. “Wave” browser extension to save yourself from ADA compliance headaches There’s nothing worse than finishing up a website project just to realize you have ADA compliance issues to resolve. Save yourself the trouble and install the Wave browser extension and run it often. This handy tool will open a dashboard to the left of your content with a list of all of ADA compliance errors and warnings so you can catch and fix them early on!
4. Tiny PNG Image Compression will decrease your site’s payload and increase its speed There are a ton of image compression tools out there, but this one has remained a favorite of our dev manager Georgi for years. Recently it has gotten even better with extensions and plugins for popular platforms like WordPress in addition to its tried and tested web interface. The compression algorithm is fantastic and its stupid simple to use. Give it a try!
5. Browserstack for cross browser compatibility testing Cross-browser testing is a sticking point for every front-end developer. Without emulation or virtual machines, it is impossible to test every browser on a single system. MacOS has Safari but no IE. Windows has IE and Edge but no modern Safari. In addition to the obvious omissions, there are even subtle differences between the same browsers running on different platforms. Browserstack allows you to test almost any browser under almost any platform. They even have a new screenshot tool to streamline the initial QA process. If you find any issues you can easily dig into a debugging session in any particular browser with their web interface.
