Просто о Deep #1
Простой
4 мин
Обзор
Боль в написании backend
Разберем, какие есть боли у backend разработчика и как deep.foundation решает данную проблему и что предлагает для разработчика.
256K+
JavaScript *
Прототипно-ориентированный язык программирования
287,28
Рейтинг
Добавление server side Open Graph и прочего SEO в существующую SPA
Простой
3 мин
Представьте себе следующую ситуацию: у вас на руках есть SPA с рендерингом полностью на клиенте, и вам необходимо сделать так, чтобы в зависимости от URL было разное содержимое у тега <head>.
Под капотом анимаций в React Native. Часть 2/2: Reanimated and JSI
Средний
9 мин
Обзор
Привет! Меня зовут Евгений Прокопьев, я старший инженер-разработчик в СберМаркете. На React Native я пишу уже больше 6 лет и очень люблю создавать красивые анимации.
В интернете часто сталкиваюсь с мнением, что на RN невозможно сделать красивые и стабильные анимации: их трудно делать и они ужасно лагают. По моему опыту всё обстоит совсем не так — вопрос именно в том, как их готовить. Хочу поделиться опытом, что сделать, чтобы у вас анимации не лагали, и по возможности восстановить репутацию React Native в глазах комьюнити.
Это продолжение вторая часть статьи. Призываю сначала ознакомиться с первой:Под капотом анимаций в React Native. Часть 1/2: Animated and Bridge
Подборка VS Code-плагинов для Frontend-разработчиков и не только
Простой
2 мин
Recovery Mode
Одним из наиболее ценных аспектов Visual Studio Code является его расширяемость с помощью плагинов, которые значительно облегчают и улучшают рабочий процесс. В этой статье мы собрали инструменты - от простых до продвинутых - которые сделают вашу разработку более продуктивной и приятной, позволяя сосредоточиться на творческой части процесса.
Рефлексия в JavaScript и TypeScript: обзор основных техник. Как сгенерировать CLI-интерфейс для класса
Средний
22 мин
Обзор
Как и в любом достаточно динамическом языке, в JavaScript из коробки есть способы разобрать в рантайме структуру его значений — определить типы, ключи объектов, получить конструкторы и прототипы.
В этой статье я хочу рассмотреть основные такие возможности, плюс показать, как можно получить ещё больше информации о типах при использовании TypeScript, и как добавить классам и их полям собственные метаданные при помощи декораторов. Каждую из техник я покажу на примере небольшого CLI-фреймворка, работа с которым к концу статьи будет выглядеть как на картинке:
В этой статье я хочу рассмотреть основные такие возможности, плюс показать, как можно получить ещё больше информации о типах при использовании TypeScript, и как добавить классам и их полям собственные метаданные при помощи декораторов. Каждую из техник я покажу на примере небольшого CLI-фреймворка, работа с которым к концу статьи будет выглядеть как на картинке:
Считаем «a=1; b=2; x=pi/3; abcos(x)»
Простой
9 мин
Туториал
В предыдущей серии мы научились считать выражения вида -2.1+ .355 / (cos(pi % 3) + sin(0.311)). Один из комментариев там предложил посчитать то, что я вынес в заголовок этого поста. Что ж, вызов принят. Как и в предыдущем посте, мы "на пальцах" разбираем устройство простейшего интерпретатора.
JavaScript повсюду или почему веб-технологии захватили мир
18 мин
Мнение
Я давно слежу за развитием веб-технологий и каждый раз, натыкаясь на очередной холивар в интернете про злой и страшный JavaScript, залезающий на чужую территорию, инстинктивно хочу побыть его адвокатом. Обычно все мои доводы сводятся к банальному “не мы такие, жизнь такая” или “ничего личного, просто бизнес”, но в этот раз захотелось развернуто обосновать причины популярности веб-технологий.
Пробежимся галопом по истории интернета, перемоем косточки фронтендерам и придем к неутешительному заключению. Буду ругать и хвалить, но выводы делать лишь вам. Хотя и не надеюсь кого-то в чем-то убедить. Добро пожаловать под кат!
DOM, DI и View: деревья в Angular
Сложный
8 мин
Чтобы стать продуктивным разработчиком на Angular, потребуется понимание различных деревьев, из которых состоит приложение. На первый взгляд легко можно спутать дерево инжекторов DI и DOM-дерево непосредственных HTML-элементов и вьюх Angular. Они похожи и иногда имеют прямое соответствие, но далеко не всегда. В статье рассмотрим различия, научимся держать их в уме и освоим, как можно обойти возможные трудности, связанные с ними.
Как уменьшали размер VS Code, используя name mangling — сокращение идентификаторов во время сборки
Простой
9 мин
Кейс
Перевод
Не так давно, мы уменьшили на 20% объем итогового скомпилированного JavaScript-кода в Visual Studio Code. В абсолютных числах это около 3.9 МБ. Хоть это и меньше типичной гифки из блога, цифра все равно значительная! Это положительно влияет не только на объем скачиваемых данных для очередного обновления, но и на время запуска: меньше кода значит меньше работы для парсера и интерпретатора. И ко всему прочему, мы добились этого без удаления кода или каких-либо рефакторингов. Вместо этого, мы работали над новым шагом сборки: name mangling, сокращение имен сущностей.
В этой статье рассказывается, как мы обнаружили возможность такой оптимизации, какие подходы рассматривали, и как в конце концов добились уменьшения размера на 20%.
Как показать миллион зданий на карте — и не сломать браузер
Средний
7 мин
Кейс
В 2ГИС мы аккумулируем огромное количество геоданных, с которыми взаимодействуют миллионы пользователей ежедневно. Анализируя их, мы можем получить ценную информацию и найти важные идеи для развития городов. Эти данные также полезны организациям.
Чтобы помочь бизнесу и муниципальным организациям, мы решили создать 2GIS PRO — инструмент для GPU-аналитики, с возможностью визуализации огромного количества данных на карте в виде диаграмм и графиков.
Расскажем, как мы получаем такую картинку, как это всё работает под капотом, и посмотрим, на что способен ваш браузер, ведь ему предстоит отображать сотни тысяч объектов одновременно.
Расскажем, как мы получаем такую картинку, как это всё работает под капотом, и посмотрим, на что способен ваш браузер, ведь ему предстоит отображать сотни тысяч объектов одновременно.
Одно PWA, чтоб править всеми
14 мин
Туториал
Термин PWA появился еще в 2015 году, но из-за браузерных разногласий долгое время был лишь красивой идеей. В 2023 году возникла надежда, что на iOS появятся альтернативные браузерные движки, а это может привести к тому, что для создания почти полноценных аналогов нативных приложений будет достаточно знаний фронтенда.
Весной на HolyJS Никита Дубко показал, что умеют современные PWA: как изменился их внешний вид, насколько они интегрированы в операционные системы и в каких случаях они решают пользовательские задачи не хуже нативных приложений.
Делимся расшифровкой доклада и видеозаписью. Повествование будет от лица Никиты.
Как запретить разработчику делать не то что нужно?
Средний
8 мин
Туториал
React основан на компонентом подходе. Когда создается компонент, предполагается, что его будут использовать по назначению. Если в проекте есть таблицы значит надо использовать <Table /> (к примеру), формы - значит <Form />. Естественно названия носят абстрактный характер, в каждом проекте они могут иметь разные названия, но суть их одна.
На практике нередко встречается такое, что разработчики, особенно новые, пытаются обойти некие правила использования, и за этим может уследить только TeamLead (или тот кто проводит ревью). И для того что бы облегчить эту работу, я расскажу о том какой паттерн можно для этого использовать, покажу какие модификации для этого следует внести и естественно все это подкреплю практическими примерами.
Меня зовут Дмитрий Чернов - старший инженер-программист в компании Nord Clan. И мы начинаем.
Бесконечное радио создаваемое нейронными сетями. Open-source проект
Простой
2 мин
Кейс
Привет всем увлеченным нейронными сетями или тем, кто хочет вникнуть в технологии. Сегодня я хотел бы познакомить вас со своим захватывающим проектом с открытым исходным кодом «Бесконечное нейронное радио». Бесконечное, потому что lofi музыка и подкасты могут генерироваться нейронными сетями бесконечно. В этой статье я бы хотел углубиться в то, как все работает изнутри.
Вдохновением для этого проекта послужило для меня разочарование в моем любимом музыкальном приложении. Поскольку со временем приложение стало не удобным для меня, я почувствовал потребность создать что‑то свое с лофи‑музыкой — жанра, который помогает сосредоточиться во время программирования или просто служит расслабляющим фоном в вечернее время. Приложение содержит цитаты, сгенерированные нейронными сетями, в сопровождении GIF‑анимации в пиксельном стиле, которая тоже частино сгенерировано нейронными сетями. Если подкасты вам не по душе, вы можете их отключить и выбрать только нейронную музыку или даже настроиться на радиостанцию, которая уже делается людьми.
Ближайшие события
Деплой приложения с nginx как по нодам
10 мин
Привет, Хабр! В этом материале мы разберем деплой приложения на React, арендуем облачный сервер и настроим nginx. Здесь будет необходимый минимум для фронтенд-разработчика:
- Заливка проекта на GitHub.
- Аренда и настройка облачного сервера по SSH.
- Настройка nginx для раздачи статических файлов.
- Сжатие бандла.
- Подключение домена.
- Настройка HTTPS.
- Настройка Docker.
Для этого материала также доступна видеоверсия.
Зачем писать юнит-тесты на фронтенд?
Средний
10 мин
Туториал
Сегодня речь пойдет про тесты… Про юнит-тесты. Думаю, что почти все слышали про юнит-тесты, пробовали их писать, и, возможно бросали это «гиблое дело» как только сталкивались с непониманием того, что тестировать на фронтенде.
Дизайн превью: Марина Четвертакова
Как в 1.5 раза повысить производительность фронтенда высоконагруженного интернет-магазина на Next.js
Средний
5 мин
Туториал
Об инструментах и порядке действий для достижения промежуточного, но заметного результата в задаче по оптимизации высоконагруженного сайта. Полезные ссылки внутри.
Вышел Chrome 116
Простой
3 мин
Обзор
Перевод
Традиционный перевод анонса от команды Google Chrome о нововведениях
• Document Picture-in-Picture API
• Улучшена отладка отсутствующих таблиц стилей в DevTools
• Свойство notRestoredReasons
И многое другое!
Создание статичного блога на Angular и Contentful
Средний
30 мин
Туториал
В предыдущей части - Как я переносил блог из CakePHP в Angular, я делился своей историей миграции блога из CakePHP в Angular. В этой статье, я хочу продемонстрировать связку Angular и Contentful. Я по шагам создам новое приложение, добавлю необходимые вендоры, а также реализую требуемые скрипты для загрузки и генерации контента.
Как я переносил блог из CakePHP в Angular
Простой
10 мин
В 2018 году я устроился на новую работу в стартап, связанный с высокорискованным кредитованием. На собеседовании мне говорили, что это мечта любого программиста. Необходимо переписать проект на современный стек.
На предыдущей работе, я создавал небольшие приложения для нескольких брендинговых агентств. В основном это были сайты разной сложности, но с полным отсутствием “легаси”. В то время, я не знал такого слова.
Что же мне предстояло переносить - архитектурное чудо, написанное аутсорсерами на CakePHP в 2012 году. Интерфейс был построен на Twitter Bootstrap и jQuery. Из-за усложнения бизнес логики, в проект добавили AngularJS и десяток библиотек для фингерпринтинга.
[июль 2025] Настройка проекта AstroJS: VS Code, Prettier, ESlint, Stylelint, PostCSS, минификация файлов
Средний
7 мин
Туториал
AstroJS изначально был движком для создания статичных сайтов. Теперь там есть работа с API, server-side рендеринг, гибридный режим сервера. Можно написать код сайта в Astro-файлах на обычном html + js, а можно подключить визуальный фреймворк на свой выбор: React, Preact, Vue, Solid, Svelte. Подключаем CMS или backend-as-a-service - вот уже замена именитым NextJS и NuxtJS.
Но перед активной фазой создания сайта давайте потратим 10 минут. Настройка проекта для работы в команде займет каких-то шагов 20...