Podcasts about addy osmani

Welcome to episode 299 of The Cloud Pod – where the forecast is always cloudy! Google Next is quickly approaching, and you know what that means – it's time for predictions! Who will win this year’s Crystal Ball award? Only time and the main stage will tell. Join Matthew, Justin, and Ryan as they break down their thoughts on what groundbreaking (and less groundbreaking) announcements are in store for us.  Titles we almost went with this week: OpenAI and Anthropic join forces?  Its 2025, and AWS is still trying to make Jumbo packets happen Beanstalk and Ruby’s Updates!! They're Alive!!! Google Colossus or how to expect a colossal cloud outage someday. The Cloud Pod gives an ode to Peter A big thanks to this week's sponsor: We're sponsorless! Want to get your brand, company, or service in front of a very enthusiastic group of cloud news seekers? You've come to the right place! Send us an email or hit us up on our slack channel for more info.  AI Is Going Great – Or How ML Makes All Its Money   02:27 OpenAI adopts rival Anthropic's standard for connecting AI models to data OpenAI is embracing Anthropic's standard for connecting AI assistants to the systems where the data resides.   By adapting Anthropic's Model Context Protocol or MCP across its products, including the desktop app for ChatGPT.   MCP is an open source standard that helps AI models produce better, more relevant responses to certain queries.  Sam Altman says that people love MCP and they are excited to add support across their products and that it is available today in the Agents SDK and support for the ChatGPT desktop and Response API is coming soon. MCP lets models draw data from sources like business tools and software to complete tasks, as well as from content repositories and app development environments.  We found two helpful articles that may help demystify this whole concept.  MCP: What It Is and Why It Matters – by Addy Osmani Meet MCP: Your LLM's Super-Helpful Assistant! Justin particularly loves Addy Osmani's blog, as they start out with a simple ELI5 on understanding MCP. We're going to quote verbatim:  “Imagine you have a single universal plug that fits all your devices – that’s essentially what the Model Context Protocol (MCP) is for AI. MCP is an

Dans cet épisode, Emmanuel et Arnaud discutent des dernières nouvelles du dev, en mettant l'accent sur Java, l'intelligence artificielle, et les nouvelles fonctionnalités des versions JDK 24 et 25. Ils abordent également des sujets comme Quarkus, l'accessibilité des sites web, et l'impact de l'IA sur le trafic web. Cette conversation aborde les approches pour les devs en matière d'intelligence artificielle et de développement logiciel. On y discute notamment des défis et des bénéfices de l'utilisation de l'IA. Enfin, ils partagent leurs réflexions sur l'importance des conférences pour le développement professionnel. Enregistré le 14 mars 2025 Téléchargement de l'épisode LesCastCodeurs-Episode-323.mp3 ou en vidéo sur YouTube. News Langages Java Metal https://www.youtube.com/watch?v=yup8gIXxWDU Peut-être qu'on la déjà partagé ? Article d'opinion Java coming for AI https://thenewstack.io/2025-is-the-last-year-of-python-dominance-in-ai-java-comin/ 2025 pourrait être la dernière année où Python domine l'IA. Java devient un concurrent sérieux dans le domaine. En 2024, Python était toujours en tête, Java restait fort en entreprise, et Rust gagnait en popularité. Java est de plus en plus utilisé pour l'AI remettant en cause la suprématie de Python. article vient de javaistes la domination de python est cluturelle et plus technique (enfin pour les ML lib c'est encore technique) projets paname et babylon changent la donne JavaML est populaire L'almanach java sur les versions https://javaalmanac.io/ montre kes APIs et les diff entre versions puis les notes ou la spec java Les nouvelles de JDK 24 et du futur 25 https://www.infoq.com/news/2025/02/java-24-so-far/?utm_campaign=infoq_content&utm_source=infoq&utm_medium=feed&utm_term=global JDK 24 a atteint sa première phase de release candidate et sera officiellement publié le 18 mars 2025. 24 nouvelles fonctionnalités (JEPs) réparties en 5 catégories : Core Java Library (7), Java Language Specification (4), Security Library (4), HotSpot (8) et Java Tools (1). Project Amber : JEP 495 “Simple Source Files and Instance Main Methods” en quatrième preview, visant à simplifier l'écriture des premiers programmes Java pour les débutants. Project Loom : JEP 487 “Scoped Values” en quatrième preview, permettant le partage de données immuables entre threads, particulièrement utile avec les virtual threads. Project Panama : JEP 489 “Vector API” en neuvième incubation, continuera d'incuber jusqu'à ce que les fonctionnalités nécessaires de Project Valhalla soient disponibles. Project Leyden : JEP 483 “Ahead-of-Time Class Loading & Linking” pour améliorer le temps de démarrage en rendant les classes d'une application instantanément disponibles au démarrage de la JVM. Sécurité quantique : Deux JEPs (496 et 497) introduisant des algorithmes résistants aux ordinateurs quantiques pour la cryptographie, basés sur les réseaux modulaires. Sécurité renforcée : JEP 486 propose de désactiver définitivement le Security Manager, tandis que JEP 478 introduit une API de dérivation de clés. Optimisations HotSpot : JEP 450 “Compact Object Headers” (expérimental) pour réduire la taille des en-têtes d'objets de 96-128 bits à 64 bits sur les architectures 64 bits. (a ne aps utiliser en prod!) Améliorations GC : JEP 404 “Generational Shenandoah” (expérimental) introduit un mode générationnel pour le Garbage Collector Shenandoah, tout en gardant le non generationel. Évolution des ports : Windows 32-bit x86 ca sent le sapin JEP 502 dans JDK 25 : Introduction des “Stable Values” (preview), anciennement “Computed Constants”, offrant les avantages des champs final avec plus de flexibilité pour l'initialisation. Points Supplémentaires sur JDK 25 Date de sortie : JDK 25 est prévu pour septembre 2025 et représentera la prochaine version LTS (Long-Term Support) après JDK 21. Finalisation de l'on-ramp : Gavin Bierman a annoncé son intention de finaliser la fonction “Simple Source Files” dans JDK 25, après quatre previews successives. CDS Object Streaming : Le JEP Draft 8326035 propose d'ajouter un mécanisme d'archivage d'objets pour Class-Data Sharing (CDS) dans ZGC, avec un format d'archivage et un chargeur unifiés. HTTP/3 supporté dans HttpClient Un article sur l'approche de Go pour éviter les attaques par chemin de fichier https://go.dev/blog/osroot Librairies Quarkus 3.19 es sorti https://quarkus.io/blog/quarkus-3-19-1-released/ UBI 9 par defaut pour les containers En plus de AppCDS, support tu cache AOT (JEP 483) pour demarrer encore plus rapidement Preuve de possession dans OAuth tokers 2 Mario Fusco sur les patterns d'agents en Quarkus https://quarkus.io/blog/agentic-ai-with-quarkus/ et https://quarkus.io/blog/agentic-ai-with-quarkus-p2/ premier article sur les patterns de workflow chainer, paralleliser ou router avec des exemples de code qui tournent les agents a proprement parler (le LLM qui decide du workflow) les agents ont des toolbox que le LLM peut decided d'invoquer Le code va dans les details et permet de mettre les interactions en lumiere tracing rend les choses visuelles Web Le European Accessibility Act (EAA) https://martijnhols.nl/blog/the-european-accessibility-act-for-websites-and-apps Loi européenne sur l'accessibilité (EAA) adoptée en 2019 Vise à rendre sites web et apps accessibles aux personnes handicapées Suivre les normes WCAG 2.1 AA (clarté, utilisabilité, compatibilité) Entreprises concernées : banques, e-commerce, transports, etc. Date limite de mise en conformité : 28 juin 2025 2025 c'est pour les nouveaux developpements 2027 c'est pour les applications existantes. bon et je fais comment pour savoir si le site web des cast codeurs est conforme ? API Popover https://web.dev/blog/popover-baseline?hl=en L'API Popover est maintenant disponible dans tous les navigateurs majeurs Ajoutée à Baseline le 27 janvier 2025 Permet de créer des popovers natifs en HTML, sans JavaScript complexe Exemple : Ouvrir Contenu du popover Problème initial (2024) : Bug sur iOS empêchant la fermeture des popovers Intégrer un front-end React dans une app Spring-Boot https://bootify.io/frontend/react-spring-boot-integration.html Etape par etape, comment configurer son build (https://bootify.io/frontend/webpack-spring-boot.html) et son app (controllers…) pour y intégrer un front en rect. Data et Intelligence Artificielle Traffic des sites web venant de IA https://ahrefs.com/blog/ai-traffic-study/ le AIEO apres le SEO va devenir un gros business vu que les modèles ont tendance a avoir leurs chouchous techniques ou de reference. 63% des sites ont au moins un referal viennent d'une IA 50% ChatGPT, puis plrplexity et enfin Gemini, bah et LeChat alors? 0,17% du traffic des sites vient de l'IA. Et en meme temps l'AI resume plutot que pointe donc c'est logique Granite 3.2 est sorti https://www.infoq.com/news/2025/03/ibm-granite-3-2/ IBM sort Granite 3.2, un modèle IA avancé. Meilleur raisonnement et nouvelles capacités multimodales. Granite Vision 3.2 excelle en compréhension d'images et de documents. Granite Guardian 3.2 détecte les risques dans les réponses IA. Modèles plus petits et efficaces pour divers usages. Améliorations en raisonnement mathématique et prévisions temporelles. les trucs interessants de Granite c'est sa petite taille et son cote “vraiment” open source Prompt Engineering - article détaillé https://www.infoq.com/articles/prompt-engineering/ Le prompt engineering, c'est l'art de bien formuler les instructions pour guider l'IA. Accessible à tous, il ne remplace pas la programmation mais la complète. Techniques clés : few-shot learning, chain-of-thought, tree-of-thought. Avantages : flexibilité, rapidité, meilleure interaction avec l'IA. Limites : manque de précision et dépendance aux modèles existants. Futur : un outil clé pour améliorer l'IA et le développement logiciel. QCon San Francisco - Les agents AI - Conference https://www.infoq.com/presentations/ai-agents-infrastructure/ Sujet : Infrastructure pour agents d'IA. Technologies : RAG et bases de données vectorielles. Rôle des agents d'IA : Automatiser des tâches, prévoir des besoins, superviser. Expérience : Shruti Bhat de Oracle à Rockset (acquis par OpenAI). Objectif : Passer des applis classiques aux agents IA intelligents. Défis : Améliorer la recherche en temps réel, l'indexation et la récupération. Nous concernant: Évolution des rôles : Les développeurs passent à des rôles plus stratégiques. Adaptation nécessaire : Les développeurs doivent s'adapter aux nouvelles technologies. Official Java SDK for MCP & Spring AI https://spring.io/blog/2025/02/14/mcp-java-sdk-released-2 Désormais une implémentation officielle aux côtés des SDK Python, TypeScript et Kotlin. ( https://modelcontextprotocol.io/ ) Prise en charge de Stdio-based transport, SSE (via HTTP) et intégration avec Spring WebFlux et WebMVC. Intégration avec Spring AI, configuration simplifiée pour les applications Spring Boot (different starters disponibles) Codez avec Claude https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview Claude Code est en beta, plus de liste d'attente Un outil de codage agentique intégré au terminal, capable de comprendre votre base de code et d'accélérer le développement grâce à des commandes en langage naturel. Les fonctionnalités permettent de comprendre le code, le refactorer, tester, debugger, … Gemini Code Assist est gratuit https://blog.google/technology/developers/gemini-code-assist-free/ Pour un usage personnel. Pas besoin de compte. Pas de limite. 128k token input. Guillaume démarre une série d'articles sur le RAG (niveau avancé). Le premier sur Sentence Window Retrievalhttps://glaforge.dev/posts/2025/02/25/advanced-rag-sentence-window-retrieval/ Guillaume propose une technique qui améliore les résultats de rechercher de Retrieval Augmented Generation L'idée est de calculer des vecteurs embeddings sur des phrases, par exemple, mais de retourner un contexte plus large L'intérêt, c'est d'avoir des calculs de similarité de vector embedding qui ont de bons scores (sans dilution de sens) de similarité, mais de ne pas perdre des informations sur le contexte dans lequel cette phrase se situe GitHub Copilot edits en GA, GitHub Copilot en mode agent dans VSCode Insiders https://github.blog/news-insights/product-news/github-copilot-the-agent-awakens/ Copilot Edits permet via le chat de modifier plusieurs fichiers en même temps, ce qui simplifie les refactoring Copilot en mode agent ajoute un mode autonome (Agentic AI) qui va tout seul chercher les modifications à faire dans votre code base. “what could possibly go wrong?” Méthodologies Article d'opinion interessant sur AI et le code assistant de Addy Osmani https://addyo.substack.com/p/the-70-problem-hard-truths-about Un article de l'année dernière de Addy Osmani https://addyo.substack.com/p/10-lessons-from-12-years-at-google plusieurs types d'aide IA Ceux pour boostrapper, dun figma ou d'une image et avoir un proto non fonctionnel en quelques jours Ceux pour iterer sur du code donc plus long terme on va faire une interview sur les assistants de code IA Le cout de la vitesse de l'ia les dev senior refactur et modifie le code proposé pour se l'approprier, chnger l'architecture etc donc basé sur leur connaissance appliquer ce qu'on connait deja amis plus vite est un pattern different d'apprendre avec l'IA explore des patterns d'approche et la prospective sur le futur Loi, société et organisation Elon Musk essaie d'acheter Open AI https://www.bbc.com/news/articles/cpdx75zgg88o La réponse: “non merci mais on peut racheter twiter pour 9,74 milliars si tu veux” Avec la loi narcotrafic votée au sénat, Signal ne serait plus disponible en France https://www.clubic.com/actualite-555135-avec-la-loi-narcotrafic-signal-quittera-la-france.html en plus de légaliser les logiciels espions s'appuyant sur les failles logiciel La loi demande aux messageries de laisser l'état accéder aux conversations Donc une backdoor avec une clé etatique par exemple Une backdoor comme celle des téléphones filaires américains mis en place il y a des années et maintenant exploitée par l'espionnage chinois Signal à une position ferme, soit c'est sécurisé soit on sort d'un pays Olvid WhatsApp et iMessage sont aussi visée par exemple La loi défini la cible comme la criminalité organisée : les classiques mais aussi les gilets jaunes, les opposants au projet de Bure, les militants aidant les personnes exilées à Briançon, ou encore les actions contre le cimentier Lafarge à Bouc-Bel-Air et à Évreux Donc plus large que ce que les gens pensent. Conférences La liste des conférences provenant de Developers Conferences Agenda/List par Aurélie Vache et contributeurs : 14 mars 2025 : Rust In Paris 2025 - Paris (France) 19-21 mars 2025 : React Paris - Paris (France) 20 mars 2025 : PGDay Paris - Paris (France) 20-21 mars 2025 : Agile Niort - Niort (France) 25 mars 2025 : ParisTestConf - Paris (France) 26-29 mars 2025 : JChateau Unconference 2025 - Cour-Cheverny (France) 27-28 mars 2025 : SymfonyLive Paris 2025 - Paris (France) 28 mars 2025 : DataDays - Lille (France) 28-29 mars 2025 : Agile Games France 2025 - Lille (France) 28-30 mars 2025 : Shift - Nantes (France) 3 avril 2025 : DotJS - Paris (France) 3 avril 2025 : SoCraTes Rennes 2025 - Rennes (France) 4 avril 2025 : Flutter Connection 2025 - Paris (France) 4 avril 2025 : aMP Orléans 04-04-2025 - Orléans (France) 10-11 avril 2025 : Android Makers - Montrouge (France) 10-12 avril 2025 : Devoxx Greece - Athens (Greece) 11-12 avril 2025 : Faiseuses du Web 4 - Dinan (France) 14 avril 2025 : Lyon Craft - Lyon (France) 16-18 avril 2025 : Devoxx France - Paris (France) 23-25 avril 2025 : MODERN ENDPOINT MANAGEMENT EMEA SUMMIT 2025 - Paris (France) 24 avril 2025 : IA Data Day - Strasbourg 2025 - Strasbourg (France) 29-30 avril 2025 : MixIT - Lyon (France) 6-7 mai 2025 : GOSIM AI Paris - Paris (France) 7-9 mai 2025 : Devoxx UK - London (UK) 15 mai 2025 : Cloud Toulouse - Toulouse (France) 16 mai 2025 : AFUP Day 2025 Lille - Lille (France) 16 mai 2025 : AFUP Day 2025 Lyon - Lyon (France) 16 mai 2025 : AFUP Day 2025 Poitiers - Poitiers (France) 22-23 mai 2025 : Flupa UX Days 2025 - Paris (France) 24 mai 2025 : Polycloud - Montpellier (France) 24 mai 2025 : NG Baguette Conf 2025 - Nantes (France) 3 juin 2025 : TechReady - Nantes (France) 5-6 juin 2025 : AlpesCraft - Grenoble (France) 5-6 juin 2025 : Devquest 2025 - Niort (France) 10-11 juin 2025 : Modern Workplace Conference Paris 2025 - Paris (France) 11-13 juin 2025 : Devoxx Poland - Krakow (Poland) 12-13 juin 2025 : Agile Tour Toulouse - Toulouse (France) 12-13 juin 2025 : DevLille - Lille (France) 13 juin 2025 : Tech F'Est 2025 - Nancy (France) 17 juin 2025 : Mobilis In Mobile - Nantes (France) 19-21 juin 2025 : Drupal Barcamp Perpignan 2025 - Perpignan (France) 24 juin 2025 : WAX 2025 - Aix-en-Provence (France) 25-26 juin 2025 : Agi'Lille 2025 - Lille (France) 25-27 juin 2025 : BreizhCamp 2025 - Rennes (France) 26-27 juin 2025 : Sunny Tech - Montpellier (France) 1-4 juillet 2025 : Open edX Conference - 2025 - Palaiseau (France) 7-9 juillet 2025 : Riviera DEV 2025 - Sophia Antipolis (France) 18-19 septembre 2025 : API Platform Conference - Lille (France) & Online 23 septembre 2025 : OWASP AppSec France 2025 - Paris (France) 25-26 septembre 2025 : Paris Web 2025 - Paris (France) 2-3 octobre 2025 : Volcamp - Clermont-Ferrand (France) 6-10 octobre 2025 : Devoxx Belgium - Antwerp (Belgium) 9-10 octobre 2025 : Forum PHP 2025 - Marne-la-Vallée (France) 9-10 octobre 2025 : EuroRust 2025 - Paris (France) 16-17 octobre 2025 : DevFest Nantes - Nantes (France) 4-7 novembre 2025 : NewCrafts 2025 - Paris (France) 6 novembre 2025 : dotAI 2025 - Paris (France) 7 novembre 2025 : BDX I/O - Bordeaux (France) 12-14 novembre 2025 : Devoxx Morocco - Marrakech (Morocco) 21 novembre 2025 : DevFest Paris 2025 - Paris (France) 28 novembre 2025 : DevFest Lyon - Lyon (France) 28-31 janvier 2026 : SnowCamp 2026 - Grenoble (France) 23-25 avril 2026 : Devoxx Greece - Athens (Greece) 17 juin 2026 : Devoxx Poland - Krakow (Poland) Nous contacter Pour réagir à cet épisode, venez discuter sur le groupe Google https://groups.google.com/group/lescastcodeurs Contactez-nous via X/twitter https://twitter.com/lescastcodeurs ou Bluesky https://bsky.app/profile/lescastcodeurs.com Faire un crowdcast ou une crowdquestion Soutenez Les Cast Codeurs sur Patreon https://www.patreon.com/LesCastCodeurs Tous les épisodes et toutes les infos sur https://lescastcodeurs.com/

Terminamos el año con el tema del año: el futuro de la creación de software con las herramientas de IA generativa. Empezamos el episodio hablando de un atrevido artículo de Paul Kinlan (Google Chrome) titulado Will we care about frameworks in the future? donde lanza interesantes preguntas como ¿importan los patrones de arquitectura que hemos aprendido a lo largo de los años? ¿aparecerán nuevos patrones para la arquitectura de software que favorezcan la gestión con los LLM? Paul Kinlan hace estas reflexiones tras su experiencia codificando 17 proyectos gracias a herramientas de generación de código y editores como Replit. En su opinión, se vienen cambios importantes que harán redefinir nuestro trabajo. Al hilo de este tema también comentamos un extenso artículo de otro pez gordo de Google, Addy Osmani aparecido en su newsletter Elevate titulado "The 70% problem: Hard truths about AI-assisted coding. A field guide and why we need to rethink our expectations" Este extenso artículo ofrece conclusiones sobre la realidad de asistirse de herramientas de IA para desarrollar software, extrayendo lecciones para programadores principiantes y avanzados. Este junto con su último artículo y nuestras propias experiencias, nos dan material para hablar sobre como vemos el futuro de los frameworks y el desarrollo web. Lejos de las predicciones ultraoptimísticas y catastrofistas, creemos en un futuro de buen software y buenas prácticas.

T'as déjà géré des projets où chaque décision peut impacter des millions d'utilisateurs quotidiens ?Ça tombe bien, c'est justement ce que fait Jérémie Pereira chez Leboncoin

"Je n'étais pas prêt à devenir manager".

(Video Podcast available on Spotify and Youtube) In Episode 12, Lydia Hallie takes us through her tech journey, from early coding experiments to becoming a prominent figure in the developer community as a Staff Developer Relations Engineer for Vercel. Lydia shares her unique approach to tech talks, emphasizing authenticity and leveraging visual storytelling to make complex concepts accessible. She discusses the challenges of public speaking, her collaboration with Addy Osmani on patterns.dev, and her strategies for engaging with her audience beyond conventional presentation styles. Lydia also opens up about her personal struggles with burnout, highlighting the critical need for balance between work intensity and self-care. Her story is not just about her technical achievements but also about her insights into maintaining passion and productivity in tech. Lydia's reflections offer valuable lessons on the importance of self-awareness and the courage to prioritize well-being alongside professional growth. Check out Lydia Hallie's Frontend Master's courses here: https://frontendmasters.com/teachers/lydia-hallie/ Find Frontend Masters Online: Twitter: ⁠https://twitter.com/FrontendMasters⁠ LinkedIn: ⁠https://www.linkedin.com/company/frontend-masters/⁠ Facebook: ⁠https://www.facebook.com/FrontendMasters⁠ Instagram: ⁠https://instagram.com/FrontendMasters⁠ About Us: Advance your skills with in-depth, modern front-end engineering courses — our 150+ high-quality courses and 18 curated learning paths will guide you from mid-level to senior developer! ⁠https://frontendmasters.com/

Originally published on August 3rd, 2022. We are taking some time off from production. We will be back with new episodes on January 3rd, 2023. Patterns.dev is a free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React. Join authors, Addy Osmani and Lydia Hallie as they discuss patterns, tips, and tricks for improving how you architect apps. Links https://www.patterns.dev https://twitter.com/lydiahallie https://twitter.com/addyosmani Tell us what you think of PodRocket We want to hear from you! We want to know what you love and hate about the podcast. What do you want to hear more about? Who do you want to see on the show? Our producers want to know, and if you talk with us, we'll send you a $25 gift card! If you're interested, schedule a call with us (https://podrocket.logrocket.com/contact-us) or you can email producer Kate Trahan at kate@logrocket.com (mailto:kate@logrocket.com) Follow us. Get free stickers. Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we'll send you free PodRocket stickers! What does LogRocket do? LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guests: Addy Osmani and Lydia Hallie.

Patterns.dev is a free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React. Join authors, Addy Osmani and Lydia Hallie as they discuss patterns, tips, and tricks for improving how you architect apps. Links https://www.patterns.dev (https://www.patterns.dev/) https://twitter.com/lydiahallie https://twitter.com/addyosmani Follow us. Get free stickers. Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we'll send you free PodRocket stickers! What does LogRocket do? LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guests: Addy Osmani and Lydia Hallie.

In this episode, we talk about using design patterns to improve how you architect web apps, with authors of the book, Learning Patterns, Lydia Hallie, Staff Developer Advocate at Vercel, and Addy Osmani, engineering manager at Google working on Chrome. Show Notes DevNews (sponsor) CodeNewbie (sponsor) Cockroach Labs (DevDiscuss) (sponsor) Swimm (DevDiscuss) (sponsor) Drata (DevDiscuss) (sponsor) Stellar (DevDiscuss) (sponsor) Learning Patterns

Patterns.dev is free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React. Lydia Hallie is a full-time software engineering consultant and educator that primarily works with JavaScript, React, Node, GraphQL, and serverless technologies and Addy Osmani is an engineering manager working on Google Chrome. Together they teamed up with some web friends from around the world to bring us a new way to think about Patterns in JavaScript on the modern open web.https://www.patterns.dev

Vi pratar grön IT! För trettio år sedan hade det handlat om vad vi ska göra med e-soporna. Sedan svängde frågan mer mot virtualisering, tunna klienter och vidare till dagens klimateffektivisering. Vi pratade papperslöst samhälle, sen mindre egna serverhallar, men vad gör vi nu med vår feta bandbredd och all data i molnet? Jonas Hultenius arbetar med webb och mobilitet och ger oss en tydlig bild av hur mycket data vi skickar bara för att få fram en enkel webbsida. Vi öser på med bilder som tar bandbredd utan att tillföra särskilt mycket. Ofta använder vi felkomprimerade bilder eller fel filformat. Bildformaten har utvecklats från tunga BMP till JPG och PNG och nu AVIF och WebP. Utnyttja det! Kan en bild kosta 250 kb istället för 1 Mb gånger 100 000 besökare, så sker stora besparingar av bandbredd och därmed koldioxid. Om avsnittet: Målgrupp: alla, ledare, utvecklare, IT-avdelningen, webbdesigner  Lär dig: green it, grön IT, framtidens webb, dark mode, koldioxidbesparing, miljövänlig it En grön webbplats är bra ur många perspektiv; SEO-ranking, snabbhet, tillgänglighet, utseende, användbarhet - och drar samtidigt mindre energi. Dark mode är en annan del av grön IT. Med de mörkare gränssnitten behöver inte alla lampor på skärmen tändas. Detta märker vi användare i form av längre batteritid, men i det stora hela också i sparad koldioxid. Många svenska webbar är tungrodda. Vi har glömt bort hur dyr bandbredd var förut! Som utvecklare kan du miljöbanta din sajt: Trimma bort allt du inte använder. Infomation som visas ofta kan cachas, sparas närmare användaren, istället för att grävas upp ur databasen om igen. Information som sammanfattas på en sida istället för tio sparar tio klick och tio sidladdningar. Använd dark mode. Använd färre bilder med mindre filstorlek. Behöver du ha hela Angular? Kanske testa ramverk som Svelte. Vi som bygger webbsajter kan tillsammans och var för sig ta tre steg mot mer grön IT: Kom till insikt. Använd verktyg för att analysera och inventera systemen. Vad kan vi spara på för oss, för användaren, för miljön?Gör en handlingsplan och plocka låghängande frukter och sen beta av att-göra-listanSkryt om hur bra webb vi har! Vi tänker på miljön! Sprid ordet. Jonas Hultenius, Jonas Jaani (21:56) Länkar / mer information: Videoversion av avsnittet: https://youtu.be/PjSZOdXffNM https://youtu.be/PjSZOdXffNM Boktips #1: Bildoptimering av Addy Osmani, en av chefsingenjörerna för Google Chrome, med huvudfokus på ett snabbt och effektivt internet.https://www.smashingmagazine.com/printed-books/image-optimization/ Boktips #2: Hållbar webb och webbteknik från A Book Apart.https://abookapart.com/products/sustainable-web-design För den som vill mäta sig mot sig själv eller andra rekommenderar: Website Carbon Calculator. Ett verktyg där man snabbt får en uppfattning över hur många sockerbitar eller för den delen Sumobrottare man släpper ut i koldioxidform.https://www.websitecarbon.com/ Alla avsnitt av digitaliseringens podcast Effekten: https://www.effekten.se/avsnitt Vi finns där du hittar dina övriga poddar: https://www.effekten.se/prenumerera/ Apple Podcasts: https://itunes.apple.com/se/podcast/effekten-digitalisering-kunskap/id1171229363 Google Podcasts: https://www.google.com/podcasts?feed=aHR0cHM6Ly93d3cuZWZmZWt0ZW4uc2UvZmVlZC9wb2RjYXN0Lw== Acast: https://www.acast.com/effekten Spotify: https://open.spotify.com/show/5Z49zvPOisoSwhwojtUoCm https://open.spotify.com/show/5Z49zvPOisoSwhwojtUoCm

Специальный гость: Виталий Фридман ( https://www.smashingmagazine.com/ ) Доклады: HTTP:3 Demo by Robin Marx - Meets for Speed - Sept 2021 ( https://vimeo.com/622883389 ) CSS Custom Properties — Michelle Barker. Smashing Meets — December 2020. ( https://vimeo.com/493848724 ) Creativity in Cross-Cultural Innovation — Yiying Lu. Smashing Meets — 18th May 2020. ( https://vimeo.com/423753402 ) Addy Osmani on Optimizing images for the Core Web Vitals - Meets for Speed - Sept 2021 ( https://vimeo.com/622853150 ) Frustrating Design Patterns in 2021, And How To Fix Them, with Vitaly Friedman ( https://vimeo.com/616485526 ) Working With CSS Container Queries — Ahmad Shadeed. Smashing Meets — CSSummer 2021. ( https://vimeo.com/574706229 ) Getting Started with Vue 3's Composition API — Ben Hong. Smashing Meets — December 2020. ( https://vimeo.com/493831207 ) Нас можно найти: 1. Telegram: https://t.me/proConf 2. Youtube: https://www.youtube.com/c/proconf 3. SoundCloud: https://soundcloud.com/proconf 4. Itunes: https://podcasts.apple.com/by/podcast/podcast-proconf/id1455023466

Join Mike and Carrie as they discuss what's new in the SERPs, including continuous scroll on mobile, getting images in mobile results, indented results, and LSA showing in the local finder and map pack. They also look at Amazon's major seasonal hiring surge,  fake reviews, franchisees' responsibility to their own social media, and more!Mike's LinksAmazon Hiring 150,000 Seasonal Workers Amid Record US Job Shortage, Surging Wages - https://www.thestreet.com/.amp/markets/amazon-hiring-150000-seasonal-workers-amid-record-us-job-shortageDollar General Workers Stare Down Historic Union Vote, Vowing "We're Gonna Fight" - https://inthesetimes.com/article/dollar-general-workers-store-connecticut-union-campaignFTC Puts Hundreds of Businesses on Notice about Fake Reviews and Other Misleading Endorsements - https://www.ftc.gov/news-events/press-releases/2021/10/ftc-puts-hundreds-businesses-notice-about-fake-reviews-otherMike's Take: TC to 700+ Brands: Deceptive Endorsements Will Lead to Financial Pain - https://www.nearmedia.co/ftc-notice-of-penalty-offenses-tells-700-national-advertisers-that-deceptive-endorsements-can-lead-to-financial-penalties/MN toy store responds to 1-star review over mask requirement - https://bringmethenews.com/minnesota-lifestyle/st-paul-toy-store-responds-to-1-star-review-that-complained-about-mask-requirementHow to Get Images in Mobile Search Results - Sterling Sky Inc - https://www.sterlingsky.ca/images-mobile-serps/Mike Blumenthal on Twitter - https://twitter.com/mblumenthal/status/1449802079841751041Webinar: The Local SEO Firehose | The State of Local Search in 2022 - https://webinars.duda.co/the-state-of-local-search-2022?utm_source=influencer&utm_medium=anton&utm_campaign=local_webinar_oct_28Carries links:Continuous scrolling comes to Search on mobile - Niru Anand, Google - https://blog.google/products/search/continuous-scrolling-mobile/Going Local: Why Franchisees Shouldn't Rely on Parent Brands' Social Media Marketing - Karen Spader via Entrepreneur.com - https://www.entrepreneur.com/article/387431Indented Results Roll Out at 40% of SERPs - Pete Myers - Moz.com - https://moz.com/blog/indented-serp-resultsBest practices for using third-party embeds - Leena Sohoni, Addy Osmani, Katie Hempenius - https://web.dev/embed-best-practices/LSA Showing up in the map pack & local finder - Ben Fisher - https://twitter.com/TheSocialDude/status/1445906604742701060Women-Led and Veteran Led attributes now Women-Owned and Veteran Owned

Join Mike and Carrie as they discuss what's new in the SERPs, including continuous scroll on mobile, getting images in mobile results, indented results, and LSA showing in the local finder and map pack. They also look at Amazon's major seasonal hiring surge,  fake reviews, franchisees' responsibility to their own social media, and more!Mike's LinksAmazon Hiring 150,000 Seasonal Workers Amid Record US Job Shortage, Surging Wages - https://www.thestreet.com/.amp/markets/amazon-hiring-150000-seasonal-workers-amid-record-us-job-shortageDollar General Workers Stare Down Historic Union Vote, Vowing "We're Gonna Fight" - https://inthesetimes.com/article/dollar-general-workers-store-connecticut-union-campaignFTC Puts Hundreds of Businesses on Notice about Fake Reviews and Other Misleading Endorsements - https://www.ftc.gov/news-events/press-releases/2021/10/ftc-puts-hundreds-businesses-notice-about-fake-reviews-otherMike's Take: TC to 700+ Brands: Deceptive Endorsements Will Lead to Financial Pain - https://www.nearmedia.co/ftc-notice-of-penalty-offenses-tells-700-national-advertisers-that-deceptive-endorsements-can-lead-to-financial-penalties/MN toy store responds to 1-star review over mask requirement - https://bringmethenews.com/minnesota-lifestyle/st-paul-toy-store-responds-to-1-star-review-that-complained-about-mask-requirementHow to Get Images in Mobile Search Results - Sterling Sky Inc - https://www.sterlingsky.ca/images-mobile-serps/Mike Blumenthal on Twitter - https://twitter.com/mblumenthal/status/1449802079841751041Webinar: The Local SEO Firehose | The State of Local Search in 2022 - https://webinars.duda.co/the-state-of-local-search-2022?utm_source=influencer&utm_medium=anton&utm_campaign=local_webinar_oct_28Carries links:Continuous scrolling comes to Search on mobile - Niru Anand, Google - https://blog.google/products/search/continuous-scrolling-mobile/Going Local: Why Franchisees Shouldn't Rely on Parent Brands' Social Media Marketing - Karen Spader via Entrepreneur.com - https://www.entrepreneur.com/article/387431Indented Results Roll Out at 40% of SERPs - Pete Myers - Moz.com - https://moz.com/blog/indented-serp-resultsBest practices for using third-party embeds - Leena Sohoni, Addy Osmani, Katie Hempenius - https://web.dev/embed-best-practices/LSA Showing up in the map pack & local finder - Ben Fisher - https://twitter.com/TheSocialDude/status/1445906604742701060Women-Led and Veteran Led attributes now Women-Owned and Veteran Owned

This podcast involves two live demos, you can catch up on the YouTube verison here: https://youtu.be/T3K_DrgLPXMLinks Builder.io https://www.builder.io/ PartyTown https://github.com/BuilderIO/partytown Qwik https://github.com/builderio/qwik https://dev.to/mhevery/a-first-look-at-qwik-the-html-first-framework-af Timestamps [00:01:53] Misko Intro  [00:03:50] Builder.io  [00:08:31] PartyTown  [00:11:41] Web Workers vs Service Workers vs Atomics  [00:15:02] PartyTown Demo  [00:21:46] Qwik and Resumable vs Replayable Frameworks  [00:25:40] Qwik vs React - the curse of Closures  [00:27:32] Qwik Demo  [00:42:40] Qwik Compiler Optimizations  [00:53:00] Qwik Questions  [01:00:05] Qwik vs Islands Architecture  [01:02:59] Qwik Event Pooling  [01:05:57] Qwik Conclusions  [01:13:40] Qwik vs Angular Ivy  [01:16:58] TED Talk: Metabolic Health  Transcript [00:00:00] Misko Hevery: So the thing that I've learned from Angular.js days is make it really palatable, right. And solve a problem that nobody else has. Doing yet another framework in this state of our world would be complete suicide cause like it's just a different syntax for the same thing, right? So you need to be solving a problem that the other ones cannot solve. [00:00:22] swyx: The following is my conversation with Misko Hevery, former creator of Angular.js, and now CTO of Builder.io and creator of the Qwik framework. I often find that people with this level of seniority and accomplishment become jaded and imagine themselves above getting their hands dirty in code.  [00:00:39] Misko is the furthest you could possibly get, having left Google and immediately starting work on the biggest problem he sees with the state of web development today, which is that most apps or most sites don't get a hundred out of a hundred on their lighthouse scores. We talked about how Builder.io gives users far more flexibility than any other headless CMS and then we go into the two main ways that Misko wants to change web performance forever: offloading third-party scripts with PartyTown, and then creating a resumable framework with Qwik. Finally, we close off with a Ted Talk from Mishko on metabolic health. Overall I'm incredibly inspired by Misko's mission, where he wants to see a world with lighter websites and lighter bodies. [00:01:23] I hope you enjoy these long form conversations. I'm trying to produce with amazing developers. I don't have a name for it, and I don't know what the plan is. I just know that I really enjoy it. And the feedback has been really great. I'm still figuring out the production process and trying to balance it with my other commitments so any tips are welcome. If you liked this, share it with a friend. If you have requests for other guests, pack them on social media. I'd like to basically make this a space where passionate builders and doers can talk about their craft and where things are going. So here's the interview.  [00:01:53] Misko Intro  [00:01:53] swyx: Basically I try to start cold, [00:01:55] assuming that people already know who you are. Essentially you and I met at Zadar and, I've heard of you for the longest time. I've heard you on a couple of podcasts, but I haven't been in the Angular world. And now you're no longer in the Angular world.  [00:02:11] Misko Hevery: The child has graduated out of college. It's at a time.  [00:02:15] swyx: My favorite discovery about you actually is that you have non-stop dad jokes. Um, we were walking home from like one of the dinners and that you're just like going, oh, that's amazing. [00:02:27] Yes. Yeah.  [00:02:28] Misko Hevery: Yes. Um, most people cringe. I find it that it helps break that. It does and you know, the Dad jokes, so they're completely innocent. So you don't have to worry. I also have a good collection of, uh, computer jokes that only computer programmers get.  [00:02:47] swyx: Okay. Hit me with one.  [00:02:48] Misko Hevery: Um, "How do you measure functions?" [00:02:51] swyx: How do I measure functions? And the boring answer is arity,  [00:02:55] Misko Hevery: and that's a good one! "In Para-Meters." Uh, [00:03:03] swyx: yeah. So for anyone listening like our entire journey back was like that it just like the whole group just groaning. No, that's really good. Okay. Well, it's really good to connect. I'm interested in what you're doing at Builder. You left Google to be CTO of Builder. I assumed that I knew what it was, from the name, it actually is a headless CMS and we can talk about that because I used to work at Netlify and we used to be very good friends with all the headless CMSes. And then we can talk about Qwik. How's that ? [00:03:34] Misko Hevery: I can jump into that. Sorry. My voice is a little raspy. I just got over a regular cold, like the regular cold ceilings  [00:03:42] swyx: conference call, right. I dunno, I, I had it for a week and I only just got over it. [00:03:46] Misko Hevery: It was from the conference. Maybe it wasn't from the other trip I made anyways.  [00:03:50] Builder.io  [00:03:50] Misko Hevery: So let's talk about Builder. So Builder is what we call a headless visual CMS. Uh, I did not know any of that stuff. Would've meant. So I'm going to break it down because I assume that the audience might not know either. [00:04:01] So CMS means it's a content management system. What it means is that non-developers, uh, like typically a marketing department think like Gap. Gap needs to update .... If you're showing stuff on the screen, you can go to Everlane. Everlane is one of our customers. Okay. And so in Everlane case, the marketing department wants to change the content all the time. [00:04:22] Right? They want to change the sales, what things are on the top, what product that they want to feature, et cetera. And, um, this is typically done through a content management system. And the way this is typically done is that it's like a glorified spreadsheet where the engineering department makes a content. [00:04:39] And then it gives essentially key value pairs to the marketing. So the marketing person can change the text, maybe the image, but if the developer didn't think that the marketing person might want to change the color or font size, then there is no hook for it, and the marketing person can't do that. [00:04:54] Certainly marketing person won't be able to add new columns, decide that this is better shown in three columns versus two column mode or show a button or add additional text. None of that stuff is really possible in traditional content management systems. So, this is where the visual part comes in. So Builder.io is fully visual, right? [00:05:13] Drag and drop. You can add it, whatever you want in the page. And the last bit is headless, meaning that it's running on the customer's infrastructure and we don't host the website. If you are, if we are hosted CMS, then it's relatively easy to make a drag and drop editor. [00:05:28] But because we don't host it, it's not on our infrastructure. It's actually quite a head-scratcher. And the way we do this, which I think is pretty cool, is, we have this open source technology called Mitosis, which allows us to give one input to Mitosis and it can produced any output in terms of like, whether you use Angular, React, Vue, Svelte, Solid, it doesn't matter what you use on the backend. [00:05:50] We will generate a component for you. And because we're generating an actual component, it drops into the customer's backend infrastructure, right. And everything just works there. Server-side rendering works. Everything that, that the customer might have on a backend, it just worked because it's a full-on regular component, whether it's Angular, React, or whatever the company might use. [00:06:13] So that's the unique bit that nobody knows how to do. And it's also the bit that attracted me to Builder.io and joining them. And the reason for that is because it is really easy for them to create new technology. So one of the things we're going to talk about later is this thing called Qwik. [00:06:30] What's super easy with Builder.io is that they can easily produce new output. So if you have a customer that already has their content, let's say on react or Angular, and they decided they want to move over to something different, like Qwik, and I will talk about why that might be a reason, it is super easy because with a push of a button, because we generate the content, we can generate the components in a different framework. [00:06:55] swyx: Got it. It's interesting. Have you seen Tailwind?  [00:06:57] Misko Hevery: So Tailwind is more of a CSS framework with my understanding is correct for  [00:07:01] swyx: building, but they had to build something for doing this essentially like having different outputs, uh, we have one central template format that outputs all these different  [00:07:11] Misko Hevery: things.  [00:07:12] So this is what Mitosis would do. Right. But Mitosis can do this across all of them, not just Vue and React, right? Every single one. Like, I don't even know what the list is, but there's a huge list of possible outputs that uh, Mitosis  [00:07:25] swyx: can do. Yeah. You have, Liquid and JSON.  [00:07:30] Misko Hevery: There's more, I mean, this for ones that you see over here. [00:07:33] Yeah. You can see pretty much everything's analyst here. We can import from Figma, given some constraints. Cause it's not a one-to-one thing kind of a thing, but we can import from Figma. So the idea is that people can design their site in Figma provided that they follow a certain set of guidelines. [00:07:49] We can actually import them and to turn it into HTML and then serve it up, whether it's React or whatever. One of the things is that's actually important. For example, for us is Liquid, right? Liquid is a templating system on Shopify. But it's a server side templating system and it cannot be done on the client side. [00:08:05] So if you pre-render on Liquid, how do you get a component to bind to it on the client? Because you would need to have the same component. Right? One of the things we can do is we can present it on a liquid and then produce an, a equivalent react component on the client and they automatically bind to it on a client. [00:08:21] Right. So we can do these kinds of tricks which are normally quite difficult.  [00:08:25] swyx: So you went from building one framework to building all the frameworks.  [00:08:29] Misko Hevery: You can think of it that way.  [00:08:31] PartyTown  [00:08:31] Misko Hevery: But my real thing, the real passion is that I want to get all sides to be 100/100. Yeah. Okay. Uh, on mobile, not on this stop, you know, a lot of people claim on desktop that they can do 100 out of a hundred mobile, that's the bar. [00:08:46] So I want to figure out how to do this. And in order to do that, you really have to get super, super good at rendering these things. And it turns out that if you just make a blank page and blank, white page with nothing on it, and you add a Google tag manager, that alone puts you essentially on the cusp of a hundred, out of a hundred on mobile. [00:09:08] So that alone, that, that act alone, right, he's kind of uses up all your time that you have for rendering. And so the question becomes like, how do we make this as fast as possible? So you can get a hundred out of a hundred on mobile. And it's very little processing time that you get to have and still get to have a hundred. [00:09:25] And so we do two things. One is be introducing a new framework called Qwik. little later. But the other thing we're talking about is introducing this thing called PartyTown okay. And I absolutely love PartyTown. So the person behind PartyTown is Adam Bradley, who you might know him from, making the Ionic framework.  [00:09:43] The guy is absolutely genius. And this is a perfect example of the cleverness of it. All right? So you have, something like a Google tag manager that you want to install on your website. And that thing alone is going to eat up all of your CPU time. So you really would like to put it on a WebWorker, but the problem is you can't because the WebWorker doesn't have DOM API. [00:10:02] It doesn't have a URL bar. It doesn't have just about everything that the Google tag manager wants to do. Right? Google tag manager wants to insert a tracking pixel on your screen. It wants to register a listener to the, to the, uh, URL changes. It wants to set up listeners for your mouse movements, for the clicks, all kinds of stuff. [00:10:21] So running it on a Web Worker becomes a problem. And so the clever bit of geniuses that Adam came up with is that, well, what you really want is you want to proxy the APIs on the main thread into the web worker thread, and you can proxy them through, you know, we have these, these objects called proxies. [00:10:39] The problem is that the code on a Web Worker expects everything to be synchronous. And our communication channel between the main thread and the web worker thread is async. And so the question becomes like, well, how do you solve this particular problem? And it turns out there is a solution to this problem. [00:10:56] And the solution is that you can make a XML HTTP request, which is synchronous, on a Web worker. And then you can intercept that the request using a service worker and then service worker can talk to the main thread. Figure out what exactly did you want to do? So for example, let's say you want to set up a, uh, you want to know the bounding rectangles of some div, the Web Worker thread can make that request, encode that request inside of a XML HTTP request, which goes to the service worker. Service worker calls the main thread, the main thread figures out what the rectangle boxes, and then sends the information back to the web worker thread, which then doesn't notice anything special. As far as it's concerned, it's just executing stuff, synchronously. It's like, you're laughing, right? Because this is hilarious. [00:11:41] Web Workers vs Service Workers vs Atomics  [00:11:41] swyx: So I'm one of those. Okay. You're, you're a little bit ahead of me now. I'm one of those people I've never used web workers or service workers. Right. Um, can we talk a little about, a little bit about the difference and like, are they supposed to be used like that? Like,  [00:11:54] Misko Hevery: uh, so we did these two because they are supported under the most browsers. [00:11:59] There's a different way of making synchronous call and that is through something called Atomics, but Atomics is not available on all browsers yet.  [00:12:07] So web worker is basically just another thread that you have in the browser. [00:12:12] However, that thread doesn't have access to the DOM. So all DOM APIs are kind of gone from there. So you can do a lot of CPU intensive things over there, but, , with limited abilities and this is what PartyTown solves is it proxies all of the API from the main thread into the Web Worker thread. Yeah.  [00:12:32] Now service worker is kind of a safe thing, but the difference is that a service worker can watch HTTP requests go by and it can intercept them. And so think of it as almost like a mini web server in your browser. And so what the service worker does over here is intercepts the request that the web worker makes, because that's the only way we know how to make it blocking call. [00:12:56] swyx: Uh, this is the one that we use for caching and Create React App and stuff like that. [00:13:00] Misko Hevery: Yeah. And then, because we can make a blocking call out of a web worker, the service worker who can use the blockiness of it to make an asynchronous call to the main thread and get all the information that you need.  [00:13:12] swyx: that's pretty smart. Is there any relation to, uh, I know that I think either Jason Miller or Surma did a worker library that was supposed to make it easier to integrate, um, are you aware of, I think  [00:13:25] Misko Hevery: all of these worker rivalries are in heart they're asynchronous, right. And that's what prevents us from using it, right. [00:13:31] Because the code as written assumes full asynchronicity, and that is the bit that's. Different. Right. That's the thing that allows us to take code as is, and just execute it in a, Web Worker. And so by doing that, we can take all of these expensive APIs, whether it's, Google tag manager, Analytics, Service Hub, I think that mispronouncing it, I think, all of these libraries can now go to the main thread and they have zero impact on your Google page speed score. And we actually talked to Chrome and we said like, Hey, we can do this. Do you think this is cheating? Right? Like, do you think that somehow we're just gaming the system and the message was no, no, because this actually makes the experience better for the user, right? [00:14:17] Like the user will come to the website. And because now the main thread is the thing that is running faster and none of this stuff is blocking. You actually have a better experience for the user. The other thing we can do is we can actually throttle how fast the Web Worker will run because when the Web Worker makes a request back to the main thread to say, like, I want the bounding box, or I'm going to set up a tracking pixel or anything like that, we don't have to process it immediately. [00:14:43] We can just say, well, process this at the next idle time. And so the end result is that you get a really high priority for the main thread and then the analytics loads when there's nothing else to do. Which is exactly what you want, right? You want these secondary things to load at a low priority and only be done when there's nothing else to do on the main thread. [00:15:02] PartyTown Demo  [00:15:02] swyx: That's amazing. Okay. All right. We have some demos here if we want to  [00:15:05] Misko Hevery: So if you, let's pick out the simple one, the element, right. And what you see in the console log is this is just a simple test, which performs, uh, synchronous operations. But what you see on the console log is that all of these operations are intercepted by the service worker. [00:15:22] Right. And we can see what particular API on the web worker is trying to do and what the result is, what the return code is, you know, how do we respond and so on and so forth. And so through this,you can kind of observe what your third party code does. By the way. The nice thing about this is also that, because you can observe, you can see is ECP. [00:15:43] If you're a third-party code, because we essentially trust them, right. Fully trust this third party code on your website and who knows what this third party code is doing. Right? So with this, you can see it and you can sandbox it and you can, for example, say like, yeah, I know you're trying to read the cookie, but I'm not going to let you, I'm just going to return an empty cookie because I don't think it's your business to do that. [00:16:04] You know, or any of those things we can do. So you can create a security sandbox around your third party code. That is kind of, as of right now is just implicitly trusted and you can, you have a better control over it.  [00:16:18] swyx: I could filter for it, I'm basically, I need HTTP calls and then I need any cookies. [00:16:23] Right. So,  [00:16:25] Misko Hevery: yeah. So in this case, there will be nothing because this is just showing off element API, but I think you go to previous page  [00:16:33] swyx: Before we go there. is there anything significant and? It says startup 254 milliseconds?  [00:16:38] Misko Hevery: Yeah. So the thing to understand is that it is slower, right? We are making the Google tag manager slower to start up. [00:16:46] Right. So it's definitely not going to be as fast as if it was on a main thread, but it's a, trade-off, we're doing intention. To say like, Hey, we want to give the CPU time to a user so that the user has a better experience rather than eagerly try to load analytics at the very, very beginning and then ruining it for the user. [00:17:04] So while in theory, you could run a react application and the web worker, I wouldn't be recommended because it will be running significantly slower. Okay. Um, because you know, all of these HTP requests, all these calls across the boundary, uh, would slow down. So it is a trade-off.  [00:17:23] swyx: So this is really for the kind of people who are working on, sites that are, have a lot of third-party scripts for,  [00:17:30] Misko Hevery: well, all the sides have third party scripts, right? [00:17:32] Like any kind of a site will have some kind of third-party whether it's analytics ads or just something that keeps track of what kind of exceptions happen on the client and send them back to the server, right. Standard standard things that people have on a website. And instead of the standard things that are making, preventing you from getting a hundred out of a hundred on your score. [00:17:52] Right. Okay, amazing. So this is a way of unloading stuff from the main thread Got  [00:17:58] swyx: What's the API? I haven't seen the actual code that, Party Town. Okay. There's a, there's a adapter thingy and then  [00:18:05] Misko Hevery: you stick it. So we, those are just for react components. There is also vanilla. Just go a little over. [00:18:14] So do   [00:18:16] swyx: you see how we have to prioritize, React above Vanilla? [00:18:20] Misko Hevery: Even lower? This just shows you how you get the PartyTown going. Oh, here we go. Text to pay. We go right there. [00:18:25] You're looking at it right there. So notice what. We asked you to take your third party script, which, you know, if you go to Google on an exit, it tells you like, oh, take this script tag and just drop it inside of your head. Right. Or something like that. So what we do is we say like, do the same exact thing, except change the type to text/partytown. [00:18:43] And that basically tells the browser don't execute it. Instead, PartyTown will come later, read the stuff, ship it over to the web worker and then do it over there.  [00:18:54] swyx: So the only API is you, you just change this, that's it? Yes. Yes.  [00:18:58] Misko Hevery: So you drop a party down script into, uh, into, which is about six kilobytes. And then you go to all of the third-party places and just add, type text/partytown, and that ships them off to the other place. [00:19:10] swyx: So, um, it feels like Chrome should just build this in like script, script type third party. Right. And then just do it.  [00:19:20] Misko Hevery: Yeah. I mean, we're having chats with them. You never know. Maybe if this shows up to be very useful technique. It might be something that Chrome could consider. Well, certainly we need a better way of making synchronous calls from the web worker thread to the main thread, not from the main ones of the web, right. [00:19:37] That's clearly a bad idea, but from the web worker, the main, it would be really nice to have a proper way of doing synchronous calls.  [00:19:44] Atomics  [00:19:44] Misko Hevery: Atomics might be the answer. And so it might be just as simple as getting all the browsers to adopt Atomics because the standard already exists.  [00:19:51] swyx: And I see what, what is this thing I've never heard of it? [00:19:55] Misko Hevery: Atomics is basically a shared memory array buffer between two threads and you can do, atomic operations like locking and incrementing and things of that sort on it. And they can be done in a blocking way. So you can, for example, say, increment this to one and wait until whatever result is three or something like that. [00:20:14] So then you're giving a chance for the other thread to do its work. I  [00:20:18] swyx: mean, this is like, so I'm writing assembly, like,  [00:20:22] Misko Hevery: It's not assembly it's more, you know, semaphore synchronization.  [00:20:26] swyx: Um, okay. Yeah. I see the, I see the locks and stuff, but this is, I can't just like throw in a third party script here. [00:20:33] Misko Hevery: No, no, no. This is something that the PartyTown would use to get synchronous messaging across. Right. Because currently it is kind of a hack that we create an XML HTTP request that is blocking that stuff with a service worker. Like this is craziness, right. So Atomics would definitely be a nicer way to do this. [00:20:51] swyx: I think the goal is definitely very worthwhile that the underlying, how you do it is a bit ugly, but who cares?  [00:20:57] Misko Hevery: Yeah. So the goal is very simple, right? The goal is, for us, we think we can have the best CMS, if we can produce websites that are a hundred out of a hundred on mobile, right? [00:21:07] That's the goal. And if you look at the current state of the world, and if you go to e-commerce websites, it's pretty dismal. Like everybody gets like 20 something on their scores for their sites, right? Even Amazon that has all the resources to spend, will only get 60 out of a hundred on their score. [00:21:24] Even Google website themselves gets it only about 70, out of a hundred. Right? So the state of the world is not very good. And I feel like we are in this cold war in a sense that like everybody's website is equally bad, so nobody cares. Right. But I'm hoping that if you can build a couple of websites that are just amazingly fast, then the world's going to be like, well, now I have to care. [00:21:46] Qwik and Resumable vs Replayable Frameworks  [00:21:46] Misko Hevery: Right? Because now it is different. And so now we're getting into the discussion of Qwik. So what is clicking and why do we need this? So, um, the basic idea behind Qwik, or rather than, let me back up a second of why existing websites are slow.  [00:22:04] And so there's two reasons, right? One is third party scripts, and we just discussed how we can solve this through PartyTown right? I mean, we can move all of their party scripts off.  [00:22:12] However, even if you move all the third party scripts off, your problem is still going to be that, uh, the startup time of your website is going to be pretty slow. And the reason for that is because all websites ship everything twice. First it's a server side rendered HTML, right. [00:22:30] And the page comes up quickly and then it's static. So we need to register listeners. Well, how do we adjust your listeners? Well, we download the whole site again, this time they came to in a form of TypeScript or JavaScript, and then we execute the whole site again, which is by the way, the server just did that. [00:22:49] Right? Yup. Yup. And then we know where to put up listeners and, that causes, you know, this is a perfect graphic for it, right. That causes double loading of everything. So we, we download everything once as HTML and then we load everything again, as JavaScript and then the execute the whole thing again. [00:23:07] So really we're doing everything twice. So what I'm saying is that the current set of framework are replayable, meaning that in order for them to have the bootstrap on the client, they have to replay everything that the server, literally just did, not even a second ago. And so Qwik is different in a sense, because it is resumable. [00:23:27] The big difference with Qwik is that the Qwik can send HTML across, and that's all. That's all it needs to send across. There's a little tiny bootstrapper, which is about one kilobyte and about one millisecond run, which just sets up a global listener and alert for the system. And no other code needs to be downloaded and it can resume exactly where the server left off. [00:23:48] So you need to have some formal way of serializing, the state, getting the state to the client, having a way of deserializing the state. More importantly, there's an importance to be able to render components independently from each other, right? And this is a problem with a lot of frameworks, which is - even if you could delay the startup time of a, uh, of an application, the moment you click on something react has to rerender the whole world right now, not rerender, that might be the wrong term, but it has to re execute its diffing algorithm from the root, right. It has to build up the vDOM. It has to reconcile the vDOM, has to do all these things, starting at the root. [00:24:26] There's no real way to not make it from the root. And so that means that it has to download all the code. And so the big thing about Qwik is, how can we have individual components be woken up individually from each other in any order? Right? I mean, people tend to talk about this in form of micro components or microservices on the client, right? [00:24:46] This is what we want, but at like the ultimate scale, where every component can act independently from everybody else.  [00:24:54] swyx: Yeah. Yeah. I think, we should talk a little bit about that because basically every single component is its own module and separately downloaded. So you're really using the multiplexing or whatever you call it of HTTP/2, right? [00:25:05] Like you can parallelize all those downloading. Right. The main joke I made, because I saw this opportunity and I was like, immediately, like, I know this will be the most controversial part, which is essentially. Uh, the way you serialize is you put everything in HTML, right? Like, like that. [00:25:23] So, so I, I immediately feel that, and it will stir up some controversy, but like also, like, I think the, the interesting, I mean, we should talk a bit about this. Like, obviously this is not handwritten by, by, by people. So people should not be that worried. Um, but also like there are some legitimate concerns, right. [00:25:40] Qwik vs React - the curse of Closures  [00:25:40] swyx: About how I think basically Dan Abramov was, was also the, the, you, you responded to Dan. Um, so Dan said something like this, okay. So it wasn't a direct response to Qwik but Qwik serializes all state in HTML, and that's something that we considered for React Suspense. And he says, basically the question was, have you considered allowing server components to have serializable state using equivalent? [00:26:03] it's been proposed somewhere earlier. This doesn't work generally state is in reaction arbitrary. Payloads would get huge essentially, like, "does it scale?" Is the question. Uh, and he said that this was done before and I went and looked it up and he was like, yeah. And it's actually what we used to do for ASP .NET WebForms. Right.  [00:26:18] Misko Hevery: So if you will look at react the way to React does things. And so I want to pull this up on one of the dev, uh, dogs. I actually talk about it and it might be useful to kind of pull it out. Yeah, the one you are on right now, the answer adoptable fine-grained lazy loaded. The point is that if you have a react component, react components take heavily, closures, right? Closure is the bread and butter of react components and they rely on closures everywhere and it's beautiful. I it's absolutely nice. I really like the mental model. However, it doesn't serialize, right? [00:26:50] You can't take a closure and serialize it into HTML. So what Qwik is trying to do is it's trying to break this up into individual functions. Clearly functions cannot be serialized, but functions can get a URL , a globally known URL, uh, which can load this. So if you scroll a little lower, you will see a, uh, Qwik component , and the difference is, in a Qwik component, we'll have these declaration template, which is which points to a location to where this particular thing can be loaded, if you scroll even further, it talks about how this particular thing can be served up in pieces to the client, if you do this thing. Right. So while it's maybe true that like, oh, it's been tried before and we didn't do it right. [00:27:32] Qwik Demo  [00:27:32] Misko Hevery: Have people really tried to solve every single one of these problems. Right. And there's a huge myriad of them that Qwik is trying to solve and kind of get over. And so maybe I can show it to you as a demo of what I kind of have a to-do app working. So let's let me, let's talk about this. [00:27:50] One of the things. So by the way, the screenshot you have on your Twitter account, that is the old version of Qwik, I've been chatting with you and bunch of other people at the conference, I really got inspired by lots of cool things. And this is a kind of a new version I'm working on, which has many of the issues fixed up and improved. So the thing I'm going to show you is standard todo example, right? I mean, you've seen this millions of times before. [00:28:15] swyx: By the way. I did not know that, uh, I think Addy Osmani made this original to do yes, he did. He did. And it's like the classic example. That was a classic example,  [00:28:24] Misko Hevery: right?  [00:28:27] So remember the goal for us is to serialize everything and send to the client in a form that the client can resume where the silver left off. Right. And then everything can be downloaded in pieces. So there's a lot of things to talk about. So let's start with, with how this works first, and then we can talk about how different pieces actually fit together. [00:28:46] So, you know, first thing you need to do, is, standard, define your interface for an item and define your interface for Todos, which is the collection of items, which contains , number of items completed in the current filter state, and just a list of items like so far, nothing. [00:29:02] Now the special thing comes in that when you declaring a object that you want to serialize, you will run it through this special function called Q object. And it's a marker function and does a couple of things to an object. But you're just basically passing all the stuff in and notice the individual items on Q objects as well. [00:29:20] The reason I did it this way is because I want to serialize individual line items separately, because I know that I'm going to be passing the individual items into separate components individually. Right? So what this basically says to the system is like, there is a top level object. Which is this guy right here and it can have rich state, but remember it has to be JSON serializable. [00:29:43] Therefore it cannot have cyclical things inside of it. It has to be a tree, but inside of it, it can have other objects and those can form cyclical things. So using the combination of those two, you can actually get cyclical graphs going inside of your application. But individually, each Q objects doesn't have that. [00:30:02] So that's a bit of a magic. If I scroll over to the actual running application, what you will notice is these Q objects get serialized like right here. So for example, this one has some ID and you notice it says completed zero and the inside of it has individual items. And notice these items are actually IDs to other locations. [00:30:22] So this ID ending in Zab is actually pointing to this object right here, which has other things. So the whole thing gets serialized. And unlike the demo I showed in Zadar, I have moved all the serialized content at the end, because I don't want to slow down the rendering of the top part. And so if you go, let's go back to our application. [00:30:41] So if you have Todo app, the Todo app is declared in a slightly more verbose way than the way the one would be declared in React. But if we do it this way, then we can serialize the closures, right? The closures don't have the issue with non serialized. By the way, the regular React way of doing things still works here and you can do that is just, they become permanently bound to their parents. [00:31:05] They cannot be lazy loaded. So you can think of it as having two mental models here. You can have lightweight components, which are essentially the same as react components, or you could have Q components, which are slightly more heavyweight, but they get the benefit of having the whole thing, be composable and get lazy a little bit so on and so forth. [00:31:24] So in this particular case, we're saying that there is a Todo app component and the QRL is this magical marker function that tells the system that this content here needs to be lazy. Or rather let me phrase it differently, it says the content here can be lazy loaded. The beauty of Qwik is that it allows you to put a lazy load of boundaries all throughout the system. [00:31:48] And then an optimization phase later decides whether or not we should take advantage of these lazy loaded motor boundaries, right in normal world, the developer has to put dynamic imports and that imports that asynchronous and a pain in the butt to work with, it's not simple. Right? So instead, what Qwik wants to do is say like, no, let's put dynamic imports everywhere, but do it in a way where the developer doesn't have to worry about it and then let the tooling figure out later whether or not we should actually have a dynamic import at this location or not. [00:32:18] Yeah. So even though this file, this there's two applications is in a single file in the tooling. We'll be able to break this file up into lots of small files and then decide in which order the things should be shipped to the client in order to get the best experience. You know, if there's a piece of code that never runs in the client will then put it at the bottom of the, of the chunks, right? [00:32:38] If there's a piece of code that is going to be most likely, you're going to click on it and put it up to the top. So, anyway, so that's kind of a diatribe here with a little bit of an off the rails here, but what this produces is a to-do and it turns the code, right? This QRL function, it says on render, it gets turned into a URL. [00:32:58] And this is what allows the build system to rearrange the code. And so this URL basically says, if you determine that Todo needs to be re re rendered, uh, then you can go download this piece of code. And that will tell you how do we render the Todo, right.  [00:33:14] You know, you're using a header and we're using main, notice we're binding Todos in there. So it looks like a regular binding, but the system has to do more work. So in this particular case, the main has to see if it has Todos, it has to refer to a object. So notice this, this ID here matches the ID here. And this is basically how the system knows that this component here, because if you look over here, the main and foot are, both of them want to know that you do this right? [00:33:42] So both of these components need to have the same object. And so, yeah, exactly. So this main here, as well as the footer, they both have a same ID passed in here. And that's how the system knows like, all right, if I wake you up, I have to make sure to provide you with the same exact ID. Now, not only that there is also this particular thing, which is just a copy of it, but, but in this particular. [00:34:08] What it does is, is the list, all of the objects that could potentially affect the state of this component. And when you go and you modify one of these, state objects, the state, these objects actually keep track of each other and they know which components need to be woken up and affected. So I think there's an example of it somewhere here later, uh, like right here, right in here, it says, Hey, if you, uh, you know, do a key up on the input right here, if I type here over here, something, then the key up runs and then eat, enter runs, you know, add a new item, which is just the function that the function right here, which just pushes an item and new item into the list. [00:34:54] And it sets my current state to text me. And so the system knows that in this political case, in a header, this input right here, Has its own state right here. So let me refresh this again. Um, this header has its own state one eight, whatever, right? Which if you look over here is right here. It's text blank, right? [00:35:16] So we find typing here. I'm going to change the state over here. And then if I set the state to blank, then the system knows, oh, that's object 1 8, 7 1, or whatever. I can run a query. I can run document DOM, querySelectorAll. And I can say, give me, uh, all the queue objects, remember how the selector for this start something like this. [00:35:44] Anyways, there's a way to run a selector that will allow me to whatever, whatever the code is, right? I'll run the selector and this selector will then return this header back to me saying this is the object or rather, this is the component that is, has interests registered into this object, which means. [00:36:04] Because I've selected this thing. I have to find the Q render message and send the Q render message to download its template and we render the object. And so what this allows you to do is have a completely distributed set of components that can be awoken only when a relative, you know, appropriate data is changed rather than having this world of like, well, the state has changed and I don't know who has a reference to what? [00:36:30] So the only thing I can do is we learn that the whole page. Well, that's kind of a, it doesn't help you, right? Cause if you run the, the whole page, then there's the whole, the code has to come in here. Right. So that's not helpful. We want to make sure that we only download the code is actually needed. And so you need to have some mechanism by which, you know, like if I change this piece of code, if I change this object, which component needs to be awoken, right. [00:36:54] And normally like if you have Svelte, Svelte does through subscription, this particular trick, the problem is subscriptions cannot be serialized into the DOM. And so we need a mechanism where the subscription information is actually DOM serializable, right? And this is what the Q object is, or the subscriptions that the individual components have to undo to other things. [00:37:18] And so the other thing I kinda want to point out is that we can then bind a complex object. Like in this case, it's a complicated state that'd be assigned to reduce yet. It turned into a binding that's serializable into the bottom, right? So if I go back here, see I'm jumping around. So we have our footer. [00:37:38] If we have our main, the main is declared over here, you know, standard, uh, JSX in here where you, you want to iterate over a bunch of items. There's a host. Okay. So one of the things we need to do is, um, in react, when you have a component, the component is essentially hostless, or I would say it's life component in the sense that it doesn't have a parent, right. [00:38:02] Uh, and that is wonderful in many, many situations, but sometimes it isn't. The problem we have is that we need to have a component. We need to have a DOM element for each component that can be queried using querySelectorAll so that we can determine if there is a listener on it, or if there is a subscription on a particular object or a single back. [00:38:24] So we have this concept of a host element, and this is one way in which the Qwik Q component is more heavyweight than the react component. You can still use react components if you want, you just don't get the benefits we talked about. And, and so a host element is, is a way of referring to the, the host element and adding an attribute to it. [00:38:47] Right. And saying like, oh, I want the host, I'm going to have a classmate. And so if you go into, let's see Maine, uh, right. So it's supposed to be a classmate, right. So it's the component that, that adamant. So normally, uh, the way you do this normally in react is that the main would be a object that the JSX of the re. [00:39:07] The child react component, right? In this particular case for a variety of reasons, we need to eagerly create this particular thing. So then it's a placeholder for other things to go in. And so we need to do an eagerly and then we need a way of like referring to it. So that's what host is, sorry for the, uh, diatribe anyways, but this is how you create your items, right? [00:39:31] And notice the way you got your items is you just got it from your prompts and you can iterate over them. Right? You can reiterate and run the map and produce individual items. And for each item you will pass. And the key. So if you look at the item here, it's prompt says like, I am going to get an item in here. [00:39:50] And my internal state is whether an I am not, I am an editable state. So these are you, basically your props. And this is the components state in here. And, uh, you know, on mound, we create a component states that we're not, we're not an editable state. And then when the rendering runs, uh, it has both the information about the item as well as about whether or not you are currently editing. [00:40:13] Uh, and if you look at the UL, so here's our, one of our items that got generated, notice that the item that passed in as a ID here, right? So if you go to the script at the bottom and see this one ends in PT six, so we should be able to find, here we go, this is what actually is being passed in to that particular component. [00:40:34] But notice there's a second object. Not only is there a, um, a PT six objects, there's also the secondary option. That's the state of the components. So if the state of the component, we're basically saying here is like, if this object changes or this object changes, I want to know about it and I need to be. [00:40:52] So these objects form a graph, right? The presents, the state of your system. And then the Qwik provides a mechanism to serialize all this information into the DOM in such a way that we know which component is to be woken at what time. So if I start typing in one of the things you're going to see is that on the first interaction, this script that will disappear, because what actually happens is that when you interact with the system, it says like "I need to rehydrate myself". Right? And so it goes to the script tag and, uh, reads it. Let me give it back over here, read it leads to the script tag and figures out. You know, these utilizes all these objects because takes this object, puts them inside of this object to build up the graph and then goes back into the DOM tree and say like, okay, so I need to put this one over here. [00:41:40] I need to put this one over here, this one over here and so on and so forth and puts all these objects back. What are they supposed to be? And now you are, your state is back in a, in these components, but the components aren't present yet. They're not awoken, right? Because none of their, uh, Mount or their render functions actually got called. [00:41:59] And because the functions didn't get called, uh, the code didn't have to get downloaded. So everything is super lazy. Right. So when I go and I hit a key over here, the state gets de-centralized, but the only piece of code that gets downloaded is right. It is, it is right. This thing right here. [00:42:18] Nothing else.  [00:42:19] swyx: Can we show that the network actually, ah,  [00:42:22] Misko Hevery: I would love to, but that part is mocked out right now in the old demo, in the demo that I have, that I did for the conference, that one actually had it properly working. But the feedback was that the D as a developer, there was a lot of things I had to do. [00:42:40] Qwik Compiler Optimizations  [00:42:40] Misko Hevery: And so I wanted to simplify it. So one of the things I did is I figured out a way, or rather I spoke with Adam, uh, the same Adam that did PartyTown. And we figured out how to make it, make the tooling smarter so that the developer doesn't have to do this. So what actually happens is that when you have the QRO over here, what actually happens is you, the, the code automatically gets refactored. [00:43:06] And you will get a new function with factor like this. The system will put an expert on it. And what gets placed in this location is a string that says something like, you know, ABC. Uh, hash you local, right. Or something like that. Right? So by doing this transformation and that piece of code is not working in this transformation, um, the, uh, the system can then, uh, lazy load, just the spirit physical code, nothing else. [00:43:39] But in order to do this transformation, we have to make sure that this code here doesn't have any closures. Right? I cannot, it cannot close over something and keep that variable because if it does the whole thing doesn't work. And so the nice thing is that we can still write it in a natural form, but one of the constraints here here is that you can't close over any variables. [00:44:01] Now there's no variables to close over them. The system is designed in such a way that it doesn't need it. Instead of things like props and state are explicitly passed into you, as well as to the thing of the child, whether they're halo as well. So you don't have a needs to create these kinds of closures, but it is a constraint. [00:44:19] And this is what allows the optimizer to go in and rearrange your code base in a way where we can then determine what things are used. So, so in this particular case, we can, for example, determined that you're likely to go and interact with the input box, but you are very unlikely to actually call this on render, because this is the kind of the Chrome, the shell of the application, and wants to show them the applications loaded you will never, ever interacted. [00:44:46] Right? So what you can do is you can take all these imports and you can sort them not alphabetically. You can sort them by the probability of usage. And then once you haven't sorted by the probability of usage, you can tell the optimizer like, okay, take the first N ones so that I have a chunk that's about 20 kilobytes because we think 20 kilobyte chunks. [00:45:08] And then the system can be like, okay, let me add a whole bunch of them until I have 20 kilobytes. Let me add a nice chunk, then underline about 20 clubs. And I kind of do these chunking all the way on the end. And then the last chunk we'll probably end up with a bunch of stuff that never ever gets loaded. [00:45:22] Right. But the problem is the current way we design applications. You can't do that. You just can't right. And so we have this mentality of like, we have frameworks that have amazing developer experience, but they set up the overall experience down the path of monolithic code base and any kind of, um, lazy loading that the Builder can add after the fact. [00:45:50] It's just like kind of a kloogey workaround. Right? And that's the thing that the Qwik solves it says like, no, no, no, let me help you design an application that has still nice developer experience, but let me structure things in a way so that I can later rearrange things, right? Let me keep you on this guide rails of like, make sure you do it in these ways. [00:46:12] And so everything is in the quickest set up in a way where it keeps you in this guide rails. And the result is, is a piece of code that the optimizer, then the Qwik can rearrange, right? It can go and pull out this function. It can pull out this function. It can pull out all of these functions and turn them into a top level functions that are exportable. [00:46:31] And it can then, um, tree shake the stuff that's not needed and produce chunks that can then be lazy loaded into your application.  [00:46:41] swyx: Like four or five years ago, I think there was some, uh, I think even at the Chrome dev summit or something like that, there was a effort to use Guess.js to basically use Google analytics, to optimize all this, intelligent pre-loading or loading predictions. [00:46:58] Um, is that how I think I missed the part about how, like, how you pull in the statistics for, for optimizing.  [00:47:05] Misko Hevery: So the first thing to talk about, I think is important to understand is that unless you can take your application and break it up into lots and lots and lots of chunks, I do that. Yeah. There's nothing to talk about. [00:47:15] Right? If your application is one big chunk, there's nothing to talk about. You would have to load the chunk end of discussion.  [00:47:21] swyx: Well, so the chunk goes page level, and now you're doing component level, right? So they were, they were saying we split it by page and we can predict the next page. So,  [00:47:30] Misko Hevery: so look at Amazon, right? [00:47:34] Most of this stuff, you will, I mean, you can click on stuff and there's a menu system up here and let's pick a random component here. How do I, let me just go to something. Oh, come on. Just give me a detail view of something every day. Uh, you know, most things here never have to be rendered. Like, for example, there's a component here. [00:47:52] This component never, ever changes. Nothing here. We're render nothing. We'll run it there, here. Uh, yes, these are components and I can click on them and they update the UI over here. But if I'm interacting here, why am I downloading the menu system? Right. And so the point is, if you have a page like this, there is huge number of components in here, but most of them either never update, or in my current path of interaction, I just don't need to update them. Right. If I'm using the menu system, then I don't need to download this thing here. And if I'm interacting with my item then I don't need the menu system, and I'm not, unless they put something out to car, do I have to worry about my shopping cart? [00:48:33] Right? And, and this is the problem is that we currently bundle the whole thing up as one giant monolithic chunk. And yes, there are ways to break this out, but they are not easy. And everybody knows how to do route level break up. But like even on rough level, it's, it's not, it's not fine grain enough. [00:48:53] Right. And so the magic of Qwik is the magic of writing the code in this particular style. Is that for a typical size application, I can break up the application in literally thousands of chunks. Now that's too much. We've gone way too far. I do. These, these chunks are too small and we don't want that. [00:49:13] Right. But when I can break things up, it's easy for me to assemble bigger chunks out of it. But the opposite isn't true, right? If I have a big chunk and I want to break it, well, good luck. You know, no amount of tooling is going to do this. As a matter of fact, the best AI system we have, which is right here in our brains. [00:49:31] Right. Even if you give it to the developer and say, go break this thing up, it's a head-scratcher that takes like weeks of work. Right? And so we are in this upside down world of like build a humongous thing and then have this attitude of like, somehow tooling will solve it. Tooling can solve this problem. [00:49:52] Right. You have to do it the other way around. You have to design a system which breaks into thousands of little chunks. And then the tooling can say, yeah, but that's too much. It's too fine-grained. And let me glue things together and put them together into bigger chunks because. Through experience. We know that an optimal chunk size is about 20 kilobytes, right? [00:50:11] And so now the thing you want is to get a list, the order of which the chunks are used, and that's easy, right? If you're running your application, you can just keep statistics on what, how users interact with your application and that's that the sticks can be sent back to the server. And so once you can get back on a server is just a ordered list of the probability by which you're going to need individual chunks. [00:50:35] And that sort of lists that sorted list is all you need to tell the optimizer, like start at the top of the list, keep adding items until you get to a correct chunk size, they'll start a new job, right. And you keep doing this over and over. Okay. Now the reason I get excited about this, the reason I talk about it is because we completely ignored this problem. [00:50:57] Right. We, we have these amazing frameworks, whether it's Angular, React, Svelte or whatever that allow you to build these amazing sites. But on the end of the day, we all have horrible page speed scores, because we're not thinking about it from the correct way. And the attitude for the longest time has been, the tooling will solve it later. [00:51:18] And my argument here is no, the tooling will not solve it later. If you make a mess of this code base, there's nothing that tooling can do. Yeah.  [00:51:27] swyx: Um, there's so many directions. I could take that in. So first of all, uh, the React term for this is a sufficiently smart compiler, which has been in the docs for like four or five years. [00:51:36] Yeah. That's an exhibit,  [00:51:39] Misko Hevery: but that's my point. Like you cannot make a sufficiently smart compiler [00:51:43] swyx: so is, I mean, is there a compile step for this because of the QRL section.  [00:51:47] Misko Hevery: So right now it's actually running without compilation whatsoever. So one of the things I want to make sure that it runs both in a compiled and uncompiled state, and that's why it comes up with these bogus things like mock modules, et cetera. [00:52:01] Uh, and I think if you go to the network stab, it loads the mock module, and it just re-exports it. I can't really show you, but basically all of these things are kind of just in there. So currently this thing runs as a single monolithic application, but the, the way this thing would work is that as I pointed out everything, every place that you see QRL is a hint to the compiler to go and extract this. [00:52:26] The compiler, literally, we would just think. Ctrl+Shift+R extract here and then gives it a name which will be a header pull on a key up. Right. And then it repeats the same exact thing over here. So Ctrl+Shift+R extract. This is a header onMount. I mistyped it. It's okay. I get it right. And the same thing here, controls have to go Ctrl+Shift+R [00:53:00] Qwik Questions  [00:53:00] swyx: what if I need to do like conditional loading because the competitor doesn't know which branch I need to go down.  [00:53:09] Misko Hevery: So I'll answer the question in a second, did you want to point out, so notice what ends up here? The header is super, super lightweight. There's nothing in here. Cause these things, these two things will get converted into these URLs, right? Yeah. And because of that, this header is permanently bound to the onRender of the to-do app. [00:53:28] Right? If you load a to-do app you're also loading the header and of Main and a footer, but the thing we've done over here is we made this super lightweight, and this is what allows the lazy loading to happen.  [00:53:41] Now you're asking what about other components? Uh, easy. I mean, uh, if you want it to conditionally include the header, you know, standard stuff. [00:53:51] Uh, true. Right now the, the header itself will always be permanently bound into the, on render of the to-do app. Right. However, because we did the trick when we extracted everything out of it had already super, super lightweight. It doesn't contain anything. Right? So the only thing the header really contains if you go in here is the what to do on this URL was the only thing that's in there and also this vendor, right? [00:54:18] So these two URLs are the only thing that is contained inside of the header by itself. Okay. It's only when we decide to render the header, do we go into the header? And we say, okay, we're doing a rendering. So what's your URL. And we look at this URL right here, we download the code. And so now the rendering pipeline has to be a synchronous. [00:54:38] We download the code and then we go and execute the content. And we basically fill in the content the better now in the process, we also realize, oh, we also have to download this piece of code. And this is where statistics would come together. And we basically tell us that this URL and this URL always get downloaded together. [00:54:57] And therefore the optimizer will be smart enough to always put them together in the same file in the same chunk. And, uh, you know, we rented the content. Got it.  [00:55:09] swyx: Okay. So, uh, one small piece of, uh, API feedback slash questions. Uh, yeah, you have, the tag name is optional there. I guess that's a hint to what to store, right. [00:55:18] Misko Hevery: So right now it says to-do right here. If I have a  [00:55:22] swyx: out,   [00:55:24] Misko Hevery: it becomes, uh, just the div. Um, so the system doesn't care. What the thing is, it means eight element. Um, it could be any element they will do just fine. It's easier to kind of on the eyes if it actually says to do right. So that's the only reason for okay. [00:55:42] Got it.  [00:55:43] swyx: the bigger piece is okay. It's like a lot of HTTP requests. Every time I basically, like every time I make a request, every time I interact with the app, I essentially need to do a whole new handshake, a whole new network transfer. There's some baseline weight for that. [00:56:00] Right. Chunking links that helps, um, is there a preload essentially? Is there a less programmatically say like, okay. And by the way, uh, this is important for offline capable apps. So I like, let's say like, I'm going offline. Like it's five things. I know I don't need it right now, but like as an app developer and  [00:56:18] Misko Hevery: I know.  [00:56:19] Yes. So, uh, we can totally do that. Um, we, uh, there is a level worker that will be set up and the web worker will get a list of all the chunks in the woodwork who will try to go and download them and set up the caching for you, uh, in these chunks of time. So that Y when you interact, the only thing that the browser has to do is execute the code now, because these chunks are small, the execution code, if we don't, we're not worried about it, right. [00:56:46] In the case of like on typical framework, that's replaceable. The problem is that the first time you interact with this thing, you have this huge amount of code to download parts and execute. But this isn't the case here because every interaction really only brings in the code that's strictly necessary for this interaction. [00:57:04] So again, we go to like Amazon, right? If I hover over here over these things, and it changes the image on the right side, the only code that gets downloaded and executed is the code for this. Now it's already pre downloaded because their web worker would go and pre fetch it for you. So the only thing that the browser has to do is parse the code and execute the code for the on hover, a callback that goes and updates this components URL. [00:57:27] Right. That's it? No other code needs to be downloaded in a presence. Yep.  [00:57:31] swyx: Got it. anything else that we should cover real Qwik?  [00:57:35] Misko Hevery: I feel like I have talked your ear off and you have been such a good and gracious host. Uh, happy to answer questions. I don't want to overwhelm people, but I am super excited as you can talk. [00:57:46] I'm super excited about this. I think it's a fundamental shift about how you think about a framework. So like, if you look at all the existing frameworks, they're all arguing about, like, I have a better index, I can do this better or that better and et cetera. Right. But fundamentally they're not the same, like essentially the same buckets they can all do about the same thing Qwik. [00:58:05] I think it's a whole new ballgame because the Qwik thing is not about like, oh, I can render a component just like, you know, 50 other frameworks can do as well. The thing that Qwik has is I can do it. I can give you microservices for free. I can give you this micro component architecture for free and I can produce a bundling. I am the sufficiently advanced compiler. Okay. Let's put it this way. This thing that you thought you could have and solve for you, doesn't exist unless you have the current guidelines. Right? So the thing with Qwik is that it is the thing that allows you to have a sufficiently smart compiler to give you this amazing times to interactivity, right? [00:58:48] At the end of the day, is the, there's nothing faster than downloading HTML for your website. I mean, that's the cake, right? Yep. So the reason why Qwik is fast is not because Qwik is clever in the way it runs JavaScript or anything like that. So no Qwik as fast because they don't have to do anything. [00:59:04] Right. When you, when you come to a Qwik website, there is literally nothing to do, right. We're fast because we don't do anything. And that's  [00:59:13] swyx: your baseline is like a one kilobyte bike loader, right?  [00:59:16] Misko Hevery: One come on loader with all the loader, does it sets up a global list? Right. So let me, let me go back. Sorry, let me share one more thing. [00:59:22] So here's your input, right? So if you go to a header, here's the input, right? The reason we know how to do something on it is because we serialize this thing called on:keyup, and there is a URL, right? So when this thing is first executed, nothing is done. Like this content shows up and it said we're done. [00:59:41] And the only reason why we know to do something next is because when I do a key up here, the event, bubbl

We're talking about Image Optimization. What steps should we follow for performant images in 2021? Drew McLellan talks to expert Addy Osmani to find out.

Optimizing websites for a quality user experience is key to the long-term success of any site on the web and Core Web Vitals is an initiative Google has provided as a unified guidance for quality signals that are essential to delivering a great user experience on the web. Addy Osmani and Kristofer Baxter, from Google, join us to talk more about Core Web Vitals. Guests: Addy Osmani - @addyosmani Kristofer Baxter - @kristoferbaxter Panelists: Ryan Burgess - @burgessdryan Augustus Yuan - @augburto Stacy London - @stacylondoner Shirley Wu - @sxywu Picks: Addy Osmani - Hackers movie Soundtrack Addy Osmani - Web.dev Content Visibility Kristofer Baxter - ESBuild Kristofer Baxter - Outsmartly Kristofer Baxter - Soul Soundtrack Kristofer Baxter - AMP Project Ryan Burgess - Tell Us Your Secrets Ryan Burgess - Dave Augustus Yuan - Excalidraw Augustus Yuan - Web.dev Defining Core Web Vitals Stacy London - Gold by Glassjaw Stacy London - Clipper - Another 5 Years by Overmono Shirley Wu - Chinese knots earrings by _baomii

(November 14, 2018) Rick speaks with Addy and Katie from the Chrome team about predictive fetching, a web performance technique that takes the guesswork out of resource loading.  Resource Hints spec. → https://goo.gle/3e7vG11  Resource hints usage on HTTP Archive → https://goo.gle/2LM8LvO  Google Analytics Reporting API → https://goo.gle/2Tog0yy  Next Page Predictor → https://goo.gle/3cQwBlY  Guess.js → https://goo.gle/2zQRmj0

(October 18, 2018) Rick and Addy (Engineering Manager, Google Chrome) talk JavaScript, as it is today and how it's changed over the years. Code splitting → https://goo.gle/2zuO4Sv  Tree shaking → https://goo.gle/3fMc7wy  Webpack bundle analyzer → https://goo.gle/2WTJVPJ  Source map explorer → https://goo.gle/2yU1S8V  Managing third party JavaScript → https://goo.gle/2zyqdRT  Lazy loading → https://goo.gle/2T1lChJ  Performance budgets → https://goo.gle/3dDskCz

In this episode, I talk about the idea that frameworks are better for accessibility (and other framework myths). Links WebAIM’s audit of the top million websites: https://webaim.org/projects/million/ Addy Osmani’s “The Cost of JavaScript” article: https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4 DOMPurify: https://github.com/cure53/DOMPurify/ sanitizeHTML() helper function: https://gomakethings.com/preventing-cross-site-scripting-attacks-when-using-innerhtml-in-vanilla-javascript/

In this episode of Syntax, Scott and Wes talk about what’s new in web development: new promise static methods, new CSS functions, PWAs and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Clubhouse - Sponsor Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntaxpodcast and get your first two months free. Show Notes 5:38 - New Promise static methods Promise.all Promise.race() Promise.allSettled() Promise.any() 10:16 - Lazy loading images Addy Osmani’s Lazy-Loading blog post 14:25 CSS Houdini aka JS in CSS CSS Houdini Experiments 20:32 - Subgrid Syntax 109: Hasty Treat - CSS Grid Level 2 aka Subgrid Subgrid is coming to Firefox - Jen Simmons Bugzilla 24:31 - Native modules in browser type="module" dynamic import() 27:08 - Node Native Modules update package.json will now have a type entry where NodeJS - Plan For New Modules Implementation New ESM Implementation 29:17 - PWA install app and Google PlayStore Already shipped in Chrome Java API that communicates through services with Chrome Trusted Web Activity aka TWA All content in TWAs must comply with Play store policy including policies for payments in-app purchases and other digital goods Already existing TWAs include Twitter Lite, Google Maps Go, Instagram Lite Passing the PWA Criteria Performance Score with a minimum of 80/100, tested with Lighthouse All current Google Play Store rules 35:49 - CSS Scroll Snap In many browsers already scroll-padding 38:17 - Aspect Ratio Unit Designing An Aspect Ratio Unit For CSS 39:32 - CSS nesting Disallows cross-domain cookies unless on the same domain/subdomain Links Gatsby Promise.allSettled() Promise.any() Apollo CodePen UC Browser Parcel Node.js Myles Borins’ Twitter Twitter Lite Google Maps Go Instagram Lite Lighthouse Opera Can I Use - modules Apple’s ITP ××× SIIIIICK ××× PIIIICKS ××× Scott: Finding Drago Wes: The Punk Rock MBA Shameless Plugs Scott’s Gridsome Course Wes’ Courses Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Creating performant websites and applications continue to be more and more important. In this episode, we are joined by Addy Osmani to talk with us about web performance and some future web platform APIs that help improve performance. Guests: Addy Osmani - @addyosmani Panelists: Ryan Burgess - @burgessdryan Jem Young - @JemYoung Ryan Anklam - @bittersweetryan Mars Jullian - @marsjosephine Stacy London - @stacylondoner Picks: Addy Osmani - The Great British Baking Show Addy Osmani - Chrome User Experience Report Ryan Burgess - Addy’s Netflix Case study Ryan Burgess - PhotoPills Ryan Burgess - Final Table Jem Young - Yoshi App Jem Young - The Ballad of Buster Scruggs Ryan Anklam - All Systems Red Ryan Anklam - Android Call Screening Mars Jullian - Guides by Lonely Planet Stacy London - React Profiler Stacy London - Daydream by Shelf Nunny

Recording date: 2018-09-20 Tweet John Papa https://twitter.com/john_papa Ward Bell https://twitter.com/wardbell Dan Wahlin https://twitter.com/danwahlin (0:01:51) John reads the mailbag about browser support, service workers performance imapc,t and adding home screens to PWAs. (0:01:51) Mailbag https://twitter.com/RealTalkJS/status/1042572672025194496 (00:2:15) Maxim describes PWA support in the browsers (0:03:10) Ward points out that Addy Osmani https://twitter.com/addyosmani says: "It's important to remember that Progressive Web Apps work everywhere but are supercharged in modern browsers. Progressive enhancement is a backbone of the model." (0:03:42) Service worker support in "Can I Use" https://caniuse.com/#feat=serviceworkers (0:03:50) Maxim recommends using the PWA feature detector https://github.com/tomayac/pwa-feature-detector (0:04:10) Maxim answers John's question about how PWAs have changed over the past few years (0:05:45) Maxim answers what a PWA is and the value to developers and users (0:07:00) Ward asks "What problem does PWA solve?" (0:07:43) Dan asks what he benefits of PWA are to an enterprise business (0:08:50) Maxim points out how low wifi (LiFi) can be hard to deal with (0:09:22) What is a PWA https://developers.google.com/web/progressive-web-apps/ (0:09:30) Ward asks if a PWA magically knows if its offline or not (0:11:50) Maxim talks about LiFi as really low connectivity (0:13:20) John clarifies with Maxim that PWAs uses browser APIs to check their connectivity (0:14:00) Ward asks if he should use the raw service worker protocol (0:15:15) Dan and Ward asks Maxim what makes this easier (0:16:57) Maxim talks about the Workbox project https://developers.google.com/web/tools/workbox/ (0:18:15) John asks Maxim what else besides Service Workers, that is a part of PWAs (0:18:30) Maxim discusses web app manfiest https://developer.mozilla.org/en-US/docs/Web/Manifest (0:21:10) Maxim talks about Service Worker precache https://github.com/GoogleChromeLabs/sw-precache (0:22:22) Ward asks Maxim to tell a story about one of Maxim's successful experiences with PWAs (0:28:26) mobile era rocks PWA https://mobileera.rocks/ (0:28:46) Ward raises how conferences are notorious for low wifi (0:33:00) John asks Maxim when not to do a PWA (0:38:00) Ward, John and Maxim discuss security concerns with PWAs (0:44:30) Lighthouse tool for PWAs https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk (0:45:30) Maxim mentions the Web Hint tool for PWAs https://webhint.io/ (tip: npx hint https://example.com ) (0:46:50) Someone to follow: Nicholas Zakas https://twitter.com/slicknet https://humanwhocodes.com/ (0:47:38) Someone to follow: Simona Cotin https://twitter.com/simona_cotin?lang=en (0:48:10) Someone to follow: Arthur Stolyar https://twitter.com/nekrtemplar Additional Resources PWA Checklist https://developers.google.com/web/progressive-web-apps/checklist Curated list of PWA news by Maxim: https://twitter.com/progwebnews/ PWA Feature Detector https://tomayac.github.io/pwa-feature-detector/ Mobile Era PWA: https://mobileera.rocks/ Workbox: https://workboxjs.org Webhint: https://webhint.io PWA Get Started: https://developers.google.com/web/progressive-web-apps/ https://developer.microsoft.com/en-us/windows/pwa Excellent post on PWA: https://developers.google.com/web/updates/2015/12/getting-started-pwa

In this Hasty Treat, Scott and Wes talk about positivity in the web industry - how it can affect you, your work, and the people around you. NativeScript - Sponsor NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at nativescript.org/syntax. Show Notes The tech industry is always on the cutting edge and we’re starting to see a shift in how we deal with positivity and negativity. 3:18 - The effects of negativity and how the web industry is improving Mental health awareness is very real Stack overflow sees that it needs to change Linus Torvalds’ apology Negativity is a disease, and it spreads Positivity is a force as well You can be constructive while still being nice Dan Abramov, Addy Osmani, Sarah Drasner are all amazing examples of people pushing the web forward while having a smile on their face 11:50 - Healthy ways to approach disagreements Never assume malice Kill them with kindness Take note of the people you admire and how they deal with aggressiveness 17:08 - The power of positivity Inspire the change you want to see It’s good for your productivity - it makes you feel good Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

This week, we get down to the business of being a badass woman in tech with Sarah Drasner, an engineer, author, award-winning speaker, and renowned expert on web animation. We hear about mentorship, using your profile to help others be seen, building a body of work, and so much more. > For the first little while I was trying to pull myself up by my bootstraps and just, like, work really hard to kind of get some place where I felt more comfortable—where I was not just taking any job that was offered me. And then the second part of that is to extend whatever privilege I might have to others…to promote the work of other people that are doing great work in the community that might not be seen. > —Sarah Drasner We talk with Sarah about: What it’s like to write a technical book like SVG Animations, Sarah’s book from O’Reilly last year Using machine learning to make images on the web more accessible for blind people The benefits of diverse teams The badassery of Arlan Hamilton and her company, Backstage Capital How to get over feeling overlooked in your career (and the secret benefits of being underestimated) Mentoring others, finding mentorship for yourself, and getting comfortable in a senior role Why the number of women in technical roles isn’t going up How visibility can lead to harassment Also in this episode, the three of us get real about the pros and cons of showing your age at work, and discuss all the anxieties and double-standards we face when it comes to how we look and what we wear. Katel becomes an unofficial spokesperson for Billie Razors (call us, Billie! We can make it official anytime) Sara talks about Linguist Deborah Tannen’s 1993 essay, “There is No Unmarked Woman” Michelle Wolf isn’t apologizing for her comedy set at the White House Correspondents Dinner Sponsors This episode of NYG is brought to you by: Shopify, a leading global commerce platform that’s building a world-class team to define the future of entrepreneurship. Visit shopify.com/careers to see what they’re talking about. CodePen—write code like HTML, CSS, and JavaScript directly in a browser and see the results as you build. CodePen is giving away three free PRO accounts to NYG listeners. Enter at codepen.io/nyg. WordPress—the place to build your personal blog, business site, or anything else you want on the web. WordPress helps others find you, remember you, and connect with you. _ _ Transcript Sara Wachter-Boettcher [Ad spot] If you have a great idea, you can build a successful business with Shopify. They’re leveling the playing field for entrepreneurs, and they’re looking for passionate problem solvers from around the world to help them do it. See how you can join their world-class team, and learn so much more about their history, their culture, and where they’re going next. Visit shopify.com/careers [music fades in]. [0:29] Jenn Lukas [Music fades out] Welcome to No You Go, the show about being ambitious—and sticking together. I’m Jenn Lukas. Katel LeDû I’m Katel LeDû. SWB And I’m Sara Wachter-Boettcher. We are so excited today to talk to one of our favorite people working in tech and that’s Sarah Drasner. She is perhaps best known for working in web animation, she’s known for being a speaker, but today you’re going to find out why she’s also just super awesome. We’re going to talk to her about a lot of things but one of the things that came up in our conversation is kind of being more senior in tech, and sort of getting comfortable as a woman in a senior role in technology, and I think that’s where we’re going to get started in our conversation today. KL Yeah, speaking of that, I [exhales sharply] have to share something with both of you. The other day I was like taking a shower, shaving my legs, doing, you know, whatever, and I noticed that there was like a rogue couple of hairs that creeped away from my bikini line, and like onto my thigh and on my stomach. And then I also saw one on my boob, and I shaved it off because I didn’t know what else to do. And it just made me sort of spiral into this thing of thinking about how I’m getting older, I turned 40 last year, and in my head I’m like, “I just turned 40.” But in reality, I’m like about to turn 41. And it’s just, time is moving on—which is totally fine. But I think I just like can’t help thinking about it a little bit more and I think that happens. Do you remember, either of you, when I declared I was going to just go grey and say, “Fuck it,” and I just be a greyed hair—grey-haired person. SWB I mean I remember [KL chuckles] and I thought that was a great idea. KL And then approximately five point nine weeks later I was like, “Never mind. I can’t do it.” SWB Ok and then I also thought that was a great idea. KL [Laughs] Well I’m very lucky to have supportive friends but I go back and forth between feeling like whatever, it’s fine. I’m going with it. I’m going, you know, gracefully and then I think I realize things are changing, and then I feel like I have to cope with it somehow. [2:36] JL Katel, I also think either choices of your hair is a good idea. KL [Laughs] Thank you. JL I will tell you, as your friend, I’m a little scared about a quick thinking razor near your boob. KL Yeah! Well— SWB That—I am more concerned about that than the grey hairs on your head. KL I—I hear you. JL Just the fastness of it. I just want you to be careful with a razor near your boob. KL I totally hear you, and this is not a plug, because the razor brand, Billie, is not sponsoring us. SWB Yet! KL But they’re wonderful and their razors are super great and very klutz-proof [laughs]. But yeah, I think that just kind of goes hand in hand with, you know, sort of figuring out how to feel attractive and sexy and sort of like as you are going through different parts of your life. SWB You know I remember this time when my mom was in her maybe like early to mid forties. And up until that point she had never worn makeup, and she had never really thought about wearing makeup, and she had become a professor a little later than some of her peers. So a lot of her peers were starting their professorships when they were in their like, let’s say, early to mid thirties, and she was starting almost ten years after that. But then they would like pause and have children a few years in and she had kids in college at that point. So, she had this moment where she was like feeling concerned that she was showing her age in comparison to people who were her peers at work. And I think it freaked her out a little bit and I think rightly so. I mean on the one hand everybody should do what they want but on the other hand what I think she—she realized and what I think was true for her and is, you know, true for a lot of us is that people were going to perceive differently if they knew how old she was, or she started showing her age more, and that making it seem like she was the same age as her peers or closer to their age was professionally valuable to her. And I think about those kinds of trade-offs all the time. Sort of like what are you saying about yourself if you allow yourself to be perceived in this way or that way because you stopped dying your hair or whatever. And like I think it’s tough, right? Because there’s no—there’s no like good answers. All the answers have trade offs to them it’s never simple, and I’ve been thinking about that a lot. I think particularly like I spend a lot of time feeling kind of public in my profile, right? Like I give a lot of talks, which means I’m on stage, I’m at conferences and I’m shaking hands with people, and I feel like people look at you and hopefully most of those people are not hanging out like critiquing [laughs] my looks or my body or whatever but there’s a piece of me that sort of like knows that some of that is happening. And like as a woman that’s always happening to some extent. And you kind of—it’s like I’m just—I find it like tiresome and also I don’t really know how to not care about it. And like not caring about it is a trade off too, right? Like you could choose to not care about it and then you may be treated more poorly because you don’t care about it, right? So like I—I feel like I spend a lot of energy on this, like kind of behind the scenes, and—and then I’m pissed about that because like I would rather spend my energy on like literally anything else. [5:44] KL I spend extra time thinking about do I need to be on a video call? Right? And so do I need to put [chuckles] a fucking coat of mascara on, at least, and some lip gloss. And usually I feel like yeah, I do. I need to like do something so that I don’t know, look a certain level or a certain way or whatever. And I know that, you know, when I have meetings with men, that’s not, they don’t think about that at all. They’re like hopping on a call and going—you know what I mean? They’re not—they don’t need like an extra 15 minutes to just kind of like figure out how they look, which— SWB I mean plug for our newsletter, which came out on Friday. So in Friday’s newsletter I actually talk a little bit about this, right? Like what are some of my tricks for making myself feel or look put together for the surprise video call. And it’s totally like can I slap some paint on this [chuckles] before I get on, right? Like it’s like ok, lipstick and a necklace. Or it’s like, I’m going to throw this little blazer cardigan over whatever I’m wearing and use this headband. And it’s like, the kind of smoke and mirrors to kind of like, “No. Look: I’m—I’m ready.” [Laughs] KL Cool. Which sucks because I—I think all of us here are kind of like, “We do fucking great work. We’re—people want to work with us. And like why is that not enough?” SWB Also we all look great. KL [Laughs] But you know just that like it’s—it’s bullshit that that’s [yeah], you know, that that’s a thing. JL I mean we’ve talked about this like I’m on the opposite side where like the days I do work from home now and when I did work from home I always get dressed in the morning. But for me, it’s not, even if I don’t have video calls because it’s not for other people. It’s for me. I need to mentally take the break from like here I was sleeping to now I’m like doing something else. And like that’s why people will tell me that they like don’t put bras on. And I’m like, “But a bra means I’m doing something now.” Like it is like like the physical thing I am putting on my body to say that like, “Ok. I’m now like ready to rock the day.” [7:45] KL There’s a transition. JL Yes. Yeah. And so I totally understand why people wouldn’t want to do that but for me I like I need to move from like one point here’s my like relaxing to now like here’s like my business time. SWB You know I do put a bra on but like pants are pretty optional but that’s like a personal preference thing. JL [Laughs] Yeah. You know I’ve been struggling recently with like, “Do I want people to think I’m older or younger?” Like I can’t—I can’t decide. Like there are some where I’m like, “Oh if like people think I’m younger, they relate with me more.” But like maybe people are like, “Well, why are you my manager?” Like, “Aren’t you my age?” And I’m like, “No, I’m actually older than you.” And like the other day I was at work and I was talking about the movie The Wizard with Fred Savage and Jenny Lewis [laughter]— SWB Uh huh! As you do [laughter]. JL And I was talking about how like I went to go see it in the movie theatre so I could go see a sneak preview of Super Mario Brothers 3 because it was in the movie before the game came out, and my coworker just turns and goes, “Wait! How old are you?! Like weren’t you like one when Super Mario Brothers 3 came out?” And I was like, “Yeah let’s go with that.” And then I was like, “Oh. I guess I just gave away my age at work.” Which like I don’t specifically try to hide but I don’t like necessarily flaunt either I suppose. It’s interesting like every year I get older I feel more confident about a lot of things in my life. It really—it frustrates me when I hear people say things like, “Oh I’m so old. Ah I’m so old.” Because there’s always someone older than you. And it’s like you’re—you risk insulting other people and their age and how they’re feeling about themselves and so I always try to be really cognizant of that but, you know, it’s hard, right? Because, you know, you do go through things where it’s like, “Well, I’m not—I’m not the same age as I was a year ago, or five years ago, or ten years ago, so how do I adjust if there are things that are like weirding me out about this?” KL Yeah. I think that’s the thing too. I have felt more confident and sort of myself, you know, in the last few years more than any other time. And then I think going through different physical changes caught me off guard which was like why I started feeling that way. But it’s funny that you’re talking about sort of like how you’re perceived because we had a comment in our iTunes ratings and reviews that talked about—about us being sort of like older sister figures which we really loved because we thought like how cool is that to you know have that kind of vibe? But I think there’s also something associated with that, with being like, “Oh.” Like, “But you still want to hang out, right?” [Laughter] [10:20] SWB Oh my god. My biggest fear. You know this also really has me thinking about, there’s this essay I read years ago now. It’s called “There is No Unmarked Woman.” And it’s by Deborah Tannen and she—what she writes about is she’s basically taking like a concept that exists in linguistics about marked languages which is like … there’s like a standard form and then there’s the marking in—in linguistics where that like changes the meaning, right? And she says basically when you’re a woman, the way you’re perceived in society, there is no unmarked existence. Meaning that, like, if you go into a room wearing makeup that says something about you. If you go into a room not wearing makeup, that says something about you. If you wear clothes that are revealing, if you wear clothes that are conservatives, et cetera, et cetera. And not in the same way that men go into rooms, right? Like when a man goes into a room he can wear an outfit that is, like, unremarkable, right? And so—it’s like perceived as a very neutral thing, right? But no matter how you go into the room as a woman there is something—it says something about you. And I think about that a lot about age as well, too. It’s like, oh, do you want to be perceived as older or younger? It’s like, well, it depends what that says about you. And like what are people perceiving from that. And I just feel like that’s a lot of like extra cognitive effort that you go through to decide like how might this perceived? How do I feel about it? How do I feel about the potential risks of doing it? Et cetera, et cetera, et cetera, and like , you know, weighing it out and making those decisions about how you’re going to wear, and how you’re going to present. And I think it’s like worse for other people too, right? Like I’ve had trans friends who’ve said like, “You know, part of me wants to be able to pass as the—the gender that I am, and part of me doesn’t. Part of me wants to show up in a room and be noticeably trans and make people deal with and like vacillating between those feelings.” And I think that that’s, you know, it’s like an unresolvable tension, right? Like we’re never going to be a able to like find an answer to this [laughing] conversation, right? Because you’re always going to have to figure what do you—what do you want? What is expected of you? What are you trying to do in that scenario? What are other people thinking? Et cetera, et cetera, et cetera. KL I mean one of the perks that happens and comes along with, you know, getting older is that you get to share that, and I think that is one of the coolest things we heard from Sarah Drasner. So, I don’t know should we listen to that interview? SWB I’m super ready for it [music fades in]. JL [Ad spot] Not only is CodePen an awesome tool for designers and developers to write code directly in the browser, it’s also a great place to find a job. Are you a frontend developer or designer? They have a radical job board with opportunities all over the world: New York, California, Australia—those opportunities are all there. Check out codepen.io/jobs. Also, are you a company looking to hiring those folks? Hit up support@codepen.io and say you’d like to try the job board for free, and they’ll set you right up for that. CodePen also offers great functionality for helping you interview your candidates. With CodePen Collab Mode you don’t need to be in the same place for a whiteboarding session. You can join online and work together on a coding challenge. Check out the blog at codepen.io to find even more ways to make CodePen work for you. [13:35] SWB [Ad spot] We are also super excited to once again be supported by our friends at WordPress. You know about WordPress, right? You know, the company behind like 30 percent of all websites? We love WordPress because it’s flexible, it’s super customizable, and it’s extremely affordable. Plans starts at just four dollars a month which makes it easy for a growing podcast like ours. But WordPress can do so much more including manage your whole online store. And their customer support is there 24/7 to help. So if you haven’t checked WordPress out yet, you totally should. It’s the easiest way to make your site your own without doing all the coding and design. So start building your website today. Go to wordpress.com/noyougo for 15 percent off any new plan purchase. That’s 15 percent off your brand new website at wordpress.com/noyougo. KL [Ad spot] A Book Apart runs on Shopify, and that’s because we know we’ll be supported by a team of 3,000 folks around the globe who are focused on building products that help business owners every day. And they’re growing their team. I’m looking at their listings, and they’ve got 166 openings right now. SWB Woah, wait! 166? That’s, like, a lot. KL Yeah, like a Director of Production Security which sounds extremely important, and a Choose Your Own Data Adventure. So visit shopify.com/careers to find out what they’re all about [music fades in, plays for 3 seconds, fades out]. JL Sarah Drasner is an award winning speaker, Senior Developer Advocate at Microsoft, and staff writer at CSS Tricks. Sarah’s also the co-founder of the Web Animations Workshop with Val Head. She’s the author of SVG Animations from O’Reilly and has given frontend masters workshops on Vue.js and advanced SVG animations. She has worked for 15 years as a web developer and designer, and at points even worked as a scientific illustrator, and an undergraduate professor. That is awesome. Welcome to the show, Sarah! Sarah Drasner Thanks. Thanks for having me. JL It’s like such a pleasure to have you here. You know, as I mentioned before I had to cut some of your bio because there was so much [laughter] so I think it’s just so cool. You’re doing so many awesome things. So most recently you left consulting and you’re now at Microsoft as a Senior Developer Advocate. Can you tell us a little more about what that means exactly? [15:45] SD Actually, it’s kind of funny because Senior Developer Advocate in some ways means that I’m getting paid for some of the work that I was doing for free before [laughs] so— JL That’s amazing [laughs]. SD Yeah. Yeah. I think so. I was always doing kind of open source work on the side, and doing a lot of talks, and, you know, putting out a lot of resources, and doing consulting work at the same time. Microsoft is really like kind of steering the ship differently these days and it’s much more towards open source and, you know, giving back to the community but also like, you know, of course communicating some of the cool things that they’re building. So my job is a bit of all of those things. I’m still doing a lot of engineering work. I’m still, you know, speaking at conferences. I’m still writing articles and, you know, some of them are about Microsoft, some of them aren’t. And all of that is cool. So it’s a really good job for me. JL Was it hard for you to leave consulting? SD Yeah! It definitely was. I had a couple of contracts coming down the pipeline that I was super excited about. One of them was to work with Addy Osmani who I do hope I get to work with someday because he’s like one of my heros. So turning down contracts with people that I just like really wanted to take. So it was—I think, you know, it took me like a while to really decided because I just was sitting there like, “But on the one hand there’s this, and on the other—” So like, you know, which isn’t to say that either of them—like I think when people say that it was a hard thing for them to decide it means that either option was bad. It was quite the opposite where I was like, “Oh I’m like—this is really strange because previously in my career it had been very much like, ‘Take what you’re given, [laughs] I gotta, you know, support myself here [laughs]’.” So this was—this was a very different type of decision making process for me and my career. JL So you mentioned, you know, you had a couple of projects lined up, I feel like that’s something we constantly like we worry about disappointing people in order to maybe choose the choice that we really want to make. How did you balance that struggle? SD I try to be as transparent as possible about like, “Here’s what I’ve got coming down the pipeline, this person is talking to me, I’m not sure if I can do this.” You know? Even if it’s just like a chance that something could happen. So that there’s no surprises coming down the pipeline. So yeah, I think that that really helps. JL Yeah. SD Um people really need honesty. [18:14] JL So, Sarah, last year you wrote the book SVG Animations: From Common UX Implementations to Complex Responsive Animation. Can you talk us through the process of writing a technical book? SD Oh yeah! I mean I think actually like writing a book was on my bucket list, although that was another one where I’m not sure I would’ve done it unless O’Reilly had reached out to me. So thank Meg Foley, if you’re listening to this. I think I really thought that I was going to write it a lot quicker than I did. So I thought that I was going to write it in like, you know, nine months to a year and it ended up being like a two year process and I didn’t anticipate how long the editing process would take. Especially because they were like, “Oh name two technical reviewers,” and I named four because I was like, “Oh well that’s going to make the book better.” But the thing about four technical reviewers is you have to go through the book four times [laughing] like line by line. So I definitely was kicking myself for that decision. But I do think it made it a better book. But yeah I mean writing books is a lot of work. Like I know everyone says that and like it should be obvious by now but like that’s all I can say is like it’s a lot of work. KL I was just going to say those are so common to be like, “I thought this was going to take this amount of time but [chuckles] it took twice as long [SD laughs] or four times as long.” JL I mean but that’s great to hear, right? Because when people say a long time and nine to 12 months would be a long time to a lot of people [KL absolutely] and so I think it’s like—it’s really great to hear like two years because I don’t think we talk that much about timelines. Right? We say like, “Oh it takes a long time,” but like your definition of long might be different than someone else’s definition of long. SWB You know something I’ve thought a lot about when I’ve written books I have also had people come to me and—which is awesome and it kind of happened in a few different ways but I’ve never gone to a publisher cold and said, “I want to write a book.” And I have lots of thoughts about sort of like ways that’s good and bad, and all kinds of feelings, but I’m curious like, from your perspective, what do you think it was that you had done before you got to that point that made a publisher come to you? Because people ask me this a lot, like, “Well how do I get a publisher to come to me?” “I don’t—I don’t know! Keep doing stuff until people notice?” Which is like a really bad answer. SD Yeah, yeah, no. I think that’s a great question and, yeah, I get those kind of questions fairly frequently too. I mean I know actually because Meg told me that she found me because of talks. She had seen me give talks before and I was giving talks on SVG animation, and complex responsive animations. So that was what made them approach me. You know I’m actually starving to work on another book now which I’m just kind—like my fiance is like making fun of me because I said that I wasn’t going to write another one [laughter] I’m not sure if I’m supposed to talk about it yet but I’m going to write another one with Smashing and I mean certainly that one is because of my relationship with them for talks. So I think talks—I mean that’s probably not like a catch all for anybody but for me that’s been historically what happened. [21:24] JL Well one: that’s so exciting. I cannot wait to hear [SD chuckles] more about it. I think too like that makes total sense, you know, if you continually—if you continuously speak about the same subject, right? Then I think that you have more like chance of people noticing that, right? Would you say that that’s true? SD I think like if people think of X and they think of you. You know like if I think about like you know bias and algorithms I probably think of Sarah. You know like, not me [laughs]. So, you know, I think that that helps. JL You’ve been working a lot with machine learning lately too, right? SD Yeah, I’ve been working with machine learning quite a bit but not in like a very deep sense I would say. There are some APIs that Microsoft Azure exposes where you can just do like an API call. In other words, I can just like talk to this thing and say, “Here’s an image, can you please tell me something about this image?” And then it gives me data back. So I’m not building the thing from scratch like some other people are. I’m just like communication with it and making some projects with it. So like one project I made was I was mentoring a blind woman and she mentioned to me that a lot of the internet was not accessible to her. In other words, she was working with screen readers which like read out the content of a webpage. And there was no alt text for images. So if you have an image of something like a meme, or if you have an image of something like a news story, there’s no content there for her. It’s just completely empty. And so she felt left out of a lot of conversations and experiences. So I used these cognitive services which was this machine learning API and I made a call to this API and created dynamic alt text where people forgot to add them. So I’m making a Chrome extension so that blind people can use it on any site that they visit and kind of gather data. So it analyzes the image both for words and text. And, you know, it’s not perfect. It’s still learning. There’s, you know, definitely stuff that it could be better at but it’s really pretty good. Like very, very impressive. So I think that using some of the machine learning for good because there are like positive things that you can do with it is really exciting for me. So I’m not necessarily building the machine learning piece but I’m applying it. JL Yeah that sounds absolutely amazing. Could you explain a little bit more for some of our listeners who aren’t really familiar with machine learning? SD Basically machine learning is when you teach a computer to make assessments on its own. And this process has been started, you know, like this historically like invented in the sixties but hasn’t really reached maturity until lately where people can really use it, and have been using it very frequently because there’s so many of us online that we come into a point where we really need a system to build and tag and sort for us. Some of the way that it works is that like actually I’ll teach like kind of like a trained like there’s—there’s a few different ways of working with machine learning but like one of the simplest ways of discussing it is a genetic algorithm. So this isn’t every algorithm. There are like thousands of algorithms but this is probably the like lowest metaphor I can think of that’s like easy to understand. So let’s say you have this bot and you say, “Ok. Here is—you have these two—like a pug and kitten.” You say, “Here’s a picture of a pug and here’s a picture of a kitten. Now guess which one is pug or a kitten.” At first it’s going to be totally random, right? Like there—it’s going to be like, “I don’t know. That one?” And they’re going to fail. But if you keep selecting the algorithm that’s picking the one that is like “Pug, pug, pug, pug,” then taking those, throwing those away, like getting all of the ones that are correct, and then you do that a few thousand times, eventually you arrive at this very complex algorithm that actually knows a pug is a pug. [25:40] SD [Continued] The problem is that by the time we reach that level of maturity no one really knows how it works. Not even the person who [chuckles] originally was building the first algorithms. So they’re a bit of a black box and that’s true pretty much of every machine learning algorithm. They get to a point of complexity where the people who built it knows how it started but they don’t necessarily know what’s going on in the end. And they are effective. So we keep using them but there’s also some dangers there which are, you know, that it can be seeded with the wrong information. One is like that’s like a really huge one is like what if you’re giving it fake demographics data that’s built off of things that aren’t real? Like you could actually start building, and tagging, and sorting all—like huge amounts of people to see only a certain kind of information based off of information that’s not really true of them. SWB You know I think about this stuff obviously all the time and one of the things that I also think a lot about is like that there has often not been enough care going into what data we fed the things to start with. Right? So it’s one thing that if you’re like, “We showed it a bunch of pictures of pugs and kittens.” Ok fine. But when you start talking about people and like image recognition of people you get into a lot more difficult territory because there’s so many more bias get involved there. So like I’ve seen a lot of examples where the—the images the machine learning system has learned from was almost entirely pictures of white people and as a result [right] the system is really bad at identifying pictures of people who aren’t white. And so if you then apply a system like that to this tool you’re talking about which could have this huge benefit for blind people where you’re—you’re using, right? If you were using uh a machine learning system that had been trained off pictures of white people to then figure out what an image is and tell a reader what they were of and it did a worse job of—of figuring out when people were in the image if it was like people of color like then you’re also feeding bad information to the blind community that you’re trying to serve, right? So it’s like you create these problems by not looking at where that data’s coming from and whether it’s representative of the people that you need to represent. [27:38] SD Well totally and I think actually like so first of all like the—this is like a really old problem too. Like with even like the old cameras that we—you know the first film was just trained off of white people’s skin tones and then like didn’t actually pick up black people’s skin tones well. And we’ve done [chuckles] kind of a bad job of this historically in other areas. So now we’re doing it in machine learning. But I think if we—if we have diverse teams. This is another reason why having diverse teams is really important because you’re kind of more likely to think of those things or at least have someone on staff who’s like, “Hey, wait a minute.” [Laughs] When you have these kind of issues before it even gets shipped. I mean I worked at a company that I’m not going to the name of where they were going to ship a feature that would’ve actually been against the law. It was going to use machine learning to kind of train on data that wouldn’t have been legal. And I just had, by chance, read about that like a couple of weekends before that and raised my hand. And I was just a developer on the project. I wasn’t like a PM or even someone who was guiding the way the project was shaped and I just kind of raised my hand and was like, “Isn’t that illegal?” And, you know, kind of cited this thing that I had read and they looked into it, and they were like, “Oh my god that is illegal. We shouldn’t ship this product.” But here the thing is like I wasn’t like anyone super special. I just was a random person who said, “Hey, I don’t know so I think if you have you know more of a variety of people, and more of a variety of thought processes in a room—you know, towards anything in any given room, then you’re more likely to catch these edge cases that you know might be shipped like even before they happen.” JL So, Sarah, I mean talking more about this and getting more representation and you mentioned it before that you were mentoring someone who was blind. Last year you started mentoring people who were underrepresented, can you tell us more about that? SD Oh yeah I really feel like the first—you know, for the first little while I was trying to pull myself up by my bootstraps and just, like, work really hard to kind of get some place where I felt more comfortable, where I was not like just taking any job that was offered me. And then the second part of that is to extend whatever privilege I might have to others. So a big part of that was trying to figure out ways to mentor people, or to help other people grow, or to promote the work of other people that are doing great work in the community that might not be seen. And I decided to create this like piece of my time that would be devoted to mentoring underrepresented in tech, and so I made like a Google form and I just kind of like picked people off of that list and say, “Hey, like do you want to chat?” And, you know, in the form we—they check off like what—like some areas that I might be able to help them with. It ranges anywhere from like JavaScript and like Vue to like, “I just need someone to talk to.” Or [laughing] you know like, “I just feel alone right now.” Or you know something like that so we do through like a variety of topics and stuff and there’s just like a bunch of people that I try to mentor. Some people are like first time public speakers, even just like listening I think is helpful. So I think a big part of being a senior developer is not just like touting your own expertise and experience but actually like helping others. [31:23] JL So did you like tweet the form out and wait for people to fill it out? SD Yeah! I did. I tweeted out, I actually have like 500 [laughs] responses. JL That’s amazing! SD Which is more than I can [laughing] actually do. So I feel—there’s like a part of me that feels super guilty but I did see that there was a bunch of other people who took that and did their own version of it. So I think that it kinda spreads it out a little bit. And I feel—if anybody filled out that form and I didn’t get to you. It’s really nothing personal [laughing]. I’m like trying to get through as many people as I can, it’s just there’s a lot of people on that list. JL Yeah, how do you—I mean 500 is a lot. But I mean like ten is a lot. How are you finding the time? SD That’s always a challenge. I mean there’s definitely months where I’m not able to do it as much as I want to. There’s also people that I just know that I’m mentoring and some of the mentoring relationships are kind of casual like you know they’re friends of mine who ask a lot of questions about how to do this and that or like it ranges from that to like really formal meetings. So there are months where I can set aside the time to have a few mentoring sessions, and then there are times when I just, you know, am on the road a lot and so it comes more in the form of like people randomly wanting like one Skype meeting or like somebody just chatting me on Facebook for a while, asking me how to do deal with a certain situation. I’m also mentored. I think like one person who helps mentor me is Val. She was a consultant way before I was a consultant and so when I started working as a consultant I—she spent a lot of time with where I was just like asking a ton of questions like, “Is this normal? Should I set up a contract?” [Laughs] Like just kind of like I don’t know what I would’ve done without her actually. And also Darius Kazemi he is really super awesome and he actually even just like sent me a version of his contract for me to like understand what a good contract looks like. Which I super appreciated. Darius, if you’re listening, thank you. So I don’t make it sound like I’m only doing, you know, outward. Like I’ve also benefited from other people’s expertise as well. SWB You mean you’re not learning as a human person? [Laughter] SD Yeah [laughs] basically. SWB You know I”m really curious you talked a bit about wanting to make sure that there is, you know, a diverse group of people in the room making decisions in tech which is something I think, you know, all of us share that value. And you’ve talked about wanting to mentor and help answer questions for people who are earlier in their careers, and also I think something you said was like, “Sometimes people just need to not feel alone.” And I know that that’s something that often women in tech can feel is kind of alone. Do you feel as you’ve gone through your career and gotten to this place where you have you know you’re relatively well known, well connected, and well supported. Have things changed for you being a woman in this field has this—is this something that you think is like changing overall? Like what’ your take on sort of where things are at and what needs to happen? [34:27] SD I do feel like things have changed for me. I’m already privileged in some sense because I’m white and, you know, I was living in San Francisco which is like a tech hub. So that gives me that—like allowed me that point. I don’t live in San Francisco anymore but that allowed me some affordances that people in more remote areas don’t have for even being connected. I feel like I was ignored for a lot—to be totally honest, for a lot of the first part of my career and I, you know, I think when I first came up and like people were starting to recognize me, they thought I must be like a junior, or like I must have just like, you know, shot up—like as I just started making things. But the truth of the matter is I was working for a very long time. Like more than a decade just nobody knew of me and nobody really cared. To which I say to people listening: if you feel like you’ve been working for awhile and nobody’s paying attention to you, don’t give up. Like really don’t. Because it doesn’t mean the end of anything. Sometimes people just take a little bit to, you know, notice you. And also I would say if you haven’t been noticed, and you feel like you should’ve been, one thing that I think actually really helped me was by not being noticed for a long time, by the time people did notice me I already had a huge body of work, and people were like, “Woah! Where did all of this work come from?” [Laughing] I’m like, “I’ve been working for so long.” [Laughs] So I think that actually helped my career in some sense that people were just like, “Oh my god there’s so much—there’s so much here. It wasn’t just like a one off or something.” Recently I tweeted about an experience I had where I changed my hair color. I was like fake blonde before [chuckles] and then I dyed my hair back to my natural colour which is brown … and when I kind of had gotten used to like people at tech conference maybe knowing who I was a bit before going there and then I went to JSConf Iceland and I went to this party and everyone was like, “Oh, whose girlfriend are you?” [Laughter and disappointed ughs][Uh huh! Mmm] [Laughs] You know? I mean you know that’s like I remember that. I remember that experience from before I was well known. And I’m like, “Oh this is still here. I just stopped experiencing it because people knew who I was.” Like I just am not recognized at this event, you know? Like because—because I dyed my hair. So I think that that like that kind of was like this reminder and I tweeted that out and the entire responses to the thread were either guys like, “I can’t believe that happens,” and women just going, “Yup, that happened to me the other,” “Yes, that happens to me all the [laughing] time.” Like and I do think we have a long way to go in that sense. I try not to get saddened by the numbers that are actually going down for tech instead of up like for a lot of other industries the number of women goes up over time. And for ours it’s actually trending in the opposite direction which I also—which is why I think that mentoring is such a big deal. Like giving people a support system is really important. [37:44] SWB I started recently listening to this podcast, The Startup Podcast, and it’s from Gimlet and they’re—they’re featuring a VC named Arlan who she’s a, you know, like a black gay woman in Silicon Valley, trying to run a venture capital fund and she has decided to call the people that that she wants to invest in not underrepresented but underestimated and I think that’s really interesting to think about like the way in which so many of us have been underestimated in our fields, and sort of like you’re kind of flying under the radar as a result and that means that there’s like all this untapped potential which, you know, like it’s super problematic that—that we may have been underestimated but being able to kind of harness that potential is really exciting. SD Totally! First of all, Arlan is a hero of mine. I just like I mean she’s been doing stuff for forever, I only was aware of her recently and was like, “Holy crap.” [Laughs] She’s—she’s just super great. And yeah I think that that’s amazing. I’m going to actually try to like co-opt that term, giving her credit of course. Like that’s—that’s a really, really great term because there are so many people who—like I feel like I’m mentoring who I’m like, “Jesus Christ, you’re doing so many cool things,” and then people don’t really know about them. Or even just like people who are doing good work that like some people know about but then they still get talked down to like they’re not that valuable, like, you know, I think that there’s some people that like—like Lin Clark who does amazing, amazing work and then people like on a livestream are, you know, harassing her or whatever. And I just like, it’s like why?!? [Laughing] She’s incredible. She’s probably like benefitted, you know, React community more than anyone in terms of like understanding some of the things that are going on. So I just think it’s kind of like an important time to support people. SWB Yeah like how do you find sort of the balance for yourself between wanting to push for representation in tech and wanting to talk about some of these issues around the lack of diversity and the way that people have been underestimated but also just wanting to like do your fucking job as an engineer and be known for being awesome at your job? SD Yeah. I mean that’s a really good question I think that actually I try to lean towards showing not telling because I think that actually changes minds more than me telling people to, you know, it’s like on the one hand I could be like, “Ok you should respect women,” and like people who already respect women will be like, “Hell yeah!” And then the people who don’t respect woman will be like, “Why?” [Laughs] And, like, “Go away,” and like, “No.” But if I, you know, if I work really hard, and make work that they need, or make work that like, you know, people are using or people like find valuable then they kind of have to—I don’t have to say anything, they kind of have to reevaluate some biases on their own. So I kind of believe in putting my money where my mouth is and like, you know, sure, like I’m not always going to make like a perfect thing or anything but if people find the work that I do valuable, I think that that’s much more compelling and tends to move the bottom dollar a little bit more than—and I kind of know this because people have told me. Like I know a number of dudes who write to me and say like, “I, you know, I used to have bias against women and I saw some of the work that you were doing and I had to reevaluate what I was thinking about it.” And I think if I had just kind of gone forward and said, “Women, you know, respect them.” I don’t know that that—it would’ve been quite as effective and see that in the kind of ways that I promote women is also to just like really like highlight the work that they’re doing because that is important. That’s the important piece is, right? Is like all of the work that they’re doing is super valuable and then people can see that for themselves and it kind of like does the job of show not tell. But I’ll also say this on that subject matter: my mom is the first woman Chief of Neurology on the planet and she was physician and chief of UCSF, and is a very brilliant women, and she was really like a kind of pioneer in medicine. And she taught me a lot of this stuff. This isn’t born from my brain or something. She actually like I think a lot of other people’s moms taught them a lot of, you know, other really awesome things. My mom taught me like, “Ok. Like this is really important when you’re in a business meeting you can’t talk like this. You have to say this.” Or like, “When you’re presenting your work you have to make sure to do this.” Or, “You know, honey, you’re just going to have to work, you know, five times as hard, I’m sorry.” Like [laughs] which I think you know I think is unfortunate but also really super prepared me for tech. [42:56] SD [Continued] There’s no other way around it like what she did for me is, you know, what she did for medicine was really important, but what she did for me was also super important and she’s obviously my role model. JL I think that’s I mean that’s just incredible to hear, Sarah, and I think, you know, you are probably setting the same example as a role model now with your family. SD I mean I don’t know. I hope! You know my step-daughter is is super into code and she’s brilliant, she’s like kind of unbelievably brilliant. Like I give [chuckles] workshops to adults and she figures things out way [laughing] faster than we do. I think part of that is like kid’s brains just like they’re like super open to new ideas. And so that’s super exciting to see. But she also kind of takes after her dad where she’s super method—that’s just who she is. She’s like really methodical, she like really, you know, thinks through problems well. She has a really good memory for numbers and, you know, kind of computational ideas. So like we’ll like run through—like I’ll show her a JavaScript concept and she’ll have built like five things [chuckles in background]. So [chuckles] uh and the—the funny thing about it is like, you know, her dad is very humble. She is no—you know, Megan, if you hear this in the future, like know that I [chuckling] fully support you but she’s—she’s not super humble [yeah] but I think that’s great because she has a ton of confidence, and I’m just like, “Girl, you’re going to need it. [Laughs] So I’m not going to do anything to dissuade you from that because people are going to try to, you know, not let you have that. And so like go—go for it.” She’s like [laughter in background], “I’m really good at this.” I’m like, “You are!” [Laughs] [44:45] SWB You know what? Well we just had an author on the show, a fiction author, Carmen Maria Machado a few weeks ago. And, you know, one of the things that she said was getting comfortable with the idea that she is good at things and so how often women are taught to like not talk about the things that they’re good at, and to not own that. I—one of the things that I’m, you know, makes me so excited is thinking about how can we do work today. You know like people like you and people like us posting shows like this to make it so that there’s fewer of these double standards in the future and so that, you know, as girls like that grow up, they do have the opportunity to not have to work five times as hard but can just be awesome for being awesome. SD Totally. Totally. Yeah I mean it is kind of funny how like that stuff comes at a—like a really young age that you’re not supposed to—you’re not supposed to be proud of yourself, you’re not [chuckling] to like, be excited about the thing like, “I built this thing and it’s great!” Like there’s a certain age where people tell you not to—not to like that or not to feel like that, and yeah, it’s kind of important. It’s important to stay excited about the stuff that you’re making. JL Completely. So, before we get going, just one final question for you, Sarah. You have a really awesome end of your goal setting tradition and I was really hoping that you could tell us the story about that. SD Oh yeah so my best friends and my fiancé and I were like talking about how we have these goals and I was kind of talking about how like I make a list for myself, and she was saying that she has a list for herself, and you know he was saying that he has a list for himself. So we decided that we take these like either staycations where like one of us comes over to the other person’s house or like we—one year we went to Cancun and like did this. But we’d all like hang out together and drink champagne and talk about the things that we’re planning for the future, and the things that we want to get done. So every year we make a list of the things that we want to do and want to accomplish and we revisit last year’s goals. We like kind of look through them and, you know, for some of the goals we say like, “Oh, you know, that’s no longer important to me.” It’s like, “I never did it but I’ve changed my idea about whether or not that was important or vital to me.” And then, you know, on other ones we’re like, “Oh like I shoulda gotten more done on that.” Or like we’ll check in mid-year and see where we’re at. Um it’s nice to work with other people through those things. It makes me feel really accountable in a way that doing it on your own—plus like the champagne and the kind of like, you know, celebration of it makes it fun instead of arduous. Like instead of like, “Oh no I’ve got like things on my list.” So yeah it’s been like a really awesome thing I think for each of we’ve all gone a lot further in the last few years because of this kind of like bond we share like supporting each other. JL It’s so awesome. I think the to-do list is always something that a lot of us struggle with [laughs] and so I love this idea of a communal, celebratory to-do list and goal setting. [47:52] SD Yeah and it’s like long term goals too. I think to-do lists tend to be kind of short so it’s nice to kind of take a purview and be like, “What do I want to accomp—” Like kind of like align yourself like, I’m doing all these small things that are like, you know, tactical. But what’s my strategy here? Like what’s the long term here? JL Yeah, that’s a great point. I think often I’ve very micro-focused, and I think to stop every once in awhile and be like, “Wait. Where am I trying to get?” Is really valuable. KL Yeah. Thank you so much for being here. SD Yeah, thanks for having me! This has been a blast. It’s so nice to speak to like three women that I admire so much. SWB Oh I—we admire you too! JL And we cannot wait to keep seeing what you’re doing. SD Thanks, likewise. JL Because it just gets awesomer and awesomer. SD Bye! [Music fades in, plays for four seconds, fades out] KL It is time for one I think of our favorite segments: The Fuck Yeah of the Week. Sara, can you tell us what that is? SWB Yeah. The Fuck Yeah of the Week is someone or something we’re super hyped about and this week it is none other than Michelle Wolf. As you might’ve heard because it was freaking everywhere, Michelle Wolf did the comedy segment of the White House Correspondents Dinner last week, and it was pretty fucking great. I mean she really didn’t pull any punches. She was extremely direct about a number of problems with the current political climate and one of the things that she talked about directly was Sarah Huckabee Sanders and the lies that she tells. Now, she got a lot of flack for this, I don’t want to repeat the whole thing. It was a 19-minute segment so if you haven’t seen it, you should go watch it because it was great. But what really got everybody bothered was that, you know, she made this joke about how Sarah Huckabee Sanders burns facts and then uses the ash to create eyeliner to get the perfect smokey eye. Aaaand what she was accused of was having criticized Sarah Huckabee Sanders’ looks, which was not what she criticized. What she criticized was the fact that this woman tells lies all day and is supposed to be the White House Press Secretary. So, anyway, you should watch it, you should catch up on the controversy, but what I think is really important here and the reason I wanted to give her a big fuck yeah is that after all of this has happened, I think it’s really easy to kind of get pushed into apologizing and walking it back, and to be pushed into, like, being nice. And, instead, you know, she had an interview with NPR where she was like, “I stand by everything that I said,” and one of the things that she talked about was like, “You know when people invite a woman to do comedy, they’re often expecting her to be nice. And, in fact, that’s something I talk about in my comedy is the way in which people are expecting that I’m going to be nice and I’m not. I’m not there to be nice.” And she said she didn’t regret a word that she stood by it. And so, I say fuck yeah to telling it like it is and then also, you know, not being pressured into apologizing for something that you shouldn’t have to apologize for. And fuck yeah to not being a nice girl. [50:45] KL Uh yeah. I say fuck yeah as well. I just—I think it’s so important especially for someone in her position to have been invited to do that to, you know, to stand her ground and stand by what she did and said, because it wasn’t any—you know she didn’t say anything that was like, “Oh my gosh.” Like so controversial that it was detrimental. It was like she was calling people out for, you know, what was happening. And addressing a room full of people that [laughs] don’t want to hear that. SWB Super tough room to work. I wouldn’t want to have to give a talk in front of that room because the people there are just sort of like prepared to dislike you. KL Yeah, and! It’s also—it’s not a Comedy Cellar. It’s not—you’re not going on and like feeding off a group of people who are like there to laugh [laughs] and like there to support you, and like want to hear you roast them. I mean I think there’s been a historical, you know, underlying like that’s what it is, but if you don’t want that to be what happens there, then this isn’t the set up. SWB Why the fuck are you inviting Michelle Wolf then, right? KL Exactly. Right. SWB Like that’s on you. KL Yeah, exactly. So I think she did a great job. JL I think it’s going to be really interesting to watch stand up comedy as it like expands like a year or five years from now. I mean we talk about things—I mean we do vocab swaps on the show, right? Where we talk about like how to like tread on sensitive subjects whereas like stand up comedy throws all that out the window. So I think it’ll be really interesting to see if people stay true to what they believe in with that, especially with like a movement to sort of like be more sensitive to other people, and be more careful about the things we say. So I—I’d like to see where we are in five years from now, on this podcast, and we can look back and be like, “What’s Michelle Wolf doing now?” Because I have a feeling that she’ll still be like standing behind what she believes in. [52:33] SWB Yeah. And I think, you know, that’s one of the other reasons I really liked what she talked about is that she said, “You know? When I wrote my set, I specifically took care to make sure that I wasn’t going to be making jokes at the expense of other women’s looks.” That that was something that she didn’t want to do in the set. And so it’s sort of like—I think what it actually shows is that—you know there’s this talk in comedy where it’s like, “Oh if you’re sensitive, or if you’re worried about inclusivity, then you can’t focus on telling jokes. And it’s just going to kill all the fun.” And I think with somebody like her shows is like you—you can be more careful with what you say and how you say it, and you can be inclusive and also still be really fucking funny. And that doesn’t mean that everybody’s going to like your humor. It’s not that. But that you’re not going to make jokes at the expense of more marginalized groups and you can do that and still be like super fucking good at it. And I would like to see a lot more comics sort of stretch themselves in that way. Right? Because I feel like it’s kind of a lazy answer to be like, “Well if I can’t say literally anything without any ramifications at all then you’re like, you know, getting in the way of my creativity.” And I’m like, “Man, maybe you’re just not that creative then.” I don’t know. Sounds like a problem with you [chuckles]. JL But I think it’s also you know you brought up like I mean it’s choice—like I think you know I read that you know she had an abortion joke in there too which like is not my cup of tea but I’m not inviting her to my birthday party. You know? And so for me that’s like—that’s like research on a lot of things. And so, you know, she didn’t change what her style was because of where she was. SWB And I also think that you, you know, there’s differences between telling jokes that are not going to be like in good taste for everybody. Just like some people don’t like swearing which I’m fine if people don’t like swearing, fine and they also should not listen to this podcast [laughter and chatter]. I think that it’s one of these things where, you know, the way you choose to talk about a joke about abortion is really important to me. I mean you know it’s—people talk about the concept of punching up or punching down. Right? It’s like who’s the butt of the joke? And and I think that that makes a big difference. I’m not suggesting you should enjoy abortion jokes. But like the way that she was talking about it, you know one of the things that she said, is like, “Oh yeah, all you guys oppose abortions,” she’s speaking to like the conservative legislatures in the room, “Unless it’s the abortion you buy for your secret girlfriend.” But like [laughs] so in that—in that joke like the butt of the joke was the people who are being hypocritical, right? And so like that’s—to me, like that’s a different flavor than like there’s lots of other things that could’ve been said. KL It also used to not be televised. So, I think there’s something in that that, you know, it is now. And so now it’s in the public sphere and there’s room for appreciation and criticism and I’m glad that we can have this conversation, and I feel like even that’s a Fuck Yeah. [55:17] JL Totally. KL That’s it for this week’s episode of No, You Go, the show about being ambitious—and sticking together. NYG is recorded in our home city of Philadelphia, and produced by Steph Colbourn. Our theme music is my The Diaphone. Thanks to Sarah Drasner for being our guest today. If you like what you’ve been hearing, please make sure to subscribe and rate us on Apple podcasts. Your support helps us spread the word and means the world. We’ll be back next week with another great guest [music fades in, plays for 32 seconds, fades out to end]. Transcript by secondhandscribe.com.

Descripcion del programa ¿Estás pensando en utilizar Polymer en grandes proyectos? Quédate y veremos todo lo que implica. En el programa de hoy hablaremos sobre Polymer. ¿Para qué se pensó?. Veremos que para hacer aplicaciones web no y los problemas que puede dar. ¡Esperamos que os guste el episodio y como siempre nos vemos al final! ¿Queréis participar? ¿Queréis participar y ayudarnos a decidir que grabar en WeCodeSign y proponer invitad@s? Aquí podéis participar en WeCodeSign. Preguntas rápidas: Borja Godoy Quién me ha inspirado: Ismael Faro Quién me ha inspirado: Abdón Rodríguez Quién me ha inspirado: Jon Rojí Quién me ha inspirado: Jorge Barroso Recomiéndanos un recurso: Medium Recomiéndanos un recurso: Juan W Media Recomiéndanos a un invitado o invitada: Jon Rojí ¿Qué tema te gustaría que tratásemos?: Agentes Inteligentes ((Siri, Alexa, Google Assistant)) Contacta con: Borja Godoy Twitter de Borja Godoy Github de Borja Godoy Email de Borja Godoy Links del programa James Kyle nailing the discussion about CSS and components An intro to web components with otters Preview de Polymer 3.0: npm y Módulos de ES6 Polymer 3.0 Preview — Building a mini card game Who's using Polymer? Opening Remarks (Polymer Summit 2017) Polymer Summit 2017 Highlights Web Components Firebase Lighthouse Polymer Codelabs Polymer 2.0 Docs Ismael Faro Abdón Rodríguez Rob Dodson Polymer Summit Talks Captain Codeman Can I Use - Web Components Stencil.JS A Pinterest Progressive Web App Performance Case Study Addy Osmani Recomendaciones de Nacho Project Structure for Using Redux with Polymer 2.0 Polymer Tips: Prevent Inactive Views Responding To Other Route Changes Patrocinadores Fictizia.com Contacta con Ignacio Web de WeCodeSign Twitter de WeCodeSign eMail de WeCodeSign Web de Ignacio Villanueva Twitter de Ignacio Villanueva

Descripcion del programa José Manuel es ingeniero de software, trabaja como desarrollador web en Estocolmo para Spotify. Especializado en web performance optimization, SEO y accesibilidad. Con él nos adentraremos en el mundo de las Progressive Web Apps, y veremos como gracias al nuevo Catálogo de Apis podemos realizar acciones tales como notificaciones push, almacenamiento local y ejecución offline entre muchas otras. ¡Esperamos que os guste el episodio y como siempre nos vemos al final! ¿Queréis participar? ¿Queréis participar y ayudarnos a decidir que grabar en WeCodeSign y proponer invitad@s? Aquí podéis participar en WeCodeSign. Recomendaciones Preguntas rápidas: José Manuel Quién me ha inspirado: Alberto Quién me ha inspirado: Davide Mendolia Quién me ha inspirado: Felipe Ribeiro Quién me ha inspirado: Steve Souders Quién me ha inspirado: Nicholas C. Zakas Quién me ha inspirado: Addy Osmani Quién me ha inspirado: Dan Abramov Quién me ha inspirado: Stoyan Stefanov Recomiéndanos un recurso: Frontend Focus Recomiéndanos un recurso: JavaScript Weekly Recomiéndanos un recurso: Chrome and Web at Google I/O 2017 Recomiéndanos un recurso: JS Conf Recomiéndanos un recurso: CSS-Tricks Recomiéndanos un recurso: Smashing Magazine Recomiéndanos un recurso: High Performance Browser Networking Recomiéndanos a un invitado o invitada: Jaume Sanchez Elias ¿Qué tema te gustaría que tratásemos?: Web Performance Contacta con: José Manuel Twitter de José Manuel Web de José Manuel Links del programa Hilo sobre cómo aparecieron las PWA, por Alex Russell Progressive Web Apps: Great Experiences Everywhere (Google I/O '17) Production Progressive Web Apps With JavaScript Frameworks (Google I/O '17) PWA Directory Progressive Web Apps La guía sin conexión by Jake Archibald The Service Worker Cookbook Service Worker Tools Service Worker Pre Cache Tu primera Progressive Web App by Pete LaPage Building Progressive Web Apps A big list of progressive web app tips and tricks The State of Progressive Web Apps Production Progressive Web Apps with JavaScript Frameworks Qué son las Aplicaciones Web Progresivas o "Progressive Web Apps" Progressive web apps PWA: Para Webs Asombrosas Recomendaciones de Ignacio Progressive Web App questions Progressive Web App Checklist The PWA Resource list Lighthouse Patrocinadores Fictizia.com Contacta con Ignacio Web de WeCodeSign Twitter de WeCodeSign eMail de WeCodeSign Web de Ignacio Villanueva Twitter de Ignacio Villanueva

Addy talks about designing performance.

Descripcion del programa Alejandro Arroyo Duque de Sngular nos cuenta su experiencia con Angular y Polymer en empresas tan destacadas como BBVA, Mapfre o Bankia. Hablamos de como le surge la idea de desarrollar videojuegos en JavaScript. Comentamos que son las Progressive Web Apps y las Instant Apps, dos nuevos conceptos que han surgido tras el último Google I/O y que tiene que ver en este ecosistema React y los Web Components. Si crees que puedes adivinar el futuro de la web, disfruta el presente. ¿Te lo vas a perder? Encuesta para pedir Feedback Posibles topics, entrevistados y duración del programa Preguntas rápidas: Alejandro Arroyo Duque Quién me ha inspirado: Steve Jobs Recomiéndanos un recurso: Addy Osmani Recomiéndanos un recurso: Paul Irish Recomiéndanos a un invitado: Ángel González de la Fuente ¿Qué tema te gustaría que tratásemos?: Gamificación Contacta con: Alejandro Arroyo Duque Web Twitter Github LinkedIn Links del programa Vide Game Army (Meetup) ide Game Army (YouTube) The myth of the “Real JavaScript Developer” CSS is easy via @cristinafsanz Angular 2 Ionic React JSX Progressive Web Apps Google opens Polymer for PWA Instant Apps Instant Articles AMP Web Components Recomendaciones de Nacho Awesome Polymer VIOLAINE & JÉRÉMY Contacta con nosotros Web de WeCodeSign Twitter de WeCodeSign eMail de WeCodeSign Web de Ignacio Villanueva Twitter de Ignacio Villanueva

There’s still time! Check out and get your JS Remote Conf tickets!   JavaScript Jabber Episode #184: Web Performance with Nik Molnar (Part 1)   02:04 - Nik Molnar Introduction Twitter GitHub Blog Glimpse [Pluralsight] WebPageTest Deep Dive 02:58 - RAIL (Response, Animation, Idle, Load) 06:03 - How do you know what is being kicked off? How do you avoid it? 08:15 - Frame Rates frames-per-second.appspot.com CSS Triggers 16:05 - Scrolling requestAnimationFrame 19:09 - The Web Animation API 21:40 - Animation Accessibility, Usability, and Speed haveibeenpwned.com Ilya Grigorik: Speed, Performance, and Human Perception @ Fluent 2014 27:14 - HTTP and Optimization Yesterday's perf best-practices are today's HTTP/2 anti-patterns by Ilya Grigorik Ruby Rogues Episode #135: HTTP 2.0 with Ilya Grigorik Hypertext Transfer Protocol Version 2 (HTTP/2) Can I use... Server Push 35:25 - ES6 and Performance ES6 Feature Performance six-speed 40:46 - Understanding the Scale Grace Hopper: Nanoseconds Grace Hopper on Letterman 43:30 RAIL (Response, Animation, Idle, Load) Cont’d 46:15 - Navigator.sendBeacon() 47:51 - Memory Management and Garbage Collection Memory Management Masterclass with Addy Osmani Addy Osmani: JavaScript Memory Management Masterclass Under the Hood of .NET Memory Management by Chris Farrell and Nick Harrison (Nik) Memory vs Performance Problems Rick Hudson: Go GC: Solving the Latency Problem @ GopherCon 2015 Picks Hardcore History Podcast (Jamison) Static vs. Dynamic Languages: A Literature Review (Jamison) TJ Fuller Tumblr (Jamison) Pickle Cat (Jamison) WatchMeCode (Aimee) Don’t jump around while learning in JavaScript (Aimee) P!nk - Bohemian Rhapsody (Joe) Rich Hickey: Design, Composition and Performance (Joe) Undisclosed Podcast (AJ) History of Gaming Historian - 100K Subscriber Special (AJ) 15 Minute Podcast Listener chat with Charles Wood (Chuck) JS Remote Conf (Chuck) All Remote Confs (Chuck) Clash of Clans (Chuck) Star Wars Commander (Chuck) Coin (Chuck) The Airhook (Chuck) GoldieBlox (Chuck)

There’s still time! Check out and get your JS Remote Conf tickets!   JavaScript Jabber Episode #184: Web Performance with Nik Molnar (Part 1)   02:04 - Nik Molnar Introduction Twitter GitHub Blog Glimpse [Pluralsight] WebPageTest Deep Dive 02:58 - RAIL (Response, Animation, Idle, Load) 06:03 - How do you know what is being kicked off? How do you avoid it? 08:15 - Frame Rates frames-per-second.appspot.com CSS Triggers 16:05 - Scrolling requestAnimationFrame 19:09 - The Web Animation API 21:40 - Animation Accessibility, Usability, and Speed haveibeenpwned.com Ilya Grigorik: Speed, Performance, and Human Perception @ Fluent 2014 27:14 - HTTP and Optimization Yesterday's perf best-practices are today's HTTP/2 anti-patterns by Ilya Grigorik Ruby Rogues Episode #135: HTTP 2.0 with Ilya Grigorik Hypertext Transfer Protocol Version 2 (HTTP/2) Can I use... Server Push 35:25 - ES6 and Performance ES6 Feature Performance six-speed 40:46 - Understanding the Scale Grace Hopper: Nanoseconds Grace Hopper on Letterman 43:30 RAIL (Response, Animation, Idle, Load) Cont’d 46:15 - Navigator.sendBeacon() 47:51 - Memory Management and Garbage Collection Memory Management Masterclass with Addy Osmani Addy Osmani: JavaScript Memory Management Masterclass Under the Hood of .NET Memory Management by Chris Farrell and Nick Harrison (Nik) Memory vs Performance Problems Rick Hudson: Go GC: Solving the Latency Problem @ GopherCon 2015 Picks Hardcore History Podcast (Jamison) Static vs. Dynamic Languages: A Literature Review (Jamison) TJ Fuller Tumblr (Jamison) Pickle Cat (Jamison) WatchMeCode (Aimee) Don’t jump around while learning in JavaScript (Aimee) P!nk - Bohemian Rhapsody (Joe) Rich Hickey: Design, Composition and Performance (Joe) Undisclosed Podcast (AJ) History of Gaming Historian - 100K Subscriber Special (AJ) 15 Minute Podcast Listener chat with Charles Wood (Chuck) JS Remote Conf (Chuck) All Remote Confs (Chuck) Clash of Clans (Chuck) Star Wars Commander (Chuck) Coin (Chuck) The Airhook (Chuck) GoldieBlox (Chuck)

There’s still time! Check out and get your JS Remote Conf tickets!   JavaScript Jabber Episode #184: Web Performance with Nik Molnar (Part 1)   02:04 - Nik Molnar Introduction Twitter GitHub Blog Glimpse [Pluralsight] WebPageTest Deep Dive 02:58 - RAIL (Response, Animation, Idle, Load) 06:03 - How do you know what is being kicked off? How do you avoid it? 08:15 - Frame Rates frames-per-second.appspot.com CSS Triggers 16:05 - Scrolling requestAnimationFrame 19:09 - The Web Animation API 21:40 - Animation Accessibility, Usability, and Speed haveibeenpwned.com Ilya Grigorik: Speed, Performance, and Human Perception @ Fluent 2014 27:14 - HTTP and Optimization Yesterday's perf best-practices are today's HTTP/2 anti-patterns by Ilya Grigorik Ruby Rogues Episode #135: HTTP 2.0 with Ilya Grigorik Hypertext Transfer Protocol Version 2 (HTTP/2) Can I use... Server Push 35:25 - ES6 and Performance ES6 Feature Performance six-speed 40:46 - Understanding the Scale Grace Hopper: Nanoseconds Grace Hopper on Letterman 43:30 RAIL (Response, Animation, Idle, Load) Cont’d 46:15 - Navigator.sendBeacon() 47:51 - Memory Management and Garbage Collection Memory Management Masterclass with Addy Osmani Addy Osmani: JavaScript Memory Management Masterclass Under the Hood of .NET Memory Management by Chris Farrell and Nick Harrison (Nik) Memory vs Performance Problems Rick Hudson: Go GC: Solving the Latency Problem @ GopherCon 2015 Picks Hardcore History Podcast (Jamison) Static vs. Dynamic Languages: A Literature Review (Jamison) TJ Fuller Tumblr (Jamison) Pickle Cat (Jamison) WatchMeCode (Aimee) Don’t jump around while learning in JavaScript (Aimee) P!nk - Bohemian Rhapsody (Joe) Rich Hickey: Design, Composition and Performance (Joe) Undisclosed Podcast (AJ) History of Gaming Historian - 100K Subscriber Special (AJ) 15 Minute Podcast Listener chat with Charles Wood (Chuck) JS Remote Conf (Chuck) All Remote Confs (Chuck) Clash of Clans (Chuck) Star Wars Commander (Chuck) Coin (Chuck) The Airhook (Chuck) GoldieBlox (Chuck)

Vamos para a segunda parte da entrevista? VAMOS! Conversamos bastante sobre gráficos, web workers e as tendências pra esse ano relacionadas ao desenvolvimento. Como no último episódio, com Addy Osmani, Jake Archibald and Paul Lewis

01:35 - Katya Eames Introduction Twitter [YouTube] Katya Eames: How to Teach Angular to Your Kids 01:52 - Ben Nadel Introduction Twitter GitHub Blog Adventures in Angular Episode 029: Angular At Work with Ben Nadel InVision @InVisionApp 04:47 - Performance Basecamp Nested Pages 08:04 - User Experience 10:01 - Fixing Performance Problems as a Team Engineering Validation “Premature optimization is the root of all evil -- Donald Knuth” DOM Manipulation ngRepeat Screen Experience 23:28 - Finding Performance Issues Chrome Developer Tools Firefox Firebug Utilizing Chrome Dev Tools and Creating the Videos on Ben’s Blog “Imposter Syndrome” Addy Osmani Paul Irish 29:27 - “Just-in-Time View Construction” 34:43 - ngIf 37:16 - Angular 2 Opinions [YouTube] Dave Smith: Angular + React = Speed Unit Directional Data Flow & Functionality Victor Savkin: Change Detection in Angular 2 [Egghead.io] John Lindquist: Angular 2: Template Syntax ES5, ES6    AtScript, TypeScript traceur-compiler Babel 46:01 - Moving to 2.0 Picks BrowserSync (John) [Egghead.io] Angular 2: Template Syntax (Joe) Win an InVision App T-Shirt! (Lukas) Adventures in Angular (Lukas) WELCOME TO NIGHT VALE (Katya) Being and Time (Harper Perennial Modern Thought) by Martin Heidegger (Ward) Angular Grid (Ward) Steelheart (The Reckoners) by Brandon Sanderson (Chuck) StarTech.com MUHSMF2M 2m 4 Position TRRS Headset Extension Cable (Ben) Any Given Sunday (Ben) News ng-vegas: May 7th and 8th, 2015! AngularU in the Bay Area in June

01:35 - Katya Eames Introduction Twitter [YouTube] Katya Eames: How to Teach Angular to Your Kids 01:52 - Ben Nadel Introduction Twitter GitHub Blog Adventures in Angular Episode 029: Angular At Work with Ben Nadel InVision @InVisionApp 04:47 - Performance Basecamp Nested Pages 08:04 - User Experience 10:01 - Fixing Performance Problems as a Team Engineering Validation “Premature optimization is the root of all evil -- Donald Knuth” DOM Manipulation ngRepeat Screen Experience 23:28 - Finding Performance Issues Chrome Developer Tools Firefox Firebug Utilizing Chrome Dev Tools and Creating the Videos on Ben’s Blog “Imposter Syndrome” Addy Osmani Paul Irish 29:27 - “Just-in-Time View Construction” 34:43 - ngIf 37:16 - Angular 2 Opinions [YouTube] Dave Smith: Angular + React = Speed Unit Directional Data Flow & Functionality Victor Savkin: Change Detection in Angular 2 [Egghead.io] John Lindquist: Angular 2: Template Syntax ES5, ES6    AtScript, TypeScript traceur-compiler Babel 46:01 - Moving to 2.0 Picks BrowserSync (John) [Egghead.io] Angular 2: Template Syntax (Joe) Win an InVision App T-Shirt! (Lukas) Adventures in Angular (Lukas) WELCOME TO NIGHT VALE (Katya) Being and Time (Harper Perennial Modern Thought) by Martin Heidegger (Ward) Angular Grid (Ward) Steelheart (The Reckoners) by Brandon Sanderson (Chuck) StarTech.com MUHSMF2M 2m 4 Position TRRS Headset Extension Cable (Ben) Any Given Sunday (Ben) News ng-vegas: May 7th and 8th, 2015! AngularU in the Bay Area in June

01:35 - Katya Eames Introduction Twitter [YouTube] Katya Eames: How to Teach Angular to Your Kids 01:52 - Ben Nadel Introduction Twitter GitHub Blog Adventures in Angular Episode 029: Angular At Work with Ben Nadel InVision @InVisionApp 04:47 - Performance Basecamp Nested Pages 08:04 - User Experience 10:01 - Fixing Performance Problems as a Team Engineering Validation “Premature optimization is the root of all evil -- Donald Knuth” DOM Manipulation ngRepeat Screen Experience 23:28 - Finding Performance Issues Chrome Developer Tools Firefox Firebug Utilizing Chrome Dev Tools and Creating the Videos on Ben’s Blog “Imposter Syndrome” Addy Osmani Paul Irish 29:27 - “Just-in-Time View Construction” 34:43 - ngIf 37:16 - Angular 2 Opinions [YouTube] Dave Smith: Angular + React = Speed Unit Directional Data Flow & Functionality Victor Savkin: Change Detection in Angular 2 [Egghead.io] John Lindquist: Angular 2: Template Syntax ES5, ES6    AtScript, TypeScript traceur-compiler Babel 46:01 - Moving to 2.0 Picks BrowserSync (John) [Egghead.io] Angular 2: Template Syntax (Joe) Win an InVision App T-Shirt! (Lukas) Adventures in Angular (Lukas) WELCOME TO NIGHT VALE (Katya) Being and Time (Harper Perennial Modern Thought) by Martin Heidegger (Ward) Angular Grid (Ward) Steelheart (The Reckoners) by Brandon Sanderson (Chuck) StarTech.com MUHSMF2M 2m 4 Position TRRS Headset Extension Cable (Ben) Any Given Sunday (Ben) News ng-vegas: May 7th and 8th, 2015! AngularU in the Bay Area in June

A GENTE É CHIQUE! Fala ingrêis e tudo mais. Nas férias, o Daniel Filho viajou mas não largou o podcast. Nesse episódio ele conversou com Addy Osmani, Jake Archibald and Paul Lewis sobre Web Components, Performance, Progressive Enhancement, Service Workers e mais um monte de coisas.

01:20 - Julie Ralph Introduction Twitter GitHub Google (Seattle Office) Angular Team Protractor 02:47 - Finding Angular and the Team 04:50 - End-to-End Testing WebDriver 08:46 - Making Scripting Easier with Protractor 10:57 - Grabbing By Model 11:27 - Framework Support Jasmine Mocha Cucumber 12:59 - What You Need to Know to Work with Protractor Node.js Debugging Knowledge 14:14 - Data Hydration for Tests 16:10 - Using Mock Modules 17:52 - When Should People Start Using Protractor? 23:21 - Using Protractor for Performance Testing benchpress 25:06 - Writing End-to-End Tests 29:28 - Testing Stories The PageObject Pattern [YouTube] Jim Lavin: Using Page Objects in AngularJS Protractor Authentication User Scripts Red Flag: Logic in Your End-to-End Tests 32:05 - Protractor 2.0?! 33:33 - Support for Angular 2   See Also [YouTube] Julie Ralph: End to End Angular Testing with Protractor ​ Picks bardjs (John) [Pluralsight] Play by Play: John Papa and Ward Bell (John) The revolution that could change the way your child is taught (Ward) Teach Like a Champion: 49 Techniques that Put Students on the Path to College (K-12) by Doug Lemov (Ward) Colt Express (Joe) ng-book (Chuck) DevTools: State Of The Union 2015 by Addy Osmani (Julie) Digital Spring Cleaning (Julie)  

01:20 - Julie Ralph Introduction Twitter GitHub Google (Seattle Office) Angular Team Protractor 02:47 - Finding Angular and the Team 04:50 - End-to-End Testing WebDriver 08:46 - Making Scripting Easier with Protractor 10:57 - Grabbing By Model 11:27 - Framework Support Jasmine Mocha Cucumber 12:59 - What You Need to Know to Work with Protractor Node.js Debugging Knowledge 14:14 - Data Hydration for Tests 16:10 - Using Mock Modules 17:52 - When Should People Start Using Protractor? 23:21 - Using Protractor for Performance Testing benchpress 25:06 - Writing End-to-End Tests 29:28 - Testing Stories The PageObject Pattern [YouTube] Jim Lavin: Using Page Objects in AngularJS Protractor Authentication User Scripts Red Flag: Logic in Your End-to-End Tests 32:05 - Protractor 2.0?! 33:33 - Support for Angular 2   See Also [YouTube] Julie Ralph: End to End Angular Testing with Protractor ​ Picks bardjs (John) [Pluralsight] Play by Play: John Papa and Ward Bell (John) The revolution that could change the way your child is taught (Ward) Teach Like a Champion: 49 Techniques that Put Students on the Path to College (K-12) by Doug Lemov (Ward) Colt Express (Joe) ng-book (Chuck) DevTools: State Of The Union 2015 by Addy Osmani (Julie) Digital Spring Cleaning (Julie)  

01:20 - Julie Ralph Introduction Twitter GitHub Google (Seattle Office) Angular Team Protractor 02:47 - Finding Angular and the Team 04:50 - End-to-End Testing WebDriver 08:46 - Making Scripting Easier with Protractor 10:57 - Grabbing By Model 11:27 - Framework Support Jasmine Mocha Cucumber 12:59 - What You Need to Know to Work with Protractor Node.js Debugging Knowledge 14:14 - Data Hydration for Tests 16:10 - Using Mock Modules 17:52 - When Should People Start Using Protractor? 23:21 - Using Protractor for Performance Testing benchpress 25:06 - Writing End-to-End Tests 29:28 - Testing Stories The PageObject Pattern [YouTube] Jim Lavin: Using Page Objects in AngularJS Protractor Authentication User Scripts Red Flag: Logic in Your End-to-End Tests 32:05 - Protractor 2.0?! 33:33 - Support for Angular 2   See Also [YouTube] Julie Ralph: End to End Angular Testing with Protractor ​ Picks bardjs (John) [Pluralsight] Play by Play: John Papa and Ward Bell (John) The revolution that could change the way your child is taught (Ward) Teach Like a Champion: 49 Techniques that Put Students on the Path to College (K-12) by Doug Lemov (Ward) Colt Express (Joe) ng-book (Chuck) DevTools: State Of The Union 2015 by Addy Osmani (Julie) Digital Spring Cleaning (Julie)  

YEAH! Integrating yeoman-style projects into a larger maven build – Addy Osmani comes up with the goods. Making Maven Grunt We buried the lead – NSA can get to everything Joel brings up the counter-point, an article by ARS. Vertx 2.0 Q&A on InfoQ w/Tim Fox – As per last week’s episode, Vert.X is an ... Read More The post DevNews #59 – Bugs made of paper and graphine transistors – does the NSA know? appeared first on Chariot Solutions.

YEAH! Integrating yeoman-style projects into a larger maven build – Addy Osmani comes up with the goods. Making Maven Grunt We buried the lead – NSA can get to everything Joel brings up the counter-point, an article by ARS. Vertx 2.0 Q&A on InfoQ w/Tim Fox – As per last week’s episode, Vert.X is an ... Read More The post DevNews #59 – Bugs made of paper and graphine transistors – does the NSA know? appeared first on Chariot Solutions.

Whether you're using JavaScript or CoffeeScript, LESS or SASS, building an awesome webapp these days usually requires a plethora of boilerplates, frameworks, tools and a lot of glue to get them to work together. In short, you need a kick-ass toolbelt. From performance tuning to build tools, in this session you'll get a complete overview of the current tooling ecosystem and learn about a new tool for app developers by Google that tries to bring all of the pieces of this ecosystem together for you. It's called Yeoman and we think it's going to make your life simpler. More info at: https://fronteers.nl/congres/2012/sessions/the-new-and-improved-developer-toolbelt-addy-osmani

Whether you're using JavaScript or CoffeeScript, LESS or SASS, building an awesome webapp these days usually requires a plethora of boilerplates, frameworks, tools and a lot of glue to get them to work together. In short, you need a kick-ass toolbelt. From performance tuning to build tools, in this session you'll get a complete overview of the current tooling ecosystem and learn about a new tool for app developers by Google that tries to bring all of the pieces of this ecosystem together for you. It's called Yeoman and we think it's going to make your life simpler. More info at: https://fronteers.nl/congres/2012/sessions/the-new-and-improved-developer-toolbelt-addy-osmani

The panelists talk about design patterns in JavaScript with Addy Osmani

The panelists talk about design patterns in JavaScript with Addy Osmani

The panelists talk about design patterns in JavaScript with Addy Osmani

Mit guten Podcasts ist es wie mit gutem Wein: Was lange reift, ploppt am Ende doppelt so gut. Daher hoffen wir, dass sich das Warten auf diese Episode gelohnt hat - wir haben uns Mathias Meyer (http://twitter.com/roidrage) eingeladen und löchern ihn zu Infrastruktur und weiteren DevOps-Themen. Shownotes - Travis-CI https://travis-ci.org - Release It http://pragprog.com/book/mnee/release-it - Post-Mortem http://about.travis-ci.org/blog/2012-09-24-post-mortem-pull-request-unavailability - Chaos-Monkey - New Relic - Dev Ops Game Day https://github.com/cloudworkshop/devopsgameday/wiki - metriks https://github.com/eric/metriks - Ganglia http://ganglia.sourceforge.net - Graphite http://graphite.wikidot.com - Librato Metrics https://metrics.librato.com - Papertrail https://papertrailapp.com - Graylog2 http://graylog2.org - rsyslogd - Chef http://www.opscode.com/chef - Puppet http://puppetlabs.com/solutions/devops - Deploying Rails http://pragprog.com/book/cbdepra/deploying-rails - Scalability Rules http://www.amazon.de/Scalability-Rules-Principles-Scaling-Sites/dp/0321753887 - Scalable Internet Architectures http://www.amazon.de/Scalable-Internet-Architectures-Theo-Schlossnagle/dp/067232699X - Web Operations http://www.amazon.de/Web-Operations-Keeping-Data-Time/dp/1449377440 - Architecture of Open Source Applications - http://www.amazon.de/The-Architecture-Open-Source-Applications/dp/1257638017 - http://www.amazon.de/Architecture-Open-Source-Applications-Volume/dp/11055 Picks Mathias - OnePiece Onesies http://onepiece.com Dennis - Startups for the Rest of Us Podcast http://www.startupsfortherestofus.com - xScope http://xscopeapp.com/ - Highlight.js https://github.com/isagalaev/highlight.js Jan - iA Writer http://www.iawriter.com - “The Breakpoint” mit Paul Irish und Addy Osmani http://addyosmani.com/blog/the-breakpoint-episode1 Peter - http://www.smore.com/clippy-js - http://www.railsplugins.org - http://www.amazon.de/Silver-Hawk-Ladeger%C3%A4t-Batterien-Akkus/dp/B004FPMY5U

Would you like to learn how to organize your JavaScript applications so they can scale? Be able to write apps that support switching out Dojo or jQuery without rewriting a line of code? Application architecture is one of those aspects to development where minor problems can lead to major issues later on if it isn’t done right. Developers writing client-side apps these days usually use a combination of MVC, modules, widgets, plugins and frameworks for theirs. Whilst this works great for apps that are built at a smaller-scale, what happens when your project really starts to grow?. In this talk, I’ll be presenting an effective set of design patterns for large-scale JavaScript application architecture that have previously been used at both AOL and Yahoo amongst others to develop scalable applications. You’ll learn how to keep your application logic truly decoupled, build modules that can exist on their own independently so they can be easily dropped into other projects and future-proof your code in case you need to switch to a different DOM library in the future. Addy Osmani is a popular JavaScript blogger and a UI Developer for AOL based in London, England. He is also a member of the jQuery [Bug Triage/Docs/Front-end] teams where he assists with bugs, documentation and community updates. His free book, ‘Essential JavaScript Design Patterns’ has been downloaded over 200,000 times in the past year and continues to be expanded in his spare time. For more on Addy’s work, check out his blog AddyOsmani.com for tutorials, his G+ page for his community updates and magazines such as .net for his thoughts and commentaries. Follow Addy on Twitter: @addy_osmani Licensed as Creative Commons Attribution NonCommercial ShareAlike 3.0 Unported license (http://creativecommons.org/licenses/by-nc-sa/3.0/).

Modern JavaScript development often has to address a number of different concerns ranging from the use of architectural patterns such as MVC to improve code organisation, through to JavaScript templating, cross-​​​​browser storage, routing/​​bookmarking, script loading, feature detection and more. In this talk, JavaScript developer and jQuery Core Bug Triage & Docs team member Addy Osmani discusses tools that can simplify your development process significantly. Addy Osmani is a popular JavaScript Blogger and a senior independent developer based in London, England. He is also a member of the jQuery Bug Triage and Front-​​​​end teams where he assists with community updates, releases and bugs. Addy’s passion lies in helping spread knowledge about JavaScript and jQuery best practices, coding techniques and open-​​​​source projects in the community. He achieves this through numerous free online talks, articles and resources which he releases each month. For more on Addy’s work, check out his official website AddyOsmani​.com for tutorials, jQuery​.com for his community updates and magazines such as .NET for his thoughts and commentaries. Follow Addy on Twitter: @addyosmani Licensed as Creative Commons Attribution-Share Alike 3.0 (http://creativecommons.org/licenses/by-sa/3.0/).