Link tags: mp

Global and Component Style Settings with CSS Variables — Sara Soueidan

Sara shares how she programmes with custom properties in CSS. It sounds like her sensible approach aligns quite nicely with Andy’s CUBE CSS methodology.

Oh, and she’s using Fractal to organise her components:

I’ve been using Fractal for a couple of years now. I chose it over other pattern library tools because it fit my needs perfectly — I wanted a tool that was unopinionated and flexible enough to allow me to set up and structure my project the way I wanted to. Fractal fit the description perfectly because it is agnostic as to the way I develop or the tools I use.

CUBE CSS - Piccalilli

I really, really like Andy’s approach here:

The focus of the methodology is utilising the power of CSS and the web platform as a whole, with some added controls and structures that help to keep things a bit more maintainable and predictable. The end-goal is shipping as little CSS as possible—leaning heavily into progressive enhancement and modern techniques.

If you use the cascade for everything, you’re going to run into trouble. But equally, micro-managing styles on every element will also get you into trouble. I think Andy’s found a really great sweet spot here that gets the balance just right.

CUBE CSS in essence, is a progressive enhancement approach, vs a fight against the grain of CSS or a pixel-pushing your project to within an inch of its life approach.

Yes! It feels very “webby” to me.

Official Google Webmaster Central Blog: Evaluating page experience for a better web

This is excellent news for sites that were strong-armed into creating AMP pages just to get into the Top Stories carousel:

As part of this update, we’ll also incorporate the page experience metrics into our ranking criteria for the Top Stories feature in Search on mobile, and remove the AMP requirement from Top Stories eligibility.

This update doesn’t arrive until next year, but the message is clear: fast websites will be rewarded in search. I’ll be glad to see an end to AMP’s blackmail tactics.

Today’s Javascript, from an outsider’s perspective | Lea Verou

This is a damning and all-too typical example of what it’s like for someone to trying to get to grips with the current state of the JavaScript ecosystem:

Note that John is a computer scientist that knows a fair bit about the Web: He had Node & npm installed, he knew what MIME types are, he could start a localhost when needed. What hope do actual novices have?

I think it’s even worse than that. Not only are potential new devs being put off ever getting started, I know plenty of devs with experience who have pushed out by the overwhelming and needless complexity of the modern web’s toolchain. It’s like a constant gaslighting where any expression of unease is summarily dismissed as being the whinings of “the old guard” who just won’t get with the programme.

John gives up. Concludes never to touch Node, npm, or ES6 modules with a barge pole.

The End.

(Just watch as Lea’s post gets written off as an edge case.)

Reef

This micro libarary does DOM diffing in native JavaScript:

Reef is an anti-framework.

It does a lot less than the big guys like React and Vue. It doesn’t have a Virtual DOM. It doesn’t require you to learn a custom templating syntax. It doesn’t provide a bunch of custom methods.

Reef does just one thing: render UI.

as days pass by — Hammer and nails

We don’t give people a website any more: something that already works, just HTML and CSS and JavaScript ready to show them what they want. Instead, we give them the bits from which a website is made and then have them compile it.

Spot-on description of “modern” web development. When did this become tolerable, much less normal?

Web developers: maybe stop insisting that your users compile your apps for you? Or admit that you’ll put them through an experience that you certainly don’t tolerate on your own desktops, where you expect to download an app, not to be forced to compile it every time you run it?

Employee-surveillance software is not welcome to integrate with Basecamp - Signal v. Noise

Look, employers are always free to – and should! – evaluate the work product produced by employees. But they don’t have to surveil someone’s every move or screenshot their computer every five minutes to do so. That’s monitoring the inputs. Monitor the outputs instead, and you’ll have a much healthier, saner relationship.

If you hire smart, capable people and trust them to do good work – surprise-surprise – people will return the sentiment deliver just that! The irony of setting up these invasive surveillance regimes is that they end up causing the motivation to goof off to beat the very systems that were setup to catch such behavior.

Interactive Elements: A Strange Game

Just today I was discussing with Trys and Cassie why developers tend to create bespoke JavaScript-driven components rather than using the elements that browsers give us for free. It all comes down to the ability to style the user interface.

Here, Brian proposes a kind of minimum viable web component that handles logic like keyboard control and accessibility, but leaves the styling practically untouched. Check out his panel-set demo of a tabbed interface.

I really, really like the way that it wraps existing content. If the web component fails for any reason, the content is still available. So the web component is a progressive enhancement:

An experimental custom element that wraps plain-old HTML (view the source) and decorates function, keyboard handling, accessibility information.

Design Can Change the World - But It’s Up to Us to Make it So by Daniel Burka

There is a huge world out there where design isn’t embraced, where designers are clawing for resources, and where design isn’t prioritized. Most of the organizations that are changing your world don’t know much about design, aren’t looking for designers, and won’t even understand what designers are talking about when they show up at the front door.

Better Form Inputs for Better Mobile User Experiences | CSS-Tricks

Here’s one simple, practical way to make apps perform better on mobile devices: always configure HTML input fields with the correct type, inputmode, and autocomplete attributes. While these three attributes are often discussed in isolation, they make the most sense in the context of mobile user experience when you think of them as a team.

This is an excellent deep dive with great advice:

You may think that you are familiar with the basic autocomplete options, such as those that help the user fill in credit card numbers or address form fields, but I’d urge you to review them to make sure that you are aware of all of the options. The spec lists over 50 values!

Jeremy Keith ‘We’ve ruined the Web. Here’s how we fix it.’ - This is HCD

Did you hear the one about two Irishmen on a podcast?

I really enjoyed this back-and-forth discussion with Gerry on performance, waste, and more. We agreed on much, but we also clashed sometimes.

CSS Architecture for Modern JavaScript Applications - MadeByMike

Mike sees the church of JS-first ignoring the lessons to be learned from the years of experience accumulated by CSS practitioners.

As the responsibilities of front-end developers have become more broad, some might consider the conventions outlined here to be not worth following. I’ve seen teams spend weeks planning the right combination of framework, build tools, workflows and patterns only to give zero consideration to the way they architect UI components. It’s often considered the last step in the process and not worthy of the same level of consideration.

It’s important! I’ve seen well-planned project fail or go well over budget because the UI architecture was poorly planned and became un-maintainable as the project grew.

Transreal Cyberpunk Readings

When you’re done listening to my reading of a J.G. Ballard short story, here’s a motherlode of huffduffable sci-fi shorts by Rudy Rucker and Bruce Sterling.

FontGoggles — Interactive Previewing and Comparing

A really nice open-source font-previewing tool for the Mac.

The 3 Laws of Serverless - Burke Holland

“Serverless”, is a buzzword. We can’t seem to agree on what it actaully means, so it ends up meaning nothing at all. Much like “cloud” or “dynamic” or “synergy”. You just wait for the right time in a meeting to drop it, walk to the board and draw a Venn Diagram, and then just sit back and wait for your well-deserved promotion.

That’s very true, and I do not like the term “serverless” for the rather obvious reason that it’s all about servers (someone else’s servers, that is). But these three principles are handy for figuring out if you’re building with in a serverlessy kind of way:

1. You have no knowledge of the underlying system where your code runs.
2. Scaling is an intrinsic attribute of the technology; so much so that it just happens automatically.
3. You only pay for what you use.

Abstraction; scale; consumption.

Oh Hello Ana - IndieWebCamp London

Don’t forget—it’s IndieWebCamp London next weekend!

Currying in CSS? | Trys Mudford

I don’t understand what currying is, but Trys points out a really interesting thing about custom properties in CSS:

The value after the : in the CSS custom property does not have to be valid CSS.

That means you can use custom properties to store arbitrary strings of text, which can then be combined within a calc() function, at which point they get evaluated.

Reflections on software performance - Made of Bugs

I’ve really come to appreciate that performance isn’t just some property of a tool independent from its functionality or its feature set. Performance — in particular, being notably fast — is a feature in and of its own right, which fundamentally alters how a tool is used and perceived.

This is a fascinating look into how performance has knock-on effects beyond the obvious:

It’s probably fairly intuitive that users prefer faster software, and will have a better experience performing a given task if the tools are faster rather than slower.

What is perhaps less apparent is that having faster tools changes how users use a tool or perform a task.

This observation is particularly salient for web developers:

We have become accustomed to casually giving up factors of two or ten or more with our choices of tools and libraries, without asking if the benefits are worth it.

“Let us Calculate!”: Leibniz, Llull, and the Computational Imagination – The Public Domain Review

The characteristica universalis and the calculus racionator of Leibniz.

Page Speed Benchmarks | SpeedCurve

This is going to be so useful for client work at Clearleft—instant snapshots of performance metrics across industries and regions!

For example, we’ve been working a lot with the travel sector, and now we can call up these benchmarks without having to generate a whole bunch of Web Page Test results ourselves.

See Tammy’s blog post for me details.