Tools

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.

Composer

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

FontPrep

Open-source tool for OS X drag & drop webfont creation, with support for OTF and TTF files.

Git

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

GitLab

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

Kap

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:

Matterwiki

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.

npm/node

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

Piwik

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

Sketch

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.

  • The plugin User Flows helps you with generating flow diagrams from Artboards.
  • UX Flow a flowchart kit for Sketch.
  • Lists, gallery of real data ready to be placed in your design.
  • Mirr.io 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.
  • React Sketch.app, 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.

Sublime Text and code editors in general

A lightning fast extendable and customizable text-editor. Nice alternatives are Atom.io 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.

Plugins:

Themes:

Hotkeys:

  • 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,
    "folder_exclude_patterns":
    [
        ".sass-cache",
        "wp-admin",
        "wp-includes"
    ],
    "font_size": 12.0,
    "ignored_packages":
    [
        "Vintage"
    ],
    "scroll_past_end": true,
    "theme": "Flatland Dark.sublime-theme"
}

SQLPad

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.

Yarn

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.

Favicons

Front-end Tools

Browser plugins

Online Tools

HTML5 Animation Tools

Graphic Applications (open-source)

Misc.

  • Captain - Manage Docker containers, instantly from the menu bar.
  • 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...