This month we've got a collection of handy utilities that help you to do things in smarter ways: better forms; better select boxes; better social media sharing buttons that don't have annoying behaviours such as tracking the user. There's a service worker that improves caching by only downloading changes instead of the whole file, and a tool for handling user generated content on static sites. Enjoy!
01. Visual Studio Code (opens in new tab)
People are saying good things about this free, open source code editor from Microsoft that has a slew of great features that make coding quicker. There’s a function called IntelliSense that provides smart completions; built-in Git commands; debugging from within the editor and much more.
02. WTF, forms? (opens in new tab)
Bootstrap creator Mark Otto has made these friendlier HTML form controls to make it easier to build forms the way you want them. Designed for IE9+ and the latest Chrome, Safari and Firefox.
People usually use a third-party service to run things like commenting systems on static sites, but there’s another way. Staticman transforms user generated content into data files that are hosted in your GitHub repository with the rest of your content, so everything is in one place. Works well with Jekyll sites hosted on GitHub Pages.
04. Kubist (opens in new tab)
This neat web app uses d3.js to transform images into tessellated triangles. If you’re interested in creative coding, this blog post (opens in new tab) provides some background about the methods used.
05. Choices (opens in new tab)
Choices is a select box and text input plugin that’s lightweight (around 15kb gzipped), customisable and has no jQuery dependency. There’s configurable sorting, flexible styling, fast search/filtering, a clean API and right-to-left support.
06. Sharingbuttons.io (opens in new tab)
07. sw-delta (opens in new tab)
Here’s a really great service worker to help with continuous delivery. Without it, every time a file is changed – even if the change is only one letter – the whole new version gets downloaded, wasting bandwidth and hurting performance. sw-delta compares the new version with the cached version and makes the browser download only the changes instead of the whole file. The creator says it isn’t production ready yet, but if you think this could be of use to you it’s a great project to jump on board with.
08. ShiftJS (opens in new tab)
09. SVG Porn (opens in new tab)
Don’t worry; it’s not porn made of SVG. This site has around 800 high quality logos done in SVG for lots of different services, available for your use.
10. Jekyll Compress (opens in new tab)
This Jekyll layout compresses HTML by removing whitespace and any other unnecessary elements. It is written in Liquid (opens in new tab), the open-source templating language created by ecommerce platform Shopify.