✅ Codier.io - Frontend dasturlash bo'yicha tajribangizni oshiring

Codier.io veb saytida ko'pgina qiziqarli vazifalar berib o'tilgan va vazifalar oson darajadan murakkab darajagacha mavjud. Bu vazifalar orqali HTML, CSS, JavaScript bo'yicha vazifalarni bajarish orqali tajribangizni yaxshigina oshirsangiz bo'ladi.

🌐 Veb saytiga o'tish — https://codier.io/

👉🏻 @junior_developer

Aralash tipografiya animatsiyasi 🔡

🌐 Veb sayti — tympanus.net

👉🏻 @junior_developer

#webapps #dev_tools #scroll

↕️ CSS Scrollbars uchun onlayn muharrir

Scrollbar.app - loyiha CSS scrollbarlarini yaratish uchun onlayn editor hisoblanadi. Ushbu loyihada scrollbar stilini, rangini, kengligini, uslubini va boshqa xususiyatlarni o'zgartirish uchun oson va intuitiv imkoniyatlar mavjud. Foydalanuvchi horizontal yoki vertikal scrollbar tanlashi va uning joylashuvi va uzunligini sozlashi mumkin.

Loyiha Vue 3 bilan qurilgan va ochiq manba kodi mavjud.

👉🏻 @junior_developer

DevTools-da yangilanish

DevTools v.122 yangilanishlari: rasmiy yozib olish kengaytmasi, yangi xronologiya funksiyasi, cookie-fayllar bilan yaxshilangan ishlash va boshqalar.

https://developer.chrome.com/blog/new-in-devtools-122?hl=en

👉🏼 @frontend

JavaScript-da JSON-ni o'qish va yozish

🌐 O'qish uchun link: https://blog.openreplay.com/how-to-read-and-write-json-in-javascript/

👉🏼 @frontend

✌️ Vue Options API dan Composition API migratsiyasi


Script / Options API

<script lang="ts">
export default {
  data() {
    return {
      showHeaderMenu: false,
    }
  },
  methods() {
    toggleHeaderMenu() {
      this.showHeaderMenu =
        !this.showHeaderMenu;
    },
  }
}
</script>

Composition API

<script setup lang="ts">

const showHeaderMenu = ref(false);

const toggleHeaderMenu = () => {
  showHeaderMenu.value =
     !showHeaderMenu.value;
};

</script>

👉🏼 @frontend

#css

— Matn tanlashdagi user-select xususiyati orqali barcha matnni belgilash yoki tanlashni o'chirib qo'yish.

/* Birmarta bosish orqali barcha matnni tanlash */
p {
  user-select: all;
}

/* Matn tanlashni o'chirib qo'yish */
p {
  user-select: none;
}

👉🏼 @frontend

#interview

JavaScript intervyuga tayyorlanayotgan yoki o'z bilimini oshirish, mustahkamlash istagida bo'lganlar uchun savollar to'plami.

👉🏼 SAVOLLARNI KO'RISH

👉🏼 @frontend 👈🏼

#js #github

🔂 JavaScriptni organish uchun 5 GitHub reposi.

1. Murakkab JavaScript savollarining uzun roʻyxati va ularning tushuntirishlari

2. 🛁 JavaScript uchun Clean Code

3. Udemydagi JS kursining barcha bo'limlari va loyihalar uchun kodlar

4. Zamonaviy JavaScript qo'llanma

5. Boshlangich JavaScript

Foydali kontent uchun OBUNA bo'ling!
👉🏼 @frontend 👈🏼

#quiz #js

What is the output?

 const list = [1 + 2, 1 * 2, 1 / 2];
 console.log(list);

#vue #js

Vue'da "v-if" va "v-show" orasidagi farq 📌

🟢 "v-if" - o'zgaruvchining qiymati "true" bo'lsa, elementni DOM-da yaratadi, "false" bo'lsa, elementni DOM-dan o'chiradi va uni yashiradi.

🟢 "v-show" - o'zgaruvchining qiymati "false" bo'lsa, DOM elementini CSS "display" stilini "none" qilib o'zgartiradi. Buning natijasida, DOM elementi sahifada qoladi, ammo ko'rinmaydi.

👉🏼 @frontend 👈🏼

#freelance

🌐 Top 5 freelance saytlar:

1. UpWork
2. TopTal
3. Fiverr
4. PeoplePerHour
5. Hired

👉🏼 @frontend 👈🏼

Html, Css ni o'zi bilan FrontEnd dasturchi bo'laman deb o'ylaganingizda 🤣

👉🏼 @frontend 👈🏼

#js #kutubxona

🖱Parallax-img-scroll

Veb-sayt yuqoriga yoki pastga aylantirilganda tasvirlarni (yoki boshqa turdagi HTML-kontentni) suzuvchi va harakatlantirish uchun parallaks effekt JavaScript kutubxonasi.

📔 githubga havola

🌐 veb sayt

👉🏼 @frontend 👈🏼

Landing Page yaratish uchun amaliy ko'rsatmalar ketma-ketligi, qo'llanma

🖇 https://foundersbook.co/lean-landing-page

👉🏼 @frontend 👈🏼

#dev_link

Foydali resurslar ro'yxati 💻

• JavaScript: awesome-javascript
• React: awesome-react
• Vue: awesome-vue
• Angular: awesome-angular
• Node.js: awesome-nodejs
• Typescript: awesome-typescript
• Java: awesome-java
• Go: awesome-go
• Ruby: awesome-ruby
• PHP: awesome-php
• Kotlin: awesome-kotlin
• Rust: awesome-rust
• Swift: awesome-swift
• iOS-developper: awesome-ios
• Android-Developper: awesome-android
• C: awesome-c
• C++: awesome-cpp
• C#: awesome-dotnet
• Unreal Engine: awesome-unreal
• Unity: awesome-unity3d
• Python: awesome-python
• Django: awesome-django
• Data Science: awesome-datascience
• TensorFlow: awesome-tensorflow
• Linux: Awesome-Linux-Software
• DevOps: awesome-devops
• SysAdmins: awesome-sysadmin
• Nginx: awesome-nginx
• Kubernetes: awesome-kubernetes
• Docker: awesome-docker
• Auto Networking: awesome-network-automation
• Kiberxavfsizlik: awesome-security
• QA: awesome-testing
• DataBase: awesome-database-learning

👉🏼 @frontend 👈🏼

🖱VUE DRA GGA BLE

Sortable.js asosida Vue 3 bilan ishlangan drag-and-drop komponenti.

⌨️ GitHub havola
🌐 Veb saytga havola

Siz shunga o'xshash yana qanday resurslarni bilasiz, izohlarda yozing 💬

👉🏼 @frontend 👈🏼

#css

div elementimizni markazga joylashtirishning eng yaxshi yo'llari.

P.S ustozim maslahat bergandilar unga ko'ra 3-usul maqulroq ekan 👌🏼

Bu usul afzalliklari:

1) brauzerlar tushunishida qiyinchilik bo'lmaydi ya'ni barcha eski brauzerlar ham muammosiz o'qiy oladi.

2) U ichki elementning kengligi va balandligiga bog’liq emas, ya’ni har xil o’lchamdagi elementlarni markazlashtira oladi.

bu degani responsiv qilishda ancha qo'l keladi.

👉🏼 @frontend 👈🏼