February 18, 2019

Recommended tech & dev stack

I’ve always loved to build, dabble, and tinker with things on the inter­net. Over the years I’ve spent making tech­nical SEO tweaks, custom­ising Word­Press, and play­ing with CSS and JavaS­cript, I’ve developed a go-to set of tools, plat­forms and processes – and I’m happy to share!

*Note that, some of these links contain affil­i­ate codes – that is to say that, I may gain a small amount of compens­a­tion if you sign up or buy the product/​service. That said, there’s noth­ing here which I don’t endorse whole­heartedly, and I person­ally use and recom­mend the tools I’ve high­lighted.


Envir­on­ment

Where you code, and the envir­on­ment you code in, can have a huge impact on how you code. Intel­li­gent features, integ­rated envir­on­ments, and clever short­cuts can have a huge impact on time, effi­ciency and qual­ity.

Atom

I’ve played with many code edit­ors over the years – from Note­pad++, to Sublime, and many more. None of them have felt more like ‘home’ than Atom. It’s power­ful, extens­ible (with a thriv­ing plugin ecosys­tem), and slots neatly into my devel­op­ment work­flow.

Local by Flywheel*

As a Windows user, it’s often a pain­ful exper­i­ence to build and manage a (perform­ant) local devel­op­ment envir­on­ment. Local by Flywheel just works, and allows you to manage, update and work with multiple local Word­Press install­a­tions with ease.

They also offer an integ­rated host­ing + deploy­ment process which I haven’t used, but could be handy for people who want to manage everything in one place.

Work­flow

Writ­ing, managing and publish­ing code can be a complex process – espe­cially when coordin­at­ing with other developers. These tools make the whole process seam­less and easy!

GitHub

GitHub sits at the heart of my devel­op­ment work­flow, and manages my files, changes, history and team collab­or­a­tion.

I use a ‘feature branch’ work­flow, where discreet func­tion­al­ity is managed and deployed via dedic­ated branches.

GitKraken*

I tried a lot of tools for visu­al­ising and managing GitHub repos­it­or­ies, and, none of them came close to being as good as GitKraken.

GitKraken is where I manage branches, versions, releases, conflicts and more – all in one super sleek inter­face!

Koala

I usus­ally author and manage my CSS in LESS, which means that it needs a compil­ing process in order to turn into actual CSS. With Koala, I can make that process happen continu­ally and seam­lessly in the back­ground, and also take advant­age of a friendly inter­face for managing how indi­vidual files should behave.

Trello*

I live my life from Trello, and it makes sure that I always know what’s next. I have boards for indi­vidual teams and projects, columns for activ­ity types, and tags for statuses and depend­en­cies. Trello keeps me sane, and keeps me product­ive.

Infra­struc­ture

The phys­ical (or virtual) hard­ware which your site runs on, the loca­tion of the host­ing, and the config­ur­a­tion of those back-end systems can have a huge impact on the perform­ance of your site. Getting the right host­ing and CDN setup is one of the most impact­ful changes you can make to improve and manage perform­ance.

Serve­bolt*

I’m obsessed by speed, and Serve­bolt are by far the fast­est Word­Press host­ing I’ve ever encountered. The easy setup and manage­ment, excel­lent customer service, and light­ning fast response times are genu­inely delight­ful. Comes with a handy Word­Press optim­isa­tion plugin, too.

Digital Ocean

Whilst Serve­bolt is my go-to for host­ing, it can be a little pricey for hobby sites, and you’re a little limited in how many sites you can manage in a single ‘bolt’.

For everything else, or if you want to get your hands dirty, there’s Digital Ocean.

Cloud­flare

The most power­ful tool in my arsenal, Cloud­flare takes care of the heavy lift­ing of cach­ing all of my assets, media, and static pages.

For more advanced use-cases, its Worker, Argo and fire­wall capab­il­it­ies make it a crit­ical part of the stack.

Bonus points for setting up intel­li­gent edge-cach­ing of HTML pages via this plugin (and the asso­ci­ated worker script).

Amazon S3

Although Cloud­flare does a great job of cach­ing and serving images from local data centres, those images still need to live some­where.

I like to config­ure a media​.example​.com subdo­main, and serve all my images remotely. That way, I don’t have to manage local copies in each work­ing envir­on­ment.

Word­Press plugins

I have a separ­ate page for my recom­men­ded Word­Press plugins, so I won’t list all of my favour­ites. Some, however, warrant some atten­tion here as they form key pieces of my tech stack, work­flow and archi­tec­ture.

WP Pusher

Because I manage most of my Word­Press sites, themes and plugins through GitHub, I need a conveni­ent way to synchron­ise branches back to websites, with some consid­er­a­tion for differ­ent branches, repos­it­or­ies, and folders.

WP Pusher does a great job of allow­ing me to config­ure which bits of which repos­it­or­ies should sync to which websites, then handles everything quietly in the back­ground.

WP Rocket*

Some­times, a static page cach­ing layer (and cutting out all of those pesky data­base calls) can make a huge differ­ence to how quickly your website loads. WP Rocket also comes with a bunch of clever optim­isa­tion features, such as local­ising common JavaS­cript librar­ies and optim­ising the way in which your pages load.

Hard­ware & qual­ity of life kit

Invest­ing in the right tools for the job makes that a health­ier, happier, and more product­ive exper­i­ence.

Dell XPS 15*

My laptop gets used a lot, travels, and takes a bit of a bruis­ing. It needs to be robust, light­weight, fast, and have great battery life.

I’m on my second XPS (previ­ously having had a 13 edition), and I’ve never been happier.

Also, check out dbrand​.com for awesome vinyl custom­isa­tion. Mine’s purple, and it looks incred­ible.

Wrist Donut

Rather than having to buy padded mousemat and cush­ioned keyboards, my wrist donut comfort­ably changes the angle I type at, and makes typing and coding for long peri­ods pain-free.

TaoTron­ics LED Desk Lamp*

This is the best desk lamp in the world. It bends, twists, and flexes – and light colour/​intensity settings range from “hyper focus” to “nearly bedtime”, and everything inbetween.

It’s also a wire­less phone char­ger, USB hub, and about a dozen other gadgets in one.