CINXE.COM

<!DOCTYPE html><html class="scroll-smooth" lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@thedaviddias"/><meta name="twitter:creator" content="@thedaviddias"/><meta property="og:type" content="website"/><meta property="og:image" content="https://thedaviddias.com/images/og/default.png"/><meta property="og:image:alt" content="The David Dias"/><meta property="og:locale" content="en"/><meta property="og:site_name" content="The David Dias | Front-End Developer, Podcaster & Content Creator"/><meta name="theme-color" content="#ffffff"/><meta name="application-name" content="The David Dias"/><meta name="mobile-web-app-capable" content="yes"/><meta name="msapplication-config" content="/favicons/browserconfig.xml"/><link rel="alternate" type="application/rss+xml" href="/rss/feed.xml"/><link rel="alternate" type="application/rss+xml" href="/rss/fr/feed.xml"/><link rel="icon" href="/favicon.ico"/><link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png" sizes="76x76"/><link rel="manifest" href="/favicons/site.webmanifest"/><link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#000000"/><link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png"/><link rel="webmention" href="https://webmention.io/thedaviddias.com/webmention"/><link rel="pingback" href="https://webmention.io/thedaviddias.com/xmlrpc"/><script type="application/ld+json">{"@context":"https://schema.org","@type":"Person","name":"David Dias","url":"https://thedavidias.com","sameAs":["https://x.com/thedaviddias","https://bsky.social/thedaviddias.com","https://www.linkedin.com/in/thedaviddias","https://github.com/thedaviddias","https://discord.gg/EG6tmxsESP","https://medium.com/@thedaviddias","https://dev.to/thedaviddias","https://www.immigrer.com/auteur/thedaviddias/","https://thedaviddias.substack.com","https://frontend.mu/speaker/4801ac4b-ba59-4f87-85d9-686638323e20","https://frontendchecklist.io","https://worldwebstories.com","https://www.youtube.com/@thedaviddias","https://www.instagram.com/thedaviddias","https://www.facebook.com/thedaviddias"]}</script><title>The David Dias | Front-End Developer, Podcaster & Content Creator</title><meta name="robots" content="index,follow"/><meta name="description" content="Hey, I'm David Dias, a Front-End Developer based in Toronto/Canada. I love discussing code, technology, expatriation and life."/><meta property="og:title" content="The David Dias | Front-End Developer, Podcaster & Content Creator"/><meta property="og:description" content="Hey, I'm David Dias, a Front-End Developer based in Toronto/Canada. I love discussing code, technology, expatriation and life."/><meta property="og:url" content="/"/><link rel="preload" as="image" imageSrcSet="/_next/image?url=%2Fimages%2Fdavid-dias-round.jpg&w=256&q=75 1x, /_next/image?url=%2Fimages%2Fdavid-dias-round.jpg&w=640&q=75 2x" fetchpriority="high"/><meta name="next-head-count" content="32"/><meta name="color-scheme" content="dark light"/><meta name="theme-color" content="#111010"/><meta name="google-site-verification" content="_6qNCkTis9PqmGX1r5Nhe_b14nRXmJ9nos2yeCN_eaw"/><link rel="preconnect" href="https://open.spotifycdn.com"/><link rel="preconnect" href="https://encore.scdn.co"/><link rel="preconnect" href="https://i.gr-assets.com"/><link rel="preload" href="/_next/static/media/f8a669a999c483ca-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/9cf9c6e84ed13b5e-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/e3b94df06b368710.css" as="style"/><link rel="stylesheet" href="/_next/static/css/e3b94df06b368710.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/_next/static/chunks/webpack-e7ac3eaf3c6ea2e8.js" defer=""></script><script src="/_next/static/chunks/framework-89ef055d326c5236.js" defer=""></script><script src="/_next/static/chunks/main-4eca5e2d3d71b923.js" defer=""></script><script src="/_next/static/chunks/pages/_app-c83cc5013b9a5a82.js" defer=""></script><script src="/_next/static/chunks/ec350dba-a92ab7cf1308def4.js" defer=""></script><script src="/_next/static/chunks/3027-14ed5603f60f7b31.js" defer=""></script><script src="/_next/static/chunks/1243-2278652bfc1a7155.js" defer=""></script><script src="/_next/static/chunks/6634-697233d69082ae85.js" defer=""></script><script src="/_next/static/chunks/2371-d90fdea10a6b777e.js" defer=""></script><script src="/_next/static/chunks/3854-e22ba4e017a7aef7.js" defer=""></script><script src="/_next/static/chunks/1984-6a16e24e0a04a5c1.js" defer=""></script><script src="/_next/static/chunks/7965-1b482061fb6d587e.js" defer=""></script><script src="/_next/static/chunks/7246-2a93084d41bda9aa.js" defer=""></script><script src="/_next/static/chunks/9324-3ceb946d290e20df.js" defer=""></script><script src="/_next/static/chunks/pages/index-db515e4d43448387.js" defer=""></script><script src="/_next/static/t9SeR6ts119RZqm1Vji9T/_buildManifest.js" defer=""></script><script src="/_next/static/t9SeR6ts119RZqm1Vji9T/_ssgManifest.js" defer=""></script></head><body class="bg-white dark:bg-[#111010] dark:text-white"><div id="__next"><script>!function(){try{var d=document.documentElement,c=d.classList;c.remove('light','dark');var e=localStorage.getItem('theme');if('system'===e||(!e&&true)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d.style.colorScheme = 'dark';c.add('dark')}else{d.style.colorScheme = 'light';c.add('light')}}else if(e){c.add(e|| '')}if(e==='light'||e==='dark')d.style.colorScheme=e}catch(e){}}()</script><div class="__variable_5f6112 __variable_44ff3b font-sans"><div class="flex min-h-screen flex-col"><nav aria-label="Skip navigation"></nav><header class="transition-colors duration-200 dark:text-gray-100 "><div class="top-0 mx-auto max-w-5xl px-2 py-3 sm:px-6 lg:mb-12 lg:px-8"><div class="relative flex h-16 justify-between"><div class="flex flex-1 items-center align-middle sm:justify-between"><span class="text-2xl font-bold !no-underline sm:mr-6 sm:mt-[-3px]">The David Dias</span><div class="hidden sm:flex sm:gap-x-5" data-testid="desktop-menu"><nav aria-label="Main navigation" class="flex gap-x-4"><a class="cursor-pointer hover:underline p-2 text-lg hover:text-black hover:underline dark:hover:text-white" href="/articles">Articles</a><a class="cursor-pointer hover:underline p-2 text-lg hover:text-black hover:underline dark:hover:text-white" href="/notes">Notes</a><a class="cursor-pointer hover:underline p-2 text-lg hover:text-black hover:underline dark:hover:text-white" href="/projects">Projects</a><a class="cursor-pointer hover:underline p-2 text-lg hover:text-black hover:underline dark:hover:text-white" href="/events">Events</a><a class="cursor-pointer hover:underline p-2 text-lg hover:text-black hover:underline dark:hover:text-white" href="/about">About Me</a></nav><div class="flex items-center justify-center space-x-4"></div></div></div><div class="absolute inset-y-0 right-0 flex items-center sm:static sm:inset-auto sm:pr-0 print:hidden"><div class="block sm:hidden"><nav data-testid="mobile-menu" aria-label="Mobile menu"><button aria-label="Toggle menu" aria-expanded="false" aria-controls="mobile-menu" type="button" class="flex h-8 w-8 items-center justify-center rounded-lg bg-gray-200 ring-gray-300 transition-all hover:ring-2 dark:bg-gray-600"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-800 dark:text-gray-200"><path fill-rule="evenodd" d="M3 7a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 13a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg></button><div class="mobile-header z-50 wrapper padding fixed inset-0 top-[81px] min-h-screen w-full origin-top-right flex-col bg-white bg-opacity-[0.96] py-6 backdrop-blur-lg backdrop-filter transition-colors duration-200 dark:bg-gray-900 dark:bg-opacity-80 hidden"><div class="absolute right-full top-0 h-screen w-[300%] bg-white bg-opacity-90 backdrop-blur-sm backdrop-filter dark:bg-gray-900 dark:bg-opacity-80"></div><div class="absolute left-0 top-full h-screen w-full bg-white bg-opacity-90 backdrop-blur-sm backdrop-filter dark:bg-gray-900 dark:bg-opacity-80"></div><div id="mobile-menu"><nav class="inset-y-1/2 mt-6 flex-grow text-center"><ul class="mt-12"><li><a class="cursor-pointer hover:underline title mb-5 mt-2 block text-black dark:text-white" href="/articles"><div class="text-2xl">Articles</div></a></li><li><a class="cursor-pointer hover:underline title mb-5 mt-2 block text-black dark:text-white" href="/notes"><div class="text-2xl">Notes</div></a></li><li><a class="cursor-pointer hover:underline title mb-5 mt-2 block text-black dark:text-white" href="/projects"><div class="text-2xl">Projects</div></a></li><li><a class="cursor-pointer hover:underline title mb-5 mt-2 block text-black dark:text-white" href="/events"><div class="text-2xl">Events</div></a></li><li><a class="cursor-pointer hover:underline title mb-5 mt-2 block text-black dark:text-white" href="/about"><div class="text-2xl">About Me</div></a></li></ul></nav><div class="item flex justify-center space-x-4"></div></div></div></nav></div></div></div></div></header><div class="top-0 mb-12 py-3"><div class="mx-auto max-w-5xl px-2 sm:px-6 lg:px-8"><main id="main" data-skip-link="main content"><section class="flex justify-between pb-10 pt-0 md:pb-20" aria-labelledby="hero-heading"><div class="text-left"><h1 id="hero-heading" class="mb-4 block transition-colors dark:text-white"><span class="block p-0 text-3xl font-light uppercase">Hello there!</span><span class="font-title text-5xl font-medium leading-snug lg:text-6xl"> I'm David Dias</span></h1><p class="max-w-xl text-base text-gray-500 sm:text-xl lg:px-0.5 lg:text-lg dark:text-gray-300">A Front-End Software Developer and content creator passionate about solving digital and human challenges. I thrive on building communities, exploring tech innovations, and discussing the intricacies of web development and expatriate life. <br/><br/>Let's connect and share ideas that shape the digital world!</p><div class="mt-5"><a href="https://thedaviddias.substack.com/" class="formkit-submit formkit-submit w-full cursor-pointer rounded-lg bg-indigo-800 px-3 py-2 text-center text-base font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-800 dark:hover:bg-blue-700 dark:focus:ring-blue-800 undefined">Keep in Touch!</a></div><ul class="justify-left mt-10 flex flex-row space-x-2"><li><a href="https://ddias.link/x" rel="me" target="_blank" class="cursor-pointer inline-flex hover:underline font-semibold dark:!text-white" aria-label="X"><svg role="img" viewBox="0 0 26 26" xmlns="https://www.w3.org/2000/svg" class="w-10 h-10 p-1.5 border rounded-full transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 border-gray-200 dark:border-gray-700" fill="currentColor"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path></svg></a></li><li><a href="https://ddias.link/bsky" rel="me" target="_blank" class="cursor-pointer inline-flex hover:underline font-semibold dark:!text-white" aria-label="BlueSky"><svg role="img" viewBox="0 0 26 26" xmlns="https://www.w3.org/2000/svg" class="w-10 h-10 p-1.5 border rounded-full transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 border-gray-200 dark:border-gray-700" fill="currentColor"><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"></path></svg></a></li><li><a href="https://ddias.link/linkedin" rel="me" target="_blank" class="cursor-pointer inline-flex hover:underline font-semibold dark:!text-white" aria-label="LinkedIn"><svg role="img" viewBox="0 0 26 26" xmlns="https://www.w3.org/2000/svg" class="w-10 h-10 p-1.5 border rounded-full transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 border-gray-200 dark:border-gray-700" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg></a></li><li><a href="https://ddias.link/github" rel="me" target="_blank" class="cursor-pointer inline-flex hover:underline font-semibold dark:!text-white" aria-label="Github"><svg role="img" viewBox="0 0 26 26" xmlns="https://www.w3.org/2000/svg" class="w-10 h-10 p-1.5 border rounded-full transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 border-gray-200 dark:border-gray-700" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></a></li><li><a href="https://ddias.link/discord" target="_blank" class="cursor-pointer inline-flex hover:underline font-semibold dark:!text-white" aria-label="Join my Discord"><svg role="img" viewBox="0 0 26 26" xmlns="https://www.w3.org/2000/svg" class="w-10 h-10 p-1.5 border rounded-full transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 border-gray-200 dark:border-gray-700" fill="currentColor"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path></svg></a></li></ul></div><div class="hidden lg:block"><img alt="Photo of David Dias in black and white" fetchpriority="high" width="250" height="250" decoding="async" data-nimg="1" class="h-60 w-60 rounded-full" style="color:transparent;max-width:100%;height:auto" srcSet="/_next/image?url=%2Fimages%2Fdavid-dias-round.jpg&w=256&q=75 1x, /_next/image?url=%2Fimages%2Fdavid-dias-round.jpg&w=640&q=75 2x" src="/_next/image?url=%2Fimages%2Fdavid-dias-round.jpg&w=640&q=75"/></div></section><section class="mb-5 border-none md:mb-10" aria-labelledby="latest-notes-heading"><div class="grid grid-cols-1 "><header class="mb-5"><h2 class="text-3xl font-bold undefined" id="latest-notes-heading">Latest notes</h2><p class="text-s pt-3 dark:text-gray-400">Explore a collection of short and concise notes I regularly publish.</p></header><div class="grid grid-cols-1 lg:col-span-2"><article class="relative border-t border-gray-200 pb-2 pt-2 dark:border-gray-700"><div class="flex flex-col gap-y-5 lg:flex-row lg:gap-x-5"><div class="w-full max-w-[37rem]"><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white"><a class="cursor-pointer hover:underline block tracking-tight dark:!text-gray-100" href="/notes/how-to-block-chatgpt-form-scraping-and-parsing-your-website">How To Block ChatGPT form Scraping and Parsing your Website?</a></h3></div><div class="flex-grow text-left lg:text-right"><div class="flex flex-wrap lg:justify-end"><div class="md:mb-5 md:mt-0"><ul class="flex flex-wrap items-center gap-x-3 gap-y-4 justify-center"><li><a class="cursor-pointer hover:underline" href="/tags/coding"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white inline-flex items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white">coding</div></a></li><li><a class="cursor-pointer hover:underline" href="/tags/ai"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white inline-flex items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white">ai</div></a></li></ul></div></div></div></div></article><article class="relative border-t border-gray-200 pb-2 pt-2 dark:border-gray-700"><div class="flex flex-col gap-y-5 lg:flex-row lg:gap-x-5"><div class="w-full max-w-[37rem]"><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white"><a class="cursor-pointer hover:underline block tracking-tight dark:!text-gray-100" href="/notes/philosophy-approach-user-first">The Philosophy and Approach of "User First"</a></h3></div><div class="flex-grow text-left lg:text-right"><div class="flex flex-wrap lg:justify-end"><div class="md:mb-5 md:mt-0"><ul class="flex flex-wrap items-center gap-x-3 gap-y-4 justify-center"><li><a class="cursor-pointer hover:underline" href="/tags/product"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white inline-flex items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white">product</div></a></li><li><a class="cursor-pointer hover:underline" href="/tags/business"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white inline-flex items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white">business</div></a></li></ul></div></div></div></div></article><article class="relative border-t border-gray-200 pb-2 pt-2 dark:border-gray-700"><div class="flex flex-col gap-y-5 lg:flex-row lg:gap-x-5"><div class="w-full max-w-[37rem]"><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white"><a class="cursor-pointer hover:underline block tracking-tight dark:!text-gray-100" href="/notes/how-to-convert-mp3-to-m4b-for-audiobooks">How to Convert MP3 to M4B for Audiobooks lovers, on MacOS?</a></h3></div><div class="flex-grow text-left lg:text-right"><div class="flex flex-wrap lg:justify-end"><div class="md:mb-5 md:mt-0"><ul class="flex flex-wrap items-center gap-x-3 gap-y-4 justify-center"><li><a class="cursor-pointer hover:underline" href="/tags/audio"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white inline-flex items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white">audio</div></a></li><li><a class="cursor-pointer hover:underline" href="/tags/application"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white inline-flex items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white">application</div></a></li></ul></div></div></div></div></article><article class="relative border-t border-gray-200 pb-2 pt-2 dark:border-gray-700"><div class="flex flex-col gap-y-5 lg:flex-row lg:gap-x-5"><div class="w-full max-w-[37rem]"><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white"><a class="cursor-pointer hover:underline block tracking-tight dark:!text-gray-100" href="/notes/stop-using-thematic-break-to-design-horizontal-line">Stop using the "<hr/>" tag to design a horizontal line!</a></h3></div><div class="flex-grow text-left lg:text-right"><div class="flex flex-wrap lg:justify-end"><div class="md:mb-5 md:mt-0"><ul class="flex flex-wrap items-center gap-x-3 gap-y-4 justify-center"><li><a class="cursor-pointer hover:underline" href="/tags/coding"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white inline-flex items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white">coding</div></a></li><li><a class="cursor-pointer hover:underline" href="/tags/html"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white inline-flex items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white">html</div></a></li></ul></div></div></div></div></article><article class="relative border-t border-gray-200 pb-2 pt-2 dark:border-gray-700"><div class="flex flex-col gap-y-5 lg:flex-row lg:gap-x-5"><div class="w-full max-w-[37rem]"><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white"><a class="cursor-pointer hover:underline block tracking-tight dark:!text-gray-100" href="/notes/how-to-fix-set-output-nvmrc-github-actions">How to fix "set-output" when reading nvmrc from the GitHub Actions?</a></h3></div><div class="flex-grow text-left lg:text-right"><div class="flex flex-wrap lg:justify-end"><div class="md:mb-5 md:mt-0"><ul class="flex flex-wrap items-center gap-x-3 gap-y-4 justify-center"><li><a class="cursor-pointer hover:underline" href="/tags/coding"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white inline-flex items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white">coding</div></a></li><li><a class="cursor-pointer hover:underline" href="/tags/npm"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white inline-flex items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white">npm</div></a></li><li><a class="cursor-pointer hover:underline" href="/tags/github"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white inline-flex items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white">github</div></a></li></ul></div></div></div></div></article><article class="relative border-t border-gray-200 pb-2 pt-2 dark:border-gray-700"><div class="flex flex-col gap-y-5 lg:flex-row lg:gap-x-5"><div class="w-full max-w-[37rem]"><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white"><a class="cursor-pointer hover:underline block tracking-tight dark:!text-gray-100" href="/notes/how-to-fix-post-pre-build-pnpm">How to fix "postbuild" and "prebuild" not working with pnpm?</a></h3></div><div class="flex-grow text-left lg:text-right"><div class="flex flex-wrap lg:justify-end"><div class="md:mb-5 md:mt-0"><ul class="flex flex-wrap items-center gap-x-3 gap-y-4 justify-center"><li><a class="cursor-pointer hover:underline" href="/tags/coding"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white inline-flex items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white">coding</div></a></li><li><a class="cursor-pointer hover:underline" href="/tags/pnpm"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white inline-flex items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white">pnpm</div></a></li><li><a class="cursor-pointer hover:underline" href="/tags/npm"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white inline-flex items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white">npm</div></a></li></ul></div></div></div></div></article></div><footer class="text-right"><a class="cursor-pointer hover:underline" href="/notes">→ View all notes</a></footer></div></section><section class="mb-5 border-none md:mb-10" aria-labelledby="latest-posts-heading"><div class="grid grid-cols-1"><header class="mb-5"><h2 class="text-3xl font-bold undefined" id="latest-posts-heading">Latest articles</h2><p class="text-s pt-3 dark:text-gray-400">Delve into insightful articles on web development, coding best practices, and cutting-edge tech innovations.</p></header><div class="grid grid-cols-1 lg:col-span-2"><article class="border-t border-gray-200 pb-6 pt-6 dark:border-gray-700"><div class="flex flex-col-reverse gap-5 lg:flex-row-reverse"><div class="w-full max-w-[44rem]"><div class="!mb-1"><a class="cursor-pointer hover:underline text-x inline-block pb-2 !font-semibold uppercase text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100" href="/articles/category/productivity"><span class="sr-only">Category: </span>Productivity</a></div><h3 class="leading-tight text-3xl font-oswald font-light tracking-tight !mt-0 text-black dark:text-white"><a class="cursor-pointer hover:underline inline-block tracking-tight dark:!text-gray-100" href="/articles/multi-purpose-developer-music-electronics-setup">My Ideal Desk Setup: A Personal Journey</a></h3><p class="!mt-4 !text-gray-600 dark:!text-gray-300">Comprehensive guide to building a versatile home office setup, featuring practical tips for developers and creatives. Learn how to create a productive workspace that combines coding, music production, and electronics workbench setups.</p></div><div class="relative h-[10rem] flex-grow text-left lg:text-right"><img alt="A modern, clutter-free desktop setup featuring two large monitors, a tablet displaying the time, an audio mixer, a compact microphone, a camera, a game console, and LED lighting." aria-hidden="true" loading="eager" width="236" height="160" decoding="async" data-nimg="1" class="rounded-md object-cover" style="color:transparent;width:100%;height:100%;object-fit:cover" sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, (max-width: 1536px) 33vw, 25vw" srcSet="/_next/image?url=%2Fimages%2Farticles%2Fideal-desk-setup-personal-journey%2Fdesk-setup-front.jpg&w=256&q=75 256w, /_next/image?url=%2Fimages%2Farticles%2Fideal-desk-setup-personal-journey%2Fdesk-setup-front.jpg&w=384&q=75 384w, /_next/image?url=%2Fimages%2Farticles%2Fideal-desk-setup-personal-journey%2Fdesk-setup-front.jpg&w=640&q=75 640w, /_next/image?url=%2Fimages%2Farticles%2Fideal-desk-setup-personal-journey%2Fdesk-setup-front.jpg&w=750&q=75 750w, /_next/image?url=%2Fimages%2Farticles%2Fideal-desk-setup-personal-journey%2Fdesk-setup-front.jpg&w=828&q=75 828w, /_next/image?url=%2Fimages%2Farticles%2Fideal-desk-setup-personal-journey%2Fdesk-setup-front.jpg&w=1080&q=75 1080w, /_next/image?url=%2Fimages%2Farticles%2Fideal-desk-setup-personal-journey%2Fdesk-setup-front.jpg&w=1200&q=75 1200w, /_next/image?url=%2Fimages%2Farticles%2Fideal-desk-setup-personal-journey%2Fdesk-setup-front.jpg&w=1920&q=75 1920w, /_next/image?url=%2Fimages%2Farticles%2Fideal-desk-setup-personal-journey%2Fdesk-setup-front.jpg&w=2048&q=75 2048w, /_next/image?url=%2Fimages%2Farticles%2Fideal-desk-setup-personal-journey%2Fdesk-setup-front.jpg&w=3840&q=75 3840w" src="/_next/image?url=%2Fimages%2Farticles%2Fideal-desk-setup-personal-journey%2Fdesk-setup-front.jpg&w=3840&q=75"/></div></div></article><article class="border-t border-gray-200 pb-6 pt-6 dark:border-gray-700"><div class="flex flex-col-reverse gap-5 lg:flex-row-reverse"><div class="w-full max-w-[44rem]"><div class="!mb-1"><a class="cursor-pointer hover:underline text-x inline-block pb-2 !font-semibold uppercase text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100" href="/articles/category/side-project"><span class="sr-only">Category: </span>Side project</a></div><h3 class="leading-tight text-3xl font-oswald font-light tracking-tight !mt-0 text-black dark:text-white"><a class="cursor-pointer hover:underline inline-block tracking-tight dark:!text-gray-100" href="/articles/frontend-developer-decade-projects-evolution">Looking Back on My Web Development Journey: A Decade of Projects</a></h3><p class="!mt-4 !text-gray-600 dark:!text-gray-300">Dive into my decade-long journey in web development, chronicling key projects that have shaped my career and personal growth. From my first parish website to open-source initiatives and podcasts, explore the evolution of my skills and the diverse range of projects that have defined my path in the digital world.</p></div><div class="relative h-[10rem] flex-grow text-left lg:text-right"><img alt="A winding road cuts through lush green hills under a clear sky, with the sun casting a warm glow over the landscape. The scene captures the serene beauty of nature with rolling hills, rocky outcrops, and the sun illuminating the horizon." aria-hidden="true" loading="eager" width="236" height="160" decoding="async" data-nimg="1" class="rounded-md object-cover" style="color:transparent;width:100%;height:100%;object-fit:cover" sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, (max-width: 1536px) 33vw, 25vw" srcSet="/_next/image?url=%2Fimages%2Farticles%2Fdecade-web-development-personal-journey%2Ffeatured.jpg&w=256&q=75 256w, /_next/image?url=%2Fimages%2Farticles%2Fdecade-web-development-personal-journey%2Ffeatured.jpg&w=384&q=75 384w, /_next/image?url=%2Fimages%2Farticles%2Fdecade-web-development-personal-journey%2Ffeatured.jpg&w=640&q=75 640w, /_next/image?url=%2Fimages%2Farticles%2Fdecade-web-development-personal-journey%2Ffeatured.jpg&w=750&q=75 750w, /_next/image?url=%2Fimages%2Farticles%2Fdecade-web-development-personal-journey%2Ffeatured.jpg&w=828&q=75 828w, /_next/image?url=%2Fimages%2Farticles%2Fdecade-web-development-personal-journey%2Ffeatured.jpg&w=1080&q=75 1080w, /_next/image?url=%2Fimages%2Farticles%2Fdecade-web-development-personal-journey%2Ffeatured.jpg&w=1200&q=75 1200w, /_next/image?url=%2Fimages%2Farticles%2Fdecade-web-development-personal-journey%2Ffeatured.jpg&w=1920&q=75 1920w, /_next/image?url=%2Fimages%2Farticles%2Fdecade-web-development-personal-journey%2Ffeatured.jpg&w=2048&q=75 2048w, /_next/image?url=%2Fimages%2Farticles%2Fdecade-web-development-personal-journey%2Ffeatured.jpg&w=3840&q=75 3840w" src="/_next/image?url=%2Fimages%2Farticles%2Fdecade-web-development-personal-journey%2Ffeatured.jpg&w=3840&q=75"/></div></div></article><article class="border-t border-gray-200 pb-6 pt-6 dark:border-gray-700"><div class="flex flex-col-reverse gap-5 lg:flex-row-reverse"><div class="w-full max-w-[44rem]"><div class="!mb-1"><a class="cursor-pointer hover:underline text-x inline-block pb-2 !font-semibold uppercase text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100" href="/articles/category/productivity"><span class="sr-only">Category: </span>Productivity</a></div><h3 class="leading-tight text-3xl font-oswald font-light tracking-tight !mt-0 text-black dark:text-white"><a class="cursor-pointer hover:underline inline-block tracking-tight dark:!text-gray-100" href="/articles/raycast-developer-productivity-apps">My Favorite Raycast Apps for Better Development</a></h3><p class="!mt-4 !text-gray-600 dark:!text-gray-300">Raycast is one of the best tools for supercharging your productivity on Mac, offering a wide range of customizable commands and third-party integrations. In this article, I'll share the top 10 Raycast applications I use daily, demonstrating how they can transform you into a super developer by streamlining your workflow and boosting efficiency.</p></div><div class="relative h-[10rem] flex-grow text-left lg:text-right"><img alt="A search bar shows results for "1Password" in a macOS launcher. Suggestions include applications like 1Password, Google Chrome, and FaceTime, alongside commands like "Search Deployments" and "Search Documentation."" aria-hidden="true" loading="lazy" width="236" height="160" decoding="async" data-nimg="1" class="rounded-md object-cover" style="color:transparent;width:100%;height:100%;object-fit:cover" sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, (max-width: 1536px) 33vw, 25vw" srcSet="/_next/image?url=%2Fimages%2Farticles%2Fraycast-applications-super-developer%2Ffeatured.jpg&w=256&q=75 256w, /_next/image?url=%2Fimages%2Farticles%2Fraycast-applications-super-developer%2Ffeatured.jpg&w=384&q=75 384w, /_next/image?url=%2Fimages%2Farticles%2Fraycast-applications-super-developer%2Ffeatured.jpg&w=640&q=75 640w, /_next/image?url=%2Fimages%2Farticles%2Fraycast-applications-super-developer%2Ffeatured.jpg&w=750&q=75 750w, /_next/image?url=%2Fimages%2Farticles%2Fraycast-applications-super-developer%2Ffeatured.jpg&w=828&q=75 828w, /_next/image?url=%2Fimages%2Farticles%2Fraycast-applications-super-developer%2Ffeatured.jpg&w=1080&q=75 1080w, /_next/image?url=%2Fimages%2Farticles%2Fraycast-applications-super-developer%2Ffeatured.jpg&w=1200&q=75 1200w, /_next/image?url=%2Fimages%2Farticles%2Fraycast-applications-super-developer%2Ffeatured.jpg&w=1920&q=75 1920w, /_next/image?url=%2Fimages%2Farticles%2Fraycast-applications-super-developer%2Ffeatured.jpg&w=2048&q=75 2048w, /_next/image?url=%2Fimages%2Farticles%2Fraycast-applications-super-developer%2Ffeatured.jpg&w=3840&q=75 3840w" src="/_next/image?url=%2Fimages%2Farticles%2Fraycast-applications-super-developer%2Ffeatured.jpg&w=3840&q=75"/></div></div></article><article class="border-t border-gray-200 pb-6 pt-6 dark:border-gray-700"><div class="flex flex-col-reverse gap-5 lg:flex-row-reverse"><div class="w-full max-w-[44rem]"><div class="!mb-1"><a class="cursor-pointer hover:underline text-x inline-block pb-2 !font-semibold uppercase text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100" href="/articles/category/web-development"><span class="sr-only">Category: </span>Web development</a></div><h3 class="leading-tight text-3xl font-oswald font-light tracking-tight !mt-0 text-black dark:text-white"><a class="cursor-pointer hover:underline inline-block tracking-tight dark:!text-gray-100" href="/articles/frontend-experience-vs-user-testing">Why Frontend Experience Matters More Than Just User Testing</a></h3><p class="!mt-4 !text-gray-600 dark:!text-gray-300">Over 10 years of experience shows: collaboration between frontend developers and designers is key. Let's value insights from both for digital success!</p></div><div class="relative h-[10rem] flex-grow text-left lg:text-right"><img alt="Top view of a cluttered work table with four front-end developers using laptops. The table is filled with items including notebooks, headphones, a bowl of snacks, a teapot, a water bottle, and a smartphone. Various electronic devices and office supplies are scattered around amidst the technology-focused environment in Toronto." aria-hidden="true" loading="lazy" width="236" height="160" decoding="async" data-nimg="1" class="rounded-md object-cover" style="color:transparent;width:100%;height:100%;object-fit:cover" sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, (max-width: 1536px) 33vw, 25vw" srcSet="/_next/image?url=%2Fimages%2Farticles%2Fbeyond-user-testing-leveraging-frontend-experience%2Ftable-computers.jpg&w=256&q=75 256w, /_next/image?url=%2Fimages%2Farticles%2Fbeyond-user-testing-leveraging-frontend-experience%2Ftable-computers.jpg&w=384&q=75 384w, /_next/image?url=%2Fimages%2Farticles%2Fbeyond-user-testing-leveraging-frontend-experience%2Ftable-computers.jpg&w=640&q=75 640w, /_next/image?url=%2Fimages%2Farticles%2Fbeyond-user-testing-leveraging-frontend-experience%2Ftable-computers.jpg&w=750&q=75 750w, /_next/image?url=%2Fimages%2Farticles%2Fbeyond-user-testing-leveraging-frontend-experience%2Ftable-computers.jpg&w=828&q=75 828w, /_next/image?url=%2Fimages%2Farticles%2Fbeyond-user-testing-leveraging-frontend-experience%2Ftable-computers.jpg&w=1080&q=75 1080w, /_next/image?url=%2Fimages%2Farticles%2Fbeyond-user-testing-leveraging-frontend-experience%2Ftable-computers.jpg&w=1200&q=75 1200w, /_next/image?url=%2Fimages%2Farticles%2Fbeyond-user-testing-leveraging-frontend-experience%2Ftable-computers.jpg&w=1920&q=75 1920w, /_next/image?url=%2Fimages%2Farticles%2Fbeyond-user-testing-leveraging-frontend-experience%2Ftable-computers.jpg&w=2048&q=75 2048w, /_next/image?url=%2Fimages%2Farticles%2Fbeyond-user-testing-leveraging-frontend-experience%2Ftable-computers.jpg&w=3840&q=75 3840w" src="/_next/image?url=%2Fimages%2Farticles%2Fbeyond-user-testing-leveraging-frontend-experience%2Ftable-computers.jpg&w=3840&q=75"/></div></div></article><article class="border-t border-gray-200 pb-6 pt-6 dark:border-gray-700"><div class="flex flex-col-reverse gap-5 lg:flex-row-reverse"><div class="w-full max-w-[44rem]"><div class="!mb-1"><a class="cursor-pointer hover:underline text-x inline-block pb-2 !font-semibold uppercase text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100" href="/articles/category/web-development"><span class="sr-only">Category: </span>Web development</a></div><h3 class="leading-tight text-3xl font-oswald font-light tracking-tight !mt-0 text-black dark:text-white"><a class="cursor-pointer hover:underline inline-block tracking-tight dark:!text-gray-100" href="/articles/frontend-designer-collaboration-strategies">How Front-End Developers and UI/UX Designers Can Work Better Together</a></h3><p class="!mt-4 !text-gray-600 dark:!text-gray-300">Comprehensive guide to improving collaboration between Front-End Developers and UI/UX Designers. Learn practical strategies for better communication, workflow optimization, and creating successful web projects through effective teamwork.</p></div><div class="relative h-[10rem] flex-grow text-left lg:text-right"><img alt="Aerial view of four rowers in a boat, seen rowing in coordination against a dark background. Their oars are outstretched, and the rowers wear brightly colored clothing, highlighting their synchronized effort." aria-hidden="true" loading="lazy" width="236" height="160" decoding="async" data-nimg="1" class="rounded-md object-cover" style="color:transparent;width:100%;height:100%;object-fit:cover" sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, (max-width: 1536px) 33vw, 25vw" srcSet="/_next/image?url=%2Fimages%2Farticles%2Fhow-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together%2Ffeatured.jpeg&w=256&q=75 256w, /_next/image?url=%2Fimages%2Farticles%2Fhow-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together%2Ffeatured.jpeg&w=384&q=75 384w, /_next/image?url=%2Fimages%2Farticles%2Fhow-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together%2Ffeatured.jpeg&w=640&q=75 640w, /_next/image?url=%2Fimages%2Farticles%2Fhow-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together%2Ffeatured.jpeg&w=750&q=75 750w, /_next/image?url=%2Fimages%2Farticles%2Fhow-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together%2Ffeatured.jpeg&w=828&q=75 828w, /_next/image?url=%2Fimages%2Farticles%2Fhow-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together%2Ffeatured.jpeg&w=1080&q=75 1080w, /_next/image?url=%2Fimages%2Farticles%2Fhow-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together%2Ffeatured.jpeg&w=1200&q=75 1200w, /_next/image?url=%2Fimages%2Farticles%2Fhow-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together%2Ffeatured.jpeg&w=1920&q=75 1920w, /_next/image?url=%2Fimages%2Farticles%2Fhow-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together%2Ffeatured.jpeg&w=2048&q=75 2048w, /_next/image?url=%2Fimages%2Farticles%2Fhow-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together%2Ffeatured.jpeg&w=3840&q=75 3840w" src="/_next/image?url=%2Fimages%2Farticles%2Fhow-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together%2Ffeatured.jpeg&w=3840&q=75"/></div></div></article></div><footer class="text-right"><a class="cursor-pointer hover:underline" href="/articles">→ View all articles</a></footer></div></section><section class="mb-10" aria-labelledby="featured-book-heading"><header class="mb-5"><h2 class="text-3xl font-bold undefined" id="featured-book-heading">Upcoming Book</h2><p class="text-s pt-3 dark:text-gray-400">Subscribe to get notified when my upcoming book is available! Get early access to essential tips for junior developers!</p></header><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><div class="flex flex-col md:flex-row justify-start"><div class="flex justify-center"><img alt="Book cover" loading="lazy" width="200" height="200" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Fessential-tips-junior-devs.png&w=256&q=75 1x, /_next/image?url=%2Fimages%2Fessential-tips-junior-devs.png&w=640&q=75 2x" src="/_next/image?url=%2Fimages%2Fessential-tips-junior-devs.png&w=640&q=75"/></div><div class="mb-4 ml-6 p-4 flex flex-col max-w-xs"><h3 class="text-xl font-bold dark:text-white">Essential Tips for Junior Developers</h3><p class="mt-2 text-gray-600 dark:text-gray-300">A comprehensive guide to help junior developers navigate their early career challenges and accelerate their professional growth.</p><footer class="mt-4"><a href="https://ddias.link/book" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline cursor-pointer rounded-lg bg-indigo-800 px-3 py-2 text-center text-base font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-800 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Notify me when available →</a></footer></div></div></div></section><section class="mb-5 border-none md:mb-10" aria-labelledby="latest-projects-heading"><header class="mb-5"><h2 class="text-3xl font-bold undefined" id="latest-projects-heading">Latest projects</h2><p class="text-s pt-3 dark:text-gray-400">Discover the projects I've contributed to or currently working on.</p></header><div class="grid grid-cols-1 gap-3 sm:grid-cols-2 mx-auto"><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><article class="group relative flex flex-col overflow-hidden border border-gray-300 dark:border-gray-700 p-4 rounded-lg hover:shadow-lg transition-all duration-300 ease-out h-full dark:hover:shadow-gray-800"><div class="flex flex-col gap-4 h-full"><div><header><div class="mb-4"><img alt="Screenshot of the website cards on the website" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" class="h-60 w-full overflow-hidden object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Fprojects%2Fllms-txt-hub%2Fllms-txt-hub.webp&w=640&q=75 1x, /_next/image?url=%2Fimages%2Fprojects%2Fllms-txt-hub%2Fllms-txt-hub.webp&w=1080&q=75 2x" src="/_next/image?url=%2Fimages%2Fprojects%2Fllms-txt-hub%2Fllms-txt-hub.webp&w=1080&q=75"/></div><div class="flex items-start justify-between"><div><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white"><a class="cursor-pointer hover:underline after:absolute after:inset-0 after:content-[''] relative z-10 block tracking-tight group-hover:text-black dark:text-gray-100 dark:group-hover:text-white group-hover:underline" href="/projects/llms-txt-hub">llms.txt hub</a></h3><p class="text-sm text-gray-600 dark:text-gray-400"><time class="font-sans text-xs">February 2025 - Present</time></p></div><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-gray-400 dark:text-white dark:ring-gray-700"><svg class="h-1.5 w-1.5 fill-yellow-400" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>in-progress</span></div></header><p class="text-s pt-3">llms.txt hub is a comprehensive collection of llms.txt implementations and resources for LLM-powered tools and services.</p></div><div class="mt-auto flex flex-wrap gap-2"><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Next.js</div><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Tailwind CSS</div><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Shadcn UI</div></div><div class="pr-2 pb-2"><div class="flex flex-row flex-wrap items-start gap-2"><a href="https://llmstxthub.com" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline relative z-20"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white flex gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-5 w-5"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>Website</div></a><a href="https://git.new/llmstxthub" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline relative z-20"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white flex gap-1"><svg role="img" viewBox="0 0 26 26" xmlns="https://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>Source</div></a></div></div></div></article></div><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><article class="group relative flex flex-col overflow-hidden border border-gray-300 dark:border-gray-700 p-4 rounded-lg hover:shadow-lg transition-all duration-300 ease-out h-full dark:hover:shadow-gray-800"><div class="flex flex-col gap-4 h-full"><div><header><div class="mb-4"><img alt="Screenshot of the UX Patterns for Developers website" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" class="h-60 w-full overflow-hidden object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Fprojects%2Fux-patterns-developers%2Fux-patterns-developers.webp&w=640&q=75 1x, /_next/image?url=%2Fimages%2Fprojects%2Fux-patterns-developers%2Fux-patterns-developers.webp&w=1080&q=75 2x" src="/_next/image?url=%2Fimages%2Fprojects%2Fux-patterns-developers%2Fux-patterns-developers.webp&w=1080&q=75"/></div><div class="flex items-start justify-between"><div><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white"><a class="cursor-pointer hover:underline after:absolute after:inset-0 after:content-[''] relative z-10 block tracking-tight group-hover:text-black dark:text-gray-100 dark:group-hover:text-white group-hover:underline" href="/projects/ux-patterns-developers">UX Patterns for Developers</a></h3><p class="text-sm text-gray-600 dark:text-gray-400"><time class="font-sans text-xs">December 2024 - Present</time></p></div><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-gray-400 dark:text-white dark:ring-gray-700"><svg class="h-1.5 w-1.5 fill-yellow-400" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>in-progress</span></div></header><p class="text-s pt-3">Collection of UX patterns for everyone but specially towards developers who want to understand how to build effective UI components accessible and usable.</p></div><div class="mt-auto flex flex-wrap gap-2"><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Next.js</div><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Tailwind CSS</div><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Shadcn UI</div><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Nextra</div><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Markdown</div></div><div class="pr-2 pb-2"><div class="flex flex-row flex-wrap items-start gap-2"><a href="https://uxpatterns.dev" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline relative z-20"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white flex gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-5 w-5"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>Website</div></a><a href="https://git.new/uxpatterns" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline relative z-20"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white flex gap-1"><svg role="img" viewBox="0 0 26 26" xmlns="https://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>Source</div></a></div></div></div></article></div><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><article class="group relative flex flex-col overflow-hidden border border-gray-300 dark:border-gray-700 p-4 rounded-lg hover:shadow-lg transition-all duration-300 ease-out h-full dark:hover:shadow-gray-800"><div class="flex flex-col gap-4 h-full"><div><header><div class="mb-4"><img alt="Screenshot of the Links Base website" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" class="h-60 w-full overflow-hidden object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Fprojects%2Flinks-base%2Flinks-base.webp&w=640&q=75 1x, /_next/image?url=%2Fimages%2Fprojects%2Flinks-base%2Flinks-base.webp&w=1080&q=75 2x" src="/_next/image?url=%2Fimages%2Fprojects%2Flinks-base%2Flinks-base.webp&w=1080&q=75"/></div><div class="flex items-start justify-between"><div><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white"><a class="cursor-pointer hover:underline after:absolute after:inset-0 after:content-[''] relative z-10 block tracking-tight group-hover:text-black dark:text-gray-100 dark:group-hover:text-white group-hover:underline" href="/projects/links-base">Links Base</a></h3><p class="text-sm text-gray-600 dark:text-gray-400"><time class="font-sans text-xs">November 2024 - Present</time></p></div><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-gray-400 dark:text-white dark:ring-gray-700"><svg class="h-1.5 w-1.5 fill-yellow-400" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>in-progress</span></div></header><p class="text-s pt-3">Links Base is a modern, static link management application designed to help teams organize and access their important links efficiently.</p></div><div class="mt-auto flex flex-wrap gap-2"><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Next.js</div><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Tailwind CSS</div><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Shadcn UI</div><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Magic UI</div></div><div class="pr-2 pb-2"><div class="flex flex-row flex-wrap items-start gap-2"><a href="https://demo.linksbase.app" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline relative z-20"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white flex gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-5 w-5"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>Website</div></a><a href="https://git.new/linksbase" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline relative z-20"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white flex gap-1"><svg role="img" viewBox="0 0 26 26" xmlns="https://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>Source</div></a></div></div></div></article></div><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><article class="group relative flex flex-col overflow-hidden border border-gray-300 dark:border-gray-700 p-4 rounded-lg hover:shadow-lg transition-all duration-300 ease-out h-full dark:hover:shadow-gray-800"><div class="flex flex-col gap-4 h-full"><div><header><div class="mb-4"><video autoplay="" src="/images/projects/indie-dev-toolkit/indie-dev-toolkit.mp4" loop="" muted="" playsinline="" class="pointer-events-none mx-auto h-60 w-full object-cover object-top"></video></div><div class="flex items-start justify-between"><div><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white"><a class="cursor-pointer hover:underline after:absolute after:inset-0 after:content-[''] relative z-10 block tracking-tight group-hover:text-black dark:text-gray-100 dark:group-hover:text-white group-hover:underline" href="/projects/indie-dev-toolkit">Indie Dev Toolkit</a></h3><p class="text-sm text-gray-600 dark:text-gray-400"><time class="font-sans text-xs">October 2024</time></p></div><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-gray-400 dark:text-white dark:ring-gray-700"><svg class="h-1.5 w-1.5 fill-green-400" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>completed</span></div></header><p class="text-s pt-3">A curated list of tools and resources for indie hackers, solo founders, and bootstrapped startups.</p></div><div class="mt-auto flex flex-wrap gap-2"><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Markdown</div></div><div class="pr-2 pb-2"><div class="flex flex-row flex-wrap items-start gap-2"><a href="https://git.new/linksbase" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline relative z-20"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white flex gap-1"><svg role="img" viewBox="0 0 26 26" xmlns="https://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>Source</div></a></div></div></div></article></div><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><article class="group relative flex flex-col overflow-hidden border border-gray-300 dark:border-gray-700 p-4 rounded-lg hover:shadow-lg transition-all duration-300 ease-out h-full dark:hover:shadow-gray-800"><div class="flex flex-col gap-4 h-full"><div><header><div class="mb-4"><img alt="Screenshot of the Erreur 200 website" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" class="h-60 w-full overflow-hidden object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Fprojects%2Ferreur-200%2Ferreur-200.webp&w=640&q=75 1x, /_next/image?url=%2Fimages%2Fprojects%2Ferreur-200%2Ferreur-200.webp&w=1080&q=75 2x" src="/_next/image?url=%2Fimages%2Fprojects%2Ferreur-200%2Ferreur-200.webp&w=1080&q=75"/></div><div class="flex items-start justify-between"><div><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white"><a class="cursor-pointer hover:underline after:absolute after:inset-0 after:content-[''] relative z-10 block tracking-tight group-hover:text-black dark:text-gray-100 dark:group-hover:text-white group-hover:underline" href="/projects/erreur-200">Erreur 200</a></h3><p class="text-sm text-gray-600 dark:text-gray-400"><time class="font-sans text-xs">March 2024</time></p></div><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-gray-400 dark:text-white dark:ring-gray-700"><svg class="h-1.5 w-1.5 fill-green-400" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>completed</span></div></header><p class="text-s pt-3">Erreur 200 is a podcast dedicated to people who make the web animated by two French developers, one living in Canada (David Dias), the other in England (Jean-Rémy Duboc)</p></div><div class="mt-auto flex flex-wrap gap-2"><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Next.js</div><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Tailwind CSS</div></div><div class="pr-2 pb-2"><div class="flex flex-row flex-wrap items-start gap-2"><a href="https://erreur200.com" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline relative z-20"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white flex gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-5 w-5"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>Website</div></a><a href="https://git.new/linksbase" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline relative z-20"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white flex gap-1"><svg role="img" viewBox="0 0 26 26" xmlns="https://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>Source</div></a></div></div></div></article></div><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><article class="group relative flex flex-col overflow-hidden border border-gray-300 dark:border-gray-700 p-4 rounded-lg hover:shadow-lg transition-all duration-300 ease-out h-full dark:hover:shadow-gray-800"><div class="flex flex-col gap-4 h-full"><div><header><div class="mb-4"><img alt="Screenshot of the World Web Stories website" loading="lazy" width="500" height="300" decoding="async" data-nimg="1" class="h-60 w-full overflow-hidden object-cover object-top" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Fprojects%2Fworld-web-stories%2Fworld-web-stories.webp&w=640&q=75 1x, /_next/image?url=%2Fimages%2Fprojects%2Fworld-web-stories%2Fworld-web-stories.webp&w=1080&q=75 2x" src="/_next/image?url=%2Fimages%2Fprojects%2Fworld-web-stories%2Fworld-web-stories.webp&w=1080&q=75"/></div><div class="flex items-start justify-between"><div><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white"><a class="cursor-pointer hover:underline after:absolute after:inset-0 after:content-[''] relative z-10 block tracking-tight group-hover:text-black dark:text-gray-100 dark:group-hover:text-white group-hover:underline" href="/projects/world-web-stories">World Web Stories</a></h3><p class="text-sm text-gray-600 dark:text-gray-400"><time class="font-sans text-xs">March 2021 - Present</time></p></div><span class="inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-gray-400 dark:text-white dark:ring-gray-700"><svg class="h-1.5 w-1.5 fill-green-400" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3"></circle></svg>completed</span></div></header><p class="text-s pt-3">World Web Stories is podcast about web enthusiasts around the world. It's a podcast that features interviews with web developers, designers, entrepreneurs and people who are passionate about the web.</p></div><div class="mt-auto flex flex-wrap gap-2"><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Gatsby</div><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Airtable</div><div class="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground text-[12px]">Netlify</div></div><div class="pr-2 pb-2"><div class="flex flex-row flex-wrap items-start gap-2"><a href="https://worldwebstories.com/" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline relative z-20"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white flex gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe h-5 w-5"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>Website</div></a></div></div></div></article></div></div><footer class="mt-5 text-right"><a class="cursor-pointer hover:underline" href="/projects">→ View all my projects</a></footer></section><section class="mb-10" aria-labelledby="testimonials-heading"><header class="mb-5"><h2 id="testimonials-heading" class="text-3xl font-bold">What People Say About Me</h2><p class="text-gray-600 dark:text-gray-400 mt-2">Testimonials from people I've worked with and mentored</p></header><div class="columns-1 gap-4 sm:columns-2 lg:columns-3"><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-4 size-full break-inside-avoid flex flex-col"><div class="flex items-center gap-4 mb-4"><img alt="Makan Dehizadeh" loading="lazy" width="48" height="48" decoding="async" data-nimg="1" class="rounded-full object-cover h-12 w-12" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Ftestimonials%2Fmakan-dehizadeh.webp&w=48&q=75 1x, /_next/image?url=%2Fimages%2Ftestimonials%2Fmakan-dehizadeh.webp&w=96&q=75 2x" src="/_next/image?url=%2Fimages%2Ftestimonials%2Fmakan-dehizadeh.webp&w=96&q=75"/><div><h3 class="font-medium text-lg"><a href="https://www.linkedin.com/in/makan-d" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline">Makan Dehizadeh<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a> <span class="text-gray-600 dark:text-gray-400">🇨🇦</span></h3><p class="text-sm text-gray-600 dark:text-gray-400">Software Engineer at Kijiji</p></div></div><blockquote class="text-gray-700 dark:text-gray-300 font-light">I had the pleasure of working closely with David on multiple occasions during my time at Kijiji, and I can wholeheartedly vouch for his exceptional skills and dedication. David is, without a doubt, one of the hardest-working professionals I've had the privilege of collaborating with. <b>David has a passion for web development, helping make sure Kijiji was on top of it's web accessiblity, internal developer experiences, and more.</b> His contributions will undoubtedly make a significant and lasting impact.</blockquote><div class="mt-4 text-right"><a href="https://www.linkedin.com/in/thedaviddias/" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline text-base">View on linkedin<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></div></div></div><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-4 size-full break-inside-avoid flex flex-col"><div class="flex items-center gap-4 mb-4"><img alt="Ivan Martyushev" loading="lazy" width="48" height="48" decoding="async" data-nimg="1" class="rounded-full object-cover h-12 w-12" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Ftestimonials%2Fivan-martyushev.webp&w=48&q=75 1x, /_next/image?url=%2Fimages%2Ftestimonials%2Fivan-martyushev.webp&w=96&q=75 2x" src="/_next/image?url=%2Fimages%2Ftestimonials%2Fivan-martyushev.webp&w=96&q=75"/><div><h3 class="font-medium text-lg"><a href="https://www.linkedin.com/in/ivanmartyushev/" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline">Ivan Martyushev<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a> <span class="text-gray-600 dark:text-gray-400">🇨🇦</span></h3><p class="text-sm text-gray-600 dark:text-gray-400">Senior Software Engineer at Loblaw Digital</p></div></div><blockquote class="text-gray-700 dark:text-gray-300 font-light">David is a great asset on any Engineering team. He is very proactive in creating the right processes and frameworks to ensure the team is set up for success. From new CI/CD pipelines to writing missing documentation and advocating for best development practices - <b>David is always on top of things and would resolve any issues before you even know you had them.</b> He has great communication skills and knows how to moderate meetings and overall is a nice person to just chat about anything!</blockquote><div class="mt-4 text-right"><a href="https://www.linkedin.com/in/thedaviddias/" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline text-base">View on linkedin<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></div></div></div><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-4 size-full break-inside-avoid flex flex-col"><div class="flex items-center gap-4 mb-4"><img alt="Kyle Aikens" loading="lazy" width="48" height="48" decoding="async" data-nimg="1" class="rounded-full object-cover h-12 w-12" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Ftestimonials%2Fkyle-aikens.webp&w=48&q=75 1x, /_next/image?url=%2Fimages%2Ftestimonials%2Fkyle-aikens.webp&w=96&q=75 2x" src="/_next/image?url=%2Fimages%2Ftestimonials%2Fkyle-aikens.webp&w=96&q=75"/><div><h3 class="font-medium text-lg"><a href="https://www.linkedin.com/in/kyleaikens/" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline">Kyle Aikens<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a> <span class="text-gray-600 dark:text-gray-400">🇨🇦</span></h3><p class="text-sm text-gray-600 dark:text-gray-400">Lead Product Designer </p></div></div><blockquote class="text-gray-700 dark:text-gray-300 font-light">David is a standout engineer & I was delighted to consider him both a friend & colleague during our tenure together. He has the unique trait of not only being able to solve engineering challenges but is also able to emphasize with users & identify problems in the UX flow of a product. <b>David's contagious personality & thoughtful conversation will be missed.</b> I highly recommend David for anyone looking for a team-player UX focused engineer.</blockquote><div class="mt-4 text-right"><a href="https://www.linkedin.com/in/thedaviddias/" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline text-base">View on linkedin<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></div></div></div><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-4 size-full break-inside-avoid flex flex-col"><div class="flex items-center gap-4 mb-4"><img alt="Alexandra Heimiller" loading="lazy" width="48" height="48" decoding="async" data-nimg="1" class="rounded-full object-cover h-12 w-12" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Ftestimonials%2Falexandra-heimiller.webp&w=48&q=75 1x, /_next/image?url=%2Fimages%2Ftestimonials%2Falexandra-heimiller.webp&w=96&q=75 2x" src="/_next/image?url=%2Fimages%2Ftestimonials%2Falexandra-heimiller.webp&w=96&q=75"/><div><h3 class="font-medium text-lg"><a href="https://www.linkedin.com/in/alexandraheimiller/" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline">Alexandra Heimiller<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a> <span class="text-gray-600 dark:text-gray-400">🇨🇦</span></h3><p class="text-sm text-gray-600 dark:text-gray-400">Product Director </p></div></div><blockquote class="text-gray-700 dark:text-gray-300 font-light">David has an endless thirst for knowledge, and brings enthusiasm and vast skills to his work. His work ethic is unsurpassed, and his presence fosters positive team morale. <b>His focus on the customer, initiative, and creative problem solving results in great product development.</b></blockquote><div class="mt-4 text-right"><a href="https://www.linkedin.com/in/thedaviddias/" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline text-base">View on linkedin<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></div></div></div><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-4 size-full break-inside-avoid flex flex-col"><div class="flex items-center gap-4 mb-4"><img alt="Daniil Molodkov" loading="lazy" width="48" height="48" decoding="async" data-nimg="1" class="rounded-full object-cover h-12 w-12" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Ftestimonials%2Fdaniil-molodkov.webp&w=48&q=75 1x, /_next/image?url=%2Fimages%2Ftestimonials%2Fdaniil-molodkov.webp&w=96&q=75 2x" src="/_next/image?url=%2Fimages%2Ftestimonials%2Fdaniil-molodkov.webp&w=96&q=75"/><div><h3 class="font-medium text-lg"><a href="https://www.linkedin.com/in/daniil-molodkov" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline">Daniil Molodkov<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a> <span class="text-gray-600 dark:text-gray-400">🇨🇦</span></h3><p class="text-sm text-gray-600 dark:text-gray-400">Software Engineer and Educator at Brainstation</p></div></div><blockquote class="text-gray-700 dark:text-gray-300 font-light">David has a wealth of broad experience in many aspects of Front-End development, easily becoming a go-to person for suggestions in current state of the Front End industry; what libraries, approaches and patterns are battle tested and worthy of attention. <b>Very passionate, curious and open to ideas; having discussions with David about the best way to do things is easy, approachable and well-weighted in terms of pros/cons and not just personal opinion.</b> David has an extensive sense of ownership always looking for ways to improve the product from technical and UX perspectives as well as dedicating spare time to fill in the gaps he finds. In short time I've known him through Influitive he has taken several initiatives to audit performance profile of the Hub, provide insight into a11y and i13n, suggest enhancements for influitive.com site and quickly became an integral part of the team, let alone always finding time for his personal projects.</blockquote><div class="mt-4 text-right"><a href="https://www.linkedin.com/in/thedaviddias/" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline text-base">View on linkedin<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></div></div></div><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-4 size-full break-inside-avoid flex flex-col"><div class="flex items-center gap-4 mb-4"><img alt="Cedric Poilly" loading="lazy" width="48" height="48" decoding="async" data-nimg="1" class="rounded-full object-cover h-12 w-12" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Ftestimonials%2Fcedric-poilly.webp&w=48&q=75 1x, /_next/image?url=%2Fimages%2Ftestimonials%2Fcedric-poilly.webp&w=96&q=75 2x" src="/_next/image?url=%2Fimages%2Ftestimonials%2Fcedric-poilly.webp&w=96&q=75"/><div><h3 class="font-medium text-lg"><a href="https://www.linkedin.com/in/cedpoilly/" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline">Cedric Poilly<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a> <span class="text-gray-600 dark:text-gray-400">🇲🇺</span></h3><p class="text-sm text-gray-600 dark:text-gray-400">Front-End Engineer </p></div></div><blockquote class="text-gray-700 dark:text-gray-300 font-light"><b>David is the leader of the Front-End Coders community.</b> He finds the right mix of encouragements and responsibilities to be given to each member of the team. With his emotional intelligence skills David knows how to optimise each member of a team and make the group go beyond expectations.</blockquote><div class="mt-4 text-right"><a href="https://www.linkedin.com/in/thedaviddias/" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline text-base">View on linkedin<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></div></div></div><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-4 size-full break-inside-avoid flex flex-col"><div class="flex items-center gap-4 mb-4"><img alt="Julie Tran" loading="lazy" width="48" height="48" decoding="async" data-nimg="1" class="rounded-full object-cover h-12 w-12" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Ftestimonials%2Fjulie-tran.webp&w=48&q=75 1x, /_next/image?url=%2Fimages%2Ftestimonials%2Fjulie-tran.webp&w=96&q=75 2x" src="/_next/image?url=%2Fimages%2Ftestimonials%2Fjulie-tran.webp&w=96&q=75"/><div><h3 class="font-medium text-lg"><a href="https://www.linkedin.com/in/tranje/" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline">Julie Tran<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a> <span class="text-gray-600 dark:text-gray-400">🇺🇸</span></h3><p class="text-sm text-gray-600 dark:text-gray-400">Experience Design </p></div></div><blockquote class="text-gray-700 dark:text-gray-300 font-light">I had the pleasure of working with David on a refresh of a global scale brand during a span of 2 years. Though we were working in different countries and time zones, we shared the same vision and passion to make this brand's digital presence best in class. David works tirelessly and relentlessly for the love of his craft and the love for his team. His future-focused technical recommendations consistently pushed boundaries, while inspiring and educating his creative and account teams. <b>He questions processes and offers constructive recommendations bringing teams from across the globe together, making the teams and the work better.</b> The work was well received by our global clients. I attribute much of our success to David's dedication. I couldn't have asked for a better partner during this project. My only regret is that David can't work on all of my projects with me! I hope to work with him again soon!</blockquote><div class="mt-4 text-right"><a href="https://www.linkedin.com/in/thedaviddias/" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline text-base">View on linkedin<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></div></div></div><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-4 size-full break-inside-avoid flex flex-col"><div class="flex items-center gap-4 mb-4"><img alt="Aleksandr Efimenko" loading="lazy" width="48" height="48" decoding="async" data-nimg="1" class="rounded-full object-cover h-12 w-12" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Ftestimonials%2Faleksandr-efimenko.webp&w=48&q=75 1x, /_next/image?url=%2Fimages%2Ftestimonials%2Faleksandr-efimenko.webp&w=96&q=75 2x" src="/_next/image?url=%2Fimages%2Ftestimonials%2Faleksandr-efimenko.webp&w=96&q=75"/><div><h3 class="font-medium text-lg">Aleksandr Efimenko <span class="text-gray-600 dark:text-gray-400">🇨🇦</span></h3><p class="text-sm text-gray-600 dark:text-gray-400">Software Developer at Self Employed</p></div></div><blockquote class="text-gray-700 dark:text-gray-300 font-light">I had a wonderful session with David. He is an extremely friendly and intelligent person. <b>David gave me a good understanding of modern web development that changed my attitude about what I should focus on while preparing for an interview.</b> I Would highly recommend a session with him. Thank you, David!</blockquote><div class="mt-4 text-right"><a href="https://adplist.org/mentors/david-dias" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline text-base">View on adplist<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></div></div></div><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><div class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-4 size-full break-inside-avoid flex flex-col"><div class="flex items-center gap-4 mb-4"><img alt="Mizuki Ikeda" loading="lazy" width="48" height="48" decoding="async" data-nimg="1" class="rounded-full object-cover h-12 w-12" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Ftestimonials%2Fmizuki-ikeda.webp&w=48&q=75 1x, /_next/image?url=%2Fimages%2Ftestimonials%2Fmizuki-ikeda.webp&w=96&q=75 2x" src="/_next/image?url=%2Fimages%2Ftestimonials%2Fmizuki-ikeda.webp&w=96&q=75"/><div><h3 class="font-medium text-lg">Mizuki Ikeda <span class="text-gray-600 dark:text-gray-400">🇫🇷</span></h3><p class="text-sm text-gray-600 dark:text-gray-400">Student at O'Clock School</p></div></div><blockquote class="text-gray-700 dark:text-gray-300 font-light">Just finished my first session with David and cannot thank him enough for all the time he spent sharing his helpful advices and resources! I can not wait for our next conversation, Merci beaucoup!</blockquote><div class="mt-4 text-right"><a href="https://adplist.org/mentors/david-dias" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline text-base">View on adplist<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></div></div></div></div><footer class="text-right"><a class="cursor-pointer hover:underline" href="/testimonials">→ View all testimonials</a></footer></section><section class="mb-10" aria-labelledby="featured-events-heading"><header class="mb-5"><h2 class="text-3xl font-bold undefined" id="featured-events-heading">My Events</h2><p class="text-s pt-3 dark:text-gray-400">Explore a collection of past event experiences.</p></header><div style="opacity:0;filter:blur(6px);transform:translateY(6px)"><ul class="mb-4 ml-6 divide-y divide-dashed border-l"><li class="relative ml-10 py-4"><div class="absolute -left-16 top-2 flex items-center justify-center rounded-full bg-purple-50 dark:bg-purple-900"><span class="relative flex shrink-0 overflow-hidden rounded-full border size-12 m-auto"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-heart dark:text-white size-full p-2"><path d="M16 8.2A2.22 2.22 0 0 0 13.8 6c-.8 0-1.4.3-1.8.9-.4-.6-1-.9-1.8-.9A2.22 2.22 0 0 0 8 8.2c0 .6.3 1.2.7 1.6A226.652 226.652 0 0 0 12 13a404 404 0 0 0 3.3-3.1 2.413 2.413 0 0 0 .7-1.7"></path><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"></path></svg></span></div><div class="flex flex-1 flex-col justify-start gap-1"><time class="text-xs text-muted-foreground">April 17, 2024 (10mo ago)</time><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white text-lg font-semibold leading-none">Became Canadian Citizen</h3><p class="text-sm text-muted-foreground">Toronto, Canada</p><span class="prose dark:prose-invert text-base text-muted-foreground">Became Canadian Citizen</span><div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-2"><div class="relative aspect-square"><div class="my-3 block"><button class="w-full cursor-zoom-in focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" aria-label="View larger version of "><img alt="" loading="lazy" width="150" height="150" decoding="async" data-nimg="1" class="rounded-lg" style="color:transparent;width:100%;height:auto" srcSet="/_next/image?url=%2Fimages%2Fevents%2Fcanadian-citizen.jpg&w=256&q=80 1x, /_next/image?url=%2Fimages%2Fevents%2Fcanadian-citizen.jpg&w=384&q=80 2x" src="/_next/image?url=%2Fimages%2Fevents%2Fcanadian-citizen.jpg&w=384&q=80"/></button></div></div></div></div></li><li class="relative ml-10 py-4"><div class="absolute -left-16 top-2 flex items-center justify-center rounded-full bg-blue-50 dark:bg-blue-900"><span class="relative flex shrink-0 overflow-hidden rounded-full border size-12 m-auto"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mic dark:text-white size-full p-2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg></span></div><div class="flex flex-1 flex-col justify-start gap-1"><time class="text-xs text-muted-foreground">March 17, 2024 (11mo ago)</time><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white text-lg font-semibold leading-none">Tailwind CSS - Transitioning Away from Styled Components</h3><p class="text-sm text-muted-foreground">Toronto, Canada</p><span class="prose dark:prose-invert text-base text-muted-foreground">Talk about the transition from Styled Components to Tailwind CSS</span><div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-2"><div class="relative aspect-square"><div class="my-3 block"><button class="w-full cursor-zoom-in focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" aria-label="View larger version of Screenshot of the first slide of the talk"><img alt="Screenshot of the first slide of the talk" loading="lazy" width="150" height="150" decoding="async" data-nimg="1" class="rounded-lg" style="color:transparent;width:100%;height:auto" srcSet="/_next/image?url=%2Fimages%2Fevents%2Ftailwindcss-transitioning-away-from-styled-components.jpg&w=256&q=80 1x, /_next/image?url=%2Fimages%2Fevents%2Ftailwindcss-transitioning-away-from-styled-components.jpg&w=384&q=80 2x" src="/_next/image?url=%2Fimages%2Fevents%2Ftailwindcss-transitioning-away-from-styled-components.jpg&w=384&q=80"/></button></div></div></div></div><div class="mt-2 flex flex-row flex-wrap items-start gap-2"><a href="https://speakerdeck.com/thedaviddias/tailwind-css-transitioning-away-from-styled-components-b4f1e397-966c-46a7-a78d-513e41ca2fab" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white flex gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book h-5 w-5"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"></path></svg>Slides</div></a></div></li><li class="relative ml-10 py-4"><div class="absolute -left-16 top-2 flex items-center justify-center rounded-full bg-green-50 dark:bg-green-900"><span class="relative flex shrink-0 overflow-hidden rounded-full border size-12 m-auto"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-atom dark:text-white size-full p-2"><circle cx="12" cy="12" r="1"></circle><path d="M20.2 20.2c2.04-2.03.02-7.36-4.5-11.9-4.54-4.52-9.87-6.54-11.9-4.5-2.04 2.03-.02 7.36 4.5 11.9 4.54 4.52 9.87 6.54 11.9 4.5Z"></path><path d="M15.7 15.7c4.52-4.54 6.54-9.87 4.5-11.9-2.03-2.04-7.36-.02-11.9 4.5-4.52 4.54-6.54 9.87-4.5 11.9 2.03 2.04 7.36.02 11.9-4.5Z"></path></svg></span></div><div class="flex flex-1 flex-col justify-start gap-1"><time class="text-xs text-muted-foreground">March 1, 2024 (1y ago)</time><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white text-lg font-semibold leading-none">Keyboard 49SL Mk II</h3><p class="text-sm text-muted-foreground">Toronto, Canada</p><span class="prose dark:prose-invert text-base text-muted-foreground">The last time I played keyboard was when I was 24. I've played keyboard for a few years then played organ for many other years before moving to Brazil.</span><div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-2"><div class="relative aspect-square"><div class="my-3 block"><button class="w-full cursor-zoom-in focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" aria-label="View larger version of "><img alt="" loading="lazy" width="150" height="150" decoding="async" data-nimg="1" class="rounded-lg" style="color:transparent;width:100%;height:auto" srcSet="/_next/image?url=%2Fimages%2Fevents%2Fkeyboard-49sl-mk.jpg&w=256&q=80 1x, /_next/image?url=%2Fimages%2Fevents%2Fkeyboard-49sl-mk.jpg&w=384&q=80 2x" src="/_next/image?url=%2Fimages%2Fevents%2Fkeyboard-49sl-mk.jpg&w=384&q=80"/></button></div></div></div></div></li><li class="relative ml-10 py-4"><div class="absolute -left-16 top-2 flex items-center justify-center rounded-full bg-blue-50 dark:bg-blue-900"><span class="relative flex shrink-0 overflow-hidden rounded-full border size-12 m-auto"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mic dark:text-white size-full p-2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg></span></div><div class="flex flex-1 flex-col justify-start gap-1"><time class="text-xs text-muted-foreground">August 4, 2023 (1y ago)</time><h3 class="text-xl md:text-2xl font-oswald text-black dark:text-white text-lg font-semibold leading-none">My Front-End Developer Career Path</h3><p class="text-sm text-muted-foreground">Toronto, Canada</p><span class="prose dark:prose-invert text-base text-muted-foreground">Talk about my career path as a Front-End Developer at a BrainStation Power Hour</span></div><div class="mt-2 flex flex-row flex-wrap items-start gap-2"><a href="https://speakerdeck.com/thedaviddias/my-front-end-developer-career-path" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline"><div class="text-sm bg-black text-gray-100 dark:text-black border-[2px] border-transparent dark:border-transparent dark:bg-white items-center rounded-md font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 px-1.5 py-0 cursor-pointer transition-colors duration-200 hover:bg-white hover:border-black hover:text-black dark:hover:border-white dark:hover:bg-black dark:hover:text-white flex gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book h-5 w-5"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"></path></svg>Slides</div></a></div></li></ul></div><footer class="mt-5 text-right"><a class="cursor-pointer hover:underline" href="/events">→ View all events</a></footer></section><div></div><div></div><div></div><section class="mb-10"><div></div><footer class="text-right"><a href="https://ddias.link/goodreads" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline dark:text-white">→ Check my Goodreads profile<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></footer></section></main></div></div><footer class="mt-auto pt-5 sm:pt-8"><div class="relative mx-auto h-36 max-w-5xl"><img alt="David mecanic mode, David designer mode, David gaming mode, David sailing mode, David VR mode" aria-hidden="true" loading="lazy" decoding="async" data-nimg="fill" class="mx-auto max-w-xl object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" srcSet="/_next/image?url=%2Fimages%2Fdavid-dias-banner.png&w=256&q=75 256w, /_next/image?url=%2Fimages%2Fdavid-dias-banner.png&w=384&q=75 384w, /_next/image?url=%2Fimages%2Fdavid-dias-banner.png&w=640&q=75 640w, /_next/image?url=%2Fimages%2Fdavid-dias-banner.png&w=750&q=75 750w, /_next/image?url=%2Fimages%2Fdavid-dias-banner.png&w=828&q=75 828w, /_next/image?url=%2Fimages%2Fdavid-dias-banner.png&w=1080&q=75 1080w, /_next/image?url=%2Fimages%2Fdavid-dias-banner.png&w=1200&q=75 1200w, /_next/image?url=%2Fimages%2Fdavid-dias-banner.png&w=1920&q=75 1920w, /_next/image?url=%2Fimages%2Fdavid-dias-banner.png&w=2048&q=75 2048w, /_next/image?url=%2Fimages%2Fdavid-dias-banner.png&w=3840&q=75 3840w" src="/_next/image?url=%2Fimages%2Fdavid-dias-banner.png&w=3840&q=75"/></div><div><section><div class="flex w-full items-start border border-b border-gray-200 bg-white px-4 py-3 sm:justify-between dark:border-gray-800 dark:bg-gray-900"><div class="w-full items-center justify-center sm:flex"><div class="max-w-lg"><div><span class="text-2xl font-bold">Subscribe to "David's Dev Diary" Newsletter</span></div><p class="mb-4 font-medium text-gray-500 sm:mb-0 md:mb-0 dark:text-white">Receive emails about web development, tech, and life abroad!</p></div><div class="sm:pl-10"><div class="flex items-center sm:space-y-0 md:mx-auto"><div><a href="https://thedaviddias.substack.com/" class="formkit-submit formkit-submit w-full cursor-pointer rounded-lg bg-indigo-800 px-3 py-2 text-center text-base font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-800 dark:hover:bg-blue-700 dark:focus:ring-blue-800 undefined">Subscribe</a></div></div></div></div></div></section></div><div class="main-footer transform bg-gray-50 dark:bg-black" aria-labelledby="footer-heading"><h2 id="footer-heading" class="sr-only">Footer</h2><div class="mx-auto max-w-5xl px-2 py-12 sm:px-6 lg:px-8 lg:py-7"><div class="flex flex-col-reverse sm:flex-row print:hidden"><div class="mt-10 w-full flex-grow text-left sm:mb-0 sm:mt-10 sm:w-1/2 md:pr-24 lg:w-[40%]"><span class="mb-5 block">The David Dias</span><p class="text-sm text-gray-500 dark:text-gray-400">A Front-End Software Developer and content creator passionate about solving digital and human challenges. I thrive on building communities, exploring tech innovations, and discussing the intricacies of web development and expatriate life. <br/><br/>Let's connect and share ideas that shape the digital world!</p><div class="flex space-x-6"></div></div><div class="flex w-full !max-w-full flex-shrink-0 flex-grow justify-between text-gray-500 sm:w-1/2 lg:w-[60%] dark:text-gray-400"><div><h3 class="small-title">General</h3><ul class="mt-3 space-y-1"><li><a class="cursor-pointer hover:underline dark:!text-white" href="/">Home</a></li><li><a class="cursor-pointer hover:underline dark:!text-white" href="/articles">Articles</a></li><li><a class="cursor-pointer hover:underline dark:!text-white" href="/notes">Notes</a></li><li><a class="cursor-pointer hover:underline dark:!text-white" href="/projects">Projects</a></li><li><a class="cursor-pointer hover:underline dark:!text-white" href="/events">Events</a></li><li><a class="cursor-pointer hover:underline dark:!text-white" href="/about">About Me</a></li></ul></div><div><h3 class="small-title">Additional links</h3><ul class="mt-3 space-y-1"><li><a class="cursor-pointer hover:underline dark:!text-white" href="/tags">Topics</a></li><li><a class="cursor-pointer hover:underline dark:!text-white" href="/uses">Uses</a></li><li><a class="cursor-pointer hover:underline dark:!text-white" href="/testimonials">Testimonials</a></li><li><a class="cursor-pointer hover:underline dark:!text-white" href="/dashboard">Dashboard</a></li><li><a href="https://ddias.link/kit" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline dark:!text-white">Gear<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></li><li><a class="cursor-pointer hover:underline dark:!text-white" href="/supporters">Supporters</a></li><li><a href="https://plausible.io/thedaviddias.com" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline dark:!text-white">Analytics<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></li><li><a href="https://thedaviddias.substack.com/" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline dark:!text-white">Newsletter<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></li><li><a class="cursor-pointer hover:underline dark:!text-white" href="/rss/feed.xml">RSS</a></li></ul></div><div><h3 class="small-title">Social media</h3><ul class="mt-3 space-y-1"><li><a href="https://ddias.link/x" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline dark:!text-white">X<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></li><li><a href="https://ddias.link/bsky" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline dark:!text-white">BlueSky<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></li><li><a href="https://ddias.link/linkedin" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline dark:!text-white">LinkedIn<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></li><li><a href="https://ddias.link/github" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline dark:!text-white">Github<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></li><li><a href="https://ddias.link/discord" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline dark:!text-white">Join my Discord<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></li><li><a href="https://ddias.link/medium" rel="noopener noreferrer" target="_blank" class="cursor-pointer inline-flex hover:underline dark:!text-white">Medium<span class="inline-flex items-center"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="https://www.w3.org/2000/svg"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span></a></li></ul></div></div></div><div class="mt-8 flex items-center justify-between border-t border-gray-200 pt-3 dark:border-gray-400"><p class="text-base text-gray-500 dark:text-gray-400">© 2025 David Dias</p></div></div></div></footer></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"articles":[{"frontMatter":{"draft":false,"locale":"en","date":"2023-07-30T01:48:39.903Z","title":"My Ideal Desk Setup: A Personal Journey","h1":"Creating My Perfect Multi-Purpose Workspace","excerpt":"Looking to build your ideal home office setup? Discover how I transformed my workspace into a versatile environment for coding, music production, and electronics. Learn practical tips for creating a productive, minimalist desk setup that adapts to your creative needs and enhances your daily workflow.","description":"Comprehensive guide to building a versatile home office setup, featuring practical tips for developers and creatives. Learn how to create a productive workspace that combines coding, music production, and electronics workbench setups.","preview":{"url":"/images/articles/ideal-desk-setup-personal-journey/desk-setup-front.jpg","alt":"A modern, clutter-free desktop setup featuring two large monitors, a tablet displaying the time, an audio mixer, a compact microphone, a camera, a game console, and LED lighting."},"author":"David Dias","tags":["home-office-setup","desk-setup","workspace-optimization","productivity-setup","music-production","electronics-workbench"],"categories":["productivity","workspace"],"type":"article","slug":"ideal-desk-setup-personal-journey"},"readingTime":{"text":"5 min read","minutes":4.485,"time":269100,"words":897},"permalink":"/articles/multi-purpose-developer-music-electronics-setup","slug":"multi-purpose-developer-music-electronics-setup","content":"\nI first embarked on my journey to create the perfect desk setup in 2018, when I made the big move from [Mauritius](https://en.wikipedia.org/wiki/Mauritius) to Canada.\n\nThe notion of an ideal desk setup has always been a tantalizing dream of mine. But when can we honestly say, \"This is it, this is the setup I always wanted.\"? Well, there's no definitive answer to that. However, after a few years of relentless experimentation, I can confidently say that I'm truly happy with what I have.\n\nI have always been passionate in exploring different areas of knowledge. Which is somehow reflected in all my past experiences. Most people focus on one specific domain of expertise and become experts in it. Even I have my expertises, I'm always looking to explore new domains. And this is what you will see reflected in my different desk setups.\n\n(Check out the list of all the gear I use at https://kit.co/thedaviddias)\n\n## Daily desk setup\n\nYes, my desk is usually that clean! No kidding! Almost every morning or night, I make a habit of removing from my desk what I don't need, like a cup of tea or the last letter that came in the mail.\n\n![My white standing desk with two monitors (with colorful backgrounds), 2 white speakers, a mixer, an ipad on a stand and Elgato lights](/images/articles/ideal-desk-setup-personal-journey/daily-setup-01.jpg 'My ideal daily desk setup')\n\nWhat makes a desk setup almost perfect? It just has to be a place where you feel comfortable and productive! I don't like having a space cluttered with things I don't really need. I am always trying to figure out how I can replace a specific function with a smaller or more minimalistic piece of gear. It's sometimes hard to strike a balance between minimalism and productivity, but I think I am getting there.\n\nMy main computers (both personal and professional) are Macs. My personal one is a **[MacBook M1 Max, 14-inch from 2021 with 32 GB of RAM and a 2 TB hard drive](https://www.apple.com/macbook-pro-14-and-16/)**. And of course, I added a [DBrand skin](https://dbrand.com/shop/apple-macbook-pro-14-skins-2021#/customizer/edit/design) called \"Top Skin Hyperblack Titanium\" for the top and Matte Black for the bottom.\n\nAs you can see in the picture above, I work with [two screens](https://kit.co/thedaviddias/ultimate-desk-setup-unleashing-productivity/dell-p2720dc-27-16) instead of one. Many people I know are fans of wide, curved screens. I've tried it, but I constantly put my apps in full screen and you can't do that without a window management app.\n\nI love mechanical keyboards! I have multiple ones, but the one I chose for my setup is the [Keychron K3 Ultra-Slim 75%](https://kit.co/thedaviddias/ultimate-desk-setup-unleashing-productivity/keychron-k3-version). It's thin and wireless. The keys don't make too much noise, which is important when you are in a meeting. I use it in combination with the [Logitech MX Master 3S](https://kit.co/thedaviddias/ultimate-desk-setup-unleashing-productivity/6718058-logitech-mx-master-3).\n\n## Music desk setup\n\nI have studied and played music for more than 10 years. But for many years, I didn't touch a single instrument. 2-3 years ago, I decided to get back to it. I initially bought the Novation Mini [MK3]. It was nice creating some songs in [Ableton](https://www.ableton.com/) with it, but I quickly felt that I needed normal keys. After weeks of research and comparison, I chose the [Novation Launchkey 49 MK3](https://kit.co/thedaviddias/office-extras-gearing-up-for-ultimate-efficiency/6718487-novation-launchkey-4).\n\n![Same desk setup but this time with a Novation Keyboards with 49 keys](/images/articles/ideal-desk-setup-personal-journey/music-setup-01.jpg 'My ideal music desk setup with my Novation Launchkey 49 MK3')\n\nI'm fortunate enough to afford access to [Kontakt and Komplete Standard edition](https://www.native-instruments.com/en/catalog/) from Native Instruments. They have so many instruments, I'm still exploring them all!\n\n## Electronics desk setup\n\nI started tinkering with electronics in 2011. I have left many electronic gears in every country and place I lived in! I have built a lot of unfinished projects. These days, time is the only thing that is missing to finish them. But I still love playing with electronics. I have the amazing Weller Digital Soldering Station (WE1010NA) and a few boxes filled with tools and components. I might write an article exclusively about my tools!\n\n![](/images/articles/ideal-desk-setup-personal-journey/electronics-setup-01.jpg)\n\nIronically, what took me a long time to find was the magnifying glass. I had a specific idea in mind. I finally found one that seems to be using exactly the same arm as Rode. Funny.\n\nMaybe one day I will have a dedicated desk for electronics. But for now, I'm happy with what I have.\n\n## Craft desk setup\n\nI wish I was a better artist! At least, I've been trying! I have a lot of respect for people who can draw, paint, etc... But whenever I can, I try to learn something new. Doing something with my hands is a great way to relax and forget about the computer and coding. I wish I could spend more time doing that.\n\nA few years ago, when I was living in Paris, I would spend a fortune at [Aroma Zone](https://www.aroma-zone.com/). I would make products based on essential oils. I would make my own shampoo, shower gel, etc... I also made my own candles. It was amazing! Unfortunately, in Canada, I've never found a similar shop.\n\n![](/images/articles/ideal-desk-setup-personal-journey/craft-setup-01.jpg)\n\n## And you, what is your ideal desk setup?\n\nEveryone is different, and our needs and aspirations are different. I am curious to know - what is your ideal desk setup? What do you like to have on your desk? What do you enjoy doing? What is your dream setup?\n\n\u003cdiv style={{ display: 'flex', justifyContent: 'center' }}\u003e\n \u003cLinkedInEmbed\n url=\"https://www.linkedin.com/embed/feed/update/urn:li:share:7091183319584833536\"\n postUrl=\"https://www.linkedin.com/posts/thedaviddias_desksetup-homeoffice-desk-activity-7091183321329647616-TrhV?utm_source=share\u0026utm_medium=member_desktop\"\n width={525}\n /\u003e\n\u003c/div\u003e\n"},{"frontMatter":{"draft":false,"locale":"en","date":"2023-07-16T21:43:28.398Z","title":"Looking Back on My Web Development Journey: A Decade of Projects","excerpt":"Dive into my decade-long journey in web development, chronicling key projects that have shaped my career and personal growth. From my first parish website to open-source initiatives and podcasts, explore the evolution of my skills and the diverse range of projects that have defined my path in the digital world.","description":"Dive into my decade-long journey in web development, chronicling key projects that have shaped my career and personal growth. From my first parish website to open-source initiatives and podcasts, explore the evolution of my skills and the diverse range of projects that have defined my path in the digital world.","preview":{"url":"/images/articles/decade-web-development-personal-journey/featured.jpg","alt":"A winding road cuts through lush green hills under a clear sky, with the sun casting a warm glow over the landscape. The scene captures the serene beauty of nature with rolling hills, rocky outcrops, and the sun illuminating the horizon."},"author":"David Dias","tags":["dev-journal","front-end-development"],"categories":["side-project"],"type":"article","lastmod":null,"slug":"decade-web-development-personal-journey-showcase"},"readingTime":{"text":"6 min read","minutes":5.515,"time":330900,"words":1103},"permalink":"/articles/frontend-developer-decade-projects-evolution","slug":"frontend-developer-decade-projects-evolution","content":"\nI published my first website around 2001. Probably before that. Almost 20 years ago. Unfortunately, the exact date I started doing web development is probably lost by now.\n\nEverything began when my dear friend, [Christophe Raimbault](https://www.la-croix.com/Religion/Catholicisme/France/Pere-Christophe-Raimbault-Il-faut-vivre-lEvangile-pouvoir-transmettre-2018-05-20-1200940389), a priest in the [Diocese of Tours](https://en.wikipedia.org/wiki/Roman_Catholic_Archdiocese_of_Tours), asked if I was interested in managing and building a website for the \"Notre-Dame La Riche\" parish. If you are not too familiar with what a parish is, it's mostly a local community of different churches. At the time, this sounded like an amazing challenge but I had no idea what I was getting into. I had never touch a line of code before, I was only 15 years old. I never stopped coding since then.\n\nThe following list of websites are the ones that had the most impact on my life. I build a lot more websites but smaller and less important. I'm not including them here.\n\n## \"Notre-Dame La Riche\" parish website (2000-2005)\n\n\"Notre-Dame La Riche\" parish website was my first website. At the time, no blogs, no Google, no Github... most of my time was dedicated in studying code source of other websites, reading books about HTML, CSS, PHP. It was definitelly a fun time. I was learning a lot, things seemed to be a lot more simple than nowadays.\n\n![](/images/articles/decade-web-development-personal-journey/david-dias-present-ndlr.jpg 'Me presenting the website in 2005')\n\nI still have some code source and I can't bear looking at it just for few seconds 🤣: CSS mixed with HTML, no version control, layouts build with tables... as I said, it was fun but I'm glad things have changed. The website had multiple refactoring along the years. I remember having some animated banners build with Flash.\n\n![](/images/articles/decade-web-development-personal-journey/paroisse-ndrl-2004.jpg 'Notre-Dame La Riche parish website in 2004')\n\n![](/images/articles/decade-web-development-personal-journey/paroisse-ndlr-2005.jpg 'Notre-Dame La Riche parish website in 2005')\n\n- Internet Archive URL: https://web.archive.org/web/20050204174756/http://paroissendlr-tours.cef.fr/\n- Stack: HTML, CSS, PHP, MySQL\n- Current URL: https://paroisse-ndlr-scel.jimdo.com/\n\n## WikiKto (2005-2006)\n\nWikipedia was launched in 2001. At this time, wikis were popular and Wikipedia was just beginning. I remember how much criticism this community project received. For many reasons that I have somewhat forgotten, I decided to create a dedicated wiki related to Catholic knowledge. I named it WikiKto (Kto is the French abbreviation for Catholic).\n\nTo my great surprise, the project gained a lot of contributors. I was no longer alone. I was not the only one who thought that a wiki about Catholic knowledge was a good idea. I was not the only one who believed that Catholic knowledge should be shared and made accessible to everyone.\n\nThe project was officially launched on May 13, 2005. I had to shut it down a little over a year later when I moved to Brazil and could no longer manage it.\n\n![](/images/articles/decade-web-development-personal-journey/wikikto-fr.jpg 'WikiKto homepage in French')\n![](/images/articles/decade-web-development-personal-journey/wikikto-en.jpg 'WikiKto homepage in English')\n\n- Internet Archive URL (French): https://web.archive.org/web/20060207015812/http://fr.wikikto.org/index.php/Accueil\n- Internet Archive URL (English): https://web.archive.org/web/20051227152637/http://en.wikikto.org/index.php/Main_page\n- Internet Archive URL (Portuguese - Launched October 12, 2006): https://web.archive.org/web/20070917013037/http://br.wikikto.eu/index.php/P%C3%A1gina_principal\n- Stack: MediaWiki, PHP, MySQL\n- Old URL: `https://wikikto.org/`\n\n## WikiKtosource (2005-2006)\n\nWikiKtosource was launched few weeks after WikiKto and was the equivalent to [Wikimedia](https://meta.wikimedia.org/wiki/Main_Page). It was a wiki dedicated to offer open source resources for the catholic community. It was a place to share and download resources like images mainly.\n\n![](/images/articles/decade-web-development-personal-journey/wikiktosource-fr.jpg)\n\n- Internet Archive URL (French): https://web.archive.org/web/20060207032908/http://fr.wikiktosource.org/index.php/Accueil\n- Old URL: `https://wikiktosource.org/`\n\n## David Dias Blog (2010 to today)\n\nI created a first version of my personal blog in 2010. Few months before I started my first job as a web developer. For many years, creating new content and maintaining a blog has been a challenge for me with so many things and ideas to create. The current version of my blog (2022-2023) is probably the one that finally got the most attention to me.\n\n![](/images/articles/decade-web-development-personal-journey/david-dias-blog-2012.jpg 'David Dias Blog in 2012')\n![](/images/articles/decade-web-development-personal-journey/david-dias-blog-2015.jpg 'David Dias Blog in 2015')\n![](/images/articles/decade-web-development-personal-journey/david-dias-blog-2020.jpg 'David Dias Blog in 2020')\n\n- Stack: from Wordpress, to Gatsby (2020) and Next.js (2022)\n\n## França Brasileira (2009-2011)\n\n![](/images/articles/decade-web-development-personal-journey/franca-brasileira-logo.jpg)\n\nBack from Brazil, I decided to create a forum to help Brazilians to move to France and to connect to other Brazilians living in France. Thanks to all my contacts made in Brazil, I was able to get a lot of exposure and the forum and blog got very popular.\n\n- Internet Archive URL: https://web.archive.org/web/20111210020959/http://www.francabrasileira.com/\n- Stack: Workpress, PHP, MySQL\n- Old URL: https://www.francabrasileira.com/\n\n## Frontenddeveloper (2013-2014)\n\n`frontenddeveloper.fr` was another trial to create a blog about front-end development. I was not very active on it and I decided to close it after few months.\n\n![](/images/articles/decade-web-development-personal-journey/frontenddev-fr.jpg)\n\n- Internet Archive URL: https://web.archive.org/web/20130205064050/http://frontenddeveloper.fr/\n- Stack: Workpress, PHP, MySQL\n- Old URL: `https://frontenddeveloper.fr/`\n\n## Front-End Checklist (2017 to today)\n\nThe Front-End Checklist is an open-source project I created just few month before leaving Mauritius. Initially build for my frontend team, it became a worlwide and very popular project around the globe. You can read about [how it earned 6,000 stars in just 5 days](/articles/front-end-checklist-viral-growth-story) and [how to make the most of it](/articles/front-end-checklist-implementation-guide). I have been meaning to build a V2, more modern and with a better user experience. Not sure if and when I will have time to do it.\n\n![](/images/articles/decade-web-development-personal-journey/frontendchecklist.jpg)\n\n- Stack: HTML, CSS, JavaScript\n- Current URL: https://frontendchecklist.io/\n\n## World Web Stories (2021 to today)\n\nI officially start the podcast [World Web Stories when I was living in Mauritus](https://www.youtube.com/watch?v=qYtcNF7cuGU\u0026list=PLVrgPXb9LZwjRK2cL1uQ0IllT9Ljokxrz), in 2016. I was not very active, only had 5 episodes and it was in French. In 2021, unemployed for few weeks, I decided to relaunch the podcast in English with a new format and with the goal to interview one person from each country in the world.\n\nUnfortunately, I choose to spend more time on my other podcast \"Erreur 200\". I still want to continue this project, but I'm not sure when I will.\n\n![](/images/articles/decade-web-development-personal-journey/worldwebstories-podcast.jpg)\n\n- Stack: Gatsby, React\n- Current URL: https://worldwebstories.com/\n\n## Erreur 200 (2021 to today)\n\nErreur 200 is a French podcast I co-host with Jean-Rémy Duboc about web development. We talk about our experience, our mistakes, our successes, our tips and tricks. We also interview people from the web development community.\n\n![](/images/articles/decade-web-development-personal-journey/erreur-200.jpg)\n\n- Stack: Gatsby, React\n- Current URL: https://erreur200.com/\n\n## Conclusion\n\nLooking back more than 10 years, I'm very proud and grateful for all the opportunities and projects I had the chance to work on. I'm also very grateful for all the people I met along the way. Those projects shaped in a way my career and life and I'm not even mentionning all the professional projects I've worked on. If you're interested in how I work today, you can check out [my ideal desk setup](/articles/multi-purpose-developer-music-electronics-setup) where I do most of my development work.\n"},{"frontMatter":{"draft":false,"locale":"en","title":"My Favorite Raycast Apps for Better Development","date":"2023-06-12T23:59:58.501Z","excerpt":"Raycast is one of the best tools for supercharging your productivity on Mac, offering a wide range of customizable commands and third-party integrations. In this article, I'll share the top 10 Raycast applications I use daily, demonstrating how they can transform you into a super developer by streamlining your workflow and boosting efficiency.","description":"Raycast is one of the best tools for supercharging your productivity on Mac, offering a wide range of customizable commands and third-party integrations. In this article, I'll share the top 10 Raycast applications I use daily, demonstrating how they can transform you into a super developer by streamlining your workflow and boosting efficiency.","author":"David Dias","categories":["productivity"],"tags":["github","raycast","vercel","visual-studio-code"],"type":"article","preview":{"url":"/images/articles/raycast-applications-super-developer/featured.jpg","alt":"A search bar shows results for \"1Password\" in a macOS launcher. Suggestions include applications like 1Password, Google Chrome, and FaceTime, alongside commands like \"Search Deployments\" and \"Search Documentation.\""},"slug":"raycast-applications-super-developer"},"readingTime":{"text":"3 min read","minutes":2.3,"time":138000,"words":460},"permalink":"/articles/raycast-developer-productivity-apps","slug":"raycast-developer-productivity-apps","content":"\nSpolight on Mac is great, but it always lacked the possibility to add custom commands and third party access. And that's where [Alfred](https://www.alfredapp.com/) comes in. It's a great application that allows you to do just that. I have been a big fan of \"Alfred\" at least since 2015. I would recommend this application to anyone who wants to be more productive on their Mac. I was a big fan!\n\nBut few months ago, one of my colleague talked to me about [Raycast](https://raycast.com/). Eager to always find better tools and expand my productivity, I decided to give it a try. The first thing I noticed was the speed. Not that \"Alfred\" is slow, but Raycast was just blazing fast!\n\nI was hooked! And when I found out that all the applications were build in TypeScript, this was the cherry on the cake! After a few weeks now using it, I don't see myself going back.\n\nAnd today, I wanted to share with you the 10 applications I use the most in Raycast, on a daily basis. Those applications are more towards developers but I highly recommend you to check Raycast out (it's free)\n\n## One Password\n\n![](/images/articles/raycast-applications-super-developer/raycast-1password.jpg)\n\n[1Password](https://www.raycast.com/khasbilegt/1password) has been my password manager for many years. I can search, copy username or password, open the website. The only annoying part is the fact that [1Password](https://1password.com/) always ask me to give access to the application. Annoying but still useful.\n\n## TailwindCSS Docs\n\n![](/images/articles/raycast-applications-super-developer/raycast-tailwind-docs.jpg)\n\nI use [TailwindCSS](https://tailwindcss.com/) and nothing better than opening the TailwindCSS documentation directly from Raycast. I could search directly on the website but this saves me some clicks.\n\n## Github\n\n![](/images/articles/raycast-applications-super-developer/raycast-github.jpg)\n\nOpen pull requests, notifications, discussions from [Github](https://www.raycast.com/raycast/github)... I can also search directly repositories from Raycast.\n\n## Spotify\n\n![](/images/articles/raycast-applications-super-developer/raycast-spotify.jpg)\n\nPlay, pause, stop, next... I can [control Spotify](https://www.raycast.com/thomas/spotify-controls) directly from Raycast. This is something I was always using on Alfred, couldn't approve Raycast if I didn't have this option.\n\n## Raindrop\n\n![](/images/articles/raycast-applications-super-developer/raycast-raindrop.jpg)\n\nRaindrops is my favourite bookmark manager. The kind of tool that constantly adds new features. I can search, open, add new bookmarks directly from Raycast with the [Raindrop](https://www.raycast.com/lardissone/raindrop-io) application.\n\n## Vercel\n\n![](/images/articles/raycast-applications-super-developer/raycast-vercel-deployments.jpg)\n\nI love seeing the status of [my deployment on Vercel](https://www.raycast.com/vercel/vercast) from Raycast. Can directly open my projects too.\n\n## Visual Studio Code\n\n![](/images/articles/raycast-applications-super-developer/raycast-vscode.jpg)\n\nI use \"[Visual Studio Code](https://www.raycast.com/thomas/visual-studio-code)\" Raycast App in combinaison with \"[Project Manager](https://www.raycast.com/MarkusLanger/vscode-project-manager)\" to quickly access all my projects in an instant.\n\n## Bonus: Clipboard History\n\n![](/images/articles/raycast-applications-super-developer/raycast-clipboard.jpg)\n\nThis is not an application, but a feature I loved on Alfred and actually exists on Raycast, even it's slighly less powerful.\n\n\"Clipboard History\" give you access to your last copied items. I've assign the double `⌥` (action) key to open the clipboard history. This is a feature I use constantly, and I'm glad it's available on Raycast.\n"},{"frontMatter":{"draft":false,"locale":"en","type":"article","title":"Why Frontend Experience Matters More Than Just User Testing","h1":"Beyond User Testing: The Value of Frontend Experience","excerpt":"For over a decade, I've been collaborating with web designers, and it's clear that we sometimes have differing perspectives. 'User testing' often takes center stage in decision-making, with the rich insights of frontend experience taking a backseat. But here's the thing - collaboration is pivotal. Recognizing the value that frontend developers bring is crucial for any team aiming to succeed in our fast-paced digital age.","description":"Over 10 years of experience shows: collaboration between frontend developers and designers is key. Let's value insights from both for digital success!","author":"David Dias","date":"2023-06-01T13:07:27.957Z","tags":["user-testing","user-experience","front-end-development"],"categories":["web-development"],"published":{"on":"LinkedIn","url":"https://www.linkedin.com/pulse/beyond-user-testing-leveraging-frontend-experience-david-dias%3FtrackingId=160lbV%252FkQYWuXfSB%252FsgeKg%253D%253D/?trackingId=160lbV/kQYWuXfSB/sgeKg%3D%3D"},"preview":{"url":"/images/articles/beyond-user-testing-leveraging-frontend-experience/table-computers.jpg","alt":"Top view of a cluttered work table with four front-end developers using laptops. The table is filled with items including notebooks, headphones, a bowl of snacks, a teapot, a water bottle, and a smartphone. Various electronic devices and office supplies are scattered around amidst the technology-focused environment in Toronto."}},"readingTime":{"text":"7 min read","minutes":6.785,"time":407100,"words":1357},"permalink":"/articles/frontend-experience-vs-user-testing","slug":"frontend-experience-vs-user-testing","content":"\nUser testing is a crucial tool for gathering feedback on a product, but it's not enough to truly understand and improve user engagement. For the past [13 years](/articles/frontend-developer-decade-projects-evolution), I have been building multi-language platforms for international brands and for a wide variety of users. Even in a space that constantly changes, where users have evolving needs, it's important to also acknowledge the role that experience plays in understanding them.\n\n![](/images/articles/beyond-user-testing-leveraging-frontend-experience/table-computers.jpg 'Photo by \u003ca href=\"https://unsplash.com/@marvelous?utm_source=unsplash\u0026utm_medium=referral\u0026utm_content=creditCopyText\"\u003eMarvin Meyer\u003c/a\u003e on Unsplash')\n\nBeing a Front-End Developer gave me and all my colleagues around the world a unique perspective on user experience. We understand how small design decisions can have a big impact on the user experience, and we have a deep understanding of how users interact with products. By leveraging our experience in front-end development, we can help create products that are not only effective but also enjoyable to use, leading to increased user satisfaction and loyalty.\n\n## The limits of user testing\n\nUser testing is a critical component of product development that can help identify usability issues and gather feedback from real users. By testing products with representative users, product teams can gain valuable insights in how users interact with their interfaces and what their pain points are. Whatever you use services like [User Testing](https://www.usertesting.com/), or your own user testing directly with regular users, user testing also possess some limits that can't be overlooked.\n\nFor example, users may not always be able to articulate their needs and preferences accurately, or identify more obvious usability issues that sometimes are more subtle or hidden. User testing is also typically conducted in a controlled environment, which may not always accurately reflect real-wold usage scenarios.\n\nWhat about people that don't use technology in a daily basis?\n\nUsually user testing is done by a certain user group or demographics and don't include 100% of all users. From my point of view, user testing can't be really complete without testing with people with disabilities. For people with experience in doing accessibility testing with real users, I'm sure you will agree that.\n\n## User testing can lead to success or failure\n\nThrough Internet history, user testing had lead to create successful products:\n\n- Slack (which I daily use) is a popular communication tool. During its development, Slack's team conducted user testing to identify usability issues and gather feedback from its target users. This feedback helped them make improvements to the platform, resulting in a product that was easier to use and more engaging for its users.\n- Dropbox is a cloud storage platform that allows users to store, share, and collaborate on files. Dropbox's team used user testing to identify pain points and improve the user experience, resulting in a product that was more intuitive and engaging for its users.\n- And a lot more…!\n\nBut user testing can also fail to uncover critical usability issues which can contribute to the failure of some projects:\n\n- Google Wave was a communication and collaboration platform that was introduced in 2009. User testing suggested that users would appreciate the platform's advanced features and integration with other Google products, but when it was released to the market, [users found the platform confusing and difficult to use](https://www.taskade.com/blog/google-wave-history/), leading to low adoption rates and eventually the discontinuation of the product in January 2018.\n- The Amazon Fire Phone was a smartphone introduced by Amazon in 2014. User testing suggested that users would appreciate the phone's unique features, such as the dynamic perspective display, but when it was released to the market, [users found the phone overpriced and underwhelming](https://maestrolearning.com/blogs/amazon-fire-phone/), leading to poor sales and eventually the discontinuation of the product. The lack of empathy towards the users needs was also part of the reasons why it failed.\n- Twitter timeline algorithm: In 2016, Twitter also faced public outrage when they introduced an algorithm-based timeline, which did not align with users' preferences for a chronological timeline that allowed them to see real-time tweets in ascending order.\n\nBuilding a successful project is not an easy task, a lot of factors can influence the success or the failure of a new product. Nowadays, users have different needs. Users switch faster to competitor then before, we have daily examples of that.\n\nUser testing is one tool in companies belt that should be used as often as possible, but shouldn't be the only one.\n\n## Leveraging Front-End experience\n\nFront-End Developers (FED) are not just coders. Usually seen as the ones that \"just\" integrate designs into HTML, CSS and JavaScript, their [t-shape personalities](https://infinum.com/blog/t-shaped-developers/) is often times overlooked (not all FES have t-shape skills though).\n\nA FED can play a critical role in creating engaging user experiences.\n\n## Collaboration and communication for better user engagement\n\nAs I said in [my previous article](/articles/frontend-designer-collaboration-strategies) about Front-End Developers, Web and UX/UI Designers collaboration, collaboration and communication is key in building a successful product.\n\nThis collaborative approach allows different perspectives to merge and create a more holistic vision of the product. As Front-End Developers, we have the unique position of working at the intersection of design and technology. We are often the ones who bring the designers' visions to life while ensuring that the product remains functional and user-friendly.\n\nFront-end development is about more than just making things look good. It's about creating a seamless and intuitive interface that guides users through a product. Every button, every transition, every piece of interactive content is a chance to engage users and keep them invested in the product.\n\n## The Benefits of Leveraging Front-End Experience\n\nFront-end developers have a deep understanding of user behavior, as they are responsible for creating the interactive elements that users engage with. They can use this knowledge to create more engaging user interfaces and to guide user testing to focus on areas of the product that are most likely to affect user engagement.\n\nBeyond just implementing designs, a seasoned FED can provide insights and suggest improvements to the UX/UI designs based on their knowledge of what is technically feasible and what would create a smoother user journey. They can spot potential pitfalls in the designs that might be overlooked during user testing.\n\nFor example, a developer might notice that a particular design element could cause issues on certain devices or browsers. They might also suggest an alternative way of implementing a feature that enhances the user's experience. I have been advocating about accessibility for years now. Last year, I became [CPACC certified](https://www.accessibilityassociation.org/s/certified-professional) and I continue to advocate for accessibility in my daily work. Not everyone understand what web accessibility is and how it impacts users. It takes time and effort to educate people about it.\n\n## The Future of User Engagement\n\nAs technology advances, users' expectations also rise. They demand faster, smoother, and more intuitive interfaces. User testing will always be a vital tool for gathering feedback, but to meet these evolving demands, we need to go beyond testing.\n\nIncorporating the front-end developer's expertise into the design process and user testing can help create a product that not only meets the users' needs but also provides an engaging and satisfying experience.\n\nWe must continue to push the boundaries, experiment with new technologies, and constantly seek ways to better understand and improve user engagement. Only by doing this can we hope to create products that users will love to use.\n\nFront-End Developers bring a valuable perspective to the product development process. Let's use it to its fullest potential to create engaging, user-friendly products. After all, the success of any product lies in the satisfaction of its users.\n\n---\n\nAt the end, user engagement is not just about the single experience of a product but the entire journey. It's about creating an engaging, intuitive, and satisfying journey that users want to return to again and again. And Front-End Developers play a crucial role in crafting this journey.\n\nRemember, user testing is a part of the journey, not the destination. We must use all the tools at our disposal, and that includes leveraging the front-end development experience to truly understand and improve user engagement.\n\nLet's continue to build with the user in mind, always striving to enhance their journey, their experience, and ultimately, their engagement.\n\n"},{"frontMatter":{"draft":false,"locale":"en","type":"article","title":"How Front-End Developers and UI/UX Designers Can Work Better Together","h1":"Building Stronger Bridges Between Development and Design","excerpt":"Want to bridge the gap between development and design? Discover practical strategies for effective collaboration between Front-End Developers and UI/UX Designers. Learn how to establish clear processes, foster better communication, and create exceptional web experiences through teamwork.","description":"Comprehensive guide to improving collaboration between Front-End Developers and UI/UX Designers. Learn practical strategies for better communication, workflow optimization, and creating successful web projects through effective teamwork.","author":"David Dias","date":"2021-06-13T22:27:03.206Z","tags":["developer-designer-collaboration","front-end-development","user-interface","user-experience","team-collaboration","workflow-optimization"],"categories":["web-development","team-management","design"],"published":{"on":"Medium","url":"https://thedaviddias.medium.com/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together-8fb63edd0694"},"preview":{"url":"/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/featured.jpeg","alt":"Aerial view of four rowers in a boat, seen rowing in coordination against a dark background. Their oars are outstretched, and the rowers wear brightly colored clothing, highlighting their synchronized effort."}},"readingTime":{"text":"12 min read","minutes":11.56,"time":693600,"words":2312},"permalink":"/articles/frontend-designer-collaboration-strategies","slug":"frontend-designer-collaboration-strategies","content":"\nThe web has changed so much in the past 10 years. Technology has enabled new usages, new ways of communication, new ways of seeing the world. Web Design trends are also constantly changing, every year we see new trends that sometimes stick for few years, sometimes they don’t. The same happened in web development: we’ve seen new JavaScript frameworks, new ways to build components, new ways to code CSS, using pre or post-processors. The list is almost infinite. But something that has not changed is the need for collaboration between people working on the same web project.\n\n![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/featured.jpeg 'Photo by \u003ca href=\"https://unsplash.com/@joshcala?utm_source=unsplash\u0026utm_medium=referral\u0026utm_content=creditCopyText\"\u003eJosh Calabrese\u003c/a\u003e on Unsplash')\n\nAs a Front-End Developer, I had the chance to work with numerous Web Designers and UX/UI designers over my career. No matter if I was in Brazil, France, Mauritius or Canada, **I have observed the same challenges over and over again**. And one unique solution doesn’t always apply to similar situations. You need to find what works best for you.\n\nIn this article, I want to share some topics I believe should be discussed. From my point of view, we, as web professionals want the same thing: **build accessible and performant products that will provide the best user experience possible**.\n\nIf you want your product to work, to get revenues, then you should start with the above goal first, not the other way around.\n\nBut let’s start with some definitions.\n\n## What is a Web Designer?\n\n![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/photoshop-design-desk.jpeg 'Photo by \u003ca href=\"https://unsplash.com/@easiblu?utm_source=unsplash\u0026utm_medium=referral\u0026utm_content=creditCopyText\"\u003eEftakher Alam\u003c/a\u003e on Unsplash')\n\nA lot of people could probably define what is a Web Designer better than I. But from my perspective, as a Front-End Developer, a **Web Designer is someone with extensive skills in design that understands the constraints and the possibilities given by the web**. I’ve seen a lot of really good “designers” but who were not always able to fully understand the “web” part of their title. Designing for the web is far from being straightforward. Be familiar with how to use [Sketch](https://www.sketch.com/) or [Figma](https://www.figma.com/) is surely part of being a Web Designer, but it’s unfortunately not enough. And honestly, for me it’s totally fine: you learn as you progress.\n\nProbably, from my point of view, a Web Designers shouldn’t just rely on his knowledge and put pressure on himself to know everything about the web. That’s where a Front-End Developer can come into play. Front-End Developers are the ones that spend their time on the web, scrolling, studying code, finding new ways of building components… They are the perfect buddies of Web Designers, and both should be pairing regularly.\n\n## What is a UX/UI Designer?\n\n![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/wireframe-design-table.jpeg 'Photo by \u003ca href=\"https://unsplash.com/@kellysikkema?utm_source=unsplash\u0026utm_medium=referral\u0026utm_content=creditCopyText\"\u003eKelly Sikkema\u003c/a\u003e on Unsplash')\n\n**A UX/UI Designer is someone where focus lays on users**. Nothing should be more important than the user, the person, the human. A UX Designer needs to spend a lot of his time doing researches. I’ve always considered that a good UX/UI Designer should be passionate about people, what they want, how they want things… Of course, you also have the word “designer” in the title, because in the context we are talking about, a UX/UI Designer has the task to understand the user and also know what works the best in terms of UI. Something that works for a website dedicate to moms may not work for a website which main users are teens.\n\n\u003e I’ve always considered that a good UX/UI Designer should be passionate about people, what they want, how they want things.\n\nBut he is not the only one who has developed an understanding of what users prefer and are used to when they browse the Internet. When a Front-End Developer wants to create a piece of code, a component, he usually dives into his structured memory of patterns. When someone says “button”, it triggers in his brain all the times (thousands of) he clicked on a button, but also snippets of CSS code that can be used to create a button or the long hours he spent analyzing CSS framework documentation…\n\nFront-End Developers can be a huge asset for any UX/UI Designer because they’ve learned so much about the web and usual patterns from a different perspective.\n\n## What is a Front-End Developer?\n\n![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/computer-windows-white-table.jpeg 'Photo by \u003ca href=\"https://unsplash.com/@nublson?utm_source=unsplash\u0026utm_medium=referral\u0026utm_content=creditCopyText\"\u003eNubelson Fernandes\u003c/a\u003e on Unsplash')\n\nI know a lot of people that could potentially disagree with my definition. For me, a **Front-End Developer is a builder, someone that loves building web content using a combination of multiple skills**. Because a Front-End Developer is not just a coder. To be a Front-End Developer you need to learn HTML, CSS, JavaScript but these are just the basics. You need to understand how to make a [website accessible](https://www.w3.org/WAI/fundamentals/accessibility-intro/), how to use CSS to create an amazing layout, how to translate a design file to CSS, how to keep your application performant, how to build a [UI/pattern library](/articles/front-end-checklist-just-tool-everything-depends-on-you)… the list is long but I'm sure you get my point.\n\nA Front-End Developer is the backbone of any web content. Without a Front-End Developer, the website couldn’t be created (even if you use a no-code generator, a Front-End Developer had to create the UI).\n\nDoes that mean that a Front-End Developer is more important than other people in their team? Absolutely not, but his role requires him to **be a facilitator, to understand what he can provide for the rest of his team**.\n\n## A Web Designer, UX/UI and Front-End Dev enter together in a bar…\n\nNow that we have a better idea of what these roles represent, how do we make them work together in a way that they feel empowered and enjoying the collaboration?\n\n### It’s about mindset\n\nAny athlete will tell you that mindset is everything to achieve their goals, to win championships, to perform better. This is not that different when it’s about working as a team. Everyone’s mindset is important within a team. But it’s something that the group itself doesn’t have any control. Only individuals can decide to have an open mind, a true relationship with the other member of the team, visualize solutions instead of problems…\n\nWe often forget that we all have a common goal. Sure, we can also have multiple goals for ourselves but if you are part of a team, it’s only to achieve a common goal.\n\nDifferences are what make this specific group worth existing. EVERYONE has a role to play in any team.\n\n### It’s about culture\n\nBut it’s not only about individual mindsets. A team with a Web Designer, UX/UI and developers are usually part of a corporation. All over the world, [numerous companies understand and value their culture](https://hbr.org/2020/01/how-corporate-cultures-differ-around-the-world). This is an essential part to guide employees towards common goals and achieve specific tasks.\n\nIf companies provide the tools and the support to create trust and equality between the members of a team, then it makes it easier for people to collaborate together and learn from each other.\n\n### It’s about ego\n\nAaah the ego! Some people say that a bad reputation can hurt any company, I believe ego can hurt sometimes even more. The ego is one of the biggest enemies of any company, team or leadership group. I had the displeasure to work with 1–2 people during my career with a pretty big ego.\n\nI will always feel the pain these people have caused, it’s important to make peace with any related event but also with them. After all, we are all humans.\n\nEgo shouldn’t exist in a team. Period.\n\n### It’s about collaboration\n\nCollaboration is knowing that people are better than you in certain areas. It’s knowing that you can learn from them. It’s knowing that you can also give something to them. Collaboration is finding the balance and putting everything and everyone at the center of the group.\n\nAnd no, collaboration is not something you implement once and it’s done, everything will always work perfectly. Collaboration is an equilibrist performance that could go wrong at any time. But you have to keep going because it’s so rewarding when you succeed!\n\n## How to get your team to work together?\n\nBefore giving you some answers, I want to tell you about two of the best experiences I had during my career with Web / UX / UI Designers. If you're interested in more collaboration stories, you can also read about [how I presented my side projects across Europe](/articles/open-source-europe-conference-journey).\n\n![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/whiteboard-collaboration-wireframe.jpeg 'Photo by \u003ca href=\"https://unsplash.com/@kaleidico?utm_source=unsplash\u0026utm_medium=referral\u0026utm_content=creditCopyText\"\u003eKaleidico\u003c/a\u003e on Unsplash')\n\n### My two best experiences with Designers\n\n**My first best experience was in August 2014**, in Cincinnati, USA. I’ve worked for a month with Barefoot Proximity to build a new platform. [Julie Tran](https://www.linkedin.com/in/tranje/), which was leading the project in terms of design would create pieces of design, sent them to me for prototyping and we would discuss around that. What made the experience amazing was the level of exchange and collaboration.\n\nIt wasn’t just about, “Hey, here is the design”, it would be more “hey, here is the design, can you do a quick prototype to see if that works. Let me know if you see any problems that may occur for mobile, accessibility etc…”.\n\nI was able to give my feedback based on my knowledge and experience, Julie would also push back when I would be hesitant to test a particular approach. Combining our visions, being open with each other was what made this project successful. Even with my English being pretty basic at this time, we both enjoyed our work and I kept only good memories from that collaboration.\n\n**My second best experience was in 2015**, with [Julia Bruyneel](https://www.linkedin.com/in/juliabruyneel/), who was working in Paris as a Web/UX Designer freelancer. I was in Mauritius for a month and we had to collaborate for few weeks on new designs for an existing project.\n\nEven with the distance, and not knowing each other before, Julia would contact me and exchange about designs she would have made. That simple communication and regular exchange were reassuring for me (was lead on that project for 3 years) but also a manifestation of maturity and professionalism from Julia. It was short but I kept good memories of that collaboration.\n\n## Mindset, culture and processes\n\nThe **three main keys**, from my unique point of view, to have successful teams rely on mindset, culture and processes.\n\n![](/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/mindset-culture-processes.png 'Mindset, culture and processes are the 3 keys for better collaboration')\n\n**Mindset**: If you want to have people working together, in collaboration, using each other experience and vision, they need to have a similar mindset. I’m not saying an “identical mindset” or “same personalities”, I’m saying “similar mindset”. When everyone understands the goal of the team and is open to see each human behind his title, then you have more probabilities to have a successful team.\n\n**Culture**: Sometimes, having a similar mindset is not possible or challenging. In that case, is the responsibility of the structure or company to influence a specific mindset. Companies can decide who should be part of the “family”. That’s why the recruitment process is important.\n\n**Processes**: a lot of people I know, hate the word processes. For me, processes have always mean freedom. When you have a defined and clear process, you don’t have to stress or be hesitant or afraid. A process should exist to guide you in a process where people can predict what will come next. It’s reassuring to know that everyone has the same process in mind. Sometimes, when people's mindsets are not similar or the culture is lacking, processes should help people to visualize the direction they need to take.\n\nYou could take these **3 points separated or combine them to maximize your chances** to build successful teams.\n\n## What Web / UX / UI Designers should know about Front-End Developers (letter dedicated to designers)?\n\n\u003e “We love the web and we love being part of the creation process! We decided to become Front-End Developers because we love building! And it’s not just about converting designs to CSS, we love understanding the why, the how of the creation.\n\u003e And we understand that this may be scary at times because why the heck a Front-End Developer will tell a designer that his design is not accessible? Or tell the designers that he is not sure, this is gonna work for the user? It’s not about competing, it’s about putting energies in sync.\n\u003e The problem sometimes is that we see patterns and code examples in our minds that we don’t always translate for other people to understand. But we’re working on that! I promise!\n\u003e We have more to share than just our “title”, we have more to give than just lines of code. We are here to help!”\n\n## The main takeaways from this article\n\nIf you are still reading, I hope you also share some common ideas exposed in this article. I have dedicated a portion of my career to try to be a facilitator and share all the knowledge I accumulated to build awesome products.\n\n- Teams composed of Web Designers, UX/UI Designers and Front-End Developers sharing a **similar mindset** have more chances of success.\n- An internal culture that encourages **collaboration and equality** between professionals will always produce the best results.\n- Enforcing best practices through **processes will help to make things more predictable and reassuring**.\n- The ego is one of the worst enemies of teamwork. **You shouldn’t have any space for ego**.\n- A Front-End Developer is just a passionate professional **who wants to be part of the creation process** and not just at the end. His integration along the project will ensure the success of any project.\n\n---\n\nWhat about your experience? How do you like to work with others? What would you like to see happening more often within your team?\n\nIf you want to see how I organize my own workspace for better collaboration, check out my article about [my ideal desk setup](/articles/multi-purpose-developer-music-electronics-setup).\n"}],"notes":[{"frontMatter":{"draft":false,"locale":"en","date":"2023-08-09T01:35:47.739Z","title":"How To Block ChatGPT form Scraping and Parsing your Website?","excerpt":"How to block ChatGPT from scraping and parsing your website? It may be simpler than you think.","description":"How to block ChatGPT from scraping and parsing your website? It may be simpler than you think.","author":"David Dias","schema":"faq","tags":["coding","ai"],"type":"note"},"readingTime":{"text":"1 min read","minutes":0.81,"time":48600,"words":162},"permalink":"/notes/how-to-block-chatgpt-form-scraping-and-parsing-your-website","slug":"how-to-block-chatgpt-form-scraping-and-parsing-your-website","content":"\nIf you want to prevent bots like ChatGPT from scraping and parsing a website, the robots.txt file is the one to update.\n\nThis is the file usually used to tell search engines which pages to index and which ones to ignore. In this case, you can use it to block AI bots or in that case, specifically ChatGPT. The only caveat is that it can't remove pages that have already been indexted.\n\nSimply add the following line in your `robots.txt` file:\n\n```\nUser-agent: GPTBot\nDisallow: /\n```\n\nThis code snippet will tell ChatGPT that it is not allowed to access any part or page of the site.\n\nWhatever ChatGPT and Open AI actually respect this standard is up to them, but it's a good start. Of course, it may not be enough to prevent unwanted scraping and parsing and you may want to put in place additional measures such as implementing CAPTCHAs, using a content security policy, etc...\n\n## References\n\n- [GPTBot](https://platform.openai.com/docs/gptbot)\n"},{"frontMatter":{"draft":false,"locale":"en","date":"2023-07-17T03:41:52.479Z","title":"The Philosophy and Approach of \"User First\"","excerpt":"User First\" approach puts users at the heart of all decisions. Engage with them to understand needs, ensuring your business remains relevant and loved.","description":"User First\" approach puts users at the heart of all decisions. Engage with them to understand needs, ensuring your business remains relevant and loved.","author":"David Dias","schema":"article","tags":["product","business"],"type":"note","slug":"philosophy-approach-user-first"},"readingTime":{"text":"1 min read","minutes":0.98,"time":58800,"words":196},"permalink":"/notes/philosophy-approach-user-first","slug":"philosophy-approach-user-first","content":"\nYou've likely heard about \"mobile first\", \"content first\", \"design first\", and the like. But what about \"user first\"? To me, it's the most crucial principle of all.\n\nThe \"User First\" principle is a methodology where we put the user at the forefront in everything we undertake.\n\n- Pondering over introducing a new feature? Seek feedback from your users.\n- Wondering what could draw your user's acquaintances to your platform? Ask your users.\n- Concerned about what might lead your user to stop using your platform? Ask your users.\n\nYou get the drift.\n\nBut why do some businesses still do the exact opposite? Why do they continue to decide what they think is best for their users without seeking their input? It can often make a business think they know better what users want.\n\nA common statement I hear is \"our users don't know what they want, they always grumble...\". Well, if they're grumbling, it means they desire something different.\n\nUser needs generate businesses, and businesses foster user needs. It's a symbiotic cycle. If you don't listen to your users, you risk losing them. No amount of excuses can make up for neglecting to hear them out.\n"},{"frontMatter":{"draft":false,"locale":"en","date":"2023-07-16T21:04:32.187Z","title":"How to Convert MP3 to M4B for Audiobooks lovers, on MacOS?","excerpt":"Explore \"AudioBookBinder\", a handy MacOS app designed for making audiobooks. It quickly turns MP3 files into M4B format, making audiobook creation a breeze.","description":"Explore \"AudioBookBinder\", a handy MacOS app designed for making audiobooks. It quickly turns MP3 files into M4B format, making audiobook creation a breeze.","author":"David Dias","schema":"faq","tags":["audio","application"],"type":"note"},"readingTime":{"text":"2 min read","minutes":1.125,"time":67500,"words":225},"permalink":"/notes/how-to-convert-mp3-to-m4b-for-audiobooks","slug":"how-to-convert-mp3-to-m4b-for-audiobooks","content":"\nDepending on the platform, sometimes you may get audiobooks in MP3 format. However, MP3 is not the best format for audiobooks. It doesn't support chapters, and it's not bookmarkable. M4B is the best format for audiobooks. It supports chapters and is bookmarkable. It's also the format used by Apple for audiobooks.\n\nLast year, I discovered the only MacOS that simply convert multiple MP3 files into one M4B file. It's called [AudioBookBinder App Store page](https://apps.apple.com/us/app/audiobook-binder/id413969927?mt=12) and can be found on the App Store for free!\n\n## How to use AudioBookBinder?\n\nAudioBook Binder is a simple app that does one thing and does it well. It converts MP3 files into M4B files. You drag your MP3 files into the app, and the cover, and it will convert them into one M4B file.\n\n![AudioBookBinder Files View](/images/notes/audiobinder-mp3-m4v/audiobinder-cover-view.jpg 'AudioBookBinder Files View')\n![AudioBookBinder Cover View](/images/notes/audiobinder-mp3-m4v/audiobinder-main-view.jpg 'AudioBookBinder Cover View')\n\nThe options are limited but sufficient. You can set the cover, the title, the author, and the genre. I usually leave it to \"Audiobook\" for the genre.\n\nI hope you find this app useful as I did.\n\nAnd in case you store some audiobooks on your own server, you take a look at [audiobookshelf](https://www.audiobookshelf.org/). It's a Google and Apple app that allows you to listen to your audiobooks from your own server. It's open-source and free. You're welcome!\n\n![Audiobookshelf](/images/notes/audiobinder-mp3-m4v/audiobookshelf-screenshot.jpg 'Home page of Audiobookshelf')\n"},{"frontMatter":{"draft":false,"locale":"en","date":"2023-06-01T04:38:32.569Z","title":"Stop using the \"\u003chr/\u003e\" tag to design a horizontal line!","excerpt":"It's sometimes easy to forget that UI doesn't dicated semantics. In this article I'll show you how to use the \"\u003chr/\u003e\" tag properly.","description":"It's sometimes easy to forget that UI doesn't dicated semantics. In this article I'll show you how to use the \"\u003chr/\u003e\" tag properly.","author":"David Dias","schema":"article","tags":["coding","html"],"type":"note"},"readingTime":{"text":"1 min read","minutes":0.87,"time":52200,"words":174},"permalink":"/notes/stop-using-thematic-break-to-design-horizontal-line","slug":"stop-using-thematic-break-to-design-horizontal-line","content":"\nI have seen way too many times people using the `\u003chr\u003e` HTML element, which is called \"thematic break\" instead of CSS.\n\nUsing the HTML `\u003chr\u003e` tag purely for designing horizontal lines is an incorrect practice.\nThe real purpose of the `\u003chr\u003e` tag is to denote a thematic break in the content (like between paragraphs), not just to visually create a horizontal rule.\n\nIf you need a decorative line, CSS is a more appropriate choice.\n\nFor instance:\n\n```html\n\u003cdiv class=\"styled-line\"\u003eSome content\u003c/div\u003e\n```\n\nExample CSS:\n\n```css\n.styled-line {\n border-bottom: 1px solid #000;\n margin: 1em 0;\n}\n```\n\nYou generally don't want to have a single empty `\u003cspan\u003e` or `\u003cdiv\u003e` element just to style it as a horizontal line. Often times, you can just use a bottom border on the element above it.\n\nIn terms of accessibility, using `\u003chr\u003e` as a design element can confuse screen reader users, as it indicates a \"thematic break\".\n\nSemantics are important, not only for accessibility but also for SEO. So, please, stop using the `\u003chr\u003e` tag to design a horizontal line!\n"},{"frontMatter":{"draft":false,"locale":"en","date":"2023-01-04T04:38:32.569Z","title":"How to fix \"set-output\" when reading nvmrc from the GitHub Actions?","excerpt":"Find out how to fix the deprecated set-output when you read the Nodejs version from your .nvmrc file in Github workflows.","description":"Find out how to fix the deprecated set-output when you read the Nodejs version from your .nvmrc file in Github workflows.","author":"David Dias","schema":"faq","tags":["coding","npm","github"],"type":"note"},"readingTime":{"text":"1 min read","minutes":1,"time":60000,"words":200},"permalink":"/notes/how-to-fix-set-output-nvmrc-github-actions","slug":"how-to-fix-set-output-nvmrc-github-actions","content":"\nYou may be getting the issue **\"The `set-output` command is deprecated and will be disabled soon. Please upgrade to using Environment Files.\"** from your Github workflow.\n\n![Screenshot showing the 'set-output' issue from the Github workflows](/images/notes/set-output-nvmrc-github-actions.jpg)\n\nFew months ago, I choose to update some of my Github workflows to read from my `.nvmrc` file instead of manually specifying my node version.\n\n```.bash:.github/workflows/production.yml\non: push\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n steps:\n - name: Detect Node version\n run: echo ::set-output name=NODE_VERSION::$(cat .nvmrc)\n id: nvmrc\n\n - name: Use Node.js ${{ steps.nvmrc.outputs.NODE_VERSION }}\n uses: actions/setup-node@v3\n with:\n node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}\n```\n\nBut [since October 2022](https://github.blog/changelog/2022-10-11-github-actions-deprecating-save-state-and-set-output-commands/) and the runner version `2.298.2`, Github shows a warning regarding a future depreciation of the `set-output` command.\n\nAfter few trials, I figured out how to update using the `$GITHUB_OUTPUT` instead:\n\n```.bash:.github/workflows/update-production.yml\non: push\n\njobs:\n build:\n runs-on: ubuntu-latest\n\n steps:\n - name: Detect Node version\n run: echo \"NODE_VERSION=$(cat .nvmrc)\" \u003e\u003e $GITHUB_OUTPUT\n id: nvmrc\n # shell: bash (to be added if you use composite actions)\n\n - name: Use Node.js ${{ steps.nvmrc.outputs.NODE_VERSION }}\n uses: actions/setup-node@v3\n with:\n node-version: '${{ steps.nvmrc.outputs.NODE_VERSION }}'\n```\n\nAnd \"voilà\", the warning should have disappeared and you should see the number of the version right after `Use Node.js XXXX` in your workflow.\n"},{"frontMatter":{"draft":false,"locale":"en","date":"2022-07-30T04:38:32.569Z","title":"How to fix \"postbuild\" and \"prebuild\" not working with pnpm?","excerpt":"Find out what I had to update to use pre and posts scripts with pnpm.","description":"Find out what I had to update to use pre and posts scripts with pnpm.","author":"David Dias","schema":"faq","tags":["coding","pnpm","npm"],"type":"note"},"readingTime":{"text":"1 min read","minutes":0.505,"time":30300,"words":101},"permalink":"/notes/how-to-fix-post-pre-build-pnpm","slug":"how-to-fix-post-pre-build-pnpm","content":"\nWhen recently working on my blog, I tried to add a `postbuild` scripts with `next-sitemap` in my `package.json`. My goal was to automatically generate `.xml` files after each Next.js builds.\n\nUsing [pnpm](https://pnpm.io/), I found out that my `postbuild` was working with `npm` but not `pnpm`.\n\nI found out [this issue](https://github.com/pnpm/pnpm/issues/2891) on Github mentionning the same problem I encountered. It seems that pre/posts scripts are not activated if using pnpm.\n\nI found the solution adding the line below in my `.npmrc` local file:\n\n```.bash:.npmrc\nenable-pre-post-scripts=true\n```\n\nNow I can use pre/posts scripts and `pnpm`. I hope this could save you some time!\n"}],"projects":[{"frontMatter":{"draft":false,"locale":"en","date":"2025-02-25T20:06:48.926Z","title":"llms.txt hub","h1":"Links Base","description":"llms.txt hub is a comprehensive collection of llms.txt implementations and resources for LLM-powered tools and services.","dates":"February 2025 - Present","status":"in-progress","links":[{"type":"website","url":"https://llmstxthub.com","title":"Website"},{"type":"source","url":"https://git.new/llmstxthub","title":"Source"}],"preview":{"url":"/images/projects/llms-txt-hub/llms-txt-hub.webp","alt":"Screenshot of the website cards on the website"},"type":"project","projects_type":"open-source","technologies":["Next.js","Tailwind CSS","Shadcn UI"]},"readingTime":{"text":"1 min read","minutes":0.115,"time":6900,"words":23},"permalink":"/projects/llms-txt-hub","slug":"llms-txt-hub","content":"\n![Screenshot of the website cards on the website](/images/projects/llms-txt-hub/llms-txt-hub.webp)\n\n## Overview\n\nllms.txt hub is a comprehensive collection of llms.txt implementations and resources for LLM-powered\n"},{"frontMatter":{"draft":false,"locale":"en","date":"2024-12-07T20:06:48.926Z","title":"UX Patterns for Developers","h1":"UX Patterns for Developers","description":"Collection of UX patterns for everyone but specially towards developers who want to understand how to build effective UI components accessible and usable.","dates":"December 2024 - Present","status":"in-progress","links":[{"type":"website","url":"https://uxpatterns.dev","title":"Website"},{"type":"source","url":"https://git.new/uxpatterns","title":"Source"}],"preview":{"url":"/images/projects/ux-patterns-developers/ux-patterns-developers.webp","alt":"Screenshot of the UX Patterns for Developers website"},"type":"project","projects_type":"open-source","technologies":["Next.js","Tailwind CSS","Shadcn UI","Nextra","Markdown"]},"readingTime":{"text":"2 min read","minutes":1.175,"time":70500,"words":235},"permalink":"/projects/ux-patterns-developers","slug":"ux-patterns-developers","content":"\n![Screenshot of the UX Patterns for Developers website](/images/projects/ux-patterns-developers/ux-patterns-developers.webp)\n\n## Overview\nUX Patterns for Developers is a comprehensive documentation resource that helps developers implement effective, accessible, and usable UI components. It provides practical guidance, code examples, and best practices for creating user-friendly interfaces.\n\n## Context \u0026 Mission\nAs frontend development continues to evolve, creating accessible and user-friendly interfaces remains a significant challenge. This project bridges the gap between UX design principles and practical implementation, offering developers a structured approach to building better UI components.\n\nBorn from years of experience in frontend development across various scales of projects, this resource addresses the common challenge that while UX is complex, it can be systematically approached through well-documented patterns and practices.\n\n## Project Structure\nThe documentation is organized into key categories:\n\n### Core Categories\n- Layout \u0026 Navigation\n- Inputs \u0026 Forms\n- Content Management\n- User Feedback\n\n### Pattern Documentation\nEach pattern includes comprehensive coverage of:\n- Overview and Use Cases\n- Benefits and Best Practices\n- Technical Implementation\n- Accessibility Considerations\n- SEO Guidelines\n- Browser Support\n- Testing Guidelines\n\n## Current Status\n\nThis is an actively maintained, community-driven project that continues to grow with new patterns and improvements. The documentation is regularly updated to reflect current best practices and emerging patterns in UX design.\n\n## Community \u0026 Contribution\n\nThe project thrives on community contributions, whether through adding new patterns, improving existing documentation, or sharing real-world implementations.\n"},{"frontMatter":{"draft":false,"locale":"en","date":"2024-10-30T20:06:48.926Z","title":"Links Base","h1":"Links Base","description":"Links Base is a modern, static link management application designed to help teams organize and access their important links efficiently.","dates":"November 2024 - Present","status":"in-progress","links":[{"type":"website","url":"https://demo.linksbase.app","title":"Website"},{"type":"source","url":"https://git.new/linksbase","title":"Source"}],"preview":{"url":"/images/projects/links-base/links-base.webp","alt":"Screenshot of the Links Base website"},"type":"project","projects_type":"open-source","technologies":["Next.js","Tailwind CSS","Shadcn UI","Magic UI"]},"readingTime":{"text":"1 min read","minutes":0.14,"time":8400,"words":28},"permalink":"/projects/links-base","slug":"links-base","content":"\n![Screenshot of the Links Base website](/images/projects/links-base/links-base.webp)\n\n## Overview\n\nLinks Base is a modern, static link management application designed to help teams organize and access their important links efficiently.\n"},{"frontMatter":{"draft":false,"locale":"en","date":"2024-10-30T20:06:48.926Z","title":"Indie Dev Toolkit","description":"A curated list of tools and resources for indie hackers, solo founders, and bootstrapped startups.","dates":"October 2024","status":"completed","links":[{"type":"source","url":"https://git.new/linksbase","title":"Source"}],"preview":{"url":"/images/projects/indie-dev-toolkit/indie-dev-toolkit.webp","alt":"Screenshot of the Indie Dev Toolkit Github repository"},"video":"/images/projects/indie-dev-toolkit/indie-dev-toolkit.mp4","type":"project","projects_type":"open-source","technologies":["Markdown"]},"readingTime":{"text":"2 min read","minutes":1.17,"time":70200,"words":234},"permalink":"/projects/indie-dev-toolkit","slug":"indie-dev-toolkit","content":"\n![Screenshot of the Indie Dev Toolkit Github repository](/images/projects/indie-dev-toolkit/indie-dev-toolkit.webp)\n\n## Overview\n\nIndie Dev Toolkit is a curated list of tools and resources for indie hackers, solo founders, and bootstrapped startups. It is a community-driven project that aims to provide a comprehensive collection of resources, guides, and inspiration for those looking to break into the indie developer space.\n\n## Problem Statement\n\nIndependent developers and bootstrapped startups often struggle to find the right tools and resources when starting their journey. The overwhelming number of options available can lead to decision paralysis and wasted time searching for solutions.\n\n## Goals\n\n- Create a comprehensive, well-organized collection of tools and resources that I have mainly used or tested\n- Help indie developers make informed decisions about tools and services creating an up-to-date and accurate list\n- Save time and money by highlighting the most effective solutions\n\n## Resource Categories\n\nThe toolkit includes carefully selected resources across various categories:\n\n- 🛠️ Development Tools\n- 📊 Analytics \u0026 Metrics\n- 💰 Monetization\n- 🎨 Design Resources\n- 📱 Marketing Tools\n- 🚀 Growth Hacking\n- 📚 Learning Resources\n- 💡 Inspiration \u0026 Case Studies\n\n## Resource Selection Criteria\n\nEach tool or resource in this collection is evaluated based on:\n\n- 💪 Reliability and stability\n- 💰 Value for money (with preference for free/affordable options)\n- 👥 Community support and documentation\n- 🚀 Ease of implementation\n- 📈 Track record of success\n"},{"frontMatter":{"draft":false,"locale":"en","date":"2023-08-26T00:06:48.926Z","title":"Erreur 200","description":"Erreur 200 is a podcast dedicated to people who make the web animated by two French developers, one living in Canada (David Dias), the other in England (Jean-Rémy Duboc)","dates":"March 2024","status":"completed","links":[{"type":"website","url":"https://erreur200.com","title":"Website"},{"type":"source","url":"https://git.new/linksbase","title":"Source"}],"preview":{"url":"/images/projects/erreur-200/erreur-200.webp","alt":"Screenshot of the Erreur 200 website"},"type":"project","projects_type":"open-source","technologies":["Next.js","Tailwind CSS"]},"readingTime":{"text":"1 min read","minutes":0.42,"time":25200,"words":84},"permalink":"/projects/erreur-200","slug":"erreur-200","content":"\n![Screenshot of the Erreur 200 website](/images/projects/erreur-200/erreur-200.webp)\n\n## Overview\n\nErreur 200 est un podcast dédié aux gens qui font le web. Animé par deux développeurs français, l'un vivant au Canada (David Dias), l'autre en Angleterre (Jean-Rémy Duboc), nous échangeons sur le web d'aujourd'hui et de demain. Retrouvez-nous pour discuter de code, d'accessibilité, des frameworks JavaScript, de l'UX et plein d'autres sujets passionnants. Nous laissons parfois la parole à d'autres personnes qui partagent la même passion et qui nous parlerons de leurs échecs et leurs succès.\n"},{"frontMatter":{"draft":false,"locale":"en","date":"2021-03-10T20:06:48.926Z","title":"World Web Stories","h1":"Discover stories about web enthusiasts around the world","description":"World Web Stories is podcast about web enthusiasts around the world. It's a podcast that features interviews with web developers, designers, entrepreneurs and people who are passionate about the web.","dates":"March 2021 - Present","status":"completed","links":[{"type":"website","url":"https://worldwebstories.com/","title":"Website"}],"preview":{"url":"/images/projects/world-web-stories/world-web-stories.webp","alt":"Screenshot of the World Web Stories website"},"type":"project","technologies":["Gatsby","Airtable","Netlify"]},"readingTime":{"text":"1 min read","minutes":0.2,"time":12000,"words":40},"permalink":"/projects/world-web-stories","slug":"world-web-stories","content":"\n![Screenshot of the UX Patterns for Developers website](/images/projects/world-web-stories/world-web-stories.webp)\n\n## Overview\n\nWorld Web Stories is podcast about web enthusiasts around the world. It's a podcast that features interviews with web developers, designers, entrepreneurs and people who are passionate about the web.\n"}],"ghProjects":[{"name":"mcp-llms-txt-explorer","url":"https://github.com/thedaviddias/mcp-llms-txt-explorer","description":"MCP to explore websites with llms.txt files","updatedAt":"2025-03-11T23:39:12Z","stars":3,"forks":1,"language":{"name":"JavaScript","color":"#f1e05a"}},{"name":"ux-patterns-for-developers","url":"https://github.com/thedaviddias/ux-patterns-for-developers","description":"🧩 Collection of UX patterns for everyone but specially towards developers who want to understand how to build effective UI components accessible and usable.","updatedAt":"2025-03-10T00:34:47Z","stars":56,"forks":2,"language":{"name":"MDX","color":"#fcb32c"}},{"name":"llms-txt-hub","url":"https://github.com/thedaviddias/llms-txt-hub","description":"🤖 The largest directory for AI-ready documentation and tools implementing the proposed llms.txt standard","updatedAt":"2025-03-08T17:36:48Z","stars":59,"forks":9,"language":{"name":"TypeScript","color":"#3178c6"}},{"name":"links-base","url":"https://github.com/thedaviddias/links-base","description":"🔗 Links Base is a modern, static link management application designed to help teams organize and access their important links efficiently.","updatedAt":"2025-03-07T14:16:55Z","stars":11,"forks":0,"language":{"name":"TypeScript","color":"#3178c6"}}],"fallback":{"/api/youtube/videos":{"videos":[{"kind":"youtube#searchResult","etag":"3g27Qd3oIQ4_4s10Ss9mvcZpnHY","id":{"kind":"youtube#video","videoId":"CcJJhJWEERk"},"snippet":{"publishedAt":"2019-01-18T13:33:55Z","channelId":"UCXYs_tVa-VFm5f6bWrPybhA","title":"Ressources INDISPENSABLES pour Développeur Web Débutant","description":"J'ai compilé la liste des ressources indispensables pour apprendre à devenir développeur Front-End. Vous trouverez dans cette ...","thumbnails":{"default":{"url":"https://i.ytimg.com/vi/CcJJhJWEERk/default.jpg","width":120,"height":90},"medium":{"url":"https://i.ytimg.com/vi/CcJJhJWEERk/mqdefault.jpg","width":320,"height":180},"high":{"url":"https://i.ytimg.com/vi/CcJJhJWEERk/hqdefault.jpg","width":480,"height":360}},"channelTitle":"The David Dias","liveBroadcastContent":"none","publishTime":"2019-01-18T13:33:55Z"}},{"kind":"youtube#searchResult","etag":"NzkjLq__np8onlw7oacgS4uTuug","id":{"kind":"youtube#video","videoId":"G9Q8KthzPpM"},"snippet":{"publishedAt":"2019-01-12T18:56:26Z","channelId":"UCXYs_tVa-VFm5f6bWrPybhA","title":"Comment synchroniser Chrome avec son compte Google","description":"Vous venez d'installer Chrome... Et vous ne savez par quoi commencer. Google Chrome Sync vous permet de vous connecter à ...","thumbnails":{"default":{"url":"https://i.ytimg.com/vi/G9Q8KthzPpM/default.jpg","width":120,"height":90},"medium":{"url":"https://i.ytimg.com/vi/G9Q8KthzPpM/mqdefault.jpg","width":320,"height":180},"high":{"url":"https://i.ytimg.com/vi/G9Q8KthzPpM/hqdefault.jpg","width":480,"height":360}},"channelTitle":"The David Dias","liveBroadcastContent":"none","publishTime":"2019-01-12T18:56:26Z"}},{"kind":"youtube#searchResult","etag":"sitAu4ZP7evJ7p39JdGiBdklHgY","id":{"kind":"youtube#video","videoId":"FL0hVIPFPc8"},"snippet":{"publishedAt":"2019-01-08T09:00:00Z","channelId":"UCXYs_tVa-VFm5f6bWrPybhA","title":"Astuces pour s\u0026#39;expatrier au 🇨🇦CANADA","description":"Vous avez envie de partir vivre à l'étranger ? Travailler et gagner de l'expérience en travaillant dans le web ? Voici quelques ...","thumbnails":{"default":{"url":"https://i.ytimg.com/vi/FL0hVIPFPc8/default.jpg","width":120,"height":90},"medium":{"url":"https://i.ytimg.com/vi/FL0hVIPFPc8/mqdefault.jpg","width":320,"height":180},"high":{"url":"https://i.ytimg.com/vi/FL0hVIPFPc8/hqdefault.jpg","width":480,"height":360}},"channelTitle":"The David Dias","liveBroadcastContent":"none","publishTime":"2019-01-08T09:00:00Z"}}]}},"__lang":"en","__namespaces":{"common":{"404":{"back_home":"Back Home","seo":{"title":"Oops 😩, this page doesn't exist.","description":"No one likes a dead end. But it's not the end of the world yet!"}},"500":{"title":"Whoa 😱, something went wrong.","seo":{"title":"","description":""}},"title":"The David Dias","titleTemplate":"Front-End Developer, Podcaster \u0026 Content Creator","date":"MMM dd, yyyy","layout":{"a11y":{"skipContent":"Skip to main"},"nav":{"home":"Home","articles":"Articles","notes":"Notes","projects":"Projects","bookmarks":"Bookmarks","events":"Events","about":"About Me","rss":"RSS"},"darkMode":{"light":"Switch to light mode","dark":"Switch to dark mode"},"language":{"fr":{"fullName":"French","switch":"Switch to the {{lang}} version","abbreviation":"FR"},"en":{"fullName":"English","switch":"Switch to {{lang}} version","abbreviation":"EN"}},"footer":{"name":"Footer","general":"General","social":"Social media","extra":"Additional links","extra_links":{"supporters":"Supporters","tags":"Topics","uses":"Uses","gear":"Gear","dashboard":"Dashboard","newsletter":"Newsletter","resume":"Resume","analytics":"Analytics","testimonials":"Testimonials"}}},"home":{"path":"/","seo":{"title":"The David Dias | Front-End Developer, Podcaster \u0026 Content Creator","description":"Hey, I'm David Dias, a Front-End Developer based in Toronto/Canada. I love discussing code, technology, expatriation and life."},"hero":{"greetings1":"Hello there!","greetings2":" I'm David Dias","presentation":"A Front-End Software Developer and content creator passionate about solving digital and human challenges. I thrive on building communities, exploring tech innovations, and discussing the intricacies of web development and expatriate life. \u003cbr/\u003e\u003cbr/\u003eLet's connect and share ideas that shape the digital world!"},"sections":{"podcast":{"latest_podcasts":"Latest podcasts","view_website":"See more on the website","url":"https://worldwebstories.com"}}},"events":{"path":"/events","seo":{"title":"Explore my life events","description":"Explore a collection of past event experiences.","url":"events"},"h1":"My Events","description":"Explore a collection of past event experiences.","sections":{"viewAll":"→ View all events","category_filter":"Browse events by category","events_list":"Events List"}},"articles":{"path":"/articles","category":{"path":"/articles/category"},"seo":{"title":"My Web Development Articles and More","description":"Delve into insightful articles on web development, coding best practices, and cutting-edge tech innovations.","url":"articles"},"h1":"My Articles","description":"Dive into a collection of articles covering web development techniques, coding challenges, emerging technologies, and personal insights from my journey as a developer.","sections":{"latest-posts":"Latest articles","viewAll":"→ View all articles","category_filter":"Browse articles by categories","search":"Search by title keyword","search_placeholder":"Enter a word to search"}},"notes":{"path":"/notes","seo":{"title":"My Daily Observations about web development and more","description":"Explore a collection of short and concise notes I regularly publish.","url":"notes"},"h1":"My Notes","sections":{"latest-notes":"Latest notes","viewAll":"→ View all notes","search":"Search by keyword","search_placeholder":"Enter a keyword to search"}},"about":{"h1":"About Me","path":"/about","seo":{"url":"about","title":"About David Dias, Front-End Developer \u0026 Content Creator","description":"Know more about 'The David Dias'"}},"uses":{"path":"/uses","seo":{"title":"","description":"","url":"uses"}},"supporters":{"path":"/supporters","seo":{"title":"Gratitude to My Supporters","description":"","url":"supporters"}},"projects":{"path":"/projects","seo":{"url":"projects","title":"My Projects","description":"Discover the projects I've contributed to or currently working on."},"updated":"Updated {{date}} ago","sections":{"popular":"Other Projects","popular_description":"Check out my popular open-source projects. Contributions are always welcome!","viewAll":"→ View all my projects","latest-projects":"Latest projects"}},"openProjects":{"path":"/projects","seo":{"url":"projects","title":"My Projects","description":"Check out my open-source projects. Contributions welcome!"},"updated":"Updated {{date}} ago","sections":{"popular":"Trending Github Projects","popular_description":"These are my latest open-source projects. Have a look, and feel free to contribute!","viewAll":"→ Browse my open-source projects on Github","latest-projects":"Latest Open-Source Updates"}},"tags":{"path":"/tags","seo":{"title":"{{name}} Notes","url":"tags","title_all":"Tags Overview","description":"Posts linked to {{name}}.","description_all":"All tags for my articles and notes, sorted by publishing date."},"view_all_tags":"→ Explore all tags","section":"Tags","latest_posts":"Posts associated with {{name}}","h1":"Tag: {{name}}"},"bookmarks":{"path":"/bookmarks","seo":{"url":"bookmarks","title":"Bookmarks","description":"A curated list of bookmarks on web development, career growth, and open-source."},"bookmark_filter":"Filter bookmarks by topic"},"category":{"path":"/categories","seo":{"title":"{{name}} Articles","description":"Explore posts related to {{name}}."},"h1":"Category: {{name}}"},"rss":{"path":"/rss/feed.xml"},"posts":{"empty":"Couldn't find any articles for that query.","continue":"Continue reading →","updated":"Updated","first_published":"First published on","published":"Published","tableContent":"Table of Contents","popular":"Popular posts","previous":"Previous post","next":"Next post"},"webmentions":{"title":"Webmentions","description":"Tweet about this post to see it here!","show":"Show","hide":"Hide","details":"{{show}} mention details","activity_reply":"this post {{date}} ago:","activity_others":"this post.","activity":{"link":"linked to","reply":"replied to","repost":"retweeted","like":"liked"}},"comments":{"title":"Comments","description":"Share your thoughts! If you don't have a Github account, you can tweet it!","leave_comment":"Post a comment"},"dashboard":{"path":"/dashboard","seo":{"url":"dashboard","title":"Dashboard","description":"All metrics related to my activities and interests at one place."},"sections":{"coding":{"title":"Coding / Open Source","url":"https://wakatime.com/@thedaviddias","average_activity":"Average daily coding activity","average_activity_duration":"(past 7 days)","total_time":"Total coding time","total_time_duration":"(past 7 days)","open_collective_fec":"Front-End Checklist balance","open_collective_fec_url":"https://opencollective.com/front-end-checklist","open_collective_htmlhint":"HTMLHint balance","open_collective_htmlhint_url":"https://opencollective.com/htmlhint"},"photos":{"title":"Photography","url":"https://unsplash.com/@thedaviddias","downloads":"Unsplash Downloads","views":"Unsplash Views"},"tv":{"title":"TV and Film","url":"https://simkl.com/5311920","total_spent":"Total Time Watching","total_spent_duration":"(since the beginning)","last_week_spent":"Last Week's TV Time","last_week_spent_duration":"(last week)"},"gaming":{"title":"Gaming","total_number":"Total Number of Steam Games","most_played":"Most Played Game: {{name}}","most_played_duration":"(last 2 weeks)"},"latest-dashboard":"Mini Dashboard","viewAll":"→ View full dashboard"},"unsplash":{"downloads":"Unsplash Downloads","views":"Unsplash Views"}},"books":{"currently":"Currently Reading","next":"Reading Queue","sections":{"viewAll":"→ Check my Goodreads profile"}},"youtube":{"sections":{"latest_videos":"Latest YouTube Videos","viewAll":"→ Visit my YouTube channel"}},"newsletter":{"title":"Subscribe to \"David's Dev Diary\" Newsletter","description":"Receive emails about web development, tech, and life abroad!","form":{"input":{"placeholder":"username@email.com","label":"Email for Newsletter"},"submit":{"text":"Keep in Touch!","short":"Subscribe"}},"seo":{"description":"Read and subscribe to my weekly newsletter!"},"sections":{"latest":"Latest Newsletters","viewAll":"→ View my newsletter"},"all_issues":"Browse past issues"},"related":{"title":"You Might Also Like","description":"Check out these other posts:"},"share":{"title":"Share This Post"},"buyMeACoffee":{"title":"Did you find this article valuable? 🤔","description":"I create free resources and share knowledge with the developer community. Your support helps me maintain and create more quality content!","cta":{"sponsor":"becoming a GitHub sponsor","share":"or simply sharing this article with your network"},"help_text":"You can help by"},"book":{"h1":"Upcoming Book","seo":{"description":"Subscribe to get notified when my upcoming book is available! Get early access to essential tips for junior developers!"},"sections":{"preOrder":"Notify me when available"}},"testimonials":{"path":"/testimonials","card":{"at":"at {{company}}","viewOn":"View on {{source}}"},"seo":{"title":"Testimonials - What People Say About Me","description":"Discover what people say about working with me, my mentoring sessions, and my contributions to the tech community.","url":"testimonials"},"h1":"What People Say About Me","description":"Testimonials from people I've worked with and mentored","sections":{"viewAll":"→ View all testimonials"}}},"about":{"about":{"path":"/about","seo":{"url":"about","title":"About David Dias","description":"Learn a little bit about 'The David Dias'"}},"home":{"path":"/","seo":{"title":"The David Dias | Front-End Developer, podcaster \u0026 content creator","description":"Hey, I'm David Dias! Front-End Developer based in Toronto/Canada. I love talking about code, technology, expatriation and life."},"hero":{"greetings1":"Hey there!","greetings2":" I'm David Dias","presentation":"I'm a Front-End Developer, podcaster and content creator passionate about solving digital and human challenges! I thrive on building communities, exploring tech innovations, and discussing the intricacies of web development and expatriate life. Let's connect and share ideas that shape the digital world!"},"sections":{"podcast":{"latest_podcasts":"Latest podcast","view_website":"View more on the website","url":"https://worldwebstories.com"}}}}}},"__N_SSG":true},"page":"/","query":{},"buildId":"t9SeR6ts119RZqm1Vji9T","isFallback":false,"gsp":true,"locale":"en","locales":["en"],"defaultLocale":"en","scriptLoader":[]}</script></body></html>