Code Ready | Frontend

Date.parse() и неочевидные проблемы при работе с датами! При работе с датами в JavaScript часто используют Date.parse() или new Date(), чтобы преобразовать строковое значение в дату или получить timestamp. При этом важно понимать, какое значение хранится в системе: календарная дата, локальное время или конкретный момент времени. Ошибки обычно появляются, когда эти разные сценарии начинают обрабатываться одинаково. Например: const timestamp = Date.parse( '2024-01-15T10:30:00Z' ); console.log(timestamp); JavaScript возвращает количество миллисекунд от 1 января 1970 года UTC. Проблемы возникают, когда в Date.parse() передают даты в произвольном формате: Date.parse('01/15/2024'); Date.parse('15.01.2024'); Date.parse('2024/01/15'); Такие форматы не являются надёжным контрактом между системами. Их обработка может отличаться в зависимости от окружения и реализации JavaScript. Например: Date.parse('01/02/2024'); Такая запись неоднозначна. Без явного формата невозможно гарантировать одинаковый результат во всех окружениях. Поэтому при обмене датами между backend и frontend обычно используют ISO 8601 с явным указанием времени и часового пояса: new Date( '2024-01-15T10:30:00Z' ); Здесь описан конкретный момент времени. Указаны дата, время и часовой пояс (UTC), поэтому значение будет одинаково интерпретироваться независимо от локального времени пользователя. Отдельная проблема возникает при работе с датами без времени. Например: const date = new Date( '2024-01-15' ); console.log(date); Строка 2024-01-15 в JavaScript интерпретируется как UTC-дата: 2024-01-15T00:00:00.000Z После этого значение преобразуется в локальный часовой пояс пользователя. В часовом поясе UTC+3 пользователь увидит: 15.01.2024 03:00 А в UTC-5: 14.01.2024 19:00 Само значение времени остаётся одинаковым, но календарная дата при отображении может измениться. Именно здесь часто возникает ошибка в модели данных. Например, сервер возвращает дату рождения пользователя: { "birthday": "2000-01-15" } На frontend создаётся объект Date: const birthday = new Date( user.birthday ); birthday.toLocaleDateString('ru-RU'); Разработчик ожидает получить: 15.01.2000. Но пользователь в другом часовом поясе может увидеть: 14.01.2000. Причина в том, что дата рождения — это календарное значение. Она не зависит от часов, минут и часового пояса. Объект Date в JavaScript используется для работы с конкретным моментом времени, поэтому при преобразовании строк учитывается часовой пояс. Для временных событий лучше использовать полный ISO-формат: const createdAt = new Date( '2024-01-15T14:30:00Z' ); Дата создания сообщения, время оплаты или момент отправки уведомления являются событиями во времени. Для них важно передавать полное значение с часовым поясом. А вот календарные значения, например дату рождения или дату окончания периода, не всегда стоит преобразовывать в Date. В таких случаях безопаснее работать с исходным значением: const [year, month, day] = '2000-01-15'.split('-'); const formattedDate = `${day}.${month}.${year}`; Так значение останется календарной датой и не будет изменено из-за часового пояса. Также стоит учитывать, что Date.parse() не выбрасывает исключение при невозможности распознать дату: const result = Date.parse( 'invalid-date' ); console.log(result); Результат: NaN. Поэтому такие значения необходимо проверять: const timestamp = Date.parse(value); if (Number.isNaN(timestamp)) { throw new Error( 'Invalid date' ); } Основная проблема при работе с датами в JavaScript связана не с самим Date.parse(). Проблемы появляются, когда смешиваются разные типы данных: календарные даты, локальное время и конкретные моменты времени. 🔥 Перед использованием Date важно определить, что именно хранится в данных: дата, время события или значение, которое зависит от часового пояса. Только после этого стоит выбирать способ представления и обработки. 📣 Code Ready | #практика

Пачку офферов заказывали? О всех трудоустройствах через ИИ-ассистента Софи ребята узнают от пользователей. И какой же кайф, когда они делятся своими историями. Вот так в чате узнали сразу о трех новых офферах: • Кейс Сергея - 2 недели в Софи и 2 оффера. • Кейс Елены - 1 неделя в Софи и оффер спустя 10 лет перерыва в работе. Елене 52 года. • Кейс Юлии - 1 месяц в Софи, свитчер из финансового аналитика в разработчика SQL. И еще один оффер🎉 Искренние поздравления ребятам и удачи им на новой работе! В следующий раз доступ в Софи откроется уже 21 июля. Если хочешь получить 3 дня бесплатного доступа - подписывайся на этот канал, все анонсы будут там.

🤔 HTML5Book — большой учебник по HTML, CSS и JavaScript! На сайте собрана большая база материалов по веб-разработке: подробные уроки по HTML5, CSS3, JavaScript и jQuery, а также удобные справочники по HTML- и CSS-свойствам. Здесь можно найти разбор тегов, форм, анимаций, Flexbox, Grid, DOM и других ключевых технологий фронтенда. Большое количество практических примеров, готовых решений и UI-эффектов для интерфейсов. 📌 Оставляю ссылочку: html5book.ru 📣 Code Ready | #сайт

CSS-вычисления теперь работают с auto и max-content! Многие знают calc(), но он не умеет вычислять auto, max-content, fit-content и min-content. Например, так написать нельзя: .panel { width: calc(max-content + 2rem); } Такое значение считается невалидным. Для этого появился calc-size(). .panel { width: calc-size(max-content, size + 2rem); } Теперь браузер сначала вычисляет max-content, а затем прибавляет к нему 2rem. Это работает и с другими размерами, зависящими от содержимого. .panel { height: calc-size(auto, size + 1rem); } Полезно, когда элемент должен сохранить естественный размер содержимого, но при этом стать немного больше без JS. 🔥 calc-size() позволяет выполнять вычисления с auto, max-content и fit-content — то, чего обычный calc() делать не умеет. 📣 Code Ready | #совет

1000+ свежих IT-вакансий каждый месяц в одном месте 🤘 Пока другие листают hh — мы ищем вакансии по всему рынку: каналы, сайты компаний, стартапы и закрытые источники. IT Россия IT СНГ Стажировки Digital Международка Удалёнка Python Бигтех Дизайн QA Джунам Frontend Аналитика Стартапы за рубежом DevOps Не с HH Автоотклики

👩‍💻 Отображаем математические формулы с помощью тега <math>! Тег <math> используется для встраивания математических выражений на веб-страницу с помощью языка MathML. Он позволяет отображать дроби, степени, корни, индексы, матрицы и другие математические конструкции без изображений. Кроме глобальных атрибутов, <math> поддерживает: • display="inline" — формула отображается внутри строки (по умолчанию). • display="block" — формула выводится отдельным блочным элементом. • alttext — альтернативное текстовое описание формулы. Все теги MathML чувствительны к регистру: используйте строго строчные (<msup>, а не <MSUP>). Для лучшего внешнего вида можно подключать стили к формуле, но аккуратно, некоторые свойства не работают 📣 Code Ready | #атрибут

Node.replaceWith() — замена DOM-элемента без пересборки HTML! Когда нужно заменить элемент на странице, часто используют innerHTML, outerHTML или удаляют старый узел, а потом создают новый. В небольших интерфейсах разницы почти не видно, но внутри браузера это разные операции. Если вы работаете с динамическими интерфейсами, где есть состояние элементов и обработчики событий, такие детали становятся важными. Например: const oldElement = document.querySelector('.message'); oldElement.outerHTML = ` <div class="success"> Saved </div> `; Выглядит просто: старый элемент заменили новым. Но браузер получает строку HTML, разбирает её и создаёт новый DOM-узел. Старый элемент исчезает из DOM, а на его месте появляется другой объект. Если где-то была сохранена ссылка на старый элемент или на нём были обработчики событий, они не перейдут автоматически. Для браузера это уже другой DOM-объект. Для замены конкретного узла есть более подходящий метод: const oldElement = document.querySelector('.message'); const newElement = document.createElement('div'); newElement.textContent = 'Saved'; oldElement.replaceWith(newElement); replaceWith() работает непосредственно с DOM-узлами. Браузеру не нужно заново парсить HTML-строку — он получает готовый элемент и заменяет только нужное место в DOM-дереве. Это удобно, когда вокруг элемента есть другая разметка, которую не нужно трогать. Например: const button = document.querySelector('.button'); const loader = document.createElement('span'); loader.textContent = 'Loading...'; button.replaceWith(loader); Меняется только button. Родительский элемент, соседние узлы и остальная структура страницы остаются без изменений. Разница хорошо заметна, если сравнить с innerHTML. Например: const container = document.querySelector('.container'); container.innerHTML = ` <div class="card"> New content </div> `; Здесь браузер заново создаёт содержимое контейнера из строки. Даже если часть элементов выглядит так же, это могут быть уже новые DOM-объекты. Например: const input = document.querySelector('.search'); input.value = 'frontend'; container.innerHTML += ` <div> New block </div> `; Если input находится внутри container, старый элемент будет пересоздан вместе с содержимым. Можно потерять значение поля, обработчики событий и ссылки на старые DOM-объекты. Именно поэтому innerHTML += часто становится причиной багов. replaceWith() такого поведения не создаёт, потому что меняет только указанный узел. Например: const title = document.querySelector('.title'); const newTitle = document.createElement('h2'); newTitle.textContent = 'New title'; title.replaceWith(newTitle); Это удобно, когда один элемент интерфейса переходит в другое состояние: загрузка заменяется результатом, временный блок заменяется данными с сервера или один компонент меняется на другой. Но важно учитывать: новый элемент не наследует обработчики старого. Например: const button = document.querySelector('.button'); button.addEventListener('click', handleClick); const newButton = document.createElement('button'); button.replaceWith(newButton); После замены новый button будет другим объектом, поэтому старый обработчик к нему не относится. Если нужно сохранить поведение, обработчик нужно добавить заново: newButton.addEventListener('click', handleClick); Также replaceWith() может принимать несколько узлов: element.replaceWith(title, text, button); Браузер удалит старый элемент и вставит переданные узлы на его место. Причём это могут быть не только элементы, но и текстовые узлы: element.replaceWith('Hello'); 🔥 Подведем итог: replaceWith() удобен для точечной замены DOM-элементов без повторного парсинга HTML и пересоздания всей окружающей структуры. В отличие от innerHTML, он работает напрямую с узлами и даёт больше контроля над изменениями DOM. 📣 Code Ready | #практика

IT мероприятия 🤘 Всё самое интересное для карьеры в IT: митапы, хакатоны, конференции, стажировки и обучение. Подписывайся 🤘 1. Москва 2. Санкт-Петербург 3. Для стажеров и студентов

Крутая статья попалась на Хабре: «HTML Sanitizer API: конец эпохи DOMPurify и XSS-страданий»! В этой статье: • Разбирается, почему привычные способы защиты от XSS становятся сложнее и какие проблемы есть у старых подходов вроде DOMPurify; • Показывается новый HTML Sanitizer API, который позволяет безопаснее работать с пользовательским HTML прямо на уровне браузера; • Объясняется, как современные веб-разработчики могут упростить код и повысить безопасность приложений. 🔊 Продолжай читать на Habr! 📣 Code Ready | #статья

Проверяем интернет-скорость! Хочешь узнать, насколько быстрый у тебя интернет? Для этого есть готовый пакет speedtest-net, который позволяет получить скорость загрузки, отдачи и пинга. Такой скрипт можно встроить в мониторинг или просто проверить сеть без браузера. Шаг 1 — импортируем: const speedTest = require('speedtest-net'); Шаг 2 — запускаем тест: (async () => { const res = await speedTest({ acceptLicense: true }); })(); Шаг 3 — форматируем и выводим результаты: // Загрузка console.log(`Download: ${(res.download.bandwidth / 125000).toFixed(2)} Mbps`); // Выгрузка console.log(`Upload: ${(res.upload.bandwidth / 125000).toFixed(2)} Mbps`); // Пинг console.log(`Ping: ${res.ping.latency} ms`); 🔥 Теперь у тебя свой speedtest прямо в коде. Можно запускать вручную или добавить в cron для регулярного замера. 📣 Code Ready | #практика