Pixel Paranoia the UX Podcast

S01E19 - Nieuwe Chrome features, nieuwe CSS features, design hand-off naar developers en the nine states of design!

In deze aflevering hebben we het over een hele lijst aan kleine updates rondom de Chrome browser en nieuwe features binnen CSS. Verder hebben we het uitgebreid over hoe je als designer goed je designs kunt overdragen aan developers en is Safari nou de nieuwe Internet Explorer aan het worden? Oh ja, we geven invites weg voor fig.io, luisteren dus!

• 1:35 - Large, small and dynamic viewports - https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/
• 10:06 - Scrollbar gutter - https://www.bram.us/2021/07/23/prevent-unwanted-layout-shifts-caused-by-scrollbars-with-the-scrollbar-gutter-css-property/
• 13:29 - Scroll issues in Chrome - https://web.dev/2021-scroll-survey-report/
• 20:35 - Table improvements in Chrome - https://www.bram.us/2021/06/21/tablesng-improvements-to-table-rendering-in-chromium/
• 25:10 - Accessible design handover to developers - https://uxdesign.cc/how-to-hand-off-accessible-designs-to-developers-e10a0eeacaa6
• 31:10 - Turning designs into code - https://css-tricks.com/a-step-by-step-process-for-turning-designs-into-code/
• 37:58 - The nine states of design - https://medium.com/swlh/the-nine-states-of-design-5bfe9b3d6d85
• 43:08 - SVG Gobbler - https://css-tricks.com/svg-gobbler/
• 46:05 - Safari is killing the web - https://httptoolkit.tech/blog/safari-is-killing-the-web/
• 58:55 - The design is very human - https://www.reddit.com/r/TheDesignIsVeryHuman/
• 63:20 - Fig autocompleter for terminal (vraag om invites!) - https://fig.io/

S01E18 - Automatiseren van VoiceOver, Google web designer, GSAP en design with code

In deze aflevering is Nick weer van de partij! We hebben het samen met hem over het testen van Voice Assistants en het automatiseren daarvan, over HTML5 banner ads met Google webdesigner en bespreken we het animatie framework GSAP. En moeten designers code gaan schrijven? Of blijven we toch lekker designen, luister snel om achter onze conclusie te komen!

• 1:50 - Automate VoiceOver - https://github.com/ckundo/auto-vo
• 7:04 - Google web designer - https://webdesigner.withgoogle.com/
• 18:54 - Animatie framework GSAP - https://greensock.com/gsap/
• 32:35 - Design With Code - https://www.smashingmagazine.com/2021/06/design-code-modern-approach-development-challenges/
• 64:21 - Custom watch faces voor Fitbit - https://studio.fitbit.com/
• 67:45 - YouTube kanaal Tom Scott - https://www.youtube.com/channel/UCBa659QWEk1AI4Tg--mrJ2A
• 70:03 - Clippy komt terug! - https://tweakers.net/nieuws/184490/microsoft-vervangt-2d-emojis-door-3d-varianten-en-brengt-clippy-terug.html

S01E17 - UserCrowd, leren van games en alles over AI

In deze aflevering bespreken hebben we alles over AI. Moeten we ons druk maken om AI als designers, of gaat het ons juist helpen? En wat voor valkuilen zijn er allemaal als we AI toepassen? Verder hebben we het over het feedback platform UserCrowd en kunnen we als UX’ers ook leren van games?

• 0:57 - UserCrowd - https://www.usercrowd.com
• 4:05 - Usability Hub - https://usabilityhub.com
• 7:04 - Video game lessons for product designers - https://uxdesign.cc/video-games-lessons-for-product-designers-a6e86952820c
• 16:25 - CARROT weather app - https://apps.apple.com/nl/app/carrot-weather/id961390574
• 19:25 - AI in design - https://jonyablonski.com/articles/2021/ai-in-design/
• 20:12 - Designer Figma plugin - https://twitter.com/jsngr
• 21:20 - AirBNB whiteboard experiment - https://airbnb.design/sketching-interfaces/
• 22:35 - VisualEyes - https://www.visualeyes.design/
• 27:47 - Blob App - https://blobs.app
• 28:04 - This person does not exist - https://thispersondoesnotexist.com/
• 29:17 - This X does not exist - https://thisxdoesnotexist.com/
• 37:23 - The UX of AI - https://uxofai.com/
• 38:32 - My Chatbot is dead, why yours should probably be too - https://azumbrunnen.me/blog/my-chatbot-is-dead-%C2%B7-why-yours-should-probably-be-too/
• 50:30 - Uncanny Valley - https://www.youtube.com/watch?v=iDPY3iOzQJA
• 53:10 - Sophia AI Bot - https://www.youtube.com/watch?v=Sq36J9pNaEo
• 60:20 - Vocal Remover - https://vocalremover.org/
• 61:19 - Alex Trost Component Carousel - https://www.twitch.tv/trostcodes

S01E16 - RIP IE11, super handige :has CSS selector en blijven we remote werken?

In deze aflevering bespreken hebben we een hele sloot onderwerpen. De einddatum van IE11 komt nu toch echt in zicht, Firefox heeft eindelijk de context menu native gebouwd en de :has selector is misschien wel het meest handige CSS feature die we nu gaan krijgen. En wil je nou je CSS skills verbeteren? Check dan CSS Battle! En hoe ziet de toekomst eruit na Corona? Blijven we thuiswerken of gaan we weer allemaal gezellig terug naar het kantoor?

• 1:25 - RIP IE11 - https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge#what-is-the-lifecycle-policy-for-internet-explorer-
• 1:54 - Firefox native context menu - https://bugzilla.mozilla.org/show_bug.cgi?id=34572
• 4:14 - :has - https://css-tricks.com/did-you-know-about-the-has-css-selector/
• 8:10 - CSS size-adjust - https://web.dev/css-size-adjust/
• 12:28 - Chrome Form Elements - https://mobile.twitter.com/ChromiumDev/status/1396864652085108736
• 17:32 - CSS Battle - https://cssbattle.dev
• 43:37 - Who has the fasted F1 website? - https://jakearchibald.com/2021/f1-perf-part-1/
• 46:31 - Clarkson’s Farm - https://www.amazon.com/Clarksons-Farm-Season-1/dp/B095RHJ52R
• 50:48 - Around.co - https://www.around.co

S01E15 - Een tipline voor dark patterns, verbeteringen bij Airbnb en ethiek binnen UX.

In deze aflevering bespreken we samen met Danny over ethiek binnen het UX vakgebied. Verder praten we over allerlei verbeteringen die Airbnb tijdens de coronacrisis heeft doorgevoerd, een tip line voor dark patterns en heeft Google onlangs Material You gelanceerd wat een hoop Android gebruikers weer een frisse nieuwe interface moet geven.

• 2:25 - Airbnb - https://www.airbnb.nl
• 7:28 - Material You - https://material.io/blog/announcing-material-you
• 14:11 - Dark pattern Tip Line - https://darkpatternstipline.org
• 62:33 - Pepper - https://nl.pepper.com
• 63:05 - Xiaomi Mi True Wireless Earbuds Basic 2 - https://www.xiaomiproducts.nl/nl/xiaomi-mi-true-wireless-earbuds-basic-2.html
• 66:53 - MuteMe - https://muteme.com
• 68:40 - Envato Elements - https://elements.envato.com

S01E14 - Netlify, nieuwe spullen van Figma en wat is nou eigenlijk een UX Designer?

In deze aflevering hebben we het over de hosting service van Netlify, bespreken we config 2021 van Figma met weer een aantal leuke features! Daarnaast een uitgebreide discussie over wat er nou eigenlijk onder UX design valt.

• 2:18 - Netlify - https://www.netlify.com
• 10:16 - Config 2021 - https://config.figma.com
• 47:14 - Spicetify - https://github.com/khanhas/spicetify-cli
• 56:58 - Succesion - https://www.hbo.com/succession

S01E13 - E-mail styling, Variable fonts en nieuwe CSS features

In deze aflevering hebben we het over twee tools die erg handig zijn bij het stylen van e-mailtemplates, de werking van variable fonts in combinatie met het prachtige Lexend lettertype en last but not least, een hele bak handige/toffe nieuwe CSS features!

• 1:03 - E-mail styling met HEML en MJML - https://heml.io, https://mjml.io
• 6:58 - Variable font - https://youtu.be/0AsAjHPupKQ?t=1643
• 10:03 - Lexend - https://www.lexend.com
• 15:30 - @layer - https://www.w3.org/TR/css-cascade-5/#at-ruledef-layer
• 19:20 - @container - https://css-tricks.com/next-gen-css-container/
• 22:11 - Masonry grid - https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/
• 24:59 - content-visibility - https://web.dev/content-visibility/
• 29:50 - aspect-ratio - https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio
• 29:50 - ::marker - https://developer.mozilla.org/en-US/docs/Web/CSS/::marker
• 34:27 - focus-visible - https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
• 34:39 - focus-within - https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
• 38:14 - Logical properties - https://css-tricks.com/css-logical-properties/
• 47:14 - :is() - https://css-tricks.com/almanac/selectors/i/is/
• 47:15 - :where() - https://css-tricks.com/almanac/selectors/w/where/
• 55:12 - Wormhole - https://wormhole.app
• 55:41 - The Circle (US) - https://www.netflix.com/nl-en/title/81044551

S01E12 - The fear of missing out, StencilJS en de toekomst van UX

In deze aflevering hebben we weer een gast, namelijk Nick. Nick is front-end developer die zich graag ook af toe bezig houdt met UX. We praten over het fenomeen “The Fear of Missing Out” of ook wel FOMO genoemd, we bespreken een aantal front-end frameworks en waar gaat de toekomst van UX eigenlijk heen?

• 4:15 - The Fear of Missing Out - https://dev.to/ruffle1986/how-to-fomo-3bke
• 15:34 - StencilJS - https://stenciljs.com
• 25:13 - VueJS - https://vuejs.org
• 56:28 - Her - https://www.imdb.com/title/tt1798709/
• 57:10 - Ex Machina - https://www.imdb.com/title/tt0470752/
• 57:58 - Westworld - https://www.imdb.com/title/tt0475784/
• 61:02 - CSS stats - https://cssstats.com
• 62:00 - Vue CLI - https://cli.vuejs.org
• 62:30 - Google TV - https://tv.google

S01E11 - Het Seagull effect, 11ty static site generator, Accessibility (WCAG 2.1)

In deze aflevering gaan we verder waar we in aflevering #10 waren gebleven. Dit keer zoomen we met name in op de ARIA technieken binnen je front-end. Verder behandelen we het Seagull effect, en daar hebben de meeste van ons wel eens mee te maken, en ben je een beetje handig met HTML of Javascript? Kijk dan eens naar 11ty, een statische site generator.

• 1:28 - 11ty static site generator - http://11ty.dev/
• 8:54 - Het Seagull effect - https://blog.trello.com/avoid-the-seagull-effect-30/60/90-feedback-framework
• 14:22 - WCAG 2.1 - https://www.w3.org/TR/WCAG21/
• 22:23 - ARIA - https://www.w3.org/TR/wai-aria-1.1/#attrs_widgets
• 60:45 - Hacksaw Ridge - https://www.netflix.com/nl/title/80108975
• 61:55 - Mercedes EQS met MBUX hyperscreen - https://www.youtube.com/watch?v=wUqZQTp_gpI

S01E10 - Hostile CSS, The Book of Shaders, Accessibility

In deze aflevering gaan we diep in op alles rondom accessibility, zowel in het UX traject als in het Front-end traject. Verder behandelen we Hostile CSS, of beter, hoe scope je design system componenten binnen je CSS? En bespreken we een boek dat alles uitlegt over shaders voor het web.

• 0:58 - Hostile CSS - https://medium.com/@kevinmpowell/hostile-css-fortifying-system-styles-against-inherited-properties-8aa2e9f0fa3d\
• 8:28 - The Book of Shaders - https://thebookofshaders.com/
• 13:46 - Inclusive Design - https://inclusivedesignprinciples.org/nl/
• 19:45 - Kleurenblind mannen - https://nieuws.specsavers.nl/dit-is-wat-8-procent-van-de-mannen-niet-ziet/
• 29:20 - Label your icons - https://uxdesign.cc/label-your-icons-e2bd57366d37
• 35:36 - Is het B1? - https://www.ishetb1.nl/
• 36:40 - WCAG 2.1 - https://www.w3.org/TR/WCAG21/
• 60:05 - Formula 1: Drive to Survive - https://www.netflix.com/nl/title/80204890
• 61:55 - Klokje rond Autoweek - https://www.youtube.com/watch?v=aY_DvQczSAw&list=PL6E7F0986F7F49DEB