Tags: control

54

sparkline

Thursday, September 9th, 2021

Accent all areas

Whenever a new version of Chrome comes out, there’s an accompanying blog post listing what’s new. Chrome 93 just came out and, sure enough, Pete has written a blog post about it.

But what I think is the most exciting addition to the browser isn’t listed.

What is this feature that’s got me so excited?

Okay, I’ve probably oversold it now because actually, it looks like a rather small trivial addition. It’s the accent-color property in CSS.

Up until now, accent colour was controlled by the operating system. If you’re on a Mac, go to “System Preferences” and then “General”. There you’ll see an option to change your accent colour. Try picking a different colour. You’ll see that change cascade down into the other form fields in that preference pane: checkboxes, radio buttons, and dropdowns.

Your choice will also cascade down into web pages. Any web page that uses native checkboxes, radio buttons and other interface elements will inherit that colour.

This is how interface elements are supposed to work. The browser inherits the look’n’feel of the inputs from the operating system.

That’s the theory anyway. In practice, form elements—such as dropdowns—can look different from browser to browser, something that shouldn’t be happening if the browsers are all inheriting from the operating system.

Anyway, it’s probably this supposed separation of responsibility between browser and operating system which has led to the current situation with form fields and CSS. Authors can style form fields up to a point, but there’s always a line that you don’t get to cross.

The accent colour of a selected radio button or a checkbox has historically been on the other side of that line. You either had to accept that you couldn’t change the colour, or you had to make your own checkbox or radio button interface. You could use CSS to hide the native element and replace it with an image instead.

That feels a bit over-engineered and frankly kind of hacky. It reminds me of the bad old days of image replacement for text before we had web fonts.

Now, with the accent-color property in CSS, authors can over-ride the choice that the user has set at the operating system level.

On the one hand, this doesn’t feel great to me. Who are we to make that decision? Shouldn’t the user’s choice take primacy over our choices?

But then again, where do we draw the line? We’re allowed over-ride link colours. We’re allowed over-ride font choices.

Ultimately I think it’s a good thing that authors can now specify an accent colour. What makes me think that is the behaviour that authors have shown if they don’t have this ability—they do it anyway, and in a hackier manner. This is why I think the work of the Open UI group is so important. If developers don’t get a standardised way to customise native form controls, they’ll just recreate their own over-engineered versions.

The purpose of Open UI to the web platform is to allow web developers to style and extend built-in web UI controls, such as select dropdowns, checkboxes, radio buttons, and date/color pickers.

Trying to stop developers from styling checkboxes and radio buttons is like trying to stop teenagers from having sex. You might as well accept that it’s going to happen and give them contraception so they can at least do it safely.

So I welcome this new CSS condom.

You can see accent-color in action in this demo. Change the value of the accent-color property to see the form fields update:

:root {
  accent-color: rebeccapurple;
}

Applying it at the document level like that will make it universal, but you can also use the property on an element-by-element basis using whatever selector you want.

That demo works in Chrome and Edge 93, the current release. It also works in Firefox 92, which literally just landed (like as I was writing this blog post, support for accent-color magically arrived!).

As for Safari, well, who knows? If Apple published a roadmap, then developers would have a clue when to expect a property like this to land. But we mere mortals cannot be trusted with such important hush-hush information.

In the meantime, keep an eye on Can I Use. And lack of support on one browser is no reason not to use accent-color anyway. It’s a progressive enhancement. Add it to your CSS today and it will work in more browsers in the future.

Tuesday, July 6th, 2021

CSS Anchored Positioning

An interesting proposal for defining how one element could be “anchored” to another, and how that positioning could be expressed declaratively instead of having to write a whole load of JavaScript. Melanie’s looking for use cases so share ‘em if you have ‘em.

Personally, I’m not convinced that a new element is needed but I’m open to the suggestion.

Tuesday, January 12th, 2021

Global Privacy Control — Take Control Of Your Privacy

This sounds a lot like Do Not Track …but looking at the spec, the interesting part is the way that this is designed to work in combination with legal frameworks. That’s smart. I don’t think a purely technical solution is workable (as we saw with Do Not Track).

Thursday, November 19th, 2020

Standardizing `select` And Beyond: The Past, Present And Future Of Native HTML Form Controls — Smashing Magazine

While a handful of form controls can be easily styled by CSS, like the button element, most form controls fall into a bucket of either requiring hacky CSS or are still unable to be styled at all by CSS.

Despite form controls no longer taking a style or technical dependency on the operating system and using modern rendering technology from the browser, developers are still unable to style some of the most used form control elements such as select. The root of this problem lies in the way the specification was originally written for form controls back in 1995.

Stephanie goes back in time to tell the history of form controls on the web, and how that history has led to our current frustrations:

The current state of working with controls on the modern web is that countless developer hours are being lost to rewriting controls from scratch, as custom elements due to a lack of flexibility in customizability and extensibility of native form controls. This is a massive gap in the web platform and has been for years. Finally, something is being done about it.

Amen!

Friday, July 24th, 2020

MSEdgeExplainers/explainer.md at main · MicrosoftEdge/MSEdgeExplainers

This is great! Ideas for allowing more styling of form controls. I agree with the goals 100% and I like the look of the proposed solutions too.

The team behind this are looking for feedback so be sure to share your thoughts (I’ll probably formulate mine into a blog post).

Monday, June 8th, 2020

Easily rename your Git default branch from master to main - Scott Hanselman

Nice and straightforward. Locally:

git branch -m master main git push -u origin main

Then on the server:

git branch -m master main git branch -u origin/main

On github.com, go into the repo’s settings and update the default branch.

Thanks for this, Scott!

P.S. Don’t read the comments.

Sunday, May 17th, 2020

Write Libraries, Not Frameworks by Brandon Smith

This is a very clear description of the differences between libraries and frameworks, along with the strengths and weaknesses of both.

A library is a set of building blocks that may share a common theme or work well together, but are largely independent.

A framework is a context in which someone writes their own code.

I very much agree with the conclusion:

If your framework can be a library without losing much, it probably should be.

Thursday, December 12th, 2019

“Link In Bio” is a slow knife

For a closed system, those kinds of open connections are deeply dangerous. If anyone on Instagram can just link to any old store on the web, how can Instagram — meaning Facebook, Instagram’s increasingly-overbearing owner — tightly control commerce on its platform? If Instagram users could post links willy-nilly, they might even be able to connect directly to their users, getting their email addresses or finding other ways to communicate with them. Links represent a threat to closed systems.

Anil Dash on the war on hyperlinks.

It may be presented as a cost-saving measure, or as a way of reducing the sharing of untrusted links. But it is a strategy, designed to keep people from the open web, the place where they can control how, and whether, someone makes money off of an audience. The web is where we can make sites that don’t abuse data in the ways that Facebook properties do.

Tuesday, October 15th, 2019

GitSheet

A handy translation of git commands into English.

Tuesday, October 8th, 2019

You really don’t need all that JavaScript, I promise

The transcript of a fantastic talk by Stuart. The latter half is a demo of Portals, but in the early part of the talk, he absolutely nails the rise in popularity of complex front-end frameworks:

I think the reason people started inventing client-side frameworks is this: that you lose control when you load another page. You click on a link, you say to the browser: navigate to here. And that’s it; it’s now out of your hands and in the browser’s hands. And then the browser gives you back control when the new page loads.

Tuesday, May 21st, 2019

Can “Indie” Social Media Save Us? | The New Yorker

This is a really great, balanced profile of the Indie Web movement. There’s thoughtful criticism alongside some well-deserved praise:

If we itemize the woes currently afflicting the major platforms, there’s a strong case to be made that the IndieWeb avoids them. When social-media servers aren’t controlled by a small number of massive public companies, the incentive to exploit users diminishes. The homegrown, community-oriented feel of the IndieWeb is superior to the vibe of anxious narcissism that’s degrading existing services.

Friday, May 17th, 2019

Eintrag “Take back your web – Tantek Çelik @ Beyond Tellerrand Conference, Düsseldorf 2019” beim Webrocker

Tom shares his thoughts on Tantek’s excellent closing talk at Beyond Tellerrand this week:

Yes, the message of this rather sombre closing talk of this year’s Beyond Tellerrand Conference Düsseldorf is important. Watch it. And then go out, take care of yourself and others, away from the screen. And then come back and publish your own stuff on your own site. Still not convinced? ok, then, please read Matthias Ott’s great article (published on his own site btw), and then start using your own site.

Sunday, May 12th, 2019

Into the Personal-Website-Verse · Matthias Ott – User Experience Designer

There is one alternative to social media sites and publishing platforms that has been around since the early, innocent days of the web. It is an alternative that provides immense freedom and control: The personal website. It’s a place to write, create, and share whatever you like, without the need to ask for anyone’s permission.

A wonderful and inspiring call to arms for having your own website—a place to express yourself, and a playground, all rolled into one.

Building and maintaining your personal website is an investment that is challenging and can feel laborious at times. Be prepared for that. But what you will learn along the way does easily make up for all the effort and makes the journey more than worthwhile.

Thursday, May 2nd, 2019

AMP as your web framework – The AMP Blog

The bait’n’switch is laid bare. First, AMP is positioned as a separate format. Then, only AMP pages are allowed ranking in the top stories carousel. Now, let’s pretend none of that ever happened and act as though AMP is just another framework. Oh, and those separate AMP pages that you made? Turns out that was all just “transitional” and you’re supposed to make your entire site in AMP now.

I would genuinely love to know how the Polymer team at Google feel about this pivot. Everything claimed in this blog post about AMP is actually true of Polymer (and other libraries of web components that don’t have the luxury of bribing developers with SEO ranking).

Some alternative facts from the introduction:

AMP isn’t another “channel” or “format” that’s somehow not the web.

Weird …because that’s exactly how it was sold to us (as a direct competitor to similar offerings from Apple and Facebook).

It’s not an SEO thing.

That it outright false. Ask any company actually using AMP why they use it.

It’s not a replacement for HTML.

And yet, the article goes on to try convince you to replace HTML with AMP.

Saturday, April 13th, 2019

Goodbye Google Analytics, Hello Fathom - daverupert.com

Dave stops feeding his site’s visitors data to Google. I wish more people (and companies) would join him.

There’s also an empowering #indieweb feeling about owning your analytics too. I pay for the server my analytics collector runs on. It’s on my own subdomain. It’s mine.

Friday, April 12th, 2019

Google AMP lowered our page speed, and there’s no choice but to use it - unlike kinds

What happens when you’re AMP pages are slower than your regular pages …but you’re forced to use AMP anyway if you want to appear in the top stories carousel.

AMP isn’t about speed. It’s about control.

The elephant in the room here is pre-rendering: that’s why Google aren’t using page speed alone as a determining factor for what goes in the carousel.

Sunday, March 24th, 2019

Always Own Your Platform

Stop giving away your work to people who don’t care about it. Host it yourself. Distribute it via methods you control. Build your audience deliberately and on your own terms.

Saturday, March 9th, 2019

Handing back control

An Event Apart Seattle was most excellent. This year, the AEA team are trying something different and making each event three days long. That’s a lot of mindblowing content!

What always fascinates me at events like these is the way that some themes seem to emerge, without any prior collusion between the speakers. This time, I felt that there was a strong thread of giving control directly to users:

Sarah and Margot both touched on this when talking about authenticity in brand messaging.

Margot described this in terms of vulnerability for the brand, but the kind of vulnerability that leads to trust.

Sarah talked about it in terms of respect—respecting the privacy of users, and respecting the way that they want to use your services. Call it compassion, call it empathy, or call it just good business sense, but providing these kind of controls in an interface is an excellent long-term strategy.

In Val’s animation talk, she did a deep dive into prefers-reduced-motion, a media query that deliberately hands control back to the user.

Even in a CSS-heavy talk like Jen’s, she took the time to explain why starting with meaningful markup is so important—it’s because you can’t control how the user will access your content. They may use tools like reader modes, or Pocket, or have web pages read aloud to them. The user has the final say, and rightly so.

In his CSS talk, Eric reminded us that a style sheet is a list of strong suggestions, not instructions.

Beth’s talk was probably the most explicit on the theme of returning control to users. She drew on examples from beyond the world of the web—from architecture, urban planning, and more—to show that the most successful systems are not imposed from the top down, but involve everyone, especially those most marginalised.

And even in my own talk on service workers, I raved about the design pattern of allowing users to save pages offline to read later. Instead of trying to guess what the user wants, give them the means to take control.

I was really encouraged to see this theme emerge. Mind you, when I look at the reality of most web products, it’s easy to get discouraged. Far from providing their users with controls over their own content, Instagram won’t even let their customers have a chronological feed. And Matt recently wrote about how both Twitter and Quora are heading further and further away from giving control to their users in his piece called Optimizing for outrage.

Still, I came away from An Event Apart Seattle with a renewed determination to do my part in giving people more control over the products and services we design and develop.

I spent the first two days of the conference trying to liveblog as much as I could. I find it really focuses my attention, although it’s also quite knackering. I didn’t do too badly; I managed to write cover eleven of the talks (out of the conference’s total of seventeen):

  1. Slow Design for an Anxious World by Jeffrey Zeldman
  2. Designing for Trust in an Uncertain World by Margot Bloomstein
  3. Designing for Personalities by Sarah Parmenter
  4. Generation Style by Eric Meyer
  5. Making Things Better: Redefining the Technical Possibilities of CSS by Rachel Andrew
  6. Designing Intrinsic Layouts by Jen Simmons
  7. How to Think Like a Front-End Developer by Chris Coyier
  8. From Ideation to Iteration: Design Thinking for Work and for Life by Una Kravets
  9. Move Fast and Don’t Break Things by Scott Jehl
  10. Mobile Planet by Luke Wroblewski
  11. Unsolved Problems by Beth Dean

Monday, March 4th, 2019

Cache-Control for Civilians – CSS Wizardry

Harry breaks down cache-control headers into steps that even I can understand. I’ll be using this a reference for sure.

Tuesday, January 22nd, 2019

What would a world without pushbuttons look like? | Aeon Essays

A history of buttons …and the moral panic and outrage that accompanies them.

By looking at the subtexts behind complaints about buttons, whether historically or in the present moment, it becomes clear that manufacturers, designers and users alike must pay attention to why buttons persistently engender critiques. Such negativity tends to involve one of three primary themes: fears over deskilling; frustration about lack of user agency/control; or anger due to perceptions of unequal power relations.