Category: Cool Thing

Last week it was my turn to bring something cool to the team and I decided to share was some stuff I learned at a meetup from earlier in the week.

The meetup was hosted by Sergey Chernyshev from the NY Web Performance meetup group and the topic was “Designing Speed with Progressive Enhancement”.

 

The underlying topic is Progressive Enhancement. If you ask a group of web developers what Progressive Enhancement means, odds are good you’ll get several definitions. But what each of those definitions have in common will be amount or type of features available to a user. Whether that’s in the form of prioritizing content loading (like the main-navigation) or building your website such that it works without JavaScript (this idea is a little older).

This presentation focused more on prioritizing loading and it also touched on pre-loading effects when navigating once already in the website.

Something to focus on is getting that time to “first paint” down to or below 3 seconds, so how can we do that?

In addition to moving your javascript calls to just before the closing </body> tag, when focusing on getting that “first paint” to render as soon as possible you can inline your CSS for static elements such as the main navigation, that way the loading of that interactive content isn’t waiting for your css to get loaded.

When testing for your loading time I recommend using your browser of choice’s developer tools to simulate different mobile networks. This will allow you to see how your website is loading from your current WiFi connection but also allow you to see how it would load for a mobile user on their phone network.

For more of a breakdown and slew of other great Progressive Enhancement tips I highly recommend you look through Sergey’s entire presentation.

I spent the beginning of this week at Full Stack Toronto, a 2-day conference devoted to all things web development. I was honored to be asked to be the Keynote speaker where I gave a talk about the Radical Topic of Women in Tech.  The talk was well received and prompted some really good conversations about the ratio of women to men in the workplace.

Some of the highlights of the conference were:

• Jennifer Wong’s (Eventbrite) What The Duck-Typed Are My Engineers Saying? talk which fully admitted that developers often use terminology they don’t fully understand.
• Kate Travers’ (Flatiron School) talk about converting their CSS to Object oriented CSS
• and my personal fav Henri Helvetica’s talk about The Hateful Weight which discussed how we are accruing way too much page debt in our development and some techniques for getting those page weights down. Check out the slides here.

I’ve been spending much of this week incorporating some of the things I learned into this very website.

This week was my turn to find something cool and share with the team.
And now I’d like to share this with you, so let me give you a summary of CSS counters!

Just like the author Samuel Oloruntoba notes in this article, web developers had to previously resort to an approach like the following:

The reason why this solution is less than desired is that it puts more logic into our markup than is necessary, whereas now we can simply specify this sort of functionality in our stylesheets.

With additional styling, this results in the following:

See the Pen
Increment by +X by Salvatore Torcivia (@SalTor)
on CodePen.

And in addition to incrementing / decrementing decimal values, we also have access to lower/upper-roman, lower/upper-latin, and several other symbolic counters.

ScrollMagic is a jQuery plugin that allows for easy parallax scrolling and triggering of animations through scroll.  It integrates nicely with GreenSock which is another must have here at Compose[d].