Авторизация в системах одна из ключевых частей. Можно использовать какие то мощные решения, Firebase например, или что то из множества хороших библиотек. Если хочется уменьшить количество зависимостей или для самообразования - то можно написать свое.
Данное решение с использованием Nginx и Node.js приложения. Все описанное является очень частным случаем используемого подхода, в том смысле что есть некоторые условия в которых требовалось создать решение, и данный вариант реализации хорошо подходит только в в этих условиях.
JavaScript *
Прототипно-ориентированный язык программирования
- Новые
- Лучшие
- Все
- ≥0
- ≥10
- ≥25
- ≥50
- ≥100
Новости
Как я спарсил WebGL карту с Федерального сайта
Как я спарсил WebGL карту с Федерального сайта. Написал эту статью для тех, у кого похожая задача.
Как сегодня делают игры в браузере? Часть 1
Игра в браузере на React и Three.js!
Я занимаюсь фронтендом уже очень давно, порядка 10 лет. И как любой уважающий себя фронтендер, я люблю тащить javascript туда, где обычно его не используют: на сервер, в мобильные приложения, в геймдев. С тех пор как я увидел первые WebGL демосцены в 2013-м, я мечтал сделать что-то похожее, скажем, на это.
Так что я провел немало времени экспериментируя и читая документацию, и вот что у меня получилось.
Дисклеймер: я не претендую на абсолютные знания того, как делают игры, я всего лишь описываю свой наивный подход к поиску ответа на вопрос, который задает заголовок. Поэтому это будет не совсем игра, а скорее концепт, интерактивная демо-сцена.
Rust — будущее инфраструктуры JavaScript
Rust - это быстрый, надежный и экономичный, с точки зрения памяти, язык программирования. Его признавали одним из самых любимых языков программирования шесть лет подряд (на основании опросов).
Созданный Mozilla, он теперь используется в Facebook, Apple, Amazon, Microsoft и Google для системной инфраструктуры, шифрования, виртуализации и низкоуровневого программирования.
Почему Rust сейчас используется для замены таких частей веб-экосистемы JavaScript, как минификация (Terser), транспиляция (Babel), форматирование (Prettier), комплектация (webpack), линтинг (ESLint) и другие?
Jivosite больше не снизит Google Speed
Передо мной возникла одна задачка - повысить Google Speed на одном из интернет-ресурсов.
Задачка ещё та, учитывая то, что большинство пунктов выполнена, но при этом просадка капитальная. А всё из-за чего? Куча метрик, яндекс информеры (оцени Я.Маркет, рейтинг Я.Маркет) и... Jivosite.
Figma plugin API человеческим языком. Часть 3
Подключаем React
В предыдущих двух статьях я описал, как без особых усилий можно начать писать плагин для Figma. И для того, чтобы сделать простой плагин, этого знания вполне достаточно. Но вот если интерфейс вашего плагина более сложный, чем пара кнопок и инпутов, если наворочена логика состояний, такой подход становится неудобен. Особенно учитывая, что весь код надо писать в html. Решить данную проблему нам поможет его величество React и его преосвященство Webpack. Подключение к плагину обеих технологий хорошо описаны в официальной документации Figma. И можно было не писать эту статью если бы не одно но, официальная инструкция не работает. А раз так, поехали!
Часть. 2. Создание аналога Moodle. Реализация API для прототипа SPA. Межсайтовые запросы. Первые проблемы архитектуры
В первой части я рассказал про то, почему я пришел к необходимости создания собственной СДО. Итак, на текущий момент имеем: сайт, работающий на самописном PHP frameworke, отдельные скрипты JS, подключаемые на определённых страницах с соответствующим типом задания (тест, квест). Тип задания и необходимость загрузки скриптов определяется выполнением кода PHP на конкретной странице. JS работает локально (база данных используется только PHP).
Появилась задача взаимодействия JS с базой данных для расширения функционала интерактивных возможностей СДО. Так как ранее я работал с PHP, было принято решение передавать сведения, полученных PHP из базы данных в JS. Для хранения массивов в SQL сначала я использовал сериализацию и base64, но быстро отказался от такого подхода ввиду сложности понимания структуры данных, хранящихся в базе.
Управление данными в системе автоматизации на Vue и Vuex и решение проблем тестирования с помощью Jest
Привет! Меня зовут Артём Карачёв, я фронтенд-разработчик в Sportmaster Lab. Сейчас мы пишем модуль автоматизации физической фотостудии, где работают несколько фотографов, менеджеров, фоторедакторов, кладовщиков и других. Все фото кроссовок, которые вы видите в интернет-магазинах Спортмастера, снимают и загружают в базу данных именно эти люди.
Благодаря модулю автоматизации они смогут их выгружать быстрее и легче. Возможно, наш опыт организации vuex-хранилища и слоя получения данных, а также последующего интеграционно-компонентного тестирования окажется кому-то полезным.
Как сделать классическую игру «Жизнь» на хуках React
Задача разработчика — показать пользователю, как живут и умирают цифровые клетки. Автор воспользовался React и её хуками: управление состоянием и возможность абстрагироваться от логики, связанной с состоянием, позволяют легко читать и понимать проект. Подробностями реализации и кодом на Github делимся, пока у нас начинается курс по Frontend-разработке.
Поиск проблемных промисов в JavaScript
Асинхронность означает возможность написания кода, который не подвержен обычным проблемам, связанным с потокобезопасностью, и поддерживает выполнение множества задач в «параллельном» режиме. Например — ожидание считывания файла не блокирует другие вычисления.
Но небольшие ошибки в асинхронном коде могут приводить к появлению неразрешённых промисов. То есть — к участкам кода, выполнение которых, однажды начавшись, никогда не завершается.
Мы столкнулись с этой проблемой, когда в пуле соединений нашей базы данных knex постоянно заканчивались доступные соединения, после чего происходил сбой сервиса. Обычно в рамках соединения выполняется запрос, после чего оно возвращается в пул и может быть использовано для выполнения другого запроса.
Эти соединения что-то захватывало.
Речь идёт о кодовой базе в миллионы строк кода, которой в течение нескольких лет занимались десятки программистов. Может — проблема заключается в неразрешённых промисах? Я решил исследовать этот вопрос.
Обращение к Javascript-сообществу: перестаньте писать квадраты
Пост про то, почему стоит, как минимум избегать квадратичной сложности в тех местах, где на это нет никаких причин. Если вы широко используете .concat
в .reduce
эта статья для вас. В ней я попытаюсь разобрать на пальцах почему это может быть очень плохим решением, и как это исправить.
Аналог Moodle или как преподаватель-юрист создавал собственную систему дистанционного обучения. Часть 1. Начало
Дисклеймер: система дистанционного обучения (СДО) в настоящее время введена в эксплуатацию (продакшн), апробирована, протестирована и успешно работает. Система бесплатна, имеет открытый исходный код и выложена в репозитории GitHub. С точки зрения стека технологий она построена на фреймворке Laravel 8.0 (PHP 7.4) с использованием библиотек и иных пакетов (программ): React (redux+router), SocketIo, Docker, NodeJs, Rest API, WebRTC, Leaflet и т.д.
В серии статей я расскажу, как устроена система, через что пришлось пройти при ее разработке и какие проблемы пришлось решать.
React: примеры использования GSAP
Привет, друзья!
Хочу поделиться с вами примерами использования GSAP
.
Что такое GSAP
?
Если в двух словах, то GSAP
(The GreenSock Animation Platform) — это набор инструментов для реализации анимации любого уровня сложности с помощью JavaScript
.
Ох уж эти QR коды
Пандемия, осеннее обострение, зима близко и QR коды на каждом шагу, роботы наступают, рутина работы затягивает. Хочешь покушать покажи картинку. Скучную и квадратную, для робота, не для человека.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №494 (14 — 21 ноября 2021)
Когда же нужно использовать useCallback
Все мы знаем что с появлением React 16.8 в нашу жизнь пришли хуки. Действительно, они упрощают процесс написания кода, используя функциональные компоненты в сравнении с классами, но некоторые хуки вызывают много вопросов у разработчиком. В данной статье мы рассмотрим на примерах, когда же нужно использовать useCallback, а когда можно обойтись без него.
Regex for lazy developers
Регулярные выражения для ленивых людей?!
Regex – это модуль вашего языка программирования который позволяет работать со сложными и большими строками просто! Давайте разбираться в них вместе. Приятного прочтения ;)
Next.js: подробное руководство. Итерация вторая
Привет, друзья!
Хочу поделиться с вами заметками о Next.js
(надеюсь, кому-нибудь пригодится).
Next.js
— это основанный на React
фреймворк, предназначенный для разработки веб-приложений, обладающих функционалом, выходящим за рамки SPA
, т.е. так называемых одностраничных приложений.
Как известно, основным недостатком SPA
являются проблемы с индексацией страниц таких приложений поисковыми роботами, что негативно влияет на SEO
.
Впрочем, по моим личным наблюдениям, в последнее время ситуация стала меняться к лучшему, по крайней мере, страницы моего небольшого SPA-PWA-приложения
нормально индексируются.
Кроме того, существуют специальные инструменты, такие как react-snap
, позволяющие превратить React-SPA
в многостраничник путем предварительного рендеринга приложения в статическую разметку. Метаинформацию же можно встраивать в head
с помощью таких утилит, как react-helmet
. Однако Next.js
существенно упрощает процесс разработки многостраничных и гибридных приложений (последнего невозможно добиться с помощью того же react-snap
). Он также предоставляет множество других интересных возможностей.
Обратите внимание: данная статья предполагает, что вы обладаете некоторым опытом работы с React
. Также обратите внимание, что заметки не сделают вас специалистом по Next.js
, но позволят получить о нем исчерпывающее представление.
Заметки состоят из 2 частей. Это часть номер два.
Делаем автоматическое отображение ошибок контрола в ангуляре
Работа с формами - одна из фундаментальных задач которой сталкиваешься при написании фронтенд-приложения.
К счастью для Angular разработчиков большинство полезных инструментов для создания и работы с формами уже присутствуют в фреймворке - просто бери и используй. Однако оффициальные гайды ангуляра упускают одну очень очень важную вещь - отображение ошибок контрола.
В данной статье посмотрим как можно добавить автоматичекое отображение ошибок под вашими контролами без километров копипасты.
SlackBot на минималках для работы с кандидатами
Давайте представим, что есть кандидат, и у него есть несколько этапов найма (интервью с hr, техническое интервью, согласование с руководством и тд.). По некоторым этапам HR сотруднику приходилось руками передавать информацию по кандидату в разные чаты, что неудобно и требовало время и внимание HR. Поэтому появилась идея это автоматизировать.
Вклад авторов
-
alexzfort 9040.0 -
ilusha_sergeevich 2778.0 -
azproduction 2516.8 -
alizar 1913.6 -
ilya42 1736.8 -
phillennium 1616.2 -
TheShock 1133.0 -
spmbt 944.6 -
aio350 813.8 -
RubaXa 727.0