Peeling the Orange: A Look at our Back and Front End Web TECHNOLOGY
You might not think this post is for you. It does get a bit nerdy in places, but give it a chance. We’re passionate about the work we do and the tech behind it is a big part of what makes our sites special.
We want you to get excited about it too, even if you aren’t techy, to hopefully help you think about what goes on behind the scenes a bit and the benefits and possibilities the technology we use can open up.
At our core (or pips) we believe in using the right tool for the job. We won’t just use a technology because it’s new and fun to build with, or because it makes the job easy, but because it works for you and the users. These are the back and front end technologies we use, when we use them, and why:
Front End Technology
The front end is what you see as a visitor to the site. It handles the interactivity. We’re visual people, which is one of the reasons we love the front end, as well as for the creative options it opens up.
The Basics: HTML
HTML is your site’s skeleton, its structure. Screw this up and Google’s crawler bots don’t know what’s going on. Screen readers get pissed, as do their users –and rightfully so. It’s simple and easy to write when you know what you’re doing, and there is actually some cool functionality built in where browsers support it. The <details> and <summary> tags, for example, creates a basic interactive dropdown element with no CSS or javascript needed – the browser is doing the heavy lifting for us.
Browser support is good these days now that Internet Explorer is dead. Safari sometimes throws a spanner in the works, but it’s a much more controllable beast. You can see here that the above HTML example has good support in modern browsers.
Making things Prettier: CSS/SASS
Your HTML skeleton looks pretty boring on its own, so we slap on the skin – CSS. Again, it’s simple, but it can be a bit awkward to work with, especially on larger codebases. When compiling it from SASS, however, it becomes a pleasure to write as it introduces nesting, modularity, and more advanced logic capabilities. Our web designs are unique, so we don’t use any CSS frameworks as we’d be writing so much from scratch anyway. We do include modern-normalize as a base point. This just overrides any default styling that browsers include to ensure we’re starting with a clean canvas.
Now check out the same <details> and <summary> tags from above with a few lines of CSS. Functionality it’s exactly the same, but it looks nice now.
Getting interactive: JS
Now we add the joints that make your site move. For the majority of sites, plain javascript is our choice – commonly known as vanilla javascript. No bulky dependencies here adding unnecessary weight to your site and it’s dependable. It can be awkward to write, but unlike CSS, this is because of browser support. The newer generations of javascript (ES6), however, are great to work on, and we compile it down to something that’ll work in browsers using Babel.
Again, we have the <details> and <summary> example. As we’ve already seen the main interactivity is handled by the browser, but with a little bit of javascript the animation feels smooth, and because we’re still using the appropriate HTML, screen readers are happy.
The fun stuff: React
React is a javascript framework that is great for deep, interactive UIs and SPAs (single page applications). It’s particularly great for internal tools, such as dashboards, but on its own it isn’t perfect for public facing websites – don’t dismiss it yet though, as Next.js solves the bulk of these issues – more about that under the back end technologies showcase below.
React will, unsurprisingly, react. Press a button to talk to the back end, which sends a message back. We can tell React to make different UI changes based on the data it’s seeing. This can be done with vanilla JS, of course, but it’s a lot more labour intensive if you have unique reactions on dozens of different pages.
Need more proof of how cool React is? Look at the site you’re on. Unless you’re reading a dodgy AI rip-off of this post, this was built using React. Click around different pages, and you’ll probably notice how snappy it is to navigate as we don’t need to load a whole new page, just the bits that need to change. We use React as a bit of a tech showcase (which makes it the right tool for the job in this instance), but it also allows us to easily add in new interactivity and other features that might be more of a slog using vanilla JS.
Back End Technology
The back end houses the logic happening in the background. It receives data, such as a url, and tells the front end what to display. There are many different back end languages and technologies. Here are the ones we focus on:
WordPress
WordPress is an easy-to-use CMS with a great admin user experience. It has a wide range of plugins that can add additional functionality. Whilst we like to write as much code ourselves to make things more streamlined, we do use some plugins to enhance the admin side of things, such as Yoast for SEO.
We use WordPress in a modular way. Think of how you can break up an individual web page into different parts – you might have a hero banner at the top of the page, a block of text underneath, and a group of images below that. Each of these segments would be its own module which can be added, removed and reordered within the CMS. This allows for a lot of flexibility to let you easily edit your current pages and create new landing pages with whatever content you need.
The heavy lifting: Laravel
Laravel is a web application framework built with PHP. It is much better suited to handling complex functionality than WordPress is, but it also has a more involved setup. Laravel provides the foundations for an efficient web app, but leaves everything else down to the developer. For example, it doesn’t have its own CMS. This would have to be added as a separate package such as Filament or Statamic, or you could even build your own if needed.
Next.js
Next.js is a great addition to React as it adds features like improved page load speeds and SEO readiness using server side rendering. We would usually pair Next.js with a CMS such as WordPress to manage the content, but it’s flexible in that it could be combined with any CMS, if one is needed at all.
Anything Else?
I’m sure I’m forgetting some, but here’s a quick list of other things we use:
- Browserstack for testing in different browsers and devices.
- Lighthouse (also Unlighthouse for full site scans) for testing performance, accessibility, page structure and SEO readiness.
- The W3C Markup Validator to ensure there are no HTML markup issues.
- SEMRush for keyword research, tracking search rankings, and other useful SEO tools.