Обновить
512K+

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

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

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

Заменяем Redux c помощью Observables и React Hooks

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

Управление состоянием — одна из важнейших задач, решаемых в разработке на React. Было создано множество инструментов в помощь разработчикам для решения этой задачи. Наиболее популярным инструментом является Redux — небольшая библиотека, созданная Дэном Абрамовым, и предназначенная помочь разработчикам использовать паттерн проектирования Flux в их приложениях. В этой статье мы разберем, действительно ли нам нужен Redux, и посмотрим, как мы можем заменить его более простым подходом, в основе которого лежат Observable и React Hooks.

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

Рендеринг веб сайтов 101

Время на прочтение7 мин
Охват и читатели57K
Вы вводите название сайта в адресную строку браузера, нажимаете enter, и по привычке видите запрашиваемую страницу. Все просто: ввел название сайта — сайт отобразился. Однако для более любознательных хочу рассказать, что происходит между тем как браузер начинает получать куски сайта (да, сайт приходит кусками, по-другому — чанками) и отображает полностью нарисованную страницу.


RTL Styling 101 — подробное руководство по RTL-стилизации в CSS

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


Перевод «RTL Styling 101 — An extensive guide on how to style for RTL in CSS» Ахмада Шадида.

Более 292 миллионов людей во всём мире говорят на арабском, как на родном языке. К ним отношусь и я, поэтому иногда разрабатываю сайты, которые должны поддерживать оба направления написания текста: слева направо (LTR – Left To Right) и справа налево (Right To Left).

Прощай, чистый код

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


Был поздний вечер.

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

Код работал.

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

Blazor Client Side Интернет Магазин: Часть 2 — CI/CD

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


Привет, Хабр! Продолжаю делать интернет магазин на Blazor. В этой части расскажу о том как я настроил CI/CD для него. За подробностями добро пожаловать под кат.
Читать дальше →

Создаем кнопку с Ripple Effect для XMars UI

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


Всем привет, сегодня я расскажу вам как разрабатывал кнопку для XMars UI проекта. О да, вроде мелочь, но есть о чем рассказать. Я опущу детали которые связаны с добавлением нового компонента в опенсорс проект. Более детально я расскажу про проект в отдельной статье.


Введение


XMars UI — это один из моих новых опенсорс проектов. Простая библиотека UI компонентов под HTML / CSS и React. В будущем планирую поддерживать Vue. Пока в ней только кнопка и иконки :)


Проект родился как идея в рамках Telegram Contest, cуть которого заключалась в разработке веб версии клиента. Вместе с коллегой мы решили, а почему бы и не принять в этом участие. Роли поделились так, что на мне верстка, а когда коллега разберется с авторизацией, то я подключусь писать компоненты. Все бы хорошо, но авторизоваться в Телеграмме не так просто. В итоге мы нечего не отправили, а я наверстал кучу всего и выходит — зря. Но как говорит Варламов, ваш проект уже чего-то стоит, раз вы потратили на него свое время. С этим сложно не согласится, ведь если переводить на часы и денежки, то только настройка Webpack в самом начале проекта уже не бесплатно. Смотря на все это безобразия, решил надо как-то выкинуть на опенсорс. Что один бутстрап использовать? Хочется свой UI фреймворк под другие свои проекты.

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

Angular 9 и Ivy: ленивая загрузка компонентов

Время на прочтение10 мин
Охват и читатели17K
Ленивая загрузка компонентов в Angular? Может, речь идёт о ленивой загрузке модулей с помощью маршрутизатора Angular? Нет, мы говорим именно о компонентах. Текущая версия Angular поддерживает лишь ленивую загрузку модулей. Но Ivy даёт разработчику новые возможности в работе с компонентами.


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

The Ember Times — Выпуск 131

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


От переводчика: Наши скромные усилия по переводу были замечены Ember Learning Team, в этом выпуске они упомянули об этой инициативе русскоговорящего сообщества, что придало переводу небольшой шарм. Но шарм шармом, а это небольшое событие показывает, насколько едино Ember-сообщество и насколько оно ценит усилия отдельных своих представителей.
Как и в прошлый раз ссылки на материалы, на которые я находил перевод, я помечал (рус). Все ссылки без пометки указывают на англоязычные ресурсы. На русском вопросы можно задать в нашем ламповом телеграмм-канале


Привет, Эмберисты!


Темы этого выпуска: Помогите улучшить систему автоматического отслеживания (autotracking) и реактивности Ember, читайте RFC (Request For Comments) о новых менеджерах ожиданий в тестах (test waiters), ​​оптимизируйте работу с сервером в своем приложении с помощью Ember Data, вступайте в русское сообщество Ember, и узнайте о мощных техниках отладки приложений на EmberConf !

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

Blazor Client Side Интернет Магазин: Часть 1 — Авторизация oidc (oauth2) + Identity Server4

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

Привет, Хабр! Таки да, в прошлой своей статье я попробовал сделать Todo List на Blazor Wasm и остался доволен. Теперь я решил взяться за что-то по серьезней, чтобы опробовать его в деле. Буду делать простенький SPA UI на Blazor для простого вымышленного интернет магазина. Максимально приближенный к боевому применению вариант. Начну я с того что запилю авторизацию пользователей и разделения их по ролям т. е. чтобы админ и обычный пользователь видели немного разный интерфейс. Еще я это все в docker образы собрал и на docker registry выложил. За подробностями добро пожаловать под кат.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №398 (13 — 19 января 2020)

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

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

Так когда же всё таки можно использовать !important?

Время на прочтение5 мин
Охват и читатели38K
Любая фича в «кривых» руках становится плохой. Импортант —  не исключение. Плохо не то, что он умеет, а то, как его используют.

Анимированное изображение на котором Маллой добавляет яд в блюдо
Читать дальше →

Парочка интересных методов Console

Время на прочтение3 мин
Охват и читатели12K
Доброго времени суток, друзья!

В этой небольшой заметке я хочу поделиться с Вами информацией о некоторых методах объекта Console, которые можно использовать наряду с console.log().

Полный список методов можно посмотреть здесь.

От слов — к делу. Да, для работы будет использоваться Chrome.

Console.debug() и сonsole.info()


Console.debug() и console.info() служат для вывода информационных сообщений в консоль и, по сути, являются аналогами console.log(). Одна из особенностей console.debug() состоит в том, что выводимое этим методом сообщение отображается только если консоль настроена на показ сообщений уровня отладки (для Chrome — галочка у Verbose вкладки Levels).
Читать дальше →

Универсальный роутинг для React приложений

Время на прочтение5 мин
Охват и читатели16K
Если попытаться в двух словах описать, в чем заключается функция роутинга на фронтэнде веб-приложений, то можно придти к выводу, что каждый популярный фреймоворк совершенно по-разному представляет это себе. Даже, сравнивая версии одного и того же фреймоворка, можно придти к выводу, что функции и API роутинга наиболее подвержены изменениям (часто без обратной совместимости). Например 4-я версия роутинга в React была переработана настолько радикально, что некоторые популярные проекты на githab.com так и не перешли на эту версию.

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

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

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

Распространенные ошибки при работе с промисами в JavaScript, о которых должен знать каждый

Время на прочтение5 мин
Охват и читатели24K
Доброго времени суток, друзья!

Хотел бы я знать об этих ошибках, когда изучал JavaScript и промисы.

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

Поэтому в данной статье я бы хотел поговорить о самых распространенных ошибках при работе с промисами в JS, на которые многие не обращают внимания.
Читать дальше →

Чистый код для TypeScript — Часть 1

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

Наткнувшись на материал по принципам чистый код для TypeScript и прочитав его решил взяться за его перевод. Здесь я хочу поделиться с вами некоторыми выдержками из этого перевода, так как некоторые моменты чистого кода для TypeScript повторяют такие же принципы для JavaScript, я их здесь описывать не буду, если будет интересно перевод для JS уже публиковался на хабре(@BoryaMogila) или же можете ознакомится с ними в первоисточнике.


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

Правила работы с динамическими массивами и пользовательскими классами коллекций

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


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

JavaScript библиотека Webix глазами новичка. Часть 2. Работа с формами

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


Я начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix и я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеки. Если вы хотите узнать о том, как создать полноценное приложение на основе Webix UI компонентов, можете прочитать статью Создаем Booking приложение с Webix UI, где также подробно описывается работа с формами.
Читать дальше →

Попытка решить проблему выбора авиабилетов перед отпуском

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

Привет всем! Хочу немного рассказать про то, как я делал, сделал и буду делать (наверное) в свободное время очередной travel-сервис для поиска авиабилетов.


Скриншот одной из страниц:


image

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

О 30-кратном увеличении параллелизма в Node.js

Время на прочтение14 мин
Охват и читатели24K
Каков наилучший способ беспроблемного увеличения параллелизма в Node.js-сервисе, который используется в продакшне? Это — вопрос, на который моей команде понадобилось ответить пару месяцев назад.

У нас запущено 4000 контейнеров Node (или «воркеров»), обеспечивающих работу нашего сервиса интеграции с банками. Сервис изначально был спроектирован так, что каждый воркер был рассчитан на обработку только одного запроса за раз. Это снижало воздействие на систему тех операций, которые могли неожиданно заблокировать цикл событий и позволяло нам игнорировать различия в использовании ресурсов различными подобными операциями. Но, так как наши мощности были ограничены одновременным выполнением лишь 4000 запросов, система не могла достойно масштабироваться. Скорость выдачи ответов на большинство запросов зависела не от мощности оборудования, а от возможностей сети. Поэтому мы могли бы улучшить систему и снизить стоимость её поддержки в том случае, если бы нашли способ надёжной параллельной обработки запросов.



Занявшись исследованием этого вопроса, мы не смогли найти хорошего руководства, в котором речь шла бы о переходе от «отсутствия параллелизма» в сервисе Node.js к «высокому уровню параллелизма». В результате мы разработали собственную стратегию перехода, которая была основана на тщательном планировании, на хороших инструментах, на средствах мониторинга и на здоровой дозе отладки. В итоге нам удалось повысить уровень параллелизма нашей системы в 30 раз. Это эквивалентно снижению затрат на поддержку системы примерно на 300 тысяч долларов в год.

Данный материал посвящён рассказу о том, как мы увеличили производительность и эффективность наших Node.js-воркеров, и о том, что мы узнали, пройдя этот путь.
Читать дальше →

Пишем свою стратегию для виртуального скролла из Angular CDK

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

Привет!


В Angular CDK в седьмой версии появился виртуальный скролл.


Он отлично работает, когда размер каждого элемента одинаков, — причем прямо «из коробки». Мы просто задаем размер в пикселях и указываем, к какому элементу нужно прокрутить контейнер, сделать ли это плавно, а также можем подписаться на индекс текущего элемента. Однако что делать, если размер элементов меняется? Для этого в CDK предусмотрен интерфейс VirtualScrollStrategy, реализовав который мы научим скролл работать с нашим списком.


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


image

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