Frontender's notes [ru]

👩‍💻 Топ-10 заданий по написанию кода для собеседования по React.js в 2024 году Эти 10 заданий по созданию кода с примерами решений помогут закрепить основные теоретические понятия React.js и прокачать практические навыки. Изучение лучших сценариев написания кода  —  верный путь к успешному прохождению собеседования. Читать...

​​Бесплатный практический вебинар для всех возрастов: Профессия «Frontend-разработчик». ⏰ Когда: уже 23 мая в 19:00 по мск. Вы узнаете о типичных рабочих задачах программиста и напишете мини-игру, которая работает прямо в браузере. Под капотом немного HTML+CSS и базовые конструкции JS. Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular? 🎁 Всем, кто зарегистрировался — Карта компетенций начинающего Frontend-разработчика, а каждому участнику — Гайд «Как заговорить на сленге IT-специалистов». Реклама. ООО "ХЕКСЛЕТ РУС". ИНН 7325174845. erid:LjN8KYEg6

👩‍💻 Поросячья латынь Поросячья латынь, также свинский латинский — «тайный язык», представляющий собой зашифрованный английский. Чаще всего используется в шутливом или полушутливом контексте. Напишите функцию, которая принимает строку и перемещает первую букву каждого слова в конец, а затем добавляет «ay» в конец слова. Пример кода:

pigIt('Pig latin is cool') - вернёт 'igPay atinlay siay oolcay'
pigIt('This is my string') - вернёт 'hisTay siay ymay tringsay'

Решение задачи🔽

function pigIt(str) { return str .split(' ') .map(word => word.substr(1) + word.charAt(0) + 'ay') .join(' '); } console.log(pigIt('Pig latin is cool')); // 'igPay atinlay siay oolcay' console.log(pigIt('This is my string')); // 'hisTay siay ymay tringsay'

🖥 Дайджест самых интересных публикаций за последние дни: • Что такое WAF и как с ним работать? Показываем на примере уязвимого веб-приложения • Ищем баги в коде браузера при помощи фаззинга • Анимации CSS, основанные на времени

Frontend meetup 1. Хоп, хлоп, и MVP готов — Дмитрий Карловский, HyOO Нарисуем полноценный фронтенд без чат-ботов. Поднимем базу данных без сервера. Задеплоим всё на статический сервер без боли. И будем наслаждаться результатом без тормозов. 2. Причины деградации перформанса фронтенда — Денис Басковский, МТС Диджитал Почему скорость железа не успевает за веб-приложениями. Причины большого количества JS-кода на сайте. SPA по 20мб уже действительность. Инструменты куда мы смотрим чтобы найти про лесы большого размера сайта. Графики скорости и восприятие клиентов. Почему скорость браузерной страницы лагает на 4090ti, а Cyberpunk идет на максималках. 3. Serverless - уже можно? — Андрей Лаврентьев, NDA Опыт запуска проекта на cloudflare pages и трудности, с которыми пришлось столкнуться на каждом шаге. Модератор Григорий Петров, Devrel, Evrone Эксперт Глеб Михеев, Руководитель ПК, FrontendConf ➖➖➖ 🗓 22 мая, начало в 19:00 мск, Среда 🌐 ОНЛАЙН ✅ Регистрация на мероприятие Реклама, ООО "Эвроне.ру", ИНН 3663057399

👩‍💻 Метод "at()" в массивах At() метод с положительным числом работает так же, как и [ ], но передача отрицательного числа в этот метод позволяет нам получать значения с конца.

Вместо того, чтобы писать:

const arr = [1,2,3,4]
arr[arr.length - 2] // 3
arr.slice(-2)[0]    // 3

const str = "1234"
str[str.length - 2] // '3'
str.slice(-2)[0]    // '3'

Мы можем писать:

const arr = [1,2,3,4]
arr.at(-2) // 3

const str = "1234"
str.at(-2) // '3'

👩‍💻 Star trails Сцена с анимированным следом за курсором в виде звезд. Сделана на Pug, SCSS и JavaScript. #codepen

👩‍💻 type предпочтительнее interface В TypeScript type и interface очень похожие конструкции, когда они используются для типизации объектов. Хотя это может показаться спорным, моя рекомендация последовательно использовать type в большинстве случаев, а interface использовать только в том случае, если верно одно из следующих условий: • Вы хотите воспользоваться функцией «слияния» interface. • У вас Объектно-ориентированный код стиля, включающий иерархию классов/интерфейсов. В противном случае постоянное использование type приводит к более согласованному коду.

Пример:

// Использование type
const movePoint = (point: Point, dx: number, dy: number): Point => {
  return { x: point.x + dx, y: point.y + dy };
};

interface IPoint {
  x: number;
  y: number;
}

// Расширение интерфейса (случай "слияния")
interface IPoint {
  z: number;
}

// Пример объекта соответствующего интерфейсу с дополнительным свойством
const point3D: IPoint = { x: 1, y: 2, z: 3 };

🛠 17 суперинструментов для разработки фронтенда Подборка опенсорсных библиотек на все случаи жизни – от создания графиков и диаграмм до масштабирования проекта с помощью распределенного выполнения задач и кэширования вычислений. Читать...

👩‍💻 Собственные каскадные слои Чтобы понять, какой стиль применить к элементу, браузер использует принцип каскада. Когда специфичность (вес селектора) равна, то используется последнее правило:

.card {
 background-color: rgb(175, 238, 238);
}
.card {
 background-color: rgb(52, 0, 148);
}

В этом коде к карточке будет применён цвет фона rgb(52, 0, 148), поскольку он последний Иногда нужно переопределить стили, и для этого используют модификатор !important. Он позволяет применить значение свойства вопреки обычной специфичности и каскаду.

.card {
 background-color: rgb(175, 238, 238) !important;
}
.card {
 background-color: rgb(52, 0, 148);
}

Теперь же порядок каскада можно определить через правило @layer. И разработчик в коде может контролировать приоритет стиля. В этом случае пишем ключевое слово @layer, указываем имена каскадных слоёв, которые хотим определить, и пишем правило в {}.

@layer имя-слоя {правило}

Порядок написания слоёв в заголовке запроса определяет их приоритет. В имя слоя мы оборачиваем нужные стили.

@layer dark, light;

@layer light {
  .card {
    width: 500px;
    height: 150px;
    background-color: paleturquoise;
    text-wrap: balance;
  }
}
@layer dark {
  .card {
    background-color: rgb(148, 59, 0);
  }
}

• Мы вызвали правило @layer. • Прописали названия слоёв и порядок их следования. Последний слой — приоритетный. • Обернули в слои правила для стилей.

В реальной разработке @layer может использоваться при работе с легаси-проектами, когда есть доступ к CSS. Можно оборачивать старые стили в слой legacy, а новые в new и явно задавать порядок приоритета.