Frontend – дорожная карта
Разработка клиентской части сайтов всегда была и будет одной из самых востребованных тематик в IT. Держите дорожную карту по этому направлению и вперёд.
#роадмап#frontend
#HTML#JAVASCRIPT#WebDasturlash#Frontend#DasturlashHayoti
👩💻 JavaScript talab qilmaydigan 5 ta kuchli HTML atributlari
Ko‘p hollarda oddiygina HTML atributlari orqali ham katta qulayliklarga erishish mumkin. Quyida ularning eng foydali 5 tasini ko‘rib chiqamiz:
1️⃣spellcheck— Imlo tekshiruvi
Matn maydonida foydalanuvchi yozgan so‘zlarni brauzer imlo qoidalari asosida tekshiradi.
✅ Xatolik qizil chiziq bilan belgilanadi.
<textarea spellcheck="true"></textarea>
❌ Agar kerak bo‘lmasa, tekshiruvni o‘chirib qo‘yish ham mumkin:
<textarea spellcheck="false"></textarea>
2️⃣download— Faylni yuklab olish
Oddiy <a> tegi orqali foydalanuvchiga faylni to‘g‘ridan-to‘g‘ri yuklab olish imkonini beradi.
<a href="file.pdf" download>📥 PDF-ni yuklab olish</a>
👉 Brauzer faylni ochib bermaydi, balki darhol yuklab olishni boshlaydi.
3️⃣poster— Video uchun eskiz rasmi
Video ijro etilmaguncha foydalanuvchiga rasm (poster) ko‘rinadi. Bu sayt dizaynini chiroyli qiladi.
<video controls poster="preview.jpg">
<source src="video.mp4" type="video/mp4">
</video>
👉 Bu foydalanuvchiga oldindan video haqida tasavvur beradi.
4️⃣translate— Tarjimaga cheklov qo‘yish
Sayt avtomatik tarjima qilinayotganda, ayrim matnlarni asl ko‘rinishda qoldirish mumkin.
<p translate="no">OpenAI</p>
👉Bu brend nomlari yoki maxsus terminlar tarjima bo‘lib ketmasligi uchun juda foydali.
5️⃣autocomplete— Avtomatik to‘ldirish
Brauzer foydalanuvchining oldingi yozuvlarini eslab, input maydonini to‘ldirishga yordam beradi.
<form>
<input type="text" name="name" autocomplete="on" placeholder="Ismingiz">
<input type="email" name="email" autocomplete="off" placeholder="Emailingiz">
</form>
✅ Bu foydalanuvchiga vaqtni tejaydi.
❌ Maxfiy joylarda (masalan, kod yoki parol maydoni) uni o‘chirib qo‘yish mumkin.
📌 Ko‘rinib turibdiki, faqatgina HTML atributlari yordamida ham ko‘plab qulayliklarni yaratish mumkin, JavaScript shart emas!
💻@dasturlash_hayoti— Dasturchilar uchun eng kerakli maslahatlar va foydali kontent
Har safar dizayn qilayotganingizda rasm kerak bo‘lib qoladimi?
"Google’dan skachat qilib qo‘ya qolaman" desangiz, natija ko‘pincha qovun tushirish bo‘ladi 😅
Shunaqa paytlar uchun — Ultima yordamga keladi
Bu yerda 750+ ta bepul illustratsiya sizni kutyapti:
— 30 ta bo‘limga bo‘lingan (mavzu, rang va stil bo‘yicha)
— PNG formatda, bemalol ishlatishingiz mumkin
— Shaxsiy loyihalarda mutlaqo bepul
🔗 Link: ultima.storytale.io
👉Download Free tugmasini bossangiz bo‘ldi!
#resurs#dizayn#frontend#dasturlash_hayoti
💻@dasturlash_hayoti— Dizayner yoki dasturchi bo‘lishingizdan qat’i nazar — foydali resurslar va hazillar shu yerda
🔥 Сегодня
🔥 NodeSchool SPb
📅 24 марта / 14:00–18:00 (время МСК) / Санкт-Петербург, ул. Кропоткина д.1, офис «PlayKot»
💵 Бесплатно
📝 Регистрация тут: https://goo.gl/Bwwvyo
Мы решились попробовать новый формат и открываем регистрацию на маленький мартовский нодскул. Форма регистрации — ее заполнять обязательно!
Что за формат? Аудитория поделится на две части? Кроме прохождения воркшопов можно под руководством опытных менторов написать свой блог на nodejs / React / GraphQL.
🔗 Программа: https://goo.gl/MKd3bv
#frontend#backend#react#javascript#СанктПетербург
“Sayt hamma qurilmalarda chiroyli chiqishi kerak!” dedingiz-da…
Natijada 50 ta telefon, 1 ta zaryadlovchi, va 0 ta sabr😂
#DasturlashHayoti#Frontend#Responsive#Hazil
💻@dasturlash_hayoti— dasturchilar uchun eng kerakli maslahatlar, hazillar va foydali kontent!
Tailwind CSS yordamida saytlarni tez va oson yasaymiz!
Windframe — bu Tailwind CSS yordamida veb-saytlar yaratish va ularning prototipini chizishni sezilarli darajada tezlashtiradigan ajoyib vosita.
Asosiy qulayliklari:
🔹 Saytni mutlaqo noldan boshlab yig'ish imkoniyati;
🔹 Tayyor shablonlar (shablonlar) yordamida ishingizni bir necha barobar tezlashtirish;
🔹 Front-end dasturchilar uchun vaqtni tejaydigan qulay muhit.
➡️Vositadan foydalanish (Windframe)
#foydali#tailwind#css#frontend#dasturlash
💻@dasturlash_hayoti— dasturchilar hayoti va IT memlari aralash kanal😉
▶️Ловите ссылку на лекцию про техническое интервью для начинающих front-end разработчиков.
Инженеры DSR провели лекцию для молодых специалистов во время Дня карьеры факультета ПММ Воронежского Государственного Университета.
Дмитрий Севостьянов, выпускник Учебного центра компании, поделился своим опытом, а Мария Тихонова, преподаватель курса JS Bootcamp. Deep Dive into React, раскрыла секреты успешного прохождения технического интервью.
#dsr_training_center#DSR_career#DSRCorporation#DoingSoftwareRight
#javascript#frontend#webdevelopment#frontenddevelopment
https://youtu.be/wshZIZO_g6I
✅Через неделю
✅ JavaScript Meetup SPb
📅 20 марта / 19:00–21:30 (время МСК) / Санкт-Петербург, ул. Заставская 22/2 литер А, БЦ Мегапарк, 7 этаж
💵 Бесплатно
📝 Регистрация тут: https://goo.gl/vnfkt8
Встречаемся и обсуждаем в неформальной обстановке митапа JavaScript и всё, что с ним связано. Приходи и ты ;)
🔗 Программа: https://goo.gl/vnfkt8
#frontend#JavaScript#js#технология2#СанктПетербург
#JavaScript#LocalStorage#FrontEnd#JS#Dasturlash
👨💻 JavaScript’da LocalStorage nima va qanday ishlatiladi?
LocalStorage – bu brauzerda ma’lumotlarni saqlash imkonini beruvchi vosita. Saytni yopib ochganingizda ham ma’lumotlar saqlanib qoladi.
Asosiy xususiyatlari:
🔹Ma’lumot string sifatida saqlanadi
🔹Brauzer yopilsa ham o‘chmaydi.
🔹Faqat hozirgi domen uchun amal qiladi.
Eng ko‘p ishlatiladigan metodlar:
// Ma'lumot qo'shish
localStorage.setItem('ism', 'Jonibek');
// Ma'lumotni olish
let ism = localStorage.getItem('ism');
console.log(ism); // Jonibek
// Ma'lumotni o'chirish
localStorage.removeItem('ism');
// Hammasini tozalash
localStorage.clear();
💡 Agar obyekt yoki massiv saqlash kerak bo‘lsa, JSON.stringify va JSON.parse dan foydalaning:
let user = { name: 'Jonibek', age: 20 };
localStorage.setItem('user', JSON.stringify(user));
let getUser = JSON.parse(localStorage.getItem('user'));
console.log(getUser.name); // Jonibek
💡LocalStorage – bu saytlar uchun “xotira” bo‘lib, foydalanuvchi ma’lumotlarini uzoq muddat saqlash imkonini beradi.
💻@dasturlash_hayoti— Dasturchilar hayoti, motivatsiya va IT olamidagi eng foydali maslahatlar shu yerda!
CSS Gradientlar Kutubxonasi — WebGradients
Saytingiz dizaynini yanada jozibador qilmoqchimisiz? Unda sizga mana bu bepul manba yoqadi!
✅WebGradients.com — bu 180 ta zamonaviy CSS gradient jamlangan katta kutubxona. Ular har qanday veb-loyihada fon (background) sifatida foydalanish uchun juda qulay.
💡Har bir gradient uchun:
— CSS kodini birgina tugma bilan nusxalashingiz mumkin
— Shuningdek, ularni PNG, PSD yoki Sketch formatida yuklab olish imkoniyati bor
💡Foydalanish juda oson:
1. Saytga kiring
2. Yoqqan gradientni tanlang
3. CSS kodini ko‘chirib oling va loyihangizga joylashtiring
🌐 Havola:webgradients.com
Dasturchilar uchun juda foydali resurs — saqlab qo‘ying!
#css#gradient#webdizayn#frontend#dasturlash
💻@dasturlash_hayoti— dasturchilar hayoti va dasturlash olami haqida qiziqarli loyiha!
Dasturni front qismini server qo'yishda dasturchilar orasida bepul bo'lgani uchun Netlify va Vercel serverlaridan foydalanish keng tarqalgan.
Bulardan foydalanganda nested pagelarda yuqoridagi rasmda ko'rsatilgandek error kelib chiqadi.
Buni oldini olish uchun proyektingizga quyidagi kodlarni qo'shishingiz kerak bo'ladi.
Agar proyekt Netlifyda bo'lsa netlify.toml file yaratib ichiga
[[redirects]]
from = "/*"
to="/index.html"
status = 200
larni qo'shish kerak.
Agar Vercelga qo'yilgan bo'lsa unda vercel.json file yaratib ichiga
{
"routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}
larni qo'shish kerak. Shunda nested pagelarda error bermaydi.
#frontend#deploy#avoid_error
☑️@valisherbotirov