We launched a new website!
If you’re reading this, you (and we) have made it! Over the last six weeks, we have been working on design, content, photography, and development on our new shiny, public site. We landed on using WordPress for its fantastic CMS capabilities, but felt it was important to develop a custom experience on the front end — we are a software dev shop, after all.
We specialize in writing code at We Write Code, so let’s dive into some technical details and things we’ve learned along the way.
Bedrock & Sage
Developed by the team at roots.io, Bedrock and Sage have become invaluable tools when building out a custom WordPress site.
Bedrock is an organizational boilerplate for WordPress that offers many handy features — primarily handling the WordPress core + plugins as dependencies via Composer.
If you’ve ever dealt with the pain of keeping version-controlled WordPress sites updated, this might be a nice tool to look into. It also structures the application a bit differently, and allows you to separate your environment variables into an .env file.
Bedrock is a huge step forward in terms of moving WordPress into the modern development world, but if you want to take it to the next level, check out the delightful companion Sage starter theme also offered by Roots.
Out of the box, Sage offers a minimal yet powerful theme featuring fan-favorites like:
- Webpack already configured for a modern front-end workflow
- Browsersync for hot reloading your changes — who manually reloads these days?
- Your choice of popular stylesheets — or none!
- Laravel’s Blade templating engine for faster, cleaner, less tedious PHP
Can’t recommend Sage highly enough.
ThreeJS
If you find yourself in a fancy 3D environment on the web, there’s a huge chance that what you’re seeing is built using ThreeJS—a JavaScript library that simplifies the once-complex process of displaying 3D graphics on the web, using WebGL.
The possibilities using ThreeJS are endless. You are only limited to your imagination, JavaScript proficiency, and 3D modeling skills!
However, ThreeJS is processor-intensive. If you’re not careful, you can tank your page speed and cause older devices to lag, or even worse, crash. This article on ThreeJS tips and tricks was a great resource for finding things to optimize or refactor, and greatly helped with our relatively simple implementation on the homepage.
AnimeJS
AnimeJS—a lightweight JavaScript animation library—was incredibly easy to get started with, then push the limits on. Many of the elements on the site are interactive, whether it’s an animation on scroll, click, hover, or page load. Most of these interactions were made possible by the friendly AnimeJS API, not to mention the gorgeous documentation.
AnimeJS handles animations of all kinds — here’s a few specific features we used on the site:
- SVG path morphing for the hamburger menu slide out
- Simple staggering for offset animations on page loads
- Randomized triangles exploding on hover on the Solutions page
- Play/pause controls for triggering animations on scroll
A lot of work goes into a big reward — now go play with our site!