Zach’s ugly mug (his face) Zach Leatherman

The Simplest Web Site That Could Possibly Work Well

May 15, 2018

This week we’ve launched the new web site for NEJS CONF 2018 and I am so excited for our theme this year: ✨ outer space ✨.

2018.nejsconf.com

NEJS CONF 2018

The Simplest Tooling That Can Possibly Work Well

I try not to get carried away with tooling when working on these one-off side project sites. I want to implement best practices for front end web site performance but I also don’t want to spend a ton of bootstrap time getting the project infrastructure up before I can begin building.

I’d like something that scales to a little bit more complex of a project than this (but not much):

That’s one of my favorite things about Eleventy. It is flexible enough to work with any kind of project or directory structure, transforming data and templates into HTML content quickly and easily. It’s more of a tool than a framework.

Find out more about Eleventy:

The Simplest Critical CSS That Can Possibly Work Well

Critical CSS can be one of the biggest wins a project can do to improve their time to first render. Critical CSS build tools (Filament Group has one, as well as Addy Osmani and others) will find the CSS used in a stock Above the Fold viewport size and inject that right into the markup for near-instant rendering. However, we don’t really need to do this analysis at all if our stylesheets are small enough! The wins from this approach improve with stylesheet size. With a tiny stylesheet, we can just inject the whole CSS stylesheet right into the page. Good enough. 😇

Here’s how that works in Eleventy using Nunjucks for a layout template:

<!-- capture the CSS content as a Nunjucks variable -->
{% set css %}{% include "theme.css" %}{% endset %}
<!-- feed it through a cssmin filter to minify -->
<style>{{ css | cssmin | safe }}</style>

Here we are using a cssmin filter in our eleventy Config to minify the CSS too:

const CleanCSS = require("clean-css");

module.exports = function(eleventyConfig) {
	eleventyConfig.addFilter("cssmin", function(code) {
		return new CleanCSS({}).minify(code).styles;
	});
};

Don’t forget to npm install clean-css.

The Simplest Style Guide That Can Possibly Work Well

I didn’t want to use a separate dedicated style guide tool for this small project, either. There are a bunch of good ones out there and they work great for longer, larger projects. But I wanted the simplest thing that could possibly work. So, I set up a single template to showcase all of the site’s components together. This is the same approach I took for my personal site. Much like Sunday morning, easy.

The Simplest Preview That Can Possibly Work Well

About a week before launch, I decided that it would be good to put up a preview of the site online for some of the other organizers and our designer to look at and review. If we were using Netlify here this would have been trivial without code changes. And truth-be-told, setting up an additional subdomain on our existing host for testing wouldn’t have been that hard. But one of the coolest things Eleventy has to help with this is it’s pathPrefix configuration option. The default is / but I was able to simply change this to /preview/, rebuild and upload the entire site to 2018.nejsconf.com/preview/ for a quick and easy public preview. No additional server configuration required.

The Simplest Brand That Can Possibly Work Well

One of the intentional choices I made for NEJS CONF going into the second year was to maintain a consistent typeface throughout our different themes and redesigns. We’ve had three different designers working on the project in four years, but our typeface has remained constant. Using Effra every year (loaded from TypeKit) keeps a thread of consistency across wildly varying themes and helps people recognize our community-run conference as we grow and build a larger audience. Somewhat relatedly, this is also why I keep the green tint when I change my avatar on social media. A bit of consistency in an inconsistent world.

2017

2017.nejsconf.com

2016

2016.nejsconf.com

Excuse that dotted underline there, I swear the default browser styles for abbr changed after this launched 😇.

2015

2015.nejsconf.com


A special shout out to Will Riley for his help with a big pull request after the site’s launch. Thanks Will!


< Newer
The Life Expectancy of Digital Content
Older >
Obnoxiously Readable Responsive Text with Viewport Units

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 78 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)