JavaScript *

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

В рамках статьи я постараюсь просто рассмотреть и дать ответы на следующие темы:

• что такое архитектура и почему она должна быть чистая;

• как написать архитектуру, которая основана на сервисах;

• пример построения архитектуры для приложения заметок;

• интеграция архитектуры с реактом.

Добрый день! Решил поделиться своими небольшими достижениями в использовании популярной библиотеки Passport.js. Задача была такой: использовать две локальные стратегии passport.js при том, что пользователи находятся в двух разных коллекциях Mongo Atlas.

Итак, дано: две коллекции пользователей в Mongo Atlas, и две локальные стратеги в Passport.js.

Задача, реализовать аутентификацию учителей по логину и паролю, учеников по Фамилии и номеру класса. Тут кстати в вопросе за одно и объясняется, почему мы используем две локальных стратегии, именно потому, что способы идентификации пользователя разные (учителя- логин/пароль, ученики - Фамилия/класс).

Основные возможности приложения

• Регистрация/авторизация пользователей
• Добавление/удаление постов
• Лайк/дизлайк постов
• Добавление/удаление комментариев к постам
• Отображение количества лайков и комментариев

18/3/2021 Наконец-то была закончена интеграция инструмента msdf-bmfont-xml для библиотеки openglobus. Текстовые метки стали выглядеть гораздо красивее! Мне помог инструмент msdf-bmfont-xml для создания атласов шрифтов и рендеринга текстур для (multichannel signed distance fields) MSDF.

Привет! Для начала процитирую страницу из Википедии, да будет здоров Джимми Уэйлс и все редакторы, поддерживающие свободную энциклопедию. Согласно ней, индекс бигмака — это неофициальный способ определения паритета покупательной способности. Если проще, этот индекс довольно наглядно показывает уровень цен в стране, ведь в основе стоимости бигмака: две мясных котлеты гриль, специальный соус, сыр, огурцы, салат и лук, всё на булочке с кунжутом… Кроме этого, конечно же, в ценник заложены аренда помещений и оборудования, рабочая сила и многие другие факторы.

Важно и другое: милые сердцу многих рестораны с желтой буквой «M» имеют обширнейшую сеть, что дает возможность сравнить цены почти по всему миру. Исследования ведутся с 1986 года и постоянно актуализируются журналом «The Economist».

Мы визуализировали имеющиеся в свободном доступе данные и собрали простое приложение, используя React и наш проект Quarkly.

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

Привет, меня зовут Григорий Бизюкин, я преподаватель Школы разработки интерфейсов и фронтенд-разработчик в Яндексе. Давайте поговорим о функциональном программировании в мире JavaScript. Мы все про ФП что-то слышали, нам всем оно интересно, но у меня, когда я искал полезные материалы для подготовки к лекциям, сложилось такое впечатление: есть куча статей, каждая из которых либо говорит об ФП общими словами, либо раскрывает отдельный маленький кусочек темы, чего, конечно, недостаточно.

^{Добавим функционального света}

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

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

• необходимо добавить на сайт предприятия возможность подавать официальные заявки или обращения;
• необходимо добавить в веб интерфейс портала возможность подписывать договор присоединения;
• необходимо реализовать онлайн приемную.

В качестве приятного бонуса — возможность получать подписанные ЭЦП документы на электронную почту.

Речь будет идти о сертификатах ЭЦП, выпущенных НУЦ РК.

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

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

Cloud Programming Simplified: A Berkeley View on Serverless Computing, February 10, 2019

Эта документация поможет найти компромиссы между различными шаблонами (patterns) React, а также определить, когда использование каждого из них будет наиболее целесообразным. Нижеприведенные шаблоны позволят получить более практичный и многократно используемый код, придерживаясь принципов проектирования, таких как разделение ответственности, DRY (Don’t repeat yourself — не повторяй себя) и повторное использование кода. Некоторые из этих шаблонов помогут решить проблемы, которые возникают в больших React приложениях, таких как пробрасывание (prop drilling) или управление состоянием. Каждый основной шаблон включает пример, размещенный на CodeSandBox.

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

Нормализация. От нее мы или страдаем или пишем собственное решение с множеством проверок на существование сущности в общем хранилище. Попробуем разобраться и решить эту проблему!

Angular Universal — это опенсорсный проект, который расширяет функциональность @angular/platform-server. Он делает возможным Server Side Rendering в Angular. В этой статье мы обсудим проблемы и возможные решения, с которыми мы столкнулись при разработке реального приложения с Angular Universal.

Какие характеристики должны быть у web-приложения, чтобы соответствовать критерию "прогрессивное"? Понятно, что, как и обычные web-приложения, прогрессивные строятся на базе "большой тройки" web-технологий - HTML/CSS/JS. Но что именно делает web-приложения прогрессивными?

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

Интерактивное демо PS5.js

Подготовка

Если вы следите за отчетами исследователей, которые участвуют в bug bounty программах, то наверняка знаете про категорию уязвимостей JavaScript prototype pollution. А если не следите и встречаете это словосочетание впервые, то предлагаю вам закрыть этот пробел, ведь эта уязвимость может привести к полной компрометации сервера и клиента. Наверняка хотя бы один продуктов вашей (или не вашей) компании работает на JavaScript: клиентская часть веб-приложения, десктоп (Electron), сервер (NodeJS) или мобильное приложение.

Эта статья поможет вам погрузиться в тему prototype pollution. В разделах Особенности JavaScript и Что такое prototype pollution? вы узнаете как работают объекты и прототипы JavaScript и как особенности их функционирования могут привести к уязвимостям. В разделах Prototype pollution на сервере и Prototype pollution на клиенте вы научитесь искать и эксплуатировать эту уязвимость на кейсах из реального мира. Наконец вы изучите способы защиты и почему самый распространенный способ защиты можно легко обойти.

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

Привет. С выходом Chrome 89 (а так же в Deno 1.8) появилась возможность использовать Карты импортов (Import maps) – механизма, позволяющего получить контроль над поведением JavaScript-импортов.

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

Если кратко, то теперь можно будет совершенно законно и без всяких сборщиков писать, скажем, так:

import React from 'react';

Под катом разберём как это всё работает.

Реактивность

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

Поначалу звучит очень логично. Где то на краю экрана пробежал вражеский персонаж, и только ту часть CANVAS мы и хотим перерисовать, сэкономив ресурсы. Это было настолько правдоподобно, что я за ночь изрисовал лист A4 в поисках оптимального решения этой задачи. И вот что получилось.