Обновить
198.06

JavaScript *

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

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

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

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

Меня заинтересовал челлендж: в течение 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 мин
Охват и читатели54K

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

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

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

Читать далее

React: WebRTC Media Call

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


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


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


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


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

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


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


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


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

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

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

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

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

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

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

Читать далее

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

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

Вам посылка, или Как мы доставляем сообщения с сервера на клиент в реальном времени

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

Меня зовут Алексей Комаров, я — старший frontend-разработчик в SuperJob. Хочу поделиться опытом реализации механизма обновления данных в реальном времени у нас на сайте. Под катом — подробности о выборе подхода, о проблемах, с которыми мы столкнулись при разработке, о наших кейсах оптимизации 
клиентской стороны и, конечно, немного кода и наглядных схем.

Читать далее

Прошлое и будущее frontend, или Как сбежать от jQuery

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

Мы в *instinctools организовали и провели серию онлайн-дискуссий с разработчиками и экспертами в области IT. Проект «Техпора» – это возможность обсудить темы, которые затрагивают основные точки роста в IT. Мы не накладывали на беседу приглашенных гостей ограничения, а специально для «Хабра» выбрали из разговора яркие моменты, чтобы их можно было обсудить. 

В разговоре приняли участие Денис Радин, организатор JSNation и React Summit,  Виталий Фридман, сооснователь Smashing Magazine, Андрей Кучеренко, Chief Software Engineer, EPAM Systems, и Ира Левина, драйвер Frontspot сообщества. Целиком дискуссию можно посмотреть на YouTube, а согласиться или не согласиться с приглашенными экспертами лучше всего в комментариях.

Читать далее

Почему мы пишем super(props)?

Время на прочтение4 мин
Охват и читатели10K
Я писал super(props) большое количество раз в жизни, и хотел бы знать:
class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
  }
  // ...
}

Конечно, class fields proposal позволяет нам пропустить церемонию инициализации:
class Checkbox extends React.Component {
  state = { isOn: true };
  // ...
}

Подобный синтаксис был запланирован, когда в React 0.13 была добавлена ​​поддержка простых классов в 2015 году. Определение конструктора и вызов super(props) всегда предполагалось как временное решение, пока поля класса не предоставят эргономичную альтернативу.

Но вернемся к этому примеру, используя только функции ES2015:
class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
  }
  // ...
}

Здесь у вас не избежно должны возникнуть следующие вопросы: Почему мы вызываем super? Можем ли мы не вызывать его? Если нам нужно вызвать его, что произойдет, если мы не передадим props? Есть ли другие аргументы?
Читать дальше →

Экосистема React в 2022 году

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

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

Читать далее

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

Simple serverless front + back

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

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

Читать далее

Собеседование по Javascript, мой опыт. Часть первая

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

“Не люблю темные стекла, сквозь них темное небо.
Дайте мне войти, откройте двери.”

(Виктор Цой)

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

Читать далее

Руководство по Supabase. Часть 1

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



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


В этом цикле из 2 статей я хочу рассказать вам о Supabase — открытой (open source), т.е. бесплатной альтернативе Firebase. Первая статья будет посвящена теории, во второй — мы вместе с вами разработаем полноценное social app с аутентификацией, базой данных, хранилищем файлов и обработкой изменения данных в режиме реального времени.


Что такое Supabase?


Supabase, как и Firebase — это SaaS (software as a service — программное обеспечение как услуга) или BaaS (backend as a service — бэкенд как услуга). Что это означает? Это означает, что при разработке fullstack app мы разрабатываем только клиентскую часть, а все остальное предоставляется Supabase через пользовательские комплекты для разработки программного обеспечения (SDK) и интерфейсы прикладного программирования (API). Под "всем остальным" подразумевается сервис аутентификации (включая возможность использования сторонних провайдеров), база данных (PostgreSQL), файловое хранилище, realtime (реакцию на изменение данных в реальном времени), и сервер, который все это обслуживает.


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

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

JavaScript редактор SVG диаграмм который весит в 6,5 раз меньше bootstrap (библиотека с открытым исходным кодом)

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

Demo | GitHub

Эксперименты с созданием редактора диаграмм на Blazor Webassembly (Blazor WebAssembly: Drag and Drop в SVG, Blazor WebAssembly: соединительные линии в SVG) показали что технология не годится для интенсивных манипуляций с DOM.

То что будут проседания было известно заранее: WebAssembly не имеет доступа к DOM, любые изменения только через вызовы JavaScript. Задержки оказались такими большими, что перетаскивание на мобильном тормозило уже после добавления третьей фигуры.

Читать далее

Го: Дообучаем модель

Время на прочтение6 мин
Охват и читатели2.7K
What will we do with a drunken sailor,
What will we do with a drunken sailor,
What will we do with a drunken sailor,
Early in the morning?

Drunken Sailor


В прошлый раз мы остановились на том, что модели на основе свёрточных нейросетей, вполне способны подсказывать интересные и неочевидные ходы и, таким образом, могут использоваться как основа для построения бота для игры Го. Напомню, что источником модели послужила вот эта замечательная книга. Для того чтобы двигаться дальше: дообучать модель, просто с ней экспериментировать или вообще полностью переделать и обучить с нуля, требовались вычислительные ресурсы. И они появились…
Читать дальше →

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

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

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

S3 + Lambda + ffmpeg (supports heic)

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

Достаточно частая задача веб разработчика - нарезать картинки. Предлагаю вашему вниманию готовое решение, используя Serverless framework + Lambda + S3.

Читать далее

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