Discover
others / www.youtube.com2022-05-23

Can I Build and Deploy a Remix Site in 5 Minutes? by Ian Sutherland

Can I build and deploy a Remix site in 5 minutes? Let's find out! In this talk I will attempt to build a basic Remix site with a couple of pages and deploy it to a cloud provider. Will I succeed in setting a web development record or fail spectacularly? Speaker Bio: Ian is a full stack software developer, open source maintainer and speaker. He's currently the head of Developer Experience at Neo Financial, the maintainer of Create React App and a member of the Node.js team. You can find him on Twitter and GitHub @iansu. Follow Ian: https://twitter.com/iansu Code: https://github.com/iansu/remix-fan-club Learn more at https://remix.run

others / www.youtube.com2022-05-22

Crash Course with Remix Run which is a NEW Full Stack JavaScript Framework you MUST try in Arabic

In this video, I will go deeper into the core concepts in @Remix as We build a blog app with Prisma and Sqlite. Remix is a full-stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. 🚀 Join Discord - https://discord.com/invite/amsZty2hkM ▬ 🔗 Chapters ▬▬▬▬▬▬▬▬▬▬ ⌛️ 00:00:00 Remix Intro ⌛️ 00:07:27 Remix Project Initialization - File Structure Overview ⌛️ 00:12:26 React Overview - Class/Functional Component ⌛️ 00:16:57 React Overview - Props ⌛️ 00:22:00 React Overview - State ⌛️ 00:25:00 React Overview - Handling Events ⌛️ 00:29:00 React Overview - Functional Component [hooks] ⌛️ 00:33:37 What/Why Remix ⌛️ 00:35:40 Add Tailwind CSS with Configuration ⌛️ 00:46:00 Configure Prettier and Eslint ⌛️ 00:53:00 Your First Route ⌛️ 00:46:00 Loading Data - Loader ⌛️ 01:10:00 Refactoring and Models ⌛️ 01:19:00 Dynamic Route Params ⌛️ 01:33:54 Nested Routing ⌛️ 01:41:03 Actions ⌛️ 02:03:00 Progressive Enhancement - Data Mutation ⌛️ 02:11:00 Delete Data ⌛️ 02:27:00 Prisma and Pulling from a data source ⌛️ 02:50:00 Error Boundary ⌛️ 02:54:00 Outro ▬ 🔗 Resources ▬▬▬▬▬▬▬▬▬▬ ⭐️ Github Repo: https://github.com/moelzanaty3/complete-intro-to-remix-run ▬ 🔥 Contact Me ▬▬▬▬▬▬▬▬▬▬ BIO: https://moelzanaty3.bio.link/ 💖 Become a Patron: Show support & get perks! https://www.patreon.com/mohammedelzanaty ☕️ You Don't need to meet me to buy a coffee: https://www.buymeacoffee.com/moelzanaty3 🔗 GitHub: https://github.com/moelzanaty3 🔗 LinkedIn: https://www.linkedin.com/in/moelzanaty3 🔗 Twitter: https://twitter.com/moelzanaty3 📪 mohammedelzanaty129@gmail.com ▬ ⚙️ My Equipment Gear ▬▬▬▬▬▬▬▬▬▬ 🌟 https://kit.co/mohammdelzanaty/my-youtube-and-teaching-gear ▬ 🎨 My Editor Settings ▬▬▬▬▬▬▬▬▬▬ 🌟 Night Owl Color Theme. 🌟 Dank Mono Font or more information - https://www.youtub.com/watch?v=ykA7WnUQuV0

others / egghead.io2022-05-20

Up and Running with Remix

What is Remix? > Remix is a seamless server and browser runtime that provides snappy page loads and instant transitions by leveraging distributed systems and native browser features instead of clunky static builds. > -- remix.run But that summary only scratches the surface. Remix has great mental models, is extremely fast, and has a plethora of components and features that will make your life easier and web apps perform better. And in this course, you'll be learning how to take full advantage of what Remix has to offer. You will learn by building a full-featured blog with a database, authentication, CRUD operations, user roles, and more! If you want to read more about why should give Remix a chance, give Kent's blog post, Why I Love Remix, a read!

others / www.youtube.com2022-05-19

How to Speak with Remix by Andre Landgraf

Remix is a full stack web framework but how "full stack" can we make it? Voice user interfaces have seen substantial growth in adoption and popularity over the past years. Unfortunately, there hasn't been much visible effort to apply the latest advancements in web development (frontend development) to the field of voice UIs. I created react-ssml-dom to apply the component-based approach to voice UIs. It was a fun project and I was able to create a small Google Assistant action using React to render SSML! Now, a few years later, Remix is out and has changed the way I develop for the web! What if we could use Remix to also render voice applications? Or full stack web and voice apps? Speaker Bio: Hey there! I am a Software Engineer from Germany with a background in Information Systems. I am currently doing my master's degree in Computer Science in Palo Alto, CA! I love to develop web and voice apps. Sometimes I also study for my degree. On the weekends, I hike, watch Marvel, or listen to Syntax.fm. Please find me on Twitter or the Remix Discord server and get in touch! Follow Andre: https://twitter.com/AndreLandgraf94 Learn more at https://remix.run

others / www.youtube.com2022-05-19

Purge Per Route by Brooks Lybrand

Love or hate Tailwind, one thing it gets right is only shipping the CSS _you_ use. However, you still have to ship your **entire** site's CSS, no matter how big it gets or what page the user is on. Love or hate Remix (wait, who hates Remix?), one thing it does best is only shipping the CSS each _page_ needs. Remix also removes stylesheets when you navigate away, which avoids clashing styles and class names. What if we could combine these two features? In this talk I will show you how to generate only the CSS _you_ use, while shipping no more CSS than each _page_ needs? Speaker bio: Hi, my name is Brooks Lybrand and I work as Web Engineer for the best grocery store in the world (okay, at least in Texas): H-E-B! I specialize in building proof of concepts, evaluating tools, and creating highly interactive, data-rich applications. I am passionate about exploring new ideas and technologies, discovering how they can better other's lives, and guiding people to these solutions. When I'm not coding, I love spending time with his wife and dogs, camping, playing board games, and pretending I know what I'm talking about when it comes to coffee and beer. Brooks Lybrand's Twitter: https://twitter.com/BrooksLybrand Repo: https://github.com/brookslybrand/purge-per-route Statechart representation of logic: https://stately.ai/registry/editor/105a41c2-1cd9-41a9-a27a-324c71bfb735

others / www.youtube.com2022-05-19

Migrating a Rails & React SPA to Remix by Diogo Biazus

Maintaining a stack with multiple programming languages can drastically increase the cognitive load of a team. Unifying the frontend and the backend under a single language has always been a tantalizing prospect. With Remix this becomes an achievable goal, however, migrating without a big rewrite is always challenging, while migrating with a big rewrite is often disastrous. This is the story of how we are planning a migration feature by feature, using an integrated authentication system that works on both our Rails backend and on the Remix server. We also disastrous leveraged resource routes to proxy the old application and integrate everything under the same domain, making the back and forth between legacy and rewritten features seamless. Speaker bio: Diogo Biazus has been a software developer since the late 90s. Since then, he has also worked as an open-source contributor, conference organizer, PostgreSQL instructor and consultant, systems integrator (yay, EDI!), "the DevOps guy", and team lead. He has contributed to PostgREST (https://github.com/PostgREST/postgrest) and published PostgreSQL tools such as postgres-websockets (https://github.com/diogob/postgres-websockets), postgres-copy (https://github.com/diogob/postgres-copy), and hasql-notifications (https://github.com/diogob/hasql-notifications). He now focuses on improving DX at Seasoned. Diogo Biazus' GitHub: https://github.com/diogob Repo: https://github.com/SeasonedSoftware/remix-migration

others / www.youtube.com2022-05-19

Why you should lift component state up to the URL

"How can I sync component state with the URL?" This is one of the most common questions I see asked in the React community, and in this video we're going to learn why trying to synchronize state between your React app and the URL is a bad idea – and the right way to address this issue. 👉 Demo: https://2022-05-16-hoisting-state-to-url.vercel.app 🧑‍💻 Source on GitHub: https://github.com/samselikoff/2022-05-16-hoisting-state-to-url/blob/main/app/routes/index.jsx

others / www.youtube.com2022-04-28

How to Speak with Remix by Andre Landgraf

Remix is a full stack web framework but how "full stack" can we make it? Voice user interfaces have seen substantial growth in adoption and popularity over the past years. Unfortunately, there hasn't been much visible effort to apply the latest advancements in web development (frontend development) to the field of voice UIs. I created react-ssml-dom to apply the component-based approach to voice UIs. It was a fun project and I was able to create a small Google Assistant action using React to render SSML! Now, a few years later, Remix is out and has changed the way I develop for the web! What if we could use Remix to also render voice applications? Or full stack web and voice apps? Speaker Bio: Hey there! I am a Software Engineer from Germany with a background in Information Systems. I am currently doing my master's degree in Computer Science in Palo Alto, CA! I love to develop web and voice apps. Sometimes I also study for my degree. On the weekends, I hike, watch Marvel, or listen to Syntax.fm. Please find me on Twitter or the Remix Discord server and get in touch! Follow Andre: https://twitter.com/AndreLandgraf94 Learn more at https://remix.run