RSSAmplifier

Blog

Cruft

This blog is run by a group of developers, testers, enablement engineers, project managers, business analysts, and product owners at Springer Nature. We care about building the right thing in the right way, focusing on user-driven design and letting data inform our decisions.

cruft.ioRSS feed ↗26 posts

Latest posts

On class, id and data HTML element attributes for frontend developers

Background I am a frontend developer (nicely abbreviated as FED at Springer Nature, and I love that acronym). I am very passionate about it and do not understand why not every person in the world is passionate about frontend development. I am also very emotional, which I think goes well with passion. Whenever I find something that doesn’t feel right or is even not understandable to me, I tend to…

Web Performance Techniques - Fonts and Images

This article reflects on some recent work my team undertook to improve web performance on our pages. I’d like to share two areas that we made improvements in: Fonts Images But first I want to cover something… Web performance metrics and diagnosis of issues These days, our Google search ranking depends on a number of things, and one of those things is Google’s concept of “Core Web Vitals”. These…

Design Tokens: Visual Consistency and Efficiency

Introduction In the world of design, maintaining visual consistency across various platforms and products can be a challenging task. Design tokens offer a solution by providing a unified system for managing design elements and attributes. These tokens, often described as the DNA of design systems, empower teams to efficiently create cohesive user experiences. What are design tokens? Design tokens…

Control security response headers with ExpressJS and HelmetJS

Background We, the frontend developers of Springer Nature’s Institutional Customer Experience (ICE) team, control several Express web servers that provide the web pages to our customers. Recently, I randomly checked one of the websites using the online service provided by Security Headers . Security Headers is a web service that checks the response headers sent by a web server for security-related…

NodeJS Run and Debug in VS Code

Background We, the frontend developers of Springer Nature’s Institutional Customer Experience (ICE) team, often use the free coding editor Visual Studio Code (VSC) for development. One of our projects - the Librarian Portal - uses a Node.js web server engine called Express . The express server communicates with the back end to fetch information - which it then uses to compile HTML. For local…

Briefing Creator – an adventure in Google Apps Script

Background When I returned to Springer Nature in October 2018 it was to take over front-end dev responsibilities on Nature Briefing from another contractor who was moving onto another gig. During the week of handover, they told me all about Briefing while they frantically tried to finish the documentation and to fix the tests. Standard handover, nothing out of the ordinary. Nature Briefing is a…

Four Probe Testing

Table of contents Table of contents Background Assumptions Scope A note on context and naming Our Unit Tests Our Integration Tests Our Feature Tests Our Smoke Tests Conclusion Background Testing can be a controversial topic . I should warn you therefore, that you won’t get much fire and brimstone out of me. You will get aardvarks out of me. Driven by what we’ve found to be practical, we make use…

Using Travis CI to deploy to Cloud Foundry

Table of contents Table of contents Background Assumptions Scope Before deploy Deploy Env After deploy Deploys in practice 1. Pull Request builds 2. A note on working with the commit-to-trunk flow 3. Deploying to Staging 4. Deploying to Live 5. Rolling back 6. Particulars Conclusion Other blue-green and zero-downtime scripts Background Many of our applications run their Continuous Integration…

Software Practice Advancement 2017 review

Did I find the conference interesting? Yes! Will I come back next year? Yes! Was it perfect? No… The conference is about learning, sharing and interacting. The organisers implement that by having hands-on sessions where the speakers engage the audience with practical activities. Be aware though that is not all about coding, definitely not. For example I learnt how to knit - yes, you read that…

Towards an arithmetic of sets

This is about some recent advances on Bewl , my 10% time project at Springer. It’s a rather unusual project based on some quite advanced math, and may yet give insights into diverse math-related areas. Bewl is a language for doing set-like calculations with objects that are not sets. More precisely, Bewl is a domain specific language ( DSL ) for topos theory . That’s quite a mouthful, so let me…

SoCraTes UK 2017

From bell ringing to bash testing there is something for everyone at the SoCraTes (un)conference. Having never been I was interested to see how it would work, and what better way to get involved than with the law of two feet. If you like something stay if you don’t feel free to go away. The conference, for all its deliberate lack of upfront session plans, was exceptionally well organised. The 18th…

Automated accessibility testing with Travis CI

Too often accessibility testing is left as a manual process, and so inevitably it is done only sporadically (or worse; never). To help address this shortfall, Springer Nature developed and released Pa11y which uses HTML CodeSniffer and PhantomJS to raise common accessibility issues in an automated manner. Since then Pa11y has continued to evolve to suit the needs of the developer community. This…

Being a deaf developer

I’ve been deaf since infancy. It is not profound; my hearing loss is described as moderate to severe and is mostly problematic at higher frequency ranges , the range at which most human speech happens. I rely on lip-reading and identifying vowel patterns to understand spoken language. Particular struggles are: recognising consonants, especially sibilants and unvoiced consonants (all consonants are…

A New Name

We’re behind the official announcements , but the teams that contribute to Cruft are now part of a new company – Springer Nature . Springer Nature is a combination of Nature Publishing Group (where Cruft was born), Palgrave Macmillan, Macmillan Education and Springer Science+Business Media. In terms of Cruft, nothing much will change. We have some new friends to help contribute, and we look…

Complex Routing Logic with Thundermole

Over the last year, we have begun the process of migrating many Nature journals to our new platform. Because journals on the new platform also come with a significant redesign, we were required to run an opt-in beta program to trial the new design and gather feedback. The beta program had many requirements: Opted out users should see the old version of the site on the legacy platform Opted in…

Simple Feature Flagging with Bandiera

Feature flagging (also known as feature toggles, feature switches, feature flippers etc.) is a development practice that allows teams to decouple code release from feature release, and is something that we’re big fans of, and have been practicing here for the last few years. For more information on feature flagging and how useful the practice can be, see these notes:…

Time-based comparisons of WebPageTest results

WebPageTest result data is not ideal for making historical comparisons. Typically you are dealing with small sample sizes that are far more prone to skewing from natural network variation than RUM data is. Nonetheless, sometimes you want to make comparisons between synthetic results from vastly different points in time. To better draw those comparisons, I’ve modified webpagetest-mapper to express…

Introducing WebPageTest-mapper

WebPageTest is an incredibly useful and nuanced open-source tool that enables engineers to probe into all aspects of a website’s performance. WebPageTest-API is a node.js-based command-line interface for WebPageTest, which allows large numbers of tests to be automated against public or private WebPageTest servers. Today, we are open-sourcing WebPageTest-mapper , a wrapper for WebPageTest-API that…

Browser Rounding and Fractional Pixels

Whilst researching the building of a responsive, percentage width grid, I needed to find out how different browsers dealt with width values containing decimal places. I found lots of information on how some browsers round fractional pixels to the nearest integer, some round down, and newer browsers use sub-pixel rendering to visually represent fractions of a pixel. I wanted to find out how…

Centralised Logging with Rsyslog

Modern web applications involve lots of moving parts, distributed on multiple servers. Tracking what is happening and diagnosing issues can be a challenge so a way of centralising your log output is very desirable. This is where a standard UNIX tool such as Syslog can help greatly. This post describes how to setup a central log server for collating all of your logs in a single location, and…

RUM waterfall charts with the W3C Resource Timing API

Waterfall charts are familiar to most web developers due to their presence in various web browser developer tools. They provide a clear visualisation of when each resource on a page is loaded, how long each stage of the loading process takes and how all of the different resources interact to cause performance bottlenecks. Usually, waterfall charts are plotted with synthetic data, either using…

Command-line utilities with Node.js

One often overlooked feature of node.js is the ability to create command-line utilities. Here I want to demonstrate how simple it can be to create useful command-line utilities with the help of node.js. I’m going to create a small utility which allows for quick searching of GitHub for reposities based on keywords, owners and languages. If you’d like to jump straight into the source code, it’s…

Supporting the technology community - Codebar

Diversity: the art of thinking independently together. Malcolm Forbes At Macmillan Science and Education we are working hard to try and help support the technology communities we are a part of. We like open source and have been busy open sourcing some of our internal tools to help people manage servers or drive website accessibility . Over the last few months some of our team have been helping to…

Introducing boomcatch

Boomcatch is a standalone, node.js-based beacon server for boomerang, the foremost client-side RUM library. RUM, boomerang and the W3C Navigation Timing API ‘RUM’ is an acronym for real-user monitoring, the technique of collecting performance metrics directly from your users’ browsers, rather than from test clients running in your own infrastructure (something commonly referred to as ‘synthetic’…

Accessibility Testing With pa11y

pa11y is a command-line tool used to find accessibility issues in web pages. Nature built and released pa11y to address a short-fall in automatable accessibility testing; it uses HTML CodeSniffer in PhantomJS to raise common issues and reports them in both human and machine readable formats. This post assumes that you’ve installed pa11y ( requirements and instructions ). pa11y is most useful when…

Welcome

Welcome to Cruft, the Macmillan Science and Education development blog. Here we’ll be posting about development at Macmillan, open source, and the interesting problems we’re solving in our digital teams. We have a very broad technology stack, and this should be reflected in our future posts. We’ll also talk about process, and building user-driven products in a large organisation. We’ll be tweeting…