How to create stunning digital projects with this sweet tool list

Yes, we us a lot!

Working at Soixante circuits, here is what I need on a newly bought Mac computer and how do install them.

Xcode, Homebrew, Oh My Zsh, nvm, and more.

When you get to work with new people, it is nice to share the same set of tools. First, you’ll be able to help them faster. Second, you will gain in productivity. This tool suits belongs to any developer at Soixante circuits. Some specific software are only available on mac but you’ll find most of them also on Linux, and even Windows (hints, you can use https://chocolatey.org/). A big thanks to the fantastic Node.js® ecosystem which brings us V8 and the infamous Electron and NW.js project that power some of this apps.

The power supply, the workbench and the blueprints

Let’s start! We will need:

  • a network connection
  • a ssh key
  • a command-line interface

Make sure you are plugged in to your lan or on a WiFi. Then we should generate an ssh key. This key will allow us to connect to our VPN, our Gitlab, Bitbucket and Github repositories. We will also use it for accessing to Digital ocean or any other server we use. An other post will cover all the service we use @soixanteci.

ssh-keygen -t rsa -b 4096 -C "myemail@soixantecircuits.fr"

Now that we have our ssh key in ~/.ssh/id_rsa.pub we really want to keep the id_rsa file secret and never share it. The public key id_rsa.pub can be share and put in common. If you change your computer you can simply copy paste both your secret key and public key. If you doubt and think your private key has been compromised you should immediately regenerate a new one. You can change your key every 5 to 8 years for security purpose and keep things clean.

Now let’s start installation process. You want to give 10 minutes of your time for all of this setup. Maybe 20 minutes if you want to go further and learn about all the tools described.

Pre-tooling:

  1. Intall Homebrew:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

This will allow us to install libs directly from the command line and soon application.

2. Install Oh My Zsh

We will use a better bash interpreter. This one is great, it has lots of default features, it is extendable and has themes. You love themes.

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

You’ll love ohmyzsh because it will give you : git infos from command line, date/time, autocompletion sugar, and tons of other feature to boost your productivity on a terminal.

3. Install NVM

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.3/install.sh | bash

You’ll enjoy riding several version of node on your system and be able to switch from stable version to a cutting edge one.

4. Install AVN

Avn will help you to automatically detect the existence of a .nvmrc file and switch to the correct node version.

npm install -g avn avn-nvm avn-n
avn setup

5. Update Git

brew install git

We use git as a version control manager. So you want to have the last stable version to benefit from all its goodness.

Get your application faster with Cask

We’ll install cask which is a tap for home-brew that will allow us to have a near-apt-get-install experience. Read more here: https://caskroom.github.io/

brew install caskroom/cask/brew-cask

Please, use a great terminal, iTerm2

brew cask install iterm2

iTerm2 provides tons of features, one of the best are the easy ways to customize its layout and the bash history. For those who want fun 🤗 you can use https://hyperterm.org/ a full fletched html, js and CSS terminal.

Let’s get our hand dirty for 5 more minutes and install some software.

Communication, feedback, screensharing, remote control

Let’s continue with some software related to communication, feedback and review, screen recording and more. We start with Skype, OBS, Teamviewer Skitch, imageoptim, join.me and TunnelBlick.

Now that we have cask, we can simply stay in our terminal and type the following:

brew cask install skype obs teamviewer skitch tunnelblick imageoptim joinme appear.in adapter

We will use Skype for communication with the world. I must confess, that we use WeChat more and more and skype less and less.

OBS will be useful for sharing video screencast. You can share directly to youtube and the new Facebook live. You can save as mp4.

Teamviewer is great to remotely access to computers. You can take a full control remotely. We also use VNC.

Skitch will be used to clearly details issue or show element.

Joinme for team communication and screensharing.

appear.in is also great when it comes to have a little chat

Imageoptim allow for optimization and compression of images. Do it before sharing media with someone. You will save bandwidth and time.

Adapter will help us compressing video. I personally prefer to use ffmpeg with the cli, but not all member of the team know it.

TunnelBlick will give you access to a VPN if you configure one.

Translation

As our project are dedicated to english, chinese, japanese and other languages, you’ll certainly need to translate the app and interface you build. Actually it is used by default because our client change there state of mind until the last minute. So you want to have a key pair file that contain the content. We call them i18n this is the international way to name it. Format goes from yml, json to poe.

This is where poedit comes in place. You can learn more here: https://poedit.net/

brew cask poedit

Database management

Managing translation makes me think about content which certainly leads to database. Database management and usage is also one of the facet of our little gem. We mainly use MongoDB (version 3+) and MySQL:

Robomongo is a GUI for mongodb and sequel-pro for mysql:

brew cask robomongo sequel-pro

Let’s install the mongod and mysql

brew install mongodb — with-openssl mysql

Note, not yet tried but some recommend mariadb

Now we need to make sure we are up to date with some interpreter we also use: python and ruby.

You can read more here about setup of your environment for a full XAMP (OSX APACHE, MYSQL, PHP) stack: https://getgrav.org/blog/mac-os-x-apache-setup-mysql-vhost-apc

php is a nice interpreter but not the only one we need. We want ruby to be update and we will use rvm (ruby version manager) and we also need python 3 on our system.

brew install python3

and for ruby, it is a bit like nvm, we install rvm:

brew install gpg
gpg — keyserver hkp://keys.gnupg.net — recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3
\curl -sSL https://get.rvm.io | bash -s stable

Now we can use rvm to select which version of ruby we want to use.

rvm install ruby — latest

Now that we have latest ruby, we can gem install sass

gem install sass

As we are in the XAMP, MAMP, LAMP world, let’s install wp-cli a nice tool to install Wordpress in 15 seconds.

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

Next, check if it is working:

php wp-cli.phar — info

To use WP-CLI from the command line by typing wp, make the file executable and move it to somewhere in your PATH. For example:

chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

Have fun with wp-cli: http://wp-cli.org/

Text editor, you need one maybe more

We will install Sublime Text 3, Atom and Visual Studio Code. All of three have great plugin and specific options. It is really a matter of taste for which one you’ll be using.

brew cask install sublime-text atom visual-studio-code

Video and audio tools

brew cask install vlc audacity spotify

Please track your time and use Toggl

brew cask install toggldesktop

Connect anything with an Arduino

brew cask install java arduino

You might want to give a try to johnny-five

npm install -g johnny-five

Download things easily with wget

brew install wget

Image manipulation with ImageMagick

brew install imagemagick --with-x11 --with-webp --with-libwmf --with-librsvg --with-liblqr --with-hdri --with-jp2 --with-fftw --with-fontconfig --with-ghostscript

In order to use node-canvas and create beautiful images from a server side:

brew install pkg-config cairo libpng jpeg giflib

Video compression, compositing and more with ffmpeg

brew install ffmpeg — with-vpx — with-vorbis — with-libvorbis — with-vpx — with-vorbis — with-theora — with-libogg — with-libvorbis — with-gpl — with-version3 — with-nonfree — with-postproc — with-libaacplus — with-libass — with-libcelt — with-libfaac — with-libfdk-aac — with-libfreetype — with-libmp3lame — with-libopencore-amrnb — with-libopencore-amrwb — with-libopenjpeg — with-openssl — with-libopus — with-libschroedinger — with-libspeex — with-libtheora — with-libvo-aacenc — with-libvorbis — with-libvpx — with-libx264 — with-libxvid — with-libvidstab — with-libvpx

Texture Packer and Spritesheet.js

You are a graphical guy, so you need spritesheet tooling:

brew cask install texturepacker
npm install -g spritesheet-js

Easily debug your node application with Devtool and HiHat

npm install -g devtool hihat

You might wondering how to create GIF like the one above. Use LICEcap or Giphy Capture. The first is installed with:

brew cask install licecap

The second could be installed with the mac App Store, or if, like us you want to stay in your terminal, you can use mas. Mac App Store apps can’t be installed via Cask, so you want to try mas to find alternatives. Install it with homebrew and then you will be able to search and install Mac App Store apps from command line.

brew install mas
mas search giphy
> 668208984 GIPHY CAPTURE. The GIF Maker
mas install 668208984

You also want to be able to start a server from anywhere in your drive, so let’s install budo by mattdesl

npm install -g budo

Read the doc here: https://github.com/mattdesl/budo

Finally a little tool we like is Fontprep which allows to prepare Fonts for web usage. Install with:

brew cask install fontprep

We could go deeper on the environment setup with Docker or Vagrant but let’s start and have fun! Don’t hesitate to share what you are using!