![Weibenfalk](/img/default-banner.jpg)
- 145
- 694 893
Weibenfalk
Sweden
Registrace 5. 04. 2012
I'm Thomas Weibenfalk. A developer from Sweden.
I share my knowledge of modern front end development in a (hopefully) down to earth and fun way!
I'll cover topics as React, Vanilla Javascript, Gatsby, CSS, HTML and occasional backend development. A lot of the focus is on ReactJS cause I love it! As I'm also a designer there might even be some UI/UX stuff from time to time.
This channel is for both beginner and experienced Front End developers who wants to learn more.
So ... if you want to learn the latest in Frontend this is the channel for you to subscribe to. ;)
I share my knowledge of modern front end development in a (hopefully) down to earth and fun way!
I'll cover topics as React, Vanilla Javascript, Gatsby, CSS, HTML and occasional backend development. A lot of the focus is on ReactJS cause I love it! As I'm also a designer there might even be some UI/UX stuff from time to time.
This channel is for both beginner and experienced Front End developers who wants to learn more.
So ... if you want to learn the latest in Frontend this is the channel for you to subscribe to. ;)
React Compiler / React Forget - with Vite
Learn how to use and setup React Compiler with a React Vite Project. Use React Devtools to check if the code has been transpiled with React Compiler
Code: github.com/weibenfalk/react-compiler
Support me by subscribing to this channel ❤️
Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩🚀
Check out my premium courses at www.weibenfalk.com
-
Find me somewhere below:
Linkedin: www.linkedin.com/in/thomas-weibenfalk-76356611/
Twitter: weibenfalk
Github: github.com/weibenfalk
FreeCodeCamp: www.freecodecamp.org/news/author/thomas-weibenfalk/
Dev.to: dev.to/weibenfalk
Code: github.com/weibenfalk/react-compiler
Support me by subscribing to this channel ❤️
Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩🚀
Check out my premium courses at www.weibenfalk.com
-
Find me somewhere below:
Linkedin: www.linkedin.com/in/thomas-weibenfalk-76356611/
Twitter: weibenfalk
Github: github.com/weibenfalk
FreeCodeCamp: www.freecodecamp.org/news/author/thomas-weibenfalk/
Dev.to: dev.to/weibenfalk
zhlédnutí: 917
Video
How I created a movie application with Astro 3 .x
zhlédnutí 1,1KPřed 9 měsíci
I'll show how I created a movie application with infinity scroll and search functionality with Astro 3.x ... I'm also using the transition API and web components. Everything is built without any external libraries or frameworks. It's plain vanilla JS/TS and CSS. The data is from the movie DB. This is a refactor from a previous React course that you can find here: czcams.com/video/Tdp_S_72mSI/vi...
Learn Next-Auth Login Authentication - with Next.js App Router
zhlédnutí 1,4KPřed 10 měsíci
Learn how to protect your routes with next auth and the NextJS App router. You'll be using a complete React Movie application with tailwind, react-query and Typescript. Movies is fetched from The Movied DB. The Oauth provider that is used is Github. Code: github.com/weibenfalk/next-auth-tutorial/ Support me by subscribing to this channel ❤️ - Find me somewhere below: Linkedin: www.linkedin.com/...
NextJS App router API Data Fetching in Server & Client Components!
zhlédnutí 9KPřed 11 měsíci
Unlock the Power of Data Fetching with Next.js and App Router! Learn how to seamlessly retrieve data in your Next.js apps. Both natively inside React Server Components and with React-Query (Tanstack Query) With Tailwind CSS and Typescript Code: github.com/weibenfalk/nextjs-app-router-data-fetching/tree/main Support me by subscribing to this channel ❤️ - Find me somewhere below: Linkedin: www.li...
Build a React Memory Game with Panda CSS and TypeScript
zhlédnutí 542Před 11 měsíci
Code: github.com/weibenfalk/react-memory-2023 Hey there, fellow developers! Welcome back to my channel. Today, I have an exciting project in store for you. We'll be diving into the process of creating a captivating memory game using React, enhancing the UI with the visually appealing Panda CSS library, and ensuring type safety with TypeScript. So, if you're ready to combine fun, style, and robu...
Learn Panda CSS - Refactor from Tailwind to Panda CSS.
zhlédnutí 1,2KPřed rokem
Welcome to the world of Panda CSS, where creativity meets simplicity! 🐼🎨 Panda CSS is a powerful and user-friendly styling framework designed to transform your web development experience. Whether you're a seasoned developer or just starting your coding journey, Panda CSS has something incredible to offer! In this video I'm going to show you how to refactor a NextJS React Typescript App from Tai...
React Quiz App with NextJS, Typescript and Tailwind (2023)
zhlédnutí 3,8KPřed rokem
Build a mobile first Quiz App with ReactJS ( javascript ), Typescript and TailwindCSS. This is an updated version (2023) from the older version here on my channel. Use the App folder / App router in NextJS with client components and server components to fetch data on the server, SSR. Then feed the client component with the server fetched data. Tailwind is used for styling. Finished project and ...
NextJS 13 - Refactor a complete App to use the App folder and React-Query on the client
zhlédnutí 9KPřed rokem
I'll show how to refactor a complete NextJS 12 Application into NextJS version 13. I'll use the new App folder, server components and client components. On the client I'll also show how to setup React-Query (Tanstack Query) to work in NextJS v13. I'll also use Typescript. Here's the finished project: github.com/weibenfalk/nextjs-13-refactor/ This is the App that is refactored, it's from my Reac...
Advanced React Context Typescript | useContext and createContext
zhlédnutí 5KPřed rokem
Time to talk about context again! This time it's more advanced and I'll talk about using ReactJS Context with Typescript. I'll also show how to create a custom hook and a component to use the context. Finally I'll show how to memoize the context. Files: github.com/weibenfalk/Advanced-React-Context/ 00:42 - Part 1 - Create a context 11:21 - Part 2 - Customize stuff 21:49 - Part 3 - Memoizing Sup...
React Router v6.4 ( v6.4.1 ) - Fetch data with loaders
zhlédnutí 12KPřed rokem
Learn how to use loaders in React-Router version 6.4 ( 6.4.1 ). A new way to fetch data before your component renders. Implemented with Typescript and Vite. Code: github.com/weibenfalk/react-router-6-4/ Article by Dominik about using React-Router in combination with React-Query: tkdodo.eu/blog/react-query-meets-react-router Support me by subscribing to this channel ❤️ Do you want to master #rea...
How I built my website with Astro - A short introduction to astro.build
zhlédnutí 3,3KPřed rokem
In this video I'll briefly show how I built my own personal website with Astro.build ... It's an exciting new framework for creating websites. You can build both SSG (Static site generated) pages or MPA (Multi Page Applications). Check out my website here: www.weibenfalk.com Support me by subscribing to this channel ❤️ Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩🚀 Check out my...
Intro to Fresh - a new Deno framework that is faster than NextJS?!
zhlédnutí 1,4KPřed 2 lety
This is an introduction to Fresh that also uses Tailwind and Typescript. Build a mini App that uses the Owen Wilson WOW Api for the data. Fresh uses Deno and Preact (Javascript / Typescript) and file routing just as Next JS. Github repo: github.com/weibenfalk/fresh Support me by subscribing to this channel ❤️ - Find me somewhere below: Linkedin: www.linkedin.com/in/thomas-weibenfalk-76356611/ T...
Intermediate React.js FULL COURSE 2022 with NextJS - Tailwind CSS - Typescript - react-query
zhlédnutí 10KPřed 2 lety
#nextjs #tailwind #react Build a Movie App! Starter files and finished project: github.com/weibenfalk/react-rmdb-2022-v4 Here is a new video on how to refactor this App to use NextJS 13 instead: czcams.com/video/6lIur1E1jAQ/video.html This is a special 2022 version of one of my most popular courses. As this is more fast paced than the earlier versions it’s more of an intermediate to advanced Re...
How to install Tailwind CSS in NextJS
zhlédnutí 3,2KPřed 2 lety
OBS! This is just a part from the upcoming React course This is the part where I setup Tailwind with NextJS from my upcoming React course. The course will teach how to build a movie application in NextJS with Tailwind CSS, Typescript and react-query (Tanstack Query) Support me by subscribing to this channel ❤️ - Find me somewhere below: Linkedin: www.linkedin.com/in/thomas-weibenfalk-76356611/ ...
Beginner Redux with Typescript - Redux Toolkit with RTK Query - Bitcoin ticker
zhlédnutí 8KPřed 2 lety
Beginner Redux with Typescript - Redux Toolkit with RTK Query - Bitcoin ticker
Passwordless authentication with Stytch and magic email links
zhlédnutí 1,3KPřed 2 lety
Passwordless authentication with Stytch and magic email links
NextJS and React-Query - Server Side fetching of data - SSR
zhlédnutí 20KPřed 2 lety
NextJS and React-Query - Server Side fetching of data - SSR
React Advent Calendar - With Typescript
zhlédnutí 1,6KPřed 2 lety
React Advent Calendar - With Typescript
React Tetris with Typescript - Build Tetris with typescript - Typescript Tetris
zhlédnutí 7KPřed 3 lety
React Tetris with Typescript - Build Tetris with typescript - Typescript Tetris
React Controlled Radio Buttons Explained | React Radio Buttons | with Typescript
zhlédnutí 20KPřed 3 lety
React Controlled Radio Buttons Explained | React Radio Buttons | with Typescript
Star Wars React Memory Game with Typescript - Javascript Memory Game
zhlédnutí 2,8KPřed 3 lety
Star Wars React Memory Game with Typescript - Javascript Memory Game
Javascript Modulo Operator Explained | Understanding modulo rest value
zhlédnutí 3,7KPřed 3 lety
Javascript Modulo Operator Explained | Understanding modulo rest value
Trying GitHub Copilot | First impressions | Are our jobs in danger?
zhlédnutí 1,2KPřed 3 lety
Trying GitHub Copilot | First impressions | Are our jobs in danger?
Sveltekit Crash Course - Svelte Typescript - Getting started with Sveltekit Endpoints
zhlédnutí 13KPřed 3 lety
Sveltekit Crash Course - Svelte Typescript - Getting started with Sveltekit Endpoints
React Typescript Tutorial - Generic Components - React TS Crash course - Day#7
zhlédnutí 1,5KPřed 3 lety
React Typescript Tutorial - Generic Components - React TS Crash course - Day#7
React Typescript Tutorial - ClickHandlers and useRef - React TS Crash course - Day#6
zhlédnutí 2KPřed 3 lety
React Typescript Tutorial - ClickHandlers and useRef - React TS Crash course - Day#6
React Typescript Tutorial - React Context - React TS Crash course - Day#5
zhlédnutí 3,6KPřed 3 lety
React Typescript Tutorial - React Context - React TS Crash course - Day#5
React Typescript Tutorial - Styled Components - React TS Crash course - Day#4
zhlédnutí 14KPřed 3 lety
React Typescript Tutorial - Styled Components - React TS Crash course - Day#4
Thanks Man. It was a big help
Thanks sir.
Great tutorial👌
i have aslo using first method like React.FC
I can still see the api call in network tab in the browser? Would you mind sharing/ displaying how your browser's network tab looks like, so that it can help me debug further?
Isn't using Babel in Vite when we didn't have it before causing a slight delay in reloading?
Finally! Someone knows what to upload actually😮💨
Thanks.
Nice feature
Welcome back. It has been a while. Thanks for the new content.
Great explanation especially about the 24 vs 12 hour clock! Thank you!
Very good explanation and thank you for that :) I wonder if you really needed to put ”monkeys" in the dependency array of useCallback. Since that function creates a random number every time it is called, it won’t return the same number in every call. So it should be enough to create it once on the first render (using an empty dependency array)... or i am missing something ?
great thanks for sharing
how can we make custom winner?
In the example if you want to send the quiz results back to the server, how to make that server call from the client component in a secure way?
Im confused, i fetched data in my server component and i have added a few console logs in the server component. When i run npm run dev, the console log is displayed in my terminal but when i run npm run build followed with npm run start, the console logs will not appear. I am wondering if my server component equals fo server side rendering? Im also using app router. Can anyone help me?
But, what I don't understand here, it takes some time for the data to be fetched, so all the components wait for the data to be fetched before rendering (under the code await getData()). How can we handle the data that has not fetched yet so we can still render components without the data
I am not sure but looking up the suspense component might be a valuable route
can you update the context from another component?
Incredible course, thank you very much
This is the most informative video i've ever watched on CZcams regarding JWT Auth. I appreciate your efforts. I have a question, how do we guard against CSRF attacks using this workflow? You've stored the access token in memory(a variable) which is effective against XSS attacks, what about CSRF attacks? I would deeply appreciate an enlightenment on that, thank you so much sir.
Thanks very much for the video...
how to deploy to netlify?
math.ceil doesn't work for me, i'm using bootstrap. Maybe for that ?
thank you for this great video!!! I'm trying to improve this wheel putting an alert at the end of the transition with a random message of success. Do you think I can recall it inside the function in wheel.addeventListener(transitioned)?
That was big help thank you
Very important video. I was looking for context with tsx
what? you have a tsconfig file now, but didn't say a single word of how? doesn't it worth mentioning or guidance? that is quite disappointing. thanks anyway
100 lines of code with a little bit of cheating! But very concise and clear explanation and implementation of the snake game!
Clean to the point explanation, thank you for helping me visualise the data changes so clearly, great tutorial!
Excellent video! it helps me a lot!
great job sir, could not understand the moziilla doc explanation and you made it all clear to me
Thanks, after 4 hours, I found the solution in this video at 2:40, it's about type.😀😀😀
finally found a clear video
Hi @weibenfalk ! thank you for this video. I failed to setup this with latest version of all. Suggestions : make a github repo for this, add stuffs for production in webpack, add lit elements (web component) :)
Could you please elaborate on how to call the modal window get opened every time when each hatch card is being clicked. And bring the specific for this card the text?
Great stuff! Keep em coming 🔥
This is awesome! Thank you 🎉
Thanks for the video! Are there different use cases where it would make sense to use this proxy route approach, vs an alternative approach where a server component passes data as props to a client component? I'm struggling with using a fetched image blob as a src for <Image />
If you don't need to reload the data or fetch more it's probably a good idea to fetch it on the server, as you say. But in cases where you need to reload the data or if you have, for example, an infinity scroll that fetches data on the client on scroll react-query is great. You also get caching "for free" on the client when using react-query So I wouldn't call it a proxy route approach. It is very common and completely legit to fetch on the client. Server fetching is, for example, great when you fetch data one time and the data doesn't change on that page during the time the user is on the page. That is exactly what happens on the individual movie page here; the data is fetched one time and never changes.
Amazing❤
When I replace the images in img folder with my own, the updates are not shown when I refresh or run npm start. Do you have any idea why this could happen?
How do you rerun JavaScript on different page and avoid execute multiple JavaScript from previous page?
In View Transition.
If you use the component several times the script will only be included once. Read more about the script handling in Astro here: docs.astro.build/en/guides/client-side-scripts/
@@Weibenfalk I use vanilla JS
@@Weibenfalk I have been building entire business platform in Astro except for the view transition which is a bit half baked so will need to know how JavaScript works across the pages that execute JavaScript if you know the limitation.
@@musem6006 I haven't used it that much yet as I'm just starting to use Astro ... but I noticed that I had to import the script for the infinity scroll in the homepage (index) component and not globally in the head or something, when using the transition api. If I didn't do that and instead load it in the head from the layout component, the script wouldn't re-run and the infinity scroll would break when going back to the homepage after a transition.
Man you helped me very much!Thanks
CodeDaddy❤
Woah you actually explained in just 6 minutes , thank you sir 👍
Oh my god. This example with clock killed me! I am on different course and didn't understood well how to interact with modulo - but you did it clearly. Thank you so much.
Thanks. I found the answer to my question in your video.
{2023-10-24}
Awesome, all thanks for hordwork
Hi, can we preselect a winner in the beginning?