Pixels of the Week – July 28, 2019 by Stéphanie Walter

This content is 5 years old. Remember that the following content might be outdated.

Every week I share a list of curated articles, resources and tools about UX, UI and mobile design, HTML, CSS, the web industry, process inspiration and more…

This week’s selection: amazing chameleon pen animations, women in STEM Role Models Poster, user research with vulnerable users, staying up to date in UX, challenges with single toggle buttons, dark UI guidelines, CSS :not() , CSS animations, podcast tool, the geopolitical story behind the .io, basics of command line in video, Shape detection API, a tarot bot for silly predictions in the industry, techbro terms explained, accessibility and more.

#Now – what I’m up to

#Talk

Two weeks ago I gave a talk at CSSCamp Barcelona about perceived performance: Mind over Matter: Optimize Performance Without Code – CSSCamp 2019

#On the blog

And for moooar links, in case you missed it Myriam is back on the blog with her “Myriam’s SEO, SXO and everything in between Links – July 2019”

#Expertise

I’m also super happy to tell you that I was accepted as a Google Dev Expert Web Technology 🙂

#UX #Interaction

Quick advise based on some hours of user observation for a usability review: if it looks like a button AND the color changes on hover, users might click on it, multiple times, thinking it’s a button or a link. I would say “avoid hover effect on non link elements”. It’s even more complex on mobile: the element keeps the “hover” CSS effect, so users think it was a button and that something will happen next (like a page loading). Sounds like basic “common sense”, yet I see many sites doing this.

TL;DNR the one you should not miss

#Animation #Watercolor

Paulina Bright creates those amazing chameleon pen loaders: rainbow and another one that you need to watch until the end. You can also find the making of on her youtube channel

Interesting article

#UX

“Staying Up to Date in User Experience” I like all those advice, BUT, be careful, don’t turn your life into a 24/7 learning session, make time for your brain to rest, have fun (trust me I used to listen to podcasts while swimming, not a good idea)
“The Challenges with Single Toggle Buttons” glad to see I’m not the only one struggling with those, I might have unfollow/followed a few people by mistake on twitter / instagram because of this (instagram is even more confusing for me)
“Form design: from zero to hero all in one blog post” a list of articles to help you design and build forms, and remember, don’t mess with labels!!!
“Doing ethical research with vulnerable users” we sometimes also forget that conducting user research can be also quite demanding on the researcher mental health as well, the part about not harming the researcher is especially interesting

#Design

Into the Dark – interesting guidelines from Google Material Design on dark interfaces

#CSS

“CSS :not() with Multiple Classes” There are no logical combinators with :not(), like and or or, but you can chain them.
“A case against modern CSS frameworks (component libraries)” an interesting discussion, especially in the comments

#Accessibility

#Shape detection

Did you know that there’s a Shape detection API (currently as chrome experiment under flag) you could use to make shape but also face detection in the browser? Here are 3 links to get you started: A Picture is Worth a Thousand Words, Faces, and Barcodes—The Shape Detection API, Face detection using Shape Detection API and Shape Detection API from Chrome Platform Status

#Domain

.io British Indian Ocean Territory, the geopolitical story behind the .io

Inspiration, fun demos and great ideas

#Stem #WomeninTech

This is an amazing project: STEM Role Models Posters — In 7 Additional Languages

#Responsive #Fun

The Popup Trombone lets you play trombone by resizing your window. This is the silly web I love!!!!

#French #Vous #Tu

If you have issues when to use “tu” or “vous” in French, here is an easy chart to help.

#Definitions

“How to speak Silicon Valley: 53 essential tech-bro terms explained” This his (sadly) fun but it’s lacking the 10x engineer

Tutorials

#Video #Command line

Command Line, a youtube playlist with videos to explain the basics of command line by April

#Form #Static

A request I’ve seen a lot is “how to add a contact form to a static site”. Here are 2 solutions with a tutorial for each: Use Zapier or Use Kwes. Any other solution you can think of?

Useful tools and plugins that will make your life easy

#Tarot #Prediction #AI

Tarot-o-bot, mother of tech updates and design trends, what do you foresee for our future? In the future Apple will run out of fancy names for their Mac OS updates and just use old Aramaic letters that no one will know how to pronounce.

#AI #Machinelearning

Talk to Transformer, see how a modern neural network completes your text.

#Twitter #Stylish

If you don’t like the new twitter, stylish has a few interesting themes (works on Chrome and Firefox). I like this one. There’s also Stylus

#CSS #Animations

A cool list of many CSS animations libraries

#tools #audio #webRTC

Simple, easy, effective: Roll Call is an online free tool to help you record podcast (or maybe user interview) with a high quality audio

#Mac #Security

Here are a few free mac security tools, from firewalls to tools that alert you if you camera/micro is accessed, etc

Pixels of the Week – July 28, 2019