Useful tools for creating and managing front-end and backend stuff

Color Oracle

Color Oracle is a free color blindness simulator for Window, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.


The package and dependency-manager for PHP. More information and documentation can be found on and packages can be browsed and added at Packagist.


Projects for generating documentation:


Fontplop is an OSX/macOS application which takes ttf and otf files and outputs a webfont bundle: woff2, woff, tff, svg, and eot. It is the simpler, faster, free successor to FontPrep, which is no longer maintained.


Version Control System, VCS in short, Git is used for controlling versions and different branches of development. This way you can manage your versions and can go back in time, also work on your project easily with multiple developers without conflicts.

Git is widely supported in the development world. If you need a Git server/cloud service check out GitHub, commonly used for open source projects. BitBucket is also a cloud service, but has free unlimited private respositories. Of course it's also possible to run your own server (see GitLab below).

A nice way to work with git is the Git Flow approach. Which is also integrated in SourceTree, a Git GUI for OS X. Want to practice your git commandline skills? Github and CodeSchool made a nice webapp to do this: Try Git in 15 Minutes. Want to know more? Read this: git - the simple guide. When you've got the basics, read Git Best Practices.

For creating a secure connection you'll need to generate a SSH key, GitHub has a nice article about it: Generating SSH Keys


A self hosted version of GitHub, commercial and community licences are available. To get started read How to Setup GitLab on Scotch.


An open-source screen recorder built with web technology.

MAMP - Local development

Combine Mac OS X with Apache, MySQL and PHP and you'll have MAMP. There is an application with all-in-one, called MAMP. Bitnami has some stacks available too. I prefer to install and manage it myself using these:


A simple and beautiful wiki for teams. People use it to store documentation, notes, culture guidelines, employee onboarding content and everything they want to. Build upon React.js with Node.js and Sqlite3 as back-end.


Node is a fast and light-weight JavaScript application platform. Build on Google's V8 JavaScript engine, used in Chrome/Chromium. The package and dependency-manager for node is npm.

Update npm/node

You can update npm like this:

npm install npm -g

When you have problems with lockfiles afterwards. You can solve this by resetting the file owner (see topic on stackoverflow). Which you can do like this:

sudo chown -R `whoami\` ~/.npm

For node you'll have to do a little bit more:

sudo npm cache clean -f
sudo npm install -g n
sudo n stable


Open-source web analytics tool, online and app for mobile! Try it out, it even has an auto-updater.


Vector based application for designing digital media, with all kinds nice features. Including an easy assets export. The software is available on the App Store for $79, a trial version is available on their website.

Also try Sketch Toolbox, which is a super simple plugin manager for Sketch. With Runner you can speed up your workflow, read more about it on medium. Introducing Auto-layout for Sketch shows you how the Auto-layout plugin makes it easy to resize layouts.

  • Blender, a blend tool for Sketch.
  • 7 Columns Calendar Creator allows you to generate a 7 Columns Calendar for any month.
  • Chain create dynamic color relations in Sketch.
  • The plugin User Flows helps you with generating flow diagrams from Artboards.
  • Chart creates the most popular types of charts by real or random data
  • Confetti - Generate gorgeous confetti patterns in 1 click
  • FontRapid - Design and create fonts directly in Sketch
  • Gifme plays gifs and videos inside the sketch app while you're designing
  • UX Flow a flowchart kit for Sketch.
  • Lists, gallery of real data ready to be placed in your design.
  • Midnight dark theme sketch plugin
  • turns Sketch designs into working prototypes, fast.
  • Mockuuups Studio turns Sketch artboards unto perspective mockups, real-time.
  • Slinky export your Sketch designs as HTML email templates.
  • Sketch2AE - Live After Effects layers straight from Sketch artboards
  • Sketch Cache Cleaner - Deletes hidden Sketch history files that can take a lot of space
  • Sketch Cleaner - Plugin that helps you get your design files as clean as a whistle
  • Sketch for Designers a growing collection of the best Sketch resources
  • Sketch Emmet gets Emmet HTML abbreviations based on layers structure and naming
  • Sketch Material is a sketch plugin that will help you generate complex material components like tables, chips, forms etc…
  • React, render React components to Sketch; tailor-made for design systems.
  • Stark is a color-blind simulator and contrast checker for Sketch. Design with accessibility in mind.
  • Wireframe Prototyping System, plan your project navigation, for your mobile and web projects.

Sublime Text and code editors in general

A lightning fast extendable and customizable text-editor. Nice alternatives are which looks alot like Sublime Text, but is open-source and has a CLI and Git intergration (also check out Seti UI). Adobe funded Brackets which is also open-source and is completely build in JavaScript. Commonly used paid editors are Coda and BBEdit.




  • Switching files: CMD+P
  • Commands: CMD+SHIFT+P
  • Switching projects: CMD+CTRL+P
  • Find and multi-edit: CMD+F and after entering the keyword(s) use ALT+RETURN
  • More Sublime Text shortcuts

My settings:

    "bold_folder_labels": true,
    "color_scheme": "Packages/Theme - Flatland/Flatland Monokai.tmTheme",
    "flatland_square_tabs": true,
    "font_size": 12.0,
    "scroll_past_end": true,
    "theme": "Flatland Dark.sublime-theme"


SQLPad is a self-hosted web app for writing and running SQL queries and visualizing the results. Its goal is to be a simple tool for exploratory data work and visualizations, ideal for data analysts who would prefer to work in SQL.

SQLPad is meant to be run on an internal network for a single team. All connections added to the app can be used by all individuals with access to the SQLPad server. All queries written can be run and edited by everyone on the server.

Typographic Supply

A great inventory of typographic tools, from font identifiers, online calculation and grid tools, javascript and css libraries to making typfaces.


A dependency manager for javascript. It is compatible with the npm package manager, and also can install bower packages. Although a slight different featuresset including lockfiles, checksums, flat mode and offline caching.


Front-end Tools

Browser plugins

Online Tools


HTML5 Animation

  • Adobe Edge - Create HTML5 animations in a Flash kinda interface
  • Google Web Designer - Create HTML5 animations in a Flash kinda interface
  • Keyshape - Create animations for the Web
  • SVG Animation Tools - A simple set of python functions to help working with animated SVGs exported from Illustrator


  • ButtCapper - The stroke cap selector Adobe kinda forgot
  • Duik - The comprehensive rigging and animation tool set for After Effects
  • Inspector Spacetime - Inject motion specs into reference video to become an engineer’s best friend
  • RubberHose 2 - Animation rigging for everyone
  • Sketch2AE - Live After Effects layers straight from Sketch artboards

Graphic Applications (open-source)


  • Captain - Manage Docker containers, instantly from the menu bar.
  • DBeaver - Free Universal Database Tool.
  • Macify - rom web to macOS, onvert webapps to native macOS apps with ease.
  • Tad - A better way to view & analyze data.
  • tlapse - create a timelapse of your web development.

I also like to use...