Professional web development can seem like a black box where the client puts money in one end, out of the other pops a fully formed website, and everything in between remains a mystery.
But here at Big Bite, we’re proud of what we do, confident in the quality of our work, and want to show our clients just how much value they can get from their project. So rather than hide our expertise away as a trade secret, we’ve decided to share a breakdown of exactly how we work and what we do, with the world.
We already believe that being open and transparent is the key to cultivating great relationships with both our clients and our wider digital community. We love what we do and want to put it at the centre of who we are, instead of hiding it behind a curtain of abstract marketing speak. If you’re a developer looking for tips on how to get the most out of your project, then we hope you find these words useful. If you’re just trying to understand all of the elements that go into professional web development, then welcome to an exciting industry. And if you’re a potential client, now you can have confidence in the quality and completion of your next project with Big Bite, before you even begin.
No cowboys or cons
If the sheer number of web developers on LinkedIn, budget website generators, and monthly subscription sites makes your head spin, we understand. That’s why, before we get into the details of everything we do, we thought it was important explain who we are, and perhaps just as importantly, who we’re not.
We’re not bedroom coders (although many of us started there). We use our bedrooms for sleeping. We’ve spent many years and it’s taken a colossal amount of hard work and talent to get to where we are today. We call ourselves professionals for a reason and we’re sure you’ll agree that our work speaks for itself.
There’s a well known anecdote within web development circles about a company where any member of staff using FTP to live edit was made to wear a cowboy hat as a mark of shame. Well, no matter how strong our fondness for stylish accessories may be, we’ll never tolerate cowboy coding. Cutting corners is almost always a waste of time in the end, and a sure-fire way to be left with unstable builds that cost both the developer and the client time and money.
We know that every project is unique and has to be in order to be a true reflection of a client’s needs. That’s why you’ll never see us use a pre-packaged theme bought elsewhere and passed off as our own. We want our work to stand out from the crowd, not get lost in it. Not only is cannibalising cheap themes bad for site stability, from the client’s perspective it’s also a con. We’re proud to custom build all of our projects to our clients’ specifications.
Don’t get us wrong, we’d love for more people to join us in shaping a better, brighter web. That’s why, as you’ll see from the rest of this article, we try to make as much of our work as possible open-source, or at least publicly available for reference. We’re not trying to discourage other developers. Quite the opposite. We’d just like them to be great at what they do too.
Building by the book
So how do we make sure that we practice what we preach? Well, we have a bible. A good-book if you will. It’s called the ‘Big Bite Code Guide’ and contains everything we’ve learnt about efficient, original web development over the many, many years of experience and experimentation in this industry.
It’s our way of enshrining good working practices and making sure that everyone is on the same page. Using a universal format also makes sure that every member of our development team is speaking a common language when it comes to their code. It ensures that any saves or edits to code don’t clash with others, creating problems that could have been avoided. It keeps costs down and any delays at bay for both ourselves and our clients, whilst keeping our team working together.
We find it indispensable but of course there will never be a final version. It’s an ongoing process as we take on and conquer new challenges and obstacles. It’ll continue to evolve along with us for many years to come. That’s why we’re happy to announce that we’ve made it publicly available on the web, instead of chiselling it into stone tablets.
Think global, start local
A studio like ours needs more than an airy, fun office area to work in. It needs plenty of room to let a project develop within a digital space. The first thing you do when planting a seed is to find the right pot for it to grow in. That’s why we have to ensure that we set up the right hosting environment before anyone writes a single line of code.
Since we’re used to seeing websites out in the wild of the web, hosted on remote servers in order to be accessible globally, it’d be easy to assume that they were all born that way too. But each project begins locally. In its infancy we keep a build contained to our local machines in order to speed up development time and ensure that work can be done offline.
A professional team of developers working together on different aspects of the build need to use the same environment to make sure everything works together. That’s where Vagrant comes in. It ensures that everyone on the team has the space to develop by mirroring development environments across several machines or servers, so that every piece of code we write is guaranteed to work when it’s time to launch the finished site. Put simply, it creates a stable, safe place where the real work can begin.
Creating a solid base
Just like any other piece of engineering, a website will only ever be as good as the foundation it’s built upon. That’s why it’s absolutely vital that developers know exactly which framework is best suited for the requirements of each project. Without a solid base, no amount of ingenuity or specialist knowledge will save a build from being costly, time consuming, and a precarious mess of performance issues and instability. Whilst individuals will always have their favourites, in our varied and extensive experience, we’ve found the following tools and frameworks to be the most efficient, reliable, and powerful.
Base
The initial starting point of all of our projects, Base is a stripped-down, bare-bones foundation that can be used in conjunction with whichever framework suits the project best. Built by the team here, it acts as an entry point into each project that’s ready to be built upon. It includes Sass and JavaScript structure, with Gulp ready to go. Whilst it’s our secret at the moment we are working on an open-source version to be released in the future.
AngularJS
Despite being intuitive and simple, this frontend framework is going to continue to get more important with time. Its powerful tools allow for the creation of smooth app-like sites that will soon be part of web’s exciting future, whilst its impressive performance delivers flawless user experience even when running complex tasks. We’ve had great success pairing it with Laravel and perhaps our favourite feature is that it makes sites on older web browsers feel exciting once again.
Craft
Craft is a content management system (CMS) built specifically for professional developers and as a result it offers amazing performance for large and small projects alike. It’s not bloated with unnecessary features, and allows our team to get the most from their code. The result is a stable system allowing clients to manage their content, safe in the knowledge that their next update isn’t going to be derailed by bad code.
Learn more about Craft’s benefits by reading our recent article ‘Craft CMS: Less Is More’
Laravel
Laravel is quickly becoming the industry standard for PHP developers. Its well-tested and extremely stable foundation means that it’s perfect for projects of all sizes and will continue to be used by developers for many years to come. It’s also extremely efficient. It’s allowed us to reduce the timescales of our builds down from months to weeks, saving our time and our clients’ money.
Discover why it works so well with AngularJS by reading our article ‘On The Same Page’
WordPress
If you’ve only heard of one of the tools we use, it’s probably WordPress. Offering incredible customisation, it’s no surprise that it now powers more than 20% of the web. The fact that it’s open source also means that it continues to evolve, adding new features and options almost daily. Whilst all those additions mean that it’s not as focused as Craft for example, we’ve had great success with it, and its diversity ensures that, when used to its full potential, the possibilities are endless.
Keep an eye out for our article on how to get the most from WordPress, coming in March.
Gulp
Often a developer’s best friend, Gulp allows us to automate all the tedious tasks to run in the background whilst we focus on the rest of the build. It can continuously test our code whilst we move on, dramatically increasing the speed of each build, or compress scripts and images in order to increase site performance. It’s a simple but essential piece of kit to ensure that we need as few revisions as possible and that everything built works like it should.
Sass
As one of the most powerful CSS extension languages, Sass saves developers a huge amount of time. Flexible tools make code vastly more manageable and maintainable, ultimately making life easier for the many tech companies that are now using it. That simplicity extends the life of a site, avoiding costly ‘ground-up’ rebuilds. For example, if in two years time you decide to change your brand colour, the use of Sass would mean that it would only require updating a single line of code.
Each version evolves
Imagine the chaos if every office only had one filing cabinet or no system for designating who does what or when. It would be a never ending nightmare of duplications, gaping holes, lost content and employees on the brink of breakdown. Version Control allows our team to avoid the digital equivalent of such a Kafkaesque scene by ensuring that every piece of work, every line of code, and every version of a site is tracked and catalogued. Previous versions of the build are never overwritten or lost, multiple developers can simultaneously work on the same files, and everything runs like clockwork.
Git is often said to have a steep learning curve, but it’s our go-to version control software. Fast and comprehensive, it packs a lot of punch in a small package. Especially when coupled with GitHub, a hosted platform for collaboration using Git, it helps to keep the whole team on the same page. Team members can develop different sections of the build without affecting each others work in the process. It also eliminates a lot of compatibility issues, as well as reducing the amount of build time that may otherwise be spent troubleshooting clashing code.
Seeing daylight
As the build grows and each version of the site evolves further and further toward completion, it’s important that the project gets to escape the confines of our local machines. So we set up a development server on which to host the current version of the site. This allows us to better examine how the build reacts in the real world and to identify any issues or unforeseen circumstances that could cause instability once the site goes live. But it also allows our clients to see their project coming together for the first time and develop a better understanding of how the finished project will look and feel.
Naturally this is an important step for both the developers and the client, so it’s important to get it right. It’s also important to make this process as easy as possible, partly because complexity can breed problems, but also because almost every change made from now on will have to be pushed to the development server in order to keep this working model up to date.
Going live
It’s an exciting moment for all involved when a site finally goes live. It’s the moment of truth, the time when developers get to see the culmination of their effort, and the client can announce their new site to the world. But the final product still needs a reliable server setup in order for the world to access it. Here at Big Bite we use Digital Ocean. They offer cloud hosting that’s simple, extremely fast, and built by other developers. The result is an easy, intuitive user experience. We’re big fans.
Once Digital Ocean has built the required server, we can do some of the legwork ourselves. Virtue is a open-source script we wrote (available on GitHub here) to set up servers in one simple command. Just log into the server and the script installs everything you need (base packages, PHP, Apache, MySQL, and itself) and the web server is set up and ready to go. All that’s left is create the site domain and add it to the server. Now the final tweaks and pursuit for perfection can begin.
Perfecting performance
In many ways performance is the key to any build. It’s the ingredient that holds together a site’s background engineering and its all important user experience. No matter how good a site looks, or how stable its foundation, poor performance can quickly invalidate all that hard work. That’s why we develop with performance in mind throughout the entire build, whether that’s eliminating excess code or compressing site content like scripts and images (remember our old friend Gulp?).
But code alone doesn’t guarantee lightning quick load times and so we use a Content Delivery Network (CDN). A CDN is exactly what it sounds like; a network of servers spread across the internet that ensures your site content is available globally without a dip in performance. This distribution also has the advantage of additional stability since your site isn’t tied to a single server that could go down. It can also provide added security, since the network can absorb more of the impact caused by Denial of Service (DoS) attacks for example.
Whilst the use of a CDN with a clean and tidy build should result in a web site that loads relatively quickly, that speed can tumble as the CMS (Craft, WordPress and so on) has to generate each page more frequently. When your site is receiving thousands of hits a day that’s a lot of stress to put on the backend of the site. To relieve that stress we use caching. For example, the first time a page is loaded we save the generated page, then the next 999 times we just show the saved version. In order to achieve this we use an extremely efficient web application accelerator, Varnish, which can speed up server delivery by as much as 300x – 1000x. It works wonders with WordPress or Craft, and its impressive performance means that page generation is almost instant on most hardware.
Out in the world
The result of each and every project should be accompanied with a feeling of pride, both by the developers as they admire their work, and by the client as they launch their impressive new site. But with all the original project requirements met, solid engineering that works in the real world, and an attractive and intuitive user interface being shown off to the rest of the web, it’d be easy to think of each site launch an ending. It’s not. It can be so much more.
As you’ve seen by now, the way in which we approach web development is about so much more than just ticking off tasks on a checklist. Like any other investment, a website should be built to be as close to future-proof as possible, and whilst the our offices have yet to include a crystal ball in their decor, we take every opportunity to ensure that each project is prepared for the future. Once your site has launched, that future may be in your hands but we’re always happy to offer continued support when you need it. But perhaps even more importantly, you’ll now have the confidence to speak about, and the knowledge to get the most from, your Big Bite built site.
