- Видео 41
- Просмотров 195 700
Jolly Coding
Великобритания
Добавлен 5 окт 2023
Hi I'm James. I like to stay up to date in the world of development and use this channel as a chance to dig into things and share with others.
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...
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
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!
TypeScript & React: Tips, Tricks, and Best Practices
Просмотров 2,9 тыс.5 месяцев назад
TypeScript & React: Tips, Tricks, and Best Practices
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?
Why didn’t RUclips recommend this despite having notifications on “all”
When you run build your code doesn't it show all the pages to be dynamic?
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~
Max said end of React. You say end of Remix. Whom should I listen to?
None. Nothing is ending
@@ben53933 Actually. true. Follow the statistics. Angular probably ending. very few jobs. every few months a new syntax. damn unpaved.
I'm so grateful I found this video
same
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! 🌐
Amazing video. This was so helpful! Thank you so much.
Amazing 🔥🔥
Great tutorial! Note: The use of the word "essentially" (84 times) was perhaps a little overused 🙂
Dude I believe there’s some issue with the sound tho
this is absolutely AMAZING ! thank you so much! just amazing !
Vercel AI
great stuff ..would love that tutorial
Great work! Would really love a tutorial with the SDK.
thanks a lot! I've subscribed!
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?
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".
@@JollyCoding ohh, I see got you now! thank you so much for such a great tutorial and quick response.
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.
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.
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.
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.
Didn't see that coming, remix taking a "little nap", I think for any serious projects you should stick with nextjs, seriously.
Wow this is a rip-off of this exact same video (even the shirts are the same): ruclips.net/video/ukpgxEemXsk/видео.htmlsi=oyd_mdqTwIi03UY9
that's another reason to love Svelte : their fullstack offering Sveltekit is built by themselves
this is a non point
I now using the router from the react-query devs in my Vite apps. The react-router broke my projects too many times
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
in what ways, for example
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
Break in what way?
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!
revalidatePath thing made me rethink using NextJS again, I really like Remix.
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!
@@JollyCoding Please do, the community needs it.
Next JS are changing the way cache works in the next release btw. They listened to users. 😮
@@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).
bro, this is a quality tutorial. thanks!
Glad it was helpful!
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
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
any framework!... for react :(
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!
@@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
Part of me is smiling watching this, it's also something interesting to build in the learning process
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... ;)
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!
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.
You did great! Love your presentation style and the content in this one 👏👏👏
How to break apart sprite sheets?
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!
fantastic video! was looking for an example of rendering markdown with nextjs. glad i stumbled across this
Awesome to hear, thank you!
good stuff!
i think this works as well i am not sure though ^react(/(.*)$|$)
VS Code What font do you use?
JetBrains mono!
"Any tech stack" , what about react native?
Honestly I found It difficult to Undestand the tutorial I will continue after learning further Thanks
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!
@@JollyCoding Your content is Superb ,Actually I just jumped on NEXT js after doing some projects on MERN.
Excellent breakdown and code. Not many out there yet for this fantastic new package.
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!
Thanks for the kind words!
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 ?
My bad bruv i name it ts instead of tsx 😅
the sound is wau too low. i thought my headset were broken
Thanks for this video.
You're doing a great job! This is a great video, thanks for creating it.
Hey james please make more longform stuff.
I have a lot of ideas on the todo list, they just take a lot more time!
@@JollyCoding you can create in parts I followed your blog tuts learnt a lot do make something whenever you have some time.
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!
Subscribed :D