Web Resources #44

Also available in: Français

UX / UI, CSS, HTML, JavaScript, Accessibility and a lot of pixels and animations on this selection. Learn Grid Layout while having fun, discover more on CSS Variables or Font Variable. I also have a selection of digital artist to make this selection not only technical. Have fun!

Stay up to date: All of those resources are shared regularly everyday on my Twitter account. Follow me if you want quick updates.

UX / UI Design

• The spectrum of Design Roles in 2018 – I know, blog post of 2018, but I read that to help me work on my folio lately.
• Userflows.design – Curated userflows in real life of existing products.
• Myriam’s SEO, SXO and everything in between – A selection of Myriam’s SEO resources.
• Duotone Icons by Font Awesome – I like the way they dealt with customization of colors and opacity (CSS Variables)
• 4 reasons why you should design without colors – A good reminder of the importance of colors.
• How to build a Sketch plugin – HTML, CSS and JS to help you build a Sketch Plugin.

CSS, HTML and JS

Font variables are a thing today. They help you build more readable products with no impact on performance. In this selection, CSS Grid and CSS Variables (Custom Properties) are in the game too. Then some JS libraries and tips to help you build responsive and accessible interfaces.

CSS & SVG selection

Learn Grid Layout while having fun, know more on CSS Variables and Font Variable thanks to this little selection.

• Flexbox.ninja on Produchunt – I put Flexbox.ninja on Produchunt. Upvote to support me 🙂
• Fun places to learn CSS Grid Layout – A selection of resources to learn Grid Layout.
• Debugging CSS Grid – with Firefox dev tools.
• Font Variable Demo – A page using only 1 variable font of 84kb instead of 18 files of 288kb.
• CSS Custom Properties, the cascade – For those who hate the cascade, it won’t be better 😀
• SVG Crowbar – A Chrome-specific bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file.

JavaScript & Accessibility selection

JavaScript to help you with UX, accessibility and performance on this selection.

• Accessibility Object Model – Add meaning without markup.
• Reduced motion auto-play video – Reflexion on auto playing video and reduced motion preference.
• Time Control Web Accessibility – Slides of Sergei about web accessibility and how to render things that appear on the screen.
• Bound.js – Asynchronous boundary detection with no dependencies. Use it for lazyloading, state change or infinite scroll for example. Very light weight (1kb)

Tools

2 random tools to help you with GDPR design, and sharing useful video. I told you, random.

• Loom – A new kind of work communication tool that helps you get your message across through instantly shareable video. And you can also share your face and your screen simultaneously.
• GDPR Design by CNIL – An english community to help you with the GDPR stuff.

Demo, Folio & Inspiration time

I had a lot of illustration, art, character design and demo selection this month I shared on Twitter. Enjoy these pixels and animations!

• Uran Dribbble Portfolio – An illustrator’s portfolio I discovered last week I want to share.
• MA True Cannabis – Animated website inspiration.
• Musical Particule III – Pick a track and let the particule dance for you.
• WebGL Fluid Simulation – A fun demo you really have to try.
• Airi’s arts – An artist I discovered during #portfolioday on Twitter.
• Hunter’s arts – An character designer I discovered during #portfolioday on Twitter.
• Ronald’s illustrations – A digital illustrator I discovered during #portfolioday on Twitter.
• Chun Lo’s drawings – An artist I discovered during #portfolioday on Twitter.
• Slaughterhouse Starlets – Funny “bloody” illustrations.

Ping me on Twitter if you want to share your work!