Отдышавшись после петербургской HolyJS, мы прочитали все зрительские отзывы — и узнали, какие доклады понравились зрителям сильнее всего. А благодаря тому, что во время конференции шла YouTube-трансляция первого зала, часть этих «фаворитов» уже доступна для всех.

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

Автору материала, перевод которого мы сегодня публикуем, недавно попался один вопрос на StackOverflow, который заставил его задуматься об обработке значений null и undefined в JavaScript. Здесь он приводит анализ текущей ситуации, показывает некоторые приёмы безопасной работы с null и undefined, а также, говоря о будущем, рассматривает оператор ?..

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

Задача — создание и поддержание еженедельного расписания, такого как расписание уроков в школе или расписание работы врачей и чиновников. Имеется набор слотов, каждый слот — это место в недельном расписании с различными дополнительными параметрами, такими как номер кабинета, имя сотрудника. Требуется построить гибкую систему с полной историей, способную решать задачи типа: создать другое расписание с начала лета, заменить учителя на ближайшие 3 недели, передвинуть расписание с пятницы на субботу из-за праздника.

Напишу, обо что обычно спотыкаются и как это решить, решу задачку о закрашивании полоски, а затем приведу примеры простого бэкенда на node/sequelize и закончу несложным фронтендом на vue/vuex/vuetify/nuxt, где можно будет все это потаскать мышкой и посмотреть, как работает.

Коды выложены на github, развернуто здесь.

В этом году мы снова бесплатно транслируем главный зал фестиваля конференций РИТ++. Во второй день в главном зале Node.JS и асинхронный JavaScript, статистика для разработчика, путь от 1 до 30 релизов в неделю, в поисках идеального CI-пайплайна, гитхаб и профессиональное выгорание.

Трансляция первого дня РИТ++ в YouTube

Трансляция второго дня РИТ++ в YouTube

@RITFestStream — медиа-стрим из главного зала, всё самое интересное в главном зале, выводы из докладов, самые ключевые мысли и прикольные фотографии!

Подпишитесь на канал и тогда не пропустите новые видео, которые мы будем постепенно добавлять туда после конференций.

Сегодня начинаем в 11:00, полное расписание доступно на сайте, а ниже самые интересные доклады, которые сможет увидеть любой желающий!

Материал, перевод которого мы сегодня публикуем, посвящён организации наблюдения за изменениями файлов в Node.js. Автор материала, Дэйв Джонсон, говорит, что необходимость в системе наблюдения за файлами появилась у него в процессе создания IoT-проекта, связанного с кормлением аквариумных рыбок. Когда кто-то из членов семьи их кормит, он нажимает одну из трёх кнопок. В частности, речь идёт о кнопке на плате расширения, подключённой к Raspberry Pi, о кнопке Amazon Dash, и о кнопке в веб-интерфейсе. Любое из этих действий приводит к записи в лог-файл строчки с указанием даты, времени и типа события. В результате, взглянув на содержимое этого файла, можно понять, пора кормить рыбок или нет. Вот его фрагмент:

2018-5-21 19:06:48|circuit board
2018-5-21 10:11:22|dash button
2018-5-20 11:46:54|web

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

Как бы вы сделали быстрый hashmap для 64-битных ключей? Если ключи 32-битные, то вряд ли можно сделать что то быстрее чем встроенный ES6 Map, но если ключи 64 битные, то начинаются сложности потому что JS застрял на 32-битном int.

В этом году мы снова бесплатно транслируем главный зал фестиваля конференций РИТ++.

Трансляция первого дня РИТ++ в YouTube

Трансляция второго дня РИТ++ в YouTube

Текстовый медиастрим в телеграм-канале (канал @RITFestStream)

Подпишитесь на канал и тогда не пропустите новые видео, которые мы будем постепенно добавлять туда после конференций.

Начинаем в 9:30 с приветственного слова Олега Бунина, а в 10:00 начнутся доклады.

Полное расписание доступно на сайте, а ниже самые интересные доклады, которые сможет увидеть любой желающий!

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Задача

Есть приложение, сгенерированное с помощью create-react-app. Нужно развернуть его на github.io.

Проблемой является то, что Github Pages работает только со статическим кодом и Jekyll.

Последний минорный релиз добавляет поддержку часто запрашиваемой фичи — событий указателей (pointer events)!

Также, он включает исправления для метода getDerivedStateFromProps. Полный список изменений доступен ниже.

Привет Всем! Я недавно запустил на GitHub проект JavaScript Algorithms and Data Structures, который содержит примеры классических алгоритмов и структур данных написанных на JavaScript с объяснениями, примерами и ссылками для дальнейшего изучения (в частности на соответствующие YouTube видео).

Основная задача проекта — помочь программистам в изучении и применении алгоритмов и сделать это на JavaScript-е.

Недавно был выпущен Node.js 10.0.0. Это — седьмой основной релиз платформы. Он, в октябре 2018, получит статус LTS на три года. Обычно основные релизы Node выпускают два раза в год. Один — в апреле, а второй — в октябре. В материале, перевод которого мы сегодня публикуем, дан обзор основных новшеств Node.js 10.0.0 с точки зрения разработки серверных приложений и безопасности.

Эта статья — отчет о моем участии во втором этапе хакатоне, организованного компанией karma.red. Подробнее о хакатоне можно почитать на специальной страничке.

Для тех, кто любит читать код, а не статьи — репозиторий проекта.

Любители видео тоже не обижены :) В этом видео можно послушать краткое содержание статьи, посмотреть, как реализуется биржа шаг за шагом и увидеть вживую ее работу.

Возможно, вы слышали о том, что в JavaScript ES6 появились новые объекты — так называемые прокси. Тем, кто знает о том, что такое прокси-объекты, и умеет с ними работать, они могут принести немалую пользу. Сегодня мы публикуем перевод материала, который направлен на то, чтобы объяснить всем желающим особенности работы с прокси-объектами JS на множестве примеров.



Также откройте в новой вкладке наш предыдущий пост: JavaScript-прокси: и красиво, и полезно

Производители браузеров работают над W3C API, которое утвердит Picture-in-Picture (PiP) режим и позволит сайтам показывать всплывающие видео вне окна браузера.

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

Некоторые платформы добавили поддержку PiP-режима, но это были API, заточенные под OS, то есть работающие с любыми видеоприложениями, но не только с браузерами.

Сущность и предназначение множества возможностей JavaScript вполне очевидны. А вот некоторые, вроде генераторов, могут, на первый взгляд, показаться странными. Такое же впечатление способны вызвать и, скажем, символы, которые похожи и на значения примитивных типов, и на объекты. Однако, язык программирования — это целостная система, одни возможности которой полагаются на другие. Поэтому обычно нельзя в полной мере понять что-то одно, не разобравшись со всем тем, с чем это связано, от чего зависит, и на что влияет.



Материал, перевод которого мы сегодня публикуем, направлен на разъяснение таких механизмов и конструкций JavaScript, как символы, известные символы, итераторы, итерируемые объекты, генераторы, механизм async/await, и асинхронные итераторы. В частности, речь здесь пойдёт о том, почему они появились в языке, и о том, как ими пользоваться. Надо отметить, что темы, которые будут здесь подняты, рассчитаны на тех, кто уже имеет некоторое представление о JavaScript.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

После прочтения заголовка у многих наверняка возникает вопрос — зачем ещё один велосипед при наличии уже обкатанных Mongoose, Mongorito, TypeORM и т. д.? Для ответа нужно разобраться в чём отличие ORM от ODM. Смотрим википедию:

ORM (англ. Object-Relational Mapping, рус. объектно-реляционное отображение, или преобразование) — технология программирования, которая связывает базы данных с концепциями объектно-ориентированных языков программирования, создавая «виртуальную объектную базу данных».

То есть ORM — это именно про реляционное представление данных. Напомню, в реляционных БД нет возможности просто взять и встроить документ в поле другого документа (в этой статье записи таблиц тоже называются документами, хоть это и некорректно), можно конечно хранить в поле JSON в виде строки, но индекс по данным в нём сделать не выйдет. Вместо этого используются "ссылки" — в поле, где должен быть вложенный документ, вместо него записывается его идентификатор, а сам документ с этим идентификатором сохраняется в соседней таблице. ORM умеет работать с такими ссылками — записи по ним автоматически сразу или лениво забираются из БД, а при сохранении не нужно сперва сохранять дочерний документ, брать назначенный ему идентификатор, записывать его в поле родительского документа и только после этого сохранять родительский документ. Нужно просто попросить ORM сохранить родительский документ и всё что с ним связано, а он (object-relational mapper) уже сам разберётся как это правильно сделать. ODM же наоборот, не умеет работать с такими ссылками, зато знает про встроенные документы.

В предыдущем сообщении Apollo graphql client применялся для разработки чисто клиентского приложения. В документации Apollo graphql client есть (очень лаконичный) раздел, посвященный серверному рендерингу и изоморфным приложениям.

Одна из сложностей серверного рендеринга в react.js является необходимость асинхронной загрузки данных, т.к. серверный рендеринг в reaсt.js — операция синхронная. Например, фреймверк next.js предлагает для этого использовать специальный компонент page в котором реализован дополнительный метод static async getInitialProps(), в котором предлагается проводить асинхронную загрузку данных. Такое решение не лишено недостатков. Например, этот метод статический, следовательно не имеет доступ к экземпляру компонента, метод реализован только для компонента самого верхнего уровня и отсутствует у вложенных компонентов. Решение с Apollo graphql client может быть использовано для компонента произвольного уровня вложенности.

Появившиеся в JavaScript новые асинхроные конструкции async/await выглядят проще, чем Promise, и, конечно, значительно читабельнее, чем «callback-джунгли». Но одна вещь беспокоила меня — это использование try-catch. Сначала я подумал, что это не проблема, но, к несчастью, мне пришлось работать с цепочкой вызовов API, в которой каждый вызов API имел свое сообщение об ошибке, которое должно было прологировано. Вскоре я понял, что создаю «try/catch-джунгли», которые ничем не лучше «callback-джунглей».