Thursday, April 22nd, 2021
Thursday, October 1st, 2020
This is a superb twenty minute presentation by Trys! It’s got everything: a great narrative, technical know-how, and a slick presentation style.
Conference organisers: you should get Trys to speak at your event!
Monday, August 17th, 2020
Netlify redirects and downloads
Making the Clearleft podcast is a lot of fun. Making the website for the Clearleft podcast was also fun.
Design wise, it’s a riff on the main Clearleft site in terms of typography and general layout. On the development side, it was an opportunity to try out an exciting tech stack. The workflow goes something like this:
- Open a text editor and type out HTML and CSS.
Comparing this to other workflows I’ve used in the past, this is definitely the most productive way of working. Some stats:
- Time spent setting up build tools: 00:00
- Time spent wrangling the pipeline to do exactly what you want: 00:00
- Time spent trying to get the damn build tools to work again when you return to the project after leaving it alone for more than a few months: 00:00:00
I have some files. Some images, three font files, a few pages of HTML, one RSS feed, one style sheet, and one minimal service worker script. I don’t need a web server to do anything more than serve up those files. No need for any dynamic server-side processing.
Netlify suits my hosting needs nicely. It also provides the added benefit that, should I need to update my CSS, I don’t need to add a query string or anything to the
link elements in the HTML that point to the style sheet: Netlify does cache invalidation for you!
The mp3 files of the actual podcast episodes are stored on S3. I link to those mp3 files from
enclosure elements in the RSS feed, which is what makes it a podcast. I also point to the mp3 files from
audio elements on the individual episode pages—just above the transcript of each episode. Here’s the page for the most recent episode.
I also want people to be able to download the mp3 file directly if they want (or if they want to huffduff an episode). So I provide a link to the mp3 file with a good ol’-fashioned
a element with an
I throw in one more attribute on that link. The
download attribute tells the browser that the URL in the
href attribute should be downloaded instead of visited. If you give a value for the
download attribute, it will over-ride the file name:
<a href="/files/ugly-file-name.xyz" download="nice-file-name.xyz">download</a>
Or you can use it as a Boolean attribute without any value if you’re happy with the file name:
<a href="/files/nice-file-name.xyz" download>download</a>
There’s one catch though. The
download attribute only works for files on the same origin. That’s an issue for me. My site is
podcast.clearleft.com but my audio files are hosted on
download attribute will be ignored and the mp3 files will play in the browser instead of downloading.
I added a file called
_redirects to the root of my project. It contains one line:
/download/* https://clearleft-audio.s3.amazonaws.com/podcast/:splat 200
That says that any URLs beginning with
/download/ should redirect to
clearleft-audio.s3.amazonaws.com/podcast/. Everything after the closing slash is captured with that wild card asterisk. That’s then passed along to the redirect URL as
:splat. That’s a new one on me. I hadn’t come across that terminology, but as someone who can never remember the syntax of regular expressions, it works for me.
Oh, and the
200at the end is the status code: okay.
Now I can use this
/download/ path in my link:
<a href="/download/season01episode06.mp3" download>Download mp3</a>
Because this URL on the same origin, the
download attribute works just fine.
Friday, May 8th, 2020
Trys describes the backend architecture of the excellent Sofa Conf website. In short, it’s a Jamstack dream: all of the convenience and familiarity of using a database-driven CMS (Craft), combined with all the speed and resilience of using a static site generator (Eleventy).
I love the fact that anyone on the Clearleft events team can push to production with a Slack message.
I also love that the site is Lighthousetastically fast.
Thursday, December 12th, 2019
Saturday, November 16th, 2019
Sunday, October 20th, 2019
A terrific—and fun!—talk from Zach about site deaths, owning your own content, and the indie web.
Oh, and he really did create MySpaceBook for the talk.
Thursday, August 1st, 2019
Chris broke both his arms just to avoid speaking at the JAMstack conference in London. Seems a bit extreme to me.
Anyway, to make up for not being there, he made a website of his talk. It’s good stuff, tackling the split.
It’s cool to see the tech around our job evolve to the point that we can reach our arms around the whole thing. It’s worthy of some concern when we feel like complication of web technology feels like it’s raising the barrier to entry
Thursday, June 6th, 2019
Chris makes the very good point that the J in JAMstack isn’t nearly as important as the static hosting part.
This is my maj.
Friday, May 31st, 2019
This is very handy! Export your data from Ev’s blog and then import it into a static site generator of your choice.
You may have noticed the recent movement of people looking to get off Medium. Most of us are motivated by a desire to own our content, have data portability and get more control over how/where our content is displayed and monetized. Most importantly many of us consider our blog/site to be a core part of our online identity and while Medium offers a fantastic writing experience it sacrifices other important values. Luckily there’s a modern approach to running your blog which aligns with these ideals, its called the JAMstack and its all around us.
Tuesday, May 21st, 2019
I’m not trying to convince anyone they aren’t a full-stack developer or don’t deserve that particular merit badge — just that the web is a big place with divergent needs and ever-morphing stacks that all require different sets of skills.
Tuesday, March 5th, 2019
How to Think Like a Front-End Developer by Chris Coyier
Alright! It’s day two of An Event Apart in Seattle. The first speaker of the day is Chris Coyier. His talk is called How to Think Like a Front-End Developer. From the website:
The job title “front-end developer” is very real: job boards around the world confirm that. But what is that job, exactly? What do you need to know to do it? You might think those answers are pretty cut and dried, but they’re anything but; front-end development is going through something of an identity crisis. In this engaging talk, Chris will explore this identity through the lens of someone who has self-identified as a front-end developer for a few decades, but more interestingly, through many conversations he’s had with other successful front-end developers. You’ll see just how differently this job can be done and how differently people and companies can think of this role—not just for the sake of doing so, but because you’ll learn to be better at your own jobs by understanding how other people are good at theirs.
I’m going to see if I can keep up with Chris’s frenetic pace…
Chris has his own thoughts about what front-end dev is but he wants to share other ideas too. First of all, some grammar:
I work as a front-end developer.
I work on the front end.
Those are correct. These are not:
I work as a front end developer.
I work on the front-end.
And this is just not a word:
Lots of people are hiring front-end developers. So it’s definitely a job and a common job title. But what does it mean. Chris and Dave talked to eight different people on their Shop Talk Show podcast. Some highlights:
Eric feels that the term “front-end developer” is newer than the CSS Zen Garden. Everyone was a webmaster, or as we’d say now, a full-stack developer. But if someone back then used the term “front-end developer”, he’d know what it meant.
Mina says it deals with things you can see. If it’s a user-facing interface, that’s front-end development.
Trent says that he thinks of himself as a web designer and web builder. He doesn’t feel he has the deep expertise of a developer, and yet he spends all of his time in the browser.
So our job is in the browser. You deal with the browser (moreso than other roles). And by the way, there are a lot of browsers out there.
Maybe the user is what differentiates front-end work. Monica says that a back-end developer is allowed not to care about the user if their job is putting a database together. It’s totally fine not to call yourself a front-end developer, but if you do, you need to care about the user.
There are tons of different devices and browsers. It’s overwhelming. So we just gave up.
So, a front-end developer:
- Is a job and a job title.
- It deals with browsers, devices, and users.
- But what skills does it involve?
It’s taken for granted that you can use a computer. There’s also the soft skills of interacting with co-workers. Then there are the language-specific core skills. Finally, there are the bonus skills—all the stuff that makes you you.
The languages you need to strongly understand to read, write and maintain them.
Peggy believes that as a front-end developer you need to have a basic proficiency in accessibility too. This is, after all, about user-facing interfaces.
The Figma team have a somewhat over-engineered graphic of all the skillsets that people might have, between “baseline” and “supplementary”.
Perhaps we all share a common trunk of skills, and then we branch in different directions.
You could imagine two people called front-end developers meeting, and having nothing in common to talk about. Maybe sports.
Brad says he doesn’t want to be configuring build tools. He thinks of himself as being at the front of front-end development, whereas other people are at the back of front-end development.
This divide is super frustrating to people right now.
Let’s look at CodePen. There’s a little heart icon on each pen. It’s an icon component. And the combination of the heart and the overall count is also a component. And the bar of items altogether—that’s also a component. And the pen it sits under is a component. And the page it’s in is a component. And the URL for that page is a component. Now the whole site is a front-end developer’s concern.
In the past, a front-end developer would ask a back-end developer for an API endpoint. Now with GraphQL, the front-end developer can craft a query to get exactly what they need. Sure, the GraphQL stuff had to be set up in the first place, but that’s one-time task. Once it’s set up, the front-end developer has everything they need.
All the old work hasn’t gone away either. Semantics, accessibility, styling—that’s still the work of a front-end developer as well as all of the new stuff listed above.
Hiring is a big part of this. Lara Schenk talks about going for an interview where she met 90% of the skills listed. Then in an interview, she was asked to do a fizzbuzz test. That’s not the way that Lara thinks. She would’ve been great for that job, but this single task derailed her. She wrote about it, and got snarky comments from people who thought she should’ve been able to do the task. But Lara’s main point was the mismatch between what was advertised and what was actually being hired for.
You see a job posting for front-end developer. Who is that for? Is it for someone into React, webpack, and GraphQL? Or is it for someone into SVG, interaction design, and accessibility? They’re both front-end developers. And remember, they can learn one another’s skills, but when it comes to hiring, it has to be about the skills people have right now.
Peggy talks about how specialised your work can be. You can specialise in SVG. You can specialise in APIs and data.
We’re probably not going to solve this right now. The hiring part is definitely the worst part right now. One solution is to use plain language in job posts. Make it clear what you’re looking for right now and explain what background you’re coming from. Use words instead of a laundry list of requirements.
Heydon Pickering talks about full-stack developers. Their core skills are hardcore computer science skills.
Brad Frost concurs. It tends not to be the other way around. The output tends to be the badly-sketched front of the horse.
Even if there is a divide, that doesn’t absolve any of us from doing a good job. That’s true whether it’s computer science tasks or markup and CSS.
Despite the divide, performance, accessibility, and user experience are all our jobs.
Maybe this term “front-end developer” needs rethinking.
The brain game
Let’s peak into the minds of very different front-end developers. Chris and Dave went to Dribbble, pulled up a bunch of designs and put them in front of their guests on the Shop Talk Show.
Here’s a design of a page.
- Brad looks at the design and sees a lot of components of different sizes and complexity.
- Mina sees a bunch of media objects.
- Eric sees HTML structures. That’s a heading. That’s a list. Over there is an unordered list.
- Sam sees a lot of typography. She sees a type system.
- Trent immediately starts thinking about how the design is supposed to work in different screen sizes.
Here’s a different, more image-heavy design.
- Mina would love to tackle the animations.
- Trent sees interesting textures and noise. He wonders how he could achieve those effects without exporting giant image files.
- Brad, unsurprisingly, sees components, even in a seemingly bespoke layout.
- Eric immediately sees a lot of SVG.
- Sam needs to know what the HTML is.
Here’s a more geometric design.
- Sam is drawn to the typography.
- Mina sees an opportunity to use writing modes.
- Trent sees a design that would reflow and reshape itself well.
- Eric sees something with writing mode, grid, and custom fonts.
Here’s a financial mobile UI.
- Trent wants to run it through a colour-contrast analyser, and he wants to know if the font size is too small.
Here’s a crazy festival website.
- Mina wonders if it needs a background video, but worries about the performance.
Here’s an on-trend mobile design.
- Monica sees something that looks like every other website.
- Ben wonders whether it will work in other parts of the world. How will the interactions work? Separate pages or transitions? How will it feel?
Here’s an image-heavy design.
- Monica wonders about the priority of which images to load first.
Here’s an extreme navigation with big images.
- Ben worries about the performance on slow connections.
- Monica gets stressed out about how much happens when you just click on a link.
- Peggy sees something static and imagines using Gatsby for it.
Here’s a design that’s map-based.
- Ben worries about the size of the touch targets.
- Monica sees an opportunity to use SVGs.
Here’s a card UI.
- Ben wonders what the browser support is. Can we use CSS grid or do we have to use something older?
- Monica worries that this needs drag’n’drop. Now you’ve got a nightmare scenario.
Chris has been thinking about and writing about this topic of what makes someone a front-end developer, and what makes someone a good front-end developer. The debate will continue…
Monday, February 11th, 2019
A nice counterpoint to the last time I linked to Paul’s weeknotes:
However, there’s another portion of the industry, primarily but not exclusively within the public sector, where traditional development approaches (progressive enhancement, server-side rendering) remain prevalent, or less likely to be dismissed, at least. Because accessibility isn’t optional when your audience is everyone, these organisations tend to attract those with a pragmatic outlook who like to work more diligently and deliberately.
Sunday, February 3rd, 2019
Frustrating on a personal level, but also infuriating when you consider how such gatekeeping is limiting welcome attempts to diversify our industry.
Thursday, December 6th, 2018
Monday, December 3rd, 2018
Absolutely spot on! And it cuts both ways:
Tuesday, July 10th, 2018
There are a lot of static site generators out there!
Saturday, June 23rd, 2018
A good ol’ rant from Robin.
Before jumping to conclusions, read the whole thing. Robin isn’t having a go at people who consider themselves full-stack developers; he’s having a go at the people who are only hiring back-end developers and expecting them to automatically be “full stack.”
Thursday, March 1st, 2018
A look at the font stack that Github is using.
Thursday, September 14th, 2017
In my experience, “full-stack developers” always translates to “programmers who can do frontend code because they have to and it’s ‘easy’.” It’s never the other way around. The term “full-stack developer” implies that a developer is equally adept at both frontend code and backend code, but I’ve never in my personal experience witnessed anyone who truly fits that description.