A nice look at the fallbacks that are built into CSS.
Saturday, February 25th, 2017
Tuesday, February 21st, 2017
Rich has posted a sneak peek of one part of his book on Ev’s blog.
Tetris in your browser. Visit it once and it works offline (if your browser supports service workers) so go ahead and add it to your home screen.
Send messages when you’re back online with Service Workers and Background Sync – Twilio Cloud Communications Blog
This example of using background sync looks like it’s specific to Twilio, but the breakdown of steps is broad enough to apply to many situations:
On the page we need to:
- Register a Service Worker
- Intercept the “submit” event for our message form
- Place the message details into IndexedDB, an in browser database
- Register the Service Worker to receive a “sync” event
Then, in the Service Worker we need to:
- Listen for sync events
- When a sync event is received, retrieve the messages from IndexedDB
- For each message, send a request to our server to send the message
- If the message is sent successfully, then remove the message from IndexedDB
And that’s it.
Monday, February 20th, 2017
I really enjoyed teaching in Porto last week. It was like having a week-long series of CodeBar sessions.
Whenever I’m teaching at CodeBar, I like to be paired up with people who are just starting out. There’s something about explaining the web and HTML from first principles that I really like. And people often have lots and lots of questions that I enjoy answering (if I can). At CodeBar—and at The New Digital School—I found myself saying “Great question!” multiple times. The really great questions are the ones that I respond to with “I don’t know …let’s find out!”
CodeBar is always a very rewarding experience for me. It has given me the opportunity to try teaching. And having tried it, I can now safely say that I like it. It’s also a great chance to meet people from all walks of life. It gets me out of my bubble.
I can’t remember when I was first paired up with Amber at CodeBar. It must have been sometime last year. I do remember that she had lots of great questions—at some point I found myself explaining how hexadecimal colours work.
I was impressed with Amber’s eagerness to learn. I also liked that she was making her own website. I told her about Homebrew Website Club and she started coming along to that (along with other CodeBar people like Cassie and Alice).
I’ve mentioned to multiple CodeBar students that there’s pretty much an open-door policy at Clearleft when it comes to shadowing: feel free to come along and sit with a front-end developer while they’re working on client projects. A few people have taken up the offer and enjoyed observing myself or Charlotte at work. Amber was one of those people. Again, I was very impressed with her drive. She’s got a full-time job (with sometimes-crazy hours) but she’s so determined to get into the world of web design and development that she’s willing to spend her free time visiting Clearleft to soak up the atmosphere of a design studio.
We’ve decided to turn this into something more structured. Amber and I will get together for a couple of hours once a week. She’s given me a list of some of the areas she wants to explore, and I think it’s a fine-looking list:
- I want to gather base, structural knowledge about the web and all related aspects. Things seem to float around in a big cloud at the moment.
- I want to adhere to best practices.
- I want to learn more about what direction I want to go in, find a niche.
- I’d love to opportunity to chat with the brilliant people who work at Clearleft and gain a broad range of knowledge from them.
Seeing as we’ll only have a couple of hours every week, this won’t be quite like the masterclass I just finished up in Porto. Instead I imagine I’ll be laying some groundwork and then pointing to topics to research. I guess it’s a kind of homework. For example, after we talked today, I set Amber this little bit of research for the next time we meet: “What is the difference between the internet and the World Wide Web?”
I’m excited to see where this will lead. I find Amber’s drive and enthusiasm very inspiring. I also feel a certain weight of responsibility—I don’t want to enter into this lightly.
I’m not really sure what to call this though. Is it mentorship? Or is it coaching? Or training? All of the above?
Whatever it is, I’m looking forward to documenting the journey. Amber will be writing about it too. She is already demonstrating a way with words.
Jake is absolutely spot-on here. There’s been a lot of excited talk about adding an
h element to HTML but it all seems to miss the question of why the currently-specced outline algorithm hasn’t been implemented.
This is a common mistake in standards discussion — a mistake I’ve made many times before. You cannot compare the current state of things, beholden to reality, with a utopian implementation of some currently non-existent thing.
If you’re proposing something almost identical to something that failed, you better know why your proposal will succeed where the other didn’t.
Jake rightly points out that the first step isn’t to propose a whole new element; it’s to ask “Why haven’t browsers implemented the outline for sectioned headings?”
Sunday, February 19th, 2017
A podcast chat in which I ramble on about web stuff.
Saturday, February 18th, 2017
Harry clearly outlines the performance problems of Base64 encoding images in stylesheets. He’s got a follow-up post with sample data.
Friday, February 17th, 2017
A useful tool to help you generate a manifest file, icons, and a service worker for your progressive web
Ever wondered what the most commonly used HTML elements are?
Thursday, February 16th, 2017
Some proposed design principles for web developers:
- Focus on the User
- Focus on Quality
- Keep It Simple
- Think Long-Term (and Beware of Fads)
- Don’t Repeat Yourself (aka One Cannot Not Maintain)
- Code Responsibly
- Know Your Field
Wednesday, February 15th, 2017
A sweet CSS tutorial that Cassie put together for the Valentine’s Day Codebar.
Sunday, February 12th, 2017
A new media query that will help prevent you making your users hurl.
Thursday, February 9th, 2017
The transcript of a really great—and entertaining—talk on performance by Wilto. I may have laughed out loud at points.
Wednesday, February 8th, 2017
Really good advice for anyone thinking of releasing a polyfill into the world.
Friday, February 3rd, 2017
Phil describes the process of implementing the holy grail of web architecture (which perhaps isn’t as difficult as everyone seems to think it is):
I have been experimenting with something that seemed obvious to me for a while. A web development model which gives a pre-rendered, ready-to-consume, straight-into-the-eyeballs web page at every URL of a site. One which, once loaded, then behaves like a client-side, single page app.
Now that’s resilient web design!
Monday, January 30th, 2017
David picks up on one of the closing themes of Resilient Web Design—how we choose our tools. This has been on my mind a lot; it’s what I’ll be talking about at conferences this year.
That’s part of my job to ease processes and reduce frictions. That’s part of my job to take into account from the early beginning of a product its lasting qualities.
There’s a very good point here about when and how we decide to remove the things we’ve added to our projects:
We spend our time adding features without considering at the same pace the removal of useless ones. And still the true resilience (or is it perfection Antoine?) is when there is nothing more to take away. What are you removing on Monday to make our Web more resilient?
Sunday, January 29th, 2017
promises address?” but that is then addressed further down:
Fair enough. In any case, what you’ll find here is mainly good advice for writing modular code.
A nice straightforward account of building and testing a progressive web a… I mean, website.
I think every website from now on should use some of the Progressive Web App features. It’s even confusing to call it “Apps” as it applies to all websites and apps.