В этом году JavaScript исполняется 30 лет.
За три десятилетия он прошел путь от забавного и непритязательного скриптового языка, созданного за 10 дней, до самого популярного языка программирования в мире. Ниже — ключевые моменты истории JavaScript, которые помогут понять, как он менялся и куда идет.
Статья написана для юзверя (в том числе разработчика) с базовыми знаниями работы в операционной системе, консолью, IDE и браузером.
В статье рассматривается инструкция для установки LLM локально на ПК юзверя для обхода проблем работы с удаленными серверами. Также статья поможет в совсем базовом понимании работы с LLM.
Здесь будет рассматриваться IDE VSCode, однако всё нижеописанное актуально и для JB Webstorm или Pycharm (и др).
Каждый, кто использует Vue для разработки, так или иначе встречается с необходимостью выполнить какое‑либо побочное действие при изменении значений, и сразу в голове возникает мысль о двух методах‑наблюдателях — Watch и WatchEffect.
Как работают эти 2 метода можно узнать из великолепной документации Vue, а в этой статье мы посмотрим на примеры самых часто используемых компонентов вместе с наблюдателями — по 2 компонента на каждый метод — а заодно вы сможете больше понять принцип их работы.
По ходу статьи также будут приведены некоторые полезные библиотеки Vue, которые часто используются в разработке.
Раньше было лучше? Не уверен. Еще 10 лет назад я тестировал без ИИ: искал ошибки, писал отчеты, огребал от разрабов. А теперь — всё в 5 раз быстрее, и пока вам несут матчу на кокосовом, можно словить и починить баги. В статье — гайд + код.
В этой серии статей мы пройдемся по каждому этапу работы V8: лексическому и синтаксическому анализу, построению AST, интерпретации и оптимизациям. Затронем Ignition, Sparkplug, Maglev и Turbofan; разберемся с hidden classes, байт-кодом, и много чем еще. Углубимся во все этапы достаточно, чтобы понимать, за что отвечает каждый из них.
В этой части посмотрим на лексический и синтаксический анализ.
Разработка чат-приложения с нуля может показаться довольно сложной задачей. Но при наличии правильных инструментов все становится намного проще, чем вы думаете.
В этой серии из трех частей мы подробно рассмотрим процесс создания клона веб-версии Telegram с использованием Next.js, TailwindCSS и Stream SDK. В первой части мы настроим все необходимые инструменты для нашего проекта, добавим аутентификацию и создадим макет приложения с помощью TailwindCSS.
Важность надежной обработки запросов в оффлайн-режиме невозможно переоценить, особенно для приложений, которые должны функционировать и в отсутствии интернет-соединения. Workbox - это мощный инструмент для управления Service Worker в браузерах, он как раз призван решать подобную задачу при помощи соответствующего плагина, но поддержка Background Sync API не универсальна. В этой статье я покажу, как расширить Workbox, чтобы Background Sync корректно работал даже на платформе iOS/Safari.
Даже самые зелёные новички в вебе знаю, что скрипты JS, нужно располагать в самом низу страницы перед закрывающим тегом `` и всё знаю что это повышает скорость загрузки страницы. Но Вы когда-нибудь задумывалась почему оно так?
JavaScript по своей природе однопоточный язык, но мало того, он делит этот единственный поток сразу с HTML и CSS. Это приводит к тому, что встречая тег <script>, браузер начинает, исполнять его код, при этом останавливая дальнейшую обработку HTML и CSS и в результате пользователь наблюдает белый экран, вместо сайта, до тех самых пор пока, браузер не закончит с кодом JavaScript. Именно потому убирая подключения скриптов, в самый конец страницы, мы даём интерфейсу сайта максимально быстро погрузится и не бесить пользователей белой простынёй.
Но подобный подход годен не везде, иногда жизненно необходимо, чтобы код JS, начал исполнение как можно раньше. Да и при подключении в самом низу, крупный JS-бандл, может здорово подкосить перфоманс сайта. Как быть в таких ситуациях? Смирится с тем что пользователи будут испытывать определённый дискомфорт во время загрузки сайта? Конечно же нет, можно попробовать вынести наш код в веб-воркеры!
Что делать, если во дворе появился строительный забор?
Или уже начали вырубать деревья?
Самое время задуматься над созданием системы мониторинга.
Идея этой статьи родилась во время задушевных разговоров на кухне и за утренним кофе с коллегами. Началось все с вопроса: «Что ты сказал бы себе прошлому, чтобы релизы стали легче, а спринты прекраснее?» Конечно, в тот момент я ничего дельного не ответил, но, кажется, наконец‑то сформулировал идеальную фразу: «Настоящий разработчик, Слав, это не тот, кто с сияющим макбуком и вкусным смузи. Разработчик — тот, кто делает то, что нужно сделать. И в легаси покопаться приходится, и memory leak дебажить, а он всё равно делает, потому что так надо».
Привет, Хабр! Меня зовут Вячеслав Чащухин, я — разработчик в МойОфис. Занимаюсь мобильной версией Squadus — цифрового рабочего пространства для совместной работы и деловых коммуникаций.
Обращаю ваше внимание на то, что эта статья — не инструкция по решению всех проблем. Скорее, чек‑лист причин, которые, по моему мнению, чаще всего приводят к тем или иным проблемам. Поэтому в некоторых пунктах будут ссылки или упоминания возможных решений. Я объединил проблемы по группам. Если вы обнаружили в своем приложении подлагивания или не хотите их обнаружить в будущем, рекомендую пройтись по пунктам :)
Эта история прежде всего для родителей первоклашек, которые летом должны много прочитать. Программирования тоже немного будет, но главное — хотелось просто поделиться инструментом, надеюсь, полезным.
Первоклашке за лето нам нужно прочитать 39 произведений. Объём довольно приличный, поэтому подумалось, что нужно применить планирование, мониторинг и прочие технологии управления.
Привет, Хабр! Меня зовут Никита Ли, я Frontend-разработчик в группе Рунити. Так тяжело бывает удержаться от того, чтобы не усложнить себе жизнь, не так ли? Все любят смотреть на чистый и понятный код, но не все его таким пишут. Сделать его таким помогают наши друзья — форматировщики и линтеры. О них и пойдет речь в этой статье, а конкретно о ESLint Stylistic.
Любой автор хочет, чтобы его кто-то читал, даже на JavaScript, но просматривать читателю хочется грамотный и красивый текст. ESLint анализирует код, выявляя ошибки, чтобы программы выходили из под клавиатуры чистыми и без ошибок. Prettier, в свою очередь, как инструмент форматирования делает текст исходного кода программ единообразным. Оба этих инструмента являются практически стандартом, когда речь заходит о качестве кода. Думаю, что многие сталкивались в проектах с их одновременным применением, что в целом логично — форматирование != линтинг. Однако это решение не всегда обосновано, а зачастую излишне. В качестве альтернативы я предлагаю рассмотреть ESLint Stylistic. В этой статье разберемся, что это, откуда появился инструмент и почему с ним стоит познакомиться.
Привет! Меня зовут Андреева Саша, я веб-разработчик в компании iSpring. Два года назад мы столкнулись с тем, что всё больше и больше страниц нашего ведущего сайта начали падать в выдаче, а рост органического трафика заметно уменьшился. Основной причиной было то, что просели показатели сайта — мы постоянно обновляли страницы, но не уделяли должное внимание оптимизации. Мы проанализировали показатели, выбрали инструмент для отслеживания данных по всем страницам, в нём же настроили алерты и взялись за активную работу по оптимизации.
Перед вами рабочий чек-лист, в нём собраны основные наработки и советы по оптимизации, которые мы реализовали и продолжаем применять. Если вы работаете с CMS, то помимо перечисленных, есть дополнительные способы улучшить показатели — спрашивайте в комментариях :)
Angular 20 — это мощное обновление, которое делает разработку веб-приложений быстрее, удобнее и современнее. Новые возможности шаблонов, стабильные сигналы, поддержка zoneless режима и интеграция с AI позволяют создавать высокопроизводительные приложения с минимальными усилиями. В этой статье разберём ключевые нововведения Angular 20 и покажем, как их использовать в ваших проектах.
На конференции React прошлым летом команда объявила, что Remix «уходит в спячку».
К тому моменту Remix v2 стал настолько тонкой обёрткой над React Router, что между проектами возникло искусственное разделение. Чтобы упростить архитектуру фреймворка, команда перенесла код сборщика и серверного рантайма из Remix непосредственно в React Router v7, объединив всё лучшее из фреймворка в так называемый “framework mode” для роутера. Также было объявлено о планах добавить ограниченную поддержку React Server Components (RSC) в React Router.
Эта работа была завершена: версия 7 была выпущена в ноябре прошлого года, а в конце мая была представлена предварительная поддержка RSC. Теперь разработчики, использовавшие Remix v1, v2 или более ранние версии React Router, могут рассчитывать на стабильную платформу с долгосрочной поддержкой.
Теперь же, пришло время заняться Remix!
Рад приветствовать тебя,%username%. В этой статье я поделюсь тем, как создать вращающуюся ручку (в зарубежной литературе именуемой Knob). Далее по тексту я её буду называть «кноб». Перейдём к сути вопроса.
Что меня сподвигло на написание данной статьи, или как я докатился до жизни такой
Когда‑то давно, будучи ещё совсем зелёным и несмышлёным кодером, мне взбрело в голову сделать своё приложение. Моих знаний хватало на какой‑нибудь «Hello, World!», но кое‑что выдать я мог. И на тоот момент мне позарез нужно было реализовать кноб — тот самый круглый регулятор, который можно крутить и он будет менять значения. И как любой уважающий себя программист, я сразу же полез гуглить стековерфлоу и прочее непотребство, дабы найти тот самый рецепт хлеба сладкого ответ на вопрос, который так долго меня волновал. Однако перешерстив весь интернет, ничего путёвого я не нашёл. Расстроившись, я забил на эту идею. Но какие‑то угольки веры в то, что у меня получится это сделать, тлели в моей охолодевшей к этому миру душонке. И вот на днях, когда я начал работать над своим проектом (небольшая программка, если она найдёт отклик в народных массах, то и по ней напишу парочку руководств, но пока что спустимся на землю), мне опять ударила моча в голову с этими кнобами. Тем более, что все предпосылки ведут именно к этому. Они нужны в интерфейсе. Забравшись в православный яндекс и одновременно в бездуховный гугл, я опять наткнулся на мель отсутствия нужной мне информации. Были только решения с какими‑то библиотеками и интересными историями на jQuery. Плюнув на всё и засучив рукава, я вдруг осознал, что этот мир нуждается в моём компетентном и всем так очень нужном мнении (спойлер: нет). Тогда я принялся за gehirnsturm и молниеносно придумал пару решений. Первое заключалось в SVG на основе path, но оно показалось мне чересчур геморройным. Там много JS надо написать, но не надо никаких стилей зато. И вот второе решение отчасти продолжает идею первого, но с некоторыми отличиями: оно немножко проще в том плане, что начальное, конечное и текущее значение, а также шаг уже вмонтированы в него, что существенно сокращало труды мои праведные. Но, как гласит закон сохранения энергии, энергия не приходит и не уходит, она лишь изменяется. Поправьте, если не так. А это значит, что если где‑то стало проще, то где‑то стало сложнее.
Часть 2: Настройка GitHub Actions и GitLab CI – первый workflow и деплой
В первой статье мы разобрались с основами CI/CD: что это такое, зачем нужно и какие инструменты существуют. Теперь пришло время перейти от теории к практике – создадим наши первые рабочие CI/CD-конвейеры на GitHub Actions и GitLab CI.
Этот пост — мой личный разбор по итогам двух недель разработки простой файловой CMS для одного из моих пет-проектов. Мне нужен был SSR-сайт с мультиязычным контентом — около десятка страниц на двух языках. Всё под Git-контролем, переводы я делал вручную через DeepSeek API и выкладывал на продакшн через GitHub Actions.
В какой-то момент стало понятно: отслеживать и переводить все мелкие изменения вручную — неудобно и утомительно. Тогда я решил автоматизировать этот процесс и взял в напарники ИИ. Не для вайбкодинга и генерации «по настроению», а для настоящего парного программирования.
Результат — рабочий open-source проект, который можно развернуть, изучить и использовать. Но главное — это опыт. Это была не просто реализация CMS, а переосмысление роли ИИ в разработке. Под катом — мои подходы, наблюдения и выводы.
На этой неделе команда Angular отметила значимый юбилей в истории развития своего фреймворка — 20-ю мажорную версию! Лучше повода не найти, чтобы удариться в ностальгические воспоминания про путь развития Angular за последние 5 лет — за десять последних мажорных версий.
Предлагаю нестандартный подход к изучению темы. Возьмем непопулярную точку зрения: мой многолетний опыт разработки огромной коллекции библиотек с компонентами под Angular — продукт под названием Taiga UI. В статье мы опустим многие заезженные фичи каждой мажорной версии Angular и сфокусируемся на кажущихся мелочах, которые стали значимыми шагами в истории развития нашего семейства библиотек. Я постараюсь на время статьи дать примерить шкуру разработчика Angular UI Kit!
Еще в бытность джунни, я наткнулся на милейшую интерактивную обучалку по селекторам CSS: CSS Diner. Кто не знает — обязательно посмотрите, эстетический кайф гарантирован. Прошел ее минут за 15 на одном дыхании и подумал: а почему бы не сделать что‑то подобное с аналогичной механикой «допиши правильное слово в пропуск в бойлерплейте», только по другой теме? Сходу на ум ничего не пришло, но идею я запомнил.
Три года спустя я решил изучить React, написав на нем какой‑нибудь пет‑проект (имхо, лучший способ изучить новую технологию/язык). Тут‑то я и вспомнил про CSS Diner. Осталось только найти подходящую тему, где эта механика бы зашла.
