Обновить
240.15

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

Одно PWA, чтоб править всеми

Время на прочтение14 мин
Охват и читатели26K

Термин PWA появился еще в 2015 году, но из-за браузерных разногласий долгое время был лишь красивой идеей. В 2023 году возникла надежда, что на iOS появятся альтернативные браузерные движки, а это может привести к тому, что для создания почти полноценных аналогов нативных приложений будет достаточно знаний фронтенда.

Весной на HolyJS Никита Дубко показал, что умеют современные PWA: как изменился их внешний вид, насколько они интегрированы в операционные системы и в каких случаях они решают пользовательские задачи не хуже нативных приложений.

Делимся расшифровкой доклада и видеозаписью. Повествование будет от лица Никиты.

Читать далее

Как запретить разработчику делать не то что нужно?

Уровень сложностиСредний
Время на прочтение8 мин
Охват и читатели9.8K

React основан на компонентом подходе. Когда создается компонент, предполагается, что его будут использовать по назначению. Если в проекте есть таблицы значит надо использовать <Table /> (к примеру), формы - значит <Form />. Естественно названия носят абстрактный характер, в каждом проекте они могут иметь разные названия, но суть их одна.

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

Меня зовут Дмитрий Чернов - старший инженер-программист в компании Nord Clan. И мы начинаем.

Читать далее

Бесконечное радио создаваемое нейронными сетями. Open-source проект

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели14K

Привет всем увлеченным нейронными сетями или тем, кто хочет вникнуть в технологии. Сегодня я хотел бы познакомить вас со своим захватывающим проектом с открытым исходным кодом «Бесконечное нейронное радио». Бесконечное, потому что lofi музыка и подкасты могут генерироваться нейронными сетями бесконечно. В этой статье я бы хотел углубиться в то, как все работает изнутри.

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

Узнать как работает

Деплой приложения с nginx как по нодам

Время на прочтение10 мин
Охват и читатели38K

Привет, Хабр! В этом материале мы разберем деплой приложения на React, арендуем облачный сервер и настроим nginx. Здесь будет необходимый минимум для фронтенд-разработчика:

  • Заливка проекта на GitHub.
  • Аренда и настройка облачного сервера по SSH.
  • Настройка nginx для раздачи статических файлов.
  • Сжатие бандла.
  • Подключение домена.
  • Настройка HTTPS.
  • Настройка Docker.

Для этого материала также доступна видеоверсия.
Читать дальше →

Зачем писать юнит-тесты на фронтенд?

Уровень сложностиСредний
Время на прочтение10 мин
Охват и читатели16K

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

Дизайн превью: Марина Четвертакова

Читать далее

Как в 1.5 раза повысить производительность фронтенда высоконагруженного интернет-магазина на Next.js

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели14K

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

Читать далее

Вышел Chrome 116

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели6.4K

Традиционный перевод анонса от команды Google Chrome о нововведениях

• Document Picture-in-Picture API

• Улучшена отладка отсутствующих таблиц стилей в DevTools

• Свойство notRestoredReasons

И многое другое!

Читать далее

Создание статичного блога на Angular и Contentful

Уровень сложностиСредний
Время на прочтение30 мин
Охват и читатели3.2K

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

Читать далее

Как я переносил блог из CakePHP в Angular

Уровень сложностиПростой
Время на прочтение10 мин
Охват и читатели2.1K

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

На предыдущей работе, я создавал небольшие приложения для нескольких брендинговых агентств. В основном это были сайты разной сложности, но с полным отсутствием “легаси”. В то время, я не знал такого слова.

Что же мне предстояло переносить - архитектурное чудо, написанное аутсорсерами на CakePHP в 2012 году. Интерфейс был построен на Twitter Bootstrap и jQuery. Из-за усложнения бизнес логики, в проект добавили AngularJS и десяток библиотек для фингерпринтинга.

Читать далее

[июль 2025] Настройка проекта AstroJS: VS Code, Prettier, ESlint, Stylelint, PostCSS, минификация файлов

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели8.7K

AstroJS изначально был движком для создания статичных сайтов. Теперь там есть работа с API, server-side рендеринг, гибридный режим сервера. Можно написать код сайта в Astro-файлах на обычном html + js, а можно подключить визуальный фреймворк на свой выбор: React, Preact, Vue, Solid, Svelte. Подключаем CMS или backend-as-a-service - вот уже замена именитым NextJS и NuxtJS.

Но перед активной фазой создания сайта давайте потратим 10 минут. Настройка проекта для работы в команде займет каких-то шагов 20...

Читать далее

Ищем замену Excel — OnlyOffice/Р7

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели11K

Из-за известных всем причин сейчас очень важным стал вопрос импортозамещения западного ПО во всех сферах деятельности, включая деятельность бизнеса. Не в последнюю очередь это касается и программного обеспечения, которым пользуются в наше время практически все - от школьников до пенсионеров, включая, конечно, и сотрудников госструктур и бизнеса, от малого до крупного.

Сегодня речь пойдет об офисных программах. Мы настолько привыкли за много лет работать в известных всем офисных программах фирмы Microsoft, что теперь, когда с лицензионными закупками их ПО, особенно для государства и бизнеса, стало, мягко говоря, «всё плохо», с привычным комфортом офисной работы на привычных «инструментах», можно, казалось бы, попрощаться.

Не всё так печально, если речь идёт о «простом» использовании офисных пакетов, таком как заполнение вручную «стандартных» документов и табличек. Тут отечественное ПО, призванное заместить собой творение «Монстра из Рэдмонда», вполне себе справляется, и даже почти без проблем открывает документы, созданные ранее в MS Office.

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

Степень доступной автоматизации сильно рознится, но данная статья не о сравнительном анализе возможностей нашего отечественно офисного ПО, а о нашем исследовании возможности повторения функционала из нашей разработки  —  расширения (addon) для «MS Excel» in2sql, в офисном пакете «Р7-Офис» от фирмы «АО «Р7».

Читать далее

Получение данных виртуальной клавиатуры Android в web проекте

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели2.4K

Постоянное взаимодействия помогает удерживать хоть какие то знания в голове, эта статья удержание знаний javascript.

А вдруг пригодиться?

Как обходится ограничение скорости скачивания с YouTube

Время на прочтение7 мин
Охват и читатели24K

Вы когда-нибудь пробовали скачивать видео с YouTube? Я имею в виду ручками, а не через такие софтины, как youtube-dl, yt-dlp или один из «этих» сайтов. Оказывается, это гораздо сложнее, чем можно было бы подумать.

Youtube зарабатывает на показе рекламы пользователям. Поэтому с точки зрения платформы логично внедрить специальные ограничения, которые не позволяли бы скачивать видеоролики или даже просматривать их через неофициальный клиент, например, YouTube Vanced. В этой статье будут пояснены технические детали тех механизмов безопасности, что действуют в Youtube, и рассказано, как их обойти.

Читать далее

Ближайшие события

Создание игры в стиле GameBoy в 13 КБ

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели7.5K

В прошлом году я решил поучаствовать в гейм-джеме js13kgames. Это длящееся один месяц ежегодное соревнование по созданию с нуля игры на JavaScript, которая должна уместиться в 13 КБ (в zip). Места как будто не очень много, но с достаточным количеством креативности при таких ограничениях можно достичь многого. Просто взгляните на потрясающие примеры прошлых лет:


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

Мне захотелось сделать игру, напоминающую о ретроэпохе игр на портативных консолях с их уникальным квадратным экраном, низким разрешением и видом сверху вниз. Я решил реализовать быстрый геймплей в стиле action-RPG с простым, но увлекательным геймплеем, мотивирующим игрока продолжать игру. С музыкой всё было очевидно — звуковые эффекты должны быть похожими на звуки аркадных автоматов.

Поиграть в мою игру можно на странице Gravepassing сайта JS13KGames. Полный код выложен на GitHub.
Читать дальше →

Design Patterns: прототип, прокси и обозреватель для фронтенд-разработчика

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели12K

История возникновения паттернов

Перед тем как ответить на вопрос - зачем нужны паттерны проектирование - сделаем немольшой исторический экскурс.

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

Эти самостоятельные сущности в итоге назвали паттернами проектирования, и фундаментальной работе по их стандартизации можно считать широко известную книгу - Паттерны Проектирования “Банды Четырех” (Гамма, Хелм, Джонсон, Влиссидес).

Оригинальная книга была написана в 1994 году и нацелена на объектно-ориентированные языки программирования - все паттерны в ней описаны на объектно-ориентированном языке C++ и определены для решения задач ООП - то есть нацелены на написание десктопного ПО.

Но паттерны - вещь универсальная и не привязана к какому-то конкретному языку программирования. Но перед тем как перенести, описанные в книги паттерны, давайте сначала, все-таки, оговорим разницу между этими двумя языками.

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

Поэтому веб-разработчику меньше приходиться вникать, скажем, в то, что такое шаблон прототипа, чтобы использовать его - джаваскрипт уже сделал это за него.

Читать далее

Как тестировать не-REST-бэкенд. Часть третья, gRPC

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели25K

Итак, мы с вами добрались до третьей, самой «хардовой» части цикла. Сегодня поговорим про gRPC.

Что такое gRPC? 

Сам RPC — удалённый вызов процедур (иногда вызов удалённых процедур; RPC от англ. remote procedure call) — класс технологий, позволяющих программам вызывать функции или процедуры других программ, делая это так, как если бы они находились в одном адресном пространстве. Буква g в названии — это гугловая реализация этих технологий.

Разберем это все на примере.

Допустим, что вы — программист и сидите в монолитной репе. У вас одно приложение. Сам проект открыт в IDE и вы в нем работаете. В репе реализован определенный класс (например, на Kotlin), у которого есть метод, возвращающий вам данные по пользователю.

Читать далее

createAsyncThunk.withTypes()

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели8.8K

В этой статье разберем еще одну малоизвестную, но не менее полезную возможность @reduxjs/toolkit - createAsyncThunk.withTypes()

Читать далее

DI в JS: идентификаторы зависимостей

Время на прочтение9 мин
Охват и читатели4.6K

В предыдущих публикациях (раз, два) я рассматривал возможности использования внедрения зависимостей в чистом JavaScript (без TypeScript, аннотаций и транспиляции). В данной публикации я продолжаю погружаться в вопросы использования DI в JS и более пристально рассматриваю роль идентификатора зависимости в создании объектов контейнером.

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

Читать далее

Написание Vite плагина

Время на прочтение4 мин
Охват и читатели5.9K

Сборщик Vite предоставляет не только хороший функционал, но и удобный API для создания плагинов, позволяющих кастомизировать его практически под любую задачу. То есть, плагины можно писать не только для публикации их в npmjs.com репозитории, но и для автоматизации исключительно своих задач.

Сложность написания плагина сравнима со сложностью написания сценария для Gulp или GitHub Actions. Для примера напишем плагин, который будет вставлять фрагменты кода в файл index.html. В зависимости от проекта в данный файл необходимо помещать код Google Analytics, метатэги Open Graph и Twitter, подключение Service worker-a, виджета чата поддержки, сплэш скрин и многое другое. В результате index.html становится очень большим и ориентироваться в нем и блоках кода довольно сложно.

Наш плагин позволить держать фрагменты кода в отдельных файлах, а при сборке все будет помещаться в index.html. Причем это будет происходить не только при непосредственно сборке ( npm build ), но и при запуске Vite dev сервера с поддержкой HRM (Hot Module Replacement).

Читать далее

React vs Vue vs Angular. Часть 2

Время на прочтение14 мин
Охват и читатели3.7K

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

Читать далее

Вклад авторов