This event site comes from the very clever folks at Cloud 4. Coming from this amazing team you would expect it to be a pretty awesome implementation using SVG where they needed to and either the SRCSET or PICTURE implementations. They did not disappoint.
The Picture element is used to target browsers that support SVG with a fallback img tag for PNGs, while the SRCSET is used for the speaker bio pictures to make sure they look as gorgeous on the page as they do in person.
They're using a Grid Framework that I haven't come across before, Suit CSS.
They also did very well to concatenate all of the Javascript into a single file. Within that file they're running
- Custom Modernizr with support checks for inlinesvg-svg-shiv-cssclasses-load
- Picture Fill
The CSS is beautifully crafted with lots and LOTS of comments to indicate why each element was used. You could look at this as being lazy and not removing it, but I like to look at it like it would be a fantastic learning example for anyone getting into writing CSS to see why particular rules are included and where.
The downside to the CSS and JS included within here is that they're not compressed so carry a few extra bytes along the way with them. In this case I would argue that it's a learning resource rather than look at it negatively.
Finally I would add that on such a small site with so few CSS rules you could almost get away with inlining all of them... or at the very least inline the ones to achieve the now favoured Critical CSS approach.
Responsive Field Day Technical Details
Site Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1">
Media Queries
@media (min-width: 39.125em) { }@media (min-width: 30em) { }@media (max-width: 39.0625em) { }@media (min-width: 39.125em) { }@media (min-width: 60em) { }@media (min-width: 75em) { }
Before you leave
I know, "another newsletter pitch" - but hear me out. Most JavaScript newsletters are terrible. When's the last time you actually looked forward to getting one? Even worse, when's the last time you actually read one rather than just skim it?
We wanted to change that, which is why we created Bytes. The goal was to create a JavaScript newsletter that was both educational and entertaining. 97,440 subscribers and an almost 50% weekly open rate later, it looks like we did it.
Delivered to 97,440 developers every Monday

Sdu
@sduduzo_g
This is the first ever newsletter that I open a music playlist for and maximize my browser window just to read it in peace. Kudos to @uidotdev for great weekly content.

Brandon Bayer
@flybayer
The Bytes newsletter is a work of art! It's the only dev newsletter I'm subscribed too. They somehow take semi boring stuff and infuse it with just the right amount of comedy to make you chuckle.

John Hawley
@johnhawly
Bytes has been my favorite newsletter since its inception. It's my favorite thing I look forward to on Mondays. Goes great with a hot cup of coffee!

Garrett Green
@garrettgreen
I subscribe to A LOT of dev (especially JS/TS/Node) newsletters and Bytes by @uidotdev is always such a welcomed, enjoyable change of pace to most (funny, lighthearted, etc) but still comprehensive/useful.

Muhammad
@mhashim6_
Literally the only newsletter I’m waiting for every week.

Grayson Hicks
@graysonhicks
Bytes is the developer newsletter I most look forward to each week. Great balance of content and context! Thanks @uidotdev.

Mitchell Wright
@mitchellbwright
I know I've said it before, but @tylermcginnis doesn't miss with the Bytes email. If you're a developer, you really need to subscribe

Ali Spittel
@aspittel
Can I just say that I giggle every time I get the @uidotdev email each week? You should definitely subscribe.

Chris Finn
@thefinnomenon
Every JavaScript programmer should be subscribed to the newsletter from @uidotdev. Not only do they manage to succinctly cover the hot news in the JavaScript world for the week but it they manage to add a refreshing humor to it all.