Useful tools

2 minute read

For future reference, here is a bunch of tools/services I have used in the past.

Netlify is one of the best resources I can recommend for front end developers. This blog runs for free thanks to Jekyll, Minimal Mistakes and Netlify. Before Netlify, I was hosting this on GitHub Pages or Gitlab Pages and it was a lot of steps to setup a CDN, custom domain, configure SSL etc but Netlify is all of this rolled into one, for free!

Images

Videos

  • Free videos from coverr
  • Screen Capture - CamStudio. On a Mac, I just use the QuickTime video player that is already installed. This is my new favorite with features like highlighting mouse etc.
  • Virtual Reality video player for Oculus - Whirligig
  • Simple video editing - iMovie.

Audio

Icons

Task Management

Code Management

Code

Presentations

Editors

  • VS Code - switched to this when I started developing dot net core apps. Great support for most languages.
  • Sublime Text before VS Code

Flow Charts

  • Drawing simple flow charts and some other diagrams - mermaid. All the diagrams are built using a markdown like script that goes right into HTML.
  • Drawing flow charts in the browser with a GUI- draw.io. All diagrams can be exported as an XML file but changes can’t be made to the diagram using the XML file - this is mainly to store a local copy and work on it later on the website. There is a handy “Search Shapes” feature that can be used to pull in icons/shapes into the diagram. This saved me so much time when building architecture diagrams using AWS components.

Design

  • Canva - I’ve used it for Infographics, event invites etc. Just pick a template and start editing. The key is to not tweak a template too much - since I am not a design guy, touching colors etc usually ends in me wasting a lot of time.
  • Making screen mockups/prototyping apps - Mockflow. I mostly just need images and don’t need to link areas of one screen to another so this works just fine. I usually use Angular Material for development and most of those components are available to drag and drop into the mockup.
  • Dribbble for inspiration.

Leave a Comment