Вёрстка сайтов | HTML, CSS, JS

Анимация скролла с Grid

Смотреть на codepen 👨‍💻

#практика

Яндекс вебмастер. Зачем нужен?

Читать 👨‍💻

#полезности

For...in

Читать 👨‍💻

#js | #теория

Что такое type и зачем он нужен

type это способ задать тип данных в TypeScript.
Если говорить просто, type позволяет дать имя любому типу: объекту, строке, числу, объединению типов и даже функции.

Начнём с самого базового примера:

  name: string
  isAdmin: boolean
}

Теперь этот тип можно использовать в любом месте кода:
```const user: User = {
name: 'Tigran',
isAdmin: false
}

По сути, type работает похоже на interface, когда речь идёт об объектах.
Но у type есть возможности, которых нет у interface.
1. Можно создавать объединения типов (union types)

type Status = 'loading' | 'success' | 'error'

Теперь переменная может принимать только одно из этих значений:

let status: Status

status = 'loading' // OK
status = 'done' // Ошибка

Это очень удобно для состояний, ролей, типов уведомлений и других фиксированных значений.
2. Можно объединять типы

type User = {
name: string
}

type Admin = {
permissions: string[]
}

type AdminUser = User & Admin

Здесь используется оператор & — он объединяет типы.

const admin: AdminUser = {
name: 'Tigran',
permissions: ['read', 'write']
}

3. Можно описывать примитивные типы

type ID = string | number

Теперь ID может быть строкой или числом:

let userId: ID

userId = 123
userId = 'abc-123'

4. Можно описывать функции

type Calculate = (a: number, b: number) => number

И использовать:

const sum: Calculate = (a, b) => {
return a + b
}

Когда использовать type:
• когда нужны union или intersection типы
• когда нужно дать имя примитивному типу
• когда описываешь сложные типы данных
• когда работаешь с утилитами типов (Partial, Pick, Omit и т.д.)

Важно понимать:
как и interface, type существует только во время разработки.
В итоговый JavaScript он не попадает.

Частый вопрос:
в чём разница между type и interface?

Коротко:
• interface лучше подходит для описания объектов и их расширения
• type более гибкий и подходит для сложных типов

На практике в большинстве проектов используют оба.

Для закрепления:
попробуй описать тип Theme, который может принимать только значения 'light' или 'dark'.

#ts

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Открытие окон и методы window
2. Как корректно измерять производительность JavaScript-кода
3. TypeScript: что такое interface и зачем он нужен

Лучшие фронтенд вакансии @job_webdev:
1. Старший разработчик пользовательских интерфейсов
2. Стажер-frontend разработчик
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. UX/UI-дизайнер
2. Дизайнер
3. Web-дизайнер (Junior+/Middle)

#лучшеезанеделю

Задача: Сделать объект строго
типизированным по ключам

Есть объект с переводами:

  en: 'Hello',
  ru: 'Привет',
  hy: 'Բարև'
}

Нужно создать тип Language, который будет автоматически содержать только ключи этого объекта.

То есть:

type Language = ??? // 'en' | 'ru' | 'hy'

И затем использовать его:

  return translations[lang]
}
translate('en') // OK
translate('de') // Ошибка

Условие:
Тип должен обновляться автоматически, если добавить новый язык в объект.

Подсказка:
используй keyof

#домашка

Макет для тренировки (ломать не строить)

Перейти к макету 🧑‍💻

#практика | #макет

Скролл с выделением слова

Смотреть на codepen 👨‍💻

#пратика

TypeScript: что такое interface и зачем он нужен

Когда начинаешь изучать TypeScript, одним из первых важных понятий становится interface.

interface нужен для описания структуры объекта. То есть он говорит не о том, какие именно данные лежат внутри сейчас, а о том, какой формы эти данные должны быть.

Простой пример:

  name: string
  age: number
  isAdmin: boolean
}

Теперь если создать объект пользователя, TypeScript будет проверять, соответствует ли он этой структуре:

  name: 'Tigran',
  isAdmin: true
}

Если какого-то свойства не хватит, или тип будет неправильным, TypeScript сразу покажет ошибку.

Почему это удобно:
1. Код становится понятнее
Когда видишь User, уже не нужно гадать, какие поля должны быть у объекта.
2. Меньше ошибок
TypeScript не даст случайно передать строку вместо числа или забыть важное поле.
3. Удобно типизировать параметры функций

  name: string
  age: number
}

function printUser(user: User) {
  console.log(`${user.name}, ${user.age}`)
}

4. Можно описывать не только объекты, но и методы

  brand: string
  year: number
  startEngine: () => void
}

Также в interface можно делать необязательные свойства через ?
```interface Product {
  title: string
  price: number
  discount?: number
}

Это значит, что discount может быть, а может и не быть.

Важно понимать:
interface не создаёт объект и не добавляет логику в JavaScript. Он нужен только для проверки типов во время разработки.

Когда использовать interface:
когда нужно описать структуру объекта, который будет использоваться в разных местах проекта: пользователи, товары, ответы от API, параметры функций, props компонентов и так далее.

Итог:
interface в TypeScript нужен, чтобы задавать понятную и строгую форму данных. Это делает код чище, безопаснее и удобнее в поддержке.

#ts

Как корректно измерять производительность JavaScript-кода

При оценке скорости выполнения кода часто допускается одна и та же ошибка — измерение времени одной операции:

const start = performance.now();

"the sky is blue".split(' ').reverse().join(' ');

const end = performance.now();
console.log('Время выполнения =', end - start);

Такой подход даёт неточный и практически бесполезный результат. Разберёмся, почему.

Во-первых, операция слишком мала. Современные JavaScript-движки выполняют подобные выражения за доли микросекунд, и на итоговое значение начинают влиять посторонние факторы: планировщик задач, загрузка процессора, работа других вкладок.

Во-вторых, влияет JIT-компиляция. Движки, такие как V8 JavaScript engine, сначала исполняют код в базовом режиме, а затем оптимизируют его. Поэтому первый запуск не отражает реальную производительность.

В-третьих, возможны оптимизации со стороны движка: повторяющиеся вычисления могут кэшироваться или упрощаться, что искажает измерение.

Как измерять корректно
1. Выполняйте операцию многократно

const ITERATIONS = 1_000_000;

const start = performance.now();

for (let i = 0; i < ITERATIONS; i++) {
  "the sky is blue".split(' ').reverse().join(' ');
}

const end = performance.now();

console.log('Среднее время:', (end - start) / ITERATIONS);

Это позволяет получить усреднённое значение и снизить влияние случайных факторов.

2. Используйте «прогрев» (warm-up)

for (let i = 0; i < 10000; i++) {
  "test string".split(' ').reverse().join(' ');
}

Перед измерением стоит выполнить код несколько тысяч раз, чтобы движок успел применить оптимизации.

3. Сравнивайте функции изолированно

Каждый тест должен выполняться отдельно, в одинаковых условиях. Нельзя делать выводы, измеряя несколько вариантов подряд без контроля среды.

4. Используйте специализированные инструменты

Для более точного анализа подойдут:

* performance.now()
* console.time()
* библиотеки вроде Benchmark.js

#js

Открытие окон и методы window

Читать 👨‍💻

#js | #теория

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Как сделать таймер обратного отсчета на js?
2. Типы шрифтов
3. Как создать простую галерею изображений с увеличением по клику

Лучшие фронтенд вакансии @job_webdev:
1. Full-stack web-разработчик
2. Frontend Engineer
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Стажёр-дизайнер продукта
2. Web-дизайнер
3. Web-дизайнер

#лучшеезанеделю

Задача: Реализовать функцию для "сворачивания" массива

Представьте, что вам нужно реализовать функцию, которая "сворачивает" массив, объединяя элементы с одинаковыми значениями и подсчитывая их количество. На вход подается массив значений, а на выходе ожидается объект, где ключами будут уникальные значения массива, а значениями — количество их вхождений.

Пример:

const input = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const result = countOccurrences(input);
console.log(result);
// Ожидаемый вывод:
// {
//   apple: 3,
//   banana: 2,
//   orange: 1
// }

Условия:
Функция должна корректно работать с массивами любых типов данных, например, строк, чисел, или даже объектов, если в них используется одинаковая ссылка.
Постарайтесь реализовать решение с минимальным количеством проходов по массиву.

Вопросы для обсуждения на собеседовании:
Как функция будет обрабатывать массив с большим количеством элементов?
Как можно оптимизировать использование памяти при работе с крупными массивами?
Как можно адаптировать функцию для обработки массивов, содержащих объекты с одинаковыми значениями, но разными ссылками?

#домашка

Макет для тренировки (new doors)

Перейти к макету 🧑‍💻

#практика | #макет

Как создать простую галерею изображений с увеличением по клику

Читать 👨‍💻

#какэтосделать

Типы шрифтов

Читать 👨‍💻

#полезнаястатья

CSS text-wrap:balance

Читать 👨‍💻

#css | #теория

Как сделать таймер обратного отсчета на js?

Читать 👨‍💻

#какэтосделать

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Как улучшить UX c помощью микровзаимодействий?
2. Графика на Canvas для начинающих
3. 5 Советов для Ускорения HTML-верстки

Лучшие фронтенд вакансии @job_webdev:
1. Frontend Developer (Vue3)
2. HTML-верстальщик
3. JavaScript Junior Сценарист/Разработчик

Лучшие дизайн вакансии @job_webdesign:
1. Дизайнер инфографики для маркетплейсов
2. Web-дизайнер
3. UX/UI-дизайнер

#лучшеезанеделю