Обновить
256K+

JavaScript *

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

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

Node.js: использование веб-потоков. Часть 2

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


Привет, друзья!


Представляю вашему вниманию перевод второй части этой замечательной статьи.


Ссылка на первую часть.


Веб-потоки (web streams) — это стандарт для потоков (streams), который поддерживается всеми основными веб-платформами: веб-браузерами, Node.js и Deno. Потоки — это абстракция для чтения и записи данных последовательно, небольшими частями из любого вида источника — файлов, данных, находящихся на сервере, и т.д.


Например, глобальная функция fetch (которая используется для загрузки онлайн-ресурсов) асинхронно возвращает ответ (Response), содержащий свойство body с веб-потоком.


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

Читать дальше →

Парсинг дат в JS — добавляем русский язык в библиотеку Chrono

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

Crono это парсер дат на естественном языке. Кроме формальных ISO 8601 или dd.MM.yyyy, распознает варианты а-ля «в среду утром‎», «с 10 до 11 вечера», «2 часа 5 минут назад» и т.п. Поддерживает 8 языков, в том числе, теперь, и русский.

Читать далее

Повторное использование компонентов: живи, работай, повторяем цикл

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

Reusability, т. е. повторное использование компонентов ― весьма популярный метод в разработке ПО, веб-сервисов, дизайна и т. п. Огромным преимуществом повторного использования компонентов является экономия средств и времени на разработку ПО. Почему? Если систематизировать повторное использование компонентов, то сокращаются расходы на создание и обслуживание проектов, уменьшаются сроки разработки таких систем, во многих случаях повышается качество программных продуктов. Сегодня предлагаем поговорить об этом методе относительно веб-сайтов, JavaScript и ReactJS.

Если эта тема интересна, то давайте обсудим всё под катом. К слову, статья не очень большая, в ней приводится лишь один пример для Redux, который даёт общее понимание вопроса. А в комментариях давайте обсудим ваш опыт и идеи, которые вы используете в ежедневной работе.

Читать далее

Как посчитать длину текста и не привлекать внимание санитаров

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

Привет! Меня зовут Алексей Ивасюта, я фронтенд-разработчик в Авито в кластере Seller Experience. В этой статье я расскажу, как правильно рассчитать длину текста в Java Script. Эта статья будет одинаково полезна как начинающим разработчикам, так и весьма опытным. Благодаря ей вы поймете устройство Unicode и особенности его работы в JS.

Читать далее

Как я перешел из нефтянки в IT за 1 год

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

Меня зовут Багрянцев Максим, бывший сотрудник компании Роснефть, в настоящее время являюсь frontend developer в компании Mechanica.

Привет, Хабр! Хочу поделиться своим жизненным опытом с теми людьми, кто еще сомневается идти ли в IT или оставить все как есть.

Написать данную статью меня сподвигла сама идея помочь читателю определиться с выбором, так как я хорошо понимаю на сколько трудно решиться кардинально сменить сферу деятельно и начать все с чистого листа.

Я же когда принимал такое решение, то искал вдохновение и мотивацию в историях реальных людей и мне это очень сильно помогло. Поэтому желаю вам приятного прочтения данной статьи, а самое главное успехов в ваших начинаниях!

Читать далее

Фронтенд-новости №13. Релиз Vue 2.7, табы против пробелов Prettier, W3C — некоммерческая организация

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

Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 27 июня–3 июля.

? Вышел Vue 2.7 «Naruto».

? Большое обсуждение, что использовать в prettier — табы или пробелы.

? W3C станет некоммерческой организацией, представляющей общественные интересы с января 2023 года.

Что там у вас ещё

От кнопки «Создать приложение» до публикации в каталоге — глазами разработчика

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

Привет! Меня зовут Олег Чикелёв, я разработчик сервисов на VK Mini Apps. Эта история началась буднично, как и многие другие: однажды я пришёл к другу с идеей приложения, и мы загорелись быстро сделать его на этой платформе. Расскажу вам о своём опыте разработки и о том, как выглядит жизненный цикл продукта с точки зрения разработчика. Вы узнаете, как мини-приложения тестируются в баг-трекере и как они появляются в каталоге. А в качестве примера буду использовать нашу разработку — VK API/VK Bridge Sandbox.

Читать далее

Разрабатываем десктопное приложение для заметок с помощью Tauri (React + Rust)

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


Привет, друзья!


В данном туториале мы разработаем десктопное приложение с помощью Tauri. Tauri — это фреймворк для создания десктопных приложений, похожий на Electron, но позволяющий использовать Rust вместо Node.js, например, для взаимодействия с файловой системой.


В качестве фреймворка для разработки пользовательского интерфейса я буду использовать React и TypeScript, а для работы с зависимостями для JavaScriptYarn.


Источником вдохновения для меня послужила эта замечательная статья.


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


Приложение будет представлять собой своего рода однострочный терминал для записи заметок в файл tasks.txt, находящийся в домашней директории (для Windows — это C:\Users\[User]). Приложение будет запускаться с помощью сочетания клавиш Ctrl + Shift + Q и завершаться при нажатии Esc.


Вот как это будет выглядеть:





Репозиторий с кодом проекта.


Если вам это интересно, прошу под кат.

Читать дальше →

Настройка ESLint для чистого кода в проектах на Vue

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

В процессе работы над проектами разработчики придерживаются определенного кодстайла. Как правило, за это отвечает ESLint. ESLint — это линтер для языка программирования JavaScript. Он статически анализирует код на наличие проблем, многие из которых можно исправить автоматически.

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

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

Читать далее

Как я встраивал JS в свой игровой движок

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

Писать на С++ игры долго и дорого, но при этом по перфомансу получается хорошо. Но далеко не всё в играх, требовательно к производительности, особенно 2D. Например всякие окошечки не производят тяжелых расчетов внутри. А на больших проектах они могут занимать до 80% всего объема кода. И на С++ есть проблемы на продакшене - если где-то крешится или бажит, приходится перезаливать приложение.

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

Совсем недавно прикрутил JS к своему движку. Кому интересны подробности - добро пожаловать под кат.

Читать далее

Фронтенд-новости №12. Вышел EcmaScript 2022, фавиконки в 2022, как будет выглядеть веб только с Chromium

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

Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 20–26 июня.

? EcmaScript 2022. 22 июня 2022 года 123 Генеральная ассамблея Ecma утвердила спецификацию языка ECMAScript 2022 — теперь он официально является стандартом. Внутри все новинки.

? Как создавать иконки сайтов в 2022 году — всё о favicon. Пришло время переосмыслить то, как мы создаем набор иконок для современных браузеров, и остановить безумные генераторы.

? Как будет выглядеть веб только с Chromium?. Chromium – это движок, Chrome – браузер. На Chromium построено большинство браузеров.

Еще 49 новостей

Организация react-компонентов с помощью dot-notation и почему я часто прибегаю именно к этому способу

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

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

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

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

Читать далее

Отрисовка в браузере большой анимации или как я ушел с mp4 к своему формату видео

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

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

Читать далее

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

Как Computed Properties в Angular помогают пропускать титры

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

Привет, Хабр! Меня зовут Алексей Охрименко, я TechLead вертикали Ai/Voices онлайн-кинотеатра KION в МТС Digital, автор русскоязычной документации по Angular и популярного плагина для рефакторинга Angular-компонентов.   

Мой коллега Алексей Мельников уже рассказывал про фичу пропуска титров в KION, про ее бизнес- и tech-составляющие. Я же остановлюсь на том, какие у нас проблемы возникли в процессе реализации фичи и как мы их решили с помощью Computed Properties в Angular*. Добро пожаловать под кат!

Читать далее

JavaScript: интересные возможности AbortController

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


Привет, друзья!


Представляю вашем вниманию адаптированный и дополненный перевод этой замечательной статьи.


AbortController и AbortSignal предоставляют возможность применения некоторых интересных паттернов, рассмотрению которых и посвящена данная статья.


Однако давайте начнем с типичного примера использования AbortController.

Читать дальше →

Верни мне мой 2007: как изменилось представление о фронтенд-разработке за последние годы [опрос]

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

Рынок разработчиков прагматичен и суров. Он лишён сентиментальности и далёк от благотворительности. Иначе как объяснить, что он требует от фронтенд-разработчика знать и С, и последние фреймворки? Хорошо это или плохо? Всегда ли так было? Так ли сильно отличается современный фронтендер от себя же в прошлом? Давайте разбираться.

Итак...

Фронтенд-новости №11. JQuery живее всех живых, замена CAPTCHA, вариативные шрифты в Figma

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

Дайджест новостей и полезных статей из мира фронтенд-разработки c 13 по 19 июня.

Главное на 20 июня

Замените CAPTCHA на Private Access Tokens

Исследователи: мы изучили 1 000 000 сайтов и видим, что jQuery самый популярный, а вы говорите, что не используете его.

В Figma появились вариативные шрифты

Другие новости о доступности, спецификациях, вёрстке, JavaScript и Node.js внутри дайджеста.

Что там у вас ещё

Как я Markdown парсер выбирал

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

Недавно я решил создать свой сайт, и мне понадобилось выбрать парсер Markdown для отрисовки статей в блоге.

То, что начиналось как: «Окей, гугл, какой парсер выбрать?», – вылилось в полноценное исследование существующих реализаций парсеров.

О том, какие открытия меня ждали на этом пути, и будет данная статья.

Читать далее

JavaScript: заметка о сканере предварительной загрузки и пропуске невидимого контента

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


Привет, друзья!


В этой заметке я хочу рассказать о двух вещах:


  1. Сканере предварительной загрузки (теоретическая часть).
  2. Пропуске невидимого контента (практическая часть).

Обе технологии используются браузером для повышения скорости загрузки веб-приложений.


Теоретическая часть представляет собой адаптированный и дополненный перевод этой статьи. Практическая часть — это небольшой эксперимент по применению новых свойств CSS, о которых рассказывается в этой статье (перевод).


Если вам это интересно, прошу под кат.

Читать дальше →

Фронтенд-новости №10. Опубликован HTTP/3, History API мёртв, WebContainers доступны в Firefox

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

Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 6–12 июня.

А вот главные новости:

HTTP/3 опубликован в качестве предлагаемого стандарта

History API мёртв, да здравствует Navigation API

WebContainers (способ запуска Node.js в браузере) официально поддерживаются в Firefox.

Что там у вас ещё