Frontend
3.46K subscribers
382 photos
53 videos
23 files
364 links
Barchasi Frontend dasturlash haqida!

- So'nggi yangiliklar
- Eng yaxshi resurslar
- Intervyu savol - javoblar

Vakansiyalar: @frontendVacancy

Reklama va hamkorlik: @jaydariX
Download Telegram
#update #nextjs #frontend


πŸ‘©β€πŸ’» Next.js 15 versiyasi e'lon qilindi!

Ushbu versiya React 19 qo'llab-quvvatlaydi, yaxshilangan forma va Turbopack yordamida yaxshilangan performans kabi bir qator yangiliklarni o'z ichiga oladi.

To'liq ma'lumot olish uchun Next.js rasmiy blog postini ko'ring: Next.js 15.

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯15πŸ‘7
#javascript #frontend


πŸ‘©β€πŸ’» JavaScript ishlash jarayoni

JavaScript kodining ishlash jarayonidagi asosiy ketma-ketliklar quyidagicha:

1. Parsing (Tahlil qilish)
2. Compilation (Kompilyatsiya qilish)
3. Execution (Bajarish)

JavaScript kodni qanday qilib ketma-ket tahlil qilinishi, kompilyatsiya qilinishi va bajarilishini quyidagi video orqali vizual bilib olsangiz bo'ladi.

YouTube video: Havola

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘9πŸ”₯8
#template #frontend


πŸ–₯ HTMLrev β€” bu turli xil bepul HTML shablonlarini taqdim etuvchi platforma. Bu sayt orqali siz biznes, blog, portfolio, tijorat va boshqaruv panellari uchun zamonaviy, moslashuvchan va oson sozlanadigan shablonlarni yuklab olishingiz mumkin. Shablonlar Bootstrap, Tailwind, Vue, React, Angular kabi mashhur frameworklar asosida qurilgan.

1500+ bepul HTML shablonlar

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘17πŸ”₯8
#library #javascript #frontend


🎈balloons-js: Saytingiz uchun animatsion sharlar effekti

Kutubxonaga havola

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯8πŸ‘7
#tailwindCSS #nextJs #frontend


πŸ”  Zamonaviy va optimallashtirilgan input'lar to'plami!

Next.js va TailwindCSS bilan yaratilgan 50 dan ortiq input komponentlaridan iborat to'plam. Loyihangizda osongina copy qilib ishlatishingiz mumkin.

Havola

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯16πŸ‘8
#vue #library #frontend


πŸ“Š Vue Data UI β€” Vue 3 uchun maxsus ishlab chiqilgan, ma'lumotlarni vizual tarzda ifodalash uchun qulay komponentlar kutubxonasi. Chartlar, mini-chartlar, jadvallar va ko'plab boshqa imkoniyatlarni o'z ichiga oladi.

GitHub | Veb sayt

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘9πŸ”₯9
#update #nuxt #frontend


πŸ‘©β€πŸ’» Nuxt 3.14 chiqdi - yangi rspack builder, umumiy papka va ishlash unumdorligini oshirish bilan!

Batafsil: Nuxt blog

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯12πŸ‘8
#ui #frontend


🀩 Loyihalaringizni jonlantiruvchi trenddagi animatsion UI kutubxonalar

1. MagicUI
2. Aceternity UI
3. UI Layout
4. Cult UI
5. Eldora UI
6. Syntax UI
7. Hover.Dev
8. Svelte Animation Components
9. LunarUI
10. Animata
11. InspiraUI

*Do'stlaringizga ham ulashing!

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯12πŸ‘3
#css #frontend


πŸ‘©β€πŸ’» CSS-da yangilangan media-query sintaksisi β€” "Range Syntax"

Range Syntax orqali media queries’ga kiritiladigan qiymatlarning diapazonini an’anaviy min-width va max-width qiymatlaridan koβ€˜ra qisqaroq va osonroq ifodalash imkoniyatini beradi.

min-width va max-width ➑️ <, >, <=, >=

Brauzerlar qoβ€˜llab-quvvatlashi 91.9%

Misollar:
@media (width >= 80rem) {
/* kenglik kamida 80rem bo'lganda */
}

/* Oraliq belgilash */
@media (80rem <= width <= 120rem) {
/* kenglik 80rem va 120rem oralig'ida bo'lganda */
}

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘29πŸ”₯9
#plugin #css #frontend


πŸ—“ CSS Peek

HTML kodingizda class yoki id'larni tahlil qilib, ularning CSS kodini tezda topishni xohlaysizmi? CSS Peek yordamida bir necha soniyada to'g'ridan-to'g'ri CSS'ga o'tishingiz mumkin.

πŸ”— CSS Peek

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘15πŸ”₯10
#chart #react #frontend


πŸ“Š Recharts β€” React uchun grafiklar kutubxonasi!

Imkoniyatlari:
- Animatsiyali grafiklar
- Responsive, Har xil ekran oβ€˜lchamlariga moslashuvchan
- Interaktiv elementlar (masalan, tooltiplar)
- SVG asosida yengil va tezkor

GitHub | Veb sayt

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯8πŸ‘6
#frontend


πŸ‘©β€πŸ’» Ushbu havola orqali barcha asosiy frontend texnologiyalar va ularni o'rganish bo'yicha zarur ko'nikmalarni interaktiv tarzda o'rganishingiz mumkin:

βœ”οΈ Texnologiyalar xaritasi
βœ”οΈ Asosiy tushunchalar
βœ”οΈ O'rganish uchun tavsiyalar

Havola: web-skills

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
1πŸ”₯15πŸ‘8
This media is not supported in your browser
VIEW IN TELEGRAM
#css #frontend


Faqat CSS orqali magnit havola effekti 😁


li:has(a:is(:hover, :focus-visible)) {anchor-name: --a;}
ul::before {
left: anchor(--a left);
width: anchor-size(--a width);
}

CSS anchor position funksiyasidan foydalanib, indikator uchun hoverda anchor positionni belgilash

CSS Anchor Positioning β€” bu CSS-ning yangi imkoniyatlaridan biri boβ€˜lib, elementlarning joylashuvini boshqa elementlarga bogβ€˜lashga yordam beradi.


@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯14πŸ‘8
#update #nextui #frontend


πŸ‘©β€πŸ’» NextUI’da ajoyib chartlar shu haftada taqdim etiladi!

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯20πŸ‘5
#mem #jsLibrary #frontend


😁 Bu dasturlashdagi samaradorlikka qarshi kulgili kontrastni ifodalaydi. Kutubxonalarga qaramlik ba'zi dasturchilar orasida haddan tashqari keng tarqalgan!

is-odd kutubxonasi - bir sonning toq ekanligini aniqlash. U sonni tekshirib, true (toq) yoki false (juft) qiymatni qaytaradi.


@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
😁28🀯6πŸ‘4πŸ”₯1
#vite #update #frontend


πŸ‘©β€πŸ’» Vite 6.0 chiqdi

Vite ekotizimi o'sishi haqida:
- Vite’ning ommaviyligi oshdi: NPM’dagi haftalik yuklashlar 7,5 milliondan 17 milliongacha oβ€˜sdi.
- Yangi frameworklar: TanStack Start, One, Ember kabi frameworklar Vite ekotizimiga qoβ€˜shildi.
- Vite'ni yirik kompaniyalar, jumladan, Google, Apple, Microsoft, OpenAI, va NASA kabi yetakchi kompaniyalar ishlatmoqda.

Quyida 6.0 versiyadagi eng asosiy o'zgarishlar:
1. Yangi environment API
2. Ekotizim kengayishi
3. Rollup 4’ga oβ€˜tish
4. Hot Module Replacement (HMR) optimizatsiyasi
5. Node.js 18, 20 va 22+ versiyalari qoβ€˜llab-quvvatlanadi
6. PostCSS va Sass bilan integratsiya yaxshilandi
7. vite.dev domeni va dizayni

πŸ‘‰ Vite 6.0 haqida toβ€˜liq e’lonni bu yerda oβ€˜qing

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯10πŸ‘6
This media is not supported in your browser
VIEW IN TELEGRAM
#component #frontend


↔️ Raqamlarni animatsiya qilish, formatlash va lokalizatsiya qilish uchun komponent

<NumberFlow/> Intl.NumberFormat va Web Animations asosida yaratilgan. qoβ€˜shimcha kutubxonalarsiz, foydalanuvchilar uchun qulay va oson moslashuvchan.

React, Vue, Svelte uchun mavjud

GitHub | Veb sayt

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯20πŸ‘11
#3D #frontend


πŸ”  Matn uchun 3D effekt kutubxonasi

ZText - 3D effektli matn yaratish uchun maxsus ishlab chiqilgan CSS va JavaScript kutubxonasi. Bu kutubxona oddiy HTML va CSS orqali matnlarga dinamik harakat, chuqurlik va 3D effektlar qoβ€˜shishni osonlashtiradi.

Havola: https://bennettfeely.com/ztext

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯12πŸ‘5
This media is not supported in your browser
VIEW IN TELEGRAM
#ai #frontend


πŸ‘¨β€πŸ’» Bolt.new β€” StackBlitz tomonidan yaratilgan AI yordamida veb-ilovalarni tez va oson yaratish platformasi. Sun'iy intellekt foydalanuvchining kiritgan ma'lumotlariga asoslanib, kodni avtomatik ravishda yaratadi va darhol ishga tushiradi. Bu ishlab chiqish jarayonini soddalashtiradi va yangi boshlovchilar uchun juda qulay.

πŸ‘©β€πŸ’»πŸ‘©β€πŸ’» πŸ‘©β€πŸ’» πŸ‘©β€πŸ’» πŸ‘©β€πŸ’» πŸ‘©β€πŸ’» πŸ‘©β€πŸ’» πŸ‘©β€πŸ’» πŸ‘©β€πŸ’» v.h.

Havola: bolt.new / GitHub

@frontend | Happy Coding
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘16πŸ”₯12