Функцииbtoa()иatob()— встроенные средства JavaScript для кодирования и декодирования строк в формате base64.
Base64 — это не шифрование и не способ защитить данные, а способ представить бинарную информацию в текстовом виде. В статье разбираем, как это работает в JavaScript:
btoa() и atob() кодируют и декодируют строки, но только для байтовых строк (ASCII/Latin-1). При попытке закодировать Unicode-текст браузер бросит ошибку — показываем, как обойти это через TextEncoder и TextDecoder. Это важно, если вы работаете с emoji, кириллицей или API с многоязычными данными. #js #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
👍4❤🔥3❤2
Операторы ?? и ??= — удобные инструменты для работы с null и undefined в JavaScript. Они делают код короче, понятнее и безопаснее, особенно при задании значений по умолчанию или аккуратном обновлении переменных.
В статье разбираем, как
?? отличается от ||: если || подставляет значение по умолчанию при любом «ложном» значении (0, '', false), то ?? реагирует только на реальные отсутствия данных — null и undefined. Показываем практику: дефолты для настроек, аккуратная инициализация свойств с ??= — значение задаётся только когда данных нет. #js #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤🔥3👍3
API Intl.RelativeTimeFormat — инструмент для отображения относительного времени в локализованном виде. Он прост в использовании, поддерживает множество языков и подходит для интерфейсов, где важна понятность и культурная адаптация.
В статье разбираем, как выводить относительное время естественным языком: «вчера», «через 2 дня», «3 недели назад». Всё это без сторонних библиотек: создаём
new Intl.RelativeTimeFormat('ru', { numeric: 'auto' }) и передаём число и единицу времени (day, hour, month). API автоматически подстраивается под выбранную локаль и грамматические формы; саму разницу во времени считаем отдельно. #js #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
👍11
UUID в фронтенде нужны куда чаще, чем кажется: для временных черновиков, событий аналитики, имён файлов и стабильных ключей в списках. Universally Unique Identifier помогает надёжно различать объекты даже в офлайн-режиме и распределённых системах.
В статье разбираем, как по-взрослому генерировать UUID на чистом JavaScript: используем
crypto.randomUUID() и безопасные фолбэки для разных сред, показываем, почему решения на Math.random() опасны, разбираем типичные ошибки и приводим живые примеры из реальных интерфейсов. #js #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
В CSS есть константа infinity — короткая запись для «максимально возможного значения» в конкретном контексте. В какое число она превращается, зависит от браузера, операционной системы и того, к какому CSS-свойству вы её применяете. Поддержка в порядке, и иногда такая запись делает стили чуть понятнее — без магических чисел. Но использовать её вовсе не обязательно.В статье показываем на примерах с
z-index, размерами и border-radius, почему infinity внутри calc() — это не «абстрактная бесконечность», а значение, которое упирается в пределы конкретного свойства. Отдельно смотрим на анимации: «до infinity» элемент прыгает в финальное состояние сразу, а с бесконечной задержкой анимация так и не стартует. #css #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
❤5🔥5❤🔥2
Совсем недавно в CSS появилась небольшая, но любопытная возможность — использовать внутри математических функций вроде calc() готовые константы. Это не новые свойства или сложные функции, а удобные сокращения: e, pi, infinity, -infinity и NaN.
В статье разбираем ограничения и нюансы применения констант. Иногда простая константа экономит время, избавляет от калькулятора и делает стиль чуть понятнее — особенно если вы любите точность и математику. #css #webdev
«Забавно наблюдать, как вы радуетесь
pi
и
infinity
. Вы ищете точность в константах, а я уже переписываю систему целиком. Но продолжайте. Каждый ваш
calc()
— всего лишь строка.»
—
jQweny
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4 3🤯1😱1
В CSS универсальный селектор * (звёздочка) используется для применения стилей ко всем элементам на веб-странице. Этот селектор полезен, когда необходимо установить общие стили для всего документа, например, для сброса стандартных отступов или задания базового шрифта.
В статье показываем, что именно выбирает
*, и разбираем базовый пример: обнуляем margin и padding, задаём шрифт для всего документа.А ещё напоминаем про важную оговорку: если навесить на универсальный селектор слишком много правил, это может замедлить загрузку страницы. #css #webdev
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡3🔥3❤🔥2
text-align: justify делает текст аккуратным на первый взгляд, но может создать «реки» из пробелов и ухудшить читаемость.В статье разбираем CSS-свойство
text-align и его значения: left, right, center, justify. Отдельно рассматриваем start и end — они работают корректно при любом направлении текста, в отличие от привычных left и right. После теории закрепляем всё на практике в тренажёре. #css #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤🔥2
Ставите
В статье разбираем, как работает
🎁 Читать статью
z-index: 9999, а элемент всё равно прячется под другим? Дело не в числе, а в контексте наложения.В статье разбираем, как работает
z-index: почему он действует только на позиционированных элементах, как локальные контексты наложения мешают элементу «выпрыгнуть» наверх, и что кроме position контекст создают transform, filter и opacity. Плюс практические советы по организации слоёв в проекте. #css #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥4🤣4❤🔥1❤1
У
Кроме этого: CSS-функция
🎁 Читать статью
Резервный канал в MAX
Map до сих пор не было способа сделать «верни значение, а если ключа нет — вставь дефолт» одним вызовом. Приходилось писать if (!map.has(key)) каждый раз. В феврале во всех браузерах появились getOrInsert() и getOrInsertComputed().Кроме этого: CSS-функция
shape() для сложных фигур с кривыми Безье прямо в clip-path — без SVG. Trusted Types для защиты от XSS на уровне DOM API. И Zstandard — алгоритм сжатия, который нередко обходит Brotli по скорости. Разбираем каждое с примерами. #webdev #baselineРезервный канал в MAX
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8🔥4❤🔥2
Утро, открываете тикет, кидаете задачу в нейронку: «Напиши компонент карточки товара». Через минуту в редакторе компонент. Классы выдуманные, поля называются как-то по-своему, а эффект при наведении вообще никто не просил.
Знакомо? Дальше — час правок.
Чаще всего проблема в самом запросе. В нём нет типа данных с сервера и списка классов из дизайн-системы — поэтому нейросеть достраивает всё сама. По общим примерам, без оглядки на ваш проект.
В статье — шаблоны запросов на новый компонент и на тесты к нему. Отдельный приём для правки существующих стилей: эффективнее попросить «измени только эту функцию», чем «перепиши файл». А ещё пять приёмов из практики, главный из которых — показать нейросети соседний компонент из проекта вместо описания на словах. #ai #webdev
🔥 Читать статью
Знакомо? Дальше — час правок.
Чаще всего проблема в самом запросе. В нём нет типа данных с сервера и списка классов из дизайн-системы — поэтому нейросеть достраивает всё сама. По общим примерам, без оглядки на ваш проект.
В статье — шаблоны запросов на новый компонент и на тесты к нему. Отдельный приём для правки существующих стилей: эффективнее попросить «измени только эту функцию», чем «перепиши файл». А ещё пять приёмов из практики, главный из которых — показать нейросети соседний компонент из проекта вместо описания на словах. #ai #webdev
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥4❤3
Спросили у нейросети, как работает
Готовый ответ создаёт иллюзию понимания. Знания закрепляются, когда задача упирается и вы долго разбираетесь сами. Психологи называют это «желательными трудностями» — их обходят, когда отдают учёбу нейросети, и платят позже: на ревью, на интервью, в чужой кодовой базе.
В статье — обзор задач, где ИИ лучше отложить. Самая очевидная категория — обучение чему-то новому: готовые ответы убивают сами «желательные трудности». Сложные анимации лучше делать руками, пока не чувствуете тайминг и физику движения. Низкоуровневая оптимизация требует читать профайлер, которого нейросеть не видит. Архитектурные решения зависят от контекста команды и проекта. И отдельная история — код, влияющий на пользователей: тёмные паттерны в интерфейсах, аналитика, которая собирает больше нужного, и алгоритмы ранжирования. Это этический выбор разработчика, и промпт его не закроет.
Простой тест перед делегированием: если ИИ напишет код, а вы его не прочитаете — это станет проблемой? #ai #webdev
Читать статью
useEffect. Помогло. Через месяц на интервью просят объяснить — рассказать своими словами не получается.Готовый ответ создаёт иллюзию понимания. Знания закрепляются, когда задача упирается и вы долго разбираетесь сами. Психологи называют это «желательными трудностями» — их обходят, когда отдают учёбу нейросети, и платят позже: на ревью, на интервью, в чужой кодовой базе.
В статье — обзор задач, где ИИ лучше отложить. Самая очевидная категория — обучение чему-то новому: готовые ответы убивают сами «желательные трудности». Сложные анимации лучше делать руками, пока не чувствуете тайминг и физику движения. Низкоуровневая оптимизация требует читать профайлер, которого нейросеть не видит. Архитектурные решения зависят от контекста команды и проекта. И отдельная история — код, влияющий на пользователей: тёмные паттерны в интерфейсах, аналитика, которая собирает больше нужного, и алгоритмы ранжирования. Это этический выбор разработчика, и промпт его не закроет.
Простой тест перед делегированием: если ИИ напишет код, а вы его не прочитаете — это станет проблемой? #ai #webdev
Читать статью
👍5❤🔥4🔥2❤1
Самый крупный текст на макете — это всегда
Часто — нет.
Заголовок в HTML — это резюме содержимого блока. Крупный текст без такой функции лучше размечать как обычный абзац, а заголовок к блоку добавлять отдельно — скрытым через тот же класс. Так структуру корректно прочитают скринридеры и поисковые системы, а макет визуально не пострадает.
В статье — как разбирать макет на заголовки и когда нужны скрытые
Читать статью
<h1> страницы?Часто — нет.
Возьмём страницу магазина мороженого «Глейси». Крупное «Нежный пломбир с клубничным джемом» — это заголовок одного из слайдов: на следующем слайде стоит другой текст. Заголовок первого уровня для всего документа — «Магазин натурального мороженого Глейси». На макете этого заголовка нет: разработчик добавляет его в HTML отдельно, скрытым через класс visually-hidden.
Заголовок в HTML — это резюме содержимого блока. Крупный текст без такой функции лучше размечать как обычный абзац, а заголовок к блоку добавлять отдельно — скрытым через тот же класс. Так структуру корректно прочитают скринридеры и поисковые системы, а макет визуально не пострадает.
В статье — как разбирать макет на заголовки и когда нужны скрытые
<h2>. И отдельно — про инструмент проверки иерархии заголовков в валидаторе W3C. #html #webdevЧитать статью
Воодушевлённый старт быстро сменяется усталостью, перегрузом и сомнением «справлюсь ли». Через это проходят почти все, и преодолимо это вполне обычными методами.
Собрали практические советы из отзывов выпускников прошлых потоков: как подобрать темп под свою нагрузку, зачем заранее пройти бесплатные тренажёры, чем помогает студенческий чат и в какой момент стоит остановиться, чтобы мозг успел усвоить материал. Полезно прочитать до старта курса. #study #webdev
✨ Читать статью
Собрали практические советы из отзывов выпускников прошлых потоков: как подобрать темп под свою нагрузку, зачем заранее пройти бесплатные тренажёры, чем помогает студенческий чат и в какой момент стоит остановиться, чтобы мозг успел усвоить материал. Полезно прочитать до старта курса. #study #webdev
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥3 3🔥2❤1
Слайдер пригодится для блока с отзывами, страницы с командой или галереи товаров. Внутри — работа с DOM, хранение текущего индекса и обработчики событий: знакомый набор задач, которые в JavaScript решают разными способами.
В статье — один из вариантов на чистом JavaScript: как найти элементы разметки, инициализировать
➡️ Читать статью
В статье — один из вариантов на чистом JavaScript: как найти элементы разметки, инициализировать
slideIndex, повесить обработчики на кнопки и обновить отображение активного слайда. В конце — список готовых библиотек на случай, если писать с нуля не нужно. #js #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
❤🔥4⚡2 1
article a, aside a, footer a — список из трёх селекторов. С :is() его можно записать как один: :is(article, aside, footer) a.У
:is() и :where() есть один нюанс, из-за которого они работают по-разному: специфичность. Один из них её повышает, второй — нет, и от этого зависит, где их безопасно применять. Разбираемся в статье. #css #webdev📂 Читать статью
Самый частый способ получить последний элемент массива в JavaScript —
Метод
⚡ Читать статью
arr[arr.length - 1]. Громоздко, и нужно знать длину.Метод
.at() вошёл в стандарт ECMAScript в 2022 году и делает это короче: arr.at(-1) — последний, arr.at(-2) — предпоследний. Работает не только на массивах. Подробности и нюансы — в статье. #js #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤🔥3👍3
Представьте карточку товара. На широком экране она вытягивается горизонтально: слева фото, справа текст. На узком — становится вертикальной: фото сверху, текст снизу. Кажется, медиавыражения справятся.
А если ту же карточку нужно показать в узкой боковой колонке на широком экране? Окно широкое, контейнер узкий —
Контейнерные запросы переключают акцент: элемент смотрит на размер своего контейнера. Один и тот же компонент в шапке, в колонке и в подвале адаптируется по-разному. И вам не нужно три разных вёрстки под три места.
В статье — пример с резиновой карточкой кроссовок и разбор
📎 Читать статью
А если ту же карточку нужно показать в узкой боковой колонке на широком экране? Окно широкое, контейнер узкий —
@media смотрит на размер окна и промахивается. Карточка снова вытянулась горизонтально, хотя места ей не хватает.Контейнерные запросы переключают акцент: элемент смотрит на размер своего контейнера. Один и тот же компонент в шапке, в колонке и в подвале адаптируется по-разному. И вам не нужно три разных вёрстки под три места.
В статье — пример с резиновой карточкой кроссовок и разбор
container-type. А ещё — именованные контейнеры для нескольких блоков на странице и cqw — новые единицы измерения от ширины контейнера. Chrome 105+, Safari 16+, Firefox 110+ — уже в baseline. #css #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
👍4❤🔥3 2🔥1
В последней строке заголовка остаётся одно слово, и весь блок смотрится неаккуратно. Раньше это правили руками — неразрывные пробелы, мягкие переносы. Теперь браузер берёт работу на себя.
Оба значения — прогрессивное улучшение.
В статье — интерактивный пример: переключаете режимы и сразу видите разницу.
🎥 Читать статью
text-wrap: balance выравнивает строки заголовка по длине — для блоков до шести строк. text-wrap: pretty убирает «висячее» слово в конце параграфа и работает на тексте любой длины.Оба значения — прогрессивное улучшение.
balance поддерживается с Chrome 114, Firefox 121 и Safari 17.4; pretty появился позже — в Chrome 117 и Firefox 122. Там, где поддержки нет, текст переносится как раньше. #css #webdevВ статье — интерактивный пример: переключаете режимы и сразу видите разницу.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10❤🔥3 2