The Simplest Web Site That Could Possibly Work Well
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 ✨.
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):
How to make a web page in 2017: pic.twitter.com/80BpM1BM5x
— Zach Leatherman (@zachleat) May 21, 2017
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
2016
Excuse that dotted underline there, I swear the default browser styles for abbr changed after this launched 😇.
2015
A special shout out to Will Riley for his help with a big pull request after the site’s launch. Thanks Will!