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)

Using Photoshop with a modular approach

Get cross-domain errors in the console because you’re running
`file://` instead of a real `http://` server suck.  
I rarely use the file protocol anymore because it’s way simpler to just start a server from terminal, it’s baked into OS X!  
Also I hate starting MAMP for anything without a database.

The only real magic it requires is a python command: `python -m SimpleHTTPServer` but I simplified this even more and created a noob-proof executable script, which you can just double click to start the server.

It will also check if you have an entry point (*index.html* for example) and only run the server if the entry point file exists. Otherwise it will send a notification (10.8+) with the error message.
If the entry file is found it starts the server and opens it in the browser.

Double clicking is the only required skill here!  

```bash
cd "$(dirname "$0")" #Get current directory

ENTRY=index.html #Set the entry point for the server

if [ -f "$ENTRY" ]; then #Check if the entry exists then go on
  sleep 1 && open "http://localhost:8000/"; #Delay a second then open localhost
  python -m SimpleHTTPServer; #Start the HTTP Server
else #Send an alert
  osascript -e 'display notification "No entry point found, quitting." with title "Missing index.html"'
fi
```

> Getting errors?  
Try cd’ing to the directory where you placed the Server Script
and use `chmod +x HTTPServer.command` to make it executable again.

> More about the python command it possible options like port specifying? Read it [here](https://docs.python.org/2/library/simplehttpserver.html)


No more cross origin errors when working on static content locally

Executable HTTP Server Script

I managed to set up a nice ecosystem that works perfect for me: Plex Media Server running on a Pi 3 and the Plex client interface connected to the TV on another Pi 3 running Rasplex.

Works fine, plays smooth, is automated and all but one thing was missing. I have a fair amount of video files with an audio track using 5.1 channels. Of course I want to hear that awesome surround on the home cinema so I can enjoy it even more, but unfortunately my receiver doesn't have HDMI inputs and using passtrough on the TV would downsample it from 5.1 to 2.0 leaving me in the same scenario.

Huge fan of optical audio here, so surely that's the way I wanted it. I was familiar with the HifiBerry lineup and found out they have a card that has a Toslink input, which was exactly what I needed. Even though I really wanted to support them in buying a product from them, I was low on cash and luckily found this other alternative from Chinese wholesale called the PiFi Digi+. It basically acts the same as the HifiBerry. Ordered it.

> These steps are untested for it, but should be exactly the same for the HifBerry Digi

So it arrives and from lookup before I found out that the drivers are supported in up-to-date Linux kernels and Kodi. Plugging it in I expected it to automatically show up under my audio hardware mapping but it didn't. Turns out the onboard IR sensor that is soldered to the PiFi Digi+ hinders the board from working correctly and you need to turn of the device tree overlay for the default lirc device that Rasplex ships with (or change the Pifi lirc's GPIO pin).

> __NOTE:__ I would advise checking that you are at least running the latest release from Rasplex' stable channel (which at the time of writing is: 1.6.2.123-e23a7eef)

You need write permissions to `/flash` (SD Card) on the device. Change it a writeable filesystem with `mount -o remount,rw /flash`. This will auto reset to a readable only fs after a reboot. If you are reproducing these steps on Kodi or OSMC you will not have `/flash` available, but just need to edit `/boot/config.txt` directly.

1. Ssh into rasplex as root: `ssh root@rasplex.local` (default password is `rasplex`)
2. On the devices SD card open and edit the config file: `nano /flash/config.txt`
3. Search (`ctrl-w`) for `lirc-rpi` and comment in the line that says: `dtoverlay=lirc-pi`
4. A few lines below you should find the option to enable the device tree overlay for the PiFi, otherwise search for it and comment out the line that says: `dtoverlay=hifiberry-digi`
5. Type `reboot` to reboot the Pi and if you go to Settings > Audio Settings and select the one that says `alsa: …` you should have crystal clear surround sound!


Getting a HifiBerry/PiFi Digi+ to play nice with RasPlex' surround capabilities.

Setting up S/PDIF (optical audio) for RasPlex

Today, after spending 4 years in college, I signed my first contract at In The Pocket as a full stack developer.

Can't wait to start working here, but I realise that none of this would have been possible without the contribution of the people below.

I would never be where I now am without every one of them.
Of course, a list in no order.


_Thank you:_

* Mom & dad
> for giving me the option to follow a 3 year course (ultimately ending up being 4 years) which they had no clue of what it consisted. For the other support throughout every day in life.

* My brother
> for being the crazy guy he is, playing Playstation together, laughing at stupid things and taking my mind off in general. Someone I truly admire for his perseverance and intelligence.

* Lotte Bijlsma
> the girl & love I met in school. You made me strive for the best and only the best. Always supportive, always perfect. No more words needed.

* Geoffrey Dhuyvetters
> who taught me everything I wanted to know about coding and the web. You spiked my interest for developing and wanting to pursue a career in development. I owe a lot to the skills you transferred into my brain and I'm eternally grateful for that.

* Arne, Simon, Wouter, Gertjan and Jean at Typework/NephroFlow
> for taking a curious development student into work for a month. I found a true love for functional programming here and  love that I got the opportunity here to work in a production environment startup. Keep on doing what you do.

* The complete #devinehowest team
> The best higher educational course there is for design & dev in Belgium. Pushing their students to only go for the best and create crazy cool shit.

* My ex-girlfriend
> for breaking up with me. If I wouldn't of gotten this, I would have never had the possibility to grow, become a great programmer and pursue a successful career and happy life.

* Kevin Meyvaert
> The interesting dude that I started talking to in my second year of Devine, and which turned out to be a long-lasting friendship throughout school & life. Glad to call him my co-worker soon!

* Gerben Geeraerts
> Another weird guy which in who I found my peer. Thanks for those cool years in Devine and the ridiculously funny conversations we have.

* Jonas Leupe
> Another part of the devinemates, the guy who takes crazy cool pictures and rocks a design. Thanks for the insights & hangouts during those 3 years.

* Anthony Magnus
> for being that weirdest friend of them all and giving our gang laughs at Devine. Good luck in your future plans mate!

* Allegra, Anna, Arthur, Daniel, Dimitri, Eric, Fei, Louise
> the team that took me in at Edenspiekermann and made my scary time in Berlin turn into a nice 3 months filled with good work, laughter, hanging out and enjoying work & Berlin. Thank you gang, keep doing what you do, each one of you.

* Everyone at Espi
> for making a family like I've never seen one in a company. Espi is all about the people and the people make it a great place.

* My Lab9 mates
> crazy-good-friends and people who can make you laugh in a pinch. Always up for a drink or Vedettje at Republiek (RIP).

* Alexis Moust
> my non developer/designer friend who I thank for an awesome & super-valued friendship and our hour-long talks about Floating Points, jazz, records, concerts, music… over a nice beer or cocktail.


> Please note that if you feel like I've forgotten you, it's not because you're not on the list that I didn't remember you. Thank you as well.

🙏🏻 Thank You

> If you prefer to watch these in full glory, then head over to the [Google Photos album](https://photos.app.goo.gl/E5FVzdOl1srHRwpk2)

![Airplant](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796351/Plants/_DSC0025_0_5x.jpg)

![Mini cactus on my rack](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796337/Plants/_DSC0024_0_5x.jpg)

![Cactus](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796352/Plants/_DSC0032_0_5x.jpg)

![A creepy/cute kid's head plant pot](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796347/Plants/_DSC0031_0_5x.jpg)

![Instant love when I saw this skyreacher](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1507480336/Plants/_DSC0040_0_5x.jpg)

![My much loved Monstera Deliciosa](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796349/Plants/_DSC0029_0_5x.jpg)

![My much loved Monstera Deliciosa](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796351/Plants/_DSC0030_0_5x.jpg)

![Another Monstera shot](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796345/Plants/_DSC0028_0_5x.jpg)

![I love this Monstera](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796344/Plants/_DSC0027_0_5x.jpg)

![My desk Pika (Coffea) plant](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796342/Plants/_DSC0019_0_5x.jpg)

![Desk Spider plant in a previously candle coffee mug](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796337/Plants/_DSC0023_0_5x.jpg)

![A very stubborn airplant](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796346/Plants/_CSC0022_0_5x.jpg)

![Wide shot of my Calathea on my desk](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796347/Plants/_DSC0018_0_5x.jpg)

![Calathea made room for this funky plant that looks like a sword](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1507480336/Plants/_DSC0041_0_5x.jpg)

![Monkey candle holder next to a Medusa airplant](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1507480339/Plants/_DSC0038_0_5x.jpg)

![Zebra head next to a spider plant](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796332/Plants/_DSC0008_0_5x.jpg)

![Close up of my flamingo frame next to the spider plant](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796332/Plants/_CSC0015_0_5x.jpg)

![Biggest jungle of em' all](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796330/Plants/_DSC0009_0_5x.jpg)

![In love with the pattern on this one](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1507480338/Plants/_DSC0037_0_5x.jpg)

![Little Leopard Head Pot](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1507480329/Plants/_DSC0039_0_5x.jpg)

![My Dracaena, airplant & newest addition hanging plant](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506796336/Plants/_DSC0010_0_5x.jpg)

![This one hangs](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1506797013/Plants/_CSC0017.jpg)


🌵 The Personal Jungle

> This post is oriented towards usage on a Raspberry Pi, but with slight modification these steps could easily work on any Debian, Ubuntu or UNIX system.

After a couple of years trying to understand the Pi, Nginx and most importantly: networking; I've now found a very nice approach to providing simple HTTPS secure connections for a plethora of sites and effectively proxying non-secure endpoints to their own domain. This post goes into detail on how to set this up in the simplest way I could think of.

Some prerequisites for this post:
* Any Raspberry Pi running latest Raspbian Stretch
* An up to date package repository (apt update && apt upgrade)
* A network connection (I prefer wired connection for fastest possible network-flow)

## A note on responsibility
When I was still wrapping my head around the underlying working method of Nginx I've made the error of running it along with all the other services I wanted secured & available. All on the same host (a Raspberry Pi B+ or 3). While the system worked in some way and Nginx should be faster than Apache, I continually ran into problems with memory & cpu delegation between Nginx and other stuff running on even a Pi 3.

So I decided to take the single responsibility approach & adapt to the way how for example, containerization works. Have a Pi which just acts as the proxying server, no other (big) services running on the host and in effect just being a `client ↔ proxy ↔ server` gateway so to speak. I was amazed to see that there was almost no loss in network request/response between different hosts, and a huge boost in performance on the different Pi's.

## The setup
As an example let's take a very popular approach of having an Nginx reverse proxy in front off a [Homeassistant](https://home-assistant.io/) application. In this case we have:
* A Pi 3 running only Homeassistant (Hass.io)
* A Pi B+ running only Nginx (latest)
* All hosts connected on the same local network, with only the Nginx host being exposed to the internet

Note that by only exposing and opening up ports on the Nginx Pi it should theoretically minimize some of the risks you open yourself up to when exposing each host. It also makes managing and troubleshooting easier.

## Installing Nginx
Start off by installing the latest available version of nginx from apt:

> (This release has been updated when Stretch was released and still misses some features that the source Nginx and upstream branch has, but it suffices for most use cases.)

```console
apt install nginx
```

This should auto-create a systemd unit which can be stopped before we start working with `sudo systemctl stop nginx`. Navigate to the nginx directory at `/etc/nginx/` and unlink & remove the default site with `sudo unlink /etc/nginx/sites-enabled/default && sudo rm /etc/nginx/sites-available/default`.

Create a new virtual host and link it so that we have that available and nginx can look at request for the domain:

```bash
sudo touch /etc/nginx/sites-available/homeassistant
sudo ln -s /etc/nginx/sites-available/homeassistant /etc/nginx/sites-enabled/homeassistant
```

Paste the following contents into `/etc/nginx/sites-available/homeassistant` to have a very simple reverse proxy configuration for this host on its default listening port:

```nginx
server {
  listen 80;
  listen [::]:80;
  server_name publicdomain.com;

  error_log /var/log/nginx/publicdomain.com.log;

  location / {
    proxy_pass http://hassio.local:8123/;
    proxy_set_header Host $host;
  }

  location /api/websocket {
    proxy_pass http://hassio.local:8123/api/websocket;
    proxy_set_header Host $host;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}
```

Let's break this configuration down here:
* We define this vhost to listen on port 80 on both IPv4 and IPv6 and look at all requests originating from publicdomain.com
* A dedicated logging file is being used for this domain at `/var/log/nginx/publicdomain.com.log`
* The host is set up to proxy requests from the index location to our Homeassistant host on the other end in the `location / {…}` block
* We also need to set up the requests to `location /api/websocket {…}` so requests to the Homeassistant Websocket are ending up where they need to.
  - Headers are set for upgrade-insecure-requests & connection along with us specifying that the requests should only use HTTP1.1

> If you would take a look at `/etc/nginx/sites-enabled/homeassistant` after saving this file, you would note that it's changes are auto reflected from the file at sites-available because of the symlink we created earlier with `ln -s`

Before starting Nginx it's always a good idea to see if the configuration and changes we made are still valid with `sudo nginx -t`. If that check passes we can start or restart the systemd unit for Nginx with `sudo systemctl (re)start nginx`.

Navigate to http://publicdomain.com and you should see the interface for our proxied Homeassistant application. Note that you might need to open up a port on your modem, router, firewall for the proxy to be available. Plain HTTP requests typically run on port 80, as we defined in our `listen 80;` directive. You could of course change this to any port you like.

## Securing our requests
One of the great advantages of using Nginx is it's effectiveness towards being an SSL termination proxy. This simple means that Nginx can act as the secure line between your client and an insecure server (much like Cloudflare does for example).

None of the proxied applications or websites need to run on a secure HTTPS connection, since we can put Nginx in front off it and have Nginx request data from the insecure HTTP application, and then send it back over to the client on a secured HTTPS connection. This is an approach that is so simple to start with and has provided easier configuration, setup and joy to work with on multiple hosts.

Let's use the widely popular LetsEncrypt service to request a TLS certificate and install it on our Nginx instance. For local domains you could fall back to using openssl and self-sign certificates. Luckily EFF provides a very handy cli tool called `certbot` which we can use to easily request certificates from a CA.

> An installer script for LetsEncrypt with certificate request is available at my [linux-confs repo](https://github.com/thibmaek/linux-confs/blob/master/scripts/provisions/create-letsencrypt-cert-apt-nginx.sh)

You can install certbot with `apt install certbot python-certbot-nginx`. Certbot used to be a lot harder to install since for Debian 8 we'd have to build it from source but now with Debian 9 (Stretch) it's available on the apt repo and we can just install it like we would any other package from apt.

With the certbot cli now available we can request a certificate for our Nginx server:

```bash
# Specifiy the -d <domain.com> flag if you want to skip the wizard and directly sign 1 domain
sudo certbot --nginx --email "myemail@domain.com"
```

Certbot will read the vhosts set up in `/etc/nginx/sites-available` and let you choose a domain (or multiple) from the list. Note that as a final question it will ask you if you want to reroute this domain to HTTPS by default (by returning an HTTP 301 to https://publicdomain.com). This provides more safety against attacks based on non-HTTPS connections:

![Output of certbot](https://res.cloudinary.com/thibault-maekelbergh/image/upload/v1509610959/carbon_id7209.png)

With this completed, your HTTPS secure host should be ready. If you check the file at `/etc/nginx/sites-available/homeassistant` you will see that certbot auto added the necessary Nginx directives to set up the TLS certificate and redirect to HTTPS by default. After these changes, use systemctl again to restart the nginx service.

## Conclusion
Throughout this post we have…

1. …installed Nginx and set up (one) individual vhosts which allows us to simply add new files for each new domain or subdomain
2. …written a very simple configuration for proxying our application via Nginx's powerful & fast proxying engine.
3. …secured our vhost with certbot by generating a TLS certificate to set up a secure HTTPS connection.
4. …redirected all the non-encrypted network traffic happening over HTTP to a secure HTTPS connection for our host.

<hr/>

### Additional reading
* [Renewing expired certificates with certbot](https://certbot.eff.org/docs/using.html#renewal)

### Troubleshooting
* Remember that as a first good step, `sudo nginx -t` will always point you in the direction of possible problems prohibiting your configuration from working.
* The Raspberry Pi proves to be a very cheap but powerful enough solution for setting up this Nginx node on our network. Still, being ARM based, it comes with resource limitations. It might need a bigger hash bucket size if you add more vhosts as you go along or perform more networking logic.


Thibault Maekelbergh

Using Photoshop with a modular approach

Executable HTTP Server Script

Setting up S/PDIF (optical audio) for RasPlex

🙏🏻 Thank You

🌵 The Personal Jungle

🚪 Super simple SSL proxy for Raspberry Pi