Обновить
454.12

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

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

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

Как коридорное исследование помогло обновить каунтеры тредов в мессенджере

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

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

Читать далее

Как типизировать Vuex Store

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели6.5K

Всем привет!

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

You are welcome!

Хочу типизировать Vuex

Ключ к эффективности разработки: делать то, что нужно, но лишнего не делать

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

Кучу времени можно сэкономить если:


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


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

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

Обновление состояния системы через Server-Sent Events (SSE) без затей

Уровень сложностиСредний
Время на прочтение11 мин
Охват и читатели22K

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

Допустим, у нас есть список объектов, к примеру – список эпизодов для шоу. Один клиент на него смотрит, а другой в это время добавляет в список еще один эпизод. Хорошо бы факт добавления нового эпизода сразу отобразить у первого клиента. То же самое относится и к просмотру информации об отдельном эпизоде: если один клиент её просматривает, а другой – редактирует, было бы здорово результат редактирования сразу отображать у первого.

Для решения данной задачи очень удобно использовать механизм Server-Sent Events (SSE). О том как это сделать в проектах, у которых на беке Node, а на фронте React, я и хочу поговорить.

Читать далее

Что такое GraphQL

Уровень сложностиСредний
Время на прочтение11 мин
Охват и читатели173K

В этой статье мы узнаем, что такое GraphQL и сравним его с REST API, проведём аналогии и посмотрим на главные различия. Ну а также, естественно, посмотрим, как работает GraphQL и какие у него возможности.

Читать далее

Пойди туда — не знаю куда: как оформить спецификацию, чтобы не запутаться самому и не выбесить коллег

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

Привет, на связи Ефим Иванов — Product Owner, а в недавнем прошлом системный аналитик на финтех-проектах Outlines Tech. Делюсь своим опытом, как составлял спецификации и облегчал работу команде. Я выявил два подхода: «все по полочкам» и «история создания решения». В статье найдете объяснение, чем отличаются методы, как выглядят и насколько удобны для каждого звена команды разработки. 

Читать далее

Как декораторы могут упростить разработку веб-форм

Уровень сложностиПростой
Время на прочтение16 мин
Охват и читатели6.8K

Относительно недавно в TC39 предложение с реализацией декораторов в EcmaScript вышло на 3-ю пред финальную стадию. Чуть позже MicroSoft выпустил 5-ю мажорную версию TypeScript, в которой новая реализация декораторов начала работать из коробки без каких-либо экспериментальных флагов. Babel тоже подсуетился, и в своей документации начал рекомендовать использовать новую реализацию декораторов. А это означает лишь то, что декораторы наконец-то начали полноценно входить в жизнь JavaScript разработчиков.

И на волне этого хайпа я решил рассказать, как, используя декораторы, можно улучшить ваш Developer Experience при разработке форм.

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

Читать далее

Подборка: 7 плагинов Figma для оптимизации дизайн-процессов

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

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

Читать далее

React Fiber & Concurrency Part 2 (2)

Уровень сложностиПростой
Время на прочтение8 мин
Охват и читатели7.9K

Данная статья посвящена реализации не блокирующего рендеринга - Concurrent React. Мы рассмотрим то, как работают под капотом Concurrent Features добавленные в 18 версии React. На основе теоретических знаний разберем результат профилирования тренировочного приложения и наглядно увидим, как Concurrent Features разбивают рендеринг приложения.

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

Читать далее

Какого цвета интернет: история смены окраски веб-страницами

Уровень сложностиПростой
Время на прочтение11 мин
Охват и читатели19K

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

Читать далее

Чем занимается AppSec? Безопасность внутренних веб-ресурсов

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели5K

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

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

Читать далее

Macromedia Flash: Взлет и закат технологии

Уровень сложностиСредний
Время на прочтение29 мин
Охват и читатели23K

Если никто не подведёт итог под историей Macromedia Flash, она рискует затеряться в хламе IT-подвала. Напомню, что “волшебный” плагин Flash player стоял практически на всех компьютерах мира. И в какой-то момент именно эта технология была лучшей для анимации, игр и мультимедиа. В этой статье я расскажу историю технологии и добавлю историю от лица разработчика: что мы создавали, как работали,  плюсы минусы самой платформы и ключевые события. Ну и главное, почему Flash взлетела до массового распространения, а потом потерпела поражение и осталась в прошлом. И ответить на вечный вопрос “Кто виноват?” Иная версия вопроса: Зачем Стив Джобс убил Flash? Спойлер, Джобс не виноват.

Читать далее

Добавили бота в свой Telegram канал? Будьте готовы с ним попрощаться

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели52K

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

Читать далее

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

Обзор NativePHP. Инструмент для создания собственных нативных desktop приложений на Laravel

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели16K

Привет, коллеги!

В этой статье я сделаю небольшой обзор NativePHP, который появился на последнем Laracon. Что из себя представляет NativePHP? Перед нами фреймворк, который позволяет нам писать нативные десктоп приложения, используя PHP. Приложения кроссплатформенные - можно писать под Mac, Windows и Linux. И все это с использованием нашего любимого PHP с использованием Laravel. Но как обещают разработчики в будущем появятся и другие драйверы.

Читать далее

Вы кто такие, я вас не знаю, или Как мы делаем JWT-аутентификацию

Уровень сложностиСредний
Время на прочтение11 мин
Охват и читатели141K

Привет! Меня зовут Данил, я backend-разработчик в Doubletapp. Почти во всех наших проектах есть пользователи, которые могут войти в систему. А значит, нам почти всегда нужна авторизация. Мы используем авторизацию, построенную на JSON Web Token. Она отлично сочетает в себе простоту реализации и безопасность для приложений.

В интернете есть много разных материалов с объяснением, что такое JWT и как им пользоваться. Но большинство примеров ограничиваются выдачей токена для пользователя. В этой статье я хочу рассказать не только о том, что такое JWT, но и как можно реализовать работу с access и refresh токенами и решить сопутствующие проблемы. Будет немного теории и много практики. Присаживайтесь поудобнее, мы начинаем.

Путеводитель:

Что такое JSON Web Token?
Использование и реализация
Простая реализация JWT
Access и refresh tokens
Как отозвать токены
Доступ с нескольких устройств
Удаление старых данных
Резюмируем

Читать далее

React + Three.js. Создаём собственный 3D шутер. Часть 1

Уровень сложностиСредний
Время на прочтение31 мин
Охват и читатели28K

Привет, дорогие пользователи мира IT!

В эпоху активного развития веб-технологий и интерактивных приложений, 3D-графика становится всё более актуальной и востребованной. Но как создать 3D-приложение, не теряя преимуществ веб-разработки? В этой статье мы рассмотрим, как сочетать мощь Three.js с гибкостью React, чтобы создать собственную игру прямо в браузере.

В статье вы познакомитесь с библиотекой React Three Fiber и научитесь создавать интерактивные 3D-игры.

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

Методы хэширования паролей. Долгий путь после bcrypt

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

Шифровальная машина M-209, на основе которой создана первая в истории функция хэширования crypt в Unix

Прошло 25 лет с момента изобретения алгоритма хэширования bcrypt (1997), но он до сих пор считается одним из самых стойких к брутфорсу хэшей.

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

Геймификация в охране труда: кому, зачем и как?

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

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

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

Читать далее

Прогресс WebAssembly и будущее веба. Быстрые интерфейсы, пример Figma

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели9.4K

Скетч из статьи Лин Кларк «Создание и работа с модулями WebAssembly»

WebAssembly (Wasm) — это бинарный формат для безопасного и эффективного выполнения портативных программ в стековой виртуальной машине (в браузере или на сервере). Как и ASM.js, представляет собой низкоуровневый код. Есть ещё WAT — WebAssembly Text, человекочитаемая версия бинарного кода.

WebAssembly — не столько язык программирования, сколько цель компиляции, новый вид ассемблера, который работает близко к железу, принимая программы на C, C++, Rust и других привычных языках. При этом Wasm гораздо быстрее ASM.js и выполняет код в браузере почти как нативные программы под любой ОС.
Читать дальше →

Многогранный мониторинг Angie, форка веб-сервера nginx

Уровень сложностиСредний
Время на прочтение11 мин
Охват и читатели18K

Здравствуй, дорогой читатель. Меня зовут Дмитрий. Я — системный инженер компании «Веб-сервер». На протяжении моего опыта оказания услуг технической поддержки сначала в компании Nginx, а теперь и в компании разработчика российского веб-сервера Angie, мы отвечаем на очень популярный вопрос: «Как организовать мониторинг состояния веб-сервера?». А вот так.

Читать далее

Вклад авторов