Обновить
512K+

JavaScript *

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

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

4 важных нововведения в ES2022

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

ECMAScript 2022 - это новый стандарт JavaScript, который будет выпущен в июне 2022 года. Давайте посмотрим на самые важные изменения, которые, наиболее вероятно, должны появиться в новом релизе, так как они достигли уже 4-ой, последней стадии принятия новвоведений в спецификации EcmaScript (TC39).

Читать далее

Градиентный поиск коэффициентов квадратической регрессии

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

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

Читать далее

Пишем nest.js с нуля на typescript

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

Nest.js - популярный node.js фреймворк с отличной архитектурой, основанной на Angular.

Под капотом Nest использует надежные платформы HTTP-серверов, такие как Express (по умолчанию), и при желании также может быть настроен для использования Fastify! Nest обеспечивает уровень абстракции по сравнению с этими распространенными платформами Node.js (Express/Fastify), но также предоставляет свои API-интерфейсы непосредственно разработчику. Это дает разработчикам свободу использовать множество сторонних модулей, доступных для базовой платформы.

Читать далее

Основы внутреннего устройства JavaScript

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

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

Введение


Почти все уже слышали о концепции движка V8 и большинство людей знает, что язык JavaScript однопотоковый или что он использует очередь обратных вызовов.

В этом посте мы подробно разберём эти концепции и объясним, как же работает JavaScript. Благодаря знанию этих подробностей вы сможете писать более оптимальные приложения, надлежащим образом использующие API. Если вы работаете с JavaScript относительно недавно, этот пост поможет вам понять, почему JavaScript настолько «странный» по сравнению с другими языками. А если вы опытный разработчик на JavaScript, то он позволит вам по-новому взглянуть на внутреннее устройство JavaScript Runtime, с которым вы работаете каждый день.
Читать дальше →

Использование Typescript для создания react компонента «Простой фабрики»

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

Использование Typescript при создании React компонента «Простой фабрики»

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

Читать далее

Восстановление типов JSON

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

Для транспорта данных я почти всегда упаковываю их в JSON. Но вот беда: как правило, библиотеки для парсинга возвращают примитивные типы да объекты с массивами — всё то, что заложено самим форматом. Но что если хочется получить модели сущностей?

Читать далее

Мой опыт с Webpack 5 Module Federation

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

Всем привет. Меня зовут Михаил, я - фронтенд-разработчик в Лиге Цифровой Экономики.

В последнее время я пробую себя в должности руководителя направления фронтенд-разработки, однако я хочу с вами поделиться опытом разработки приложения с применением Webpack Module Federation, о том, какие задачи приходилось решать и проблемы, которые возникли на этом пути. Не буду вдаваться в теорию о микрофронтах и module federation, об этом уже много написано и предполагается, что вы знакомы с базовой настройкой. Мы же поговорим о самом «вкусном», некоторые моменты будут опущены в целях сосредоточения на деталях.

Читать далее

Дежавю От Laravel к AdonisJs, или как поменяли исходный код в Матрице

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

Привет, Хабр.

Как и все разработчики на php, я тоже иногда сталкивался с NodeJs .
На днях просмотривая фреймворки Node столкнулся на AdonisJs . И после нескольких минут прочтения кодоа я почувствовал себя как в матрице .

Прошла черная кошка, за ней другая, такая же.

А теперь немного про AdonisJs.

Когда дело доходит до разработки веб-приложений, есть десятки фреймворков на выбор. Менее известный, но очень любимый фреймворк — AdonisJs, известный своим красивым кодом и простотой для бэкэнда.

AdonisJs — это узел. js MVC для согласованного, стабильного и выразительного кода. Адонис заботится о многих трудоемких деталях разработки, предлагая стабильную экосистему для серверных веб-приложений.

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

Читать далее

JavaScript: делаем селфи с помощью браузера

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



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


В этой статье я покажу вам, как делать селфи в браузере.


Мы разработаем простое приложение со следующим функционалом:


  • при инициализации приложение запрашивает у пользователя разрешение на захват медиапотока (далее также — поток) из видеокамеры его устройства;
  • захваченный поток передается в элемент video;
  • из потока извлекается видеотрек (далее также — трек), который передается в интерфейс для захвата изображений;
  • из экземпляра интерфейса извлекается список поддерживаемых возможностей (capabilities) и настроек (settings) для фото;
  • из трека также извлекается список поддерживаемых возможностей и настроек;
  • формируется список диапазонных полей (<input type="range">) для установки настроек для фото;
  • пользователь имеет возможность снимать фото (take photos) и захватывать фреймы (grab frames);
  • фото выводится в элемент img, генерируется ссылка для его скачивания;
  • фрейм инвертируется и отрисовывается на холсте (canvas), генерируется ссылка для его скачивания.

Репозиторий.


Приложение будет разработано на чистом JavaScript.


Для создания шаблона приложения будет использован Vite.


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

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

Основные приемы работы с Canvas [Part 1]

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

Привет! Сегодня я хотел бы начать цикл статей на тему того, как работать с canvas в HTML5 и как применять знания в области матанализа для реализации необычных и интересных эффектов.

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

Сегодня мы рассмотрим, как рисовать различные фигуры, и реализуем алгоритм fibonacci flower, также известный как golden ratio или phyllotaxis.

Читать далее

О чем вам не расскажут на курсах по Реакту. Вредные советы, как стать незаменимым разработчиком

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

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

Всем привет, меня зовут Макс Кравец, я CEO IT-компании Holyweb, и сегодня хочу поделиться вредными советами о том, как стать незаменимым React-разработчиком. Поехали!

Читать далее

График платежей с напоминалкой в Telegram с помощью Google Sheets & JavaScript

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

Меня заинтересовал челлендж: в течение 26 недель откладывать N+100 руб, где N - сумма, вложенная на прошлой неделе. Я решил откладывать деньги по средам, составил такую табличку в Google Sheets

Читать далее

Язык программирования типов, скрытый в TypeScript. Utility Types

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

TypeScript — это язык, расширяющий JavaScript, добавляя в последний типизацию. Правда, так как TypeScript не имеет runtime-а (почти), он транслируется в JavaScript, в процессе чего, вся типизация теряется. Такую типизацию можно назвать лишь инструментом статического анализа кода. Тем не менее — это очень мощный инструмент. К тому же, помимо проверки кода, типизация также и документирует его.

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

Читать далее

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №505 (1 — 6 февраля 2022)

Время на прочтение3 мин
Охват и читатели7.6K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Нужна ли лямбда?

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

В одной из прошлых статей о NestJS + GraphQL + Lambda я получил очень интересный комментарий. Поэтому и решил поделится своими мыслями и опытом о том, когда все-таки стоит использовать Lambda функцию, а когда - нет.

Читать далее

Учимся правильно писать CSS классы в JSX

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

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

Где проблема актуальна? В экосистеме React, и где мы пользуемся замечательным синтаксисом под названием JSX.

В данной статье мы рассмотрим, почему стоит использовать библиотеку clsx практически в каждом React-проекте.

Читать далее

React: WebRTC Media Call

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


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


В этой статье я покажу вам, как разработать приложение для совершения аудио/видео звонков с помощью WebRTC.


Функционал нашего приложения будет следующим:


  • при запуске приложения пользователь А получает уникальный идентификатор;
  • он передает этот идентификатор пользователю Б;
  • пользователь Б использует идентификатор пользователя А для совершения аудио или видео звонка;
  • пользователь А получает уведомление о звонке пользователя Б и может ответить на него с видео или без либо отклонить звонок;
  • в процессе соединения пользователи имеют возможность включать/выключать аудио и видео;
  • после завершения звонка выполняется перезагрузка WebRTC для обеспечения возможности совершения нового звонка.

Демо приложения.


Репозиторий с исходным кодом.


Основной источник вдохновения.


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

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

Как мы устранили страшное легаси незаметно для пользователей

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

Мы разрабатываем ati.su, это площадка где грузоотправитель находит грузоперевозчика. Между собой они общаются заявками. Заявка — это карточка с множеством полей. Так мы её и зовём — «Карточка груза». Поиск таких заявок по сложным фильтрам — то, зачем к нам приходят сотни тысяч пользователей.

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

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

Читать далее

Децентрализованная конфигурация webpack или как упростить сборку проекта

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

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

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

Но если говорить о конфигурации сборки, то такая декомпозиция скорее редкость, и в больших проектах часто можно встретить огромные webpack.config.js, модификация которых может доставить немало проблем и привести к ошибкам.

Если вам хочется сделать работу со сборкой проще и надёжнее при модификациях, то добро пожаловать под кат.

Читать далее

Возможности TypeScript, которых нужно избегать

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

Добрый день, меня зовут Павел Поляков, я Principal Engineer в каршеринг компании SHARE NOW, в Гамбурге в ?? Германии. А еще я автор телеграм канала Хороший разработчик знает, где рассказываю обо всем, что обычно знает хороший разработчик.

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

Читать далее