Ramziddin — AI va dasturlash haqida

Boshlanuvchi dasturchilarga maslahatim

Matt Pocock okami judayam hurmat qilaman. Statelyda ishlagan paytlarida shunaqa foydali video chiqardila: useState, useReducer va XState o‘rtasida qanday qaror qabul qilish mumkin useReducerni to'liq tushunishga bu video yordam berdi va ko'zimni ochib berdi.

Alright, jonli efirga 5 soat bo'ldi. 5 soat ichida ishimdagi tasklarni bajarib, shaxsiy ishlarimi ham qildim. Rahmat jonli efirga qo'shilganila uchun, it was pretty chill and relaxing. See ya tomorrow 🍸

Zo'r g'oyalar uchun rahmat! 🍸 Ko'p g'oyalar yozdilar, ba'zila complex. Razgon uchun oddiyroqlaridan boshliman

Agar sizda yangi video uchun so'rov bo'lsa, shu yerga yozing

▶️ "Code with me" jonli efir – shunchaki musiqa, ish va productivity Edit: bu efirda man hech narsa gapirmiman Musiqa shu yerda

⚡️ Bu shortcutlardan macbookimda har kuni foydalanaman Man uchun shortcutlar judayam muhim, shortcutlar nafaqat ishimi tezlashtiradi, ishimi judayam yoqimli qiladi. VSCode ichida • Sidebarni ko'rsatish / bekitish: ⌘ + B • Explorerni ko'rsatish: ⌘ + ⇧ + E • Source controlni ko'rsatish: ⌃ + ⇧ + G • Extensionlarni ko'rsatish: ⌘ + ⇧ + X • Fayllarni qidirish: ⌘ + P • Symbollarni qidirish: ⌘ + T • Pastdagi panelni ko'rsatish / bekitish: ⌘ + J • Terminalni ochish / terminalga fokus o'tkazish: ⌘ + ` Chrome ichida • Tablarni qidirish: ⌘ + ⇧ + A • Keyingi / oldingi tabga o'tish: ⌘ + ⌥ + ← va ⌘ + ⌥ + → • Address barga fokus o'tkazish: ⌘ + L • Yangi tab ochish: ⌘ + T • Yangi window ochish: ⌘ + N • Incognito window ochish: ⌘ + ⇧ + N • Devtoolsni ochish: ⌘ + ⌥ + I Arc ichida • Page URLni copy qilish: ⌘ + ⇧ + C • Little Arcni ochish: ⌘ + ⌥ + N • Tabni ikta tabga bo'lish (split view): ⌘ + ⇧ + = • Arcning palitrasini ochish: ⌘ + T • Address barga fokus o'tkazish: ⌘ + L • Devtoolsni ochish: ⌘ + ⌥ + I • Keyingi / oldingi tabga o'tish: ⌘ + ⌥ + ← va ⌘ + ⌥ + → • Zoom in va zoom out: ⌘ + + va ⌘ + - • Zoomni reset qilish: ⌘ + = • Historyni ochish: ⌘ + Y YouTube ichida • Search inputga fokus o'tkazish: / • Videoni pauza qilish: K • Videoni orqaga o'tkazish: J • Videoni oldinga o'tkazish: L • Videoni tezlashtirish: ⌘ + > • Videoni sekinlashtirish: ⌘ + < Ko'pincha, masalan YouTubeda, xuddi Vimdagi shortcutlar (H, J, K, L) ishlidi.

Erkak bo’ling, hech qanday code reviewsiz main branchga “git push —force” qiling

Yangi Next.js 15 <Form> bilan oddiy <form>ni farqi nima?

Ertaga soat 21:00da Next.js Conf 2024

ChatGPT, unga 117ta useState bilan componentimi refactor qilishga berganimda:

Next.jsdagi yangi <Form> component qaley? Features-lari oddiy va tushunarli. 1️⃣ Foydalanuvchi formni ko'rganida, Next.js formning action URL uchun "loading" UI-ni prefetch qilib qo'yadi.

Prefetches the path when the form becomes visible, this preloads shared UI (e.g. layout.js and loading.js), resulting in faster navigation.

<Link>da ham shunaqa kabi narsa bor:

Prefetching happens when a <Link /> component enters the user's viewport (initially or through scroll). Next.js prefetches and loads the linked route (denoted by the href) and data in the background to improve the performance of client-side navigation's. Prefetching is only enabled in production.

2️⃣ To'liq sahifani o'chirib, yangi sahifani request qilish o'rniga, <Form> client-side navigationdan foydalanadi. 3️⃣ Va albatta progressive enhancement, ya'ni agar JS hali yuklanmagan bo'lsa oxirigacha yoki JS umuman foydalanuvchida yo'q bo'lsa, <Form> oddiy <form>ga fallback qiladi.

Erkak bo’ling, juma kuni kodingizni deploy qiling va telefoningizni o’chirib qo’ying

Ramzcoder Community haqida

Keyingi shunaqa updatelarni faqat video shaklda qo‘yaman. Gentlemen are starting to think I GPT-ize my content

Next.js 15 yangiliklar • Eksperimental React Compiler. Endi compiler siz o‘rningizga useMemo, useCallback va boshqa optimizatsiyalarni qiladi. Bu degani kod toza, oddiy va tez bo'ladi. Zo'r! • Turbopack local dev uchun stabil bo'ldi 🎉 Turbopackdan foydalanish uchun: next dev --turbo. Bu localda ishlash jarayonini ancha tezlashtiradi. • Dynamic funksiyalar (cookies, headers, ...) endi async bo'ladi, va ularni await qilishingiz kerak. Buning uchun oddiy codemod bor va qo'lda xech narsani o'zgartirishingiz shart emas. • Endi, default ravishda, Next.js fetch requestlarni, GET Route Handlerslarni va Client Routerni cacheddan uncachedga o‘tkazdi. Endi cachedan foydalanish uchun siz cachega opt-in bo'lishingiz kerak. Yangi Next.js dasturchilar uchun bu yaxshi yangilik. Lekin manga oldingi cache defaultlar yoqardi, bu ham yomon emas. • Endi developmentda, Next.js sizga aniq ko'rsatadi – qaysi page static va qaysi page dynamic. Bu narsani next build oldin ham ko'rsatgan. Lekin endi aniq visual ravishda ham bilinadi. • Yangi <Form> component layout va loading UI-larni prefetch qilib, form submissionda client navigationdan foydalanadi, va agar JS ishlamasa oddiy form-ga fallback qiladi. • Endi next.config.js va next.config.ts (typescript) support qilinadi. Bu degani NextConfig typedan foydalanshingiz mumkin. • Hydration xatolar endi tushunish uchun osonroq bo'ldi. • instrumentation.js yordamida performance va errorlarni monitor qilib Sentry kabi servislarga ma'lumotlarni bervorishingiz mumkin. • Server actions xavfsizligi yaxshilandi • Self-host qiladiganlar uchun yangiliklar Ko'proq ma'lumot

Erkak bo'ling, unit testlar yozmasdan productionda qolda test qiling.

useEffect va useLayoutEffect visual ravishda tushunish uchun. Agar siz componentni DOM API orqali o'zgartirmoqchi bo'lsangiz, componentni foydalanuvchiga ko'rsatishdan oldin (yangi browser chizishidan oldin), useLayoutEffectdan foydalaning. Albatta, agar masalan useLayoutEffectdagi funksiya sekin bo'lsa, masalan 3 soniya vaqt olsa, bu degani browser componentni ham 3 soniyadan keyin chizadi. Shuning uchun odatda useEffect ko'proq tavsiya qilinadi, chunki u chizish jarayonini bloklab qo'ymidi. Lekin bazida shunqa bo'lishi mumkinki, component chizildi, lekin siz useEffect ichida componentni tez o'zgartirdiz – shunaqa holatda foydalanuvchilar flash ko'rishi mumkin. Yani, componentni birinchi holati. Shunaqa holatlarda useLayoutEffectdan foydalangani yaxshiroq. Lekin useLayoutEffectdagi funksiya tez bo'lishi kerak.