frontend

Front EndCenter

Screencasts on the web platform for web professionals.

Two episodes every month on browsers, performance, tooling & techniques

Glen Maddern's avatar

Hi, I'm Glen Maddern

I'm a freelance front-end web developer & consultant from Melbourne, Australia. I have done some stuff on the internet before.
I want to make videos that dig deeper into the fundamentals of the web platform. Deeper than we usually get time to in our day jobs. Finding the enduring lessons from a constantly-changing landscape.
But working on the front end means understanding many fields at once, too. So, in that spirit, these videos will look closely at a wide range of topics, from complex performance problems, deep dives into browser internals, poking through interesting CSS + SVG demos & taking a pragmatic approach to new tools and technologies. And that's just for starters.
Start by watching the free episodes on YouTube. I hope you learn something useful! I'm making two new 10-15 minute episodes a month for subscribers, so I hope you'll consider subscribing to the paid channel! 😍

What people are saying

Latest Episode

Episode 13 — 31st March 2017
The Power of Blend Modes on the Web
If you've used Photoshop or basically any other image processing application this century you've probably come across the concept of blending—mixing the colours of two layers beyond what's possible with opacity. You may also be vaguely aware that this feature has made its way into most modern browsers, but why is it useful?
If you're like me, you might assume that these effects are only useful for images, and, even then, only for the kind of dramatic effects that look good in a tech demo but, frankly, seem out of place in building products or pages day-to-day.
But blending and compositing (the subject of the next episode) is much more than that. It's a gateway into an internal browser process that completely changes the way a website gets displayed. And gives us an incredible potential for rich, performant web designs that haven't been possible before.
For this episode, though, we're going to make sure we understand the mechanics of what's going on. And answer the question—what kind of blend modes actually produce something that looks good?
New episodes like this twice every month. Subscribe now.

Previous Episodes

Episode 12 — 28th February 2017
Demystifying Z-Index
The way a browser paints, in particular the z-index property itself, occupy an unusual spot in our collective knowledge. Most of the time, things work well enough that we never really feel the need to consider the underlying mechanics, but we still vaguely know there's more than meets the eye.
One day you'll have multiple layers seamlessly blending on a page, the next you won't be able to figure out why a click event is reaching the wrong element. Something's in the way, our element needs to be on top.
Like any good arms race, escalation is the smart choice, and so z-indexes of 10 turn into 100, 100 turns into 1000, and soon enough we can't distinguish real code from falling asleep on the keyboard.
It doesn't have to be this way. By digging down to the root of the problem, we can understand what's really going on. After all, there's only 3 really fundamental z-index values. How hard can it be?
Read more
Episode 11 — 31st January 2017
The Fastest Webfont Loader in the West
About 18 months ago, I noticed that refreshing a page with Typekit fonts would cause a momentary jump—the fallback font would be rendered for only a few milliseconds before the web fonts would snap in. It annoyed me, and I started digging. Fast forward to now, and solving this problem has taken months of research and 3 whole episodes of groundwork, but we're finally there.
Join me as we finally defeat the Micro-Flash-of-Unstyled-Text-Even-When-We-Have-the-Fonts-Cached.
Read more
Episode 10 — 31st January 2017
Foundations of Web Performance — Caching & CDNs
Last time out we were looking at how latency puts an upper limit on the performance of your site, and just how important it is to be hosting your content near your users. This time we go a step further: talking about the techniques and tradeoffs for highly cache-optimised sites, from content-addressable storage to federating your content across a CDN so requests don't even reach your server. With just a few judicious build-time choices and deploy-time hooks, you too can have the fastest static site the web can offer.
With just a few judicious build-time choices and deploy-time hooks, you too can have the fastest static site the web can offer.
Read more
Episode 9 — 23rd January 2017
Foundations of Web Performance — Latency
To kick off Front End Center for the new year we're going back to the fundamentals of web performance, and in particular the effect of latency on the speed of your site. Depending on where you live and the devices you use, high-latency internet access might be a totally foreign concept or an everyday reality, so in this episode we look at some concrete numbers to get a sense of just how much it can change someone's experience.
This is the first in a new series building up pithy.af, a side-project of mine that we'll use as a base to dive into lots of topics throughout the year. In this episode we look at the results of an experiment that I've been running, the TCP design decisions that cause connections to "slow start", and why it's worth adding a CDN to our architecture right at the beginning of the project.
Read more
Episode 8 — 24th December 2016
Crafting Webfont Fallbacks
Webfonts are a tricky thing to get right — the usual formula is: attractive visuals, good performance & reliable functionality (pick two). This episode is about how you can get all three by properly employing a fallback font while the webfont loads.
This episode comes in two parts: loading Webfonts properly & tuning the fallback font's CSS. This second part is an often-overlooked part of the process, and leads a lot of projects to conclude that the best way to use Webfonts is to hide the text until the font has loaded. And, as anyone who has stared at a blank screen on their mobile for 10+ seconds will tell you, that's not ideal.
Learn how you can cater for the unpredictable circumstances of your users without compromising the visual quality of your build.
Read more
Episode 7 — 29th November 2016
Really Reusable Components
Following on from the previous episode, this time we dig into the ideas of Interface Segregation and Liskov Substitution — two more Object-Oriented design principles that are remarkably relevant to working in a component-driven UI framework. We start to pick apart some of the reasons some components feel really inflexible and some seem to work everywhere, and give you some ideas about how to convert the former into the latter in future.
Read more
Episode 6 — 18th November 2016
Single Responsibility Components
The Functional Programming (FP) aspects of React are fairly prominent: by making your UI a pure function of your application state you remove a whole class of bugs that plagued earlier frameworks. If you look closely at the render method, or performance optimisations like shouldComponentUpdate, as well as popular libraries like Redux, again you’ll see a strong FP influence. But that’s not the only thing at play.
Because component-driven design is actually much closer to Object-Oriented (OO) programming. Components encapsulate state, present a public API, and map to objects in the “real world” (or in our case the UI), which are all core properties of Objects in OO. And they relate to each other, they share information or depend upon each other, which are all classical OO design problems. It means there’s a wealth of ideas, discussions and patterns that we can bring to bear in making our React components more readable, reusable, and maintainable.
Read more
Episode 5 — 24th October 2016
Image CDNs to the Rescue
Responsive imagery is one of those topics that seems way more complicated than it aught to be. It’s the sort of problem that confronts virtually every website out there—every site has images—and yet the approaches offered by HTML alone aren't sufficient.
In this episode we'll look at how using a dedicated Image CDN can simplify your markup, enable pixel-perfection regardless of device, use the best possible image formats available, and simplify use of the
<picture>
element and
srcset
attribute.
Read more
Episode 4 — 5th October 2016
Automating an Inline SVG Workflow
Building on last episode, we cover a seriously compelling workflow blending the best of both worlds — authoring an SVG spritesheet in Sketch but injecting them as Inline SVG, without a bunch of manual steps in between.
Read more
Episode 3 — 22nd September 2016
Why Inline SVG is Best SVG
SVG is one of the most powerful tools in a front-end developer's arsenal, and while its browser support is excellent, there's enough rough edges that a lot of people consistently reach for an alternative such as icon fonts, static images or CSS-only drawing techniques.
In this episode we'll look at what can be achieved by writing SVG by hand, simple effects that can add a lot to an interaction that only need a handful of lines of SVG + CSS. But we'll also consider why it is that Inline SVG, in particular, is so much easier to work with than embedding SVG in other ways.
Read more
Episode 2 — 5th September 2016
Current Color — The First CSS Variable
The currentColor keyword is a wildly powerful yet sadly underused feature of CSS. And understanding it requires a deep look at some of the core concepts in CSS that are often glossed over. We'll look at concepts that were present in the very first draft of CSS1 in 1996 all the way to the almost-ready-to-use CSS Variables spec.
And with our new-found dynamism we'll show how to go past the superficial limitations of currentColor to build some contextually-themed real-world UI elements.
Read more
Episode 1 — 22nd August 2016
Webpack from First Principles
Webpack often gets a bad rap in the front end community — plenty of digital ink has been spilled over whether web development is "too complicated", with Webpack taking center stage. But in reality, it's no more complex than the sites we're building with it, and conceptually its role is quite clear.
Let's demystify the tool by stripping it back to what it truly is — an ahead-of-time compiler for the browser.
Read more
Future Episodes
Coming Soon
I've got a huge list of topics to cover, and I work on several episodes at once. Here are some working titles for my upcoming episodes:
  • Managing Global State in React the Easy Way
  • Bulletproof SVG Animations
  • NPM in 2017—How to Release Code that Everyone Can Use
  • Publishing for Contributions—Open Source you can Actually Maintain
If you've got feedback on the topics or suggestions for future episodes, you should get in touch at [email protected].
FAQ
Can I download the videos?
Yep. All free and paid videos are available as DRM-free downloads to subscribers. Alternatively, you can sync them straight to your dropbox account.
Can I sign up on behalf of a team?
Please do! My videos are designed to give front-end specialists and the people they work with a shared understanding of the underlying web platform, so it's great if they're shared around. Sign up your team here or email me if the current plans aren't quite right for you.
Not ready to sign up yet?
Subscribe to the free episodes
Every couple of months I'll release one of the regular videos for free on Youtube. I'll be choosing videos that will be the most useful for the widest audience. They'll be made to the same standard as subscriber-only episodes, only free!(and less often)