Talks
others / www.youtube.com2022-08-16

Working with Remix Form Data on Netlify

Remix is a JavaScript framework that aims to make creating a production ready application easier than ever. A Remix stack is a template preconfigured with popular tools to get you up and running faster. Netlify's templates team created the K-Pop Stack that integrates Remix with Tailwind CSS for styling and Supabase as the database. Brittney Postma is hosting with Kent C. Dodds, co-founder and Director of Developer Experience at Remix, to build a site using the K-Pop Stack, showing how form data works in Remix, and deploying it all to Netlify. Join them for a live coding session. We'll try to field questions as we go and learn how to take your sites to the next level with Remix and Netlify. - K-Pop Stack (https://kpop-stack.netlify.app/) - Netlify (https://netlify.com/) - Remix (https://remix.run/)

others / www.youtube.com2022-08-16

Supabase Happy Hour #15 - Supabase File Storage in Remix

Supabase is an extremely powerful and cheap option for building your next big startup idea. In this series, Jon Meyers, Alaister Young and Tyler Shukert demonstrate how to build a SaaS product using Remix and Supabase ๐Ÿ’ฐ This week we dive deep into Supabase File Storage and Remix. We build our own custom upload handler using the experimental `unstable_parseMultipartFormData`, `unstable_composeUploadHandlers` and `unstable_createMemoryUploadHandler` APIs, and define a relationship between our entries and their uploaded files, using the Array column type in PostgreSQL. 00:00 Starting soon 00:50 Introductions 03:17 Supabase Launch Week 10:49 Supabase Hackathon 23:43 Reviewing community PR 34:40 Uploading files in Remix Action 55:30 Array column type in PostgreSQL 01:03:26 Creating signed URLs for private files 01:32:38 Displaying signed URL images in UI 01:57:23 Social links 02:01:01 Thanks for watching GitHub Repo: https://github.com/dijonmusters/happy-days Wanna have a say in what we build? Join us live every Thursday 5pm PT / 8pm ET โŒš๏ธ Follow the Supabase Happy Hour team ๐Ÿ™Œ ๐Ÿฆ˜ Jon Meyers: https://twitter.com/jonmeyers_io ๐Ÿฃ Tyler Shukert: https://twitter.com/dshukertjr ๐Ÿจ Alaister: https://twitter.com/alaisteryoung Resources ๐Ÿง  Supabase Launch Week 5 - https://supabase.com/launch-week Supabase Hackathon - https://supabase.com/blog/launch-week-5-hackathon Supabase Gold Cap - https://store.supabase.com/products/gold-supacap Supabase File Storage docs - https://supabase.com/docs/guides/storage Remix Upload Handler docs - https://remix.run/docs/en/v1/api/remix#unstable_parsemultipartformdata Dashibase's Lotion - https://lotion.dashibase.com/ Happy Chat ๐Ÿ’ฌ Did you miss us building out a multi-platform realtime chat app with Supabase, Next.js and Flutter? Check out this playlist ๐Ÿ’ฏ https://www.youtube.com/watch?v=sOSrPDtvvaQ&list=PL5S4mPUpp4OvEgxBhoVxXb5YS1ZAZih2l --- Learn more about Supabase ๐Ÿ‘‡ ๐Ÿ•ธ Website: https://supabase.com/ ๐ŸŽฅ YouTube Channel: https://www.youtube.com/c/supabase ๐Ÿฆ Twitter: https://twitter.com/supabase/ ๐Ÿ‘พ Twitch: https://www.twitch.tv/supabase_tv ๐Ÿ“„ Docs: https://supabase.com/docs ---

others / www.youtube.com2022-08-04

Kent C. Dodds @ ReactNext 22 - Stream Away the Wait

ReactNext 2022 www.react-next.com Israel's Annual React & React-Native conference Powered by EventHandler ----------------------------------------- Stream Away the Wait: When implementing the design of a user interface, we often finish before remembering that not everyone's running the app's services locally on their device. There's going to be network latency, long running database queries, and large datasets that can slow down the experience. We can and should do everything we can to speed things up, but not all of this is within our control. This means we need to start thinking about pending states. But pending UI is terrible. In this talk, Kent will walk us through building a pending experience that is quite delightful. Ultimately taking advantage of React 18's new streaming APIs and a soon-to-be-released API in Remix to give a top-notch user and developer experience. Prepare to have your mind blown. ----------------------------------------- Kent C. Dodds: Kent C. Dodds is a world renowned speaker, teacher, and trainer and he's actively involved in the open source community as a maintainer and contributor of hundreds of popular npm packages. Kent is a Co-Founder and Director of Developer Experience at Remix. He is the creator of EpicReact.Dev and TestingJavaScript.com. He's an instructor on egghead.io and Frontend Masters. He's also a Google Developer Expert. Kent is happily married and the father of four kids. He likes his family, code, JavaScript, and Remix. ----------------------------------------- #javascript #reactjs #programming #software #development #softwaredevelopment

others / www.youtube.com2022-08-05

Remix Meetup July 28th

This Remix Austin meetup took place at the H-E-B Digital & Favor Eastside Tech Hub in Austin, TX on July 28th. We had 3 amazing speakers present! 00:00 Creating a Terms of Service Banner โ€“ Brooks Lybrand 11:29 Sending Emails in Cloudflare with Remix Forms โ€“ Justin Reynolds 34:42 Headless e-commerce with Medusa, Remix, NX and Tailwind โ€“ Jake Ruesink 1:21:39 Goodbye Creating a Terms of Service Banner โ€“ Brooks Lybrand The O.G. localStorageโ€”the cookie. Remix makes it super easy to leverage these little guys to do all sorts of things, like drive the state management for a Terms of Service Banner! Repo: https://github.com/brookslybrand/tos-cookie Sending Emails in Cloudflare with Remix Forms โ€“ Justin Reynolds Remix gives you full control of your entire stack, which makes creating a service like a contact form with auto email capabilities incredibly easy. Watch as Justin runs through putting all the pieces together for a simple and free solution. Live site: https://remixdevs.com/ Headless e-commerce with Medusa, Remix, NX and Tailwind โ€“ Jake Ruesink Jake will show us how he and his team at Lambda Curry are able to effectively and rapidly build awesome ecommerce sites with Remix and MedusaJS Repo: https://github.com/jaruesink/remix-medusa Want to attend future Remix Austin meetups? Join our group to be notified of future events: https://www.meetup.com/remix-austin

others / www.youtube.com2022-07-15

Supabase Happy Hour #12 - protected/authenticated loaders and actions with Remix and Supabase

Supabase is an extremely powerful and cheap option for building your next big startup idea. In this series, Jon Meyers, Alaister Young and Tyler Shukert demonstrate how to build a SaaS product using Remix and Supabase ๐Ÿ’ฐ This week we implement protected loaders and actions, requiring the user to be signed in with a valid session, before they can navigate to a particular route. Additionally, we create a reusable helper function to wrap around any Remix loader or action to ensure the user is authenticated ๐Ÿง  00:00 Starting soon 00:42 Introductions 07:40 Fun facts 17:38 What's new with Supabase 25:20 Recap last week 33:30 withAuth helper 1:02:00 Fixing user for SSR 1:17:47 Entry Detail page 1:34:57 Entry Edit page 2:04:56 Social links 2:06:55 Thanks for watching GitHub Repo: https://github.com/dijonmusters/happy-days Wanna have a say in what we build? Join us live every Thursday 5pm PT / 8pm ET โŒš๏ธ Follow the Supabase Happy Hour team ๐Ÿ™Œ ๐Ÿฆ˜ Jon Meyers: https://twitter.com/jonmeyers_io ๐Ÿฃ Tyler Shukert: https://twitter.com/dshukertjr ๐Ÿจ Alaister: https://twitter.com/alaisteryoung Links and resources ๐Ÿ™ CityJS Singapore (online and in person) - https://singapore.cityjsconf.org/ โ˜๏ธ 50% off Level Up Tutorials Pro subscription - https://leveluptutorials.com/pro ๐Ÿ’ฟ Realtime Remix with Supabase - https://leveluptutorials.com/tutorials/realtime-remix-with-supabase ๐Ÿช Session cookies in Remix - https://jonmeyers.io/blog/store-data-in-a-cookie-with-sessions-and-remix ๐Ÿฅš egghead case study - https://egghead.io/case-studies/jon-meyers ๐Ÿง™โ€โ™€๏ธ Supabase tips: one to many relationships - https://www.youtube.com/watch?v=5VrF9OVQ6rg Happy Chat ๐Ÿ’ฌ Did you miss us building out a multi-platform realtime chat app with Supabase, Next.js and Flutter? Check out this playlist ๐Ÿ’ฏ https://www.youtube.com/watch?v=sOSrPDtvvaQ&list=PL5S4mPUpp4OvEgxBhoVxXb5YS1ZAZih2l --- Learn more about Supabase ๐Ÿ‘‡ ๐Ÿ•ธ Website: https://supabase.com/ ๐ŸŽฅ YouTube Channel: https://www.youtube.com/c/supabase ๐Ÿฆ Twitter: https://twitter.com/supabase/ ๐Ÿ‘พ Twitch: https://www.twitch.tv/supabase_tv ๐Ÿ“„ Docs: https://supabase.com/docs ---

others / www.youtube.com2022-06-06

"Working with Nested Routes and Parameterized Routes" by Aaron Saunders at #RemixConf ๐Ÿ’ฟ

We will walk through a simple demonstration of a remix application using nested routes and parameterized routes. The use of nested routes helps me with component design and separation when architecting an application. Parameterized routes / Dynamic Routes contain state information that can through the parameters that are defined on the route. This provides powerful flexibility when designing your app and app's components. Putting the two together in an simple solution to be a reference when you build something amazing. Speaker bio: Aaron is an Information Technology Strategist, Thought Leader, and Diversity and Inclusion Trailblazer - Founder & CEO of Clearly Innovative. He believes technology and in his case coding is an enabler and an equalizer. Aaron has focused a large part of his career training and developing individuals who want to get into tech but cannot find the opening; through the apprenticeship program he ran at Clearly Innovative, teaching web and mobile development at Howard University, and the free technical videos on his Youtube Channel he just want to help others get a seat at the table of tech and innovation. Learn more at https://remix.run/conf/2022/speakers/aaron-k-saunders

others / www.youtube.com2022-06-01

When To Fetch: Remixing React Router - Ryan Florence

Recorded live at Reactathon 2022. Learn more at https://reactathon.com When To Fetch: Remixing React Router We've learned that fetching in components is the quickest way to the worst UX. But it's not just the UX that suffers, the developer experience of fetching in components creates a lot of incidental complexity too: data fetching, data mutations, busy spinners, optimistic UI, error handling, form state, network race conditions, user event interruptions, and all the code that holds it together gets pretty difficult! As we've built Remix, we've gotten a lot of practice leaning on React Router's nested route abstraction to solve all of these problems all at once. Now, millions of React Router apps in production can get the same benefits because we've moved the responsibility of knowing When To Fetch into React Router itself! About Ryan Florence Ryan is the co-founder of Remix, co-creator of React Router, and co-founder of React Training. Event production and post-production by EventLoop. Let's build your conference brand, or take it to the next level. info@eventloop.app

others / www.youtube.com2022-06-06

"Deno and Remix" by Ryan Dahl at #RemixConf ๐Ÿ’ฟ

In this talk Ryan will give an overview of Deno, a modern JavaScript runtime, and Deno Deploy, a serverless at edge JavaScript hosting service. He'll give a peak behind the sceenes at the technology powering Deno Deploy, and of course demo how to deploy a Remix app on it. Speaker bio: In 2009, Ryan Dahl released Node.js. Now, Ryan is the CEO of Deno, the company behind the Deno project: A modern runtime for JavaScript and TypeScript. Deno's deploy product is pushing this runtime in the future of modern web architecture via multi-regional deploys with an outrageously fast runtime. Learn more at https://remix.run/conf/2022/speakers/ryan-dahl

others / www.youtube.com2022-06-06

"Remix Conf 2022 Keynote" by Michael Jackson at #RemixConf ๐Ÿ’ฟ

Michael will kick the inaugural Remix Conference off! Speaker bio: Michael Jackson is the CEO and co-creator/co-founder of Remix. He is the co-author of React Router and a prolific contributor to open source. He is the creator of unpkg.com and gets a kick out of discussing distributed system design as much as he enjoys front-end architecture. Michael lives in Carlsbad, CA with his wife, two boys, and two girls. Learn more at https://remix.run/conf/2022/speakers/michael-jackson

others / www.youtube.com2022-06-06

"Full Stack Fast: Data on the Edge" by Greg Brimble at #RemixConf ๐Ÿ’ฟ

Why force your users to settle for either loading skeletons or slow page renders? Remix can bring your application rendering to the edge, but what about your data? Why should every request have to call back to a single database cluster in Virginia? For the best performance and experience for your users, store your data on the edge, alongside the rest of your application. We'll discuss how the original colocated server and database configuration worked, how it evolved with Jamstack, improved with next-gen data services, and how today's technology supports a new architecture altogether. But distributed systems are notoriously hard to design for, and edge-based storage is no different, with the challenges of synchronicity being a particularly difficult problem. I'll highlight the benefits of edge-based storage, how it compares to the other options, and I'll showcase a truly global Remix application built with Cloudflare's KV, Durable Objects and R2. Speaker bio: Greg is a Systems Engineer at Cloudflare working on Cloudflare Pages in the Emerging Technologies and Incubation department. Cloudflare Pages is a full-stack developer platform and they were very excited to add support for Remix at the end of last year. Before Pages, Greg worked with Cloudflare's Speed Team where he learned to appreciate the Network tab of DevTools. Greg has also contributed to the Web Almanac and numerous open-source projects, and, most importantly, he has his fingers crossed for enough snow to go skiing after Remix Conf! โ›ท Learn more at https://remix.run/conf/2022/speakers/greg-brimble

others / www.youtube.com2022-06-06

"Expanding Remix with Rust" by Ben Wishovich at #RemixConf ๐Ÿ’ฟ

Remix's unique use of Loader and Action functions offers the unique opportunity to expand your data processing with Rust. Rust offers near native performance, memory safety through either the Node FFI or via compilation into WebAssembly. Learn the tricks to setup your Rust project to work with Remix, either on the server or the client, and take advantage of the most loved language with your favorite web framework! Speaker bio: Ben is a full stack web developer and software quality engineer with experience building high performance web applications. He's excited about using Remix and Rust to expand the possibilities and performance of the web app. When not coding, Ben might be found running around outside, cooking, or reading sci-fi in the sunny SF Bay Area. Learn more at https://remix.run/conf/2022/speakers/ben-wishovich

others / www.youtube.com2022-06-06

"Outstanding Search Experiences with Remix and Algolia" by Sarah Dayan at #RemixConf ๐Ÿ’ฟ

Outstanding search starts with two principles: immediate feedback and relevant results. Search-as-you-type experiences have become the standard since Google introduced Google Suggest and Google Instant on their search page in the 2000s. Users not only love the immediate feedback of instant experiences, they expect it. They also expect search to be excellent at understanding their intent, even when they misspell or forget words. Services like Algolia are designed to deliver instant, as-you-type, relevant results right from the first keystrokes. But what happens when the user's network is slow? What's relevant when the user didn't express intent yet? In this talk, we'll see how you can combine Algolia's client-side search with the power of Remix's server runtime to create snappy and delightful yet reliable and resilient search experiences that serve everyone. Speaker bio: Sarah is a Staff Software Engineer from Paris, France who works on front-end search experiences at Algolia. She created the Dinero.js monetary library and hosts the Developer Experience podcast show. She's passionate about building dynamic front-end experiences, and won't shut up about TDD and utility-first CSS. She shares what she learns on her blog and at tech conferences around the world. Learn more at https://remix.run/conf/2022/speakers/sarah-dayan

others / www.youtube.com2022-06-06

"Remix & High Performance eCommerce" by Sรฉbastien Morel at #RemixConf ๐Ÿ’ฟ

Performances are key. That statement is true for any web application but even more for eCommerce applications that convert performances into revenue. Why are eCommerce projects more complex than others? What are the key topics and the special things that you need to take into account when building an eCommerce application in 2022. In this talk we will deep dive into all the things that must be dynamic and how to achieve performances. All explained with a Remix project example. Speaker bio: Sรฉbastien is a passionate and accomplished tech leader and problem-solver with extensive experience in architecture, performance optimizations, development, and system administration. CTO at Crystallize, a super-fast, super modern, super sexy, and super-powerful Headless eCommerce"", he's in charge (among other) of the Developer eXperience initiative. Previously, he led and grew his former web agency for 18 years working on more than 150 projects successfully and proudly implemented, deployed and maintained. Agnostic of the web technology he's using, Sรฉbastien is also an open source maintainer active in the PHP/Symfony community. Learn more at https://remix.run/conf/2022/speakers/s%C3%A9bastien-morel

others / www.youtube.com2022-06-06

"Remixing a Symfony" by Emily Kauffman at #RemixConf ๐Ÿ’ฟ

In late 2020, I ran a Lighthouse test on a simple content page on Harvie, our farm management platform and Symfony app, and received a performance score of 31/100. The JavaScript bundle, the API requests, the database lookups, even with minimal UI to render, had a baseline score in the thirties! Along with customer feedback, this helped to catalyze a renewed commitment to performance at Harvie. Through numerous discussions, we walked through each step of page load, from networking to rendering, and identified where we could improve. After a year of rewrites and upgrades, our remaining detriment to overall performance was our frontend. We had been converting our Symfony twig templates into React SPA components and fell into the common problem of creating "request waterfalls", while our user had to stare at a loading screen. We needed a change, and for us, that was Remix. In this talk, I'll walk you through our team's journey with performance and how Remix has become a natural progression of that. Speaker bio: Emily is a Lead Software Engineer based out of Pittsburgh, PA. She's a lifelong learner, adjunct professor, and IoT enthusiast. Emily has a tech background in healthcare, robotics, and more recently, bringing local food to the masses at Harvie. In her spare time, you can find Emily tinkering with her homemade conversion van, scuba diving, or trying her hand at landscape photography. Learn more at https://remix.run/conf/2022/speakers/emily-kauffman

others / www.youtube.com2022-06-06

"State Machines on the Edge" by Erik Rasmussen at #RemixConf ๐Ÿ’ฟ

Modeling business logic with state machines has numerous benefits, from eliminating bugs caused by impossible states to visualizing the logic to communicate with non-technical shareholders to simply communicating user flow between technical colleagues. In this talk, I'm going to demonstrate, via live coding, how to combine the strengths of Remix and XState to create a checkout flow entirely on the backend. No. JavaScript. Required. Speaker bio: Erik is an expat American living in Spain. He's the author of Redux Form and Final Form, and is currently in love with TypeScript, XState, and Remix. His day job is using those technologies to build Centered.app, a tool to combat the Twitters' and Facebooks' attempts to steal your attention, and give it back to you to be more productive in your work. Learn more at https://remix.run/conf/2022/speakers/erik-rasmussen