Pixels of the Week – November 25, 2018

Every week I post a lot of my daily readings about Web, UI and UX Design, mobile design, webdesign tools  and useful resources, inspiration on twitter and other social networks.

This week’s selection: UX and gamification, mobile push notifications mistakes, mental models, PWAs,  learning design, building user flows, check-out UX, building color palettes, design debug tool, personas, CSS in React components, cute icons, ordering CSS properties, tools and scripts for AI, machine learning, indeweb and performance.

You can follow me on twitter to get a dose of links every days.

I gave talks last week

Last week I was at Voxxed Days Thessaloniki and gave two talks:

• Hello my name is St�phanie on special characters and encoding issues on the web
• Cheating The UX, When There Is Nothing More To Optimize on perceived performance and user experience

TL;DNR the one you should not miss

#Design

Amazing site with lots of links and resources to start learning design, great for students and beginners – Degreeless.design – Everything I Learned in Design School”

#CSS

Dear Front End Developers, Full Stack, any JS dev who needs to work with CSS at some point, this is super useful: The “C” in CSS: The Cascade

Interesting article

#UX #UI

• Five Mistakes in Designing Mobile Push Notifications
• How—and When—to Use Gamification in Your UX. Interested examples. I’m still wondering if this works on most users or if people won’t get tired of everything becoming gamification?
• Gamification: A guide for designers to a misunderstood concept
• Mental models in product design – a great read on products, cognitive biases and psychology
• Creating Excellent UX Flow Charts – Illustrate complex processes by including use cases, actions, and life cycles
• Checkout Redesign & Optimization Case Study: don’t blindly copy big e-commerce like Amazon, do your user research, understand stakeholders as well, iterate on different solutions, test them, fail, rework
• Kill Your Personas – on building personas spectrum instead, inclusive design and empathy

#Mobile

• Progressive Web Apps: A Convincing Case for Native-like Apps on the Web

#Front-End, #CSS and #JS

• 10 things to learn for becoming a solid full-stack JavaScript developer >> the HTML and CSS part is super depressing. There’s not to HTML than spans and divs, there’s semantics, accessibility, and so much more…
• Once More Again, CSS Property Order – I like to group them logically because most of the time I need to change something, it’s typography, placement or box color/background so having those I usually change together grouped makes sense to me ^^
• 5 Ways to Style React Components in 2019
• Difference between currentColor & Custom Properties, great read

#Design

Great read for design beginners and anyone who wants to build sites a and products with nice color balance: Building Your Color Palettes

Voxxed Thessaloniki – machine learning, AI and more

I really enjoyed several talks at Voxxed Dayd Thessaloniki last week and discovered quite a few tools and ressources, so I will put them all here in case you missed the tweets 🙂

#Machine Learning

Jen Looper and Asim Hussain each gave talks related to machine learning and JavaScript, here are a few tools

• Jen Looper gave a really interesting talk: Human vs. AI: Build a Mobile App with Vue.js, ML Kit, and NativeScript
• Machine learning for mobile developers – ML Kit beta brings Google’s machine learning expertise to mobile developers in a powerful and easy-to-use package.
• TensorFlow.js A JavaScript library for training and deploying ML models in the browser and on Node.js
• aijs.rocks is a playground with cool AI powered JavaScript apps in the browser

#JS #Native

nativescript.org – Open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript.

#Performance

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

#Content #Indeweb

Jeremy Keith gave a really interesting talk about gaining back the control over your content. Here are a few tools

• indieweb.org The IndieWeb is a people-focused alternative to the “corporate web”, gain back control over your content!
• RelMeAuth is an authentication method that uses personal URL for identity that rel-me link to established OAuth provider(s) to perform the actual authentication.
• Webmention.io is a hosted service created to easily receive webmentions on any web page.
• brid.gy  pulls comments, likes, and reshares on social networks back to your web site. You can also use it to post to social networks – or comment, like, or reshare – from your own web site.

Useful tools and plugins that will make your life easy

#Icons

Cute. Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.

#Poll

An online small tool to create polls

#Emoji #Fun

Emoji Builder but we can’t build one that pukes rainbows so this needs improvement to be perfect

#Design Tool

Project VisBug, Okay this is SUPER cool, a tool to play with the design in the browser without needing to know code

#Audit

Web.dev  – an online tool to check your site against modern web capabilities like offline, PWAS, etc.