Обновить
128K+

JavaScript *

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

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

Малоизвестные, но популярные JS-фреймворки для фронтенда

Время на прочтение5 мин
Охват и читатели15K
Не так давно мы, создавая динамические веб-приложения, использовали для работы с DOM чистый JavaScript или jQuery. С тех пор появилось много замечательных JavaScript-фреймворков и библиотек. Они помогают разрабатывать проекты, которые, по привлекательности и удобству, превосходят то, что было раньше.



Автор статьи, перевод которой мы сегодня публикуем, хочет рассказать о нескольких мощных, но малоизвестных клиентских фреймворках и библиотеках, основанных на JavaScript. Конечно, «большая тройка», в лице Angular, React и Vue, никуда не делась, но в мире веб-разработки есть и другие инструменты, достойные внимания. Такие, например, как Svelte, Preact и Riot. Вопрос выбора подходящего средства зависит от многих факторов. Среди них — знания разработчика, особенности проекта, ситуация на рынке. Поэтому давайте рассмотрим малоизвестные фреймворки, расширив тем самым свободу выбора тех, кто ищет подходящий инструмент для своего очередного проекта.
Читать дальше →

10 отличных Github репозиториев, которые должен знать каждый веб-разработчик

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

Кроме огромных репозиториев с источниками для подготовки к интервью, здесь много чего интересного


Я собрал список из десяти отличных репозиториев на Github, которые помогут вам существенно расширить свои знания.


image


А я его перевел, т.к. показалось, что пост многим будет интересен. Перевод очень вольный: я опустил нерелевантные промо-ссылки и гипер эмоциональные похвалы автора оригинала, чтобы оставить только суть. Еще, обновил цифры, чтобы информация была более актуальной к моменту публикации этого перевода. Итак, перейдем к списку.
Читать дальше →

Сила PWA: Система видеонаблюдения с нейросетью в 300 строчек JS-кода

Время на прочтение8 мин
Охват и читатели14K
Привет, Хабр!

Веб-браузеры медленно но верно реализуют большинство функций операционной системы, и остается все меньше причин разрабатывать нативное приложение, если можно написать веб-версию (PWA). Кроссплатформенность, богатое API, высокая скорость разработки на TS/JS, и даже производительность движка V8 — все идет в плюс. Браузеры уже давно умеют работать с видеопотоком и запускать нейронные сети, то есть мы имеем все компоненты для создания системы видеонаблюдения с распознаванием объектов. Вдохновленный этой статьей, я решил довести демо-пример до уровня практического применения, чем и хочу поделиться.

Приложение записывает видео с камеры, периодически отправляя кадры на распознавание в COCO-SSD, и если обнаружен человек — фрагменты видеозаписи порциями по 7 секунд начинают отправляться на указанный емейл через Gmail-API. Как и во взрослых системах — ведется предзапись, то есть мы сохраняем один фрагмент до момента детекции, все фрагменты с детекцией, и один после. Если интернет недоступен, или возникает ошибка при отправке — видеозаписи сохраняются в локальной папке Downloads. Использование емейла позволяет обойтись без серверной части, мгновенно оповестить хозяина, а если злоумышленник завладел устройством и взломал все пароли — он не сможет удалить почту у получателя. Из минусов — перерасход трафика за счет Base64 (хотя для одной камеры вполне хватает), и необходимость собирать итоговый видеофайл из множества емейлов.

Работающее демо здесь.

Проблемы возникли следующие:
Читать дальше →

Докеризация приложения, построенного на базе React, Express и MongoDB

Время на прочтение6 мин
Охват и читатели64K
Автор статьи, перевод которой мы публикуем сегодня, хочет рассказать о том, как упаковывать в контейнеры Docker веб-приложения, основанные на React, Express и MongoDB. Здесь будут рассмотрены особенности формирования структуры файлов и папок таких проектов, создание файлов Dockerfile и использование технологии Docker Compose.


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

Пишем простой WYSIWYG-редактор с помощью ProseMirror

Время на прочтение7 мин
Охват и читатели10K
Когда в Sports.ru понадобился свой WYSIWYG-редактор, мы решили сделать его на основе библиотеки ProseMirror. Одной из ключевых особенностей этого инструмента является модульность и широкие возможности кастомизации, поэтому с его помощью можно очень тонко подогнать редактор под любой проект. В частности, ProseMirror уже используют в The New York Times и The Guardian. В этой статье мы расскажем о том, как с помощью ProseMirror написать свой WYSIWYG-редактор.

Пишем простой WYSIWYG-редактор с помощью ProseMirror
Читать дальше →

Не пиши одно и то же: как переиспользуемые компоненты React помогут фронтенд-разработчику быстрее создавать приложения

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

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

Я занимаюсь фронтенд-разработкой уже 10 лет и расскажу о применении компонентов для создания элементов фронтенда — это значительно упрощает жизнь фронтенд-разработчика.

Написано при поддержке Mail.ru Cloud Solutions.
Читать дальше →

Визуализация работы сервис-воркеров

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


Доброго времени суток, друзья!

Вероятно, многие из вас слышали о таком новшестве в экосистеме JavaScript, как сервис-воркеры (Service Workers), которые являются ключевым элементом современной веб-разработки. Сервис-воркеры становятся все более востребованными, в первую очередь, благодаря популярности прогрессивных веб-приложений (Progressive Web Applications — PWA).

Когда я впервые услышал о них, я задался вопросом: «Когда мы должны использовать сервис-воркеры? В каким сценариях или контексте мы можем их использовать?»

В данной статье мы рассмотрим несколько практических примеров использования сервис-воркеров, что впоследствии, смею надеяться, сделает счастливыми ваших пользователей.

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

Декларативная фильтрация данных на фронте. JS/TS

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


Часто ли вам приходилось писать обработчики фильтрации для ваших данных? Это могут быть массивы для отрисовки таблиц, карточек, списков — чего угодно.


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


Как же решить проблему возрастающей сложности?

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

Network diagram as code / Схема сети как код

Время на прочтение6 мин
Охват и читатели19K
В последние пару лет стал больше заниматься документацией. Написать поясняющий текст о том, как работает та или иная система — в целом, это достаточно просто. Нарисовать схему, на которой будут отображены все ключевые объекты, связи между этими объектами, тоже вполне легко.

Но самый проблемный момент — это поддерживать эту документацию в актуальном состоянии. И ладно бы текст, но схемы… Т.к. вся документация онлайн, т.е. в формате html, то к тексту прилагаются картинки gif/jpeg/png, на которых собственно изображены схемы. А схемы рисуются в различных программах типа Visio или онлайн-сервисах а-ля draw.io. Затем экспортируешь схему в графический формат и прилагаешь к html. Все просто.

В чем проблема?
Читать дальше →

Redux Toolkit больше не нужен?

Время на прочтение6 мин
Охват и читатели19K
Проблема огромного количества boilerplate-кода при использовании Redux известна всем, каждый ее решает как может. И мы на разных проектах использовали разные костыли и велосипеды, не теряя при этом надежду найти что-то стандартизированное и удобное. Чуть больше года назад мы отчаялись в своих поисках и всерьез взялись за решение проблемы. Что из этого получилось — описано ниже.
Читать дальше →

Telegram.Такси за 200 строк кода

Время на прочтение2 мин
Охват и читатели28K
Телеграм Такси

Сегодня из пустых пивных банок и старых покрышек мы соберём телеграм-бота для такси. С его помощью можно будет вызывать такси нажатием всего лишь двух кнопок. Вернее так: при первом использовании потребуется нажать три кнопки, а затем всегда — только две. Код написан на Node.js (т.е. ECMAScript, aka JavaScript), без использование каких-либо бот-фреймворков или бот-библиотек — только натуральный продукт — Telegram Bot API. Количество кода указано в названии статьи, выполняется он в Яндекс.Облаке, а точнее в Cloud Functions, а состояния и данные хранятся в Firebase, вернее в Cloud Firestore. Ну а заявки на такси наш скромный бот отправляет в CRM Битрикс24. Как видите — задействованы все! На самого бота можно посмотреть на комиксах ниже, а кликнув по картинке-ссылке под комиксами — открыть и проверить в деле.
Читать дальше →

Чему меня научил мой коммит в Angular

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

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

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

Создаем CRUD API на Express и MySQL: часть вторая

Время на прочтение7 мин
Охват и читатели8.3K
Всем привет. В преддверии старта курса «Разработчик Node.js», хотим поделиться продолжением материала, который был написан нашим внештатным автором.





Всем еще раз привет. Мы возвращаемся к созданию приложения на Node.js и MySQL для небольшого todo — приложения на Node.js для React. С прошлого раза я немного пересмотрел структуру нашего приложения, и теперь решил добавить дополнительную колонку в базу данных под названием inner_key, которая будет необходима нам для отрисовки уникальных ключей для каждого отдельного дела (в списке повторяющихся элементов React нужен уникальный ключ на каждый элемент для его обработки в Virtual DOM. Если это по прежнему вызывает у вас вопросы, вам стоит изучить эту статью).
Читать дальше →

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

Что фронтенд разработчики должны знать о бэкенде?

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

Подавляющее большинство вещей, которые должны делать фронтенд разработчики, можно сделать не зная ничего о бэкенде кроме API.


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


Ниже представлен краткий список того, о чем должен знать разработчик интерфейсов.

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №405 (2 — 8 марта 2020)

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

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

Обработка изображений ReactJS — NodeJS

Время на прочтение5 мин
Охват и читатели17K
Доброго времени суток.

Разбор полетов провожу на Reactjs (сторона клиента) и Nodejs (сторона сервера).

Недавно в моем маленьком проекте встал вопрос, как легко и просто можно обмениваться изображениями по типу клиент — сервер.

Сегодня мы научимся отправлять бинарные данные (конкретно изображения ) со стороны клиента и обрабатывать их на сервере. Добро пожаловать в под кат.
Читать дальше →

YouTube — Ошибка. Повторите попытку позже. Идентификатор воспроизведения: <...>

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


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

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

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

Под катом — причина возникновения ошибки (для тех, кому лень читать, это AdBlock), и что с этим можно сделать. Конечно, кроме отключения самого блокировщика рекламы.
Читать дальше →

Как «взломать» RedBull

Время на прочтение4 мин
Охват и читатели12K
На самом деле правильнее назвать статью «как накрутить себе баллы в конкурсе, чтобы выиграть целый холодильник RedBull». У нас, кстати, в офисе уже стоит такой холодильник с напитками.



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

Настало ли время покинуть виртуальный дом [React'a]?

Время на прочтение4 мин
Охват и читатели11K
Аудио версия на русском (яндекс.музыка) / iTunes

Разберём что не так с фреймворками как подходом и каким может быть следующий этап развития фронтенд архитектуры.

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

Создаем свою CRUD API на Express и MySQL: часть первая

Время на прочтение6 мин
Охват и читатели33K
Всем привет. В преддверии старта курса «Fullstack разработчик JavaScript», хотим поделиться небольшим материалом, который был написан нашим внештатным автором.



Express один из самых популярных веб-фреймворков, который поддерживает роутинг, миддлвейрс и систему шаблонов. Делать бэкенд на Node.js без Express в 2020 году — довольно странное занятие, ведь Express де-факто — каркас для создания веб-приложения на Node.js.
Сегодня мы попробуем создать несложное CRUD API используя базу данных MySQL. Опытный в Node.js читатель спросит, а где же MongoDB, с которым Node.js обычно применятся в паре но, скажу сразу, это статья больше для PHP разработчиков, которые хотят немного потрогать Node.js, и чтобы смягчить переход в новую экосистему мы воспользуемся MySQL. API мы будем создавать для несложного Todo приложения, на тот случай, если кто-то захочет к своей todo (и даже неважно, написанной с помощью React или нет), присоединить немного бэка и поиграть с ним.
Читать дальше →