Tags: olo

686

sparkline

Thursday, February 6th, 2020

Innovation Can’t Keep the Web Fast | CSS-Tricks

I’ve come to accept that our current approach to remedy poor performance largely consists of engineering techniques that stem from the ill effects of our business, product management, and engineering practices. We’re good at applying tourniquets, but not so good at sewing up deep wounds.

It’s becoming increasingly clear that web performance isn’t solely an engineering problem, but a problem of people.

Tuesday, February 4th, 2020

Could browsers fix more accessibility problems automatically?

Some really interesting ideas here from Hidde on how browsers could provide optional settings for users to override developers when it comes to accessibility issues like colour contrast, focus styles, and autoplaying videos.

Monday, February 3rd, 2020

s08e05: There’s only one rule that I know of, babies - Things That Have Caught My Attention

A global communications network now exists that’s cheap enough or in some cases even free to access, offering a pseudonymous way for people to feel safe enough to share a private experience with complete strangers? I give Facebook and Twitter a bunch of shit for their rhetoric about a global community (no, Facebook’s billions of users are no more a community than the television-watching global community) and creating authentic connection, but I will very happily admit that this, this particular example with people sharing what it is like to be me and learning what is it like to be you is the good.

This is the thing that makes free, open, networked communication brilliant. This is the thing that brings down silos and creates common understanding and humanizes us all, that creates empathy and the first steps towards compassion.

That someone can read about this insight and have a way to react to it and share their perspective and not even know who else might read it, but feel safe in doing so and maybe even with the expectation that this sharing is a net good? That is good. That is what we should strive for.

Thursday, January 23rd, 2020

This Page is Designed to Last | CSS-Tricks

I feel there is something beyond the technological that is the real trick to a site that lasts: you need to have some stake in the game. You don’t let your URLs die because you don’t want them to. They matter to you. You’ll tend to them if you have to. They benefit you in some way, so you’re incentivized to keep them around. That’s what makes a page last.

Tuesday, January 7th, 2020

Life Under The Ice

Here’s the latest wonderful project from Ariel—explore microscopic specimens from Antarctica:

The collected Antarctic microbes were found living within glaciers, under the sea ice, next to frozen lakes, and in subglacial ponds.

Beautiful!

Wednesday, January 1st, 2020

Bound in Shallows: Space Exploration and Institutional Drift

If a human civilization beyond Earth ever comes into being, this will be unprecedented in any historical context we might care to invoke—unprecedented in recorded history, unprecedented in human history, unprecedented in terrestrial history, and so on. There have been many human civilizations, but all of these civilizations have arisen and developed on the surface of Earth, so that a civilization that arises or develops away from the surface of Earth would be unprecedented and in this sense absolutely novel even if the institutional structure of a spacefaring civilization were the same as the institutional structure of every civilization that has existed on Earth. For this civilizational novelty, some human novelty is a prerequisite, and this human novelty will be expressed in the mythology that motivates and sustains a spacefaring civilization.

A deep dive into deep time:

Record-keeping technologies introduce an asymmetry into history. First language, then written language, then printed books, and so and so forth. Should human history extend as far into the deep future as it now extends into the deep past, the documentary evidence of past beliefs will be a daunting archive, but in an archive so vast there would be a superfluity of resources to trace the development of human mythologies in a way that we cannot now trace them in our past. We are today creating that archive by inventing the technologies that allow us to preserve an ever-greater proportion of our activities in a way that can be transmitted to our posterity.

Friday, December 13th, 2019

The Deep Sea

After showing us the size of space, here’s a fascinating intereactive visualisation of the ocean depths.

Thursday, December 12th, 2019

How readable—Findings

The results are in for Daniel van Berzon’s most recent experiment into accurately measuring code readability. You can read the results and read about the methodology behind them.

Monday, December 2nd, 2019

Just enough Internet | doteveryone

The carbon cost of collecting and storing data no one can use is already a moral issue.

So before you add another field, let alone make a new service, can you be sure it will make enough of a difference to legitimise its impact on the planet?

Wednesday, November 20th, 2019

2019 End-of-Year Thoughts Archives | CSS-Tricks

I’m really enjoying this end-of-the-year round-up from people speaking their brains. It’s not over yet, but there’s already a lot of thoughtful stuff to read through.

There are optimistic hopeful thoughts from Sam and from Ire:

Only a few years ago, I would need a whole team of developers to accomplish what can now be done with just a few amazing tools.

And I like this zinger from Geoff:

HTML, CSS, and JavaScript: it’s still the best cocktail in town.

Then there are more cautious prognostications from Dave and from Robin:

The true beauty of web design is that you can pick up HTML, CSS, and the basics of JavaScript within a dedicated week or two. But over the past year, I’ve come to the conclusion that building a truly great website doesn’t require much skill and it certainly doesn’t require years to figure out how to perform the coding equivalent of a backflip.

What you need to build a great website is restraint.

Sunday, November 17th, 2019

A Web Developers New Working Week

I think these are great habit-forming ideas for any web designer or developer: a day without using your mouse; a day with your display set to grayscale; a day spent using a different web browser; a day with your internet connection throttled. I’m going to try these!

Saturday, November 16th, 2019

Morphosis: Goliath, David, Adam

A biblical short story from Adam Roberts.

Web Layers Of Pace

How cool is this!!?

Tom took one of the core ideas from my talk at Beyond Tellerrand and turned it into this animated CodePen!

Thursday, November 7th, 2019

Stab a Book, the Book Won’t Die — by Craig Mod

Craig compares and contrasts books to “attention monsters”:

That is, any app / service / publication whose business is predicated on keeping a consumer engaged and re-engaged for the benefit of the organization (often to the detriment of the mental and physical health of the user), dozens if not hundreds or thousands of times a day.

Wednesday, November 6th, 2019

The web is not dying | Go Make Things

A counterpart to the piece by Baldur that I linked to yesterday:

There are many challenges to face as the web grows.

Most of them are people problems. Habits. Inertia. A misalignment of priorities with user needs. Those can be overcome.

Tuesday, November 5th, 2019

The Web Falls Apart – Baldur Bjarnason

This isn’t a “the web is doomed, DOOMED, I tells ya” kind of blog post. It’s more in the “the web in its current form isn’t sustainable and will collapse into a simpler, more sustainable form, possibly several” genre.

Baldur points to the multiple causes of the web’s current quagmire.

I honestly have no idea on how to mitigate this harm or even how long the decline is going to take. My hope is that if we can make the less complex, more distributed aspects of the web safer and more robust, they will be more likely to thrive when the situation has forced the web as a whole to break up and simplify.

Tuesday, October 15th, 2019

Jeremy Keith & Remy Sharp - How We Built the World Wide Web in Five Days on Vimeo

Here’s the talk that Remy and I gave at Fronteers in Amsterdam, all about our hack week at CERN. We’re both really pleased with how this turned out and we’d love to give it again!

Monday, October 14th, 2019

The World-Wide Work. — Ethan Marcotte

Here’s the transcript of Ethan’s magnificent closing talk from New Adventures. I’m pretty sure this is the best conference talk I’ve ever had the honour of seeing.

Sunday, October 6th, 2019

Dark mode

I had a very productive time at Indie Web Camp Amsterdam. The format really lends itself to getting the most of a weekend—one day of discussions followed by one day of hands-on making and doing. You should definitely come along to Indie Web Camp Brighton on October 19th and 20th to experience it for yourself.

By the end of the “doing” day, I had something fun to demo—a dark mode for my website.

Y’know, when I first heard about Apple adding dark mode to their OS—and also to CSS—I thought, “Oh, great, Apple are making shit up again!” But then I realised that, like user style sheets, this is one more reminder to designers and developers that they don’t get the last word—users do.

Applying the dark mode styles is pretty straightforward in theory. You put the styles inside this media query:

@media (prefers-color-scheme: dark) {
...
}

Rather than over-riding every instance of a colour in my style sheet, I decided I’d do a little bit of refactoring first and switch to using CSS custom properties (or variables, if you will).

:root {
  --background-color: #fff;
  --text-color: #333;
  --link-color: #b52;
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
}
a {
  color: var(--link-color);
}

Then I can over-ride the custom properties without having to touch the already-declared styles:

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #111416
    --text-color: #ccc;
    --link-color: #f96;
  }
}

All in all, I have about a dozen custom properties for colours—variations for text, backgrounds, and interface elements like links and buttons.

By using custom properties and the prefers-color-scheme media query, I was 90% of the way there. But the devil is in the details.

I have SVGs of sparklines on my homepage. The SVG has a hard-coded colour value in the stroke attribute of the path element that draws the sparkline. Fortunately, this can be over-ridden in the style sheet:

svg.activity-sparkline path {
  stroke: var(--text-color);
}

The real challenge came with the images I use in the headers of my pages. They’re JPEGs with white corners on one side and white gradients on the other.

header images

I could make them PNGs to get transparency, but the file size would shoot up—they’re photographic images (with a little bit of scan-line treatment) so JPEGs (or WEBPs) are the better format. Then I realised I could use CSS to recreate the two effects:

  1. For the cut-out triangle in the top corner, there’s clip-path.
  2. For the gradient, there’s …gradients!
background-image: linear-gradient(
  to right,
  transparent 50%,
  var(—background-color) 100%
);

Oh, and I noticed that when I applied the clip-path for the corners, it had no effect in Safari. It turns out that after half a decade of support, it still only exists with -webkit prefix. That’s just ridiculous. At this point we should be burning vendor prefixes with fire. I can’t believe that Apple still ships standardised CSS properties that only work with a prefix.

In order to apply the CSS clip-path and gradient, I needed to save out the images again, this time without the effects baked in. I found the original Photoshop file I used to export the images. But I don’t have a copy of Photoshop any more. I haven’t had a copy of Photoshop since Adobe switched to their Mafia model of pricing. A quick bit of searching turned up Photopea, which is pretty much an entire recreation of Photoshop in the browser. I was able to open my old PSD file and re-export my images.

LEGO clone trooper Brighton bandstand Scaffolding Tokyo Florence

Let’s just take a moment here to pause and reflect on the fact that we can now use CSS to create all sorts of effects that previously required a graphic design tool like Photoshop. I could probably do those raster scan lines with CSS if I were smart enough.

dark mode

This is what I demo’d at the end of Indie Web Camp Amsterdam, and I was pleased with the results. But fate had an extra bit of good timing in store for me.

The very next day at the View Source conference, Melanie Richards gave a fantastic talk called The Tailored Web: Effectively Honoring Visual Preferences (seriously, conference organisers, you want this talk on your line-up). It was packed with great insights and advice on impementing dark mode, like this little gem for adjusting images:

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

Melanie also pointed out that you can indicate the presence of dark mode styles to browsers, although the mechanism is yet to shake out. You can do it in CSS:

:root {
  color-scheme: light dark;
}

But you can also do it in HTML:

That allows browsers to swap out replaced content; interface elements like form fields and dropdowns.

Oh, and one other addition I added after the fact was swapping out map imagery by using the picture element to point to darker map tiles:

<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://api.mapbox.com/styles/v1/mapbox/dark-v10/static...">
<img src="https://api.mapbox.com/styles/v1/mapbox/outdoors-v10/static..." alt="map">
</picture>

light map dark map

So now I’ve got a dark mode for my website. Admittedly, it’s for just one of the eight style sheets. I’ve decided that, while I’ll update my default styles at every opportunity, I’m going to preservethe other skins as they are, like the historical museum pieces they are.

If you’re on the latest version of iOS, go ahead and toggle the light and dark options in your system preferences to flip between this site’s colour schemes.

Saturday, September 28th, 2019

Frank Chimero · A Like Can’t Go Anywhere, But a Compliment Can Go a Long Way

A thousand likes doesn’t look much bigger than one, and this becomes important when considering the form of negativity on social media.

There is no feature for displeasure on social media, so if a person wants to express that, they must write. Complaints get wrapped in language, and language is always specific.