Tags: actions

16

sparkline

Monday, October 19th, 2020

Boring by default

More on battling entropy:

Ever needed to change “just a small thing” on an old page you build years ago? I recently had the pleasure and the simple task of changing some colors in CSS lead to a whole day of me wrangling with old deprecated Grunt tasks and trying to get the build task running.

The solution:

That’s why starting with HTML, CSS and JavaScript without the need to ever compile anything on your local machine is a good idea. Changing some colors on such a page would indeed only take minutes and not a whole day.

I like this mindset:

Be boring by default and enhance on the way.

Monday, October 12th, 2020

Cheating Entropy with Native Web Technologies - Jim Nielsen’s Weblog

This post really highlights one of the biggest issues with the convoluted build tools used for “modern” web development. If you return to a project after any length of time, this is what awaits:

I find entropy staring me back in the face: library updates, breaking API changes, refactored mental models, and possible downright obsolescence. An incredible amount of effort will be required to make a simple change, test it, and get it live.

Always bet on HTML:

Take a moment and think about this super power: if you write vanilla HTML, CSS, and JS, all you have to do is put that code in a web browser and it runs. Edit a file, refresh the page, you’ve got a feedback cycle. As soon as you introduce tooling, as soon as you introduce an abstraction not native to the browser, you may have to invent the universe for a feedback cycle.

Maintainability matters—if not for you, then for future you.

The more I author code as it will be run by the browser the easier it will be to maintain that code over time, despite its perceived inferior developer ergonomics (remember, developer experience encompasses both the present and the future, i.e. “how simple are the ergonomics to build this now and maintain it into the future?) I don’t mind typing some extra characters now if it means I don’t have to learn/relearn, setup, configure, integrate, update, maintain, and inevitably troubleshoot a build tool or framework later.

Tuesday, June 9th, 2020

Intent

There are intentions and there are outcomes. Sometimes bad outcomes are the result of good intentions. Less often, good outcomes can be the result of bad intentions. But generally we associate the two: we expect good outcomes to come from good intentions and we expect bad outcomes to come from bad intentions.

Perhaps it’s because of this conflation that we place too much emphasis on intentions. If, for example, someone is called out for causing a bad outcome, their first response is often to defend their intentions. That’s understandable. When someone says “you have created a bad outcome”, I understand why the person on the receiving end would receive that feedback as “you intended to create this bad outcome.” Cue a non-apology that clarifies the (good) intention without acknowledging the reality of the outcome (“It was never my intention to…”).

I get it. Intentions do matter …just not as much as we give them credit for. I mean, in general, I’d prefer bad outcomes to be the inadvertent result of good intentions. But in some ways, it really doesn’t matter: a bad outcome is a bad outcome.

Anyway, all of this is just to preface something I’m going to say about myself:

I am almost certainly racist.

I don’t intend to be racist, but like I said, intentions aren’t really what matter. Outcomes are.

Note, for example, the cliché of the gormless close-minded goon who begins a sentence with “I’m not racist, but…” before going on to say something clearly racist. It’s as though the racism could be defanged by disavowing bad intent.

The same defence mechanism is used to defend racist traditions. “Oh, it’s not racist—that’s just something we’ve always done.” Again, the defence is for the intention, not the outcome. And again, outcomes matter far, far more than intentions.

I really don’t intend to be racist. But how could I not be? I grew up in a small town in Ireland where literally everyone else looked like me. By the same token, I’m also almost certainly sexist. Growing up as a cisgender male in a patriarchal society guarantees that my mind has been shaped in ways I now wish it weren’t.

Acknowledging my racism—and sexism—doesn’t mean I’m okay with it. On the contrary. It’s a source of shame. But acknowledging my racism is a necessary step to changing it.

In any case, it doesn’t really matter how I feel about any of this. This isn’t meant to be a confessional. What matters are outcomes. Outcomes aren’t really the direct result of intentions—outcomes are the direct result of actions.

Most of my actions lately have been very passive. Listening. Watching. Because my actions are passive, they are indistinguishable from silence. That’s not good. Silence can be interpreted as acquiescence, acceptance. That’s not what I intend …but my intentions don’t matter.

So, even though this isn’t about me or my voice or my intentions, and even though this is something that is so self-evident that it shouldn’t need to be said, I want to say:

Black lives matter.

Friday, May 8th, 2020

Designing for Progressive Disclosure by Steven Hoober

Progressive disclosure interface patterns categorised and evaluated:

  • popups,
  • drawers,
  • mouseover popups (just say no!),
  • accordions,
  • tabs,
  • new pages,
  • scrolling,
  • scrolling sideways.

I really like the hypertext history invoked in this article.

The piece finishes with a great note on the MacNamara fallacy:

Everyone thinks metrics let us measure results. But, actually, they don’t. They measure only what they are measuring. Engagement, for example, is not something that can be measured, so we use an analogue for it. Time on page. Or clicks.

We often end up measuring what is quick, cheap, and easy to measure. Therefore, few organizations regularly conduct usability testing or customer-satisfaction surveys, but lots use analytics.

Even today, organizations often use clicks as a measure of engagement. So, all too often, they design user interfaces to generate clicks, so the system can measure them.

Wednesday, April 24th, 2019

Interview with Kyle Simpson (O’Reilly Fluent Conference 2016) - YouTube

I missed this when it was first posted three years ago, but now I think I’ll be revisiting this 12 minute interview every few months.

Everything that Kyle says here is spot on, nuanced, and thoughtful. He talks about abstraction, maintainability, learning, and complexity.

I want a transcript of the whole thing.

Interview with Kyle Simpson (O'Reilly Fluent Conference 2016)

Tuesday, November 27th, 2018

Front-end development is not a problem to be solved | CSS-Tricks

The sentiment is that front-end development is a problem to be solved: “if we just have the right tools and frameworks, then we might never have to write another line of HTML or CSS ever again!” And oh boy what a dream that would be, right?

Well, no, actually. I certainly don’t think that front-end development is a problem at all.

What Robin said.

I reckon HTML and CSS deserve better than to be processed, compiled, and spat out into the browser, whether that’s through some build process, app export, or gigantic framework library of stuff that we half understand. HTML and CSS are two languages that deserve our care and attention to detail. Writing them is a skill.

Friday, July 20th, 2018

Fractional. — Ethan Marcotte

Ethan’s ode to the fr unit in CSS grid.

Tuesday, April 26th, 2016

OOUX: A Foundation for Interaction Design · An A List Apart Article

I really, really like this approach. I’ve used something similar in my responsive design workshops, where I get people to break things down into nouns and verbs (objects and actions). I think there’s a lot of crossover with good URL design here too—this is kind of like REST for UX designers.

Saturday, January 28th, 2012

An introduction to Web Intents – an interview with Glenn Jones

Harry interviews Glenn about web intents (web actions). Glenn gives a good clear explanation of what they are.

Thursday, January 12th, 2012

Web Intents - Design Push

This looks like it’s going to be a great event on February 25th right here in Brighton: a gathering of minds to brainstorm around web intents. Get there if you can.

Wednesday, October 5th, 2011

Choosing the Right Words – Web Intents — Glenn Jones

Glenn has written up the discussion that followed his UXCampBrighton talk on web actions.

Monday, August 8th, 2011

Web Actions: Identifying A New Building Block For The Web - Tantek

Tantek’s braindump of research he and Erin have been doing on web actions—verbs for the web, specifically interactions across sites: sharing, liking, and so on. I agree with him that this terminology feels better than “web intents.”

Button Sluts and Web Actions

Erin documents the next step after web intents.

Wednesday, July 15th, 2009

Code Poetry: Blake’s Jerusalem | actionscripter.co.uk

foreach (tyger in night.forests) { burn(bright); }

Monday, September 17th, 2007

jQuery UI: Widgets, Components, and Interactions

From the people who brought you jQuery comes a set of widgets built using jQuery complete with documentation and tutorials.

Sunday, November 9th, 2003

Photoshop Actions

I’d like to share some of my Photoshop actions with you. I use these when I want to “touch up” photographs and add some extra effects.

I’d like to share some of my Photoshop actions with you. I use these when I want to “touch up” photographs and add some extra effects.

You can download a set of these actions.

For each of the actions, I’m going to use a photograph that started life as a 1600 x 1200 photograph shot on a Fuji Finexpix A201. I’ve reduced this down to 960 x 720 pixels to make it a more manageable download.

If you’d like to walk through all the steps of the actions described in this article, you can download this photograph and compare your results on a step by step basis.

A photograph of Jessica

To illustrate each action, I’ll be using 320 x 240 sized snapshots like this.

The first action is a straightforward “soft focus”.

Soft Focus

This action involves duplicating the original layer, making adjustments to that duplicate and then merging it back down. It works best on close-up portraits rather than distant landscapes.

Here’s the original picture.

The original photograph of Jessica.

The first step is duplicating this original layer.

Layer > Duplicate Layer

I’m going to blur this duplicated layer using the Gaussian Blur filter. I use a radius of about 7 pixels for a medium sized image.

The photograph of Jessica with gaussian blur applied.

The blur effect by itself is obviously too extreme so I’m going to change the style of the layer.

Layer > Layer Style > Blending Options

I set the Blend Mode to Lighten. I can then merge the duplicated layer back down with its original.

Layer > Merge Down

The photograph of Jessica with blending set to lighten.

I now have a “soft focus” version of the original photograph. If you find the effect too extreme or not extreme enough, try using lesser or greater values for the Gaussian Blur filter.

Varying the blending options can also produce some interesting effects. I want to show you just one of those variations. I use it to create a “drawing" effect on pictures.

Drawing

The first few steps of this are identical to the “soft focus” action.

Here’s the original picture again.

The original photograph of Jessica.

Again, I duplicate this original layer.

Layer > Duplicate Layer

Now I apply the Gaussian Blur filter with a radius of about 7 pixels.

The photograph of Jessica with gaussian blur applied.

Now I change the blending options on the layer.

Layer > Layer Style > Blending Options

This time, I set the Blend Mode to Darken. I merge the duplicated layer back down with its original.

Layer > Merge Down

The photograph of Jessica with blending set to lighten.

This action has the effect of making the lines in the photograph look hand-drawn while the areas of colour look inked-in. This pen and ink feel is reminiscent of some comics and graphic novels.

The next action is also a variation on the “soft focus”. I like to call it the “moody" action.

Moody

The idea with this action is to make a picture look more atmospheric.

I’m going to start with the same photograph. It has some strong colours like the red of the hair and the green of the jumper.

The original photograph of Jessica.

The first thing I do is reduce the saturation.

Image > Adjustments > Hue/Saturation

I put a figure of -70 in the Saturation field.

The photograph of Jessica with reduced saturation.

It’s already starting to look moodier although it’s quite flat. I increase the effect of the desaturation by increasing the brightness and decreasing the contrast.

Image > Adjustments > Brightness/Contrast

I put a figure of 15 into the Brightness field and -15 into the Contrast field.

Now I’m going to duplicate this layer. I do this because I want to mess with the settings of the duplicated layer and blend both layers together.

Layer > Duplicate Layer

From here, it’s quite similar to the “soft focus” action. Once again, I’m going to blur this duplicated layer using the Gaussian Blur filter with a radius of about 7 pixels.

The photograph of Jessica with gaussian blur applied.

Now I’m going to blend it with the layer below.

Layer > Layer Style > Blending Options

This time, I set the Blend Mode to Overlay. I then merge the duplicated layer back down with the original.

Layer > Merge Down

The photograph of Jessica with blending set to overlay.

That’s it. I now have a “moody" version of the original photograph.

There’s one last effect I want to show you.

Lomo

This action attempts to reproduce the kind of pictures you get from a Lomo camera. Unfortunately, part of this action is specific to the size of the picture (in this case, 960 x 720) so you’ll have to adjust it for different sizes.

I begin with the same photograph.

The original photograph of Jessica.

In many ways, this action is the opposite to the “moody" action because I want to increase the vividness of the colours. The first thing I do is up the brightness and contrast.

Image > Adjustments > Brightness/Contrast

I put a figure of 10 into both the Brightness and the Contrast fields.

The photograph of Jessica with increased brightness and contrast.

Next, I increase the saturation.

Image > Adjustments > Hue/Saturation

I put a figure of 15 in the Saturation field.

The photograph of Jessica with increased saturation.

Now I create a new, blank layer with the Blend Mode set to Soft Light.

Layer > New Layer

I’m going to fill this layer with a gradient. I set the foreground colour to white and the background colour to black. I then choose the Gradient tool and select a blend of the white going to black (the first option) and the radial pattern (the second pattern option). I drag the cursor from the centre of the image to one of the corners.

This is the part of the action that will have to vary depending on the size of the image because the centre will be in a different pixel position.

The photograph of Jessica with a gradient applied.

Now I merge this layer down.

Layer > Merge Down

It’s not quite the same as using a real Lomo camera but it’s a nice effect anyway.

So there you go: one photograph with four different effects.

The photograph of Jessica with the soft focus action applied. The photograph of Jessica with the drawing action applied. The photograph of Jessica with the moody action applied. The photograph of Jessica with the lomo action applied.

I hope you’ll find these actions useful. You can turn any of them into droplets by using Photoshop’s Automate option.

Automate > Create Droplet...

Have fun and don’t be afraid to play around with the settings I’ve given. You’ll be surprised at some of the great results you can get just by messing around.