- 39
- 18 263
Codeek
United States
เข้าร่วมเมื่อ 18 ม.ค. 2021
This channel aims to help frontend developers in frontend development journey. Contains tutorial on nextjs, reactjs, HTML, CSS, Rest API, and other technologies in frontend development
JSON vs Plain Objects: Why JSON Strings Are Essential for Data Fetching
Are you confused about the difference between JSON and plain objects in JavaScript? In this video, we’ll dive into what sets JSON apart from plain objects, and why JSON strings are the go-to choice for data handling in web development. Whether you're dealing with APIs, local storage, or data interchange, understanding these differences can boost your coding skills and improve your applications. Watch till the end to learn practical examples and best practices for using JSON effectively
Stack overflow's answer:
stackoverflow.com/questions/54122999/is-json-a-string/69490422#69490422
Stack overflow's answer:
stackoverflow.com/questions/54122999/is-json-a-string/69490422#69490422
มุมมอง: 76
วีดีโอ
How to Maintain Aspect Ratio with Fixed Width and Auto Height in Next.js Image Component | Tips
มุมมอง 2142 หลายเดือนก่อน
In this video, you will learn how to use the Next.js Image component with a fixed width and an auto-adjusted height while maintaining the aspect ratio of your images as a part of nextjs tips and tricks. This is a common problem that many developers face, especially when trying to make their images responsive. I'll walk you through step-by-step solutions, including code examples and best practic...
Scroll Restoration in React: Smooth User Experience Tips & tricks
มุมมอง 4802 หลายเดือนก่อน
Want to enhance your React app's user experience? Learn all about scroll restoration in React! In this video, we'll dive into the best practices for preserving scroll positions, making your web apps feel more intuitive and user-friendly. We'll cover: Basics of scroll restoration in React Using useEffect for scroll management Implementing react-router for seamless navigation Advanced tips for ma...
useMemo vs useCallback in React: Optimize Your App's Performance Like a Pro! React tips and tricks
มุมมอง 2163 หลายเดือนก่อน
Discover the secrets to boosting your React application's performance by understanding the differences between useMemo and useCallback. In this video, we dive deep into how and when to use these powerful hooks, with practical examples and performance tips. Whether you're a beginner or an experienced developer, this guide will help you write more efficient and maintainable React code. 🔗 Resource...
Fixing Spinners or Animations Not Working: A Quick Fix
มุมมอง 693 หลายเดือนก่อน
Are your loading spinners stuck and not spinning in your web applications? In this video, we dive into the common issues that cause spinners to stop working and provide step-by-step solutions to get them spinning smoothly again. From CSS to JavaScript fixes, we've got you covered. Whether you're using React, Vue, or vanilla JavaScript, this tutorial will help you troubleshoot and fix your spinn...
Boost Your React App Performance with Lazy Importing | React optimization tips and tricks
มุมมอง 1343 หลายเดือนก่อน
Welcome to our latest React tutorial! 📚 In this video, we dive into one of the important tips and tricks of react optimization, concept of lazy importing and lazy loading in React to supercharge your app's performance! 🚀 What You'll Learn: 🌟 How to implement lazy importing in React ⚡ Boosting React app performance with code splitting 🛠️ Step-by-step guide on using React.lazy and Suspense 📉 Redu...
Visual Studio VS code shortcuts to increase your productivity | VS code tips and tricks
มุมมอง 364 หลายเดือนก่อน
This video tutorial explains some of the useful visual studio VS code shortcuts to increase productivity of developers while coding or programming #coding #programming #webdevelopment #reactjs #nextjs
Why does modern Javascript use e.preventDefault-Essential Javascript tip
มุมมอง 535 หลายเดือนก่อน
Welcome to our comprehensive guide on e.preventDefault() in JavaScript! In this video, we'll dive deep into one of the most essential methods in web development that helps you control the behavior of events. e.preventDefault() is a method in JavaScript that prevents the default action that belongs to the event. For example, if you use it in a form submission event, it prevents the browser from ...
Why Nullish Coalescing operator is used in modern Javascript than OR operator | Nullish vs OR
มุมมอง 805 หลายเดือนก่อน
This video is all about Nullish coalescence or nullish coalescing operator vs or operator in javascript Dive into the world of JavaScript operators with this comprehensive guide! In this video, we'll explore the nuances between the Nullish Coalescing Operator (??), also called as nullish coalescence and the OR Operator (||) in the context of JavaScript, React, and Next.js. Whether you're a begi...
Master the Optional Chaining Operator in JavaScript|React|Nextjs - Essential Coding Techniques 2024
มุมมอง 866 หลายเดือนก่อน
Unlock the full potential of JavaScript with our comprehensive guide to the optional chaining operator (?.). This powerful feature simplifies how you access properties and methods in complex objects, ensuring your code is more readable and robust against null or undefined errors. 🔍 What You'll Learn: Understand what the optional chaining operator is and why you need it. Step-by-step examples to...
Solve build error in Nextjs | part 2 | Nextjs tutorial
มุมมอง 5206 หลายเดือนก่อน
Solve build error in Nextjs | part 2 | Nextjs tutorial
Function type vs Return type in typescript | Typescript tutorial
มุมมอง 697 หลายเดือนก่อน
Function type vs Return type in typescript | Typescript tutorial
Non Null Assertion operator| Exclamation mark in typescript expression explained| Typescript
มุมมอง 1867 หลายเดือนก่อน
Non Null Assertion operator| Exclamation mark in typescript expression explained| Typescript
How to add a loader or loading screen | loading UI in nextjs
มุมมอง 2.2K8 หลายเดือนก่อน
How to add a loader or loading screen | loading UI in nextjs
Installing latest nextjs project in 30 seconds | nextjs tutorial
มุมมอง 1279 หลายเดือนก่อน
Installing latest nextjs project in 30 seconds | nextjs tutorial
Login logout | Signin Signout in react and nextjs | Token based authentication
มุมมอง 7089 หลายเดือนก่อน
Login logout | Signin Signout in react and nextjs | Token based authentication
Hostname vs Domain, origin, path, searchparams in URL explained | Mastering the URL core concepts
มุมมอง 809 หลายเดือนก่อน
Hostname vs Domain, origin, path, searchparams in URL explained | Mastering the URL core concepts
Solving Export Encountered error | Build Error in Nextjs | Nextjs tutorial
มุมมอง 3.6K9 หลายเดือนก่อน
Solving Export Encountered error | Build Error in Nextjs | Nextjs tutorial
how to make a not found page or 404 page in nextjs
มุมมอง 16810 หลายเดือนก่อน
how to make a not found page or 404 page in nextjs
Getting pathname and navigating between routes in Nextjs
มุมมอง 85510 หลายเดือนก่อน
Getting pathname and navigating between routes in Nextjs
Detect device type in react and nextjs | Mobile & Desktop screen for responsive website
มุมมอง 2K10 หลายเดือนก่อน
Detect device type in react and nextjs | Mobile & Desktop screen for responsive website
Fetch and Error handling for data fetching in javascript
มุมมอง 6111 หลายเดือนก่อน
Fetch and Error handling for data fetching in javascript
How to apply multiple transform in css | HTML/CSS
มุมมอง 106ปีที่แล้ว
How to apply multiple transform in css | HTML/CSS
Reusability | Best practices in Frontend development | Software Engineering
มุมมอง 35ปีที่แล้ว
Reusability | Best practices in Frontend development | Software Engineering
Naming convention in HTML and CSS | Best practices in Front end development
มุมมอง 515ปีที่แล้ว
Naming convention in HTML and CSS | Best practices in Front end development
Aspect ratio of img | Width and height in img tag | Css best practices
มุมมอง 56ปีที่แล้ว
Aspect ratio of img | Width and height in img tag | Css best practices
Defer explained more practically with code | HTML|Javascript
มุมมอง 63ปีที่แล้ว
Defer explained more practically with code | HTML|Javascript
event bubbling and e.stopPropagation explained
มุมมอง 24ปีที่แล้ว
event bubbling and e.stopPropagation explained
how to add svg in background as URL in HTML/CSS
มุมมอง 3.1Kปีที่แล้ว
how to add svg in background as URL in HTML/CSS
how to find or change Xampp Mysql username and password
มุมมอง 318ปีที่แล้ว
how to find or change Xampp Mysql username and password
Thank you.
Best explanation
Thank you so much for the video, just 53 seconds into the video I got my build error solved. The error that I have been battling with for hours.
glad to hear your problem got solved!
Great!
Glad to hear your appreciation! 😀
Full video in just 1:20 minute: th-cam.com/video/lIVngCxky38/w-d-xo.html
I have been using just useState and useEffect my whole life! How many fucking hooks are there? Fuuuuuuuuuuuuuck!
Nullish coalescing is more specific than or. Isnt it?
Yes exactly!
Great great job but i wonder why do these libraries dont do these kind of optimizations by default?
space for optimizations maybe😀
Your like and subscription help the channel make more videos you need
Your like and subscription help the channel make more videos you need
Your like and subscription help the channel make more videos you need
Your like and subscription help the channel make more videos you need
Dai Maile khi bujena 😅😅
you explained it in the easiest way possible i hope you get more subscribers (i did) and if possible can you give me some tips on how to be a better front end developer
Thankyou for your kind compliments! I think keeping yourself up to date by following blogs and tutorials and regular learning will help you create a strong foundation to be a better frontend developer.
Adding: "engines": { "node": "20.x" } in package.json solve the problem in my case.
Thankyou for your contribution! I hope this method would help lot of developers
thanks, this partially solves the problem. but perhaps someone had a similar problem with the fact that locally on Windows build builds fine, but on vps ubuntu this error occurs?
Did you try methods in this other video? th-cam.com/video/PHlqVjuT1No/w-d-xo.htmlsi=MQX_DG7xvkfGlphg
the problem was that in nextjs 13, ui components were stored in the pages layer and these components were exported by default (export default TaskBtn etc...) and inside similar ui components, new ui architectures were exported by export const Btn (import {Btn} due what was the problem. Thanks to the idiot who wrote the code before me, now on our project every fucking button and ui component is a bitch page, which is why the build takes longer, etc. WARNING don't be like this idiot, don't write UI components in the pages layer
@@codeek0 no, unfortunately it didn't work. thanks for the answer. i tell about problem in other comment
hey thanks so much, i was struggling with this for a long time, and your solution fixed it! subscribed
Glad to hear it! Thankyou😃
Thank you
glad to know the video helped you! Thankyou for the motivation
Full video link: th-cam.com/video/ANUbrMYZXCs/w-d-xo.html
thanks buddy, i was getting diff kind of errors while making build in nextjs 14. doing the dynamic import in one of my component in which i was using a third party map solved the problem.
Glad to hear it helped you😀!
🔥Full video link: th-cam.com/video/qYF9L5x2Bz0/w-d-xo.htmlsi=cXtff4Xe7zmzgK8y
For full video: th-cam.com/video/PHlqVjuT1No/w-d-xo.html
If this wont solve, you may try this one: th-cam.com/video/5UsIO-feZBY/w-d-xo.html
If this approach didnt solve the issue, this another video may help you: th-cam.com/video/PHlqVjuT1No/w-d-xo.html
Full video(2 min): th-cam.com/video/39w59QGqRMo/w-d-xo.htmlsi=7qCTDDlSUotps4hL
Very helpful. Thanks for the video.
i am glad to know it helped!
No need to fake the accent man
No, i am just trying to excel my fluency and pronunciation. Thanks for your warm comment though
Learn more about data url: developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs
Full video: th-cam.com/video/jHUg0saEurI/w-d-xo.html
Bro can please solve this error: error occurred prerendering "/", "/about" etc please...😢😢
go to the main page i.e / and about page and check the terminal in server side and there you will find the error!
@@codeek0 how to check in server side terminal please help me im a beginner...🥺
the terminal is where you have typed the command npm run dev to start the development server! There you can check the error after your page has been loaded! @@SanjayNG125
how to detect it server side with nextjs 14?
what if window is undefined?
That mean the page is getting rendered in the server side. Nextjs prerenders every components in server side first and then in client side. Since window is only accessible in client side, we make a condition to check if typeof window is not undefined, which indicated that the page is getting rendered in the client side.
@@codeek0 this is obvious. But what if its ssr component and window isundefined?
@@lenyacher8344 for Server Side Rendering, you should use the "headers" library from NextJs. It checks the header of the request from the user and then knows if the user is coming from a mobile or not. But then, if your component uses state or anything like it, you'd have to refactor to create two components: the server-side one, which uses the header's function, and the client-side one, which uses the states, and call the client-side from within the server component pass down a prop telling which kind of screen will be rendered. The problem: THIS ONLY WORKS WHEN YOU REQUEST THE PAGE TO THE SERVER. If you need your component to know the resize happened in real-time, you cannot run from the Javascript event listener and use the windows, as far as I know. OBS: I was going to do something like this, but decided to go the other way. All the knowledge is from reading the docs and trying to figure Nextjs out. If I'm wrong for any reason, please let me know.
@@codeek0any code run in useeffect will only get executed in the client so there is no need to check if the window exists because it always will
New here 😀
you are most welcome!
thanks a lot dear
Glad to know it helped you! Your positive feedbacks are actually a motivation for me!
Kada daju👍
Thankyou daju!
bro if you want a teach as these things please make sure that you have a proper set up and be prepared before only so that it will be great
Sure brother! I will care about it! Please suggest me where i could make things improved.
POV: Install latest nextjs project really fast
bro i am facing this problem "Export encountered errors on following paths: /(dashboard)/deliver-order/page: /deliver-order"
You can see what is causing the error in terminal in server side!
So, how can I ensure that layout elements like header and footer are not rendered during error?
For that you can make an organizational route and then create a layout inside this route and add not-found.js! For more you can follow this link: nextjs.org/docs/app/building-your-application/routing/route-groups
Good job bro keep it up ❤❤
Thankyour brother!
Great. keep going with these useful tutorials.
best tutorial on fetch. thank you for the video
ROCKS
bhai rocks
daju rocks ..