#tools

Veb-dizaynerlar va frontend ishlab chiquvchilari uchun foydali resurslar

❤️ Icon'lar:
— Font Awesome icons
— Bootstrap icons
— Material Symbols

🔡 Shriftlar:
— Google Fonts
— Awwwards collection
— Fonts.com

🖼 Illustratsiyalar:
— Humaaans
— unDraw
— icons8

🖌 Ranglar palitralari:
— Coolors
— Color Leap

🤖 Boshqa resurslar:
— Smooth box shadow generator
— Cubic bezier generator
— Grid layout generator
— Flex layout generator

👉🏼 @frontend

VueJs bo'yicha vakansiya 👆

#javascript

👩‍💻 JavaScriptda obyektni massiv sifatida qarashga yordam beradigan 4 ta usul bor:

Object.keys()

argument sifatida berilgan obyektning barcha kalitlarini massiv sifatida qaytaradi.

Object.values()

obyektning barcha qiymatlarini massiv sifatida qaytaradi.

Object.entries()

kirishlarni massiv sifatida qaytaradi - har bir kirish o'z-o'zi ikki elementli massiv - kalit va qiymat.

Object.fromEntries()

kirishlarni massivni qabul qilib, ularni massivga aylantiradi.

👉🏼 @frontend

#css

👩‍💻⚙️ CSS Generatorlar

- Keyframes.app
- Cubic-bezier
- Css tricks button maker
- Css box shadow generator
- Css grid layout generator
- Css button generator
- Css animations generator
- ColorZilla gradients
- Css flex layout
- Css gradient generator
- CSS generatorlar to'plami

👉🏻 @frontend

#humor

GitHub-ga loyihaga qo'shib node_modul faylini ham push qilganingda 😥

Loyihani tugatgandan so'ng uni GitHub-ga yuklash yoki faylini biror yerga yuborishda "node_modules" faylnini o'chirib keyin taqdim etish tavsiya qilinadi.

Afzalligi fayl hajmini kichraytirish!

@frontend

#css

🤔 Matnga gradientli kontur qo'yish.

`text-stroke` stil xususiyati matnning harflari va belgilariga kontur rangini va qalinligini bir vaqtning o'zida belgilaydi. Lekin gradient yaratish uchun 2 xususiyatni qo'shish kerak: `background-clip: text` va `background-image: linear-gradient`.

<h1>Hello frontend.t.iss.one</h1>

body {
    background-color: #000119;
    display: grid;
    font-family: sans-serif;
    place-items: center;
  }
  h1 {
    background-clip: text;
    background-image: linear-gradient(to right, #09f1b8, #00a2ff, #ff00d2, #fed90f);
    font-size: 100px;
    -webkit-text-stroke: transparent 6px;
  }

@frontend

#javascript #kutubxona

FullPage.js - bu JavaScript kutubxonasi (library) yangi qatordan foydalanib bir-biriga o'tish (scrolling) asosida to'la sahifa (full page) yaratishga yordam beradi.

🔗Saytga o'tish

@frontend

#vue #Devtools

👩‍💻 Vue Developer Tools

- Vue CLI
- Vite
- Bit
- Nuxt
- VuePress
- Gridsome
- Vuex
- Pinia
- Design Systems
- VueTify
- Vue Devtools
- Quasar

@frontend

⏱ Vaqt

JavaScript orqali ishlab chiqilgan, noodatiy raqamli soat.

🔗Kodni ko'rish

@frontend

#vscode

⚙️ VS Code uchun tasodifiy ma'lumotlar generatori

Foydalanish uchun extension'ni o'rnatib, buyruqlar palitrasini oching (Cmd+Shift+P / Ctrl+Shift+P) va “random” deb yozing, bu sizga mavjud ma’lumotlar generatorlarini ko’rsatadi.

🗓 Plaginni o'rnatish

@frontend

Karyerasini boshlamoqchi boʻlib yurgan React'chilar uchun amaliyot 👆

#quiz #javascript

❓ Konsolga qanday qiymat chiqadi?

@frontend

#javascript

Top 5 ta Js animatsion kutubxonalari 🎮

1. Gsap
2. AnimeJs
3. ScrollReveal.js
4. Typed.js / Typeit.js
5. Velocity.js

Izohlarda qo'shimcha qilish mumkin 💬

@frontend

#css

📝 Chiziqli matn yaratish

Chiziqli matn hosil qilishda text-shadow xususiyati ishlatiladi. Soya Y o'qi bo'ylab biroz siljiydi, bu esa engil chuqurlik effektini yaratadi.

.recessed {
   font-size: 50px;
   font-weight: 800;
   text-align: center;
   text-shadow: 2px 2px 2px rgba(255,255,255,0.3);
   background-color: #b9b9b9;
   background-clip: text;
   color: transparent;
   font-family: 'M PLUS 1p', sans-serif;
}

@frontend

#humor

Dasturchilar pardasi ekan 😄

@frontend

VueJs bo'yicha yangi vakansiya 👆

Reaksiyalani 👍BOMBA qilib tashlayleeek