Nathan Krasney
Nathan Krasney
  • 277
  • 104 510
Elevate Your Code: Easy Syntax Highlighting!
Unlock the power of syntax highlighting in your web projects! Learn how to effortlessly implement `highlight.js` for stunning, readable code displays. Perfect for web developers! #syntaxhighlighting #highlightjs #webdevelopment
Github repository url : github.com/NathanKr/highlight.js-playground
Chapters:
00:00 Motivation
00:08 Usage
00:13 Installation
00:22 Ingredients of highlight.js
00:59 Basic Idea
01:22 HTML Example
01:36 JavaScript Example
01:50 Result
มุมมอง: 17

วีดีโอ

Secure Session Management with Iron-Session!
มุมมอง 4112 ชั่วโมงที่ผ่านมา
Unlock the power of secure session management with iron-session! Learn how to store session data safely using encrypted cookies in Next.js and beyond. repository : github.com/NathanKr/next.js-iron-session-playground Chapters: 00:00 Introduction 00:13 Motivation 00:43 Solution 00:57 API : set value in cookie : /api/set-cookie 01:20 API : get value from cookie : /api/get-cookie 01:41 API : Helper...
Unlocking Cookies: The Secret Behind Web Sessions
มุมมอง 7621 ชั่วโมงที่ผ่านมา
Dive into the world of cookies! Discover how they manage web sessions, enhance user experiences, and secure data-all crucial for web development. repository: github.com/NathanKr/cookie-playground Chapters: 00:00 What is a Cookie? 00:52 Motivation of this repository 01:00 Setting a Cookie on the Server 01:31 Behavior 01:51 Browser Storage Example 02:01 Retrieving a Cookie on the Server 02:23 Key...
Bundle and Minify CSS/JS Files
มุมมอง 432 หลายเดือนก่อน
Should you bundle and minify CSS and JS files in your production website? The answer is yes, but why? This video has the answer This is part of my Udemy course "Boost Your Website Performance - The Practical Guide" Enroll here: www.udemy.com/course/boost-your-website-performance-the-practical-guide/?referralCode=F28E3134284E023061DF
Fix error : 'serve image in next gen format'
มุมมอง 352 หลายเดือนก่อน
The error message “Serve images in next-gen formats” is often flagged by tools like Google PageSpeed Insights or Lighthouse. It indicates that your website could benefit from using modern image formats In this video, I show how to fix this error This is part of my Udemy course "Boost Your Website Performance - The Practical Guide"Enroll here: www.udemy.com/course/boost-your-website-performance-...
Reduce CLS using aspect ratio
มุมมอง 492 หลายเดือนก่อน
Cumulative Layout Shift (CLS) measures the visual stability of a web page during loading. It quantifies unexpected layout shifts caused by moving elements. You can fix it using the CSS aspect ratio More about it in this video This is part of my Udemy course "Boost Your Website Performance - The Practical Guide"Enroll here: www.udemy.com/course/boost-your-website-performance-the-practical-guide/...
Removing Unused CSS & JS with Chrome Coverage Tab
มุมมอง 1623 หลายเดือนก่อน
Suppose you have a large CSS or JS file referenced in your HTML page, but its content is not being used. Will the browser load it? Yes, it will, and this will be a total waste of time because it will delay loading the page for no reason. How can you identify these kinds of files? Use the Coverage tab in Chrome DevTools This is part of my Udemy course "Boost Your Website Performance - The Practi...
Handle incorrectly loading lazy images
มุมมอง 223 หลายเดือนก่อน
Should you lazy load all the images on the page? This video answers this question This is part of my Udemy course "Boost Your Website Performance - The Practical Guide"Enroll here: www.udemy.com/course/boost-your-website-performance-the-practical-guide/?referralCode=F28E3134284E023061DF
Total blocking time and chrome performance tab
มุมมอง 433 หลายเดือนก่อน
What is TBT - Total blocking time? How does it affect your web page performance? How can I find which function causes long TBT? All of these questions will be answered in this video This is part of my Udemy course "Boost Your Website Performance - The Practical Guide" Enroll here: www.udemy.com/course/boost-your-website-performance-the-practical-guide/?referralCode=F28E3134284E023061DF
Render blocking resources
มุมมอง 153 หลายเดือนก่อน
Render-blocking resources, like JavaScript and CSS files, delay web page display and impact performance by delaying other resources. See this in action using WebPageTest in this video. This is part of my Udemy course "Boost Your Website Performance - The Practical Guide" Enroll here: www.udemy.com/course/boost-your-website-performance-the-practical-guide/?referralCode=F28E3134284E023061DF
Use a hero image instead of a hero div with background image
มุมมอง 213 หลายเดือนก่อน
The difference in performance between using a hero image instead of a hero div with a background image can be significant. Check the video to see why This is part of my Udemy course "Boost Your Website Performance - The Practical Guide" Enroll here: www.udemy.com/course/boost-your-website-performance-the-practical-guide/?referralCode=F28E3134284E023061DF
Remote fonts performance problematic
มุมมอง 183 หลายเดือนก่อน
Using remote fonts can cause performance issues. In this video, I present this issue and suggest a solution This is part of my Udemy course "Boost Your Website Performance - The Practical Guide" Enroll here: www.udemy.com/course/boost-your-website-performance-the-practical-guide/?referralCode=F28E3134284E023061DF
WebPageTest and the browser rendering pipeline
มุมมอง 163 หลายเดือนก่อน
Do you know the order in which the browser loads your HTML page resources? How long does it take for your hero image to appear in the viewport? How can you visualize the browser rendering pipeline using WebPageTest? This video has the answers This is part of my Udemy course "Boost Your Website Performance - The Practical Guide" Enroll here: www.udemy.com/course/boost-your-website-performance-th...
Simulate slow network using Chrome
มุมมอง 123 หลายเดือนก่อน
You should check the performance of your website by simulating users with a slow network. But how to do it using Chrome? In this video, I will show you how This is part of my Udemy course "Boost Your Website Performance - The Practical Guide" Enroll here: www.udemy.com/course/boost-your-website-performance-the-practical-guide/?referralCode=F28E3134284E023061DF
Build a comparison between jest and vitest
มุมมอง 14510 หลายเดือนก่อน
A lesson in my online course "Real-World TypeScript Unit Testing" Enroll via this link www.udemy.com/course/real-world-typescript-unit-testing/?referralCode=6B35B93853BC00B58172 course repository github.com/NathanKr/unit-testing-of-a-real-world-ts-system
What is jest and its API relation with vitest
มุมมอง 4010 หลายเดือนก่อน
What is jest and its API relation with vitest
Create simple unit test using react testing library and vitest
มุมมอง 7310 หลายเดือนก่อน
Create simple unit test using react testing library and vitest
Tools to test react applications
มุมมอง 3910 หลายเดือนก่อน
Tools to test react applications
The problematic of type any in typescript
มุมมอง 2610 หลายเดือนก่อน
The problematic of type any in typescript
The problems with string as action type in typescript
มุมมอง 6810 หลายเดือนก่อน
The problems with string as action type in typescript
Unit test of async functions
มุมมอง 7310 หลายเดือนก่อน
Unit test of async functions
userEvent , getByText and status role in testing library dom
มุมมอง 5410 หลายเดือนก่อน
userEvent , getByText and status role in testing library dom
Use getByRole in testing library dom
มุมมอง 5410 หลายเดือนก่อน
Use getByRole in testing library dom
Motivation for testing library
มุมมอง 3210 หลายเดือนก่อน
Motivation for testing library
spyOn and jsdom in frontend unit test
มุมมอง 8210 หลายเดือนก่อน
spyOn and jsdom in frontend unit test
Jsdom setup and simple front-end unit test
มุมมอง 55910 หลายเดือนก่อน
Jsdom setup and simple front-end unit test
Dom based unit testing tools
มุมมอง 2910 หลายเดือนก่อน
Dom based unit testing tools
Use fake timers in unit test
มุมมอง 20910 หลายเดือนก่อน
Use fake timers in unit test
Using mock and fn functions in unit test
มุมมอง 5110 หลายเดือนก่อน
Using mock and fn functions in unit test
Unit testing and refactoring a typescript module to a class
มุมมอง 4210 หลายเดือนก่อน
Unit testing and refactoring a typescript module to a class

ความคิดเห็น

  • @bernardomondragonbrozon5182
    @bernardomondragonbrozon5182 หลายเดือนก่อน

    How do you make this work with typescript?

  • @JaredAkers
    @JaredAkers หลายเดือนก่อน

    Anyone have any suggestions for package.json and intall, build instructions for hosting this on render?

  • @ayambaasong4425
    @ayambaasong4425 2 หลายเดือนก่อน

    Life saver video! All i could find where Webpress tutorials. you saved me. Thank you so much.

    • @nathankrasney
      @nathankrasney 2 หลายเดือนก่อน

      You might want to buy the online course because I handle more errors there

    • @ayambaasong4425
      @ayambaasong4425 2 หลายเดือนก่อน

      @@nathankrasney I did buy the course. Thank you very much.

  • @mickwhyte4204
    @mickwhyte4204 2 หลายเดือนก่อน

    Very helpful, thank you.

    • @nathankrasney
      @nathankrasney 2 หลายเดือนก่อน

      Glad it was helpful!

  • @ErezPorat
    @ErezPorat 3 หลายเดือนก่อน

    הסרטונים האלה זה זהב טהור. תודה לך

  • @FalconStakepool
    @FalconStakepool 4 หลายเดือนก่อน

    I know that the proxy does not work in production. Is there an alternative to achieving the same behaviour when I am not in development environment?

    • @faviocabral2675
      @faviocabral2675 4 หลายเดือนก่อน

      I think cant we use proxy in production cant see the backend...

  • @AsafA83
    @AsafA83 5 หลายเดือนก่อน

    הקורס עדיין רלוונטי?

    • @nathankrasney
      @nathankrasney 5 หลายเดือนก่อน

      בוודאי, קורס אונליין

  • @brortiz
    @brortiz 7 หลายเดือนก่อน

    Thanks!

  • @philips.289
    @philips.289 10 หลายเดือนก่อน

    Yeah I was working on that issue since ever xD. So thanks. Poorly it does not work with "/" as a Proxy.

  • @tomaszw3785
    @tomaszw3785 11 หลายเดือนก่อน

    Thank you so much :-)

  • @truenfx
    @truenfx 11 หลายเดือนก่อน

    Thanks for good explain👽

  • @bhunter3k
    @bhunter3k ปีที่แล้ว

    Thank you soo much!!!!

  • @taylorzhang5565
    @taylorzhang5565 ปีที่แล้ว

    Thank you so much for posting this integration video. Save my day!

  • @ayushmishra4671
    @ayushmishra4671 ปีที่แล้ว

    Thanks a lot, you save me…

  • @codesnippet_by_anabel
    @codesnippet_by_anabel ปีที่แล้ว

    A million thanks to you, I spent past 30 minutes trying to figure out what's wrong and turns out the solution is this simple. Thank you so much

  • @lorebas12
    @lorebas12 ปีที่แล้ว

    ty

  • @rafaelfeldfix114
    @rafaelfeldfix114 ปีที่แล้ว

    ישר כח גדול

  • @16585460
    @16585460 ปีที่แล้ว

    למדתי משהו חדש, תודה!

  • @udararanasinghe2315
    @udararanasinghe2315 ปีที่แล้ว

    Thank you. Very helpfull

  • @artiomkronik2654
    @artiomkronik2654 ปีที่แล้ว

    מאוד שימושי ועוזר

    • @nathankrasney
      @nathankrasney ปีที่แล้ว

      תודה רבה ארטום

  • @hichamamroussi9087
    @hichamamroussi9087 ปีที่แล้ว

    You moved node_modules folder to a different directory than package.json. I tried to do the same but when I run "npm run dev" it says it can't find vite

    • @nathankrasney
      @nathankrasney ปีที่แล้ว

      It indicate that vite is not installed. npm I might help

    • @hichamamroussi9087
      @hichamamroussi9087 ปีที่แล้ว

      @@nathankrasney It's not possible because I created the project with ""npm create vite@latest". It's because I tried to structure my folders the same as in your video, moving the "node_modules" folder to the "Client" folder

  • @zodiacsama7693
    @zodiacsama7693 ปีที่แล้ว

    Hi nathan How to deal with environment variables in this case. In other method we change it to import.meta.env and do other stuff. Do we have to do the same process here?

    • @nathankrasney
      @nathankrasney ปีที่แล้ว

      vitejs.dev/guide/env-and-mode.html

  • @kevingood10
    @kevingood10 ปีที่แล้ว

    idiot solution

  • @CYBERENA
    @CYBERENA ปีที่แล้ว

    thank you

  • @yasminamran5
    @yasminamran5 ปีที่แล้ว

    ,יש לי אפליקציה עם React express and socketio למשחק בין שניים משני מחשבים שונים. .זה עובד לי לוקאלי אבל אני לא מצליחה לגרום לזה לעבוד בrender You are not ahthorized ) איך ניתן לצור איתך קשר כדי לקבל תמיכה ?

  • @therbt
    @therbt ปีที่แล้ว

    What if we also use the React-Router? How can we avoid handling the node.js requests by React?

  • @rashigupta5995
    @rashigupta5995 ปีที่แล้ว

    Thanks a lot!

  • @im9yro178
    @im9yro178 ปีที่แล้ว

    thank you pro

  • @brendon205
    @brendon205 ปีที่แล้ว

    oof, that's why my performance was shit while developing

  • @lemon_maho
    @lemon_maho ปีที่แล้ว

    Legend

  • @harshitjoshi3082
    @harshitjoshi3082 ปีที่แล้ว

    How does this affect cookies btw ?

    • @nathankrasney
      @nathankrasney ปีที่แล้ว

      What do you mean by "this"?

  • @alexanderkomanov4151
    @alexanderkomanov4151 ปีที่แล้ว

    תודה רבה על הסרטון! פשוט אבן דרך חשובה ועדכנית לגבי פול סטאק עם deploy! תבורך נתן היקר! 🎉 רק שאלה - איפה המצגת?

    • @nathankrasney
      @nathankrasney ปีที่แล้ว

      github.com/NathanKr/youtube-slides/blob/main/slides/render-cloud-application-hosting.pdf

  • @alexanderkomanov4151
    @alexanderkomanov4151 ปีที่แล้ว

    41:09 יש טעות בשם של פונקציה getDataGromServer

  • @akarimathias4449
    @akarimathias4449 ปีที่แล้ว

    Thank you so much sir.... You made my day

  • @johnm8358
    @johnm8358 ปีที่แล้ว

    github for this?

  • @majRFan
    @majRFan ปีที่แล้ว

    Thank you sir

  • @arelhagag6893
    @arelhagag6893 ปีที่แล้ว

    למה לא בעברית?! 😆

    • @nathankrasney
      @nathankrasney ปีที่แล้ว

      כי זה יכול לעניין מפתחים מכל העולם

  • @danielSafonyan
    @danielSafonyan ปีที่แล้ว

    Thank you for the video! I was looking for Vite React Project Strcuture and didn't know that React docs have a special section, but it's called File Structure.

    • @nathankrasney
      @nathankrasney ปีที่แล้ว

      Yes, the new docs has this section. But there are very general guidelines. React does not have an opinon of what exactly is this file structure

  • @IlllIlIIllIll
    @IlllIlIIllIll ปีที่แล้ว

    Very big thanks Nathan. To use ts interfaces as a model - that exactly the idea, I was trying to find. I see you @minimum && @minItems annotations in comments.. Is there a way to make real restrictions in backend for typescript interface? Especially regex restrictions for string. I mean directly in interface without if/else stuff

    • @nathankrasney
      @nathankrasney ปีที่แล้ว

      Thanks Stephan. Honestly i do not know. But json schema support regex so I may be it is possible

  • @nati98055
    @nati98055 ปีที่แล้ว

    אתה תותח תודה רבה עזרת לי מאוד!

  • @TheBrenton24
    @TheBrenton24 ปีที่แล้ว

    Great points there

  • @olivierbitter7199
    @olivierbitter7199 ปีที่แล้ว

    Hey Nathan, great tutorial. IIRC the proxy only works in the dev environment. If you would deploy this app in production, would you replace the axios request url with the full url (including the hostname) of the deployed api?

    • @nathankrasney
      @nathankrasney ปีที่แล้ว

      The proxy is required only for development. It is explained in the video using schema. No need to use the full url

    • @olivierbitter7199
      @olivierbitter7199 ปีที่แล้ว

      @@nathankrasney but how would you deploy this to production? The production webserver would still live on a different port than the production server, no? And in this case using "fetch('api/v1/endpoint')" would just query a route on the prod webserver which does not exist. What am I getting wrong?

    • @lemon_maho
      @lemon_maho ปีที่แล้ว

      @@olivierbitter7199 it's advised that you deploy your app and api seperately

  • @alexanderkomanov4151
    @alexanderkomanov4151 ปีที่แล้ว

    Great! Thanks!

  • @saritegri8395
    @saritegri8395 ปีที่แล้ว

    מעולה

  • @iamsarb_0017
    @iamsarb_0017 ปีที่แล้ว

    Thank man Worked for me

  • @ibrahimkedir2280
    @ibrahimkedir2280 ปีที่แล้ว

    Thanks, mate, you've really helped me with my project. But, your English was hard to follow. But, thank you very much.

  • @nguyentienbinh3181
    @nguyentienbinh3181 ปีที่แล้ว

    thank you

  • @lukevee
    @lukevee ปีที่แล้ว

    This has been great for development! But how would I go about using a hosted server URL in production?

    • @nathankrasney
      @nathankrasney ปีที่แล้ว

      Here is a project of mine using this setup github.com/NathanKr/nathan-krasney-com also on production. Www.nathankrasney.com

    • @lukevee
      @lukevee ปีที่แล้ว

      @@nathankrasney Thanks for the quick reply! I see you fetch from the path '/data' but I'm not sure how it can use the proxy in production. I'm wanting to be able to deploy my production build & have it fetch from a different production api url which is hosted separately. Right now I just manually change the path in react before I build, which is fine, but just wondering if there's a better way. Thanks!

    • @nathankrasney
      @nathankrasney ปีที่แล้ว

      @@lukevee you do not need the proxy in production. The proxy is used for the development server it is not needed in production. I think that the schema i use in the video explain this.

    • @nathankrasney
      @nathankrasney ปีที่แล้ว

      @@lukevee no need for host name if the client acess its server url

    • @3rdNumberOfPi
      @3rdNumberOfPi ปีที่แล้ว

      ​@@lukevee did you get what he was trying to explain? I need help in similar project, where I'm manually changing proxy url to backend hosted url, I don't get what he meant by not needing a proxy in production, then how would frontend interact with backend, we just deploy whole project with concurrently and react will figure it out or deploy backend and specify static or dist frontend folder. Idk

  • @ksf27
    @ksf27 ปีที่แล้ว

    you are a legend

  • @kusburnularntanrs5675
    @kusburnularntanrs5675 ปีที่แล้ว

    thank you !