Обновить
512K+

Веб-разработка *

Делаем веб лучше

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

Шпаргалка по метрикам производительности cURL: как измерить задержку сервера

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


Эту шпаргалку я написал в первую очередь, потому что был несколько озадачен, когда в течение более, чем 10 минут пытался найти в Google значение time_pretransfer. Попробуйте сами, я подожду. Это настоящая загадка!
Читать дальше →

Vue/React Store и JS Request Manager

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

Время идет, технологии растут, а разработка тяжела на перемены. Все больше и больше ресурсов зависят от API (но нет единых стандартов и решений). До сих пор популярен REST... Что бы сделать запрос на такой сервер, необходимо задать header (auth token), указать тип запроса, адрес, задать get параметры, указать параметры в теле и тип этого тела (json/multipart). Благо есть axios и fetch и они от части решают проблему с отправкой запросов. Время идет дальше и количество запросов - которые нужно отправлять растет, а код начинает превращаться в свалку копипасты. Иногда делают мини конструкторы или обертки. Большая же часть живет по старинке.

Эта часть кода начинает жить в хранилищах (Store). В дальнейшем я буду приводить примеры на основе Vuex (Vue Store), но в целом думаю это актуально и для React и Angular. Мы разгрузим Store и перенесем все запросы в Request Manager.

Читать далее

Создание внешних запросов с использованием HttpFactory (Joomla)

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

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

С использованием Joomla довольно легко настроить cURL и все необходимые резервные варианты подключений в одной строчке кода.

Читать далее

CSS: системные цвета, шрифты и кое-что ещё

Время на прочтение4 мин
Охват и читатели12K
Думаю, все мы, в целом, знакомы с таким способом описания CSS-цветов:

color: OldLace;
background: rebeccapurple;

Полагаю, их обычно называют «именованными цветами».



Но конкретные цвета, одни и те же в любой ситуации, к которым можно обращаться по именам, это — далеко не единственный вид особых CSS-цветов. Есть ещё одна разновидность подобных цветов. Их имена связаны с цветами уже не так однозначно. Речь идёт о так называемых «системных цветах». Джим Нильсен опубликовал потрясающий материал на эту тему. Вот, что он пишет:

Мне нужна возможность выразить следующее: «Эй, браузер! Используй для выпадающего списка тот же тёмный цвет (или тот же светлый цвет, если страница оформлена с помощью светлой темы), который ты применяешь для фонового цвета документа». Мне нужен доступ к чему-то наподобие переменной, которая указывает именно на тот «тёмный», который использует браузер.

SiteAnalyzer 2.5 — Скрейпинг данных, проверка уникальности и скорость загрузки страниц

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

Всем привет! После весьма продолжительного периода мы, наконец, подготовили новый релиз SiteAnalyzer, который, надеемся, оправдает ваши ожидания и станет незаменимым помощником в SEO-продвижении.


SiteAnalyzer 2.5

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

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

Как устроена серверная UI-система Airbnb

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

Прежде чем разбираться с реализацией серверного UI (SDUI) от Airbnb, важно понять, что это вообще такое и какие преимущества оно дает относительно традиционного клиентского UI.

Обычно данные обрабатываются серверной частью, а за работу интерфейса отвечает конкретный клиент (веб-браузер, приложения для iOS, Android). В качестве примера возьмем страницу Airbnb со списком предложений. Чтобы отобразить этот список пользователю, клиент может запросить данные у бэкенда, а затем преобразовать их в UI.

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

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

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

А что, если клиент даже не будет знать, что он отображает список предложений? Можно ли передавать клиенту напрямую UI, а не данные для построения интерфейса? Именно это и происходит в случае SDUI: мы передаем UI и данные вместе, а клиент отображает всё это независимо от того, что конкретно там внутри.

Читать далее

Памятка и туториал по HTTP-заголовкам, связанным с безопасностью веб-приложений

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


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


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


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


В практической части мы реализуем простое Express-приложение, развернем его на Heroku и оценим безопасность с помощью WebPageTest и Security Headers. Также, учитывая большую популярность сервисов для генерации статических сайтов, мы настроим и развернем приложение с аналогичным функционалом на Netlify.


Исходный код приложений находится здесь.


Демо Heroku-приложения можно посмотреть здесь, а Netlify-приложения — здесь.


Основными источниками истины при подготовке настоящей статьи для меня послужили следующие ресурсы:


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

Практическое применение WebRTC Canvas стриминга

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

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

Читать далее

Разработка REST-серверов на Go. Часть 7: GraphQL

Время на прочтение11 мин
Охват и читатели9.2K
Перед вами — седьмая (заключительная) часть серии статей о разработке REST-серверов на Go. В предыдущих статьях мы занимались, в основном, различными подходами к разработке REST API для простого приложения, автоматизирующего управление задачами. Сегодня мы исследуем кое-что совершенно новое и поговорим о том, как сделать похожий API, пользуясь не REST, а GraphQL.



Хотя тут я уделяю определённое внимание причинам выбора GraphQL и сравнению GraphQL и REST, это здесь не главное. Есть множество статей, освещающих эти вопросы, и я советую вам поискать их и почитать. Главная цель этого материала заключается в том, чтобы привести пример создания GraphQL-сервера на Go. Для того чтобы не усложнять нашу задачу, этот сервер использует модель данных, очень похожую на модель, реализованную в одном из вариантов сервера из предыдущих материалов (речь идёт о простом бэкенде, дающем возможность работать со списком задач).
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №477 (12 — 18 июля 2021)

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

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

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

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


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

Слово, состоящее исключительно из букв, цифр и символов подчёркивания, начинающееся с буквы или с символа подчёркивания. Такие слова используются в роли имён переменных оболочки и имён функций. Их ещё называют идентификаторами.
Читать дальше →

Альтернативы Redux в 2021 году

Время на прочтение6 мин
Охват и читатели27K
Предположим, вы создаёте или планируете создать React-приложение и вам нужен некий механизм для управления состоянием этого приложения. Если так — это значит, что вам есть из чего выбирать. В сфере инструментов для управления состоянием React-приложений, после её взрывного роста в 2014 году, наблюдается определённое спокойствие. Но в нашем распоряжении, несмотря на это, всё ещё имеется множество решений — от стабильных и проверенных временем, до сверхсовременных.

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



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

User Experience Core Guide — Новый подход к работе с абстракцией

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

TL; DR

Я потратил пол года и 500 часов своей жизни на создание бесплатного инструмента содержащего 896 углов обзора наиболее популярных проблем в Product Management-е с позиции когнитивных искажений (научно доказанных паттернов мышления человека).

63 вопроса и 896 ответов которые можно с легкостью экстраполировать на сотни других вопросов. Минимум мнения. Максимум науки.

Цель проекта в двух словах: создать инструмент для менеджеров, который станет аналогом паттернов программирования для программистов.

Ссылка: https://uxcg.io/ru/

Содержание статьи (6 минут)

Читать далее

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

10 no-code-платформ, на которые стоит обратить внимание в 2021 году

Время на прочтение7 мин
Охват и читатели205K
No-code-инструменты позволяют обычным пользователям ПК создавать веб-сайты и приложения без необходимости написания программного кода. До того момента, когда подобные инструменты достаточно хорошо развились и достаточно сильно распространились, разработка простого веб-приложения была нетривиальной задачей, решить которую могли лишь программисты. Но, к счастью, в наши дни это уже не так. Несмотря на то, что no-code-инструменты не способны решить абсолютно все задачи разработки программных проектов, подбор и использование адекватного стека подобных инструментов, без сомнения, упростит и ускорит решение некоторых задач, сделает доступнее то, от чего раньше, по разным причинам, отказывались.



Если задуматься об этом, то вы, возможно, уже использовали low-code- или no-code-инструменты. А если вы занимаетесь веб-разработкой, то вероятность того, что вы уже работали с такими инструментами, возрастает. Даже если вы сами не верите в то, что пользовались подобными инструментами, знайте, что вы, хотя бы в какой-то форме, их применяли.

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

Идеальный инструмент для работы с СУБД без SQL для Node.js или Все, что вы хотели знать о Sequelize. Часть 3

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

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


Представляю вашему вниманию руководство по 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

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

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

Иногда проверка различных идей носит чисто экспериментальный характер. Так, на волне нового релиза TypeScript я решил попробовать типизировать DSL запросов к MongoDB (синтаксис запросов довольно прост, но при этом функционален и широко известен).

Под катом — результат. Я бы написал «не пытайтесь повторить это в своем рабочем проекте», но вдруг какие-то мысли и способы применения TypeScript окажутся полезными и вам.
Читать дальше →

Redux Vs Vuex. Часть 1

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


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


Предлагаю вашему вниманию результаты небольшого исследования, посвященного сравнению Redux и Vuex.


Введение


Redux и Vuex — это библиотеки для управления состоянием React и Vue-приложений, соответственно. Каждая из них по-своему реализует архитектуру для создания пользовательских интерфейсов, известную под названием Flux.

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

Пишем frontend на golang

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

Вас задрало, что node_modules соревнуются по количеству используемого места с вашей коллекцией музыки?

Вы перечитали инструкцию к Redux  в шестидесятый раз и поняли две вещи: "До меня кажется доходит..." и "Думаю, мне стоит перечитать это ещё раз!"

Вы в очередной раз узнали, что 1 + "1" == "11", а  [] - {} == NaN?

Билд скрипт в webpack занимает больше места чем ваша библиотека на javascript?

Тогда заходите под кат, я покажу вам, как можно перевести ваш фронтэнд на го. 

ничеgoшеньки...

WebRTC в Docker. Борьба за ресурсы

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

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

Читать далее

Делаем собственные курсоры для сайтов

Время на прочтение7 мин
Охват и читатели27K
Существует множество способов обогащения визуальных впечатлений, которые вызывает у пользователей креативный веб-сайт, множество способов перевода существующего статического дизайна на новый уровень. В частности, речь идёт об оснащении сайтов интерактивным функционалом. А здесь мы исследуем один из способов реализации такого функционала через разработку собственного курсора (указателя мыши) для сайта, представляющего собой независимый элемент пользовательского интерфейса. Это — элемент интерфейса, который будет не только интерактивным и визуально привлекательным, но и полезным с практической точки зрения. Мы уделим особое внимание примерам кода, которые дадут всем желающим возможность расширить те базовые вещи, которые мы рассмотрим, и сделать собственный качественный курсор для сайта.


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