> **TL;DR: If your just looking for an easy automated way to update everything, skip to the automation part.**

## Managing it the right way

After doing it wrong time and time again I learned that managing and thinking about how you install stuff on your system is really _really_ important.

Sure you can install node with the .pkg file on the node website, but that will keep everything at a level that's not that accessible if you want to change things or update it (especially since SIP on El Capitan). Tools like nvm, n, rbenv, pyenv etc make it a lot easier to keep full control over your system tools.

So first and foremost make sure to check if your tool, binary, application has something to manage it instead of blindly going on and installing it the easiest way. It may not turn out easy in the long run…

Here's what I recommend to keep your system very manageable:  
(Please note that this article is not about to go in depth on how to install these tools)

- brew for anything related to terminal (ffmpeg, openssl, airmon etc.)
- brew cask for your applications (seriously this one's amazing at keeping your apps manageable)
- rbenv for managing ruby versions
- pyenv for managing python versions
- nvm for managing node version (I love nvm so much, saved me the hassle of updating many times)
- Kinda specific to my dev workflow, but I also use apm to update Atom's packages.

## Updating everything, manually

Most regular applications will update themselves trough a framework like Sparkle but tools that mainly reside in the shell don't have that luxury.

You can of course update manually trough the Terminal, so here's a breakdown on how to do it for the most common ones:

#### Updating OS X core utilities

Sure thing you can dig into the App Store.app and update everything from the Updates tab but there's a convenient tool which you can use to update from the shell.

I mostly start with checking the updates with `softwareupdate --list` and then updating them with the tool itself by running `sudo softwareupdate -i --all` to update everything at once.  

I do download the OS X patch & minor updates as a combo update though, since I have to install the same update on three Macs at home and this way I only have to download it once. This is of course just my workflow, you're perfectly safe updating with `softwareupdate`

#### Updating brew

Running `brew update` will update brew itself trough github and also make sure that all the taps & bottles are up to date in your repo when you're planning on installing new stuff.

Be sure to keep brew updated often and to run `brew upgrade --all` after. This will update every currently tapped or installed on your system.

#### Updating Rubygems

Most people I know never update their gems when installed, which may lead to issues when trying out stuff with SASS or Jekyll.

Ruby comes pre installed on OS X but it's not prefered though. Remember I said to use rbenv to manage Ruby versions?

rbenv resides in your home directory by default which makes it differ from the OS X ruby that resides in /usr. Because /usr is at root level you need to prefix ruby commands like installing with sudo. Your home directory is owned by your user so you have full control over what's installed and gems don't have access outside that scope. Long story short, this is great security-wise and makes it possible to just run:

```ruby
gem update
```

to update every globally installed gem.

#### Updating node & npm

The node .pkg on the official site also installs it in /usr/local which again is not that great when it comes to security.  
Luckily nvm takes care of this issue the same way that rbenv does.

I prefer having two node installs in nvm, one stable (4.2.3) that I'm sure to work and one more experimental (5.3.0) for testing out the latest stuff.

Sadly there's no way to override your current node install with a new one and also keeping your globally installed modules. nvm just installs a clean version of node by default and doesn't migrate global modules.

So if you have a version of node installed, let's say 4.2.1, you'll have to install a newer one and then manually uninstall your previous 4.2.1 to replace it:

```console
nvm install v4.2.3
nvm alias default v4.2.3
nvm uninstall v4.2.1
```

That `alias default` is an important part.  
You can alias stuff yourself like `nvm alias experimental v5.3.0` to use it as an alias instead of a semver version number, but the default is part of nvm itself and will make sure that this version is the default to use in the shell.

Besides clean installing I mostly want to migrate the global modules in my newer node version. nvm has a flag that you can pass to install to keep the global modules:

```console
nvm install v4.2.3 --reinstall-packages-from=v4.2.1
```

This is the flow that works the quickest when using nvm but it feels like a hassle to me. There's a small 'workaround' though…

## Automating the update flow

Putting it all together this can be a time consuming task to run everything on the shell yourself.

If you're a regular reader of this blog you probably know that I love Bash, so for me the quickest way to automate stuff for the shell/terminal is trough Bash of course.

What I find the quickest is to create a function in your dotfiles (or .bash_profile) update() which will take care of everything so you don't have to.

It runs all of the commands above synchronously, take a look at how it works, this one resides in my `~/.functions`:

```bash
function update() {
	npm install npm -g # Update npm itself
	npm update -g # Update globally installed modules
	apm upgrade -c false # Update Atom packages & themes
	brew update # Update brew
	brew upgrade --all # Update brew taps/bottles
	brew cleanup # Make sure there's no cache or straying files
	gem update # Update globally installed gems
}
```

So just running `update` from time to time (or putting it in a cronjob) will make sure you're at the latest update at all time.

nvm of course is a seperate thing, but I found this was the easiest way for me to update it:

```bash
function nvmi() {
  # $NOW grabs the current node version and then installs
  # a newer version and also migrating global modules to the new one  
  local NOW=$(node -v)
  nvm install $1 --reinstall-packages-from=$NOW

  # Specifying the --replace flag will uninstall the previous version
  if [ "$2" == "--replace" ]; then
    nvm alias default $1
    nvm uninstall $NOW
  fi;
}
```

So whenever a patch or minor update is available for my node version I just run `nvmi v4.2.3 --replace` to install the new version and replace my old version.


Keeping dependencies and tools up to date can be a hassle and a time consuming task, I learned that the hard way. What follows is my semi-bulletproof guide to making sure you're updated and don't spend your valuable time doing so.

5 minute guide to keeping your system updated

![nightstand](https://lh3.googleusercontent.com/U2j1M0L4RpzWeK0tNpRQlK5IV_6SrIRrKBqIETgX_5FUvPwd7Gp4tq8dT-66t1rS8wE69gZoi77UQE_RzVkEumiakqKooaFw1oelSk964L608ZlEktPVc61rTzrYsSoiHUARtU450mFwVzqnO75DwNqGRl7getnxhMv-W2uc1T50r25Yw80ZGRjUAiIUxSe6mZbiWRuqPVQcJbYDHugsX7tragBYaG8tTiKtq6gt0r4CuCa-_x3eDGkd3RqDfZwbn80br-i8zeNuQGEE65Vbfzc37xkrOcVUbNPUXF8OHL56S7Q-uy1BT1HC8V3YQt5I_lesTp9b86R9vCSWmX7JFX7fp0dYYA8IdB6qbDHDradL6fkoP3J87jAv5r_HbEAz4hAw3a8WQN5lzZNhFenfAwqxpvfcOsMCEY8mvtC8CcLhoucAvDzLeU8oYHr9z9Kz3xUNgv6TJsRWVqoyuBFmib_t7M1F3uxCu10Puah-GhRkYVhbaTe4PS_vc7MUT35YCM2pyZIzub3-j33ED4WFlHRH9J-jPsXB3zRKeZrCcnY=w2220-h1470-no)

> A clean nightstand with the only the essentials. The iPad stand is a Bluelounge Nest has a tray for keys, earpods, etc at the back. iPhone dock is a Saidoka also from BlueLounge which I'm absolutely crazy about. Wood clock is from Kikkerland

![audreyhepburn](https://lh3.googleusercontent.com/zqgEc_p6lL7Cf8uc7Aidg7Fc6OQ-5moISWUBoHE4R0nChW_bfgQ3DI4uAdvtQMWHQ152a5javKMHolrnLdP0fa8M5e5IHpntxq12nKwxprgb3BehBC084DI5MUowMnB0b7v5sgRIWSLlJOWjOw7GBzO-hQn6IJCvxWyaU9fuZXZ-Q14Z_GUL28IF4RADoSpEpWLEYruFX6mlFOFqoY9z7Z3ORW9bDGOMQ_meqVya3auUymgJkXx9Y_uggAwJmCADFWzMCCOBPpuCtce7KJXfy7Pog-I63qPmcP8p7oVkiZhtYCGWTCWVknMbfNO3KIaWQKpLVrqESt7jHEXZcsujvPO6HFSrr80bJeQx-17bpFTMXYAt5XX9OfZbEmzYwRfS8jcjFV1Rb2e-2VlfN3k3zyamvQrZ-NMtBY7_WnhZWTW5tUxsLfXBwdrswnQ1Lac88OQi3YrMJPt_pB7ZILKR6p0-hkEy6oQEULrl9X46IR9N2HNXoms1CfnF9xKc3txtduPEsrRkHLmiIno8GsvQTI6gVaIdhdlA2a7QVqLkFgk=w2428-h1388-no)

> I'm a pretty huge Audrey Hepburn fan so decided to decorate my room with some pictures of her and keep those monochrome tints in the other things on the shelf as well.

![Wall cubes](https://lh3.googleusercontent.com/g9KyINTU1FYLhTteuhD8sqL5IwFCootH6qJmtJOLo_eErvUvFHSk47YJaTurIp7zO5T0VwpQRR5sqU2r7gYvQsxMPXOSByOMOv_Z_FzVWVCujLIApu-uMI6_FB8v3OxC9xoxBrJDxp97S1l_V0n5Jpi7q66XQEMOzVXfWKh7s6A3jG1QIJVxcGumNZSkGjUuojHeeFKA60pEdzcUP5X6me2sFunJMlW2rYIYID7bNQC4-9LlmysZQXLRDezdxRKy-DY0ubvyveHW9B02mj_HkkvdvfJ14Xbk-7eFWb2eKWPJGf-KGOoOc9vYHwyWgdhfQuzV7rx-BFuIlgle64ILNcc7f6Cuypqe4F1uifdykNhZ8CjFLGfsRvYHbdi163XVh1y-vsYwazg7xAt20xe-jYUAivHtnz0JsnyxIx4rgVCMiyQ7OV31aqlLS9aBsplxH83IbRRaPR1G7ceDB7n3GG0DBvfXecGJW-puE2RLYsPh0ewepRBXl_ULbeNfjv57Z115Yh8VR75VwJK9WwpTPWQXgjE2UvAat5BFu2r27fg=w2220-h1470-no)

> These Ikea cubes are placed above the bed so I can quickly grab a book before going to sleep. The Kartell clock was my christmas present which I'm still in love with.

![Cactus in washed paper bag](https://lh3.googleusercontent.com/9XzJDNpbf15fyDPSW5u8Cqtzu6Wvk7nPhs_TD9nyXCd_8ysLb4QZKHItPTcKga2RnOX50h3ZTYPO6D1iVn-FuaiQCN3kEe_drvEiPfhvtxnJtrmwe35Me88QkSnK67kwfknfJ8mAR7S-GXPAR6UooqKbWRY_MY93Nbxhnzt28_JiYqkor3jWqMe4uqf3uEFDUuuOye7aFtuWXoxUHJ5wodxMhRLSV24Rki4HEwNQn7epzkNh-sewxoN9jnpxesfUji3RLM_Bh-IipjcccKAx0dRzj9l0FyuNJPz8yBroM1lhvlPHPjN8bP9SGt9KeGMIHguaDba_UiM-TC_uJwg0RPeboaLCFBPqUuJXLOzwtsOshio3k6U5BF4l1J5J2-0wV5HNPxDpxPED-3PPtscA2FCHhKB9HONNAWZkWuXKdS7v-bBTuT5-PhlGJT5fq6Sdilwa6nIsUido5VlTReiFifYKwV2mNzLwUrwQwLtZAIJJTBWIGJN6iipFnOxo9p-vwNU54nihDAK7JiRVNnPc1qoNQ1WrM7Gt8K_dY3i6sqk=w2220-h1470-no)

> I like to put plants all over to place to give the room some color accent besides the mainly black & white things I have decorated it with. The lovely 'pot' is a Uashamama washable paper bag which I found in my favorite coffeeshop.

![Organizers for my desk](https://lh3.googleusercontent.com/kaOF9TFrdm-gKpSKFgth_xIBX556KeQgJW7Rre03xIm4m0qsUBgiAmA5-ffEVSIjNVhhz4qK2wa1FojrhSfetuNGEV1TEVU0MKuA_q0-cB2wCxYkrAk_P4Hl2BRdFHlA9XS7wqPGHPzJzsmVuSWFqiORdlshSouKtzX-5_inamh2vlzVvCdIDz65AbjEY9Tu9fGl9LwxlFRrc4V4mUoCCDiFoWiLqUIXTgL63emilaaOdXAaacrXczgwrGh7LKLK3vZr3dW1wfgRcadGwyZAN7j_AndS3zAudw7pDvL9yppiwws8kIsunxhT-yV-K0ZZd_X6-4IUe2nnpdLdfmAfWXk2PRNZfeGutf4nJ0iCisy5d_J-_zxDwElSF1sb8v4V9iJLJIHDAlVpiFmEVOb-DG5O4ZBnDGVkAo5n2De2j-ZMqtYCvvXUsQmh1Yj65CiqwR2rQsKVODKOzHm9OqILumWA3-Ctx5kDMcP32to9CwtbdWabfr_HVfRsRHcBzs1aIWmcz2bwpK5eQ1v25tV9dJZwEombjIUgtgY0wAwoQZE=w2220-h1470-no)

> These organizers really serve their purpose as they now keep all my papers which were straying around, neatly organized. The coasters is just a bunch of post it notes taped together with [washi tape](https://instagram.com/p/0svDP5qwO14uNJPTe7-LcQL-DVCSOq1NFpUtA0/?taken-by=thibmaekelbergh).

![Peeloff sticker frames](https://lh3.googleusercontent.com/ksoKs6oeyVAwANYX3VfAzeloZfJZcKOFVgQm2ysT6Z-7ujN1EqBgwWdW9CXmtKcvQF2c7-CgPaf1kRZ_SF2gqjvgfYZbHw1a1kwwheZ_7ihVEhLNu5WvUjNme6tzWMqsuKdw7rCW2VjsGdIosyV7xGB5ASgZFx2B6GXypEZ7bBtLDVGZHD2LVDsFl2i52BFu6rJCmTsF514lzB-kjFOKmtVtjSRx9Dn2l6XKakUusl1GE8TI6hhE8EocOvfr3I9_7yP7u1F8v3dnT7Y56Fjc4RerMGh7kAXeBmjxuyRdnnQeqQAf-T5B1o0h4AuELg76Zp13hAkVljt2fv-VBm72WPFHQY7SkBKzlqcjZePZc2I5N1kRoXbik5dVhQZj7tC6WxfRVfvQUdZLktMC6K3ephk_r-NlVgh4stm0cVlJhUMhYJey6XHILW3xLqNHXQU8NAyJGfoK5ZkBLPzAonSnxTzvrw-_iY0rrqGWC9gxu99UEKsShjbqe2HFYMdCaBkFoJ1BE0adUQQX-2CI8AeODDgqbDygDhlgc5rjngH-XX4=w974-h1470-no)

> Design is my passion but it can oftentimes result in having to spend a lot of money. Most things in my room (like this wireframe house) are dead cheap pickups from a cheap decoration store (Blokker). The paper frame that holds the photos are so great, they have a peel-off at the back to keep your photos sticked to the frame and they costed like 1 euro for a pack of six. They really liven up the room atmosphere.

![Pinboard](https://lh3.googleusercontent.com/D8FWIgP00iM9NvDAhGruwZnJqZAyawgDHsAauMh-eoEpYSDn6YY4-VgNiWfhmOJyhZLgV2KVI64mqxkKtcKkBiNJ6Hsc3qJlCTNKioZZYRzrWX1rgjf9UwYhM9nJBCe4S9NZxsBjT0Z0YC5vQF-YOp5yz3VTD-dNiEF-nLAT2kmbowI_rwXMc-myJlW-lp5ONkVpDQqNvl01tlphN0VOeghyzW5Z_Vk28rGMFK4a82GL_7kuj9m1ZdszJNNSUh646En0_0975hGOdp-uu9m8ntp9gbxZMyBh5p2DQy_l3M8_kmtSyvTUCwVIbD664ospewOWobS9m4POtRdnI8OYyBtnDB0xFOz7_6fLS7nC7p0qUFH8GRDkuwKBeNLY9V-hH8L1QpoMn2ZVbPU84WjgKkO9ITv_Sz3SYhmet7V-BPGrJ2Xf2uPbWdTLmYmLBNhnd75Dl1orzLjS8ttVEK8JxddQ0MqOGV_wMBadkb4i_rpP9086imF7f0or7cuhX4WB-FLgAKumnv6bHpyItluwt_BxLpthpx9G5Uski2ySxco=w2220-h1470-no)

![Pinboard](https://lh3.googleusercontent.com/xhtsBlvl2YfMi4nMLa-XYwrUSRcsVBgJO468Ny0otKwogyF1wTd8UmPQ1wUeYXfU7brJHtwn_slH9GQlD66WU7AWaNMNNkH7lbjKTwEfpRIO0fyJ40DSOfH2pge4KdDf-jHfm2uNgGMwMexbS_IRmkHJVmHb8KMgPsTM8VTUjNgQVZdWuJSoPWCXZqyehKhKT721dt5t3cY11W9kKORo68WjfEvYZOjTXNi4Cc5O8fmLsb7KiUCDdceZGVoPoHeh5iNwDaPLf53DPsiV2iHb5aaNwBEUGZNlhPE8snJvu4WUfF_pnZdhvnJYOFOYBDbnVibPE577TLIm60GapBqglslhrrF37VwZZBFXWxHMIdqnkaYH5Przs0sbyOg9WKxvows2gPddOzgzWtNOtRiMfC9brnRk9pRL2GqLsV05AVCMKluP3D8wNnt-fKIlM_SYSLFBH74IhNMqYlhacwnteOccpgcI3l-CNejLgHXjjC2KK1EyKBbd3755yCHzCz0pBXyvN0JYHqPXj9V8qV-TcbVZXnn4mvN97aEGPcthcj0=w2220-h1470-no)

![Pinboard](https://lh3.googleusercontent.com/ThCnDHfquXQOwPhcIbKkvlvA1CUUSG8LQjBE5t_mHAFjagy8lB0XfDppz-0nR2ZqZ8xQQ_ogrc1BwpkMXbCkgQKrEPZwNxSPNYtw3Vh27LIQgGpdmg1EhV7LsfcA5-W2ETObzo8ye4KRZr4CsZwMTGcGYAH-i0fxPt8nK1YjsDhuxxdfZg4HAuZYEEn3uU-c0WKkBRoLmMMR-LWw1Sv5YuFvrJEQcW0w8_wl9x2W6BBB7glq8HF4OHHKiX0hfCQidFTk8s81T0mptifz9zuQnnHe2cfaSzgsniezFWkTam861JAobxNKe7Ka62ilPcX3gSu8HaJQgVjupSHQJQSFpGL2sdlrfIrM0sFi_UgpTXT74-ccsCGgvr4XOHNRSslEFjEwx6sk0TMyZ7Woyx9H0GgQSNzhbvc8SgKNcOgy2s0Vo5r-vqPzm32rXM8nyxC-EjvpC-6sdDBOEkYhHx6azYHVPcROK8Wisbbnvyq55AK3WBL0ouXlUktnhbBgMBOMPU9Wa7JFUxWGInM8HZXb0h23cGmLMLf2XmTKNgDJZRc=w2220-h1470-no)

![Pinboard](https://lh3.googleusercontent.com/opwbeO91LAkVLZ9E4ytwe1m3_MIb1iB93WebKG7X232T3Fgehbe5pmTgW31IIhxGZoUR6k_Aa11Bmh7iug8A4Dly_hMPHtkEgK80QRmI_LbH6OVrL9Ll_1OAeVEXzbZuDnNlyJfjaFfHEvlu3zHpsN-88XMEcI5v2VOlp-PIBHlSKeXodnAcre3llWL_5nDjn-Lnmyn91oOhUngH2QzsPSQY4CFBi9arMTQvpPpERctDnQ7ewSogToiDRnHJPOuj3IThE-FzxsSgeT7un9_LSL9kzpWW8dTt3UED0IC8UA0XFCzbTHnv0L6J0yoLaI7R7EGOZNoySGb4NPGPLxSOb2kRTDRWzdgv_KmPIyWnN4iolbmzEjY6z9kvRzlNrTKG3O-SMYoqC1tP6l5rmmIlvwYqyJ5zHWSCDZbbuUu_og274KBlV6yjClCKlTcbs5AbJOpjTCLWww5k-CIMvh-JMIYGrP6hiSRrhnyfjkLpe_TU00U4gf-sdGIgvVtVlww41AzqtpOS5u_g4yRjar1VYvke0wxIqBbmhr1LRUXYxJ0=w1393-h784-no)

> When designing I mostly just open things up from Inboard and get my inspiration from there but sometimes I blank out and can't find it there. This supercheap pinboard serves as a backup in that situation, so that I can just glance up from my desk and look at some things I found in magazines, postcards or catalogs. It's also a huge plus since it gives more mood to my desk.

![Ikea vinyl stand](https://lh3.googleusercontent.com/m_j39He97ET47jzKTYl7SW-gfaJpkJmjC8wAmtHJ6ajwYi_hZnAxxRG6nPZ0yXSVOZ3-IbZ61Gn0MEyTwX3Yz3MUikp7jAXTBCO7iwEtddljC4gtN3QS9g_B5Z6h-a9jBgnGg_RpLIHYOc8l3hS5PQDK8hCIjRtdOZwKltbVHo8ZVFkV9o5bvculu8R2Ob_oiawj9HWNOgBpYvD7qMNOAYgcZetwiR5lOcntnejwEMo1-ZjT7OSodjhHv2RUUAyzCcG2TRcZ5m-y1w27O5y5yiBmcX6w5o0OAv3lid8xp405jE0es_TEBqT69M9hH91q1s9t2ja1E-XJ0LSurReaP3ovu7cyiQxShnLJkSbnxVLNtwen5-NX52hnjLUeqeZHB3122oHqNiv4H_fWuns_WATatUzkMOeE6bJtuCabAIUZrfv6VseQh4pWDx4m5YN0unO_8erPoIBnL79-SFKvASGTFM9MiZOoZL7ETG07h4eiKWZ_YgK-LnIKIj0XuEYVqh7rphob3zi6jJoS6Rq3vZ08klVuTPNMLyXfIIUJ8LM=w2220-h1470-no)

> I found out this neat trick to repurpose an Ikea tablet stand as a display for my current record. I was fed up with the lack of space when playing records and the currently playing record always ended up laying on my bed. Now I have a clever solution to not doing that and giving more flair to the booth.


My workspace

Since around April I've been more interested in the aspects of development that don't actually include writing code. I started out with Vagrant (which was like a love story for me but it faded out after a while) and then got more into Docker, which, at least I think so, is kinda a big thing if you want to be the topnotch developer these days.

A few weeks ago Hashicorp the company behind Vagrant announced they were going to reinvent their products and make them more simple. Otto saw the light of day. It's meant to be the successor to what Vagrant was but inherits more similarities like Docker. Otto's purpose is to create quick environments and make them easy to deploy to the cloud.

So, Vagrant nerd as I was, I decided to check out Otto and scroll trough the docs. First thing that grasped me was how much simpler everything got. With Vagrant you really had to set up everything yourself most of the time (except for boxes like Homestead and Scotchbox) and it could give you a headeache or 2 when you had to change stuff or create a nice provisioning flow. Otto ditches most of this and lets you actually focus on the developing itself.

Ready to dive in?

## Installing

Otto is available cross platform as a regular package installer. As I always do before installing software, I first check if it's on cask so that hopefully I could install it from there. And sure enough, otto is on cask so that was the way I wanted to go (don't panic if you're not a cask user, just install it from the website because the result is the same):

`brew cask install otto`

Ok so otto is now installed and available on the command line. Try running it and you'll get a first glance of the commands that otto will serve you with:

```console
otto

usage: otto [--version] [--help] <command> [<args>]

Available commands are:
    build      Build the deployable artifact for the app
    compile    Prepares your project for being run.
    deploy     Deploy the application
    dev        Start and manage a development environment
    infra      Builds the infrastructure for the Appfile
    status     Status of the stages of this application
    version    Prints the Otto version
```

A lot of info here (though most are pretty clear) and many of those commands have additional sub commands so let's take it step by step.

## Creating an environment

The cool thing about otto is that it's smart enough to guess the language environment you'll be working with. My guess is that they just look for files like the package.json or Gemfile to determine if it's Node or Ruby, but that doesn't really matter. What's so nice is that you don't have to setup Manifests to tell otto which language you're going to be developing in, otto can make up it's own mind.

> For the purpose of this post we're going to use [Heroku's sample node project](https://github.com/heroku/node-js-sample)

Download or clone the repo to a folder and enter it. All the files for our basic node app are here so we can start on the first step with Otto.  
Running `otto compile` will let otto determine that it's a node app.

```console
==> Compiling...
    Application:    node-js-sample (node)
    Project:        node-js-sample
    Infrastructure: aws (simple)

    Compiling infra...
    Compiling foundation: consul
==> Compiling main application...
==> Compilation success!
```

The first step is already finished and as from this moment you're ready to just work on developing the app. This would've taken a lot more time in Vagrant or Docker so kudos to otto for being this easy.

All the files needed by otto will be placed in the .otto folder in project root and the .ottoid file. You probably won't have to touch these, unless you're going to extend upon otto's functionality.

## Starting the environment

Now otto has determined the language we can start on installing the node runtime and it's dependencies. Otto still realies on having Vagrant & Virtualbox installed (I hope this won't be the case in the future) and the next step makes that clear. We will have to install a VM trough Vagrant so otto can install the runtime in our VM. It will import a basic Ubuntu box and concurrently set up networking and shared folders so you don't have to worry about that.

`otto dev`

```console
==> default: [otto] Downloading Node 4.1.0...
==> default: [otto] Untarring Node...
==> default: [otto] Setting up PATH...
==> default: [otto] Installing build-essential for native packages...
==> default: [otto] Installing GCC/G++ 4.8 (required for newer Node versions)...
```

You can see that otto also downloads one of the latest node versions and sets it up on the PATH for you. After this is done you should get the following message:

```console
==> Development environment successfully created!
    IP address: 172.16.1.142

    A development environment has been created for writing a generic Node-based
    application. For this development environment, Node is pre-installed. To
    work on your project, edit files locally on your own machine. The file changes
    will be synced to the development environment.

    When you're ready to build or test your project, run 'otto dev ssh'
    to enter the development environment. You'll be placed directly into the
    working directory where you can run "npm install", "npm run", etc.
```

We now have everything installed to test our application in the environment and look at it in the browser. You'll have to ssh into the environment and start node from here. Take note of the IP address from the `otto dev` output or run `otto dev address`, we'll need it on the client.

```console
otto dev ssh
npm install
npm run start
```

The application is now running inside of the environment otto created for us. Now with the IP address we can visit it on the client at port 5000.

![It runs](https://imgur.com/vWIWKHz.png)

Any edits made on your local machine will be mirrored in otto's dev environment. If at any time you'd want to undo everything we did up until here just run `otto dev destroy` and the environment and VM will be deleted for you so you can start with a clean slate again.

> In the second chapter of this article I'll go in depth on how to build the app and get it deployed trough AWS, so keep posted!


Using Vagrant's successor is so easy and quick and gives you a way more convenient flow of developing applications.

Quick and easy development environments with Otto

In its bare form it’s a strip that attaches to the MacBook which flips open to be a laptop stand, giving you a more ergonomic way of typing and working on the laptop.
The good parts are that it uses a special adhesive gel instead of glue so that there is no residue, and the Kickflip is repositionable and removable.
It gives you a good lifted angle to make coding and writing more enjoyable.

![A picture](https://farm9.staticflickr.com/8632/16061624034_a2f02a639c_k_d.jpg)

Application is easy, just take off the protecting film and apply the Kickflip to the backside of your MacBook with light pressure.
BlueLounge kept the form factor rather thin and the difference when not flipped out is not so big, this still makes it easy to use when just resting on a desk.
Once applied just flip open and position on a desk to start boosting your typing.

![A picture](https://farm9.staticflickr.com/8561/16682603981_a36aa64898_k_d.jpg)

> Attached neatly to the MacBook

![A picture](https://farm9.staticflickr.com/8589/16476666437_2e48e15c6c_k_d.jpg)

> Unflipped, not that much a difference with regular MacBook angle

![A picture](https://farm9.staticflickr.com/8565/16683956595_6416df8978_k_d.jpg)

![A picture](https://farm9.staticflickr.com/8617/16497820009_e81a388d76_k_d.jpg)

![A picture](https://farm9.staticflickr.com/8579/16682947482_602a617583_k_d.jpg)

> Flipped out position

Downsides?
Sometimes when using a smoother surface (like the glass plate on my desk) it’s possible that you move the MacBook due to the Kickflip not having an anti-slip foot. But it’s very minor though and not that noticeable.


I’m a big fan of accesories for my MacBook and iPhone. The latest addition to this is the BlueLounge Kickflip. And I must say it is certainly a big improvements for my coding and other typing work.

The BlueLounge Kickflip is amazing

<blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Photos.app is fucking with my photo-workflow. I wish Apple never created this app :&#39;(</p><p>&mdash; Thibault Maekelbergh (@ThibMaekelbergh)</p> <a href="https://twitter.com/ThibMaekelbergh/status/587962799852249088">April 14, 2015</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Fair enough after a month or two I got myself familiarized with it and could get a semi-good workflow for managing my library and editing Photos.  
But the one thing I couldn't find was how to **add a location to** an album like you could before in iPhoto.  
In iPhoto you could select an event, click the info panel and add it at the bottom with a visual display of a map to guide you. **Photos had no such thing** when I looked for it.

Well I thought '*okay I certainly had to be looking over it*' and set out to call AppleCare to have them tell me where I could add a location.  
So this morning to my surprise one of the employees at AppleSupport told me the feature was no longer present in Photos, and he was as surprised as I was to find that out.  
**Photos could only display location metadata after import (like with when importing from your iPhone), not after they'd already been imported (like with my DSLR).**

Anyway removing this feature was rather stupid, but I really wanted to be able to look at locations where I shot pictures once in a while so I searched for apps which let me add the data before import.

There was *exiftool* but, even though I'm experienced with the command line, was hard to work with and I had to get log format files to add location.  
Luckily I found [GeoTag 3](https://www.snafu.org/GeoTag/) which at first glance seemed way more intuitive.  
I downloaded it from the site and decided to try it out.

![Showing info in Photos](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,w_1024/v1439210217/Geotag%20Photos.app/Screen_Shot_2015-08-10_at_14.28.55.png)

Two days ago I went to [WeCanDance Festival](https://wecandance.be) and wanted to get location for a photo I took there. I dragged the photo from Photos to my desktop and opened that photo in GeoTag. It turned out to be exactly what I was looking for.  
The photo opened and at the bottom I was able to use the Google Maps API to pinpoint a lat/long location and save it to the photo's EXIF data.

![Manually setting a tag in GeoTag](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,w_1024/v1439210214/Geotag%20Photos.app/Screen_Shot_2015-08-10_at_14.29.44.png)

Removing the photo from Photos and reimporting the one on the desktop in the Album worked and sure enough when I checked out the Info panel for that photo it showed the correct location!

![The tag recognized in Photos](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,w_1024/v1439210217/Geotag%20Photos.app/Screen_Shot_2015-08-10_at_14.30.22.png)

So it seems this is a working and easy solution for Apple's stunningly stupid decision to remove this feature from Photos. While this method works, I hope that Apple brings it back in some future version of Photos.

> Update: I submitted GeoTag to Cask so you can install it with homebrew Cask.


With all the recent changes going on in the Apple ecosystem I decided (with discontent) to ditch my good old pal iPhoto for Apple's new Photos app to keep myself up to date.

Getting location data in Photos for macOS

## Finding a beta and creating the dmg
The beta releases are available to anyone enrolled to the Apple Developer Program. Sadly my enrollment is college bound and doesn't let me do anything besides get a provision for side-loading Xcode projects on my iPhone.

Luckily, [shade.sh](https://blog.shade.sh/index.php/os-x-beta) uploads the beta's with a valid shasum so it's pretty safe to grab one from there. So I downloaded this file (*around 6GB*) and uncompressed it.

Damn, first obstacle. The zip file **uncompresses to a .app** to install 10.11 on a partition on your HDD/SSD. I wanted to run it in a VM and not partition my SSD to install it and just throw it away later when I could just delete the Parallels VM instead.

Looking at the .app's Contents folder and searching Spotlight for .dmg I found out there was a disk image called **"InstallESD.dmg"** but it couldn't be mounted into Parallels. So I headed to Safari and searched for ESD.

After browsing for a while I found out there is a **RubyGem to create DMG files from the .app Installer**, called `iesd`. Installing was as easy as any other gem with:

```ruby
gem install iesd
```

This in place it was time to create it with a simple input/output task for iesd:

```console
iesd -i Downloads/Install\ OS\ X\ 10.11\ Developer\ Beta.app/ -o Desktop/Capitan.dmg -t BaseSystem
```

This took about **5 minutes** to create the DMG on my desktop. Everything was now in place, and I could head over to the actual installing now.

## Setting up Parallels for 10.11

I love to use Parallels because it blows the competition out of the water and has a much more friendly UI and easier settings to adjust. **The method below works for probably any VM app** like VMWare or Virtualbox, as long as you set the hardware correctly.

Starting off by creating a new VM and **loading the dmg in the VM's CD drive**, you'll want to **prevent the VM from booting** because the default settings will make OS X **kernel panic in the VM**. Parallels has a checkbox you can tick in the setup process for this called _"Customize settings before installation"_.

Since my purpose was to only test Safari's Web Inspector, it would be stupid to use a dynamically sizing virtual HDD anyway. Delete the one that Parallels already sets up for you and then create a new **non-dynamic disk with at least 32GB storage**.

![Checking the source for installation](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,w_493/v1434456640/Capitan%20VM/Screen_Shot_2015-06-16_at_13.35.59_ywnlct.png)

The thing that makes kernel panics happen inside the VM is the connection with webcams and USB 3.0, so make sure you **disable connected FaceTime camera's and USB 3.0 support** (resides under the _USB & Bluetooth_ category in Parallels)

![Disable Facetime and USB 3 in Parallels](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,w_1024/v1434457396/Capitan%20VM/Screen_Shot_2015-06-16_at_14.22.23_urfeeq.png)

Since Lion, every release of OS X has **only required 2GB of RAM** so that would be the minimum amount you would have to assign to the VM. I assigned 4GB because I have 16 in total and had some to spare. (_Remember 2GB = 2048MB_)

![Picking a good amount of RAM 2GB](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,w_1024/v1434457704/Capitan%20VM/Screen_Shot_2015-06-16_at_14.28.00.png)

To round up make sure to assign **at least 128MB VRAM** to the VM. At 128MB it will **run at bare minimum graphic speed** so assign more if you have a decent GPU. **I assigned 512MB** of my dedicated GPU in my Retina which has 2GB.

Make sure the **dmg is still loaded in the CD/DVD slot** and boot the VM. OS X install should become active and just install it like you would with any other OS X install. Ok so now I was pretty much at the point to test out the new Web Inspector.

## Safari 9 Web Inspector

The new **tabbed view** will make it much easier to change views when debugging or inspecting. Feels great to quickly switch to console from the node inspector view with keyboard shortcuts.

![Tabbed Web Inspector](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,w_1024/v1434456639/Capitan%20VM/Screen_Shot_2015-06-15_at_13.44.13_bkcagn.png)

That new Adaptive Viewer is designed in a sleek but functional form with **options for all current Apple devices and common screen sizes** to view from. **User Agents can still be assigned like they could before**, but if I'm correct there are more options for platforms now.

Adaptive View is great and I'm really looking forward to working with it, especially since it also includes the **option to set pixel density**. **One thing I'm missing** though is some way to **create your own resolutions** to test from. Currently there are **only three sizes** (_800x600, 1366x768, 1920x1080_) but I'd love the option to **add in my own sizes like 1024x768**.

![Responsive View in Safari 9](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1434457581/Capitan%20VM/Screen_Shot_2015-06-15_at_13.44.06_tmelh7.png)


Installing OS X 10.11 as a VM

### Some background information

I was configuring my Raspberry Pi file server and was looking for a way to get R/W, journaled and large block size for my external HDD’s connected.
Turns out, anno 2015, there is no universal disk format that complies with all the above.

Thus, I formatted my drives to ext4 and set the server up fine. But I wanted to be able to connect my drives to OS X if I ever needed to.

Things like [Paragon extFS](https://www.paragon-software.com/nl/home/extfs-mac/) and [OSXFUSE](https://osxfuse.github.io/) seemed promising, easy to install and easy to integrate with OS X applications.
I installed extFS and everything worked, until…

Numerous kernel panics in one day, leading to random system reboots. Very irritating when you’re transferring 64GB of files from disk to disk.
Searching the internet for a while I found that people were having [the same issue](https://apple.stackexchange.com/questions/29842/how-can-i-mount-an-ext4-file-system-on-os-x) using these applications.

I uninstalled extFS (which I spent 10 minutes to…) and searched for another solution.

### Linux to the rescue

Logical thinking brought me to the fact that Linux works great with ext4 and I still had Parallels 10 on my MacBook.
Theoretically I could install a Linux distro, share the drive and still have a good transfer speed.

I pulled Ubuntu 14 Server from the net, installed it in a VM with the bare minimum because I didn’t want a huge 10GB VM eating up all the space on my MacBook’s SSD.
Once setup it was time to mount the hdd to a folder, so it could be shared.

Listing the disks with `sudo fdisk -l` I found that it was located at `/dev/sdb1`. Great, now all I had to do is to mount the drive to a new folder (/mnt/hdd) and I could go on to sharing it:

```bash
sudo nano /etc/fstab

# the line below goes in fstab
/dev/sdb1 /mnt/hdd ext4 sync,noatime 0 1
```

Save and exit and mount all volumes with `mount -a`. Done for the mounting part, on to the sharing part.

### Get yo’ SSH on.

I searched for a way in Parallels, but apparently it has no sharing support for guest to host, only OS X to Linux. Damn, this meant I had to do wireless transfer to share the folder.

There are various ways of sharing the folder /mnt/hdd to my Mac.
There’s SMB and AFP, which I’ve used before but have no idea about how fast they write, technically they should be faster than SSH (which I ended up using), but I have yet to tinker with it.

I set out for SFTP (SSH) to share the files because I have Transmit on OS X and it makes it easy to share files and because SSH was easy enough to configure.

Too my surprise there is no ssh server installed in Ubuntu 14.04 so I had to manually install it, pulling it from apt `sudo apt-get install ssh-server`.
Now some edits to the configuration file and I should be finished. The following lines were changed in `/etc/ssh/sshd_config`:

```console
PubkeyAuthentication yes # change to no
PermitEmptyPasswords no # change to yes
PasswordAuthentication yes # make sure this is set to yes
```

Don’t worry about the safety that’s turned off with those edits, you’re doing everything locally so there should be no outside access. Besides this VM is only used for sharing HDD mountpoint so no there’s no critical stuff to damage.

Restart the ssh server with `sudo service ssh restart`, log in to the server on your Mac with either Transmit, Cyberduck or Terminal and voila, you got the share all set up.
I got a solid 4-8MB/S transfer speed with this setup:

![Transferring content in Transmit](https://imgur.com/sVLbx3r.png)

> Edit 9/04: I just configured ftp instead of sftp and got 11MB write speed, seems like this is a better option!

Admitted, it’s kind of a bigger hassle to set up, has more overhead for the machine and eats more resources.
Then again, it won’t be used that often and some tinkering with Linux never killed any dev ;)

> If you set your mount point to /mnt/hdd be sure to `chown -R yourusername hdd` on the folder. Without this the user won’t have any write permissions since you’re at system root.


ext4 is not OS X compatible (which is stupid) and getting it to work is a big hassle. There are tools but their unsafe. Luckily I found a safer way.

Using ext4 on OS X Yosemite, the long but safe way

> __6 aug. 2017:__ This post is merely kept for archival purpose. Though the software is still buggy & horrible some improvements have been made and for most cases it is advised to download the dmg/pkg from https://eid.belgium.be/nl for macOS 10.8+

By using deprecated methods & code the Belgian eID Viewer version used for Yosemite can't be used on El Capitan (Hooray for bad cross platform production software I guess…).

![Java lol](https://imgur.com/PnLTq6I.png)

When rounding up the update for El Capitan you probably saw the notice that eID was incompatible with El Capitan's OS X Software. The fix is rather easy though.

Navigate to the Incompatible Software folder on your Macintosh HD. You can do this directly by clicking Computer in the Finder Go menu (or hitting `cmd + shift + c`).

![screenshot for the go menu](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,w_326/v1443804003/eID%20Capitan/Screen_Shot_2015-10-02_at_18.35.15.png)

Open the Macintosh HD and concurrently open the Incompatible Software folder. There'll be two items here at least: a folder for eID and the eID Viewer itself.
Move them both to the Trash and if prompted for your password, just enter the password for that account. Be sure to empty the trash afterwards to make sure that all old files are deleted.

Now just download the latest version of the eID software (middleware & app) from the [official site](https://eid.belgium.be/nl). Open the downloaded disk image (`.dmg` file) and install the program.

A working version of eID Viewer for OS X El Capitan is now located in your Applications folder & Launchpad.

> Thanks to Anne-Marie Swalens for pointing out that the Sitecom Card Reader MD-031 is officially declared as incompatible/deprecated with El Capitan and higher. If you have this card reader it's advised to upgrade to the Sitecom 065.

## For developers
Developers can opt in to install the driver & viewer through [homebrew-cask](https://caskroom.github.io/). Just tap the official eid repository and install the required driver and optional viewer (if wanted). Java is of course still a requirement. I would advise a reboot afterwards.

```console
$ brew tap caskroom/eid
$ brew cask install eid-be eid-be-viewer
```


The easy fix for horrible eID software on El Capitan

Fixing Belgian eID Viewer on El Capitan

GPG is the next best thing for encryption and online communication of any sort. GNU Privacy Guard (GPG) is an implementation of the OpenPGP standard. You might have seen these in emails, online articles (Lifehacker likes these) and even on Github which could have left you wondering how to get that nice `Verified` badge next to your commits.

![The verified badge next to Github commits](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,h_292/v1480418735/GPG signing commits/Screenshot_2016-11-29_11.47.23.png)

To get a grasp of what we're actually going to do let's break down how GPG works. GPG uses a public/private keypair which resembles a lot to the [SSH keys you might have generated for your servers](https://blog.thibmaekelbergh.be/2015/05/07/raspberry-pi-login-with-ssh-keys.html). On one side we have the private key which is encrypted and should never be exposed (otherwise people could act as you), and on the other side we have the public key which gets sent to a keyserver and is used to encrypt communication. The private key fetches this from the keyserver and then decrypts it. As a final step a trusted signature is added so GPG keys are known to be legitimate.

## Generating a GPG keypair
This tutorial assumes you took no prior attempts to get GPG up and running and starts from scratch.

You will need the gpg tools installed and available in your shell to generate a keypair. Binaries are available [on the official site](https://www.gnupg.org/download/). Most modern Linux distributions like Ubuntu and Debian have these preinstalled and for macOS you can install the latest version trough brew with `brew install gnupg2`.

Generate a key with `gpg --gen-key` which will start an interactive prompt. Use the default RSA & RSA which offers the best security for most purposes. Next you'll have to pick a byte size for the generated key. The higher the better in this case so let's choose for the maximum of 4096 bytes. GPG keys can have an expiration date (this is useful in corporate environments), but we are going to choose for it to not expire so we don't need to think about reinstating the keys. Just hit enter.

![Generating a key in the shell with the gpg tools](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,h_702/v1480418736/GPG signing commits/Screenshot_2016-11-29_12.04.36.png)

Next you will be asked to fill in some personal information. Fill this in accordingly since it makes the key more reliable if up-to-date and accurate information is used. __If you want to use GPG signed commits on Github make sure to enter a Github verified email address when asked for an email.__ Enter a secure passphrase (and store it somewhere like 1Password) to encrypt your private key.

Your key is now created and available in your security keyring (`~/.gnupg/secring.gpg`).

## Adding the key to our Github account
You can list the GPG keys on your system with `gpg --list-secret-keys --keyid-format LONG` which will output some info:

![Output from listing gpg keys](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,h_764/v1480418735/GPG signing commits/Screenshot_2016-11-29_12.09.06.png)

We need the ID of our public key to generate the raw key, which we'll need for connecting our Github account. This is the string for the `sec` listed key after the bytesize (`4096R/<ID>`).

Copy this and paste it into the following command which will generate raw key output for the public key and then copy the output:

```console
gpg --armor --export <ID>
```

Head over to your [Github settings for keys](https://github.com/settings/keys) and add a new GPG key. Paste the output from the GPG export. This is the public key and is now associated with your Github account.

## Singing commits
You need to tell git to sign commits and which key to use. You can do this easily by setting a directive in your .gitconfig file with `git config --global user.signingkey <ID>` where <ID> is the id you get from listing the keys like we did before.

You can now append a flag to sign commits with git:

```console
git commit -S -m "🎉 My first signed commit"
```

Instead of explicitly passing the flag to sign commits each time you can also tell your .gitconfig to sign commits by default with `git config --global commit.gpgsign true`. I recommend this since you'll never forgot to sign it then.
__Do note that GPG signing is only supported in the shell and using most Git apps like Github.app, Tower, GitKraken will not be able to commit or push if global signing is set to true. Disable it altogether or temporarily switch it off by setting it to false and back to true when finished.__

### Where to go from here
For macOS you'll likely need to store the passphrase in the macOS keychain. You could use `gpg-agent` for this but the fastest is to install [GPG Suite](https://gpgtools.org/) which contains an app which looks like the macOS keychain to manage keys. Open this up and follow the steps and your GPG key will be linked in the macOS keychain so you don't have to provide a password each time you sign a commit.

Besides signing git commits GPG is becoming more and more the standard for secure communication on the web. You could look into signing emails, IM client messages and basically most forms of communication.


More secure & reliable online collaborating with Git

Signing Git commits with GPG

Following my annual tradition below is a list of my (top 100) picks for the best musical releases of 2016. Sorted up to 50 and unsorted from 51, all including Spotify/Bandcamp link!

## Sorted
1. __[Floating Points - For Marmish Part II](https://open.spotify.com/album/6A1pJdVPTYVWVZjO76Iv9k)__
2. __[Radiohead - A Moon Shaped Pool](https://open.spotify.com/album/6vuykQgDLUCiZ7YggIpLM9)__
3. __[Radiohead - Spectre 7"](https://open.spotify.com/album/6xEJ4AkNz1FFNmDT2rbEjM)__
4. __[Bonobo - Kerala](spotify:album:23j5anOx7fWQkppFSHibzm)__
5. __[VA - LateNightTales: Olafur Arnalds LP](https://open.spotify.com/album/3qLaAoGvb7CVcibPj9lloh)__
6. __[Cliff Martinez - The Neon Demon Soundtrack](https://open.spotify.com/album/43fXL6iW6p3RYcrCqtFm5C)__
7. __[Melanie De Biasio - Blackened Cities](https://open.spotify.com/album/5wdRCtUOBw9Z32gskJV7h2)__
8. __[Soulwax - Belgica Soundtrack](https://open.spotify.com/album/4jxeDaVWTi22jnSsFGXNfX)__
9. __[Phillipi & Rodrigo - Karma / Gueto de Gent](https://open.spotify.com/album/4NjCGfP3nJ32GJBi9A5Ng7)__
10. __[Kaytranada - 99.9%](https://open.spotify.com/album/1dZZh7PvVgce1DDsDPzy8Z)__
11. [Anderson Paak - Malibu LP](https://open.spotify.com/album/6xNFuLOko8gjxi5kUAyGyM)
12. [Avalon Emerson - Whities 006](https://open.spotify.com/album/65lnxFX6QyjxKTuBmnGP7P)
13. [DJ Tennis - Divisions Chirality EP](https://open.spotify.com/album/1a0EXlXmrGMIRTdLmBh3FN)
14. [Floating Points - Kuiper](https://open.spotify.com/album/7LX76ZzzzU607KzCPa84Y7)
15. [Flume - Skin LP](https://open.spotify.com/album/3zXR5GOXPq0Uc7tWC9fO3X)
16. [Osias Drexel - Did Sally Come Home Last Night ? 12"](https://open.spotify.com/album/36ZJ8HpoUqk7ifs2zGgEoh)
17. [Frank Ocean - Blonde](https://open.spotify.com/album/3mH6qwIy9crq0I9YQbOuDf)
18. [Kendrick Lamar - untitled unmastered.](https://open.spotify.com/album/5WSPnYTQ6YZ1UvBRi5quhO)
19. [Ry X - Dawn LP](https://open.spotify.com/album/0ht6cjokjU8Xhwj6uABgfO)
20. [VA - DJ-Kicks Marcel Dettmann LP](https://open.spotify.com/album/5HQHaxaEIp8drAaikPxLZB)
21. [VA - When I Was 14 EP](https://open.spotify.com/album/0mF7VLLDlamFSwtGylcmtW)
22. [VA - Realm of Consciousness LP](https://open.spotify.com/album/3JhFuFkXfTCjXj4Uh6gx2w)
23. [Massive Attack - Ritual Spirit EP](https://open.spotify.com/album/6KHhT15M6l7cgaPZamEpM3)
24. [Vokx - Whorebag Sally 12"](https://open.spotify.com/album/7wesIAcsvZ7YV9JigZCQFY)
25. [Dyad - Fully Automated](https://open.spotify.com/track/4T9BRCf67vqjFy2pqLxvAA)
26. [Katy B ft. Floating Points & Four Tet - Calm Down](https://open.spotify.com/album/1sI5RWBvsLxjIuUN3ObeUi)
27. [Four Tet - Randoms LP](https://fourtet.bandcamp.com/album/randoms)
28. [Nonkeen - The Gamble](https://open.spotify.com/album/6OiYGUW5x94NZ1HDafHjor)
29. [Eefje De Visser - Nachtlicht LP](https://open.spotify.com/album/7yNdv6W2Pi7KdAdUvhNdxj)
30. [Eefje De Visser - Staan 7"](https://open.spotify.com/album/2wGkg8iAYlp7qn6GA3aqN6)
31. [Emika - Forever Never 12"](https://open.spotify.com/album/0ydH64asRVMyraqUCuPkWL)
32. [Paleman - PLMN001](https://plmn.bandcamp.com/releases)
33. [Bazart - Echo](https://open.spotify.com/album/1mVOoUVc1VPNxRF03Q1GFd)
34. Beyoncé - Lemonade
35. [Asa Moto - Stay Awake / Wanowan Efem 12"](https://open.spotify.com/album/4tcLwfBKPBDuV5vCiP3S8i)
36. [Âme - Fiori (Dixon Beat Edit)](https://open.spotify.com/track/5aqmmAq2z06xl8ZlYRUYdT)
37. [Huxley - Widow EP](https://open.spotify.com/album/3GVIgcsE3jPei6aNnZfUAJ)
38. [Astrid S - Astrid S LP](https://open.spotify.com/album/5xzkyCZ5LEOmI3a3bvrNIa)
39. [Brassica - Tears I Can Afford (Bicep Remix)](https://open.spotify.com/track/5zrqK6mwlGKWixTDE3Wfi0)
40. [Degray - The Source 12"](https://open.spotify.com/album/3KLujkq0plzLcVxj8d7lzf)
41. [Charlotte de Witte - Trip (TWR72 Remix)](https://open.spotify.com/track/0ezk4QBvKUsEPd6hz8ARLT)
42. [Blawan - Communicat 1022 EP](https://open.spotify.com/album/3jtgOkdb2GCEU0hdGKutJT)
43. [Isaac Tichauer - Higher Level (Bicep Remix)](https://open.spotify.com/track/4FtjMbx5rC3fUqcBJXhu1G)
44. [Kris Wadsworth - Infiltrator LP](https://open.spotify.com/album/5GTNmpxBYMwmrOCKkGqPvo)
45. [Jessy Lanza - Oh No LP](https://open.spotify.com/album/3NLppzZYJXk48NX2izubVW)
46. [James Blake - Timeless](https://open.spotify.com/track/2ZSFgKhbrnwgWm1fGNuXz3)
47. [Randomer - Running Dry](https://open.spotify.com/album/2EX6SnuicICeks8gfdQZ9m)
48. [DeNiro - The Penal Colony 12"](https://open.spotify.com/album/1KFfmA4LsjXmVl6M1v9KEo)
49. [Emmanuelle - L'uomo d'affari / Italove 12"](https://open.spotify.com/album/6g6DHknco9iNEvZn47eK8P)
50. [Florence + The Machine - Songs From Final Fantasy XV EP](https://open.spotify.com/album/5ZaWd8M09FAMH0otCM2M5D)

## Unsorted
* [Alex Smoke - Dire Need (Tale of Us Remix)](https://open.spotify.com/track/4HOgFHRpPShX0ON8Wd7KqF)
* [Alice On The Roof - Higher](https://open.spotify.com/album/2hXgRukJ3vDoZnkciCVUUv)
* [Alicia Keys - HERE](https://open.spotify.com/album/5M31iLPzYuYxkpSO5tBOMN)
* [Amelie Lens - Exhale](https://open.spotify.com/album/0xpZTYlKIAlMBnUBHOjNVO)
* [Andre Crom - Jaunde (Charlotte de Witte Remix)](https://open.spotify.com/track/716aUQxrISYyDXJc5Bvh46)
* [Autograf - Future Soup](https://open.spotify.com/track/3YpzbMsDalpQRTPxKcSQZV)
* [Awanto 3 - Pregnant / Star Butchers 12"](https://open.spotify.com/album/1L7kcGZAUDStiftt682LV7)
* [Banks - The Altar](https://open.spotify.com/album/3SzNTLHbVm0borYWkbrzf0)
* [Bob Moses - Days Gone By (Never Enough Edition)](https://open.spotify.com/album/75t6bYopVP4tdwmIWwJqfv)
* [Boys Noize - Midnight](https://open.spotify.com/track/54xw6kslTw2Nsqq1Dmhfs8)
* [Cassy - Move](https://open.spotify.com/track/19LU9wVnj6MluQhexGgSfx)
* Champion + Four Tet - Flip Side / Disparate 12"
* [Charlotte de Witte - Actually](https://open.spotify.com/track/7xsf7KfdutNE64jwUpclF9)
* [Charlotte de Witte - Sehnsucht EP](https://open.spotify.com/album/330p2OLBwiClucK0snIFxx)
* [Dense & Pika - Calf](https://open.spotify.com/track/423FglAU16uhY4ZT2RCWjv)
* [Detroit Swindle - More Everything Please](https://open.spotify.com/track/7uAtu8bPFwsTa0P6LaBifI)
* [Developer - Isolation Themes](https://open.spotify.com/album/6DdZwQy4VRnogLbL8IkH1F)
* [Disclosure - Moog For Love 12"](https://open.spotify.com/album/5m46i1yh7ZVulJxP3wMYDD)
* [DJ Shadow & Run The Jewels - Nobody Speak](https://open.spotify.com/album/4hr1dYdmEpiEUo0RRkZiKC)
* [Drake - Views LP](https://open.spotify.com/album/3hARKC8cinq3mZLLAEaBh9)
* [Ertebrekers - Otel LP](https://open.spotify.com/album/7cyOZoi5N3NQ7IwsNF8MfS)
* [Faces On TV - Run Against The Stream](https://open.spotify.com/track/11H5akLMxz4LK6UVHRS2QT)
* [Faces On TV - Traveling Blind](https://open.spotify.com/album/76XJq3lpUPoIJsvDxBGIif)
* [Falcons feat. Vanessa Elisha - I Won't Lie](https://open.spotify.com/album/751kdklRxM1wT2n6dpfuED)
* Folamour - Love Frequencies
* [Folded Like Fabric - Luxuries EP](https://open.spotify.com/album/3aBJuM1xG765Xx4j0wpIJr)
* [Frank Wiedemann - Moorthon EP](https://open.spotify.com/album/6oX7tqp7Oz0nsqJbdmaCTP)
* [GoldLink - Unique (Louis Futon Remix)](https://open.spotify.com/album/4dTUZocyH89lnTlc4ykZFN)
* [Hatzler - Skyt](https://open.spotify.com/track/7uhppPVCftjYphvUK237vZ)
* [Heiko Laux - Klockworks 17](https://open.spotify.com/album/36pwwZpRy2bsB7jfJ9P5bd)
* [Holy Oker - Back and Forth](https://open.spotify.com/track/3pS5SUvGmrzZUYjsWo7ISz)
* [Mami Wata - Soak It 12"](https://open.spotify.com/album/5xl3qtyJv1Zau4aZPtdUBd)
* [Justice - Woman](https://open.spotify.com/album/3Nkafp6ZTb1F0bTaAO0ePL)
* [Laila - Laila 12"](https://open.spotify.com/album/1u8kIsGeefyAw9TLcghYFE)
* [Lapsley - Love Is Blind (Sam Gellaitry Remix)](https://open.spotify.com/album/5UHknyKhnhX9mCYCS1bu1i)
* [Lianne La Havas - Say A Little Prayer (Live at Rock Werchter)](https://open.spotify.com/album/1qnarmzVjjfKblXEq7JFCq)
* [Machinedrum - Dos Puertas](https://open.spotify.com/track/1woz4Z9AapkQT9h0xzuIni)
* [Maggie Rogers - Alaska](https://open.spotify.com/album/6TeCurV02eCqCMwCMtM1tk)
* [Mark Pritchard ft. Thom Yorke - Beautiful People](https://open.spotify.com/album/6noHYqm7bQFbg1mql7W3M0)
* [Mura Masa - What If I Go](https://open.spotify.com/album/2ipaukFlPt1Auc29hD280g)
* [NAO - February 15](https://open.spotify.com/album/6iI212DhxMBlaIHfU0yeH5)
* [Paleman - Yrs Ago](https://open.spotify.com/track/3brkbysKTTjkJwnh5NnNKz)
* [Selah Sue - Reason Remixes](https://open.spotify.com/album/5mZphlwn5CU2eSMiDJYcFt)
* [SHDW & Obscure Shape - Die Weiße Rose EP](https://open.spotify.com/album/5tayKpUR44FvHiyE7GQEcd)
* [Snakehips & Anderson.Paak - Money On Me](https://open.spotify.com/track/2X1v0cUbDZXzi21L0yAH79)
* [Soulwax - Heaven Scent 12"](https://open.spotify.com/album/3h3n4PuvnhgigVDrTi6C87)
* [Submotion Orchestra - Colour Theory LP](https://open.spotify.com/album/6KJ8oH9XV1UqTPwU4jCiiV)
* [The Temper Trap - Sweet Disposition (Undercatt Remix)](https://open.spotify.com/track/1OWKp2D8NpYryRgKRjitp5)
* [Ten Walls - Italo](https://open.spotify.com/track/7bQmsWjrqGIfqYCh2OEwqD)
* [Vince Staples - Prima Donna LP](https://open.spotify.com/album/3HWbPFe9rkYloHbhbhqo44)


The best singles, 12"s, and albums of 2016

Best of 2016

I've known of the existence of multiplexers but rarely ever used them in the past. Recently though using the [screen] multiplexer became a vital addition to my work in the shell.

Getting a grasp of the basics (shortcuts, how it works) is fairly easy and to be honest you could even do most work with just creating and destroying an instance!

Screen is probably not the most popular multiplexer. There's also [tmux] which has a wider fanbase from what I heard but screen is perfect for everything I need.

## Installing
I assume this guide for a macOS machine. Apple has included screen into OS X/macOS for some years now.
Linux systems like Ubuntu & Debian typically don't come with screen, but can get it from apt easily with `apt-get install screen`.

There is one minor setback though: macOS currently still ships with a 2006 version of screen. There is the better [GNU screen][screen] alternative, which is updated but also offers some improvements like 256 color compatibility. We can easily install this from the [homebrew-dupes] tap.

```console
# macOS screen:
screen -v // Screen version 4.00.03 (FAU) 23-Oct-06

# homebrew screen:
brew tap homebrew/dupes
brew install screen
screen -v // Screen version 4.04.00 (GNU) 19-Jun-16
```

## Configuration
Screen is not installed and if you're not interested in making it easier with minimal configuration you could skip to the [next section](#creating-a-screen-instance).

Some basic stuff which will greatly help us is autocompletion. Put the following line in your `.bash_profile` or `.bash_rc` (or whatever your profile is):

```bash
complete -C "perl -e '@w=split(/ /,\$ENV{COMP_LINE},-1);\$w=pop(@w);for(qx(screen -ls)){print qq/\$1\n/ if (/^\s*\$w/&&/(\d+\.\w+)/||/\d+\.(\$w\w*)/)}'" screen
```

Screen also supports a [runcom] file called `.screenrc` in your homedir. Some good stuff to put in there:

```console
# Use login shell bash
shell -/usr/local/bin/bash

# Disable the startup message
startup_message off

# Set a large scrollback buffer
defscrollback 32000

# Always start `screen` with UTF-8 enabled (`screen -U`)
defutf8 on
```

Most of these are just about general gripes with screen. The `shell` one might be important in some cases. For example I had a python pip module which was loaded from my homedir but wasn't recognized when starting a screen instance due to screen launching the default macOS shell instead of my more up-to-date brew bash shell. The login shell also might be important, depending of how you load your shell. If this paragraph made zero sense to you you're probably better of removing the first 2 lines in the `.screenrc`.

You're all set now to dive into using screen!

## Creating a screen instance
Screen works by using different instances of a shell. There are some different ways to start an instance, the most rudimentary and common being just running `screen` and watching it launch a new instance:

![screen](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1480870379/screen/screen.gif)

This is good if you just want to launch a quick instance. When launching multiple instances or keeping some order in your instances assigning a tag is more suited. You can launch a tagged instance with `screen -S <tag>`:

![screen -S demo](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1480870379/screen/screen_-S.gif)

You can now run scripts and programs and it will be contained into this multiplexed instance.

## Detaching or quitting an instance.
You might find it hard finding how to go back to your original shell since hitting ctrl + C or esc won't do anything. That is because to get out of the instance you need to know the special shortcuts. There is a difference: detaching an instance will return you to the original shell but will keep the instance alive so we can reconnect to it later. Detach an instance by hitting __`ctrl+a` and then `d` (so `ctrl+a d)`__.

If you instead want to quit an instance and kill it completely you'll roughly need the same combo:
__`ctrl+a :` and then type quit (so `ctrl+a :quit`)___. It goes without saying that this will immediately kill the programs running that were running in the instance.

## Listing alive instances
Much like any other program the `-ls` flag will output instances that are alive so you can reconnect to them:

![screen -ls](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1480870379/screen/screen-ls.gif)

## Reconnecting to an instance
If you don't use tagged instances you can just reconnect by running `screen` again. Tagged instances however can be reconnected to using the `-r` flag:

![screen -r demo](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1480870379/screen/screen-r.gif)

## Now what?
Maybe you're wondering why you would need this if you instead could just open up a new tab in Terminal and let it run there. Let me tell you why.

Your terminal tabs can come polluted really quickly. Imagine working on a web project which needs to run a server, have a build tool running and possibly a linter of some sort. You'd need about 3 tabs to run these and you'll possibly want to have an extra tab to run commands like tests or git from, resulting in another tab being added. And I mostly like to keep a tab open at $HOME if I'm in terminal with tabs so that would be 5 tabs…

Screen solves this by effectively hiding your 'tabs' as instances so you can have just the terminal open for working in your project directory.

Another great use for multiplexing is to create makeshift daemons. In macOS you could create a launchagent or on Ubuntu you could create a systemd unit to have your server running in the background and being able to manage it. This works great for some purposes but if you're quickly fiddling around with stuff or a new side-project you typically don't want to put effort into creating a new systemd unit, just to run a node server in the background. With screen you could just launch a tagged instance `screen -S nodemon` and then detach it to have it running in the background. You can easily check back if for example an error occurs on the server, by just reattaching the instance.

This being said, the above is all you basically need for using screen in most common scenarios. There's way more to go from here though, you could read up the [man page] for screen or check out the GNU webpage for it.


[screen]: https://www.gnu.org/software/screen/
[tmux]: https://tmux.github.io/
[homebrew-dupes]: https://github.com/Homebrew/homebrew-dupes
[runcom]: https://unix.stackexchange.com/questions/3467/what-does-rc-in-bashrc-stand-for
[man page]: https://www.gnu.org/software/screen/manual/screen.html

Get to know the basics of using a multiplexer like screen to run your shell scripts and tasks without having to keep terminal open

Using the screen multiplexer for hidden shell work

So [yarn]… I remember stumbling upon it on Twitter, reading the initial announcement and immediately find myself thinking they've invented the holy grail of dependency management. I decided to install it right away, the only installation method provided at the time being by curling it to sh.

I was blown away by the speed, ease of use, better syntax and nicer 'UI'. Now, 4 months later, I've completely come to hate it, advising in my Contribution guides to not use this for projects.

About a month ago I decided to create a webapp that served as a [showreel for student work from Devine students]. Since I was deploying on Heroku, I did not find it necessary to go all out on devops solutions like Docker, so decided to create this local and just deploy to heroku from master. Deps were managed with yarn and it worked great locally so I decided to push this to the cloud.

I used [zeit/serve] to serve the static content but immediately on checking my Heroku dyno which started building everything failed to run. I checked the logs and saw a dependency was missing which failed to start the serve dependency. With this in mind, I headed over to the Slack team for zeit and asked it there. Nobody could make up why it was failing, but then came the magic words:

> "Try deleting your lockfile and see what that does"

Heroku uses yarn when it finds a Yarn.lock in the project. So I deleted that, deployed again and sure enough the app was running and not missing the dependency anymore. How was it that a dependency tool was breaking my entire build (probably due to caching behavior)? For me, having yarn interfere here was the greatest reason to ditch it.

But that's just one of the many scenarios that I've came across in these months of using it. Another thing that really gets under my skin is the fact that they don't have any good guidelines about how to install yarn the correct way. Take a look at the [installation page] and see what the recommended method of installing is for macOs:

> You can install Yarn through the Homebrew package manager. This will also install Node.js if it is not already installed.

Alright cool, yarn is available on my favorite package manager. Unfortunately the _'if it is not already installed_ only counts if node is not already installed __with brew__. Thus, using a version manager like nvm (which, let's be honest, saves you a lot of work) won't work since then `brew install yarn` with install node and yarn in brew, rendering nvm useless because brew will take precedence over nvm. I could just unsource it and use nvm, but this would leave me with a 100MB+ straying dep installed from brew. [Oh and there is no flag to skip the node dependency].

> Let's also quickly mention here that using nvm and yarn is pure hell for global modules, since they're unmigrateable and upgrading your node version will unsource them all from the PATH!

OK, so brew isn't an option. Taking a peek at the [Alternatives] you can see npm is also listed there. I've already got node & npm trough nvm so let's install yarn with npm right?

> Installation via npm is generally not recommended. npm is non-deterministic, packages are not signed, and npm does not perform any integrity checks other than a basic SHA1 hash, which is a security risk when installing system-wide apps. For these reasons, it is highly recommended that you install Yarn through the installation method best suited to your operating system.

So as you see, using npm is strongly discouraged by yarn. They recommend using _'the method best suited to your operating system'_, but we of course already know that won't be the case.

Which ultimately leaves us with a last option, which frankly works 'the best' of all. That's the original method of installing when they released it to the public:

> One of the easiest ways to install Yarn on macOS and generic Unix environments is via our shell script. You can install Yarn by running the following code in your terminal: `curl -o- -L https://yarnpkg.com/install.sh | bash`

This installs much faster than any other method (which is why CI, CD and cloud services use it), but has one of the biggest disadvantages of all: it's not upgradable.
Initially we had `yarn self-upgrade` to rerun that curling to bash and upgrading our yarn version. But the yarn team decided [it was better to ditch that]. So upgrading means you'll manually have to re run that command.

To sum up: I want to love it. I love the speed. I love the UI. I love the fact that it comes from the Facebook OSS team. I love that fact that it inherits principles from rubygems and that it tries to solve the issues currently present in npm. But I hate the fact that it introduces more aggravating issues by trying to solve npm's. So long story short, I'll be ditching it for anything not related to quickly fetching from the registry when working on a project locally, with Docker. Perhaps when they release v1 I'll completely change my mind…



[yarn]: https://yarnpkg.com
[showreel for student work from Devine students]: https://devinereel.herokuapp.com
[zeit/serve]: https://github.com/zeit/serve
[installation page]: https://yarnpkg.com/en/docs/install
[Alternatives]: https://yarnpkg.com/en/docs/install#alternatives-tab
[Oh and there is no flag to skip the node dependency]: https://discourse.brew.sh/t/yarn-depends-on-node-but-i-have-non-homebrew-node/545
[it was better to ditch that]: https://github.com/yarnpkg/yarn/issues/1187

A 4 month later review, summarising why I'll ditch yarn

What does Yarn actually want?

Well this is a long overdue. I was planning on doing this when initially starting out with the blog, but never found a good time to do it.

Because I'm moving to Berlin in a month, I decided to take a good look in my backpack and only include what I really need, or really want to have with my at all time. This of course came as the ideal excuse to take some pictures and finally post them here!

## The backpack
My backpack is an older __Incase City__ backpack. It's a great backpack in terms of comfort (well padded), look and water resistance. I bought some cool patches and sewed those one to give it a less dull look.

![My Incase backpack](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,h_1921,q_auto:best/v1485377112/whats%20in%20my%20bag/_DSC0018.jpg)

The backpack itself has a 15" laptop compartment and a lot of extra pockets for keys, notebooks and cables. I rarely use it, but the bottom padding at the back has a zipper so you can store stuff there too! It's really a pity they don't make these anymore.

## What's inside?
In the past I used to carry a lot more stuff in the backpack but nowadays it comes down to this:

![Inside of the bag](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,h_1531,q_auto:best/v1485377109/whats%20in%20my%20bag/_DSC0002.jpg)

* __Electronics:__ [Wacom Bamboo Spark](https://www.amazon.com/Wacom-Bamboo-Gadget-Pocket-CDS600G/dp/B010PKT6C2/ref=sr_1_2?ie=UTF8&qid=1485433916&sr=8-2&keywords=wacom+bamboo+spark), iPad Mini (_unfortunately still the first model which I rarely use for stuff other than reading books or comics_), cheap portable power bank (_2-port with a 2A & 1A USB port_), [Sony HDR AS-10](https://www.amazon.com/Action-Sony-HDR-AS10-Discontinued-Manufacturer/dp/B0090EC5NC/ref=sr_1_2?ie=UTF8&qid=1485434008&sr=8-2&keywords=sony+hdr-as10) & mounts.
* __Cables__: A Cat 6e UTP cable with a [Belkin Ethernet to USB 2.0 adapter](https://www.amazon.com/Belkin-USB-2-0-Ethernet-Adapter/dp/B00E9655LU/ref=sr_1_1?ie=UTF8&qid=1485434078&sr=8-1&keywords=belkin+ethernet+usb) (_I use an Apple Thunderbolt Gigabit Ethernet adapter at home, the USB adapter is mainly for emergency network situations_), [Urbanears 1.2M MFI Lightning cable](https://www.amazon.com/Urbanears-Concerned-Charging-Cable-156255/dp/B01F9A9HEA/ref=sr_1_2?ie=UTF8&qid=1485434107&sr=8-2&keywords=urbanears+cable) (_seriously, ditch your Apple cables and get this one_), Mini USB to USB, Micro USB to USB, Apple Earpods.
* __Accessories__: Apple 5W USB charger, [SanDisk 32GB USB3 Drive](https://www.amazon.com/SanDisk-Ultra-Transfer-Speeds-s-SDCZ48-032G-UAM46/dp/B00KYK2AKO/ref=sr_1_fkmr2_1?ie=UTF8&qid=1485434153&sr=8-1-fkmr2&keywords=SanDisk+32GB+USB3+Drive), Libratone 4GB USB2 (Promotional) Drive, MicroSD to SD adapter.
* __Offline material__: Pocket Deodorant (_regular size is a bitch to fit in with the rest_), [Moleskine Pocket notebook](https://www.amazon.com/Moleskine-Reporter-Notebook-Pocket-Notebooks/dp/8862932987/ref=sr_1_16?ie=UTF8&qid=1485434181&sr=8-16&keywords=moleskine+pocket+blank) (_blank_), Devine notebook, [Hay Line Dot notebook](http://hay.dk/m/productzoom.php?top=acc_rugs&mid=Office&img=4&pid=line-dot) (_blank_), a train card for commuting between Bruges & Kortrijk, a biro, [Blox silicone earprotection](https://blox.info/en/produit/blox-disco-4/) (_these are cheap and work great!_), Zara mini perfume, Kleenex (_I'm a runny nose person_), a mini screwdriver (_lifesaver in those situations when you actually need them for a change_), Laguiole Swiss Pocket Knife (_super sturdy_)!

![Pic](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,h_1846,q_auto:best/v1485377105/whats%20in%20my%20bag/_DSC0007.jpg)

![Pic](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,q_auto:best,w_2882/v1485377102/whats%20in%20my%20bag/_DSC0008.jpg)

To me this is the everyday toolkit. I'm pretty sure once I live in Berlin for 3 months I'll probably swap some stuff out for others though.


Because I’m moving to Berlin in a month, I decided to take a good look in my backpack and only include what I really need. This of course came as the ideal excuse to take some pictures and finally post them here!

What's in my bag?

Since the purchase of my 3rd gen Apple TV the 1st gen I once bought was just collecting dust, I had jailbroken it before to run XBMC and Boxee but this time I couldn’t immediately think about a good use for it.

Internet told me it was possible to run OS X Tiger (10.4.8) on the ATV and I was determined to try that at first but then I found another way to use it: a local network server.

I’ve successfully set-up a linux machine with the [smb](https://en.wikipedia.org/wiki/Server_Message_Block) protocol just three days before and that worked great too but this was a much easier option.

### Step 1: Preparing the jailbreak

All file transfer is done over [SSH](https://en.wikipedia.org/wiki/Secure_Shell) and out of the box the Apple TV is just something which only accepts file transfer from iTunes. In order to get SSH I will need to jailbreak the Apple TV.

First I had to download the latest firmware for my Apple TV. When this was over I just used atv-usbcreator to get ready for jailbreak and create a Patchstick.

You can find it over at [Github](https://github.com/davilla/atvusb-creator). I downloaded the Mac version but it failed each time when creating the USB. So I downloaded the windows version instead and created the USB (steps are fairly easy and can be followed here). Be sure to include SSHTools in the USB image, else it won’t work!

### Step 2: Jailbreaking

With your freshly created USB Patchstick go over to your Apple TV and pull out the power supply.
Insert the USB and plug the power cable back in. Hold the (-) and menu key when your Apple TV is booting up (keep holding if you don’t see anything for at least 5 seconds).
The Linux logo will appear and the patching process will start. When the commands stop running and you see something like “Unplug the device” you can unplug the power supply again and remove the USB.

Let the Apple TV turn on again and you should see the Launcher menu now. If you don’t need XBMC like I do, just let this be. SSH is now installed and that’s what we wanted…

### Step 3: Connecting over SSH

There are various options to communicate trough SSH but the safest, easiest way is to go over Terminal.

Open up Terminal and enter `ssh frontrow@appletv.local`

The above command connects to the AppleTV over the SSH protocol with username frontrow. `.local` uses the Bonjour protocol and works only if you’re on the same network as the AppleTV. If you’re not just enter the AppleTV’s IP address.

![Logging into Apple TV trough Terminal](https://31.media.tumblr.com/47aed319295c75f12ffa296fb9b73534/tumblr_inline_n1mah3gAyD1sn0bkh.jpg)

A password will be prompted for, enter **frontrow** (you won’t see it on screen it’s a UNIX security measure) and hit enter.

### Step 4: Installing NitoTV

Now we’re connected enter the following commands:

```console
cd && mkdir nitotvtmp && cd nitotvtmp
wget https://nitosoft.com/nitoTVInstaller_tt.zip
unzip nitoTVInstaller_tt.zip && cd "nitoTV Take Three"/
sudo ./installme
```

This creates a temp directory for nitoTV to setup and then downloads and extracts the package from the official site. `sudo./installme` runs the installer from the package.

If the Apple TV doesn’t automatically reboot just enter sudo reboot now and it will, don’t close Terminal just yet!

### Step 5: Installing USB support

With nitoTV installed all that is needed is to install USB support. With Terminal still open enter `cd ~/Documents/` to cd to the Documents folder.

We’re now going to download Tiger OS X combo update to install the drivers with

```console
wget https://supportdownload.apple.com/download.info.apple.com/Apple_Support_Area/Apple_Software_Updates/Mac_OS_X/downloads/061-3165.20070313.iU8y4/MacOSXUpdCombo10.4.9Intel.dmg
```

If you want you can close Terminal now, the installing is over.
Go to the Apple TV and in the NitoTV menu go to `Settings > Install Software > Smart Installer`, this will take a while and display a dialog with installed components.
Hit restart or just disconnect and connect the power supply to reboot, connect a hard drive and we’re done, all that’s left is to access the files.

### Step 6: Accessing The Files

We will need a SSH client to view the files. I’m perfectly comfortable with Terminal but some users might want a user interface to do this.

On Mac I mainly use [Transmit](https://panic.com/transmit) to connect to the Apple TV.
Open up Transmit and for easy setup go to the Bonjour tab where the Apple TV should be listed, double click it and enter the password and username and the files should appear

![Using Transmit to connect over SSH](https://i.imgur.com/GFF7fmA.png)

If in some case Bonjour doesn’t work or you are not able to connect over Bonjour but can use SFTP just click the SFTP tab and enter the following credentials:

![Filling in credentials for SSH in Transmit](https://i.imgur.com/BU527Yh.png)

Now you have full access to all the files stored on the Apple TV itself which has a 40GB HDD, but also the external HDD you might connect.
External storage devices are found on the path `mnt/Scratch/Volumes`.

> Note that Tiger doesn’t support ExFat so go for either FAT or HFS)

Files can be drag’n dropped into the window as you’re familiar with.

#### Notes & Pictures

> Remember the Apple TV isn’t a powerhouse machine so file transfer speed might be a little slow, I managed to get 3,4MB/sec when transferring from my MacBook to an external HDD.
Also this machine get’s very very hot! Don’t store it with anything which’ll burn easy or place anything on top, keep it in an open or cooled enclosed area. Don’t leave it always on, unless you want your house to burn down.

![ATV server in a box](https://media.tumblr.com/412a80a16ed11c037dd3adef53c63e4a/tumblr_inline_n1maf7RrPw1sn0bkh.jpg)

![Another picture of the box](https://media.tumblr.com/c355ce3d7bba9d202d5e8099ebbd4d4e/tumblr_inline_n1mafyEjsi1sn0bkh.jpg)

![All put neatly away](https://media.tumblr.com/9d17a10fefc63eacb27e42f2c8473bd9/tumblr_inline_n1mageRkFS1sn0bkh.jpg)


That old 1st Gen Apple TV - Converting it to a local server

Before we start off, let's give some background as to how this blogpost came to be. I can imagine lots of people may think the same as I do but don't find the right approach to accomplish the topic of this post.  
Connected to my Raspberry Pi is an external HDD with my series, backups, disk images, etc on it. It always served its purpose shared over smb, that allowed me to easily transfer files on my MacBook by simply connecting to the network drive. It had one limitation though and that is that the files (since shared over smb) are only accessible on my local network. If I was at school I had to Facetime my brother and tell him how to connect, where to find the files, download them to his computer and send them over to me via iMessage. You get how cumbersome that is.

So enter ownCloud, a promising platform built on PHP that puts your 'own cloud' on the server (a Raspberry Pi in my case). I had dabbled with it in the past but never got around to set it up the right way. So, I decided to do it good this time, set it up, get SSL, add my external hdd as a source and have my files available everywhere.

## OC Data dir, ownerships and …php
I spent the largest part of October working on getting this in order. It proved to be a difficult path since there is so much to take into account when trying to do it good. First off, I wanted a performant web server so went for Nginx. I later had to decide to run ownCloud trough Apache and use Nginx as a reverse proxy for Apache's port.

Owncloud runs as the `www-data` user which posed a lot of problems for my current ownership rights on my files. This was the easiest to overcome though.

Oh and if you're running a Debian 8 based distro (Jessie) on your Pi, don't even bother to try and install php7 to run ownCloud on. That was straight (dependency) hell.

## Ready for migrating?
So OC was set up but it seems like OC doesn't work in the way that you can multiple/external sources to your server. Everything OC displays as files & folders to your user is described as `data_directory` in the `config.php` for OC. Setting that to the root of my HDD didn't work because it doesn't read current directories & files, but creates a new datadir per user. So now what? How do I succesfully get my files on OC, giving them rights, not messing them up and still making them available over samba?

Actually with a little bash knowledge and a quick look in the OC v9 docs it was easier than I would've figured. Let's start off by inspecting current folders with `ls -l`. I also checked the filesize with an `fs` custom function so that it is clear these folders were rather large to migrate.

![ls -l output for directories](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,h_764/v1477993064/Owncloud Migration/Screen_Shot_2016-11-01_at_10.09.58.png)

So all folders I needed to migrate are owned by `pi:pi` and the Owncloud data dir (Owncloud/username/files/) is owned by `www-data:www-data` (Debian default web user). That already made it harder to move files around with `mv`. I decided to, instead of switching users, just use the root user to move the directory to the OC data dir. Before starting I quickly exported an env `$OWNCLOUD_DATA_DIR` so I could have that as a shortcut. This way we could quickly migrate with:

```shell
# Export an env so we can use it as a shortcut everywhere else
# opt. put this in your ~/.exports or ~/.bashrc
export OWNCLOUD_DATA_DIR=$HOME/Library-2/Owncloud/

# Move the folder to OC data dir (be careful not to append trailing folder slashes!)
sudo mv <folder> $OWNCLOUD_DATA_DIR/<user>/files/<folder>
```

![rights are in order](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,h_795/v1477993064/Owncloud Migration/Screen_Shot_2016-11-01_at_10.13.00.png)

Migrating was instant since we're moving on the local fs. Checking the above screenshot you can see the rights are still the same of course. Own the folders to the ownCloud user and change the permissions to octal 755:

```shell
# Recursively own the folder to www-data
sudo chown -R www-data:www-data $OWNCLOUD_DATA_DIR/<user>/files/<folder>

# Set permissions so www-data has rwxr and group has read.
sudo chmod 755 $OWNCLOUD_DATA_DIR/<user>/files/<folder>
```

## \<rage>WHY ISN'T OWNCLOUD SHOWING MY FILES?\</rage>
![OC is not showing the files on the server's frontend](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,h_667/v1477993064/Owncloud Migration/Screen_Shot_2016-11-01_at_10.13.38.png)

Even though my permissions and ownerships are in order on the Unix fs they weren't showing up in the OC frontend.
My rage started to transform into immense sadness but then I found this in the [OC v9 docs for occ](https://doc.owncloud.org/server/latest/admin_manual/configuration/server/occ_command.html#file-operations-label):

> occ has three commands for managing files in ownCloud…
>
> …The files:scan command scans for new files and updates the file cache

So the `occ` binary located in OC's installation path (eg. `/var/www/owncloud`) could accomplish what I needed to wrap this post up! A quick test in the shell with some dummy files proved to work. A recommendation though:
since `occ` scans every file and not only the changed files you're probably best to move all the folders on the local fs first and then scanning them. If you work in you're Raspberry Pi's shell headless like me, I **strongly** recommend that you run the occ scan command in a multiplexer like `screen` since the process can take really long when you have lots and large files & folders, and closing the ssh connection will stop the scan.

I also made an alias for future use, and had to set screen to use /bin/bash as a login shell so I could access my alias:

![setting up screen and oc_rescan alias](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,h_747/v1477993064/Owncloud Migration/Screen_Shot_2016-11-01_at_10.30.10.png)

In your new screen instance you can now run `oc_rescan <user>` to start the scan, quit the instance, exit your terminal and check back once done and all the files will now be in OC & the local fs.

![oc_rescan scanning the files in screen](https://res.cloudinary.com/thibault-maekelbergh/image/upload/c_scale,h_702/v1477993069/Owncloud Migration/Screen_Shot_2016-11-01_at_10.30.58.png)

Hope this was insightful and if you were in the same issue as me it's now solved!

> __PS: If you (like me) backup development folders with node_modules I'd clear them first. They include a humongous amount of files and take awfully long to process in `occ`. You're best of clearing them first with this command, since you probably don't want them backed up anyway:__
>
> ```shell
> # . should be your root folder with dev projects (or your external hdd root perhaps…)
> find . -type d -name 'node_modules' -print0 | xargs --null /bin/rm -rf
> ```


Easily migrate existing files and folders from an external HDD to your ownCloud's data directory

Manually migrating existing data to ownCloud

> __2019: Note that more recent versions of the Linux Kernel have come out for the Raspberry Pi and this guide might be outdated or obsolete.__

An example of a usb network adapter that uses this chipset is the popular and cheap TL-WN752N which you can get for around 10 euros.

Unfortunately though there’s both a v1 and a v2 of this dongle and the v2 uses the r8188eu which isn’t present in the kernel of each latest Raspbian. It still requires either manual compiling or installing of the kernel files.

Luckily things can be done really easily.

### Using an installer script (recommended way)

Some guys over at the Raspberry Pi forums wrote a great documentation and installer script to automatically match a download of the kernel files with the kernel you’re using.

I like to create a new folder in ~ for this called drivers and then download the script there.

```bash
mkdir drivers
wget https://dl.dropboxusercontent.com/u/80256631/install-8188eu.tgz
tar -zxvf install-8188eu.tgz
sudo ./install-8188eu.sh
```

Running this will match kernel version retrieved from `uname -a` with the downloads in the forum topic and put them in the right places and in the modules.
It might be a good idea to [update your kernel](https://blog.thibmaekelbergh.be/2015/04/02/setup-r8188eu-with-raspbian-the-easy-way.html#troubleshooting).

> **Warning: doesn’t work for 3.18.11+. See Troubleshooting section for more info.**

### Copying over the required files

One way I tried before is to download the kernel files and just copy them over to the right directories. This requires quite a lot of sudo so maybe log in as root with `sudo su` or prefix commands with `sudo`.

This requires you to get the files on the Pi so either use a wired connection or [hook it up to your MacBook](https://blog.thibmaekelbergh.be/2015/02/16/bridging-wifi-to-the-raspberry-pi-over-ethernet.html).

Download the files first with wget and then unzip them to get the files from the compressed archive.

```console
wget https://cdn.thibmaekelbergh.be/8188eu.zip
unzip 8188eu.zip
```

The uncompressed archive contains both a .ko (kernel object) and .bin (binary driver).

Now copy the .ko to it’s corresponding folder, automatically matching your kernel version with: `sudo cp 8188eu.ko /lib/modules/$(uname -r)/kernel/drivers/net/wireless`

The same goes for the driver but in another path: `sudo cp rtl8188eufw.bin /lib/firmware/rtlwifi/`

Now that both files are in the right directory, create the dependency for r8188eu by running `sudo depmod -a`.

[Add your network](https://weworkweplay.com/play/automatically-connect-a-raspberry-pi-to-a-wifi-network/) to the interfaces and reboot and it should work.
A green light should flash now and dmesg output should be like:

```console
DHCPDISCOVER on wlan0 to 255.255.255.255 # Discovery trough the subnetmask of your router.
DCHPOFFER from 192.168.0.1 # Your router which is offering from a DHCP lease.
bound to 192.168.0.101 #The IP assigned to the Raspberry Pi.
```

### Building and compiling from source

You can find the source for the kernel files at the [Github](https://github.com/lwfinger/rtl8188eu) repo.

#### Troubleshooting

- Latest kernel 3.18.11+ has no drivers and kernel objects for r8188eu yet. My best solution is to downgrade to 3.18.10 with `sudo rpi-update 8751db9fd7138848c29cc55ec05f95c9eea80acb` and using the first method. It’s just a matter of time until files are online for 3.18.11+ though.
- Make sure the adapter is connected by running `dmesg | grep r8188eu`. Output should be something like: `[ 128.432309] usbcore: registered new interface driver r8188eu`
- Make sure you’re network has no MAC-filter or heavily configured firewall. If you’re network settings differ from those in the wpa_supplicant.conf, adjust them accordingly.
- Sometimes kernel versions might not match or you’re just better of updating the kernel. Use hexxeh’s built in kernel updater by running `sudo rpi-update`. If the command is unavailable to you, use hexxeh’s repo to manually install the [Raspberry Pi-update tool](https://github.com/Hexxeh/rpi-update).
- Outputting the usb connection with `lsusb` for the adapter [will not work](https://raspberrypi.stackexchange.com/questions/27462/wifi-dongle-not-appearing-in-lsusb).
- You can check if the module is listed as dependency, active and recognized with `modprobe 8188eu`


Up to date installation guide for the TL-WN752N wifi dongle

Setup r8188eu with Raspbian the easy way

[SSH](https://en.wikipedia.org/wiki/Secure_Shell) is a great networking protocol. Secure, fast and commonly-used are probably some of the reasons why it’s the default for communicating with your Raspberry Pi. But having to type in a password each time you log in sucks.

Luckily SSH has these things called keys which you can use for password-less logins. Using SSH keys is really simple if you have a basic understanding of networks (like really basic) and the shell. Once you get the idea you could basically use SSH-keys for anything SSH related, from Github to Digital Ocean and Vagrant.

## Generating SSH Keys

Setting up SSH keys is always the first thing I do on new Raspberry Pi images, but before doing so I like to install Bonjour on the pi first because then you don’t have to lookup IP’s.
*Avahi sometimes requires an update first.*

```console
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install avahi-daemon --fix-missing #I had some errors without fix-missing flag
```

Safest way is to reboot your pi, but `sudo service avahi-daemon` restart works just as well for our setting up right now.

Ok so now that is configured, it’s time to build the actual ssh keys.
Everything we do will typically be stored in a hidden directory in the home folder called `.ssh`. Generating a new key there is as easy as:

```console
ssh-keygen -t rsa -C "example@example.com"
```

This creates a new key with the RSA type and creates it from the comment email address you provide.   ssh-keygen will ask you for a password (make it secure) to create the new keys.

This will generate two new keys in the `~/.ssh` directory, called `id_rsa` and `id_rsa.pub`. It’s important to pause and think about how they act.
The first one is your private key and the .pub one is the public one. Typically, matching keys will require you to provide the public one to a service (Like Github, or the Pi login over SSH) so it can identify you. The first private key matches with the public one to authenticate you.

**Never ever ever ever post the contens of id_rsa anywhere, this could lead to a huge security hole in your machine.**

Now there are two options to match keys with the pi:

### ssh-copy-id

There’s this great application called ssh-copy-id which automatically matches the contents from the public key to a ssh host.
On Linux it’s mostly installed by default, but OS X can install it from brew with: `brew install ssh-copy-id`.

Now you can just match the key by running it and providing an ssh host:

```console
ssh-copy-id pi@raspi.local
```

Provide the password once more and keys should be matched. Try logging into your pi and you shouldn’t be asked for a password.

### Manually copying the contents

Get the contents of the public key with `cat ~/.ssh/id_rsa.pub` and copy them somewhere.

Log in to your pi and enter the ssh directory. Create it if you dont have it with `mkdir ~/.ssh`.
Typically the key authenticator is not present on a new Raspbian install so create it with:

```console
touch ~/.ssh/authorized_keys && nano ~/.ssh/authorized_keys
```

Paste in the contents of id_rsa.pub you copied before, save and exit.
Now log out of the pi and log back in. No password should be provided.

## SSH config

As an extra you could provide some info in ~/.ssh/config on your main machine to make logging in even easier:

```console
host pi
  hostname raspi.local
  user pi
  port 22
```

Now logging in is as simple as `ssh pi`.


Improved ease of use & security by using public & private key pairs on the server

Raspberry Pi login with SSH keys

With my various attempts to try and setup Wifi and internet on my pi I was going back
to using it exclusively over ethernet with it directly hooked up to my router.

The pi was powered trough the USB port of my modem, which supplied just enough
power to run the B+ and A+. Alas I didn’t thank and in an unfortunate attempt to
update my older Raspbian distro to the new UI on my A+, I overcharged the USB port on my modem.

So now I was both out of power and out of internet on the pi.
The network infrastructure is not that good in-house and I’m constantly working on it.
I have enough power sockets at my desk but no wired connection to the internet.
This got my thinking for a more creative solution to fix the issue.

I figured in theory it should be possible to hook up my pi to my MacBook and use my
MacBook’s Wifi connection and tether it to the pi. Turns out all I needed was **OS X 10.7+**
and a **UTP cable** (and a Thunderbolt to Ethernet adapter in my case of having a retina MacBook).

Hook up the cables to the pi while it is **powered off**, go to `System Preferences → Sharing` and enable the following settings:

![Screenshot of the sharing menu in OS X](https://imgur.com/SpOPnNW.png)

Choose the Wifi on the MacBook as entry point and send out trough the Ethernet port / adapter.


Steps to help you bridge a wifi connection from a MacBook over to a Raspberry Pi

Bridging Wifi to the Raspberry Pi over Ethernet

I’m pretty much in love with Atom (and ditched Sublime for it) and could go on an on about how amazing I think this text editor is. The way it handles snippets with CSON for example or how easy it is to manage packages or to sync your settings with Dropbox, etc.

One thing I did miss though was my trusted ToyChest theme from Coda.  
Jackson Gariety who made it brought support for a bunch of editors but sadly Atom didn’t have a good port of this so I decided to look up the Atom.io Docs to see how hard it was to port it myself.

Turns out it’s really really easy to convert a .tmTheme to an Atom theme (which is written in LESS) and then publish it on APM (Atom Package Manager, similiar to npm).  
All it took were some commands in Terminal, a git repo and a publish command.

### Converting the package

You need Atom’s commandline utils installed for this, on OS X this installs on default when you install Atom.  
If you don’t have apm, check the bottom of this page on how to install.  
It appears apm has a handy tool installed to easily convert any TextMate .tmTheme to Atom’s convenient LESS syntax.

All you have to do is run `apm init --theme ~/.atom/packages/atom-toychest --convert toychest.tmTheme`  
Specify toychest.tmTheme to the location of the .tmTheme you want to convert.  
All this command does, is parse the plist syntax from TextMate Themes and converts it to to LESS flavoured CSS.  
The beauty of it all is that using apm, Atom will automatically create a `package.json` and other repo-required files.

### Publishing to APM

Now the theme is located in `~/.atom/packages` it should appear in Atom’s preferences (mine took a reboot of Atom). Publishing it to APM, is really really easy.
Just open the theme folder in terminal (e.g `cd ~/.atom/packages/myTheme`) and create a new git repo with `git init`.
Next you’ll want to create a new repo on Github and add it as an origin with `git remote add origin https://github.com/…`.

Before you sync, make sure you edit the `package.json` so the default data becomes your data. APM writes some defaults and you’ll want to overwrite these.
It’s important to edit the repository field to the repo on Github.

Almost there. All that rests now is to run `apm publish minor` to publish it as a minor release (0.x.0) to apm.

Be sure to check out my ToyChest port on apm by either:

- Running `apm install atom-toychest`
- Searching in Atom’s Themes in the preferences
- Checking out the repo: https://atom.io/themes/atom-toychest


Creating a package for Atom is dead easy

With the current state of design and possible technologies and possibilities, some claim it’s time for Photoshop to hand over the throne. The fanbase for Sketch and Affinity is vastly growing and while those are great tools and I’ve tried working with them a lot, they still aren’t possible to beat Photoshop in a lot of ways.

Adobe knows Photoshop is a web designers home, so over the last year they made effort to improve it for designers, trying out new features and implementing stuff from Sketch and others.

For me, Photoshop feels **more powerful than ever** and I’ve really learned to enjoy working with the new Photoshop. Following a **modular** approach it’s now much easier to find specific layers, change states and alter appearance.

In this post I’ll be showing you an example of a modular approach on design in Photoshop.  
*The design project shown is a design for a whiteboard application I had to program in team. The PSD I made for this was a quick design of how everything should be placed and should look. (The link to the file is included too, so you can try out everything yourself.)*

### Naming and grouping layers
Something that’s extremely important when it comes to a good workflow. Surely, you can use the search options in the layers panel, but most of the time you’ll be looking at layer names anyways.  
Kinda derived from the BEM methodology in programming, I use layernames that **‘tell me’ what the layer is or does.**  
For example designing a form with an input field for email, I would create a group Login containing a group called Email. In Email I would have both the shape layer for the input and a text layer for the placeholder, respectively named Email Input Field and Email Input Placeholder. Having multiple inputs I could even name them Input and Placeholder since the Email would be obvious enough to differentiate it from other input fields.

I like to create lots of groups for layers and nest them in other groups. When I create navigation bars I mostly have a group structure like:

```console
├── icons
  ├── about-icon
  └── home-icon
├── logo
└── nav
  └── text
    ├── about-text
    └── home-text
```

This way I can **easily hide and unhide** complete sections of the thing I’m designing or move all the text layers. This could also be done with Smart Objects but Smart Objects always show the same in the document. If I have a duplicate of a Smart Object and edit the first one, the duplicate one will **automatically adjust.**  
A good rule of thumb I use is to **always group and create a Smart Object for the group if necessary or useful.**

### Use layer colors

![Screenshot of a colored layer](https://imgur.com/mMGLccB.png)

At first to mee this seemed like pretty useless feature since PS doesn’t assign default colors like After Effects does for example. But when you know of a good use for layer colors they are actually very **handy when searching for specific layers**, especially when using the filter option in the layer panel.

![Screenshot of PS search criteria](https://imgur.com/HzGzY5t.png)

Get the habit of coloring the layers when creating them and you’ll be able to quickly find specific things like Brushes, Icons and Controls when you’re working with lots of layers. Just put the filter in the layers panel on **Color** and select the color representing the item you’re looking for. PS will automatically only show the items you want. I like to even leave this filter filled in even when not searching for specific things like Icons, because you can just hit that red switch to **toggle the filter.**

The color assigning I like to use is:

- Red: Photos and imported material
- Orange: Brush Layers
- Yellow: Icons
- Blue: Controls (adjustment layers)

Find one that you find easy to remember and use. It has certainly made working easier for me.

### Make use of Layer Comps

This feature is extremely handy. Basically you’re able to set a **couple of states** in this panel which take note of what layers to hide, what Layer FX to disable and position of a layer. Most of the times when I’m using this in my main PSD it’s to show different pages of a website (and the layercomp is just hiding or unhiding a group) or to show hover effects.

![Animated gif to show usage of layer comps](https://i.giphy.com/5xaOcLtqMcjX6SAjGXC.gif)

Since CC14 you have been able to use **Layer Comps in Smart Objects** and this just opens a hole new array of possibilities.  
This comes in really handy when designing UI elements like modals or buttons. You’re able to select a Comp assigned inside of the Smart Object, in the main document’s Properties panel. For example this is really easy for quickly toggling a button state or different tabs inside of a modal window.  
The main document’s Layer Comps also apply the layer comps of smart objects inside their own.  
You might, for example, have a layer comp in the main document for a modal. When shown that modal should be defaulted on it’s Register tab. All you need to do is enable the modal layer comp and then enable the Registered user layer comp on the Smart Object, save the layer comp and it’ll be defaulted on Register when the modal is shown via the layer comp in the main document.

### Place linked instead of embedding

When importing assets like photos or logos it’s wise to take a moment and stand still on how this asset should be referenced. Anything you would drag into the PS window will just be embedded in the PSD, which will also result in it’s *file size to increase.*  
Get excited for Place Linked.

Not only does Place Linked **take the weight of the PSD**, it also proves extremely efficient for changing documents. When working in a team with multiple designers you could for example have the logo or an asset like an iPhone mockup. Without Place Linked, the logo would have to be reimported into PS every time it changes. Place Linked doesn’t embed but just looks at a file path and then imports it. This way when updating e.g a color in the logo, it would be **immediately updated in the main PS document.** This is really where all the modular magic happens in PS. I like to compare it to Sass @imports for partials, for those familiar with that.

**I almost always use Place Linked** for logos, photos or other PSD. You’ll never know when you’re going to change something on the source document and it kinda takes the weight of Photoshop’s main PSD.

### Rounding Up (TL;DR)

You might have to get used to changing your flow and working like this, but when you do you’ll find that it’s much easier, quicker and more redundant to changes. So to recap:

- Name layers correctly
- Group multiple layers or create Smart Objects
- Colorcode layers for easier navigation in the Layers panel.
- Use the filter in the Layers panel to quickly ‘shy’ your colorcoded layers, shapes, smart objects, etc.
- Use Layer Comps and Layer Comps on Smart Objects to make states on objects or  display different layouts.
- Place Linked is a gift the guys at Adobe PS Team gave us. Use it whenever  applicable.

Thanks for reading and if you’re interested or have questions be sure to hit me up on @thibmaekelbergh.

Example PSD: [http://inft.ly/TYs8nBD](https://inft.ly/TYs8nBD)


Modern approach to using Photoshop anno 2015/2016/2017 for graphic design (when you really should use Sketch)