| 5th | 10th | 15th | 20th | 25th | 30th | |||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 12am | ||||||||||||||||||||||||||||||
| 4am | ||||||||||||||||||||||||||||||
| 8am | ||||||||||||||||||||||||||||||
| 12pm | ||||||||||||||||||||||||||||||
| 4pm | ||||||||||||||||||||||||||||||
| 8pm |
See, when I first heard about background-repeat: round; I thought it was something to do with making things circular. But no, it’s about tiling a background image so that nothing gets cut off. The amount of tiling required is rounded to the nearest whole number.
Now I get it.
This
will-changeproperty that was intended to SOLVE problems for animators may end up doing the opposite.It seems wise for the browsers to step back and let the spec authors fill in the implementation details and gain consensus before moving forward.
It’s Geek Mental Help Week from Monday. You can get involved.
I believe that talking about mental health issues and sharing our experiences—not just those of people who suffer, but also those who live with and support us—can help everyone. Whether you struggle with your own mental health or care for someone who does, you can help others to understand how you cope. Geek Mental Help Week is all about sharing those experiences.
Sci-fi book covers and posters from the 1970s.
A thorough and compelling demonstration of why it makes sense to size all the properties of your components—font size, margins, borders, etc.—in ems or rems rather than mixing in pixels for some properties. It’s all about the scalability, innit?
This is not only a really good explanation of CSS grid layout, it’s also a practical walkthrough, recreating the layout of the Financial Times. I think if I followed along at home, writing the markup and CSS outlined here, it would me to get this stuff “clicking” in my brain.
Jen tackles six aspects of web design that were true …but no longer.
- Everything must be a floating bar of soap
- Rectangles; only rectangles
- We can’t control the fold
- 12 columns is best
- We have to use a layout framework
- We are stuck in a rut because of RWD
Chrome is going to refuse to parse document.write for users on a slow connection. On the one hand, I feel that Google intervening in this way is a bit icky, but I on the other hand, I totally support this move.
This keeps happening. Google announce a change (usually related to search) where I think “Ooh, that could be interpreted as an abuse of a monopoly position …but it’s for ver good reason so I’ll keep quiet.”
Anyway, this should serve as a good kick in the pants for bad actors (that’s you, advertisers) to update their scripts to be asynchronous.
Chris runs through the process and pitfalls of POSSEing a site (like CSS Tricks) to Apple’s News app, Facebook’s Instant Articles, and Google’s AMP.
Hey, whatever you want. As long as…
- It’s not very much work
- The content’s canonical home is my website.
I just want people to read and like CSS-Tricks.
Slack ammo.
Here’s a handy graph from Paul:
Powered by data from caniuse.com and StatCounter, this page indicates the percentage of users who have a browser that natively supports various web platform features.
Disappointed in your cakes I am.
This is a really great step-by-step walkthrough of adding a service worker to a website. Mike mentions the gotchas he encountered along the way, and describes how he incrementally levelled up the functionality.
If you’ve been going through a similar process, please write it down and share it like this!
My new favourite Twitter account.
The Museum of Wi-Fi exists to preserve these vestiges of our neighbourhood battlefields.
Some are brilliantly smart, some are just purely gross. They all belong in the museum.
Seb is going to be closing out the Brighton Digital Festival with a bang.
Seb unravels all the geeky details about how your favourite retro gadgets work, including Nintendo light guns, Casio keyboards and the cathode ray tube televisions that once dominated our living rooms.
It’s going to be like Seb: The Musical …with lasers.
I’m following Remy’s experiments with great interest—his approach sounds like the holy grail:
I’m trying to build a web app that uses progressive enhancement as a design principle with state as a core value to the coding approach.
Val Head and Sarah Drasner have teamed up to offer a two-day workshop on web animation. If you have a chance to attend, do it!
Heydon asked screen readers some questions about their everyday interactions with websites. The answers quite revealing: if you’re using headings and forms correctly, you’re already making life a lot easier for them.
This is rather lovely: explore a network of nodes, each of which contains the audio of a child describing a dream.
Inspired by the concept of an 8th continent to which all children belong, RadioEight is an interactive soundscape dedicated to the hidden world of dreams.
PPK reads a Hacker News thread so you don’t have to.
I can very much relate to Jonathan’s learning process (except for the bit about reading Hacker News—spit):
- Reading
- Building
- Writing
I think I read about 20-30 times more than I write, but the writing part is still crucial for helping me get stuff straight in my own head.
A gripping history lesson of the internet and the ARPANET before it, emphasising the role of government funding.
Silicon Valley often likes to pretend that innovation is the result of entrepreneurs tinkering in garages. But most of the innovation on which Silicon Valley depends comes from government research, for the simple reason that the public sector can afford to take risks that the private sector can’t.
It’s precisely the insulation from market forces that enables government to finance the long-term scientific labor that ends up producing many of the most profitable inventions.
Today we have an internet effectively controlled by a small number of private companies.
Instead of trying to escape the bigness of the Internet, we should embrace it — and bring it under democratic control. This means replacing private providers with public alternatives where it’s feasible, and regulating them where it’s not.
There is nothing in the pipes or protocols of the Internet that obliges it to produce immense concentrations of corporate power. This is a political choice, and we can choose differently.
Jen has some ideas for a new CSS Region spec to turbo-boost Grid. I’m still trying to wrap my head around it, but in the meantime, if you have feedback on this, please let her know.
Progressive Web Apps versus native is the wrong question because every step on the path to a Progressive Web App makes sense on its own, irrespective of what a company does with their native apps.
Not all of your customers are going to have your app installed. For those who visit via the web, providing them with a better experience will make them happier and generate more revenue for your business.
It’s really that simple.
Steve describes a script you can use on WebPageTest to simulate going offline so you can test how your progressive web app performs.
This is easily the most wrong-headed piece of writing I’ve read in a long time.
“But customers benefit from smaller file sizes too, because that makes web pages faster.” Certainly, that was true in 1996. And some web developers persist with political objections. But with today’s faster connections—even on mobile—optimizing for file size is less useful than ever.
I’ll leave it to you to see the logical flaws in every one of the arguments presented here by Matthew Buterick. Meanwhile I’m going to get off his lawn.
This is a terrific read that gets to the heart of why progressive enhancement is such a solid methodology: progressive enhancement improves resilience.
Meeting our many users’ needs is number one on our list of design principles. We can’t know every different setup a person might use while building our systems, but we can build them in a way that gives all of our users the greatest chance of success. Progressive enhancement lets us do this.
The article is full of great insights from a very large-scale web project.
A nice introduction to progressive web apps. There’s a little bit of confusion about permissions—whether a site has been added to the home screen or not has no effect on the permissions granted to it (for things like push notifications)—but the wrap-up nails the advantages of using the web:
No more waiting to download an app, no more prompts for updating an app. From a developer perspective, it means we will be able to iterate a lot quicker. We don’t need to wait for app store approvals anymore, and we can deploy at our own leisure.
Another advantage that a progressive web app has over a native mobile app is that it is linkable, hence it is easier to share and, probably even more importantly, can be indexed by search engines. This makes discoverability of the app a lot better.
This is what Nick Sherman has been banging on about for years, and now the time has come for variable fonts …as long as typographers, browser makers, and standards bodies get behind it.
More details on Ev’s blog.
I’m just back from a little mini 3-conference tour of Europe where I was delivering my talk on resilience. The first stop was Stockholm for Nordic.js and the video is already online.
Jonathan takes a look at the physical web. Like me, he’s excited by the possibilities. Although he says:
Sadly, my mind quickly devolved into the annoyance of numerous notifications, like popup windows and other distracting adverts, vying for my attention.
This is a common worry with the physical web, but it’s unfounded. All a beacon does is broadcast a URL. You have to actively look for the URLs being broadcast—they can’t send notifications.
It all just feels like QR codes. They’ll be all over the place and most of them won’t be very useful.
I understand this concern, but whereas QR codes are completely opaque to humans, at least URLs can—and should—be human-readable …so, unlike QR codes, a URL can give you some idea of what awaits.
But, like, have you have ever really looked at your hand?
This one is definitely for service worker nerds only. I’ve been trying to get my head around this idea of “foreign fetch” which allows third parties to install service workers—could be handy for sites with APIs like Huffduffer and The Session. This article does a good job of explaining the somewhat tangled process.
Alex runs through the features that a progressive web app must have, should have, and would be nice to have.
In general, installability criteria are tightening. Today’s Good-To-Haves may become part of tomorrow’s baseline. The opposite is unlikely because at least one major browser has made a strong commitment to tightening up the rules for installability.
Right now, this is in the nice-to-have category:
Mobile-friendly, not mobile-only.
Personally, I’d put that in the must-have category, and not just for progressive web apps.
Anyway, read on for some advice on testing and tooling when it comes to evaluating progressive web apps.
Lyza put together some example code for her Smashing Conference talk on service workers. If you haven’t written a service worker before, these are really nice examples of how to grok it bit by bit.
This should be a lot more straightforward than process I linked to before.
It’s always, um …”interesting” when a mainstream publication covers a topic from the web’s bikeshed. In this case, it’s progressive web apps, and—apart from the sensationalist headline—it’s actually not that bad at all.
This slide deck is a whistle-stop tour of all things styleguide and pattern-library related. Nice to see Charlotte’s excellent exercise get a shout-out.
Bookmark this page! Who knew that so much knowledge could be condensed into one document? In this case, it’s life-saving git commands, explained in a user-centred way.
So here are some bad situations I’ve gotten myself into, and how I eventually got myself out of them in plain english.
I’m no fan of mega menus, and if a site were being designed from scratch, I’d do everything I could to avoid them, but on some existing projects they’re an unavoidable necessity (the design equivalent of technical debt). In those situations, this looks like a really nice, responsive approach.
Some typically smart thinking from Mike—what if success were measured in learning rather than shipping?
Organizations that learn the quickest seem the most likely to succeed over the long haul.
This really resonates with me, and it aligns so closely with our values at Clearleft that I think this is something we should be pursuing. Fortunately Mike’s post comes with plenty of examples and ideas.
A good ol’ polemic in favour of using web fonts. It’s a good read although I strongly disagree with this line of reasoning:
The average internet speed in the United States today is three times as fast as it was in 2011.
But that americentric view is redeemed later on:
The World Wide Web may be a creation of the West, but now, at long last, it needs to get ready for the rest.
I may not agree with all the points in this article, but I think we can all agree that if we’re going to use web fonts, we must use them responsibly …otherwise users are going to treat them as damage and route around them.
The font-display property is landing in browsers, and this is a great introduction to using it:
If you don’t know which option to use, then go with
swap. Not only does it provide an optimal balance between custom fonts and accessibility of content, it provides the same font loading behavior that we’ve relied on JavaScript for. If you have fonts on the page that you’d like to have load, but could ultimately do without, consider going withfallbackoroptionalwhen usingfont-display.
Until it’s more widely supported, you can continue to use a JavaScript solution, but even then you can feature detect first:
if ("fontDisplay" in document.body.style === false) {
/* JavaScript font loading logic goes here. */
}
This is a really good overview of progressive web apps:
An ideal web app is a web page that has the best aspects of both the web and native apps. It should be fast and quick to interact with, fit the device’s viewport, remain usable offline and be able to have an icon on the home screen.
At the same time, it must not sacrifice the things that make the web great, such as the ability to link deep into the app and to use URLs to enable sharing of content. Like the web, it should work well across platforms and not focus solely on mobile. It should behave just as well on a desktop computer as in other form factors, lest we risk having another era of unresponsive m.example.com websites.
Heartfelt congratulations to Remy on ten years of blogging.
More importantly, every single URL on my blog that’s ever been published still works, and even better than that (for me) is my archive showing off the decade of writing I’ve been producing over all this time 💪