Берлога программиста | Веб и не только

Expanding corners button 🔗 Код: Codepen Берлога программиста | Чат

Custom Language Select 🔗 Код: Codepen 👉 @trends_frontend | #анимация

TypeScript - введение (Часть 1) Поскольку далее я буду объяснять React (да и почти все вообще) с примерами кода на typescript хотелось бы чтобы все уже были в теме что это за зверь такой. Когда уже привык пользоваться каким-то инструментом самое сложное это рассказать про азы его использования, поскольку ты уже давно его применяешь и не помнишь как начинал. Давайте пробовать! Если Вы уже пишете на JavaScript то наверняка приходилось сталкиваться с трудноотлавливаемыми ошибками кода по-типу того что undefined is not a function или типо того. Чтобы эту проблему решать Вам четко надо понимать какой тип аргуметов той или иной функции, поля и так далее. Короче чтобы понимать что есть что. Начнем с простейшего примера. Большую роль играет удобство и скорость разработки: допустим создаете переменную которая изначально null

let x = null;

Возможно вы хотите потом присвоить сюда какой-то объект / любой примитивный тип данных и т.п. - из примера не ясно, а название переменной оставляет нас только гадать на кофейной гуще за что она отвечает

let x: string | null = null;

А вот так мы описали тип этой переменной - теперь если вы будете присваивать сюда что-то другое (случайно или специально), то линтер или компиллятор (который на деле транспиллятор, но об этом позднее) отправит Вас в долгое увлекательное эротическое путешествие:

x = 12;

Затем при транспилляции:

index.ts:2:1 - error TS2322: Type 'number' is not assignable to type 'string'.

2 x = 12;

Ладно, пример выше банальный, но как часто Вам доводилось писать user.nmae вместо user.name - ошибка в именах поля это просто классика и без контроля не отловить такую ошибку. Вот таким и занят наш дорогой друг TypeScript. ⚠️ Примеры типичных ошибок: 1️⃣ Ошибки типов данных

function double(num) {
  return num * 2;
}

double("5"); // => "55", а не 10 😬

TypeScript бы сказал:

function double(num: number) { ... }
// ❌ Ошибка: аргумент должен быть числом

2️⃣ Опечатки в свойствах объектов

const user = { name: "Alex" };
console.log(user.nmae); // undefined, без предупреждения

TS предупредит:

console.log(user.nmae);
// ❌ Ошибка: свойства "nmae" не существует

3️⃣ Неожиданные undefined или null

function greet(user) {
  return "Hi " + user.name; // 💥 если user = undefined
}

TypeScript заставит явно описать возможные варианты:

function greet(user?: { name: string }) {
  if (!user) return "Hi, guest!";
  return "Hi " + user.name;
}

4️⃣ Ошибки при работе с API

fetch("/api/user")
  .then(res => res.json())
  .then(data => console.log(data.namme)); // опечатка — и тишина

С TS:

interface User { name: string; }
const data: User = await res.json();
// ❌ Ошибка: нет свойства "namme"

5️⃣ Ошибки при передаче параметров

function sum(a, b) { return a + b; }
sum(1);        // NaN
sum("1", "2"); // "12"

TypeScript не позволит вызвать функцию неправильно:

function sum(a: number, b: number): number { ... }
// ❌ Ошибка: не хватает аргумента

В следующей серии: ➖ Как начать им пользоваться ➖ Первые простые примеры ➖ Почему транспиллятор, а не компиллятор Понравилось? Ставь 🔥 Берлога программиста | Чат

Reveal Card Content on Hover Реализовано с помощью HTML и SCSS 🔗 Код: Codepen 👉 @trends_frontend | #эффект

О чем поговорим? Итак, спасибо всем кто участвовал в опросах выше, я думал о чем писать и в итоге пришел к тому что пережевывать синтаксис жабаскрипта или какие-то уже совсем банальные вещи в миллион пятьсот пятьдесят пятый раз мне просто скучно. Нет, конечно иногда к этому надо возвращаться ибо даже самый сеньор-помидор икогда может забыть какие-то банальные вещи и это нормально. Есть еще много всяких точечных приколов про которые тоже дажеко не все знают. Мало кто пишет про мидловые или Junior+ вещи и потому я решил выделить вот такие направления в нашей работе: ➖Реакт - освоим не только базу, но и про более продвинутые вещи ➖TypeScript - сейчас это стандарт индустрии и без него никуда ➖WebGL - давно хотел поглубже в этом разобраться и хочу параллельно писать об этом вам ➖Стильные / модные / прикольные вещи - без этого никак Вот такой сейчас план, так что, господа, подбодрите меня реакциями под этим постом чтобы я поскорее начал писать

🔥️️️️ - ставьте под постом если понравилось

Берлога программиста | Чат

Коллеги, сделал чат для нашего с вами общения - заходите https://t.me/+36NOAKnCVuc2ZDNi

Веб-компонент: Доступная анимированная кнопка прогресса 🔗 Код: Codepen 👉 @trends_frontend | #эффект

Hypnotic Spinners 🔗 Код: Codepen 👉 @trends_frontend | #эффект

Pill styled radio buttons | Fully scaleable Эффект нажатия на переключатели в виде расширения границы. Реализовано с помощью CSS. 🔗 Код: Codepen 👉 @trends_frontend | #эффект

Burger menu animation Семь различных вариантов наведения на бургер-кнопки. Реализовано с помощью SCSS. 🔗 Код: Codepen 👉 @trends_frontend | #эффект

css preloader Ожидание загрузки в виде прыгающих частиц, которые меняют свой цвет при столкновении. Реализовано с помощью CSS. 🔗 Код: Codepen 👉 @trends_frontend | #эффект

pure css menu animation Перемещение точки над каждой вкладкой меню при наведении курсора мыши. Реализовано с помощью CSS. 🔗 Код: Codepen 👉 @trends_frontend | #эффект

Converting a checkbox when running tasks Преобразование флажка при выполнении задач по аналогии с заметками. Реализовано с помощью CSS. 🔗 Код: Codepen 👉 @trends_frontend | #эффект

Neon Clock (CSS) Неоновые часы с эффектом перемещения. Реализовано с помощью SCSS и JavaScript. 🔗 Код: Codepen 👉 @trends_frontend | #эффект

Hover Card PopOut Всплывающий 3D-эффект наведения на карточки. Реализовано с помощью CSS. 🔗 Код: Codepen 👉 @trends_frontend | #эффект

🔼Голосования выше помогут мне создать оптимальный для всех контент