Как стать автором
Обновить
182.36

JavaScript *

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

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

Как мы работаем с ресурсами в веб-приложениях

Время на прочтение 14 мин
Количество просмотров 5.5K

Приложения, созданные на платформе 1С:Предприятие, могут быть развернуты в трёхзвенной архитектуре (Клиент – Сервер приложений – СУБД). Клиентская часть приложения может работать, в частности, как веб-клиент, в браузере. Веб-клиент – это довольно сложный фреймворк на JavaScript, отвечающий за отображение пользовательского интерфейса и исполнение клиентского кода на встроенном языке. Одна из задач, которая стояла перед нами в ходе разработки веб-клиента – это корректная работа с различного рода ресурсами (в первую очередь – их своевременное освобождение).

Мы провели анализ существующих подходов и хотим рассказать вам об этом. Добро пожаловать под кат!

Читать далее
Всего голосов 19: ↑19 и ↓0 +19
Комментарии 8

Как использовать html-элемент <dialog>?

Уровень сложности Средний
Время на прочтение 11 мин
Количество просмотров 17K

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

В своей работе я часто создаю собственные или использую уже готовые UI-компоненты. Проблема с такими компонентами заключается в том, что они часто ограничены определённым фреймворком, и их реализация требует написания сложной нестандартизированной логики. В течение долгого времени для базовых UI-компонентов, таких как диалоговые окна, использовались самописные решения, а в тяжёлых случаях и встроенные в JavaScript методы alert(), prompt() и confirm().

Отличная новость в том, что такой компонент можно реализовать с использованием нативного HTML-элемента <dialog>, который встроен в стандарт HTML5 и работает одинаково во всех современных браузерах.

Давайте познакомимся с возможностями <dialog> поближе.

Читать далее
Всего голосов 33: ↑33 и ↓0 +33
Комментарии 19

Улучшаем возможности PM2 с помощью дополнительных модулей автоскейлинга и мониторинга

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 2.5K

Всем привет. Сегодня я бы хотел рассказать о том, с какими трудностями пришлось столкнуться при работе с менеджером node.js процессов PM2, и как нам пришлось расширить его возможности для того, чтобы его было можно использовать эффективнее.

Читать далее
Всего голосов 11: ↑11 и ↓0 +11
Комментарии 2

О JavaScript и WebAssembly

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


Hello world!


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


Хорошо, если вы знаете JS/Node.js и хотя бы слышали о WASM и Rust.

Читать дальше →
Всего голосов 20: ↑16 и ↓4 +12
Комментарии 4

Истории

Server-side rendering и практики работы с запросами

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 8.3K

Практики работы с запросами на сервере значительно отличаются от того, к чему привык фронтенд-разработчик. ежедневно разрабатывающий SPA-приложения с клиентским рендерингом. Если не учесть эту разницу при разработке приложения с серверным рендерингом, то можно собрать довольно много граблей. Хочу поделиться опытом и рассказать про три практики, которые использую повседневно, а также о проблемах, предшествующих их появлению. Я буду ссылаться на веб-производительность и рассчитываю что вы уже знакомы с такими метриками как TTFB, LCP и FCP.

Прошу под кат
Всего голосов 26: ↑26 и ↓0 +26
Комментарии 3

По заветам кота Вжуха: превращаем веб-приложение в сервис на платформе VK Mini Apps

Уровень сложности Средний
Время на прочтение 11 мин
Количество просмотров 3.8K

VK Mini Apps — это платформа для создания мини-приложений, работающих внутри ВКонтакте. На ней можно создать продукт любого масштаба — от лендинга до сложного сервиса с множеством функций. А ещё вы можете портировать на площадку ваше веб-приложение, чтобы получить доступ к огромной аудитории VK Mini Apps и новым возможностям монетизации. В этой статье поделюсь пошаговой инструкцией, как превратить в сервис любое веб-приложение — на примере планировщика задач.

Всем хабропривет. Я Леонид Шевчук, старший разработчик. Четыре года создаю мини-приложения. Руковожу командой фронтенд-разработки VK Знакомств. Наш сервис разработан как мини-приложение ВКонтакте. Это яркий пример того, что на платформе VK Mini Apps можно делать продукты с очень развитой функциональностью.

Эта статья пригодится тем, кто ещё не работал с нашей платформой, поэтому я буду рассказывать очевидные для опытных разработчиков вещи. Сначала мы освежим в памяти, на каких технологиях делаются современные веб-приложения. Затем научимся портировать в VK Mini Apps — на примере приложения для планирования дел, написанного на React. И сделаем это так, чтобы оно выглядело органично для платформы. А для чего это всё нужно? Сейчас объясню.

Читать далее
Всего голосов 35: ↑33 и ↓2 +31
Комментарии 11

План «Барбаросса» от Vue.js

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

После выхода крайней и достаточно революционной в плане добавления Composition API версии Vue 3.0 более чем три года назад, каких-либо серьезных изменений от команды Evan You в самом фреймворке больше не было. Только стандартные багфиксы, оптимизация и робкие попытки стать с TypeScript ближе. Основное внимание переключилось на экосистему - Vite, Nuxt, VitePress, Pinia и другие.

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

Читать далее
Всего голосов 16: ↑14 и ↓2 +12
Комментарии 30

Как появились веб-пуши Apple в Тинькофф

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 6.2K

Всем привет! Мы — архитектор разработки публичных веб-приложений Борис и разработчик системы-шлюза отправки нотификаций Данила. Расскажем о том, как создавались веб-пуши iOS в Тинькофф, как их настраивали и с какими проблемами столкнулись в процессе разработки.

Читать далее
Всего голосов 16: ↑14 и ↓2 +12
Комментарии 8

Как мы отказались от styled-components в React Native приложениях

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

Styled-components является стандартом написания стилей для многих команд, которые разрабатывают приложения на React Native. Но мы не всегда задумываемся, зачем мы тащим это в продукт и какую выгоду получим. А что если от styled-components больше вреда, чем пользы? Я поделюсь нашим опытом в Профи и попробуем разобраться вместе.

Читать далее
Всего голосов 15: ↑15 и ↓0 +15
Комментарии 8

Typescript: лучшие практики

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

Привет👋 В последние годы среди фронтенд разработчиков Typescript используется практически везде по умолчанию, начиная небольшими пет-проектами и заканчивая огромнейшими веб-приложениями. Однако, до сих пор на некоторых проектах можно встретить кучу any и Function. Давайте разберемся используете ли вы этот невероятно мощный инструмент правильно?

Читать далее
Всего голосов 26: ↑23 и ↓3 +20
Комментарии 27

Интересные трюки HTML. Экстремальный минимализм

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

Мы уже много говорили про оптимизацию сайтов до минимального размера, преимущества статичного HTML, а также упаковку сайта (и веб-сервера) в портативный формат одного исполняемого файла, который нативно исполняется под любой ОС.

Но стремление к минимизации может пойти дальше, если вы хотите поместить весь сайт в адресную строку браузера. А с помощью сокращателя ссылок даже большой сайт сжимается до восьми байт. В этом случае и хостинг не нужен (то есть роль хостинга выполняет сервис сокращения ссылок).
Читать дальше →
Всего голосов 62: ↑62 и ↓0 +62
Комментарии 5

Глубокий JS. В память о типах и данных

Уровень сложности Сложный
Время на прочтение 10 мин
Количество просмотров 24K

Всех нас учили, что в JavaScript есть примитивные и ссылочные типы данных. Исчерпывающая информация есть в официальной документации, а на просторах интернета полно статей на этот счет.

Теория теорией, однако, JS-код исполняется не в теории, а на практике. Точнее, его компилирует и исполняет движок JS. Таких движков существует несколько, разрабатывались они разными людьми и для разных целей. Было бы наивно предполагать, что все они полностью идентичны друг другу. А значит, время разобраться, как же на самом деле хранятся вполне конкретные данные на вполне конкретном движке JS V8.

Читать далее
Всего голосов 55: ↑53 и ↓2 +51
Комментарии 27

Поиск удобных мест для жизни в Москве на GitHub Pages с помощью DuckDB в браузере

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

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

Как подготовить для этого данные я детально описывал в "Где 15 минут пешком от дома до метро в Москве" "Где в Москве жить «неплохо»". В публикации "Жилье в 500м от сетевых продуктовых магазинов в Москве." я столкнулся со специфичным трафиком с желтушных публикаций и сообщество OSMеров предложило мне отличный вариант, когда визуализация не требует чтения исходной статьи.

Карта теперь доступна на сайте и использует DuckDB Wasm для запросов к данным прямо из браузера!

Читать далее
Всего голосов 19: ↑19 и ↓0 +19
Комментарии 4

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

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн

Интерактивный парсер web страниц

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

Всем привет. Меня зовут Влад и по профессии я Java Backend.

Для начала вкратце введу в курс дела. 3 года назад ко мне в голову закралась навязчивая мысль написать интерактивный словарь-помощник для чтения на английском языке. И с тех пор начались мои приключения в мире расширений для браузеров на ядре Chrome'а.

Читать далее
Всего голосов 10: ↑10 и ↓0 +10
Комментарии 2

Webpack vs esbuild — уже можно использовать в production?

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

Периодически я пробую разные инструменты, и если они стабильно покрывают все необходимые сценарии - включаю в свою экосистему для коммерческих проектов. С третьего подхода за последние 3 года esbuild, наконец, приблизился по функционалу к Webpack. В статье привожу проблемы, с которыми я столкнулся при миграции, и пути их решения.

Читать далее
Всего голосов 24: ↑24 и ↓0 +24
Комментарии 26

Смерть third-party cookies. Что ждет нас в 2024?

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 9.1K

В большинстве браузеров уже есть те или иные механизмы блокировки third-party кук. В одних браузерах это ограничивается тем, что third-party куки разрешено отправлять только на посещенные пользователем сайты. В других браузерах внедряют различные "enhanced" и "intellegent" tracking protection, либо совсем блокируют third-paty куки. Для тех, кто захочет разобраться детально в перипетиях отдельных браузеров, есть прекрасные статьи.

В 2019 году волей сообщества дефолтное поведение кук в браузерах изменилось с SameSite=None на SameSite=Lax. Что, впрочем, привело лишь к тому, что большинство сервисов перевело свои трекеры в режим SameSite=None.

Консенсус в сообществе свелся к тому, что:
- Нужно запретить отслеживать пользователя между сайтами
- First-party - это вполне ОК. Сайт внутри себя может позволить себе любые манипуляции с пользовательскими данными
- Third-party - в целом тоже ОК, но только если ограничить third-party куки одним сайтом (следите за руками ниже)

Так какие же есть решения для того, чтобы отказаться от third-party кук и ничего не сломать?

Читать далее
Всего голосов 23: ↑23 и ↓0 +23
Комментарии 16

Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика

Время на прочтение 4 мин
Количество просмотров 27K

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

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

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

Ну что, поехали!

Читать далее
Всего голосов 16: ↑15 и ↓1 +14
Комментарии 19

Почему я не буду использовать Next.js

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

Представьте, что вы планируете начать новый проект или использовать в существующем более современный подход. А, может, вас просто не устраивает используемый фреймворк, и вы подумываете об альтернативах. В любом случае вам нужно что-то выбрать.

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

С момента выхода Remix в 2020 году я использовал именно этот фреймворк. Мне он настолько понравился, что на следующий год я устроился в эту компанию, чтобы помочь с развитием сообщества, а через 10 месяцев ушёл работать в EpicWeb.dev, где теперь обучаю людей всему необходимому для создания фулстек-приложений. И Remix играет в этом значительную роль, являясь веб-фреймворком, который аналогично Next.js нацелен на решение задач, связанных с созданием веб-приложений.

Поскольку Next.js аналогичен Remix, многие спрашивают, почему для преподавания фулстек-разработки в EpicWeb.dev я предпочёл именно Remix. И текущая статья станет ответом на этот их вопрос.
Читать дальше →
Всего голосов 50: ↑44 и ↓6 +38
Комментарии 18

Разработка браузерных игр с использованием Phaser3, React, Typescript

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

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

Разработка игр это круто и весело! В данной статье разберем пошагово разработку демо небольшой браузерной игры.

Читать далее
Всего голосов 24: ↑23 и ↓1 +22
Комментарии 7

Как подготовиться к собеседованию с помощью Telegram-бота на Node.js

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

В этой статье мы разработаем бота для подготовки к собеседованиям. Он будет задавать вопросы по HTML, CSS, JS и React. При этом часть из них будет с вариантами ответа, а часть — без. Базу вопросов вы сможете пополнять самостоятельно.

Во время разработки вы научитесь работать с Telegram Bot API с помощью grammY и Node.js, а также самостоятельно деплоить ботов на сервер.
Читать дальше →
Всего голосов 39: ↑37 и ↓2 +35
Комментарии 3

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

Работа