Etch.co — How we built our new site.
We’re all about progressive web apps at Etch. Fast, accessible, slick, the best of the modern web.
--
Server-side rendered isomorphic React
We run a node express server and pre-render the website on the server before rehydrating on the front-end so you’re not left waiting for the app JS bundle to download before you can see the content.
When the app rehydrates, you get the full power of a React App for a slick front-end experience.
Offline asset caching
We use service workers to cache the most common site assets in the users browser so the site is still functional offline. You can browse the Etch site on the underground! This also helps keep new pages loading lightning fast.
Sass styling
With all the rage around CSS-in-JS at the moment, you might think this one is odd, but we prefer Sass, finding it super fast and clean for writing proper CSS. We use a BEM naming convention and lint the hell out of it to keep our team tight.
GraphQL auto-updating content
We use the tiniest GraphQL API in the world to update the content on our team member profiles. The content in the reading and writing sections, as well as our current statuses, is pulled from our internal Slack chat and beamed to a database so we can pull them into our website without ever having to break our normal daily workflow.
ES6 Javascript and Babel
We’re using ES6 on all our projects and transpiling back down to ES5 with Babel for legacy browsers. This lets us use tomorrows Javascript today and keeps our code as modern and future friendly as possible.
Linting, testing, and Continuous Deployment
We try to automate our deployment process as much as possible at Etch. By linting our code (and our commits) and writing solid tests, we can have the confidence to deploy at any time (except Fridays!), knowing that everything will keep working.
We’re using Sass Lint, Eslint and TravisCI to keep the Etch site moving forwards.
Lighthouse Audits
If you haven’t tried Lighthouse yet, you really should. Built by Google, Lighthouse checks the quality of your site against an array of metrics to keep your quality level as high as possible.
We’ve spent a bunch of time pushing our scores as high as reasonably possible so make sure our users get the best experience.
Easter Eggs
Yeah yeah, what you really want to know is where are all the Easter eggs?
After toying with web classics such as mobile-first, content-first and fluid-first, we settled on a new method of web practice: Easter-egg-first design.
There’s a ton of hidden content, features and things to click if you look closely enough… Bet you can’t find them all!
At Etch we build awesome web software.
Let’s see if we can help your team today hey@etch.co
