Everybody has their own set of essential web development tools. Here are a couple mine I thought I’d share. I might later add some more, as and when I find them.
Jquery to vanilla js
tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript
This is a good quick reference comparison of jquery and javascript. There may be a need for one or the other, depending on your circumstances, and I tend to forget the javascript equivalent. This article basically covers everything you need when working between the two. It’s true that, as per the article, that jquery is becoming less relevant as the new version of javascript (ES6) comes around the corner.
Edit: As a side note, I used to have a more comprehensive link for this, however that site has since gone offline. However, I did find it on web.archive.org so I might have to make a sneaky copy and make my own at a later date…
Aspect ratio calculator
andrew.hedges.name/experiments/aspect_ratio
I find myself using this a lot, and it works well for working out responsive image dimensions. Especially if you’re using different aspect ratios for different screen sizes.
WP query args cheat sheet
billerickson.net/code/wp_query-arguments
The wordpress query class is very powerful, but I can never remember all the arguments that it accepts. Because there’s a lot. This has all the potential parameters you could possibly need, complete with descriptions. On a related note, I also wrote about recommended WordPress plugins for new projects.
Sassmeister
This is the sass equivalent of codepen or js bin. Especially useful when you want to quickly test out/mess around with mixins, loops or other sass functions.
Character entities
Better than most character entity tools I’ve found, as it includes codes for css, html and javascript.
Placeholder.com
Everyone has their own preferred placeholder resource. I stick with this one, purely because of the customisation available, and it’s simplicity. The output of the image dimensions is especially handy for when it comes to creating assets. I don’t have to remember anything whilst coding, just the url and it’s dimensions.
Material icons cheat sheet
shanfan.github.io/material-icons-cheatsheet
I find this to be a lot more user friendly than the official material icons resource link. You can copy and paste, and get to what you need a lot faster. Arguably not one of my most essential web development tools, but it’s a very useful time saver if you’re using the material icons set within your framework.
Dropbox, but not for the obvious
One of the most powerful tools in my web developer toolkit is dropbox. However, I don’t use it to back up my files per-se. I use the screenshot feature. Whenever I ctrl+print screen, the screen is saved as a file in my dropbox folder. I can then share that file, or share a link to it when needed. The clipboard creates a quick link to the file, to make it instantly shareable and open to comments. Furthermore, if I use ctrl+alt+print screen it will take a screenshot cropped to the program window that’s currently open. This is especially useful if you’re working with things like windowed apps and you want to take a screenshot for a bug you can see.
Edit: Turns out Windows has a neat feature these days. Hold down windows/shift and press ‘S’. It’ll let you grab a screenshot, any size you want if you drag. Not tried this in conjunction with Dropbox. But if those clipboard items could then go into my Dropbox storage, then that’s pretty awesome…