Patterns for Promoting PWA Installation (mobile) | Web Fundamentals | Google Developers
Some ideas for interface elements that prompt progressive web app users to add the website to their home screen.
Tags: frontend
1402
Thursday, June 6th, 2019
Designing for actual performance by Adam Silver
This is something I’ve been thinking about a lot lately. The justification for single page apps feels like circular thinking to me. A JavaScript framework is needed to avoid full page refreshes because full page refreshes are expensive because that means assets will be reloaded …assets like the JavaScript framework that only exists to avoid the full page refresh.
This is how it goes. We put a load of shit into a single web page. This makes the page slow. Slow to load, slow to render. Slow.
Instead of getting rid of the shit, we blame the page refresh.
JAMstack? More like SHAMstack. | CSS-Tricks
Chris makes the very good point that the J in JAMstack isn’t nearly as important as the static hosting part.
I also pointed out to Phil recently that the M (markup) is far more important than the J (JavaScript), which is there to enhance the M. So I suggested that the acronym be updated accordingly:
MAJstack!
This is my maj.
Monday, June 3rd, 2019
Self-Host Your Static Assets – CSS Wizardry
Trust no one! Harry enumerates the reason why you should be self-hosting your assets (and busts some myths along the way).
There really is very little reason to leave your static assets on anyone else’s infrastructure. The perceived benefits are often a myth, and even if they weren’t, the trade-offs simply aren’t worth it. Loading assets from multiple origins is demonstrably slower.
Thursday, May 30th, 2019
Characteristics of a Strong Performance Culture | TimKadlec.com
Tim looks at the common traits of companies that have built a good culture of web performance:
- Top-down support
- Data-driven
- Clear targets
- Automation
- Knowledge sharing
- Culture of experimentation
- User focused, not tool focused
Few companies carry all of these characteristics, so it’s important not to get discouraged if you feel you’re missing a few of them. It’s a process and not a quick one. When I’ve asked folks at companies with all or most of these characteristics how long it took them to get to that point, the answer is typically in years, rarely months. Making meaningful changes to culture is much slower and far more difficult than making technical changes, but absolutely critical if you want those technical changes to have the impact you’re hoping for.
Is CSS Turing Complete? | Lara Schenck
This starts as a good bit of computer science nerdery, that kind of answers the question in the title:
Alone, CSS is not Turing complete. CSS plus HTML plus user input is Turing complete!
And so the takeaway here is bigger than just speculation about Turing completeness:
Given that CSS is a domain-specific language for styling user interface, this makes a lot of sense! CSS + HTML + Human = Turing complete.
At the end of that day, as CSS developers that is the language we really write. CSS is incomplete without HTML, and a styled interface is incomplete without a human to use it.
Wednesday, May 29th, 2019
Zdog · Round, flat, designer-friendly pseudo-3D engine for canvas and SVG
Impressively lightweight and smooth!
Reducing motion with the picture element
Here’s a clever tiny lesson from Dave and Brad: you can use prefers-reduced-motion in the media attribute of the source element inside picture.
Tuesday, May 28th, 2019
W3C and WHATWG to work together to advance the open Web platform | W3C Blog
It’s Armistice Day in the world of HTML:
WHATWG maintains the HTML and DOM Living Standards.
W3C stops independent publishing of a designated list of specifications related to HTML and DOM and instead will work to take WHATWG Review Drafts to W3C Recommendations.
It feels like the loop is finally being closed on what I wrote about in the opening chapter of HTML5 For Web Designers back in 2010.
Friday, May 24th, 2019
Night Mode with Mix Blend Mode: Difference
Here’s a clever shortcut to creating a dark mode by using mix-blend-mode: difference.
Wednesday, May 22nd, 2019
Bruce Lawson’s personal site : Structured data and Google
Bruce wonders why Google seems to prefer separate chunks of JSON-LD in web pages instead of interwoven microdata attributes:
I strongly feel that metadata that is separated from the user-visible data associated with it highly susceptible to metadata partial copy-paste necrosis. User-visible text is also developer-visible text. When devs copy/ paste that, it’s very easy to forget to copy any associated metadata that’s not interleaved, leading to errors.
You got this. | Zeldman on Web & Interaction Design
I can relate to this.
Accessible Icon Buttons — Sara Soueidan – Freelance-Front-End UI/UX Developer
Sara runs through the many ways of providing an accessible name to an icon button, backed up with Scott’s testing.
Making Future Interfaces: Custom Properties - YouTube
Heydon cracks me up—his Patterns Day is going to have you crying with laughter; guaranteed!
Here he is talking about custom properties in CSS as part of his Making Future Interfaces video series.
Tuesday, May 21st, 2019
What Does it Mean to Be “Full Stack”? | CSS-Tricks
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.
Monday, May 20th, 2019
Web Bloat Score Calculator
Page web bloat score (WebBS for short) is calculated as follows:
WebBS = TotalPageSize / PageImageSize
Yes, this is a tongue-in-cheek somewhat arbitrary measurement, but it’s well worth reading through the rationale for it.
How can the image of a page be smaller than the page itself?
Thursday, May 16th, 2019
Lighthouse | Eric Bailey
What if accessibility were a ranking signal for Google search results?
Here’s a thought: what if Google put its thumb on the scale again, only this time for accessibility? What if it treated the Lighthouse accessibility score as a first-class ranking metric?
Welcome to Acccessible App | Accessible App
A very welcome project from Marcus Herrmann, documenting how to make common interaction patterns accessible in popular frameworks: Vue, React, and Angular.
Thursday, May 9th, 2019
Head’s role
I have a bittersweet feeling today. Danielle is moving on from Clearleft.
I used to get really down when people left. Over time I’ve learned not to take it as such a bad thing. I mean, of course it’s sad when someone moves on, but for them, it’s exciting. And I should be sharing in that excitement, not putting a damper on it.
Besides, people tend to stay at Clearleft for years and years—in the tech world, that’s unheard of. So it’s not really so terrible when they decide to head out to pastures new. They’ll always be Clearlefties. Just look at the lovely parting words from Harry, Paul, Ellen, and Ben:
Working at Clearleft was one of the best decisions I ever made. 6 years of some work that I’m most proud of, amongst some of the finest thinkers I’ve ever met.
(Side note: I’ve been thinking about starting a podcast where I chat to ex-Clearlefties. We could reflect on the past, look to the future, and generally just have a catch-up. Would that be self indulgent or interesting? Let me know what you think.)
So of course I’m going to miss working with Danielle, but as with other former ‘lefties, I’m genuinely excited to see what happens next for her. Clearleft has had an excellent three years of her time and now it’s another company’s turn.
In the spirit of “one door closes, another opens,” Danielle’s departure creates an opportunity for someone else. Fancy working at Clearleft? Well, we’re looking for a head of front-end development.
Do you remember back at the start of the year when we were hiring a front-end developer, and I wrote about writing job postings?
My first instinct was to look at other job ads and take my cue from them. But, let’s face it, most job ads are badly written, and prone to turning into laundry lists. So I decided to just write like I normally would. You know, like a human.
That worked out really well. We ended up hiring the ridiculously talented Trys Mudford. Success!
So I’ve taken the same approach with this job ad. I’ve tried to paint as clear and honest a picture as I can of what this role would entail. Like it says, there are three main parts to the job:
- business support,
- technical leadership, and
- professional development.
Now, I could easily imagine someone reading the job description and thinking, “Nope! Not for me.” Let’s face it: There Will Be Meetings. And a whole lotta context switching:
Within the course of one day, you might go from thinking about thorny code problems to helping someone on your team with their career plans to figuring out how to land new business in a previously uncharted area of technology.
I can equally imagine someone reading that and thinking “Yes! This is what I’ve been waiting for.”
Oh, and in case you’re wondering why I’m not taking this role …well, in the short term, I will for a while, but I’d consider myself qualified for maybe one third to one half of the required tasks. Yes, I can handle the professional development side of things (in fact, I really, really enjoy that). I can handle some of the technical leadership stuff—if we’re talking about HTML, CSS, JavaScript, accessibility, and performance. But all of the back-of-the-front-end stuff—build tools, libraries, toolchains—is beyond me. And I think I’d be rubbish at the business support stuff, mostly because that doesn’t excite me much. But maybe it excites you! If so, you should apply.
I can picture a few scenarios where this role could be the ideal career move…
Suppose you’re a lead developer at a product company. You enjoy leading a team of devs, and you like setting the technical direction when it comes to the tools and techniques being used. But maybe you’re frustrated by always working on the same product with the same tech stack. The agency world, where every project is different, might be exactly what you’re looking for.
Or maybe you’re an accomplished and experienced front-end developer, freelancing and contracting for years. Perhaps you’re less enamoured with being so hands-on with the code all the time. Maybe you’ve realised that what you really enjoy is solving problems and evaluating techologies, and you’d be absolutely fine with having someone else take care of the implementation. Moving into a lead role like this might be the perfect way to make the best use of your time and have more impact with your decisions.
You get the idea. If any of this is sounding intriguing to you, you should definitely apply for the role. What do you have to lose?
Also, as it says in the job ad:
If you’re from a group that is under-represented in tech, please don’t hesitate to get in touch.
Distinguishing cached vs. network HTML requests in a Service Worker | Trys Mudford
Less than 24 hours after I put the call out for a solution to this gnarly service worker challenge, Trys has come up with a solution.