🎵Музыкальный клип на CSS…?
Бэн Эванс — CSS инженер — сделал полноценное музыкальное видео с помощью CSS. Никаких картинок и JS, только разметка и пара сотен селекторов. Что? Да! Ну, правда не без SCSS конечно, но это уже детали.
Смотрим тут, и там же можно посмотреть исходники. А больше таких демок можно увидеть в его портфолио.
Тот неловкий момент, когда ты два дня настраивал простенький параллакс эффект на лендинге, а кто-то делает 3-х минутные ролики на чистом CSS.
@yastaraus • #webdev#css
🦕Вышел Deno 2.0
Причесали старые фичи, расширили совместимость с Nodejs, анонсировали долгосрочную поддержку разных версий, снова похвастались нативной поддержкой Typescript и встроенными линтерами. Ах да, и обновили логотип (старый лучше). В общем вроде много чего интересного, почитать можно у них в блоге.
Но причина по которой я пишу это сообщение — часовая(!) видео-презентация. Там Райан рассказывает про Deno, про новые фичи, про JSR, отвечает в прямом эфире на вопросы и бла-бла-бла.
Короче, если вам всё это не интересно, то посмотрите хотя бы первые 2-3 минуты презентации. Там Райан неловко ходит по офису под модный бит, жалуется на Nodejs, показывает отсылки к мемам и трогает полуголого азиата. Отличная смесь легкого кринжа, иронии и Apple-лоска. Кажется, такими и должны быть современные технологические презентации. Ставлю маркетологам 5 с плюсом.
@yastaraus • #webdev#deno
Вводный урок по TypeScript🖼️
Посмотрел тут на днях действительно классный урок по TypeScript от Боба Зирол-а. В двухчасовом ролике рассказывается что такое этот ваш TS, для чего он нужен и как его готовить. Помимо самой-самой базы, Боб затрагивает еще утилитарные типы, дженерики и постоянно показывает какие-то нюансы при работе с TS.
А что бы вы не заснули во время этого урока (как я несколько раз) на протяжении всего видео автор периодически останавливает рассказ и дает небольшие задачки на закрепление лекционной части.
Короче, правда неплохой урок. Вообще, кажется, что это первый урок, где я наконец-то увидел действительно наглядные use-кейсы применения TS.
@yastaraus • #webdev#typescript
A collection of free single-purpose online tools for web developers.
https://tiny-helpers.dev/
Follow @dragonmachinedreams
#programming#webdev#javascript
#hosting#free#webdev
2025-yilda eng ishonchli 7 ta bepul hosting platformasi
Agar siz o‘z veb-saytingizni yoki portfolio loyihangizni bepul internetga joylashtirmoqchi bo‘lsangiz — mana siz uchun eng yaxshi 7ta platforma!
1️⃣Netlify — https://www.netlify.com
◾️ Frontend va statik saytlar uchun eng mashhur platforma.
◾️ GitHub bilan avtomatik deploy imkoniyati.
✅ Ishonchli, tez va doimiy bepul.
2️⃣Vercel — https://vercel.com
◾️Next.js, React, Vue kabi frameworklar uchun juda qulay.
◾️ Serverless funksiyalarni qo‘llab-quvvatlaydi.
✅ Tezlik va ishonchlilik bo‘yicha eng yaxshi variantlardan biri.
3️⃣GitHubPages — https://pages.github.com
◾️ Statik HTML, CSS, JS loyihalar uchun ideal.
◾️ To‘liq bepul va custom domen bilan ishlaydi.
✅ Portfolio va shaxsiy saytlar uchun a’lo tanlov.
4️⃣Render — https://render.com
◾️ Backend (Node, Python, Go) va front-end loyihalar uchun.
◾️ Bepul reja mavjud, lekin 15 daqiqadan so‘ng “sleep” rejimga o‘tadi.
⚙️ Test loyihalar uchun qulay.
5️⃣000webhost — https://www.000webhost.com
◾️PHP va MySQL qo‘llab-quvvatlaydi.
◾️ CPanel orqali boshqaruv.
⚠️ Ba’zida sayt qisqa muddat “sleep” rejimiga o‘tadi, lekin o‘rganish uchun zo‘r.
6️⃣InfinityFree — https://www.infinityfree.com
◾️ Reklamasiz, PHP va MySQL bilan to‘liq bepul hosting.
◾️ Domenni ulash oson, SSL bepul.
✅ Ishonchli va uzoq muddatli foydalanish uchun mos.
7️⃣Surge — https://surge.sh
◾️ Statik saytlarni terminal orqali bir daqiqada joylashtirish imkonini beradi.
◾️ Minimal, soddaligi bilan mashhur.
✅ Frontend dev’lar uchun juda qulay.
Bu hostinglar yordamida siz o‘zingiz yaratgan saytlarni bepul internetga joylashtirishingiz va haqiqiy domen bilan ulashingiz mumkin!
💻@dasturlash_hayoti — dasturchilar uchun eng kerakli maslahatlar, hazillar va foydali kontent!
#JavaScript#frontend#webdev#boshlovchilar
👨💻JavaScript qayerda ishlatiladi?
1️⃣Interaktiv elementlar (real kod bilan)
JavaScript saytni jonlantiradi. Foydalanuvchi biror ish qilsa — JavaScript javob qaytaradi.
🔘 Tugma bosilganda nima bo‘ladi?
<button onclick="salom()">Bos</button>
<script>
function salom() {
alert("Salom! Tugma bosildi 😊");
}
</script>
📝Forma tekshirish (validation)
<input type="text" id="email" placeholder="Email">
<button onclick="tekshir()">Yuborish</button>
<script>
function tekshir() {
let email = document.getElementById("email").value;
if (email === "") {
alert("Emailni kiriting!");
}
}
</script>
👉 Email bo‘sh bo‘lsa → ogohlantirish chiqadi
🪟Modal / yashirin blok ochish
<button onclick="och()">Batafsil</button>
<p id="text" style="display:none;">Qo‘shimcha ma’lumot</p>
<script>
function och() {
document.getElementById("text").style.display = "block";
}
</script>
👉 Tugma bosildi → yashirin matn ochildi
JavaScript bo‘lmasa:
❌ tugma ishlamaydi
❌ forma tekshirilmaydi
❌ sayt jonsiz bo‘ladi
JavaScript bilan esa:
✅ sayt javob qaytaradi
✅ foydalanuvchi bilan muloqot bo‘ladi
➡️Keyingi post: JavaScript + API (serverdan ma’lumot olish)
💻@dasturlash_hayoti— dasturchilar hayoti va IT memlari aralash kanal😉
Diqqat, dasturchilar!
Keyingi postlarda sizga 👨💻JavaScript real loyihalarda qayerda ishlatiladi degan mini-postlar seriyasini tayyorladik.
👇 Shu postlarni kutyapsizmi?
👍 Ha, men kutyapman!
😁 Yo‘q, lekin qiziqaman
♻️ Izohlarda belgilang va biz siz uchun hamma postlarni ketma-ket chiqaramiz!
#JavaScript#webdev#poll#dasturlash_hayoti
#Laravel#backend#webdev#dasturlash_hayoti
Laravel nima uchun qulay?
Laravel — backend’ni tez va tartibli qilish uchun yaratilgan framework.
Quyida nega ko‘pchilik Laravel’ni tanlashini oddiy tilda tushuntiramiz 👇
1️⃣MVC arxitektura
⏺️Model — ma’lumotlar bilan ishlaydi
⏺️View — foydalanuvchi ko‘radigan qism
⏺️Controller — logika
📌 Kod aralashib ketmaydi, tushunish oson bo‘ladi.
2️⃣Tayyor Auth (login/register)
⏺️Login
⏺️Ro‘yxatdan o‘tish
⏺️Parolni tiklash
📌 Noldan yozishga hojat yo‘q — vaqt tejaladi.
3️⃣Xavfsizlik
⏺️SQL Injection’dan himoya
⏺️CSRF himoyasi
⏺️XSS’ga qarshi choralar
📌 Xavfsizlik Laravel’da avtomatik ko‘p joyda bor.
4️⃣Toza va o‘qilishi oson kod
⏺️Aniq struktura
⏺️Naming qoidalari
⏺️Clean code’ga mos
📌 Bir necha oy o‘tsa ham kodni tushunish mumkin.
5️⃣ Tez ishlab chiqish
⏺️Migration
⏺️Seeder
⏺️Artisan komandalar
📌 Kam vaqt — katta natija.
Laravel:
☑️ Boshlovchilar uchun qulay
☑️ Professional loyihalar uchun kuchli
☑️ Katta jamoalar uchun mos
📌 Backend uchun eng zo‘r tanlovlardan biri.
💻@dasturlash_hayoti— dasturchilar hayoti va IT memlari aralash kanal😉
🗓 VS Code: Ishingizni 10 karra tezlashtiring!
Sichqonchani unuting, asosiy e'tiborni klaviaturaga qarating. Dasturchilar uchun eng muhim VS Code qisqartma tugmalari toʻplami.
Rasmlarda:
1️⃣ Umumiy tahrirlash va Navigatsiya
2️⃣ Kod tahrirlash va Oyna boshqaruvi
3️⃣ Debug qilish va Fayllarni boshqarish
📌Yo'qotib qo'ymaslik uchun saqlab oling va do'stlarga ulashing!
@dasturlash_hayoti | #VSCode#Dasturlash#CodingTips#WebDev
💻@dasturlash_hayoti— dasturchilar hayoti va IT memlari aralash kanal😉
#JavaScript#API#RealProject#webdev#dasturlash_hayoti
👨💻 JavaScript + API: Real loyiha
Xabarlarni ro‘yxat qilib chiqarish + avtomatik yangilanish
Bu bosqichda:
- har bir xabar alohida chiqadi
- sahifa refreshsiz yangilanadi
- real chatlarga yana yaqinlashamiz
1️⃣HTML — xabar yozish va chat oynasi
<!-- Xabar yozish -->
<input type="text" id="message" placeholder="Xabar yozing">
<button onclick="sendMessage()">Yuborish</button>
<!-- Chat ro'yxati -->
<ul id="chat"></ul>
ul — xabarlar ro‘yxat bo‘lib chiqishi uchun
2️⃣ JavaScript — xabar yuborish va ro‘yxatga qo‘shish
<script>
function sendMessage() {
// Inputni chaqiramiz
let input = document.getElementById("message");
// Inputdagi qiymat
let msg = input.value;
// Bo‘sh xabar yuborilmasligi uchun
if (msg === "") return;
// Serverga xabar yuborish
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
body: JSON.stringify({ text: msg }),
headers: {
"Content-type": "application/json"
}
})
.then(res => res.json())
.then(data => {
// Xabarni chat ro‘yxatiga qo‘shamiz
addMessage(data.text);
// Inputni tozalaymiz
input.value = "";
});
}
</script>
3️⃣JavaScript — xabarni ro‘yxatga qo‘shish
<script>
function addMessage(text) {
// Chat ro‘yxatini chaqiramiz
let chat = document.getElementById("chat");
// Yangi xabar uchun <li> yaratamiz
let li = document.createElement("li");
// Xabar matnini joylaymiz
li.innerText = text;
// Xabarni chatga qo‘shamiz
chat.appendChild(li);
}
</script>
Endi:
- har bir xabar pastga qo‘shilib boradi
- eski xabarlar yo‘qolmaydi
Telegram, kommentlar, chatlar — barchasi shu mantiqda ishlaydi.
☑️Natija
⏺️JavaScript → foydalanuvchi bilan ishlaydi
⏺️API → server bilan gaplashadi
⏺️Sayt → jonli bo‘ladi
➡️Keyingi post:
Enter bosilganda yuborish + real-time’ga yana yaqinlashtiramiz 🔥
💻@dasturlash_hayoti— dasturchilar hayoti va IT memlari aralash kanal😉
#JavaScript#API#RealProject#webdev#dasturlash_hayoti
➡️Keyingi postda nima bo‘ladi?
Keyingi darsda:
⏺️ xabarlarni bitta emas, ro‘yxat qilib chiqaramiz
⏺️ yangi xabar kelganda sahifa avtomatik yangilanadi
Ya’ni:
❌ refresh yo‘q
☑️ real-time ishlash
Post JavaScript + API asosida, to‘liq real loyiha ko‘rinishida bo‘ladi.
👉O‘tkazib yubormang!
💻@dasturlash_hayoti— dasturchilar hayoti va IT memlari aralash kanal😉
#JavaScript#API#RealProject#webdev#dasturlash_hayoti
⚠️⚠️⚠️
Diqqat, JavaScript o‘rganuvchilar!
Keyingi post:
❌ faqat nazariya emas
☑️JavaScript + API orqali real loyiha bo‘ladi
Ya’ni:
⏺️serverdan ma’lumot olish
⏺️sahifani yangilamasdan ishlash
⏺️hammasi real kod bilan💻
Shunaqa amaliy post kerakmi?
👍 Ha, JS + API bilan
🔥 Yo'q, shart emas
Qiziqish bo‘lsa — bosqichma-bosqich tushuntirib chiqaramiz