Jolly Coding
Jolly Coding
  • Видео 41
  • Просмотров 195 700
The END of Remix?!? - Huge React Announcement
There has been two main Frameworks, Remix and NextJS. For nearly four years, Remix has been a fullstack framework built on web standards, helping developers build better websites and applications. At React Conf 2024, the Remix team announced that Remix will be sunsetted and its features integrated into React Router v7. In this video, we'll explore why this change makes sense and what it means for the React ecosystem.
Announcement Post: remix.run/blog/merging-remix-and-react-router
React Conf 2024 (1hr 32mins in): ruclips.net/video/T8TZQ6k4SLE/видео.htmlstart=5552
-------
🐦 Twitter (X): jollycod.ing/x
🤓 Personal Site: jollycod.ing/me
💻 GitHub: jollycod.ing/git
JollyUI: jollycod.ing/ui
Chapters:
Int...
Просмотров: 3 611

Видео

Building Formula 1 GPT: Embracing Open Source and Community
Просмотров 75328 дней назад
I wanted to explore my process of learning. This is the beginning stages, covering getting an idea to proving it is possible with a proof of concept, and then iterating on it when possible. I go over how I integrated Web and PDF search to my AI chatbot, as well as real-time F1 information, using existing open-source projects. I also go over the areas I failed in this, and what I can learn from ...
Type-Safe Environment Variables in JavaScript
Просмотров 570Месяц назад
In JavaScript land you can use process.env or import.meta.env to load in your environment variables. The problem is, theres no type checking on this by default and no build time checking that it exists. T3 Env solves this and allows us to get autocomplete, type-safety and more for our environment variables with nice error messages for when things go wrong. T3 Env Docs: env.t3.gg/docs/introducti...
TypeScript FINALLY fixed this...
Просмотров 15 тыс.Месяц назад
TypeScript 5.5 is coming and it promises to solve a massive developer experience issue thats been with us for a while. We're getting inferred type predicates, control flow narrowing for indexed accessess and regex syntax checking! Announcement Blog Post: devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/ 🐦 Twitter (X): jollycod.ing/x 🤓 Personal Site: jollycod.ing/me 💻 GitHub: jol...
Supabase and NextJS 14: Auth and Server Actions
Просмотров 6 тыс.Месяц назад
Supabase is an awesome, open-source alternative to Firebase. Using it you can handle databases, auth and storage as well. Lets look at how we can do this on the Server Side, using NextJS, Email Login, oAuth Login (Github, Google etc). After, we will look at some of the React 19 / NextJS Features to handle forms, useFormStatus and useOptimistic to make out site a great user experience. Starter C...
NEW Drag and Drop Library for ANY framework
Просмотров 7 тыс.2 месяца назад
A great way to make your site experience even better is adding drag and drop functionality. This new library, released by the makers of Trello, and used by them in production, promises to solve all of your drag and drop needs for ANY tech stack. Lets take a look at pragmatic drag and drop, the successor to react-beautiful-dnd, and see how 3 functions can make a full drag and drop experience. Pr...
STOP using Layouts for Authentication!
Просмотров 23 тыс.2 месяца назад
Layouts combined with Server Components are awesome, and allow us to make database calls right from out components. However, there is a common pitfall with them when it comes to how we think of their rendering order. This is critical if you are trying to hide specific content using a layout check, as you may find the content can still be exposed using a GET request. Lets se what we can do to fi...
JavaScript... WTF?!?
Просмотров 1,3 тыс.2 месяца назад
Today is April Fools, but nothing in this video is fake. Lets take a look at some of the odd JavaScript behaviours that you may have run into before when debugging odd issues. Some of these feel like JavaScript is playing a prank on us! RegEx Tweet: eloffd/status/1770223037096329349 Examples from: github.com/denysdovhan/wtfjs Array string site: bluewings.github.io/en/writing-a-sente...
This UI Library Update is AWESOME!
Просмотров 3,5 тыс.2 месяца назад
UI Libraries are trending to easy to use copy and paste blocks. Shadcn recently added full page templates and a feature to edit this using v0 from Vercel, with AI and natural language. Lets check it out! ui.shadcn.com/blocks v0.dev/ 🐦 Twitter (X): jollycod.ing/x 🤓 Personal Site: jollycod.ing/me 💻 GitHub: jollycod.ing/git JollyUI: jollycod.ing/ui
NextJS 14 Markdown Blog (Part 2): Adding Topic Tags
Просмотров 1,2 тыс.2 месяца назад
Following on from our previous static blog tutorial, lets add topic tags to the page. Follow along with the RUclips chapters as they will align to the GitHub commits. GitHub Repo: github.com/jolbol1/nextjs-velite-blog-template Previous Tutorial: ruclips.net/video/tSI98g3PDyE/видео.html 🐦 Twitter (X): JollyShopland 🤓 Personal Site: jamesshopland.com 💻 GitHub: github.com/jolbol1 Chapt...
A UNIQUE Way to Write React
Просмотров 4002 месяца назад
There is always a debate in the front end world between styling systems. Well there is a new way for React, components that are made from your CSS. MistCSS, Offering type-safety and a separation of concerns. I thought it was such a unique approach, I had to share it! MistCSS Docs: typicode.github.io/mistcss/introduction.html 🐦 Twitter (X): jollycod.ing/x 🤓 Personal Site: jollycod.ing/me 💻 GitHu...
TailwindCSS V4 Update Makes UI libraries easier
Просмотров 1,6 тыс.2 месяца назад
Tailwind v4 is in Alpha. It has a smaller bundle, better performance, container queries and a massive change to configuration. I want to show you what this means for libraries like mine, shadcn/ui and tailwind compatibility with other tools! Release Blog: tailwindcss.com/blog/tailwindcss-v4-alpha 🐦 Twitter (X): jollycod.ing/x 🤓 Personal Site: jollycod.ing/me 💻 GitHub: jollycod.ing/git JollyUI: ...
STOP using outer margins
Просмотров 2,3 тыс.3 месяца назад
Making reusable components is an important part of web development. Lets look at a trap that beginners often fall into, and a better way to do it. Stop using outer margins, and instead opt for a layout container when you need spacing between elements. No Outer Margin Blog: kyleshevlin.com/no-outer-margin/ CSS Tricks Flexbox Chest Sheet: css-tricks.com/snippets/css/a-guide-to-flexbox 🐦 Twitter (...
NextJS 14 Markdown Blog: TypeScript, Tailwind, shadcn/ui, MDX, Velite,
Просмотров 18 тыс.3 месяца назад
Lets build a static blog site. We are going to utilize NextJS 14, shadcn/ui and Tailwind, Velite to read our content, MDX for writing our content allowing for custom components and TypeScript. Follow along with the RUclips chapters as they will align to the GitHub commits. This is my first long-form tutorial so any feedback is appreciated. GitHub Repo: github.com/jolbol1/nextjs-velite-blog-temp...
This UI Library is AWESOME
Просмотров 1,5 тыс.3 месяца назад
Making beautiful sites often involves animations that make the site come alive. This UI Library gives you all the code you need to make this happen. Copy and pasteable react components, built on top of framer motion to add some awesome animations effects Aceternity UI: ui.aceternity.com/ Framer Motion Docs: www.framer.com/motion/ 🐦 Twitter (X): JollyShopland 🤓 Personal Site: jamessh...
This is the FUTURE for User Experience
Просмотров 13 тыс.3 месяца назад
This is the FUTURE for User Experience
What's NEW in React 19
Просмотров 6203 месяца назад
What's NEW in React 19
Create a React App in 2024
Просмотров 1,1 тыс.3 месяца назад
Create a React App in 2024
10 Open-Source NextJS Projects to Learn From
Просмотров 1,8 тыс.4 месяца назад
10 Open-Source NextJS Projects to Learn From
Code Cleanup Made Easy... Remove JavaScript Exports, Files & Dependencies
Просмотров 2,6 тыс.4 месяца назад
Code Cleanup Made Easy... Remove JavaScript Exports, Files & Dependencies
AWESOME hooks to add to your projects
Просмотров 7184 месяца назад
AWESOME hooks to add to your projects
How To Create a Responsive CSS Helper Component
Просмотров 5184 месяца назад
How To Create a Responsive CSS Helper Component
Adobe's NEW UI Library, and Mine...
Просмотров 4,8 тыс.5 месяцев назад
Adobe's NEW UI Library, and Mine...
STOP using useState - URL Search Params
Просмотров 3,3 тыс.5 месяцев назад
STOP using useState - URL Search Params
These TypeScript Tricks are POWERFUL
Просмотров 3,7 тыс.5 месяцев назад
These TypeScript Tricks are POWERFUL
The BEST UI Library Just Got Better!
Просмотров 24 тыс.5 месяцев назад
The BEST UI Library Just Got Better!
MUST Have TypeScript Extensions
Просмотров 2,5 тыс.5 месяцев назад
MUST Have TypeScript Extensions
What are React Server Components?
Просмотров 3555 месяцев назад
What are React Server Components?
TypeScript & React: Tips, Tricks, and Best Practices
Просмотров 2,9 тыс.5 месяцев назад
TypeScript & React: Tips, Tricks, and Best Practices
The BEST way to learn TypeScript
Просмотров 5206 месяцев назад
The BEST way to learn TypeScript

Комментарии

  • @davidlintin
    @davidlintin 4 дня назад

    Hi 👋 just wanted a quick clarification on useFormStatus. So this hook can only be used on a child component of a form not in the form component itself am I right? So you’d need to split every form component into at least two parts?

  • @davidlintin
    @davidlintin 6 дней назад

    Why didn’t RUclips recommend this despite having notifications on “all”

  • @simonedwards7101
    @simonedwards7101 6 дней назад

    When you run build your code doesn't it show all the pages to be dynamic?

  • @MentoricGrowth
    @MentoricGrowth 7 дней назад

    thankyooooooooooouuuuuuuuuuuuuuuuuuu soo muchhhhhhhhhhhhhh i was having an problem like i couldnt get my data to display everytime i deleted or added it, but while watching this video, i got to know about revalidatePath and it solved it like thankssss a lottttttttttttt~

  • @user-us3bs8px3m
    @user-us3bs8px3m 8 дней назад

    Max said end of React. You say end of Remix. Whom should I listen to?

    • @ben53933
      @ben53933 6 дней назад

      None. Nothing is ending

    • @user-us3bs8px3m
      @user-us3bs8px3m 6 дней назад

      @@ben53933 Actually. true. Follow the statistics. Angular probably ending. very few jobs. every few months a new syntax. damn unpaved.

  • @patrickmotaung5866
    @patrickmotaung5866 9 дней назад

    I'm so grateful I found this video

  • @DimaSofiyuk
    @DimaSofiyuk 11 дней назад

    Awesome demo and explanation of the generative UI in AI applications! It's fascinating to see how interfaces can dynamically interact with users based on their inquiries. I use Plerdy's free version to optimize user experience by analyzing how visitors interact with my site, which helps me make similar user-centric decisions without sophisticated AI tools. It’s amazing to see how technology continues to evolve in this space! 🌐

  • @dan.stacy1
    @dan.stacy1 11 дней назад

    Amazing video. This was so helpful! Thank you so much.

  • @eliuddyn
    @eliuddyn 11 дней назад

    Amazing 🔥🔥

  • @matt-d-webb
    @matt-d-webb 11 дней назад

    Great tutorial! Note: The use of the word "essentially" (84 times) was perhaps a little overused 🙂

  • @MrRPss
    @MrRPss 12 дней назад

    Dude I believe there’s some issue with the sound tho

  • @daviddrughi3337
    @daviddrughi3337 12 дней назад

    this is absolutely AMAZING ! thank you so much! just amazing !

  • @Gabeyre
    @Gabeyre 17 дней назад

    Vercel AI

  • @mainamburu8036
    @mainamburu8036 19 дней назад

    great stuff ..would love that tutorial

  • @kshitijsingh2832
    @kshitijsingh2832 20 дней назад

    Great work! Would really love a tutorial with the SDK.

  • @lasal7820
    @lasal7820 20 дней назад

    thanks a lot! I've subscribed!

  • @digitalsahara6670
    @digitalsahara6670 20 дней назад

    Hi there, great tutrial so far, love the explanations I had a questions around the 21:50 where you are signing up, I a getting a { status: 429, code: 'over_email_send_rate_limit'} error from supabase, I didnt change the code, just downloaded the repo and was following along, are you aware of why this could be?

    • @JollyCoding
      @JollyCoding 19 дней назад

      This is related to the confirm email step I mentioned at around 5:00 , Supabase limits email confirmations that it can send, as you are supposed to link your own email provider. If you are just testing, toggle off "Confirm Email".

    • @digitalsahara6670
      @digitalsahara6670 19 дней назад

      @@JollyCoding ohh, I see got you now! thank you so much for such a great tutorial and quick response.

    • @Innesb
      @Innesb 2 дня назад

      Supabase now has a very low email limit for sending verification emails. You can disable the requirement for verification emails in Supabase account settings (but be sure to enable it for production). A better solution is to specify your own SMTP server in Supabase settings. There are many SMTP service providers, but SMTP2GO provides 1000 email sends per month for free.

  • @Thassalocracy
    @Thassalocracy 23 дня назад

    The blog says quite clearly that remix is not going to disappear, just rebranded as react router v7. And it also hints at server components coming soon. It would be really weird if remix were to just disappear all of a sudden given that Shopify created, maintains and uses it.

  • @flnnx
    @flnnx 24 дня назад

    I've taken a similar approach. The only thing that I am not a big fan of is calling getUser() for the post requests requests. It slows down the app a little bit, but it's way more secure tho. I wonder if there's some work-around for that.

  • @y.m.o6171
    @y.m.o6171 25 дней назад

    Great work. Can you please add the appropriate license file to the git repo in case you want this code to be shareable with others like me.

  • @robertwachira8172
    @robertwachira8172 25 дней назад

    Didn't see that coming, remix taking a "little nap", I think for any serious projects you should stick with nextjs, seriously.

  • @AnnalogueCodes
    @AnnalogueCodes 25 дней назад

    Wow this is a rip-off of this exact same video (even the shirts are the same): ruclips.net/video/ukpgxEemXsk/видео.htmlsi=oyd_mdqTwIi03UY9

  • @fastneasy
    @fastneasy 26 дней назад

    that's another reason to love Svelte : their fullstack offering Sveltekit is built by themselves

  • @codernerd7076
    @codernerd7076 26 дней назад

    I now using the router from the react-query devs in my Vite apps. The react-router broke my projects too many times

    • @JollyCoding
      @JollyCoding 26 дней назад

      Tanstack Router is awesome, certainly good to see some innovation in this space, especially from the smart guys over at tanstack. Cant wait to see where their framework goes in the future tanstack.com/start/latest

    • @knowledgedose1956
      @knowledgedose1956 26 дней назад

      in what ways, for example

    • @StingSting844
      @StingSting844 25 дней назад

      If React router adds typesafe routing like Tanstack router this is going to be solved. Its just going to be a patch fix for sure. The API is just solid

    • @lamhung4899
      @lamhung4899 23 дня назад

      Break in what way?

  • @JollyCoding
    @JollyCoding 26 дней назад

    EDIT: Since filming this they have updated the blog post, to try clear up some confusion about where the Remix brand is going: remix.run/blog/merging-remix-and-react-router Have you used React Router or Remix? What do you think of this move? More confusion in the short-term? Less in the long-term? Let me know!

  • @yarapolana
    @yarapolana 26 дней назад

    revalidatePath thing made me rethink using NextJS again, I really like Remix.

    • @JollyCoding
      @JollyCoding 26 дней назад

      A lot of people share similar thoughts on some of the NextJs stuff. I think Remix has stuck a lot closer to pure React that people find it an easier concept to grasp. Maybe I should do a tutorial on Remix one day!

    • @yarapolana
      @yarapolana 24 дня назад

      @@JollyCoding Please do, the community needs it.

    • @davidlintin
      @davidlintin 4 дня назад

      Next JS are changing the way cache works in the next release btw. They listened to users. 😮

    • @withoktaves
      @withoktaves 4 дня назад

      @@davidlintin the only thing missing is fixing the turbopack, after years different computers, haven't managed to get a basic app (even without any calls) to be faster than 5s in development mode, production works fine (luckily).

  • @blink11101
    @blink11101 26 дней назад

    bro, this is a quality tutorial. thanks!

  • @rawarg
    @rawarg 26 дней назад

    Overall Great Awesome Work You Did There!!! I am not 100% sure about the things I will write in this comment. But I guess it is better to check out and learn. Only thing that conserns me is that on 1:31:45 you've added notFound() from next/navigation. Actually because you are using generateStaticParams that notFound fn would only work in local environment but not at production level. Let me explain why? generateStaticParams runs before the corresponding Pages or Layouts are generated on next.js build time. What is happening behind the curtain: Using generateStaticParams on a path that is SSR, the build works because it could access the data but then the pages never got created on the build time. This means, your pages are built anticipating static rendering but at runtime. So when anyone tries to go to the path, there's no static page to render and also usage of dynamic functions are not allowed in Next.js (in this case it is the searchParams) - so you will get the 500 error on production. I may be 100% wrong about this because of this new server and client directives actually a huge mess to grasp. We're using a mix of static and SSR which is why I may got mixed up. Here are some references that made me question your approach. Static & Dynamic Rendering: nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default Dynamic Functions: nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-functions

  • @digitalsahara6670
    @digitalsahara6670 28 дней назад

    Hi there, fantastic video, really love the way you explain things are you able to do a breakdown on how you created the JollyUI? would love to learn more about the architecture and creating reusable components for design systems

  • @MrDiaz-hw3uy
    @MrDiaz-hw3uy 28 дней назад

    any framework!... for react :(

    • @JollyCoding
      @JollyCoding 28 дней назад

      It works with react, svelte, vue, angular and more! github.com/atlassian/pragmatic-drag-and-drop The readme lists them. Just my examples were react as that’s what I am comfortable with!

    • @MrDiaz-hw3uy
      @MrDiaz-hw3uy 28 дней назад

      @@JollyCoding Oh! sorry. Ist's just that I made a short check in the docs and a google research and I didn't found any mention to angular

  • @emmanuelgenga7421
    @emmanuelgenga7421 28 дней назад

    Part of me is smiling watching this, it's also something interesting to build in the learning process

  • @korendani
    @korendani 28 дней назад

    Nice! The problem with all F1 related apps is the violation of their IP... It is literally impossible for you to do anything.... Even the telemetry data is registered... it can't be used without their permission. BTW, Lewis is Ok... ;)

    • @JollyCoding
      @JollyCoding 28 дней назад

      Yeah it’s a fun learning project, I wouldn’t want to release it in any big state because I imagine F1 are quite protective! Don’t need that headache! Might be a bit of a Lewis fan… do just love a good race too though!

  • @JollyCoding
    @JollyCoding 28 дней назад

    This was my first time trying something new here, I appreciate it wont be perfect, but that is quite fitting with the conclusion of the video! Let me know what you think, and did you pick up on who I may support in F1?... Subtle.

    • @ebm_gamer
      @ebm_gamer 28 дней назад

      You did great! Love your presentation style and the content in this one 👏👏👏

  • @yukiritosurada8392
    @yukiritosurada8392 Месяц назад

    How to break apart sprite sheets?

  • @suzma_a
    @suzma_a Месяц назад

    queeestion? can you also check in middleware for different subscription tiers? eg. there are three groups of posts (posts and info to which group they belong is fetched from cms) thanks!

  • @staystealth
    @staystealth Месяц назад

    fantastic video! was looking for an example of rendering markdown with nextjs. glad i stumbled across this

    • @JollyCoding
      @JollyCoding 26 дней назад

      Awesome to hear, thank you!

  • @roylaw2866
    @roylaw2866 Месяц назад

    good stuff!

  • @boyo_23
    @boyo_23 Месяц назад

    i think this works as well i am not sure though ^react(/(.*)$|$)

  • @bunggoonesixeight8920
    @bunggoonesixeight8920 Месяц назад

    VS Code What font do you use?

  • @oopss794
    @oopss794 Месяц назад

    "Any tech stack" , what about react native?

  • @BruceWayne-lm6xt
    @BruceWayne-lm6xt Месяц назад

    Honestly I found It difficult to Undestand the tutorial I will continue after learning further Thanks

    • @JollyCoding
      @JollyCoding 26 дней назад

      Anything you think I could improve, or was it more you just weren't at the level I was teaching yet? Im always looking to improve!

    • @BruceWayne-lm6xt
      @BruceWayne-lm6xt 26 дней назад

      ​@@JollyCoding Your content is Superb ,Actually I just jumped on NEXT js after doing some projects on MERN.

  • @timothymeade-on-twitter
    @timothymeade-on-twitter Месяц назад

    Excellent breakdown and code. Not many out there yet for this fantastic new package.

  • @lakeesivaraya753
    @lakeesivaraya753 Месяц назад

    I rarely comment on youtube videos, but you are going to blow up. The production quality is amazing, and you are very good at explaining content!

    • @JollyCoding
      @JollyCoding Месяц назад

      Thanks for the kind words!

  • @alfarizidwiprasetyo9280
    @alfarizidwiprasetyo9280 Месяц назад

    thanks for creating this great video, but may i ask in ImageResponse i cant use reactElement it says cannot find name div or any other html tag, is it deprecated ?

  • @AAlfuhaide
    @AAlfuhaide Месяц назад

    the sound is wau too low. i thought my headset were broken

  • @IkraamDev
    @IkraamDev Месяц назад

    Thanks for this video.

  • @gfsaliev
    @gfsaliev Месяц назад

    You're doing a great job! This is a great video, thanks for creating it.

  • @prashlovessamosa
    @prashlovessamosa Месяц назад

    Hey james please make more longform stuff.

    • @JollyCoding
      @JollyCoding Месяц назад

      I have a lot of ideas on the todo list, they just take a lot more time!

    • @prashlovessamosa
      @prashlovessamosa Месяц назад

      @@JollyCoding you can create in parts I followed your blog tuts learnt a lot do make something whenever you have some time.

  • @anassabidar101
    @anassabidar101 Месяц назад

    This is the best straight to the point supabase nextjs tutorial, I only have one question is how can we customize the sign up page to get more information about the user! also manage user permissions and roles like pro and free members of a certain app. Thank you for your efforts!

  • @KamalSingh-zo1ol
    @KamalSingh-zo1ol Месяц назад

    Subscribed :D