Обновить
512K+

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

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

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

Как реализовать drag&drop на чистом JavaScript

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

В этом туториале мы рассмотрим, как реализовать эффект drag & drop на ванильном JavaScript. Дословный перевод с английского — «потяни и брось» — отражает суть эффекта, это хорошо знакомое любому пользователю перетаскивание элементов интерфейса. Drag & drop может понадобиться при сортировке карточек в таск-трекере, переносе между списками или вообще при перетаскивании файлов в окно браузера.

Мы разберём drag & drop на примере сортировки. Для этого создадим интерактивный список задач.

Читать далее

Что разработчику нужно знать о работе с дизайном/дизайнером

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

На дворе 2021 год, и уже давно наступило время, когда дизайнеры и программисты стали работать совместно над одним продуктом. Сейчас уже почти не встретишь команду разработки, в которой нет дизайнера. Этому способствовало массовое переселение тогдашних “Операторов ЭВМ” на графические интерфейсы. Теперь операторы - это невероятное количество разновидностей менеджеров, которые занимаются управлением различными бизнес процессами в их организациях - начиная от формирования документации, заканчивая управлением станками по сборке техники.

Краткая история графических интерфейсов

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

С появлением клавиатур были придуманы методы текстового ввода команд в компьютеры - то есть человек просто писал в заранее заданном формате то что ему нужно от машины и она давала ему результат. Так продолжалось достаточно долго, в компании пришли доступные компьютеры, и людей, которые занимаются бумажной работой массово стали пересаживать за ЭВМ.

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

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

Читать далее

Кому с Redux жить хорошо

Время на прочтение20 мин
Охват и читатели11K
Приветствую всех любителей хорошей инженерки! Меня зовут Евгений Иваха, я фронтенд-разработчик в команде, занимающейся дев-программой в ManyChat. В рамках дев-программы мы разрабатываем инструменты, позволяющие расширять функциональность ManyChat за счет интеграции со сторонними системами.

Существует мнение, что разработка через тестирование, или по канонам Test Driven Development (TDD) для фронтенда не применима. В данной статье я постараюсь развенчать этот миф и покажу, что это не только возможно, но и очень удобно и приятно.

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


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

Как совершить транзакцию в Nest.js

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

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

Как же совершать их, если вы пишите backend на Node.js + Nest.js?

Ну и как?

Основываясь на статистике: неофициальное предложение Топ-10 OWASP 2021

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

image


Многим из нас встречался список угроз Топ-10 OWASP. А некоторые даже знают, что он обновляется каждые 3-4 года. И срок следующего обновления уже подошел. Но процесс создания списка угроз OWASP плохо документирован, поэтому нам захотелось предложить прозрачный, основанный на статистике рейтинг для тех же категорий угроз.
Мы проанализировали 2 миллиона различных отчетов о безопасности из 144 открытых источников. Под катом вы найдете наш вклад в анализ Топ-10 угроз OWASP на 2021 год. При этом каждый из читающих сможет воспроизвести результаты на основе понятных метрик.

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

Переиспользуемый компонент Svelte: чтобы никому не было больно

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

Переиспользуемый компонент Svelte: чтобы никому не было больно


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


За последние года полтора для фреймворка Svelte уже создано множество различных компонентов, которые можно найти на NPM, GitHub или официальном списке. К сожалению, не все из них правильно "приготовлены" и порой их использование раздует размер бандла приложения сильнее, чем должно быть. А бывает, что такие пакеты просто невозможно использовать, потому что его автор не силён в подготовке пакетов и упустил какие-то важные моменты.


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

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

Сервис для найма продактов с нуля на Bubble: что в платформе не так и почему она все равно крутая

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

Паша Шишкин из «Карьерного цеха» рассказал о своем кейсе на Bubble — без цензуры. Он продакт, в бэкграунде — разработка и даже победа в Чемпионате мира по программированию. Паша собрал приложение на Bubble для проекта, который он делает вместе с Глебом Кудрявцевым из Skyeng. Приложение создавал в одиночку и Bubble до этого не знал — изучал всё самостоятельно. 

Читать далее

Tagged Unions в PHP (примерно как в Rust)

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

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


В предыдущей статье я писал про добавление enums в PHP8.1. Голосование прошло успешно, так что можно считать, что вопрос решенный.


Однако та реализация enums — лишь часть глобального плана. Сегодня мы рассмотрим следующий пункт, tagged unions, по-русски это переводится как "тип-сумма".


Голосования по нему пока не проходило, но предлагается также включить его в PHP 8.1.


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


Зачем всё это вообще нужно?


Result как в Расте


Если вы писали на языке Rust, то наверняка встречали встроенный enum Result. В Rust, Go и т.д. нет механизма exception, так как в этих языках считается, что явная обработка ошибок гораздо надёжнее. Язык вынуждает тебя явно проработать все варианты событий, а не кидать исключение в надежде, что кто-то наверху знает о нём и умеет правильно обрабатывать. (Не будем здесь холиварить, на тему exceptions vs return type, у каждого своё мнение). Если говорить конкретно про Раст, то результатом вызова функции, которая может породить ошибку, часто делают значение типа Result.


Result состоит из двух вариантов (case-ов в терминологии enum в PHP): Ok и Err. Варианты мы могли бы сделать и с помощью предыдущего функционала enum, или даже констант, но нам нужно возвращать еще и сами значения. Причем, в случае успеха значением может быть строка, а в случае ошибки какой-нибудь другой тип. Например, integer (статус HTTP-ответа).


Как это будет выглядеть в PHP, если голосование будет успешным:


enum Result {
    case Ok(public string $json);
    case Err(public int $httpStatus);
}

function requestApi($url): Result {
    //
}
Читать дальше →

Разрабатываем web-site для микроконтроллера

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

С приходом в нашу жизнь различного рода умных розеток, лампочек и других подобных устройств, необходимость наличия веб-сайтов на микроконтроллерах стала неоспоримой. А благодаря проекту lwIP (и его младшему брату uIP) подобным функционалом никого не удивишь. Но поскольку lwIP направлен на минимизацию ресурсов, то с точки зрения дизайна, функционала, а также удобства использования и разработки, подобные сайты сильно отстают от тех, к которым мы привыкли. Даже для встроенных систем, сравнить, например, с сайтом для администрирования на самых дешевых роутерах. В данной статье мы попробуем разработать сайт на Линуксе для какого-нибудь умного устройства и запустить его на микроконтроллере.

Пока в мире гремел сериал «Ход королевы», мы пилили сервис, чтобы дети учились шахматам на удобной платформе

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

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

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

И вот что из этого вышло

Версионность веб-приложений

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

Общеизвестно, что каждый программный продукт в конечном итоге обретает номер поставляемой версии. Изначально это может быть цифра в README файле, на борде в JIRA либо просто в голове у тимлида или ПМа. Но в какой-то момент становится понятно, что нужно формализовать процесс назначения версии релизу, отобразить номер в приложении, интегрировать версионность в CI, аналитику и другие места. 

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

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

Читать далее

React: лучшие практики

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


Разрабатываете на React или просто интересуетесь данной технологией? Тогда добро пожаловать в мой новый проект — Тотальный React.

Введение


Я работаю с React уже 5 лет, однако, когда дело касается структуры приложения или его внешнего вида (дизайна), сложно назвать какие-то универсальные подходы.

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

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

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

Предлагаемые подходы не являются истинной в последней инстанции. Это всего лишь мое мнение. Существует много разных способов решения одной и той же задачи.
Читать дальше →

Кейс: автоматизация тестирования верстки сайта с помощью скриншотов

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

Привет, меня зовут Фахридин Джамолидинов, я специалист департамента тестирования в «Ростелеком ИТ». Занимаюсь автоматизацией тестирования основного сайта компании rt.ru. Наш сайт – это не только витрина для информирования клиентов и продаж услуг и товаров для сегментов B2C, B2B и B2O, он ещё предназначен для обслуживания текущих клиентов: FAQ, чат, формы обратной связи, платежные формы и т.п. Он постоянно обновляется, и каждый раз после выпуска новой версии нужно проверять сотни страниц с богатым, динамичным UI на работоспособность в браузерах и адаптивность вёрстки.

Конечно же на этапе разработки применяется практика design review со стороны наших продуктовых дизайнеров, но нет-нет да проблемы всплывали: где-то элементы перекрываются, съезжаются, не сохраняется единый стиль.

Осознавая, что ручное регрессионное тестирование существующего UI превращается в кошмар и отнимает кучу времени, мы решили автоматизировать данный процесс. Сегодня мы покажем, как работает автотестирование по скриншотам – будем акцентировать внимание на функционал aShot, или как помочь автотестам «видеть» ошибки.

Читать далее

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

Солидные фронтенды: конфигурация

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

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

Читать далее

PHP Дайджест № 198 (25 января – 8 февраля 2021)

Время на прочтение6 мин
Охват и читатели11K
Фото: Иван Ганцев.

Обновление стандартов PSR-6 и PSR-13, кеширование наследования в опкеш, аксессоры свойств и другие новости из PHP Internals, диалект Lisp компилируемый в PHP, а также инструменты, видео, подкасты и PHP Дайджест Live.

Приятного чтения!


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

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

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

Прогрессивный рендеринг для лучшей производительности веб-приложений

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

Понимание концепций рендера веб-страниц и измерение производительности рендера с помощью Chrome DevTools




Не важно, насколько хорош ваш сайт; если его загрузка занимает слишком много времени, никто не будет ждать, чтобы его увидеть. Если ваш сайт загружается более 3 секунд, есть большая вероятность, что вы потеряете часть посетителей. Но знаете ли вы, что можно значительно улучшить время загрузки своего веб-приложения, используя прогрессивный рендеринг? Прогрессивный рендеринг не только увеличивает скорость загрузки, но и решает некоторые серьёзные проблемы в методах рендеринга на стороне клиента и на стороне сервера. Чтобы лучше понять прогрессивный рендеринг, давайте посмотрим, как работает рендеринг на стороне клиента и на стороне сервера.
Приятного чтения!

Enum в PHP 8.1 — для чего нужен enum, и как реализован в PHP

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

Через несколько дней заканчивается голосование по первой итерации реализации enum в PHP 8.1 . Уже видно, что голосов “за” гораздо больше, так что давайте кратко пройдемся и посмотрим, что же нам приготовили авторы языка.


Зачем нужны enum?


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


class Car {
    private string $color;

    function setColor(string $color): void {
        $this->color = $color;
    }
}

Если мы опишем цвет машины как простой string, то во-первых при вызове $myCar->setColor(..) непонятно, что за строку туда писать. “red” или “RED” или “#ff0000”, а во вторых, легко ошибиться, просунув туда случайно что-то не то (пустую строку, к примеру). То же самое будет, если использовать не строки, а числа, например.

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

Custom Elements из Angular в Angular

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

Angular позволяет создавать кастомные веб-компоненты на основе своих компонентов.

Зачем?

Код, собранный в веб-компонент, можно использовать где угодно, достаточно только подключить сгенерированный скрипт. Достаточно внедрить компонент в код страницы, причём, всё равно каким образом: можно в HTML (<my-custom-component></my-custom-component>), можно через DOM-API (document.body.append(document.createElement('my-custom-component')) ) и получим работающее микро-приложение c Angular под капотом.

Как я собирал велосипед