Hannah Woodward, reflecting on the “Webpack, Gulp, and Babel, Oh My!” talk by Jake Dohm
Over the last few years, the web seems to have really bloated in both size and complexity. I often hear the question asked - how is it that this website is still taking so long to load in this day and age? With the increasing use of tracking scripts, complex front end frameworks, and fancier looking websites, a website’s size can be deceivingly heavy. As a result, it’s now essential to consider optimisation and performance at all stages, from initial design considerations to fine-tuning server configuration. This was really highlighted at dotall, where nearly all of the talks I attended mentioned performance or optimisation in some way.
A perhaps less obvious area to consider is workflow optimisation. All developers can easily appreciate the power of automation, but having a solid workflow can also ensure a consistently-styled website that is easy to maintain and doesn’t contain any code it shouldn’t. Jake Dohm discussed the benefits of using a frontend build tool to improve workflow and mentioned a few tools that are currently popular among the community.
A good build tool transforms readable and consistent code into a version optimised for the browser. In some cases, this means we can end up writing in a different language to the final compiled output. Ten4 uses SCSS, an extension of CSS with useful features that make our code more maintainable. Using Rollup, we can write modern Javascript, then compile it into a version all browsers can understand. It also comes with other features such as detecting and removing unused code (tree-shaking), and compressing final output (minification). Ten4’s build tools also optimise images, reducing their file size and increasing website load speeds.
Jake mentioned PostCSS and Webpack in his talk, two build tools we don’t currently use. Both are popular within the web development community and have beneficial features that I’d like to explore and bring into our workflow.
— Hannah Woodward is a developer at Ten4
It’s now essential to consider optimisation and performance at all stages, from initial design to server configuration.
Charlie Grinsted reflecting on the “Accessibility: It Matters to Everyone” talk by Kaitlyn Martinez
Accessibility is a popular topic at Ten4 as we make strides to improve our knowledge of and adherence to the Web Content Accessibility Guidelines (WCAG). Aiming to allow anyone, regardless of circumstance or capability, to use our products is of paramount importance. We headed to Berlin perfectly primed for Kaitlyn’s talk by our recent attendance of the London Accessibility Meetup.
The talk focussed on the technical implementation of WCAG standards and centred on a case study detailing the iterative transformation of an inaccessible website. It was both reassuring and inspiring: it affirmed Ten4’s approach and implementation of WCAG suggestions; and it motivated us to work on some of the less common techniques, such as skip-links and aria-label attributes for separate sets of navigation.
The WCAG exist in different conformance levels and adherence to the highest level may not always be the best choice for your project. For example, WCAG AAA requires a minimum 7:1 contrast ratio, which may heavily impact a design or fall outside existing brand guidelines. However, as with any work we do on the web, progressive enhancement is the core principle at play — while a project may not conform on all counts, any improvement to the user experience should be embraced.
— Charlie Grinsted is a developer at Ten4
We headed to Berlin perfectly primed for Kaitlyn’s talk
Andy Green reflecting on the “Scaling Craft Sites for Large Launches” talk by Matt Weinberg
Matt’s talk focused on best practices for configuring Craft sites that are expected to receive a lot of traffic. He outlined a few principles to help reduce load on servers, so more site visitors can see more content, faster.
Time to First Byte (TTFB) is the measure of how quickly a client receives the first packet of data from a server after sending a request. With a short TTFB, your server is freed up to support more visitors, so it’s a good place to focus if high volumes of traffic are expected. Reducing the waiting time of visitors to your site comes along as a nice side benefit.
Out of the box, Craft’s TTFB can be pretty poor (above 250ms), simply because a CMS is a complex piece of software. By leveraging various optimisation and caching techniques, large parts of Craft’s processing can be bypassed, and TTFB can be significantly reduced. Matt described a few techniques he’s been using:
- Enabling PHP Opcache to reduce PHP compilation time.
- Identifying slow queries in Craft’s developer toolbar, and wrapping the offending template portions in cache tags.
- Offloading static assets to a content delivery network.
- Offloading the database to a separate service.
- Placing an in-memory content cache in front of the web server.
Ten4 has been applying these techniques during our recent infrastructure modernisation, and in some cases we’ve seen TTFB drop from 350ms down to 15ms! A speedy website is good for our clients and our clients’ visitors, and we’re pleased to be pushing the limits wherever we can. Thanks Matt!
— Andy Green leads the development team at Ten4
Sam O’Neill reflecting on the “Prioritising Author Experience” talk by Katie Fritz
In her talk, Katie explained the importance of configuring the Craft CMS control panel to maximise the usability of the system for content authors. She provided an interesting perspective on Craft, highlighting the fact that testing, familiarity and documentation all play an important role in ensuring that Craft is configured in a way that encourages content authors to continually share new content to their websites.
Katie likened the experience of switching to a new CMS to that of switching from one keyboard layout to another. The sense of familiarity with the old system will make switching to new one daunting, especially for non-technical users. It is our job as developers to be mindful of this and take steps to minimise the learning curve and ensure users make the most of the new tool (in this case Craft CMS) as quickly as possible.
Katie went on to explain how Craft CMS is uniquely suited to tackling this issue. Its immense flexibility and the breadth of plugins available can be used to make Craft easier and more fun for content authors. Some helpful changes to the control panel can be made out-of-the-box, such as only revealing necessary sections to different user groups or adding field instructions. Third party plugins can also be integrated to achieve maximum ease of use. Some examples include:
- Using the Expanded Singles plugin to expose single entries that were ordinarily hidden behind the ‘Singles’ entry group.
- Using Entry Instructions to add notes or instructions in entries with complex fields or elements.
- Using the Control Panel Nav plugin to rename sidebar navigation items to remove ambiguous technical language for key content areas, or reveal hidden subsections within ‘Globals’.
Our key takeaway was to be mindful of our users’ prior experiences. Through thoughtful implementation of the Craft control panel we can provide a new but immediately familiar system, one that our clients will enjoy from the start.
— Sam O’Neill is a developer at Ten4
Have a project you'd like to discuss? Speak to Dave
