The state of (my) web development in 2019

Seeing as it’s getting near the end of 2019 already (don’t get me started), this seems like a good opportunity to take stock of where I am right now in terms of my web development, looking at what tools and techniques I use. Of course, this doesn’t mean I’m “right”, or that this list won’t change – I’m certain it will over time as I learn new things and the industry moves on. Still, it should be a useful snapshot for posterity.

Since this is going to be a long list, I’m going to split it up into a few different sections to make it more digestible.

  • Development environment
  • Back end development
  • Front end development

Development environment

IDE

PHPStorm

I’ve been using PHPStorm for a few years now, and I can honestly say it’s a delight to use. It not only sees my code but understands it, often better than I do. It’ll intelligently predict what I want, and tell me if I get things wrong. Obviously it’s not going to replace me (yet), but it definitely speeds up my development and catches mistakes before they happen. Worth every penny.

Sublime Text

Sometimes all I need is something quick and easy to do some text editing in, and not in any particular language or format. For this, I haven’t found better than Sublime Text. It starts in a heartbeat, keeps its UI out of the way, and yet is powerful enough to let me do some serious text handling where I need to. I particularly use this when I need to do some regex search and replace operations on a block of text, or when I’m writing Markdown.

VSCode

This sits somewhere between PHPStorm and Sublime Text. It’s much more than a text editor, though perhaps not quite as fully featured as an IDE. It’s brilliant though, and if I wasn’t in the situation where my employer was happy to pay for PHPStorm then I’m sure VSCode would be my go-to alternative. I use it occasionally for smaller projects or demos that don’t require the full power of an IDE.

Local server

Devilbox

I’ve been through a few options over the years, including WAMP and Laravel Homestead. WAMP is fast, but hindered by the fact that my host operating system is Windows (yes, I know). Homestead gives me a lovely Linux operating system, but its use of virtual machines makes it fairly slow. Devilbox runs on Docker, which is noticeably faster than Vagrant, and gives me all the tools I need.

Package manager

Yarn

I discovered Yarn several years ago, back when I was lamenting the slowness of NPM. Yarn works in a parallel multi-threaded way, so everything is much faster to download and install. It also simplifies some of the commands, so that npm install becomes yarn and npm run whatever becomes yarn whatever. It’s only a few keystrokes, but it’s still easier.

That said, NPM has come on a long way since I first found Yarn, and promises much better performance. NPM has also introduced its own lock file. So the reasons for using Yarn are much less convincing now than they used to be. Maybe a switch back is imminent…

Linters

Stylelint

To be honest, PHPStorm already formats my code beautifully, so this tool only just makes the list. Still, it’s useful to be able to run a comprehensive check on all my stylesheets to make sure they are as good as they possibly can be. Stylelint is admittedly a little tricky to set up with SCSS and BEM naming, but the benefits are that it’ll highlight inconsistent variable names, and automatically put properties in alphabetical order, amongst other things.

ESlint (Standard)

Similar to the above, I rely on ESLint only occasionally, as my own coding style here is pretty strong already and PHPStorm picks up most of the slack. But again, it’s sometimes useful to be able to run a check on the entire JavaScript code base to make sure everything is consistent. For what it’s worth, I prefer the StandardJS style guide.

PHP Code Sniffer

Apologies if I’m sounding like a broken record here, but PHPStorm already does a great job on its own. That said, PHPCS adds more detailed inspection of my code, telling me how I can make it even greater. As always, the benefit isn’t just easily readable code, but it reduces the chances of bugs creeping in without me noticing it.

Testing

PHPUnit

I have to admit, PHPUnit only became a regular appearance in my web development workflow in the last couple of years; before that I naively trusted that my code was awesome. These days, if I’m developing something PHP-heavy, I often write the tests before I write the code it’s testing, so I know for sure that it’s doing the right thing. PHPUnit is pretty fast, and plenty powerful for my needs.

Jest

It’s rare for me to need it, given that most of my projects have their business logic in PHP rather than JavaScript, but when I need to be able to test my JS I turn to Jest. It’s quick and easy, and isn’t a million miles from PHPUnit in terms of the way it does things, so it’s familiar at least.

Cypress

When it comes to putting things together and doing end-to-end testing, I’m currently liking Cypress. Because I use Windows and run Linux in a Docker machine, it’s not as straightforward as just running stuff from my native command line, but the Cypress app comes to the rescue. It runs in Windows, and uses my Windows version of Chrome to test the sites that are hosted and served by my Devilbox environment. In fact, Cypress could just as easily test a staging or production site too. In its most simple setup, I use Cypress to scrape the site for links and test that everything works – there’s nothing worse than deploying something and not realising that it’s broken a page elsewhere on the site! Checking for 404s and 500s is really useful. And of course I can also do more specific tests too, like making sure that certain elements appear on the page at the right times (such as mobile navigation), making sure custom form elements behave properly, making sure error messages are displayed in the right places at the right times, that kind of thing.

Deployment

Deployer

Like most people, I started out (long ago) by manually transferring files via FTP. Ouch. When I became a little more security conscious I switched to SFTP, but that’s still essentially the same thing. Then I discovered the joys of Git, and started using SSH to log into the remote server and pull the latest version of my repository. That then upgraded to using key based authentication so that I wasn’t putting my SSH credentials in each time.

Then, along came Deployer, and automated everything. It’s a PHP-based system that runs locally and deploys to a remote host, essentially mirroring what you’d be doing manually. By running one command, everything gets done in the right order, without missing out any steps, and much faster than I could by typing. Not only that, it puts its deployments into separate folders and makes the new one ‘live’ by setting a symbolic link, meaning that there’s no downtime.

dep deploy production

Browser tools

LastPass

While not strictly to do with web development, I find LastPass essential. I have so many websites that I have to log into, including my clients’ sites, so having a tool to remember those passwords for me (encrypted) is a game-changer.

Chrome Developer Tools

I use this every day. I’d be lost without it. I love using it to inspect CSS properties (especially when it picks up my source maps and tells me which SCSS file things relate to), check network responses, run Lighthouse audits on my sites, and even debug my JavaScript with breakpoints (which avoids the needs to `console.log()` stuff from my code).

Wappalyzer

Sometimes I just need to know what another site is running. Wappalyzer works a treat. It can’t detect everything all the time, but when it can it’s brilliant.

Measure

I found this extension when I was exploring “Characters Per Line” – the recommended number of characters you should aim to have on each line of text to make it easily readable, which is generally accepted to be around 80-120 characters. Measure allows me to select a line of text and it’ll tell me how many characters are in it. Simple but effective.

Baseliner

I’m loving baseline grids at the moment, and Baseliner makes it really easy to see visually whether everything lines up and where the inconsistencies are.

OpenGraph preview

This is a useful little tool that shows me what my site would look like when it gets shared on Facebook and Twitter. It’s good for when I’m focusing on SEO.

Checkbot

I only discovered this one recently, but it’s a bit of a game-changer. Checkbot scrapes an entire site (from my local browser, so it’ll work with my development environment and staging environments too) and analyses all sorts of aspects of it, including SEO, validity, best practices, accessibility, security… Before I found this tool I would use a whole host of others, and often forget to use them. This bundles everything in one place, and is amazing.

Colorblindly

I’m not colourblind, so it often escapes my mind to consider those who are. Colorblindly filters the colours on an entire page, emulating what might be seen by someone with various types of colourblindness. It’s really useful for highlighting potential problems with contrast between background and text.

ColorPeek

ColorPeek looks at a web page and extracts all the colours it can find, giving me the RGB codes for them all. Really useful for when I’m rebuilding a client’s site and need to get the official colour palette.

What Font

Like the above really, except for fonts. WhatFont is handy to be able to just point and click and find out what font is being used, without having to delve into the inspector.

Vue DevTools

When I’m doing Vue.js development, this extension is essential. It tells me what’s going on in my code, what each variable contains, what components are being used, and much more.

Structured Data Testing Tool

Microformats are cool. Google likes them too. This extension interrogates your page’s code and shows you what structured data you’ve used and where the errors are.

Collaboration tools

GitLab

I love Git. It’s saved my bacon many times. And when you’re working with other people, it’s fantastic to be able to quickly share an entire project, work on different tasks at the same time, merge branches, and keep all your development history. Each project has its home on GitLab, which does more than just store the repository – there’s a wiki, a CI pipeline, an issue tracker, a merge request manager, and more besides. It also provides private repositories for free (unlike GitHub), which is great for client projects that aren’t open source.

Microsoft Teams

This is something I’ve only recently begun to see the full potential of. Until recently, most of my communication happened by email. And there were loads of them. But at work we have an Office365 subscription, which includes Teams. It may seem like a simple add-on, but it’s actually a radical shift in the way I work.

Each project has its own Teams channel, which also has its own SharePoint powered file storage. Everyone who needs access to the project has immediate access to all the information they need, without the risk of deleting local versions or looking at an ‘old’ version.

Asana

I’m not a project manager, but I still need to manage my projects. I need to make sure everything gets done and nothing gets forgotten. Asana is easy to use, and I’ve found it really effective in helping me get stuff done.

Back end development

PHP platforms and frameworks

Laravel

Honestly, where would I be without Laravel? It’s beautiful and powerful, and has helped me transition from an intermediate developer to an experienced developer by encouraging me to match its awesomeness. I’ve lost countless hours reading through the Laravel documentation, marvelling at all the wonderful things it can do and thinking up ways of using them.

In the real world, Laravel makes up a good proportion of the projects I work on. It’s easy to get started, Blade is excellent, everything is nicely organised, and there are plenty of build-in goodies (like Artisan makers) that make it a joyful experience. The quality of my code has definitely increased in recent years, and much of that I put down to Laravel.

Craft CMS

For many years I swore by WordPress as my go-to CMS. But with my experience growing and my techniques improving, I’ve found more and more reasons why WordPress isn’t how I want to develop. Craft CMS is a breath of fresh air, providing an approach more in line with modern web development, without sacrificing usability for non-techies. It’s not free, but I’d highly recommend it.

Essential PHP dependencies

Carbon

This honestly feels like something that should have always been a core part of PHP. It’s just a wrapper around the time and date functions, but it makes it so much easier and predictable to work with. If you need to handle dates in PHP, use Carbon.

PHPSpreadsheet

Creating CSV files in PHP is nice and easy, but no one actually works natively in CSV files – they open them in Excel. So it makes sense to provide the data in Excel format from the get go. PHPSpreadsheet makes this possible, and while not exactly straightforward it’s a much better experience for the users of the data.

Spatie Laravel Permissions

This is an excellent addition to Laravel, introducing the idea of permissions and roles to the default users model. I’ve used it on several websites to lock down certain functionalities or contents depending on the user group, or to provide a custom admin area.

Watson Validating trait

This ties in with my preference for validating models rather than requests (which I’ll talk about in a moment). This trait makes it a doddle to define and enforce your validation rules for each model. Before I found this library I was rolling my own, but this is far better than mine!

Favourite PHP techniques

Model validation

The underlying principle here is that the data in an object should always be valid. Often you’ll see validation applied in a Controller, validating the user-submitted data in the POST request before it’s put into the model and saved to the database. But what about data that ends up in the model that doesn’t come from the request? What about test data? What about seeded data?

A better approach, in my opinion, is to enforce the data validation in the object model itself, so that the same validation rules are applied no matter where the data has come from. If it’s not valid, it doesn’t get saved. It’s more logically organised too, I think, to have your model’s validation rules in the actual model rather than the controllers that interact with it elsewhere in your application.

Value objects

These sit somewhere between basic variables and database-driven models. For example, let’s say we want to store and handle an email address. Traditionally we’d just plonk it in a string variable, but we can do better than that. By using an object to store the information (even if it’s just a single ‘piece’ of information) we can apply validation (similar to model validation) and include methods to safely manipulate the information. If you’ve not come across value objects before, I’d highly recommend reading up on them. I use them less than I should, but whenever I do it’s wonderful.

Test Driven Development

The idea here is that you write the tests before you write the code it’ll be testing. This is a great way of ensuring you think about the architecture of what you’re doing right at the start, rather than trying to apply it later on when it’ll be more painful. You start with the concept – what you’re trying to achieve – and then write a series of tests that describe the expected result. Initially of course these tests should all fail, because you’ve not written the code they’re testing; if they don’t fail, there’s probably something wrong! Then you write your actual code, and test to make sure all your tests succeed.

It’s also a great idea to ‘test to break’. Instead of just testing to make sure it works, you want to test to make sure it doesn’t break when you do something unexpected, that errors are handled properly, that exceptions are caught, that sort of thing. It reminds me of a principle one of my music teachers told me – “don’t practise until you get it right, practise until you can’t get it wrong”. Wise words.

Element/component templates

These days pretty much all my HTML is generated using either Blade or Twig templates. They work in similar ways, though they’re not identical – Blade is sometimes more terse, and it’s easier to use raw PHP, but Twig protects you from ‘mistakes’.

I often find myself creating individual template files for each component or element in a web site’s design. For example, each form element (which typically includes a wrapper, a label, the input itself, and any error messages) gets encapsulated in its own reusable Blade or Twig file, ensuring that all my forms are consistent in their behaviour. I do the same with buttons, cards, sections, and others too. It’s a good example of the DRY (Don’t Repeat Yourself) principle; define it once, use it in many places.

Front end development

JavaScript frameworks

Vanilla ES6

Gone are the days of my overreliance on jQuery. I’m now doing things properly, using Vanilla JavaScript and taking advantage of all the goodness that ES6 has provided. Modern browsers love ES6, after all, and it’s 2019 so no one is using Internet Explorer any more, right? Ah, hello Babel…

Vue.js

I spent some time at the beginning of this year learning Vue.js, watching a few excellent video tutorials and doing some demo projects before using it for real in a couple of client projects. It’s a very different way of thinking, managing state rather than updating variables, which is both liberating and confusing. I’ve found loads of caveats, such as the unidirectional flow of data that you have to overcome with an event bus. Honestly, I’m not 100% sold right now, but maybe I just need more exposure.

Essential JavaScript dependencies

Axios

This excellent promise-based HTTP library makes it easy and clean to make GET and POST requests. Yes, I could do the same thing in Vanilla JS, but Axios just makes it easier.

axios.get('api/wherever')
  .then(response => {
    console.log(response.data)
  })

ImagesLoaded

ImagesLoaded has been around for a while now, and essentially just lets me know when all the images on a page (or part of a page) have loaded, so that I can do something else.

in-view

Another useful tool, which lets me know when certain parts of the page come into view. It has thresholds too.

js-cookie

This is my go-to library for handling cookies in JavaScript, making it easier to get it right first time.

Laravel Mix

This is pretty much indispensable now. Laravel Mix is essentially a wrapper around WebPack, making the whole process of compiling SCSS and JavaScript much more elegant, and bundles a load of useful tools (like Autoprefixer and Babel) too. I use this even when I’m not using Laravel.

Moment

Just like Carbon does for PHP, Moment handles dates beautifully for JavaScript. If anything handling dates natively in JavaScript is harder than in PHP, so Moment is arguably even more of a life-saver.

AdoptWords

You’ll have to excuse the self-promotion here, because this is a library I made myself. I just couldn’t find another library that did this reliably, or wasn’t 10 years old and abandoned. AdoptWords detects orphaned words at the end of paragraphs and ‘adopts’ them so they’re not on their own.

import AdoptWords from '~adopt-words'

AdoptWords.init('p')

Favourite JavaScript techniques

Arrow functions

Added in ES6, I think arrow functions are beautiful. For cases when you’re dealing with closures, and especially nested closures, the arrow function notation is shorter and cleaner. You have to use it in the right places though, because sometimes the meaning gets lost compared to the ES5 notation, but when used well it can make your code look really clever.

StandardJS formatting

JavaScript Standard Style is like PSR-2 but for JavaScript. Unofficially, at least. It defines a load of conventions to follow to make your code consistent and readable, going into detail about where your spaces should and shouldn’t be, where line breaks should and shouldn’t be, what case your variables names should be, and so on. One of the more transformative recommendations is that lines of JavaScript shouldn’t be terminated with a semicolon; I originally thought they were necessary (like in PHP), but apparently not!

Vanilla

This isn’t a technique, exactly, but more of an observation that the better I get at JavaScript the less I rely on third-party libraries to make things easier for me. I can forego the bloat of jQuery because most of what it does can be easily achieved without it (such as selecting elements and modifying them). And while jQuery originally helped with consistency across different browsers, the landscape has standardised a lot in recent years, negating the need for quite so much hackery.

SCSS frameworks

Bulma

I used to swear by Bootstrap, as I’m sure many beginner developers do. Bulma is similar, but in my experience a little less opinionated about what things should look like, and is therefore a little easier to make it look like the design I’m trying to implement. It’s a matter of choice, to be sure, but Bulma has been excellent.

Custom

The above being said, I’m increasingly not using any off-the-shelf framework at all, but rather implementing my own based on the techniques I’ve seen. H2OCSS is my latest creation, a simple SCSS framework that uses various techniques I like at the moment, without actually doing much styling. Rolling my own allows me to keep my CSS lean, keeps me closer to the actual styles, and encourages me to do things the right way rather than just fudging it until it looks right.

Favourite CSS techniques

CSS Flexbox

All modern browsers can use Flexbox, and it’s so much nicer to use than floats (in fact, I can’t remember the last time I floated something for the sake of layout). It’s powerful and easy to work with, and make creating repeating layouts a doddle. That said, I’m still constantly referring to the documentation because I haven’t memorised all the properties yet.

CSS Grid

This is now just as well implemented in modern browsers as Flexbox, so there’s no reason not to use it. And the more I use it the more I fall in love with it. At first glance it might look like the old-school technique of laying out your page using tables, but it’s soooo much better.

Lobotomised owl selector

I came across this thanks to an article on A List Apart. Basically, it eschews the idea of assigning margins to elements, and instead applies margins between consecutive elements. It’s strange, but somehow makes more sense.

.spaced > * + * {
  margin-top: 20px;
}

SCSS parent selector

This is a really powerful little character, especially when you’re using BEM for your naming. For example:

.my-component {
  background: silver;
  &__button {
    background: red;
    &:hover {
      background: blue;
    }
  }
}

Notice how we’re only defining the component class name once, and injecting it into child classes using the parent selector. This is what the compiled CSS looks like:

.my-component {
  background: silver;
}
.my-component__button {
  background: red;
}
.my-component__button:hover {
  background: blue;
}

8px rem grid

If you’ve heard people talk about “vertical rhythm”, this is one way of implementing that. This approach (which I’ve used in H2OCSS) defines the base font size as 8px, which gives us a set 1rem measurement that we can use everywhere else. Everything is then measured in multiples of 1rem, including font sizes, line heights, margins, paddings, and everything else. The result is that everything lines up beautifully. If you have a grid overlay (see the Baseliner extension or the debug option in H2OCSS) you’ll see everything aligning with the baseline grid, giving you a pleasingly predictable vertical rhythm.

BEM

“There are two hard things in Computer Science: cache invalidation, naming things, and off-by-one errors.” Not sure who said that, but they were right. Naming variables is hard to get consistent and manageable. That’s where BEM comes in, offering a block-element-modifier rationale to help you give classes suitable names. For example: class=”block__element–modifier”.

I actually modify this ideology slightly in my own projects, adding a prefix for the project I’m working on so that there is no chance of classes overlapping with third-party libraries or helpers. For example: class=”project__block__element–modifier”. That’s a lot of underscores though, so I’m considering using escaped characters in future to enable me to do something more like class=”project:block__element–modifer”.

<div class="md:card">
  <button class="md:card__button md:card__button--blue">Do something</button>
</div>
.md\:card {
  background: silver;
  &__button {
    border: 2px solid purple;
    &--blue {
      border-color: blue;
    }
  }
}

The end

That’s all for now. By all means leave your comments below and let me know if I’m way off track with any of these – every day is a learning day!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.