Changelog

Yesterday I migrated the practicalhugo.com mailing list from Buttondown to Brevo. It’s nothing against Buttondown, however I already run my personal newsletter through Brevo, so I wanted to consolidate my lists to make life a little easier.

I also updated the privacy page to reflect these changes.

Rest assurred, all .csv files used in the migration have been destroyed and data has been removed from Buttondown. Just as with Buttondown, my Brevo account is secured with a 28-character password stored in Bitwarden and two-factor authentication (2FA).

The callout below the curriculum on the homepage wasn’t working for me, so I’ve changed it to a good old marquee.

New feature

• Introduced a scrolling marquee above the footer to point out that the curriculum is still a work in progress and season 1 is coming soon.

Improvements

• Sign up form now includes a descriptive heading above it on smaller devices.
• “Modules” and “lessons” are now “Seasons” and “Episodes”. This, I hope, will manage expectations surrounding launch of content.

As I finally find time to get back into working on this course, I’ve spent some time reworking the CSS so it’s inline with cu.css and my current way of working.

This includes:

• Updating the CSS spacing system to use Utopia.fyi
• Improving the global styles based on cu.css
• Introducing .cluster and .repel compositions from cu.css
• Introducing exceptions from cu.css / CUBE CSS
• Reducing the number of utilities required in the design.

Improved homepage introduction and updated lessons in curriculum.

In compliance with UK data and privacy laws (“GDPR”) and in an effort to be more transparent, I have added a privacy page to the site.

• More adjustments to the callout design
• Switched to padding percentage based wrapper like on harrycresswell.com

Times up for Space Mono.

As much as it’s a great font, I wasn’t happy using it for long-form course content. A sans-serif on the other hand feels like a solid choice.

New feature

System defaults now used for headings and body copy.

I’ve introduced Menlo as a secondary font, with monospaced system defaults as fallbacks. Currently Menlo is used for navigation links, badges, code and the footer.

Removing Space Mono also makes the site a little more resilient, as the browsers no longer needs to fetch any font files.

See more of what’s coming in Figma.

A couple of small adjustments to the callout and the curriculum section.

Bug fixes & improvements

• Callout now uses dotted outline rather than a background colour, so it doesn’t clash with the sign up form. This was more of an issue for the single column layout, as seen on smaller displays
• Dropped the word “The” from “The Curriculum”, feels cleaner

Homepage now includes a course curriculum, well part of one at least. More to come soon. Lot’s of other smaller bits too.

New features

• Currculum added to homepage
• Scroll margin added to id’s for elements that can be targeted, a nice little trick I leart from Andy Bell
• Menu added to sitehead

Changes

• Site logo in sitehead moved to left and site title hidden for all but screen readers
• Sign up form now sticky on larger devices and includes first name input, also removed button down link

Bug fixes & improvements

• Callout now takes an optional icon, also added missing box shadow
• Replaced missing paragraph spacing on generic single pages, like thanks, etc

New feature

• Added a skip link to improve accessibility, so you can now jump straight to main content using keyboard tabbing, etc
• Improved link legibility by adding a hover effect

Bug fixes & improvements

• Added text-size-adjust to reset to prevent inflated text on mobile landscape orientation. Props to Kilian for help with this one
• Updated changelog permalink structure to include year, month and day

Lots of layout updates and environmental impact of a web page now calculated and displayed in the footer.

New features

• CO2 emmisions page score, based on data from Beacon
• New utility classes for grid, margin, padding and border
• Added Badge component

Bug fixes & improvements

• Homepage layout now 2 column on desktop
• Improved heading sizes and spacing
• Footer now feels more like a footer
• Inline code now highlighted
• Added missing ::selection style
• Changelog layout now utility classes

New feature

• Menu now supports external links with target="_blank" and rel="noopener noreferrer". See using custom params in menus.

Bug fixes & improvements

• Footer now stacks and menu no longer hard coded into footer partial
• Flow utility now spacing content in single log items

Bug fixes & improvements

Now using ExecuteAsTemplate to pass {{ .BaseURL }} to critical CSS and form absolute URLs.

Fonts now loading on subpages as URLs are no longer relative.

Resources

• Use Hugo template variables in SCSS files
• Error Hugo variable inside SASS

New features

• Added SCSS support with Hugo pipes
• Moved CSS to SASS partials
• Inlined critical CSS in <head>
• Added breakpoint mixin for easier media queries

Bug fixes & improvements

• Updated Twitter card with new tagline
• Improved typography and added size scale
• Updated color palette

Added missing 404 page.

Bug fixes & improvements

• Footer now stacks on smaller devices
• Added missing base URL to font paths
• Changelog entries now using <article>

Practicalhugo.com now has a changelog page. To record new features, bug fixes and improvements.