مفهموم Specificity در CSS چیست؟ و چرا باید به عنوان یک برنامه نویس فرانت به آن مسلط باشیم؟
‍‍پیشنهاد میکنم این ویدیو رو ببینید حتما. تا قبل این برای خودم جا نیفتاده بود
#css #specificity

#css #specificity

تبدیل طراحی‌های AdobeXD به کد React با پلاگین Anima
#react #adobexd #anima

Next.js Conf Special Edition
ویژگی‌های خیلی خوبی به NextJS11
اضافه شده
#nextjs

خلاصه ویژگی‌هایی که به NextJS11 اضافه شده.
#nextjs

این نکته رو کمتر جایی پیدا می‌کنید که تگ <noscript> توی html هم برای خودش انواع داره و میتونه روی performance صفختون تاثیر بذاره.
------------
There are several ways an external noscript can be executed:
1- If async is present: The noscript is executed asynchronously with the rest of the page (the noscript will be executed while the page continues the parsing)
2- If async is not present and defer is present: The noscript is executed when the page has finished parsing
3- If neither async or defer is present: The noscript is fetched and executed immediately, before the browser continues parsing the page.
Note : The defer attribute is only for external noscripts (should only be used if the src attribute is present).
#html

فیچر جدید NextJS رو ببین جون بابا 😍
استفاده از Blur placeholder قبل از لود شدن کامل عکس ها
<Image src={author} alt="Picture of the author" placeholder="blur" />
#nextjs

خلاصه‌ای از ویژگی‌های NextJS
با وجود این ویژگی‌ها دلیلی نمیبینم یک نفر از چیزی جز Next استفاده کنه.
دوستان صاحب نظر ، به نظرتون Next چه ویژگی‌ای ممکنه کم داشته باشه که برنامه نویس رو مجاب کنه از یه چیز دیگه استفاده کنه؟
#nextjs

خداحافط کروم. حداقل به چشم یک برنامه نویس.
چه قدر توی توسعه اذیتمون کردی.... چه قدر لود cpu و ram رو بردی بالا بدون اینکه بفهمیم داستان چی بود...
چه قدر به react بدبخت به خاطر تو فحش دادیم...
مرورگر brave رو همون شخصی درست که زبان جاوا اسکریپت رو توسعه داده... همه فیچرهای کروم رو داره به علاوه فیچرهای دیگه. ظاهرش هم شبیه کرومه.
مهمتر از همه پروژه‌های react رو در حالت development اذیت نمیکنه.
مهمترینشون هم اینکه fast resfresh روی کروم کار نمیکنه ولی روی brave کار میکنه.
#react #nextjs

next/link : Client-side transitions between routes can be enabled via the Link component exported by next/link.
---------
Any <Link /> that is in the viewport (initially or through scroll) will be preloaded by default. Prefetch can be disabled by passing prefetch={false}
Note: If you need to link to an external page outside the Next.js app, just use an <a> tag without Link.
#nextjs

Next.js does code splitting automatically, so each page only loads what’s necessary for that page. That means when the homepage is rendered, the code for other pages is not served initially.

next/image is an extension of the HTML <img> element, evolved for the modern web.
-----
Next.js also has support for Image Optimization by default. This allows for resizing, optimizing, and serving images in modern formats like WebP when the browser supports it. This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats.
-----
Automatic Image Optimization works with any image source. Even if the image is hosted by an external data source, like a CMS, it can still be optimized.
-----
Instead of optimizing images at build time, Next.js optimizes images on-demand, as users request them.
Images are lazy loaded by default. That means your page speed isn't penalized for images outside the viewport. Images load as they are scrolled into viewport.
#nextjs

next/head : The contents of head get cleared upon unmounting the component, so make sure each page completely defines what it needs in head, without making assumptions about what other pages added.
#nextjs

Next.js’s code splitting feature works on CSS Modules as well. It ensures the minimal amount of CSS is loaded for each page.
#nextjs

If you want to share something betweeen all different pages , import it in App component. (`_app` file)
#nextjs

فرانت‌اند کارای محترم... کدومو ترجیح میدید؟ چرا؟

NextJS Hydration : By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO. Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive.
#nextjs

Pre-rendering vs No Pre-rendering
#nextjs

Two Forms of Pre-rendering
#nextjs

توضیح انواع مخفف‌ها در حوزه طراحی وب و مخصوصا NextJS :
Server-Side Rendering (SSR)‍‍‍ : Renders the app on the Server in response to each request, and then sends the hydrated HTML and Javanoscript back to the Client.
Static Rendering (SR) - Static Site Generation (SSG) : Renders the app at build time. This is NextJS’s default approach.
Incremental Static Regeneration (ISR) : Next.js allows you to create or update static pages after you’ve built your site and it enables you to use static-generation on a per-page basis, without needing to rebuild the entire site.
Client-Side Rendering (CSR): Renders the app on the Client in the browser at run time.
#nextjs

Next.js lets you choose which pre-rendering form to use for each page.
#nextjs