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

Как использовать звук на сайтах

Читать 👨‍💻

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

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

Лучшие статьи @free_html_lessons:
1. Как сделать выделение текста другим цветом?
2. @layer css
3. Различные эффекты на чистом css

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

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

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

Задача на JavaScript: Реализация очереди с помощью массива

Читать 👨‍💻

#домашка

Макет для тренировки (EASYearn)
Средняя сложность. Лендинг и личный кабинет

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

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

Различные эффекты на чистом css

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

#практика

image-rendering

Читать 👨‍💻

#css | #полезности

@layer css

Читать 👨‍💻

#css | #теория

Как сделать выделение текста другим цветом?

Одна из интересных функций CSS3, носит имя "::selection", при помощи которой можно заменить стандартный цвет выделения текста в браузере. Поддержка браузерами 83%

::selection {
background: #333; /* Safari */
}
::-moz-selection {
background: #333; /* Firefox */
}

Цвет выделения текста будет серым.

#css | #полезности

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

Лучшие статьи @free_html_lessons:
1. Полезные html трюки
2. Проверка орфографии в браузере
3. Почему стоит перестать использовать Enum в TypeScript?

Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. Начинающий верстальщик
3. разработчик интерфейсов

Лучшие дизайн вакансии @job_webdesign:
1. Графический дизайнер
2. UX дизайнер
3. UX/UI-дизайнер

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

Мемоизация

Реализуйте функцию memoize, которая принимает функцию fn и возвращает её мемоизированную версию.
Мемоизированная функция никогда не должна вызывать fn дважды для одного и того же набора аргументов — она запоминает результат первого вызова и возвращает его из кеша для всех последующих.
Два объекта с разной ссылкой, но одним и тем же набором полей и значений, считаются одинаковыми.

Формат ввода
Вы должны экспортировать функцию memoize, которая в качестве аргумента принимает функцию fn.
Функция fn в качестве аргументов может принимать примитивы (строки, числа, булевы значения), массивы и объекты.
Значения, которые нельзя сериализовать через JSON.stringify (например, функции, undefined, Symbol, BigInt, циклические ссылки и т. п.), передаваться не будут.
Два массива с одинаковыми элементами, расположенными в разном порядке, считаются разными. Например, [1, 2] и [2, 1] — это разные массивы.

Пример:
Ввод

    return a + b;
}

export const callingArguments = [
    [1,2],
    [1,2]
];

Вывод

Result: 3
Invoked: true

memoizedFn(1, 2)
Result: 3
Invoked: false

#домашка

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

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

#макетдлятренировки

Почему стоит перестать использовать Enum в TypeScript?

Если вы откроете крупный коммерческий проект на TypeScript, то с высокой вероятностью найдете там конструкции вроде enum Status { Active, Inactive }. Долгое время это считалось хорошим тоном, но сегодня использование Enums это скорее антипаттерн, от которого индустрия постепенно отказывается.

Почему «перечисления» ломают логику TypeScript и чем их заменить, чтобы код оставался чистым и предсказуемым.

1. Они генерируют лишний код в рантайме (Runtime Overhead)

TypeScript — это надстройка, которая после компиляции полностью исчезает, оставляя чистый JavaScript. Почти все фичи TS (интерфейсы, типы) весят 0 байт в бандле.

Но только не enum. Посмотрим, во что превращается обычный enum после компиляции:

// TypeScript
enum Role {
  Admin,
  User
}

// JavaScript (после компиляции)
var Role;
(function (Role) {
    Role[Role["Admin"] = 0] = "Admin";
    Role[Role["User"] = 1] = "User";
})(Role || (Role = {}));

Вместо удаления типов компилятор создает громоздкую самовызывающуюся функцию и объект с двунаправленным маппингом (`Role.Admin` равен 0, а Role[0] равен `"Admin"`). В коммерческих проектах на сотни тысяч строк кода это раздувает бандл буквально на ровном месте.

2. Дыры в безопасности (Numeric Enums)

Числовые enum'ы в TS удивительно нестрогие. Вы можете передать в функцию число, которого вообще нет в перечислении, и компилятор не выдаст ошибку:

enum Status {
  Pending,
  Success
}

function setStatus(status: Status) { ... }

// Ошибки нет, хотя статуса 99 не существует!
setStatus(99); 

Современная альтернатива: Union Types + as const

Чтобы сохранить все преимущества автодополнения (IntelliSense) и строгости, но не тащить в рантайт лишний JS-код, используют связку обычного объекта и типов:

// 1. Создаем чистый объект с флагом "только для чтения"
const PROJECT_STATUS = {
  PENDING: 'pending',
  SUCCESS: 'success',
  FAILED: 'failed',
} as const;

// 2. Генерируем тип из значений этого объекта
type ProjectStatus = typeof PROJECT_STATUS[keyof typeof PROJECT_STATUS];
// Тип равен: 'pending' | 'success' | 'failed'

// 3. Используем в коде
function updateStatus(status: ProjectStatus) { ... }

updateStatus(PROJECT_STATUS.SUCCESS); // Идеально
updateStatus('unknown'); // Ошибка компиляции

Что мы получаем в итоге?
1. Чистый JS: После компиляции остается только лаконичный плоский объект PROJECT_STATUS. Никаких странных функций.
2. Абсолютная строгость: Передать левое значение или число мимо типа физически невозможно.
3. Удобный рефакторинг: Названия ключей и значений меняются в один клик по всему проекту.

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

Html препроцессор nunjucks

Читать 👨‍💻

#html | #полезности

Проверка орфографии в браузере

Читать 👨‍💻

#полезности

Полезные html трюки

Читать 👨‍💻

#html | #полезности

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

Лучшие статьи @free_html_lessons:
1. TypeScript: почему не стоит злоупотреблять as
2. Кастомные html теги
3. Разбиение строк по разделителю

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

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

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

Разбиение строк по разделителю

Необходимо написать функцию, которая разделит каждую строку в массиве words по строке separator. Необходимо вернуть массив получившихся после разделения строк, исключая пустые строки.

Формат ввода
Вы должны экспортировать функцию splitWordsBySeparator, которая принимает на вход два аргумента:
words — массив строк, которые нужно разбить.
separator — строка-разделитель, может иметь произвольную длину.

Формат вывода
Функция должна возвращать массив строк, который является результатом выполнения «разделения». Он не должен содержать пустых строк.

Пример 1

["one.two.three","four.five","six"]
"."

Вывод
["one","two","three","four","five","six"]

#домашка

Кастомные html теги

Читать статью 👨‍💻

#html | #полезности

Задача: найти все простые числа на промежутке

Например:
console.log(isPrime(10))
Вывод: 2,3,4,5

Пробуйте сами, потом смотрите решение

Решение:
function isPrime(num) {
if (num < 1) return false;
for (let i = 2, max = Math.sqrt(num); i < num; i++) {
if (num % i === 0) {
return false;
}
}
return true;
}

function getPrimes(n) {
let saves = [];
let primes = [];
for (let i = 2; i <= n; i++) {
if (!saves[i]) {
primes.push(i);
for (let j = i * 2; j <= n; j += i) {
saves[j] = true
}
}
}
return primes;
}
console.log(getPrimes(10));


#js