Сергей Константинов | IT и не только

Первые результаты SEO-эксперимента 🧪

Ранее я писал о запуске SEO-эксперимента, а также ключевых параметрах на которых фокусировался. Однако почти сразу я изменил стратегию, изменив ключ на увеличение поискового трафика, но и увеличив KD до 60% (вместо 35%). При этом описание сохранил максимально оптимизированным под различные ключи.

Пока рано делать громкие выводы, но уже есть интересная статистика:

• Дополнение Convert WEBP to JPG за последние несколько дней набрало 38 активных пользователей.
• В то же время неоптимизированное дополнение HEIC to JPG с широким ключом стоит месяц на месте на 44 активных пользователях.

Следующая цель — оптимизировать HEIC to JPG для увеличения конверсии. Буду благодарен, если кто-то сможет подсказать, как посмотреть с каких платформ идёт основной трафик, приложу эти данные к следующему отчёту.

Обратная связь и планы 📝

Я получил много откликов, что тема инди-разработки интересна и вам, и мне, поэтому продолжаю активно писать об этом. Разумеется, также держу вас в курсе новинок во Frontend'е и IT в целом. Много планов и запросов по возобновлению YouTube-блога — всё помню, потихоньку реализую.

Спасибо за вашу поддержку! 🙌

👉 Подписаться | 🚀 Дать boost

🚀 Tailwind CSS 4.0

Его можно любить и ненавидеть, но он точно никого не оставил равнодушным.

Вышел релиз Tailwind CSS 4.0. Кратко о том, что нового:

⚡️ Производительность
— Полные сборки ускорены в 5 раз.
— Инкрементальные сборки (например, при изменении одного класса) выполняются в 100 раз быстрее — время измеряется в микросекундах.

🌐 Современные технологии CSS
— Поддержка Cascade Layers и Logical Properties (для right-to-left-интерфейсов).
— Все токены (цвета, отступы, шрифты) доступны через CSS-переменные (можно динамически изменять через JavaScript).

🛠 Упрощенная настройка
— Для подключения достаточно добавить в CSS:

css  
@import "tailwindcss";  

— Автоматическое обнаружение шаблонов (не требуется указывать файлы в content).

📦 Интеграция с Vite
— Официальный плагин @tailwindcss/vite для оптимизации скорости сборки.

✨ Ключевые возможности
1. Container Queries — стилизация элементов на основе размера контейнера (встроенная поддержка без плагинов).
2. 3D-трансформации — rotate-x-*, rotate-y-*, translate-z-*, perspective.
3. Расширенные градиенты — конические, радиальные, настройка интерполяции цветов.
4. Динамические классы — произвольные значения для grid-cols-*, spacing-*, data-* атрибутов без изменения конфигурации.
5. P3-цвета — обновленная палитра с поддержкой широкого цветового охвата (формат oklch).

🔧 Дополнительные функции
→ @starting-style — анимации появления элементов через CSS.
→ Модификатор not-* — стилизация исключений (например, not-[.disabled]:opacity-100).
→ Утилиты для управления color-scheme, автоматического изменения размера полей (field-sizing), многоуровневых теней.

🚀 Начало работы
— Создать новый проект:

bash  
npx tailwindcss init  

— Протестировать в браузере: Tailwind Play.

🔄 Миграция с версии 3.x
Доступно руководство по обновлению: Upgrade Guide и автоматизированные инструменты.

💡 Что изменилось под капотом?
Движок Tailwind CSS полностью переписан — улучшена стабильность, производительность и масштабируемость.

Подробнее об изменениях можно прочитать на странице релиза.

👉 Подписаться | 🚀 Дать boost

🛠 SEO-оптимизация и разработка

В рамках эксперимента выкатил новое небольшое дополнение для конвертации WEBP в JPG. Разработка заняла около 15 минут, но основной акцент был сделан на SEO-оптимизацию и подбор ключевых слов.

Ключ (или ключевое слово) — это слово или фраза, которую пользователи вводят в поисковую строку, чтобы найти нужную информацию.

В моём случае, основной ключ — название дополнения.

🔍 Основы SEO-оптимизации

Для анализа я использую SEMrush. Основные показатели, которые стоит учитывать:

◆ KD (Keyword Difficulty) – уровень конкуренции по ключу.
◆ Volume – поисковый объём (количество запросов).

Идеальный ключевой запрос должен сочетать высокий поисковый объём с низкой конкуренцией. Однако важно найти баланс:
● Ключи с высоким Volume и KD > 70% неэффективны для старта, так как пробиться в топ 10 почти нереально, а там весь трафик.
● Лучше выбирать запросы с умеренным объёмом и низкой конкуренцией.

⚙️ Что я сделал:
🔹 Выбрал ключевой запрос с небольшим объёмом ~4.4K, но с KD ~30%.
🔹 Добавил в описание приложения несколько типов ключей для максимального охвата.

Стратегия: начать с небольшого трафика, занимая топовые позиции по низкоконкурентным запросам. С ростом популярности и обратных ссылок (backlinks) перейти к более конкурентным ключам.

💬 Буду рад, если вы поделитесь вашим опытом в SEO, а также подскажите разного рода фишки и инструменты.

🔥 Оставляйте реакции, если вам интересна эта тема.

👉 Подписаться | 🚀 Дать boost

💡 LLM-визуализация

Если вы давно хотели разобраться, как работают LLM (Large Language Models), то у меня для вас есть интересная находка.

🔗 Сайт с визуализацией и объяснением работы GPT разных поколений:
https://bbycroft.net/llm

На мой взгляд, сайт представляет особый интерес с точки зрения фронтенда и работы с 3D в браузере. Визуализация в 3D — это настоящее произведение искусства!

🔥 Если вам тоже понравилось, делитесь своими впечатлениями!

💾 HEIC to JPEG - конвертер картинок

Пока все готовят новогодние салатики, делюсь с вами ещё одной из своих разработок.

Если вы счастливый обладатель iPhone, то наверняка сталкивались с проблемой: как открыть фото с телефона на Windows?

💡 Решение? Конвертер картинок!

Что было важно:
1️⃣ Поддержка форматов: HEIC, HEIF — стандартные для iPhone.
2️⃣ Настройка баланса качества и размера итогового JPG.
3️⃣ Удобный интерфейс: drag & drop, множественная загрузка, красивый дизайн.

А ещё — это важно! Обработка происходит локально, на вашем устройстве 💻

➣ Никаких серверов
➣ Никаких лишних затрат на их содержание
➣ Максимальная конфиденциальность: данные остаются только у вас, что особенно важно для личных фото 🔒

📌 Мои приложения в формате Chrome Extension. Почему?

🔹 Всегда под рукой
🔹 Полностью соответствует стеку технологий, с которым я работаю
🔹 Продвигаются Google, в том числе в поисковом трафике

💭 Зачем свой конвертер, если в интернете их полно?

➣ Во-первых, это популярный поисковой запрос, и я хочу привлечь часть трафика.
➣ Во-вторых, всё дело в деталях: моё приложение удобнее, чем многие аналоги.

👉 Скачивайте HEIC to JPG по ссылке в Chrome Web Store и делитесь впечатлениями!

🙏 Ваши отзывы и звёздочки ⭐️ на странице дополнения очень помогут мне в продвижении, от этого зависит место в поисковой выдаче. Их можно оставить после установки дополнения.

💬 Также пишите отзывы и обратную связь под этим постом — учту их в следующих апдейтах.

🔥 Спасибо за активность под прошлым постом про Image Compressor! Количество пользователей дополнения медленно, но уверенно растёт. В следующих постах я продолжу делиться подробностями об этом и других проектах. Кстати, третий уже активно разрабатывается!

P.S. Всех с наступающим Новым Годом 🎄

Как я разрабатываю дизайн для своих проектов? 🎨

Дизайн для меня долгое время был камнем преткновения. Но со временем я нашёл для себя несколько решений, которые сильно упрощают этот процесс. Делюсь своими советами — возможно, они окажутся полезными и вам:

1. Развивайте насмотренность и заимствуйте решения 🔍
В дизайне все у всех учатся. Найдите референсы на Behance или других платформах, скопируйте разметку, расположение элементов или цветовые сочетания. Это не только нормально, но и помогает быстрее прийти к результату. Например, я проектировал интерфейс своего дополнения, вдохновляясь аналогичными приложениями.

2. Используйте готовые дизайн-системы 🛠
В Figma можно найти много готовых дизайн-систем — достаточно заглянуть в раздел Community. Я часто использую NextUI: у них отличная библиотека компонентов, удобный CLI для старта и тёмная тема из коробки. Это экономит кучу времени и позволяет сразу работать с удобными инструментами.

3. Используйте бесплатные ресурсы 💎
Всё, что вам нужно, можно найти бесплатно. В Figma Community есть сотни наборов иконок, графических элементов и даже готовых эмодзи. Эти ресурсы закрывают базовые потребности на раз-два.

4. Storyset — источник качественных иллюстраций 🌟
Storyset — отличный сайт с огромным выбором векторных изображений. Их можно использовать для превью или фонов. Это простой способ добавить визуальной привлекательности вашему проекту.

5. Google Fonts — ваш друг ✍️
Нужен шрифт? Загляните на Google Fonts. Все шрифты там открытые и лицензированные. Спустя время у вас появится своя подборка любимых шрифтов, и выбор больше не будет занимать много времени.

6. Изучите основы дизайна 📏
Сетки, отступы, размеры шрифтов — это ваш фундамент. Немного базовых знаний, и проектировать станет гораздо проще.

7. Попросите помощи у профессионалов 🤝
Не бойтесь привлечь дизайнера. Найти исполнителя под ваш бюджет можно на десятке разных площадок. Мне, например, специалист помог создать основу: размерная сетка, цвета. Это стало отличным стартом, и теперь я могу самостоятельно разрабатывать собственные дизайны.

Эти советы помогают мне в разработке дизайна. Иногда бывает сложно сразу представить, каким будет конечный результат, но главное — начать. Постепенно проект обретёт свою форму.

А как вы работаете с интерфейсами? Делитесь своими находками!

💾 Image Compressor - лучшее дополнение для сжатия картинок

Всем привет! 🙌

На работе часто приходится оптимизировать изображения. Для PNG — один инструмент, для SVG — другой. И каждый раз это какой-то квест: зайти, найти, сжать, а то ещё и рекламу посмотреть, пока ждёшь 😩

💡 Решение? Разработать свой!

Что было важно:
1️⃣ Поддержка форматов: PNG, JPG, SVG, WebP — всё, что нужно в одном месте.
2️⃣ Сжатие без потери качества на уровне tinypng и аналогов.
3️⃣ Удобный интерфейс: drag & drop, множественная загрузка.

А ещё — это важно! — обработка происходит локально на клиенте 💻

Никаких серверов и лишних затрат на их содержание. И, конечно, это вопрос приватности — всё остаётся у вас, что особенно ценно, если есть NDA 🔒

📌 Решил сделать это в формате Chrome Extension. Почему?

🔹 Всегда под рукой.
🔹 Полностью соответствует стеку технологий, с которым я работаю.

Прошёл путь от идеи до готового дополнения: продумал функционал, сделал дизайн и написал код. Теперь это готовый инструмент, которым уже можно пользоваться!

👉 Скачивайте Image Compressor по ссылке в Chrome Web Store и рассказывайте, как вам!

🙏 Буду благодарен вашим ⭐️ на странице дополнения и оставленному комментарию. Это очень мне поможет в продвижении на платформе!

💬 Также пишите отзывы и обратную связь под этим постом — учту их в следующих апдейтах.

🔥 Если вам интересна тема инди-разработки, накидайте огонька! В следующих постах планирую рассказать подробнее об этом и других проектах, как всё это делал, какие были подводные камни и что получилось.

P.S. Также решил добавить побольше смайликов в пост — мне кажется, получилось классно! 🎉

Новогодняя песня с ГигаЧатом 🎄

Друзья, GigaChat научился писать музыку, и как по мне получается очень круто!

Сочинил с его помощью новогоднюю песенку ⛄️

А для любителей спортзала и тяжёлого рока прилагаю метал версию 🤘

Текст песни:
Снег ложится белым ковром,
Новый год стучится в наш дом.
Мы движемся вперёд, не зная преграды,
В наступающем году нас ждут успехи и награды!

А ГигаЧат теперь песни поёт,
Он вдохновляет, и вперед нас ведёт.
Клавиатуры, JavaScript, креатив,
Серёга, твой стиль — позитивный мотив!

Скоро Новый год, в дом войдёт веселье,
IT и не только в Telegram — здесь вдохновение!
С песнями, фичами — взорвём этот год,
Сергей Константинов всех поздравляет, вперёд!

Все вместе, друзья, встречаем Новый год,
Пусть волшебство в сердце каждого зайдёт!
ГигаЧат в Telegram — всё готово для нас,
Пусть в ваших сердцах зажигается джаз!

P.S. Ниже вы можете проголосовать реакциями за версию, которая вам понравилась больше! 🔥

🚀 React 19

Основной акцент сделан на улучшении DX и упрощении работы с асинхронным состоянием. Также всё больше внимания уделяется серверному рендерингу. В целом, обновления не приведут к большим изменениям в коде, но сделают его чище.

Подробнее, что нового и как обновиться?

🔧 React Compiler

React Compiler — это инструмент для автоматической оптимизации кода. Он ускоряет рендеринг и уменьшает нагрузку на браузер. Благодаря компилятору многие оптимизации, вроде мемоизирования теперь выполняются автоматически. Ждём доклады о том, как он работает под капотом.

⚡️Actions и асинхронное управление состоянием

Actions позволяют управлять состоянием асинхронных операций, что избавляет нас от необходимости вручную обрабатывать pending-состояния, ошибки и оптимистичные обновления.

⚙️ Хук useActionState
Удобный способ отслеживать состояний Actions. Возвращает объект вида { pending: false, error: false } с текущим состоянием формы.

🔄 Хук useOptimistic
Управляет оптимистичным обновлением данных. Изменения происходят моментально, а в случае неудачи откатываются назад.

📋 Хук useFormStatus
Позволяет отслеживать состояния формы, теперь компонентом вашей дизайн системы не нужен для этого Context.

🌀 Хук useTransition
(добавлен в react v18, активно используется с actions)

Больше не нужно вручную управлять состоянием isLoading

const [isLoading, startTransition] = useTransition();

🔑 Новый API: use

use - удобная работа с асинхронностью внутри компонента. Вы можете прочесть promise const comments = use(commentsPromise); react дождётся его выполнения, после чего отрисует. В это время можно отрисовать loader с помощью Suspence.

📂 React DOM и Actions в формах

Формы в React стали умнее. Теперь можно использовать функции в action или formAction, а также автоматически сбрасывать состояние формы после успешной отправки.

📈 Новые статические API

Добавлены новые API в react-dom/static
• prerender
• prerenderToNodeStream

Они улучшают renderToString, ожидая загрузки данных для генерации статического HTML. Предназначены для работы с потоковыми средами, такими как Node.js Streams и Web Streams. Например, в web streams среде вы можете пререндерить дерево React в статический HTML с помощью prerender.

🌐 React Server Components и Server Actions

Server Components позволяет пререндерить часть вашего кода в CI или при каждом запросе к серверу, что улучшает перфоманс клиентского приложения.

Server Actions позволяют вызывать асинхронные функции на сервере прямо из компонентов.

📊 Улучшения в React 19

• Передача ref как пропса: Теперь можно передавать ref напрямую через пропсы без forwardRef.

• Ошибки гидратации: React показывает точные диффы при ошибках гидратации, что упрощает отладку.

• Контекст как провайдер: Теперь <Context> можно использовать как провайдер (Context.Provider не нужен)

• Функции очистки для refs: Подержка возврата функции очистки из ref колбэка.

• useDeferredValue с начальным значением: Добавлен initialValue для useDeferredValue:

🌍 React 19 расширяет поддержку современных стандартов:

• Поддержка метаданных документа: Теперь можно использовать тэги <title>, <meta>, <link> в вашем компоненте, они будут автоматически перемещены в <head>.

• Стили и скрипты: Также для тэгов <script> и <link rel="stylesheet"> можно задать приоритет precedence, что позволяет управлять последовательностью их подключения. Это важно т.к. последовательность подключения влияет на отображаемые результат.

• Поддержка Custom Elements: React теперь лучше работает с Web Components.

🔄 Как обновиться?

Обновление на React 19 должно быть достаточно простым, подробнее читайте в миграционном гайде с изменения и кодмодами. Рекомендую прежде обновиться на React 18.3, чтобы увидеть предупреждения о возможных несовместимостях.

Подробнее обо всём с примерами кода в официальной статье о релизе react 19.

P.S. А вы уже завели тасочку на обновление?

Bun — всё ещё экзотика или уже можно? 🔝

Начинаем уже через 10 минут

Подключиться в VK Видео в YouTube

Bun — всё ещё экзотика или уже можно?

21 ноября в 18:00 (МСК) залетаю на подкаст от UseTech, подискутировать на тему Bun'а.
Что это: хайповая технология или рабочий инструмент для продакшена?

Обсудим:
• Реальный опыт использования (Александр уже активно использует Bun в проде)
• Мифы, вопросы безопасности и миграции на Bun

Если интересно - присоединяйтесь к трансляции!

Ссылки на трансляцию: VK Видео и YouTube

Чем занимается фронтенд-разработчик — джуниор, мидл, синьор и тимлид

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

Меня нередко спрашивали об этом, поэтому считаю, что тем, кто только начинает свой путь в IT это должно быть полезно. Если кратко, чем выше грейд — тем выше ответственность и неопределённость в решаемых задачах. Если вы сейчас джуниор — будьте проактивны, если хотите расти.

А какие качества помогли вам расти? И какую стратегию роста вы использовали?

Топ 3 книги по личностному росту, которые мне откликнулись

Дисклеймер: не хочу, чтобы данные книги были восприняты как успешный успех или бизнес-литература, они о другом.

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

Самурай без меча
Истории японского полководца XVI века Хидэёси Тоётоми, прошедшего путь от крестьянина до сёгуна. Книга об истинном лидерстве и силе духа, о человеке, который вопреки всему построил себя и свою судьбу. Интересно читать как с личной, так и с исторической точки зрения.

Пусть настоящего мужчины
Книга Дэвида Дэйда, которую стоит прочесть каждому мужчине и его партнёрше тоже. Она про отношения, мужское начало, огонь внутри и страсть к работе и творчеству. Читал её давно, и, хотя содержание уже забылось, остались исключительно положительные эмоции от её прочтения.

Все три книги могу рекомендовать, как лучшие в своём роде. Хочется стереть из памяти, чтобы прочесть их снова.

А какие книги посоветуете вы? Давайте соберём полезную книжную полку в комментариях.

Накидайте реакций, если такой формат вам интересен 🔥

Сергей Константинов | IT и не только. Подписаться!

Bun vs Node — запись доклада 📱

Месяц назад на Frontend Conf 2024 я выступил с докладом, посвященным сравнению двух рантайм-сред — Bun и Node.

Так действительно ли Bun настолько хорош и быстрее Node в разы, или это все же миф и маркетинг? В каких аспектах его можно использовать уже сейчас, а в каких точно не стоит?

Чтобы разобраться, я провел кучу замеров и построил гору таблиц — все ради одного вопроса: стоит ли переезжать на Bun или это просто хайп?

Смотрите полную запись доклада по ссылке на YouTube

Как использовать ChatGPT, Notion без VPN?

Открываем настройки браузера → Выбрать поставщика услуг DNS → Добавить своего поставщика услуг DNS

Вставляем:
https://dns.controld.com/comss

Поздравляю! Теперь вам доступны chatgpt.com, notion.so и другие платформы, которые были ранее недоступны.

Также вы можете поставить DNS на уровне системы, Android устройства или Wi-Fi роутера. Подробнее читайте в статье.

Делитесь лайфхаком с друзьями! 🐾

Сергей Константинов | IT и не только. Подписаться!

Как я использую chatgpt для учебы? 📱

Я для себя выработал следующую стратегию обучения: я прошу chatgpt объяснить на примерах. На днях читал сложно написанную статью о работе промисов, и автор умудрился так всё расписать, что мне было совершенно ничего не понятно. Я попросил chatgpt-o1 объяснить мне на примерах, что имеет в виду автор. И моментально мне всё стало ясно!

Если я разрабатываю что-то с использованием новых для меня технологий, я прошу GPT реализовать это за меня, но не с целью скопировать → вставить, а чтобы узнать какие инструменты существуют для решения моего вопроса. Далее я уже иду в документацию и изучаю данные инструменты, параллельно используя их в проекте.

Вы легко можете попасть в ловушку, если будете использовать chat только лишь с целью скопировать → вставить. Причина в том, что gpt всё же машина и ему свойственно ошибаться. Однажды, я так потратил день в попытках раздебажить несуществующий API библиотеки.

Ключевое - использовать оригинальный chatgpt.com, а не различных telegram ботов. Не смотря на то, что они ходят в openai по API key, зачастую я наблюдал худший перфоманс их работы.

Накидайте реакций, если вам интересно, в каких сценариях я еще активно использую нейросети.

Сергей Константинов | IT и не только. Подписаться!

Node.js v23

Вчера был выпущен релиз Node.js v23, поддержка которого продлится до июня 2025 года.

Вот основные нововведения:

1. TypeScript (экспериментально):
Поддержка TypeScript через новые флаги --experimental-strip-types и --experimental-transform-types. Пока только очистка типов без полной проверки, но это важный шаг к интеграции TypeScript.

2. ESM и require():
Включена возможность по умолчанию загрузки ESM-модулей через require() в синхронном режиме.

3. Web Storage API (экспериментально):
Поддержка API localStorage и sessionStorage для хранения данных, движемся ближе к общим с браузером стандартам.

4. SQLite API (экспериментально):
Добавлен встроенный SQLite API для работы с базами данных SQL, с возможностью хранения в памяти.

5. Команда node --run:
Теперь стабильна и позволяет запускать скрипты прописанные в package.json.

6. Кэширование кода:
Кэширование скомпилированного кода на диске, для ускорения запуска модулей через переменную NODE_COMPILE_CACHE.

7. Оптимизация Buffer
Увеличена производительность методов Buffer, что значительно увеличивает производительность методов Buffer.copy() и Buffer.write().

8. Производительность node:fs
Повышена производительность модуля node:fs, в котором также сокращено число вызовов кода на C++

9. V8 обновлён до 12.9:
Новая версия движка V8, аналогичная используемой в Chromium 129.

10. Удаление поддержки 32-битных Windows.

Официальный release notes node.js v23
Перевод в статье на habr.com

Путь фронтенд-разработчика. От рождения до тимлида 📝

Яндекс Практикум попросил написать меня статью о том, как строиться карьера разработчика. В своей первой статье на хабр, я рассказал о тех жизненных этапах, которые предстоит пройти разработчику с момента его "рождения" до выхода на стабильное плато развития и того уровня, ради которого многие идут в IT.

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

Поздравим меня с дебютом на хабре! 🔥

Челлендж по программированию 👨‍💻

Нашёл ресурс pythonchallenge.com, на котором зависал, когда ещё был студентом.

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

Всего 33 уровня, я пока остановился на 4.

Рекомендую попробовать и вам, затягивает!

Ура, котик снова с нами в канале! 👍

Всего за несколько часов вы накидали целых 31 буст, и теперь канал вырос до 5-го уровня! Теперь у нас доступно целых 5 кастомных эмодзи — будем выбирать ещё!

Огромное спасибо каждому, кто поддержал бустом, реакцией или репостом! Вы супер! 🤩

Юмор с эфира: какой язык выбрать?

— Какой язык программирования выбрать: Java или Python?
— JavaScript!

Выступаю здесь через 10 минут 😎

10 октября в 19:00 приглашаем на прямой эфир «Основано на реальных событиях: как устроен найм в IT глазами экспертов»

Проведём встречу с наставниками Практикума в формате стендапа. Приходите, если вы думаете о старте карьеры в IT: хотите учиться новой профессии, но пока не определились, как и где. Вы узнаете, как выбрать направление по душе, прокачать навыки и получить первый оффер.

Обсудим:
⏺️ смену профессии и поиск работы — вне зависимости от возраста и точки A;
⏺️ онлайн-обучение и процедуру найма;
⏺️ реальные кейсы правильных откликов на вакансии;
⏺️ лайфхаки для успешного прохождения собеседований.

Ссылка на трансляцию:
https://facecast.net/w/euuays

Canvas - пишем код в ChatGPT

OpenAI зарелизили рабочую среду Canvas. Здесь можно писать код, проводить код-ревью, искать ошибки, комментировать и рефакторить как душе угодно.

Звучит хайпово. Стало куда удобнее работать с кодом в чате. Сам пока не тестил, прикрепляю видео интро.

Репозиторий с бенчмарками

Как обещал, делюсь с вами ссылкой на репозиторий bun-vs-node-benchmarks, где собраны все бенчмарки, которые я использовал для тестирования.

Больше информации и ссылок вы найдёте в презентации с доклада.

Frontend Conf 2024 💛

Вот и подошла к концу ежегодная крупнейшая конференция по фронтенду. Принять участие в этом ивенте безумно круто, а быть в роли спикера — совершенно другой уровень!

Хочу выразить особую благодарность всем членам ПК за такую классную атмосферу и организацию. В особенности хочу сказать спасибо Алексею Авдееву, Зару Захарову и Андрею Смирнову за помощь в подготовке и конструктивный фидбэк, который помог создать содержательный, интересный и динамичный доклад.

Был рад пообщаться со всеми, с кем довелось пересечься. Рад был встретить уже знакомые лица спикеров и участников, в том числе с прошлых конференций.

До встречи в следующем году!

GoodbyeDPI получил апдейт, который пофиксил все существующие проблемы прошлой версии

Чтобы опять смотреть YouTube в 4К, нужно:

🔴Скачать последнюю версию тут;
🔴Запустить файл 1_russia_blacklist_YOUTUBE.cmd;
🔴Если не сработало, то запускаем 1_russia_blacklist_YOUTUBE_ALT.cmd;

Важно: для корректной работы нужно отключить поддержку Kyber в настройках Chrome. Это можно сделать по маршруту chrome://flags

Сергей Константинов | IT и не только. Подписаться!

Когда пытаешься понять Event Loop 😁

Frontend Conf 2024

Уже совсем скоро начнётся конференция Frontend Conf 2024. В прошлом году я пропустил участие в качестве спикера, но в этом дал себе слово обязательно выступить. Доклад получился по настоящему содержательным и интересным, об этом даже написал Зар Захаров в своём блоге.

Доклад посвящен сравнению Bun с Node. Действительно ли Bun настолько хорош, как нам заявляют статьи? Те кто подписан на канал знают, что не всё так просто. И не смотря на противоречия, я нашел то, что можно использовать уже сегодня и это работает хорошо!

Кстати, конференция пройдёт с 30.09-01.10. Я выступаю 1 октября в 13:20, и если кто будет на конференции - приходите на доклад, буду рад пообщаться!

P.S. Накидайте историй успешного или не успешного использования Bun? А может вы пробовали Deno?

@ts-check

Когда ты, маленький проказник, пишешь // @ts-ignore в своем проекте, наверняка замечал и ни раз, что IDE предлагает набрать // @ts-check и задавался вопросом: «а что он делает?»

@ts-check это директива, позволяющая включить проверку типов TypeScript внутри вашего JavaScript файла. Это очень удобно, по сколько далеко не всегда нам нужен TS и маленькие проекты, порой, быстрее написать на JS. А если к этому добавить и JSDoc, то мы получим полностью типизированную функцию.

Как это работает?

Подключим @ts-check в начале файла и опишем функцию greet, а для того, чтобы TS имел информацию об ожидаемых и возвращаемых типах в функции задокументируем её с помощью JSDoc.

// @ts-check
/**
 * @param {string} greeting
 * @return {string}
*/

function greet(greeting) {
  return greeting;
}
greet('Hello');


Вуаля! Мы получили типизированную функцию в JS файле. На самом деле, JSDoc писать не обязательно, только лишь подключение ts-check нам уже сильно упростит жизнь в работе с IDE, однако типизация функции будет any.

Figma презентации

Искал новый инструмент для презентаций на Windows. Power Point мощный, но неудобный, а Keynote в браузере совсем не то, что нативный на MacOS.

Решил попробовать Figma Slide Deck. Составил для вас небольшое ревью.

Плюсы:
+ Удобный инструмент, ничего лишнего, только нужные инструменты: текст, таблицы, картинки
+ Возможность взаимодействия с пользователем посредством стандартных виджетов
+ Классическая фигма, адаптированная под создание слайдов

Минусы:
- Добавление видео только в платной версии
- Отсутствует анимация текста, элементов на странице
- Анимация слайда smart animate работает кривовато (в сравнении с keynote)
- Нет возможности экспорта в pptx, key и др., только pdf

Как инструмент, чтобы быстро накидать слайды без особого интерактива: только текст, картинки и таблицы - отлично. Если нужны анимации, рекомендую посмотреть в сторону других инструментов.

Будущее фронтенд-разработки

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

Ловите вторую часть докладов секции, первая здесь

1) Хроники Valibot: Сага о безупречных данных в мире JS. Вадим Царегородцев (Островок!)

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

2) Bun vs Node. Сергей Константинов (Сбер)

Большинство использует Node.js в качестве рантайма для JS. Альтернативные проекты активно развиваются. Например, Bun утверждает, что он быстрее Node.js. Так ли это? Много хардкора и метрик.

Присоединяйтесь к нам 30 сентября и 1 октября на FrontendConf 2024 🙌

✅ Программа конференции, расписание и билеты на сайте

Bun vs Node: Bundler

Продолжаю готовиться к конференции и гоняю бенчмарки. В этот раз дело дошло до сборщиков. Спасибо Зару Захарову за предоставленные бенчмарки. Я их расширил добавив Bun в качестве сборщика.
Бенчмарк представляет собой сборку 1000 react typescript компонентов, здесь можно посмотреть исходный код.

Результат меня поразил.
В таблице вы можете видеть сравнение всех сборщиков: bun, vite, next, webpack, parcel. А также их зависимость от запусков с помощью npm run build и bun run build.

Bun собирает проект за невероятные сотые доли секунды. Всего 0.072 сек. потребовалось bun, чтобы собрать проект. Напротив, webpack собирает за 12.8 сек., а самое быстрое до сего момента решение vite - за 3.01 сек. Самый медленный оказался parcel с 14.53 сек.

Предполагаю, что краеугольным камнем всех сборщиков стал typescript. Возможность bun'a обрабатывать TS сразу под капотом дало ему невероятное ускорение.

Есть ли у вас идеи, как мы можем составить конкуренцию Bun в этом бенчмарке?

Обход блокировки YouTube 📱

Недавняя блокировка YouTube подставила под сомнение использование платформы и ведение канала, однако быстро нашлось решение.

Проблема заключается в том, что во время установки SSL соединения, домен, к которому мы подключаемся, передается в открытом виде. И если это googlevideo.com то начинают твориться "интересные вещи". Подробнее об этом, а также об обходе блокировки на уровне роутера для всей сети можно почитать в статье на хабре.

Однако, я предложу более простое решение, которое работает на Windows для вашего компьютера.

1. Скачайте последнюю версию, распакуйте архив (goodbyedpi-0.2.3rc1-2.zip)

2. Запустите 1_russia_blacklist.cmd

Подробнее о вопросах относительно софта читайте в обсуждении на github.

Имейте ввиду, это скрипт, который работает только лишь во время, когда он запущен. Чтобы удалить программу достаточно завершить процесс.

Надеюсь, что данный пост был вам полезен и сделает вашу жизнь немного комфортнее :)

UPD. Решения для всех систем: MacOS, Windows, Linux смотри в треде к этому посту

Сергей Константинов | IT и не только. Подписаться!

Алтай

Отдохнул на Алтае. Группа великолепная, команда сопровождения - огнище, тур - пушка ракета 🚀

Ментально и физически оздоровился, впечатлениями зарядился, на конях покатался. Теперь можно работать!

Было время, когда работал 4 года без отпусков, сейчас стараюсь находить время для таких путешествий. Рекомендую 🔥

А вы часто путешествуете?