
Веб-разработка *
Делаем веб лучше
Vue/React Store и JS Request Manager
Время идет, технологии растут, а разработка тяжела на перемены. Все больше и больше ресурсов зависят от API (но нет единых стандартов и решений). До сих пор популярен REST... Что бы сделать запрос на такой сервер, необходимо задать header (auth token), указать тип запроса, адрес, задать get параметры, указать параметры в теле и тип этого тела (json/multipart). Благо есть axios и fetch и они от части решают проблему с отправкой запросов. Время идет дальше и количество запросов - которые нужно отправлять растет, а код начинает превращаться в свалку копипасты. Иногда делают мини конструкторы или обертки. Большая же часть живет по старинке.
Эта часть кода начинает жить в хранилищах (Store). В дальнейшем я буду приводить примеры на основе Vuex (Vue Store), но в целом думаю это актуально и для React и Angular. Мы разгрузим Store и перенесем все запросы в Request Manager.
Создание внешних запросов с использованием HttpFactory (Joomla)

Обычно когда мы хотим сделать внешний запрос мы используем для этих целей cURL. Настройка cURL довольно громоздкая, да и в принципе проблематично держать в голове все необходимые настройки. Также есть сервера без поддержки cURL, а значит Ваш код не будет работать. В этих случаях нужен запасной вариант.
С использованием Joomla довольно легко настроить cURL и все необходимые резервные варианты подключений в одной строчке кода.
CSS: системные цвета, шрифты и кое-что ещё
color: OldLace;
background: rebeccapurple;
Полагаю, их обычно называют «именованными цветами».

Но конкретные цвета, одни и те же в любой ситуации, к которым можно обращаться по именам, это — далеко не единственный вид особых CSS-цветов. Есть ещё одна разновидность подобных цветов. Их имена связаны с цветами уже не так однозначно. Речь идёт о так называемых «системных цветах». Джим Нильсен опубликовал потрясающий материал на эту тему. Вот, что он пишет:
Мне нужна возможность выразить следующее: «Эй, браузер! Используй для выпадающего списка тот же тёмный цвет (или тот же светлый цвет, если страница оформлена с помощью светлой темы), который ты применяешь для фонового цвета документа». Мне нужен доступ к чему-то наподобие переменной, которая указывает именно на тот «тёмный», который использует браузер.
SiteAnalyzer 2.5 — Скрейпинг данных, проверка уникальности и скорость загрузки страниц
Всем привет! После весьма продолжительного периода мы, наконец, подготовили новый релиз SiteAnalyzer, который, надеемся, оправдает ваши ожидания и станет незаменимым помощником в SEO-продвижении.

В новой версии мы реализовали несколько из наиболее востребованных пользователями функций, таких, как: скрейпинг данных (извлечение данных с сайта), проверка уникальности контента и проверка скорости загрузки страниц по Google PageSpeed. Вместе с этим было закрыто множество багов и проведен рестайлинг логотипа. Расскажем обо всем поподробнее.
Как устроена серверная UI-система Airbnb

Прежде чем разбираться с реализацией серверного UI (SDUI) от Airbnb, важно понять, что это вообще такое и какие преимущества оно дает относительно традиционного клиентского UI.
Обычно данные обрабатываются серверной частью, а за работу интерфейса отвечает конкретный клиент (веб-браузер, приложения для iOS, Android). В качестве примера возьмем страницу Airbnb со списком предложений. Чтобы отобразить этот список пользователю, клиент может запросить данные у бэкенда, а затем преобразовать их в UI.
И здесь есть несколько трудностей. Во-первых, на каждом клиенте нужно реализовать специфичную для списка логику, обеспечивающую преобразование и отрисовку данных. Если по ходу развития проекта вносить изменения в то, как список отображается, эта логика быстро усложняется и становится негибкой.
Во-вторых, функциональность всех клиентов должна быть единообразной. Логика экрана со списком быстро усложняется, и при этом у каждого клиента есть свои тонкости и особенности реализации для обработки состояния, отображения UI и т. д. Поэтому клиенты по реализации начинают быстро расходиться друг с другом.
Наконец, у мобильных приложений возникают сложности с версиями: при добавлении новых функций на страницу со списком нужно выпускать новую версию приложения, и пока пользователи не обновятся, у нас мало возможностей определить, насколько удобны эти функции и насколько хорошо их приняли.
А что, если клиент даже не будет знать, что он отображает список предложений? Можно ли передавать клиенту напрямую UI, а не данные для построения интерфейса? Именно это и происходит в случае SDUI: мы передаем UI и данные вместе, а клиент отображает всё это независимо от того, что конкретно там внутри.
Памятка и туториал по HTTP-заголовкам, связанным с безопасностью веб-приложений

Доброго времени суток, друзья!
В этой статье я хочу поделиться с вами результатами небольшого исследования, посвященного HTTP-заголовкам, которые связаны с безопасностью веб-приложений (далее — просто заголовки).
Сначала мы с вами кратко разберем основные виды уязвимостей веб-приложений, а также основные виды атак, основанные на этих уязвимостях. Далее мы рассмотрим все современные заголовки, каждый — по отдельности. Это в теоретической части статьи.
В практической части мы реализуем простое Express-приложение, развернем его на Heroku и оценим безопасность с помощью WebPageTest и Security Headers. Также, учитывая большую популярность сервисов для генерации статических сайтов, мы настроим и развернем приложение с аналогичным функционалом на Netlify.
Исходный код приложений находится здесь.
Демо Heroku-приложения можно посмотреть здесь, а Netlify-приложения — здесь.
Основными источниками истины при подготовке настоящей статьи для меня послужили следующие ресурсы:
Практическое применение WebRTC Canvas стриминга

В этой статье поднимем несколько надоевшую тему вебинаров и инструментов для их проведения. Нет. Писать систему для проведения вебинара не будем. Их уже до нас написано превеликое множество. Обсудим возможность подключить к вебинару рисовалку, чтобы можно было делать пометки от руки и транслировать все это дело в поток.
Разработка REST-серверов на Go. Часть 7: GraphQL

Разработка REST-серверов на Go. Часть 2: применение маршрутизатора gorilla/mux
Разработка REST-серверов на Go. Часть 3: использование веб-фреймворка Gin
Разработка REST-серверов на Go. Часть 4: применение OpenAPI и Swagger
Разработка REST-серверов на Go. Часть 5: Middleware
Разработка REST-серверов на Go. Часть 6: аутентификация
Вы тут — Разработка REST-серверов на Go. Часть 7: GraphQL
Хотя тут я уделяю определённое внимание причинам выбора GraphQL и сравнению GraphQL и REST, это здесь не главное. Есть множество статей, освещающих эти вопросы, и я советую вам поискать их и почитать. Главная цель этого материала заключается в том, чтобы привести пример создания GraphQL-сервера на Go. Для того чтобы не усложнять нашу задачу, этот сервер использует модель данных, очень похожую на модель, реализованную в одном из вариантов сервера из предыдущих материалов (речь идёт о простом бэкенде, дающем возможность работать со списком задач).
Дайджест свежих материалов из мира фронтенда за последнюю неделю №477 (12 — 18 июля 2021)

Bash-функции и их имена, которые могут быть практически всем чем угодно

С Bash связано одно распространённое заблуждение, которое заключается в том, что имена bash-функций должны быть составлены по тем же правилам, что и имена переменных. В руководстве по Bash даже даётся следующее определение термина name (имя):
Слово, состоящее исключительно из букв, цифр и символов подчёркивания, начинающееся с буквы или с символа подчёркивания. Такие слова используются в роли имён переменных оболочки и имён функций. Их ещё называют идентификаторами.
Альтернативы Redux в 2021 году
Все уже давно привыкли к тому, что библиотека Redux является лидером рынка, но, благодаря работе над React и развитию конкурирующих решений, сейчас можно подобрать что-то такое, что будет лучше Redux.

В этом материале мы рассмотрим несколько подходов к управлению состоянием React-приложений, применение которых позволит быстро создавать приложения, код которых будет понятным, которые будет легко поддерживать и тестировать.
User Experience Core Guide — Новый подход к работе с абстракцией

TL; DR
Я потратил пол года и 500 часов своей жизни на создание бесплатного инструмента содержащего 896 углов обзора наиболее популярных проблем в Product Management-е с позиции когнитивных искажений (научно доказанных паттернов мышления человека).
63 вопроса и 896 ответов которые можно с легкостью экстраполировать на сотни других вопросов. Минимум мнения. Максимум науки.
Цель проекта в двух словах: создать инструмент для менеджеров, который станет аналогом паттернов программирования для программистов.
Ссылка: https://uxcg.io/ru/
Содержание статьи (6 минут)
Ближайшие события
10 no-code-платформ, на которые стоит обратить внимание в 2021 году

Если задуматься об этом, то вы, возможно, уже использовали low-code- или no-code-инструменты. А если вы занимаетесь веб-разработкой, то вероятность того, что вы уже работали с такими инструментами, возрастает. Даже если вы сами не верите в то, что пользовались подобными инструментами, знайте, что вы, хотя бы в какой-то форме, их применяли.
В этом материале мы рассмотрим некоторые из наиболее широко используемых no-code-платформ. Применение этих платформ способно упростить решение различных задач, встающих перед программистами. Но, прежде чем мы перейдём к разговору об этих платформах, поговорим о том, что собой представляют no-code-инструменты, и о том, как ими пользуются.
Идеальный инструмент для работы с СУБД без SQL для Node.js или Все, что вы хотели знать о Sequelize. Часть 3

Доброго времени суток, друзья!
Представляю вашему вниманию руководство по Sequelize.
Sequelize — это ORM (Object-Relational Mapping — объектно-реляционное отображение или преобразование) для работы с такими СУБД (системами управления (реляционными) базами данных, Relational Database Management System, RDBMS), как Postgres, MySQL, MariaDB, SQLite и MSSQL. Это далеко не единственная ORM для работы с названными базами данных (далее — БД), но, на мой взгляд, одна из самых продвинутых и, что называется, "battle tested" (проверенных временем).
ORM хороши тем, что позволяют взаимодействовать с БД на языке приложения (JavaScript), т.е. без использования специально предназначенных для этого языков (SQL). Тем не менее, существуют ситуации, когда запрос к БД легче выполнить с помощью SQL (или можно выполнить только c помощью него). Поэтому перед изучением настоящего руководства рекомендую бросить хотя бы беглый взгляд на SQL. Вот соответствующая шпаргалка.
Это третья и последняя часть руководства, в которой мы поговорим об областях видимости ассоциаций, полиморфных ассоциациях, транзакциях, хуках, интерфейсе запросов, подзапросах, индексах, а также о многом другом.
Я постараюсь быть максимально лаконичным (надеюсь, без ущерба для полноты изложения материала). Я также постараюсь излагать материал максимально простым языком. Большинство примеров, приводимых в руководстве, заимствованы из официальной документации.
Экспериментируем с шаблонами литералов в TypeScript: как покрыть типами DSL

Привет, я Максим, в Selectel я занимаюсь фронтенд-разработкой «Облачной платформы». В этом проекте уже не один год. Вместе с развитием функциональности облака усложняется код, который я пишу. Поиск эффективных решений рефакторинга кода — одна из задач, которую я постоянно держу в голове. Поэтому метапрограммирование рассматриваю как одну из возможностей, доступных для улучшения взаимодействия с кодом.
Иногда проверка различных идей носит чисто экспериментальный характер. Так, на волне нового релиза TypeScript я решил попробовать типизировать DSL запросов к MongoDB (синтаксис запросов довольно прост, но при этом функционален и широко известен).
Под катом — результат. Я бы написал «не пытайтесь повторить это в своем рабочем проекте», но вдруг какие-то мысли и способы применения TypeScript окажутся полезными и вам.
Redux Vs Vuex. Часть 1

Доброго времени суток, друзья!
Предлагаю вашему вниманию результаты небольшого исследования, посвященного сравнению Redux и Vuex.
Введение
Redux и Vuex — это библиотеки для управления состоянием React и Vue-приложений, соответственно. Каждая из них по-своему реализует архитектуру для создания пользовательских интерфейсов, известную под названием Flux.
Пишем frontend на golang

Вас задрало, что node_modules соревнуются по количеству используемого места с вашей коллекцией музыки?
Вы перечитали инструкцию к Redux в шестидесятый раз и поняли две вещи: "До меня кажется доходит..." и "Думаю, мне стоит перечитать это ещё раз!"
Вы в очередной раз узнали, что 1 + "1" == "11", а [] - {} == NaN?
Билд скрипт в webpack занимает больше места чем ваша библиотека на javascript?
Тогда заходите под кат, я покажу вам, как можно перевести ваш фронтэнд на го.
WebRTC в Docker. Борьба за ресурсы

Несколько недель назад мы выкатили статью про Докер и WebRTC сервер и рассказали в ней о нюансах запуска. Читатели справедливо усомнились в пригодности докера для продакшена по следующим причинам:
Делаем собственные курсоры для сайтов

Пользователь взаимодействует со страницей сайта 14islands.com с использованием собственного курсора этого сайта
