Webflow → Next.js без фронтендеров: как мы перенесли 500+ страниц сайта через Cursor
#почитать
Нам нужно было оперативно увезти наш сайт с Webflow: 500+ страниц, блог и база знаний. При этом возвращать фронтенд-разработку в режим постоянной поддержки сайта мы не хотели. Поэтому рассматривали конструкторы и CMS, но быстро поняли, что это будет работа в минус. Все усилия на переезд лишь вернули бы сайт в рабочее состояние, не дав новых возможностей.
В итоге мы решили вести разработку и поддержку сайта в Cursor. То есть переписать его на NextJS с помощью AI агентов. Такая связка дала понятную модель страниц, быструю доставку статики и ISR для контента, а также возможность отказаться от отдельной CMS за счёт MDX.
В спокойном режиме за два месяца удалось полностью переписать сайт и запустить его в прод.
⏱ Читать статью
#почитать
Нам нужно было оперативно увезти наш сайт с Webflow: 500+ страниц, блог и база знаний. При этом возвращать фронтенд-разработку в режим постоянной поддержки сайта мы не хотели. Поэтому рассматривали конструкторы и CMS, но быстро поняли, что это будет работа в минус. Все усилия на переезд лишь вернули бы сайт в рабочее состояние, не дав новых возможностей.
В итоге мы решили вести разработку и поддержку сайта в Cursor. То есть переписать его на NextJS с помощью AI агентов. Такая связка дала понятную модель страниц, быструю доставку статики и ISR для контента, а также возможность отказаться от отдельной CMS за счёт MDX.
В спокойном режиме за два месяца удалось полностью переписать сайт и запустить его в прод.
Please open Telegram to view this post
VIEW IN TELEGRAM
😁3
3 сентября(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.
Как это будет:
Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.
Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot
Реклама.
О рекламодателе.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1🔥1
Даём возможность пользователям сайта самим менять размер блоков, потянув указателем мыши за край или угол
#почитать
В статье представлено всё необходимое, чтобы осуществить вынесенное в заголовок (плюс поддержка сенсорного ввода), а так же готовое open source решение, которое можно просто подключить и пользоваться.
⏱ Читать статью
#почитать
В статье представлено всё необходимое, чтобы осуществить вынесенное в заголовок (плюс поддержка сенсорного ввода), а так же готовое open source решение, которое можно просто подключить и пользоваться.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
JavaScript Distributed Assets — это просто
#почитать
Идея вот в чем: берем стандартные JavaScript модули (ESM) и делаем их прямыми эндпоинтами для генерации любых текстовых веб-ассетов, таких как HTML-файлы, CSS, SVG или даже JSON или Markdown, используя простое соглашение о именовании исходных файлов и дефолтный экспорт результата в виде строки (JavaScript Template Literal). Проще некуда и чем-то похоже на PHP, верно? Но, что это нам дает?
Давайте разберемся, почему JSDA (JavaScript Distributed Assets) - это то, что может сделать веб-разработку "грейт эгейн", после тысячи поворотов "не туда".
⏱ Читать статью
#почитать
Идея вот в чем: берем стандартные JavaScript модули (ESM) и делаем их прямыми эндпоинтами для генерации любых текстовых веб-ассетов, таких как HTML-файлы, CSS, SVG или даже JSON или Markdown, используя простое соглашение о именовании исходных файлов и дефолтный экспорт результата в виде строки (JavaScript Template Literal). Проще некуда и чем-то похоже на PHP, верно? Но, что это нам дает?
Давайте разберемся, почему JSDA (JavaScript Distributed Assets) - это то, что может сделать веб-разработку "грейт эгейн", после тысячи поворотов "не туда".
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Как функциональное программирование изменило фронтенд и почему отрасль возвращается к платформе
#почитать
⏱ Читать статью
#почитать
Недавно я наткнулась на статью «How Functional Programming Shaped Modern Frontend» и неожиданно поймала себя на мысли: мы уже настолько привыкли к функциональному программированию (ФП) в JavaScript, что забыли, как всё начиналось и почему многие идеи казались почти спасением. Чтобы лучше понять эволюцию, я решила посмотреть, что писали разработчики о ФП во фронтенде 10 лет назад, примерно в 2013-2016 годах.
Контраст получился довольно яркий: от искреннего восторга до постепенного прозрения.
Я решила поделиться своим анализом, основанным на современных наблюдениях и на тех статьях прошлого, где ФП воспринималось как путь к «правильному» фронтенду.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Анимированный UI: как улучшить взаимодействие с пользователем
#почитать
Анимация пользовательского интерфейса прошла долгий путь за последнее десятилетие, они превратились в универсальный цифровой язык, который люди узнают и понимают. Эти микровзаимодействия позволяют дизайнерам общаться с пользователями посредством движения и анимации, предоставляя им рекомендации, контекст и создавая захватывающий пользовательский опыт.
В продакшене анимация всегда балансирует между выразительностью и производительностью. Чем сложнее сцена, тем выше нагрузка на процессор, особенно на мобильных устройствах. Поэтому важно оптимизировать: использовать GPU-дружественные свойства (transform, opacity), избегать тяжёлых reflow, а для сложных эффектов — применять библиотеку, которая работает с отложенным рендерингом, например Framer Motion или GSAP. Это не только повышает плавность, но и снижает энергопотребление, что прямо влияет на опыт пользователя.
⏱ Читать статью
#почитать
Анимация пользовательского интерфейса прошла долгий путь за последнее десятилетие, они превратились в универсальный цифровой язык, который люди узнают и понимают. Эти микровзаимодействия позволяют дизайнерам общаться с пользователями посредством движения и анимации, предоставляя им рекомендации, контекст и создавая захватывающий пользовательский опыт.
В продакшене анимация всегда балансирует между выразительностью и производительностью. Чем сложнее сцена, тем выше нагрузка на процессор, особенно на мобильных устройствах. Поэтому важно оптимизировать: использовать GPU-дружественные свойства (transform, opacity), избегать тяжёлых reflow, а для сложных эффектов — применять библиотеку, которая работает с отложенным рендерингом, например Framer Motion или GSAP. Это не только повышает плавность, но и снижает энергопотребление, что прямо влияет на опыт пользователя.
Please open Telegram to view this post
VIEW IN TELEGRAM
Не спешите выкидывать Webpack: разбор альтернатив и реальных сценариев миграции
#почитать
Вокруг сборщиков последние годы кипят страсти: большинство боготворит Vite, кто-то экспериментирует с esbuild, а энтузиасты активно продвигают инструменты на базе Rust — прежде всего Rspack и SWC. На фоне этого Webpack нередко называют пережитком, который якобы тормозит развитие команд.
Но жизнь реальных продуктов куда сложнее, чем пишут в соцсетях. Иногда Webpack остается единственным зрелым вариантом. А иногда — мешает и действительно требует замены. В этой статье я попробую разобраться, откуда вообще взялись сборщики и что именно происходит внутри Webpack, насколько современные альтернативы действительно готовы его заменить, почему в Рунити мы осознанно продолжаем использовать Webpack в основных продуктах и в каких случаях смена сборщика действительно имеет смысл, а в каких может обернуться лишней тратой времени и сил без ощутимой выгоды.
⏱ Читать статью
#почитать
Вокруг сборщиков последние годы кипят страсти: большинство боготворит Vite, кто-то экспериментирует с esbuild, а энтузиасты активно продвигают инструменты на базе Rust — прежде всего Rspack и SWC. На фоне этого Webpack нередко называют пережитком, который якобы тормозит развитие команд.
Но жизнь реальных продуктов куда сложнее, чем пишут в соцсетях. Иногда Webpack остается единственным зрелым вариантом. А иногда — мешает и действительно требует замены. В этой статье я попробую разобраться, откуда вообще взялись сборщики и что именно происходит внутри Webpack, насколько современные альтернативы действительно готовы его заменить, почему в Рунити мы осознанно продолжаем использовать Webpack в основных продуктах и в каких случаях смена сборщика действительно имеет смысл, а в каких может обернуться лишней тратой времени и сил без ощутимой выгоды.
Please open Telegram to view this post
VIEW IN TELEGRAM
React vs Vue: Что выбрать в 2026?
#почитать
Этот выбор напоминает мне подбор гардероба для важного мероприятия: ошибешься — и проект ждут дополнительные проблемы, угадаешь — и ты на вершине успеха! Чтобы не попасть в просак с выбором, давайте детально разберем ключевые различия между React и Vue и определим, на что стоит обратить внимание.
⏱ Читать статью
#почитать
Этот выбор напоминает мне подбор гардероба для важного мероприятия: ошибешься — и проект ждут дополнительные проблемы, угадаешь — и ты на вершине успеха! Чтобы не попасть в просак с выбором, давайте детально разберем ключевые различия между React и Vue и определим, на что стоит обратить внимание.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Разберём фронтенд слой за слоем 🥐
30 сентября встречаемся на VK Frontend Meetup SPB. Разберёмся в том, что видит пользователь, а дальше перейдём к архитектуре, инструментам и процессам, которые помогают масштабировать разработку.
В программе 3 доклада:
🔵 Как в MAX разработали собственную архитектуру для стабильных анимированных стикеров
🔵 Как в Одноклассниках учат AI работать с реальной дизайн-системой и существующими компонентами
🔵 Как в Почте Mail запускают 300 промо в год
После докладов — фуршет и неформальное общение. Можно будет задать вопросы спикерам, обсудить выступления и поспорить о том, какой слой фронтенда самый сложный.
🗓 30 сентября, 19:00
📍 Санкт-Петербург, офис VK у Красного моста
Встреча пройдёт только офлайн, записей докладов не будет.
Регистрация — по ссылке
30 сентября встречаемся на VK Frontend Meetup SPB. Разберёмся в том, что видит пользователь, а дальше перейдём к архитектуре, инструментам и процессам, которые помогают масштабировать разработку.
В программе 3 доклада:
После докладов — фуршет и неформальное общение. Можно будет задать вопросы спикерам, обсудить выступления и поспорить о том, какой слой фронтенда самый сложный.
Встреча пройдёт только офлайн, записей докладов не будет.
Регистрация — по ссылке
Please open Telegram to view this post
VIEW IN TELEGRAM
💩4👍1
Создаем UI-Kit на React: пошаговое руководство по настройке
#почитать
Подготовили материал, в котором подробно разберем процесс настройки UI‑Kit на React — от установки зависимостей до сборки готового пакета. Ниже в статье вы прочитаете о полном цикле разработки: сборке, тестировании, линтинге и документации.
⏱ Читать статью
#почитать
Подготовили материал, в котором подробно разберем процесс настройки UI‑Kit на React — от установки зависимостей до сборки готового пакета. Ниже в статье вы прочитаете о полном цикле разработки: сборке, тестировании, линтинге и документации.
Please open Telegram to view this post
VIEW IN TELEGRAM
Как работают современные браузеры
#почитать
В этой серии статей мы подробно рассмотрим, как устроены современные браузеры, сделав акцент на архитектуре и внутреннем устройстве Chromium, но также отметим ключевые отличия в других браузерах. Мы рассмотрим весь цикл: от сетевого стека и конвейера парсинга до рендеринга с помощью Blink, выполнения JS с помощью движка V8, загрузки модулей, многопроцессной архитектуры, песочниц безопасности и инструментов разработчика. Главная цель — дать понятное и доступное объяснение того, что происходит в браузере "под капотом".
⏱ Читать статью
#почитать
В этой серии статей мы подробно рассмотрим, как устроены современные браузеры, сделав акцент на архитектуре и внутреннем устройстве Chromium, но также отметим ключевые отличия в других браузерах. Мы рассмотрим весь цикл: от сетевого стека и конвейера парсинга до рендеринга с помощью Blink, выполнения JS с помощью движка V8, загрузки модулей, многопроцессной архитектуры, песочниц безопасности и инструментов разработчика. Главная цель — дать понятное и доступное объяснение того, что происходит в браузере "под капотом".
Please open Telegram to view this post
VIEW IN TELEGRAM
ДА! Вайбкодинг реально начали проверять на интервью, поэтому мы нашли собеседующего, который проводит AI-секцию в международном финтехе, чтобы вы увидели что на ней спрашивают и как к ней подготовиться
Как это будет:
Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят сменить работу, повысить свой грейд, ЗП и прокачать скиллы.
Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot
Реклама.
О рекламодателе.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1👍1
Грани полиморфизма React: полиморфные декораторы
#почитать
Мы поговорили уже про as для типобезопасного полиморфизма, asChild для композиции и FACC для вариативного дизайна. Но что, если я скажу, что есть способ комбинировать логику ещё элегантнее и не смешивать ее с отрисовкой? Сегодня разбираем полиморфные декораторы - HOC'и на стероидах.
⏱ Читать статью
#почитать
Мы поговорили уже про as для типобезопасного полиморфизма, asChild для композиции и FACC для вариативного дизайна. Но что, если я скажу, что есть способ комбинировать логику ещё элегантнее и не смешивать ее с отрисовкой? Сегодня разбираем полиморфные декораторы - HOC'и на стероидах.
Please open Telegram to view this post
VIEW IN TELEGRAM