I have created a lot of tools to help me in my work!
SpeedTest is a utility that allows you to load a website, and if you're using a computer you can use the keyboard keys 1-0 to resize the loaded website to different widths very fast. If you're on mobile you can change the width of the page you're viewing to do responsive web testing on devices with fixed screen widths. For ease of use, you can also load sites by appending them as a querystring, so I also have a bookmarklet that, when I'm viewing any page, will open the current page in SpeedTest
Inspector Gadget This lets you load any website, CSS, or JS file and it will display the source code in a clean, syntax-highlighted way right in your browser. Desktop web browsers all include View Source and Inspect Element, but mobile browsers don't have anything like this. You can load files by appending them to the URL, so I also have a bookmarklet that when I tap it, displays the source code of the currently loaded page.
Base64 encode tool created using JavaScript. Before this I was using OpenSSL which required me to be on a computer - now I can easily base64 encode files using a web browser - even on a tablet or phone.
Eyedropper tool that lets me upload any image and quickly grab the RGBA values of pixels in the image.
Text Case Changer is useful because although CSS can do text-transform: uppercase and text-transform: lowercase, there's no CSS-only way to convert a string of text to Title case (each word's initial letter capitalized), so a conversion tool like this is needed.
Memopad is a simple notepad that saves your text to localStorage. Especially when I'm on mobile (iPad, or other tablets) I prefer to code in this tool in one browser tab, and then load my work via a data URL in another tab. You can copy any HTML and preface it with data:text/html, and paste it into the address bar of a new tab and it will load the HTML, even though it's not saved to a file! Very handy.
EQCSS is a JavaScript plugin that extends CSS to include scoped styles, element queries, new selectors (like parent, and prev), adds the ability to run JavaScript from CSS, and introduces new CSS units. Having this extra versatility has allowed us more than anything else to build in a modular way, as well as an easy way to isolate and transplant existing code into new codebases. It's also proven useful for researching and prototyping solutions for things that eventually become pure JavaScript solutions.
Aspect Ratio (WIP) with a demo page here is a way to write CSS that's aware of aspect ratios with a new (non-standard) property called -eq-aspect-ratio. It's still a work in progress but will replace other existing solutions with a cleaner syntax in the near future, so I'm very happy to have this working even as far as it is at the moment!
Matching height allows us to create elements with an equal height to each other using pure JavaScript in browsers that don't support flexbox. We wrote this once and have gotten a lot of re-use out of this.
Simple modals is probably our most re-used snippet. Paired with some very simple HTML this will create modals you can add to any website, easy to style, and easy to manipulate from JavaScript as well. This has saved so much time over using things like Bootstrap for modals. Test page here.
Simple Swipe Gestures with a test page here is a pure JavaScript way to detect one-finger swipes up, down, left or right using a touchscreen. Tested on iOS, Android, and Windows.
CSS button styles with a test page here are a set of CSS-only button styles that are easy to extend to new colors and styles.
CSS + JS Tooltips with a test page here have been a solution we've added to a few different places in lieu of bringing in a larger framework or plugin to do the same thing.
Persisting Data with a demo here is a really simple way to allow things like form fields to back up their contents to localStorage with the addition of a data-persist="" attribute and value on any tag.
Dragon.js with a demo here is a bookmarklet that, when run on any page, will allow you to click/tap to drag any element around. This is really useful in design reviews, or if you need to move items on a page around to take a screenshot and show a developer what the website should look like. Without a tool like this, most people Photoshop a screenshot of the website to mock up changes. This makes it fast, intuitive, and the end result usually looks better too!
ExtStyler is a chrome extension that allows developers to load local CSS and JS files into websites they visit. Using this tool if a prospective client talks to me about what I can do to improve their website, even if I don't have write access to their website I can load it up in my browser, apply fixes in my own files, show them what I can do, and at that point if they want it it's very easy to take the code I've written and work it into their codebase. Yes I have used this to find work before :D
Amazon-like reviews a CSS snippet that creates Amazon-like reviews for when you want to display testimonials based on Amazon comments on your own site.
Check all button for forms where you have multiple checkboxes and want to make it simple for the user to check or uncheck all.
Prefill date input so today's date is present.
Pretty JS timestamp grab the current date and time and format it in a nice string like: “Wednesday November 30th, 9:43 am”
Block autofocus for touchscreen users so when they first load a page with an autofocused form field they aren't greeted by their keyboard covering the bottom half of the screen. Leaves the autofocus attribute for non-touchscreen users though.
Pure CSS Select box so I don't have to rely on tools like select2 to skin my select boxes to look like my forms.
Counting years using JavaScript with a nice intuitive syntax. Create any element with data-since="" the year something began and it will fill that element with the number of years since then. I use this on websites and my own résumé so I don't have to go back every year and bump the numbers up by 1.
Super-responsive testimonials block is a snippet I get re-use out of. It goes from 1 stacked, 1 alternating, 2-1-1 stacked, to 3-2-3 stacked, depending on how much room is available.
Canvas Favicons are fun to use because you can draw simple shapes using JavaScript. Sometimes instead of just designing the icons in canvas I won't even save the image, I'll just include the JS code that draws the image on the page I'm building! It's great being able to version-control icons like this!
Basic CSS themes in a few different styles. I've created hundreds of demos and pages using this stylesheet, and more than a handful child themes which extend the original styles to match different branding.
showtree is an alias that will display a graphical representation of all your Git branches (just like a GUI app).
git log --all --graph --decorate --oneline --simplify-by-decoration
lines will display the number of lines of uncommitted code changed today
git diff --shortstat "@{0 day ago}"
showdisk will display a printout of all files and folders, with human-readable filesizes, sorted largest-to-smallest. This is really helpful for quickly finding out what folders or files are taking up space (similar to WinDirStat or DaisyDisk, but on the command-line)
du -sh * | sort -hr