Winter 2020 website refresh, Part #1 #
Started by branching off and cleaning out everything (except
Added 11ty-base-blog. I started from this in the previous branch too, but wanted to get up to date with the latest version of 11ty, examples of the latest 11ty goodness e.g. changes to navigation etc.
Checked my lighthouse score manually in Chrome.
Netlify > Domain Management > Branch Subdomains > create ”v4” subdomain for branch v4 deploys (and blocked search engine robots) https://v4.fuzzylogic.me/
Deployed Zach’s speedlify to Netlify which also creates a new Github repo.
Created a "build hook" on that Netlify app (its an API URL that can be hit which triggers a build)
Set up a Github action on my speedlify Github repo, scheduling a run of the netlify build (by hitting the build hook) every morning. (refs https://github.com/Jinksi/netlify-build-github-actions, https://twitter.com/iign/status/1288933337478975504
Working custom speedlify on Netlify https://zen-hoover-34d28b.netlify.app/fuzzylogic.me/
Added two Netlify plugins
- Minify HTML
** removed this because for some reason or another my closing body and html tags were being removed!
Added Netlify CMS, with help from https://www.youtube.com/watch?v=WEApDhZMAL4 and https://www.netlifycms.org/docs/add-to-your-site/ and https://www.netlifycms.org/docs/backends-overview/.
Messed around with data in Eleventy. Started by pulling Rick and Morty characters per the Jason Lengsdorf video. Moved on to getting my latest record purchases from discogs. Started with raw node-fetch, then switched to eleventy-cache-assets. Locally using dotenv for sensitive API tokens, and at Netlify created environment variables.
How to break out to full-bleed, various ways.
Here’s an interesting tool for creating and sharing small-ish web pages without having to build a website or organise hosting.
itty.bitty takes html (or other data), compresses it into a URL fragment, and provides a link that can be shared. When it is opened, it inflates that data on the receiver’s side.
Hidde de Vries explains why an HTML heading should never be immediately followed by another.
When you use a heading element, you set the expectation of content.
I’m Jack McDade and I’m tired of boring websites.
Here’s a beautiful, magazine style website design for digital publication Bustle. The typography, use of whitespace, responsive layout, menu pattern, colour palette and imagery are all on point!
SVGs enable full-screen hi-res visuals with a file-size near 5KB and
are well-supported by all modern browsers. What's not to love?
Here’s Jeremy Keith, making the moral case for accessible websites and why we shouldn’t use “you can make more money by not turning people away” as an argument:
I understand how it’s useful to have the stats and numbers to hand should you need to convince a sociopath in your organisation, but when numbers are used as the justification, you’re playing the numbers game from then on. You’ll probably have to field questions like ”Well, how many screen reader users are visiting our site anyway?” (To which the correct answer is “I don’t know and I don’t care” – even if the number is 1, the website should still be accessible because it’s the right thing to do.)
A font pairing app that helps you match fonts – useful for pairing a webfont with a suitable fallback. You can place the fonts on top of each other, side by side, or in the same line. You can adjust your fallback font’s size and position to get a great match.
If you’re using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you’ve chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths. This tool helps you do exactly that.
I love Cassie Evans’s new website design! It’s so full of personality while loaded with technical goodies too. Amazing work!
A combination of asynchronously loading CSS, asynchronously loading font files, opting into FOFT, fast-fetching asynchronous CSS files, and warming up external domains makes for an experience several seconds faster than the baseline.
Here’s Chris Ferdinandi with a list of resources to help those who are new to web development get started. I’m keeping this one handy so I can share it with any friends who’re thinking of getting into this game.
Is online advertising working? We simply don’t know
Skinning your prototypes just got easier - colors.css is a collection of skin classes to use while prototyping in the browser.
Here’s how to improve performance and prevent layout jank when browsers load responsive images.
Six accessibility tests Viennese Front-end Developer Manuel Matusovic runs on every website he develops, beyond simply running a Lighthouse audit.
Digital products which are a public accommodation must be accessible, or will be subject to a lawsuit (and probably lose).
Here, Ed provides some handy code to convert a Markdown-formatted string into HTML in Nunjucks via an Eleventy shortcode.
A fairly rigid commit format (
feat etc) which should lead to your git log being an easy-to-skim changelog.
Now that we have the HTML attribute
loading we can set
loading="lazy" on our website’s media, and the loading of non-critical, below-the-fold media will be deferred until the user scrolls to them.
I have an open-source, Eleventy-based project where the posts are restaurants, each of which is located in a particular city, and contributors to the repo can add a new restaurant as a simple markdown file.
I’ve been admiring the wave effect at the foot of banners on Netlify’s website and had noted that they were achieved using SVG. So this tool which helps you “make waves” is pretty timely!
Evan Minto notes that flexible grids created with CSS Grid’s
minmax are only intrinsically responsive (responsive to their container rather than the viewport) up to a point, because when the container width is narrower than the minimum width specified in
minmax the grid children overflow.
Use this design system to make your service consistent with GOV.UK. Learn from the research and experience of other service teams and avoid repeating work that’s already been done.
Sometimes, for reasons unknown, we find that clicking or tapping an element just isn’t working. Here’s a CSS-based approach that might help.
It’s a collection of shared patterns and practices that allow our team to build quality user interfaces consistently and quickly.
When taking the DIY approach to building a new server, Certbot is a great option for installing secure certificates. However, sometimes you can run into problems. Here, I review the main recurring issues I’ve encountered and how I fixed them.
The original call-to-arms and manual for Design Systems.
A handy tool for identifying colours – provided in numerous different CSS-ready formats – and creating a complimentary colour palette from an image you upload or provide as a URL.
No CMS, no installation, no server, no coding required.
These days when friends tell me they want a personal website, it’s often just a single-page profile that they’re really after rather than something pricier and more complicated.
I’ve heard a couple of people mention that when they buy domain names, they use Namecheap because they are cheap and trustworthy.
Great resource from CSS Grid expert Rachel Andrew, with the Patterns and Examples sections which provide quick-start grid layouts being particularly handy.
dialog: a new, easier, standards-based means of rendering a popup or modal dialogue.
See all tags.