Secret Code

⌛️ Задумывались, почему на рекламных снимках устройств Apple всегда стоит время 9:41? Это не просто случайное число, а отсылка к знаковому моменту в истории компании. Во время презентации первого iPhone в 2007 году Стив Джобс сказал знаменитую фразу: «Сегодня Apple собирается заново изобрести телефон» — именно в 9:41 утра, и на экране тогда было показано это время. С тех пор 9:41 стало символом 💻 Apple и используется на всех изображениях с экранами их устройств. Интересно, что этот тренд подхватили и другие дизайнеры. Причина проста: 9:41 визуально приятно смотрится и ассоциируется с успешностью и инновационностью бренда Apple. Добавив это время на экраны своих устройств, они как бы передают сообщение: «Наш продукт тоже стоит внимания». Более того, это время стало своего рода эталоном для демонстрации макетов и интерфейсов. Цифры легко читаются и визуально сбалансированы, что делает макеты более эстетичными. 9:41 — это не только часть истории Apple, но и доказательство того, как мелкие детали могут стать важной частью визуальной культуры. 💬 Используете ли время 9:41 на своих демонстрационных скриншотах?

Райан Даль, создатель Node.js и Deno, недавно написал открытое письмо к Oracle, в котором предложил сделать товарный знак «JavaScript» общедоступным Он аргументирует это тем, что Oracle не использует этот термин в своих продуктах, а его наличие лишь создает путаницу среди разработчиков, вынуждая их использовать термин ECMAScript. Даль также отметил, что название JavaScript сбивает с толку, так как многие ошибочно связывают его с Java, хотя на самом деле у этих языков мало общего. Думаю, что использовать аббревиатуру JS как название наравне с JavaScript было бы гораздо удобнее. Она не является зарегистрированным товарным знаком, поэтому её можно применять в названиях продуктов, конференций и других проектах без ограничений. 💬 Что думаете вы? Получится ли сделать JavaScript народным достоянием?

📌 State of HTML 2024 Запущен новый опрос, где у вас есть возможность повлиять на то, какие новые возможности работы с элементами появятся в будущем. Разработчики спецификаций изучают результаты опроса. Также это отличная возможность узнать о существующих функциях — вопросы составлены так, что вы можете узнать много нового. 🔗 survey.devographics.com/survey/state-of-html/2024 До этого я рассказывал в канале про State of CSS 2024.

👾 Если на вашем диске заканчивается место и вы используете Windows, у меня есть несколько советов, как освободить пространство 1️⃣ Compactor — утилита для сжатия игр и некоторых программ. Она использует встроенный механизм Windows, который позволяет сжимать большие файлы без потери производительности. Интересно, что этим алгоритмом сжатия пользуется только сама система, благодаря чему Windows занимает всего 12 ГБ на диске, хотя её фактический размер может достигать 25 ГБ. Пример: с помощью Compactor удалось сжать Visual Studio 2017 на 50%. Однако имейте в виду, что утилита работает не со всеми играми и программами. 2️⃣ WizTree — отличная утилита для анализа дискового пространства. Она визуально показывает, какие папки занимают больше всего места, а вы уже сами решаете, нужны ли вам эти файлы. Так, я нашёл кэш от программ, которые давно удалил с компьютера.

🐱 Многие разработчики, возможно, упустили из виду, что Moment.js теперь считается устаревшей библиотекой Даже при том, что на npm у неё по-прежнему более 21 миллиона загрузок в неделю, её создатели рекомендуют перейти на альтернативные решения. Когда-то Moment.js была стандартом для работы с датами в JavaScript, но сегодня ситуация изменилась, и библиотеку больше не рекомендуется использовать по следующим причинам: 🟦 Библиотека изменяет исходный объект даты вместо создания нового, что может приводить к неожиданным результатам. 🔍 Вес библиотеки составляет целых 300 КБ. Для сравнения, framer-motion весит 140 КБ. Сейчас разработчики стараются избегать крупных зависимостей, так как это негативно сказывается на метриках производительности. Для проверки веса пакетов можно воспользоваться сервисом Bundlephobia. Сами же разработчики советуют перейти на использование следующих библиотек 👇 1. Luxon (80 КБ) — библиотека от одного из мейнтейнеров Moment.js. Я сам часто использую её в своих проектах. 2. Day.js (1.7 КБ) — минималистичная альтернатива с аналогичным API, разработанная для тех, кто привык к синтаксису Moment.js и хочет быстро адаптироваться. 3. date-fns (77.5 КБ) — предлагает функциональные методы для работы с объектами Date. Я использовал эту библиотеку в коммерческом проекте и остался доволен её подходом. 4. js-Joda (209 КБ) — это порт JavaScript для библиотеки Three-Ten Backport на Java, которая лежит в основе API java.time в Java SE 8. Признаться, сам о ней узнал впервые, но разработчики Moment.js её рекомендуют.

⏳ Немного ностальгии Вспоминаю, как начинал писать код в Notepad++, учился верстке в Dreamweaver. Ещё кодил в Sublime Text и Atom. Недавно узнал, что Atom — это проект 💻 GitHub, и именно поэтому редактор прекратил получать обновления в 2022 году. Ведь у Microsoft есть 👩‍💻 VS Code. Был период, когда я использовал Brackets, который, как оказалось, разработан Adobe. Сейчас уже и не вспомню, почему сменил так много редакторов кода. Скорее всего, потому что шесть лет назад VS Code не был таким популярным. Существовало множество альтернатив, каждая из которых предлагала уникальные фишки, которых не было у конкурентов. Теперь же VS Code уверенно лидирует. Согласно опросу разработчиков Stack Overflow 2023 года, этот редактор признан самым популярным инструментом для разработки. Из 86 544 респондентов, 73,71% сообщили, что используют его. 💬 Использовали ли вы другие редакторы помимо VS Code?

👟 Тут на днях OpenAI анонснули новую модель o1-preview и o1-mini... ...говорят, что она намного эффективнее при решении математических задач и при написании кода. Судя по всему это связано с тем, что модель под капотом умеет пошагово «думать» и не нужно просить нейронку это делать. В данный момент модель доступна для подписчиков ChatGPT (пока что дают очень маленький запас промптов), позже будет доступна для всех. Модель также на вход пока может принимать только текст.

😑 С кого срисовали? Консорциум Unicode, некоммерческая организация, ответственная за разработку стандарта Unicode, выпустил 16-ю версию стандарта. В неё вошли новые эмодзи, и один из них вы видите на изображении. Этот эмодзи стал самым ожидаемым символом 2024 года. Планируете использовать его? Он станет доступен в обновлениях операционных систем и приложений чуть позже — обычно это происходит в конце года или в начале весны.

🎉 Сегодня 256-й день года, а это значит, что мы празднуем День программиста! Пусть ваш код всегда работает без багов, сборка проходит с первого раза, а вдохновение для крутых проектов никогда не заканчивается. Желаю вам новых свершений и интересных задач🚀

👩‍💻 JavaScript продолжает развиваться, и грядущий ECMAScript 2024 (ES15) привнесет в язык множество новых функций и улучшений Эти обновления направлены на повышение эффективности работы разработчиков, читабельности кода и общей производительности 💻 Подробнее о нововведениях можно прочитать в статье.

💻 Когда дизайнер в Figma добавляет обводку, разработчик часто переносит её при верстке через свойство `border`. Однако это не всегда лучшее решение. Проблемы с использованием border для обводки особенно заметны, когда обводка динамическая (например, появляется только у активного элемента). Один и тот же элемент с обводкой и без неё начинает менять свои размеры. Если обводка толще одного пикселя, становится ещё более очевидно, что верстка не соответствует pixel perfect. Часто эту проблему решают с помощью тени — свойства box-shadow.

.withBorder {
  box-shadow: 0 0 0 1px red;
}

В этом случае мы получим красную обводку, которая не изменяет размер элемента. Кроме того, с помощью box-shadow можно создать внутреннюю обводку, которая накладывается на элемент, а не располагается снаружи, используя параметр inset:

.withBorder {
  box-shadow: inset 0 0 0 1px red;
}

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

💻 Теперь мини-приложения в Телеграм могут отображать нативную второстепенную кнопку Разработчик может настроить её расположение относительно основной и поставить на неё дополнительное действие. Ставлю лайк 🕺

Вы наверняка встречали схожий код 👇

const x = 5
;(function() {
    console.log(x)
})()

💡 Это называется IIFE — немедленно вызываемая функция. Такая конструкция позволяет вызвать функцию сразу же после её объявления. Хотя её использование не рекомендуется, меня заинтересовало, почему в некоторых случаях IIFE требует точку с запятой перед собой. Я решил разобраться.

const x = 5
(function() {
    console.log(x)
})()

Так я обычно пишу код, потому что привык опускать точку с запятой в своих проектах. Однако из-за этой привычки в этом коде возникнут проблемы: 🤯 Node.js выдаст ошибку при запуске. 🧹 Prettier или Biome попробуют отформатировать этот код, но сделают это некорректно. JavaScript в этом случае может интерпретировать IIFE как часть предыдущего выражения const x = 5, что и приводит к сбоям в работе Node.js, Prettier и Biome.

const x = 5(() => {
    console.log(x)
})()

Вот как Biome переделывает мой код, из-за чего Node.js пытается использовать число как функцию. Чтобы избежать таких проблем, важно вручную ставить точку с запятой перед IIFE. Однако лучше вообще избегать использования этой конструкции 👍

Наверняка вы заметили, что когда нужно показать в интерфейсе или креативе, что функция или продукт связаны с искусственным интеллектом, чаще всего используют эмодзи ✨ блёсток (sparkles) или похожие на них иконки. Найти примеры ИИ-продуктов, которые не используют блёстки, довольно сложно. Я не говорю, что их срочно нужно заменить, но мне стало интересно, почему именно они так популярны? На этот вопрос нет одного единого ответа. Но есть несколько предположений 👇 ⌛️ Футуризм и технологии — Блёстки символизируют прогресс и передовые технологии, такие как ИИ, который находится на пике инноваций. 🔮 Мистичность — Блёстки вызывают ощущение загадочности, что идеально отражает природу ИИ — сложную и труднопонимаемую для большинства. 💻 Цифровая эстетика — Они напоминают пиксели, что усиливает связь с виртуальной реальностью и цифровыми технологиями. 🚀 Космический масштаб — Ассоциации со звёздами подчёркивают глобальный, а порой и вселенский потенциал ИИ. Оказывается, это не просто случайно выбранный символ. Блёстки действительно имеют ряд ассоциаций с ИИ, что делает их частым выбором при визуальном представлении технологий. Теперь вы знаете, почему сверкающие образы так часто сопровождают продукты, связанные с искусственным интеллектом, которые становятся всё более неотъемлемой частью нашей жизни.

👍 Коллекция компонентов shadcn/ui получила крупное обновление! shadcn/ui — это коллекция реиспользуемых компонентов, предлагающая новый взгляд на UI-киты. Вместо использования компонентов из npm-библиотек, разработчики предлагают «копировать и вставлять» код компонентов прямо в ваши проекты. Это даёт полный контроль над компонентами, позволяя изменить всё, что необходимо под конкретные требования. Вот основные изменения: 1️⃣ Интерфейс командной строки (CLI) теперь поддерживает все популярные React-фреймворки «из коробки», включая Next.js, Remix, Vite и другие. 2️⃣ Компоненты автоматически определяют свои зависимости. Например, аккордеон теперь может сам добавлять необходимые анимации в конфигурацию Tailwind. При добавлении компонента в проект, файл tailwind.config.ts обновляется корректно, без перезаписи ваших настроек, как это было раньше. 3️⃣ Компоненты можно устанавливать по ссылке на JSON. В shadcn/ui появилась новая схема, которую разработчики могут использовать для создания собственного реестра компонентов. Пока нет подробной информации о том, как это работает, но возможность выглядит многообещающе. 4️⃣ Команда init теперь автоматически определяет фреймворк и может даже создать новое приложение на Next.js одной командой. 5️⃣ Добавлена улучшенная поддержка монорепозиториев. На канале Theo (t3.gg) вышло видео, где он показывает, как одной командой в консоли он добавил целую страницу на сайт, сгенерированную с помощью v0.dev. Думаю, что у этого функционала есть ПоТаНцЕвАл 👍 💬 Пользовались ли вы shadcn/ui?

🧐 Решил в своём проекте вместо привычной JSON-локализации попробовать систему Fluent Mozilla разработала систему Fluent, которая позволяет создавать более гибкие и естественные переводы. Один из примеров её возможностей — это динамическое согласование перевода в зависимости от числительных, рода и других факторов. Давайте рассмотрим пример:

shared-photos =
    {$userName} added {$photoCount ->
        [one] a new photo
       *[other] {$photoCount} new photos
    }.

Этот код отвечает за формирование фразы, когда пользователь добавляет фотографии. Здесь Fluent использует переменные и правила согласования: 1. {$userName} — имя пользователя. 2. {$photoCount} — количество добавленных фотографий: - Если значение переменной равно 1: “added a new photo”. - В остальных случаях: “added N new photos”. Такие фразы часто встречаются в интерфейсах приложений. В других системах приходится вручную писать несколько строк для каждого варианта, что усложняло локализацию. Fluent решает эту проблему, делая процесс более эффективным. Процесс становится ещё более эффективным, когда в одной строке сразу упоминается местоимение пользователя, количество, числительные прилагательные. Вместо создания огромного количества строк создаётся всего одна динамическая.

👍 Нашёл хороший интерактивный учебник по SVG — fffuel.co/sssvg. SVG можно создать, условно, в Иллюстраторе, но можно ведь и своими ручками! В моём воркфлоу изредка возникает потребность как-либо отредактировать скачанную SVG-иконку. Чаще всего я просто редактирую сразу файл в текстовом редакторе. Но для этого как раз требуются хоть какие-то знания того, как работает SVG. Страница с интерактивными референсами поможет вам лучше разобраться в работе SVG. В самом конце страницы также собраны ссылки на полезные ресурсы про SVG и SVG-генераторы 👇 fffuel.co/sssvg

🙂 Что такое Biome и как его использовать? Biome — это набирающий популярность инструмент в экосистеме JavaScript и TypeScript. Если вы хотите ускорить процесс форматирования и линтинга кода, стоит обратить внимание на Biome. Этот инструмент, написанный на языке Rust, объединяет в себе возможности Prettier и ESLint.

Biome — это линтер для JavaScript, TypeScript и JSX, содержащий 268 правил из ESLint и не только.

Сегодня решил попробовать поработать с этим инструментом, заранее установив плагин в VS Code. Он сразу подсветил, что в одном из файлов есть useEffect, который не вызывается при обновлении замемоизированной функции. Это означает, что инструмент из коробки поддерживает React, что очень удобно. Кроме того, Biome умеет заменять .map().flat() на .flatMap(), сортировать переменные и выполнять многие другие полезные функции. Разработчики активно развивают проект, и его популярность растёт — на прошлой неделе пакет был скачан 738 тысяч раз. Рекомендую установить этот инструмент в свой пет-проект и попробовать его в деле!

При изучении новых технологий фронтенда часто возникают ситуации, когда нужны тестовые данные. Например, чтобы на сайте вместо абстрактных пользователей вроде «Example User» появлялись условно реальные персонажи. 🩰 В этом случае вам поможет курируемый список бесплатных и общедоступных API: freepublicapis.com. Здесь вы найдете более двухсот API на любой вкус и цвет.

👩‍💻 Недавно вспомнил о Fleet — редакторе кода от JetBrains, созданном в качестве конкурента для VS Code, так как IDE от JetBrains решают несколько другие задачи по сравнению с VS Code. Первые новости о Fleet появились около трёх лет назад. За это время редактор вышел в публичный бета-тест, добавил поддержку C#, Svelte и Tailwind, а также обзавёлся встроенным ассистентом на базе искусственного интеллекта. Однако, за три года Fleet так и не приблизился по функционалу к VS Code или другим IDE от JetBrains. До сих пор отсутствует поддержка плагинов (хотя её обещают уже на протяжении трёх лет), что отпугивает многих пользователей. Кроме того, на сайте редактора есть информация о стоимости. На сайте написано о бесплатной и платной версии. В бесплатной версии отсутствуют Smart Mode и некоторые "продвинутые" функции, но конкретный список ограничений пока не раскрыт. Слышали ли вы о таком редакторе кода? Интересовались ли его развитием?