Pixel Paranoia the UX Podcast

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

S01E09 - CSS donut scope, communicatie Belastingdienst en wat zijn Adobe en Microsoft aan het doen?

Deze aflevering is wat anders dan anders. We gaan het hebben over de soms wat opmerkelijke keuzes die organisaties zoals Adobe en Microsoft maken. Waarom kunnen ze niet bijbenen met concurrerende software? Waarom houden ze zo vast aan hun eigen bedachte patronen terwijl er andere partijen het tegendeel al bewezen hebben? Kortom, geniet van deze aflevering waar Rick en Michele helemaal de diepte ingaan op Adobe, Microsoft Teams maar ook over de Belastingdienst en Total Webhosting Solutions.

• 1:25 - CSS Focus-visible - https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
• 4:36 - CSS :not selector (donut scope) - https://css-tricks.com/weekly-platform-news-focus-rings-donut-scope-ditching-em-units-and-global-privacy-control/#the-enhanced-css-not-selector-enables-donut-scope
• 70:32 - F1TV (25% korting met de code "F1TV25") - https://www.formula1.com/en/subscribe-to-f1-tv.html#nl-NL
• 74:00 - Frontend Horse - https://frontend.horse/

S01E08 - Het Design System van Centraal Beheer, Flotato, Devtool tips en een accessibility test suite

In deze aflevering hebben we weer een hele fijne gast. Rogier is Pattern Design Lead bij Centraal Beheer. Gezien de complexe organisatie en de vele aanpassingen heeft Centraal Beheer een proces bedacht waarbij het Design System de bron van alle informatie is geworden. Rogier neemt ons mee in hoe dit proces eruit ziet en welke valkuilen er kunnen zijn. Verder bespreken we over een aantal handige tips rondom de devtools van browsers, een accessibility test suite van Microsoft en Flotato, waarbij je van elke tab een app kunt maken.

• 1:58 - Flotato - https://www.flotato.com/
• 7:15 - Useful devtools tips - https://www.smashingmagazine.com/2021/02/useful-chrome-firefox-devtools-tips-shortcuts/
• 13:25 - Accessibility test suite - https://accessibilityinsights.io
• 78:00 - Tesla’s strategie om bitcoin te kopen - https://www.youtube.com/watch?v=F1P7JrY1JFw
• 80:25 - Welke karakters ondersteund een lettertype? - https://wakamaifondue.com/
• 81:30 - The Queen's Gambit - https://www.netflix.com/nl/title/80234304
• 82:20 - Ted Lasso - https://tv.apple.com/nl/show/ted-lasso/umc.cmc.vtoh0mn0xn7t3c643xqonfzy

S01E07 - Pika, Nike Go FlyEase, UX/UI/Front-end Twitter accounts

In deze aflevering bespreken Rick en Michele een zeer handige color picker genaamd Pika, de gebruiksvriendelijke schoen van Nike, namelijk de Nike Go FlyEase en bespreken we de Twitter accounts van mensen die je moet volgen op het vlak van UX/UI en Front-end!

• 0:50 - Pika - https://github.com/superhighfives/pika
• 4:15 - Nike Go FlyEase - https://www.nike.com/nl/flyease/go-flyease
• 8:02 - Lynn Fisher (Front-end) (@lynnandtonic) 
• 10:07 - Steve Schoger (UX/UI) (@steveschoger)
• 11:09 - Sara Soueidan (Front-end/Accessibility) (@SaraSoueidan)
• 13:59 - Hakim El Hattab (Front-end/UI) (@hakimel)
• 17:29 - Adam Argyle (Front-end) (@agyleink)
• 21:04 - Andy Budd (UX) (@andybudd)
• 22:58 - Pablo Stanley (UX/UI) (@pablostanley)
• 27:00 - Jared Spool (UX) (@jmspool)
• 29:57 - Heydon Pickering (Front-end/Accessibility) (@HeydonWorks)
• 32:55 - Peter Paul Koch (Front-end) (@ppk)
• 35:38 - Wes Bos (Front-end) (@wesbos)
• 38:45 - Vasilis Van Gemert (UX/UI/Accessibility) (@vasilis)
• 40:59 - Steve Troughton Smith (iOS/UI) (@stroughtonsmith) 
• 43:15 - Foone (manus van alles, hardware/software hacker) (@foone)
• 46:10 - Brad Frost (Atomic Design, Front-end) (@brad_frost)
• 47:20 - Paul Irish - (Front-end) (@paul_Irish)
• 48:20 - Eric Myer (Front-end) (@meyerweb)
• 49:21 - SwiftOnSecurity (Security) (@swiftonsecurity)
• 51:38 - UXDesign.cc (https://uxdesign.cc)
• 53:18 - Pabo Stanley’s Figma Crash Course (https://www.figmacrashcourse.com/)