Как стать автором
Обновить
0
0
Евгений @bywanted

Пользователь

Отправить сообщение

Angular 9. Перезапуск guard-ов текущей страницы. Trigger current route guards

Время на прочтение7 мин
Количество просмотров6.1K
Столкнулся с необходимостью перезапустить guard-ы для текущей страницы, вне зависимости от того какая страница открыта.

Стандартного решения не нашел, а предлагаемые в интернете ограничиваются одной страницей. Поэтому написал своё и решил им поделиться.

Описание кейса


Страницы приложения разделяются на 3 группы:

  • Только для авторизованных пользователей
  • Только для неавторизованных пользователей
  • Для любых пользователей

Авторизоваться или выйти можно на любой странице.

Если вход/выход производится на странице с ограниченным доступом, то нужно перейти на разрешенную страницу.

Если на странице без ограничений, то нужно остаться на текущей странице.
Читать дальше →
Всего голосов 8: ↑8 и ↓0+8
Комментарии2

Ретроспектива: как и зачем ее проводить?

Время на прочтение6 мин
Количество просмотров242K


Проведение ретроспектив – это активность, которую каждая agile-команда проводит для того, чтобы решать свои проблемы. Что такое ретроспектива? Это регулярная встреча, на которой команда обсуждает свой рабочий процесс и что-то в нем меняет.

Зачем нужна ретроспектива?


Это не праздный вопрос, его часто задают начальники, когда им предлагают провести ретроспективу. Они спрашивают: «Зачем? Мы можем сами все решить». Почему же нельзя сделать так, чтобы какой-то начальник или эксперт пришел, посмотрел и сказал, что команде надо делать, а что в рабочем процессе стоит изменить?
Читать дальше →
Всего голосов 13: ↑12 и ↓1+11
Комментарии2

19 полезных возможностей файла .htaccess

Время на прочтение14 мин
Количество просмотров113K
19 полезных возможностей файла .htaccess


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

Читать дальше
Всего голосов 28: ↑17 и ↓11+6
Комментарии16

«Сложно о простом». Функции-конструкторы — как объекты,(prototype). Объекты,(__proto__). constructor, ={}, как функция-конструктор new Object()

Время на прочтение9 мин
Количество просмотров82K
В прошлый раз мы попытались разобраться со следующими вещами:

  • 1. Не смотря на расхожее мнение «всё в JS является объектами» — это не так, мы выяснили, что из 6 доступных программисту типов данных аж 5 является примитивами и лишь один представляет тип объектов.
  • 2. Про объекты мы узнали, что это такая структура данных, которая содержит в себе пары «ключ-значение». Значением может быть любой из типов данных (и это будет свойство объекта) или функция (и это будет метод объекта).
  • 3. А вот примитивы – это не объекты. Хотя с ними и можно работать как с объектом (и это вызывает заблуждение что примитив – это объект), но…
  • 4. Переменные можно объявить как по простому (литерально) (var a = ‘str’), так и через функцию-конструктор (обёртка)(var a = new String(‘str’)). Во втором случае мы получим уже не примитив, а объект созданный конструктором String(). (что за магический оператор new и что такое функция-конструктор мы узнаем дальше).
  • 5. Узнали, что именно за счёт создания обёртки над примитивом (new String(‘str’)) c ним можно работать как с объектом. Именно эту обёртку создаёт интерпретатор вокруг примитива, когда мы пытаемся работать с ним как с объектом, но после выполнения операции она разрушается (поэтому примитив никогда не сможет запомнить свойство, которое мы ему присвоим a.test = ‘test’- свойство test исчезнет с обёрткой).
  • 6. Узнали, что у объектов есть метод toString() который возвращает строковое представление объекта (для типа number valueOf() – вернёт числовое значение).
  • 7. Поняли, что при выполнении операций конкатенации или математических операциях примитивы могут переопределить свой тип в нужный. Для этого они используют функции-обёртки своих типов, но без оператора new (str = String(str)).(в чём разница и как это работает, поговорим дальше)
  • 8. И наконец, узнали, что typeof берёт значения из жёстко зафиксированной таблицы (вот откуда ещё одно заблуждение, основанное на typeof null //object).

Читать дальше →
Всего голосов 57: ↑40 и ↓17+23
Комментарии39

The Clean Architecture на TypeScript и React. Часть 1: Основы

Время на прочтение21 мин
Количество просмотров46K


Добрый день, уважаемые читатели. В этой статье мы поговорим об архитектуре программного обеспечения в веб-разработке. Довольно долгое время я и мои коллеги используем вариацию The Clean Architecture для построения архитектуры в своих проектах Frontend проектах. Изначально я взял ее на вооружение с переходом на TypeScript, так как не нашел других подходящих общепринятых архитектурных подходов в мире разработки на React (а пришел я из Android-разработки, где давным-давно, еще до Kotlin, наделала шумихи статья от Fernando Cejas, на которую я до сих пор иногда ссылаюсь).

В данной статье я хочу рассказать вам о нашем опыте применения The Clean Architecture в React-приложениях с использованием TypeScript. Зачем я это рассказываю? — Иногда мне приходится разъяснять и обосновывать ее использование разработчикам, которые еще не знакомы с таким подходом. Поэтому здесь я сделаю детальный разбор с наглядными пояснениями на которое я смогу ссылаться в будущем.
Читать дальше →
Всего голосов 8: ↑8 и ↓0+8
Комментарии42

Проекция контента в Angular или затерянная документация по ng-content

Время на прочтение5 мин
Количество просмотров45K
При изучении Angular очень часто упускают или уделяют недостаточное внимание такому понятию, как проекция контента. Это очень мощный инструмент для создания гибких и переиспользуемых компонентов. Но в документации о нем упоминается лишь пару абзацев в разделе Lifecycle hooks. Попробуем исправить данное упущение.


Читать дальше →
Всего голосов 14: ↑14 и ↓0+14
Комментарии14

Принципы для разработки: KISS, DRY, YAGNI, BDUF, SOLID, APO и бритва Оккама

Время на прочтение8 мин
Количество просмотров288K
image

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

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

Последовательное применение этих принципов упростит ваш переход от миддла к сеньору. Вы можете обнаружить, что некоторые (вероятно) вы применяете интуитивно.

Принципов много. Мы остановимся на семи самых важных. Их использование поможет вам в развитии и позволит стать лучшим программистом.

1. YAGNI

You Aren’t Gonna Need It / Вам это не понадобится

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

Этот принцип применим при рефакторинге. Если вы занимаетесь рефакторингом метода, класса или файла, не бойтесь удалять лишние методы. Даже если раньше они были полезны – теперь они не нужны.

Может наступить день, когда они снова понадобятся – тогда вы сможете воспользоваться git-репозиторием, чтобы воскресить их из мертвых.
Читать дальше →
Всего голосов 15: ↑12 и ↓3+16
Комментарии10

Настройка Webpack 5 с нуля

Время на прочтение10 мин
Количество просмотров209K


Узнайте, как использовать вебпак для сборки JavaScript, изображений, шрифтов и стилей, а также как запускать сервер для разработки

Если вы раньше использовали вебпак 4, вот некоторые отличия от 5 версии:

  • команда «webpack-dev-server» теперь выглядит как «webpack-serve»
  • отдельная установка file-loader, raw-loader и url-loader больше не требуется, вы можете использовать встроенные загрузчики ресурсов (asset modules)
  • полифилы для Node.js больше не поддерживаются, поэтому если, например, вы получили ошибку для stream, необходимо добавить пакет «stream-browserify» в качестве зависимости и { stream: «stream-browserify» } в качестве алиаса в настройки вебпака

Что такое вебпак?


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

Вебпак — это сборщик модулей. Он служит для упаковки кода для использования браузером. Он позволяет использовать последние возможности JavaScript с помощью Babel или использовать TypeScript и компилировать его в кроссбраузерный минифицированный код. Он также позволяет импортировать статические ресурсы в JavaScript.

Для разработчиков вебпак также предоставляет сервер для разработки, который умеет обновлять модули и стили на лету при сохранении файла. Инструменты командной строки, такие как «vue create» и «react-create-app» используют вебпак за сценой, но вы легко можете создать собственную настройку вебпака для указанных фреймворков.

Вебпак также умеет делать много других вещей, но данная статья посвящена основам его настройки и использования.
Читать дальше →
Всего голосов 15: ↑15 и ↓0+15
Комментарии12

Разбираемся в Angular Ivy: Incremental DOM и Virtual DOM

Время на прочтение4 мин
Количество просмотров30K

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




В нашей компании Nrwl мы уже какое-то время находимся в предвкушении возможностей, которые откроет нам и нашим клиентам Ivy. Angular Ivy — это новый движок рендеринга Angular, кардинально отличающийся от всех аналогичных технологий популярных фреймворков тем, что он использует Incremental DOM.

Читать дальше →
Всего голосов 16: ↑13 и ↓3+10
Комментарии3

8 распространенных структур данных на примере JavaScript

Время на прочтение10 мин
Количество просмотров103K


Звучит ли это знакомо: «Я начал заниматься веб разработкой после прохождения курсов»?

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

1. Стек (вызовов) (Stack)




Стек следует принципу LIFO (Last In First Out — последним вошел, первым вышел). Если вы сложили книги друг на друга, и захотели взять самую нижнюю книгу, то сначала возьмете верхнюю, затем следующую и т.д. Кнопка «Назад» в браузере позволяет перейти (вернуться) на предыдущую страницу.
Читать дальше →
Всего голосов 21: ↑13 и ↓8+9
Комментарии17

Hasura. Архитектура высокопроизводительного GraphQL to SQL сервера

Время на прочтение6 мин
Количество просмотров27K
Привет, Хабр! Представляю вашему вниманию перевод статьи «Architecture of a high performance GraphQL to SQL engine».

Это перевод статьи про то, как устроен изнутри и какие оптимизации и архитектурные решения несет в себе Hasura — высокопроизводительный легковесный GraphQL сервер, выступающий прослойкой между вашим веб-приложением и базой данных PostgreSQL.

Он позволяет генерировать GraphQL схему на основе существующей базы данных или создать новую. Поддерживает GraphQL Subscriptions из коробки на основе Postgres-триггеров, динамический контроль прав доступа, автоматическую генерацию join’ов, решает проблему N+1 запросов (batching) и многое другое.

Читать дальше →
Всего голосов 27: ↑27 и ↓0+27
Комментарии6

Bindon: малоизвестные фишки шаблонов Angular

Время на прочтение4 мин
Количество просмотров8.6K

Недавно вышел Angular 12, а вместе с ним в шаблоны подвезли оператор нулевого слияния (??). Но что еще умеют шаблоны Angular, о чем вы, возможно, и не слышали? Давайте разберемся!

Давайте!
Всего голосов 21: ↑21 и ↓0+21
Комментарии2

Как написать пассивный доход: Пишем качественного трейд бота на JS (часть 1)

Время на прочтение4 мин
Количество просмотров63K

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

Читать далее
Всего голосов 26: ↑14 и ↓12+8
Комментарии98

Паттерн порталов в Angular: для чего нужен root-компонент в Taiga UI

Время на прочтение6 мин
Количество просмотров9.1K

Мой коллега Роман недавно объявил о выходе нашей новой библиотеки компонентов под Angular Taiga UI. В инструкциях Getting started сказано, что приложение нужно обернуть в некий tui-root. Давайте разберемся, что он делает, узнаем, как и зачем мы используем порталы и что это вообще такое.

Разобраться
Всего голосов 25: ↑23 и ↓2+22
Комментарии4

Знакомимся с defer

Время на прочтение2 мин
Количество просмотров10K

В прошлой статье мы рассмотрели как создавать свои операторы RxJS. Сейчас я хочу поговорить о малоизвестном операторе создания — defer — и объяснить как можно использовать его для некоторых ситуаций

Читать дальше →
Всего голосов 6: ↑6 и ↓0+6
Комментарии0

Компоненты-агностики в Angular

Время на прочтение11 мин
Количество просмотров21K

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


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


bruce lee

Читать дальше →
Всего голосов 24: ↑23 и ↓1+22
Комментарии6

Декларативный подход в Angular

Время на прочтение10 мин
Количество просмотров11K

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

Если говорить кратко, в compliant-механизме для обеспечения его технических характеристик используют деформацию. В то время как в традиционной технике (rigid body) гибкость зачастую является негативным качеством материала, сompliant-механизмы используют ее для передачи силы и движения в нужном направлении, вместо соединений из нескольких подвижных деталей.

Узнать, к чему это я
Всего голосов 35: ↑35 и ↓0+35
Комментарии5

Записки маркет-мейкера или почему Вы никогда не заработаете себе на пенсию, торгуя на бирже

Время на прочтение9 мин
Количество просмотров52K

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


image

Читать дальше →
Всего голосов 32: ↑25 и ↓7+28
Комментарии42

Стриминг множества RTSP IP камер на YouTube и/или Facebook

Время на прочтение8 мин
Количество просмотров16K

Как известно, у YouTube отсутствует фича захвата RTSP потока, и мы постараемся заполнить этот пробел - помочь YouTube осчастливить пользователей.

Read more
Всего голосов 3: ↑2 и ↓1+2
Комментарии7

Single Responsibility Principle. Не такой простой, как кажется

Время на прочтение10 мин
Количество просмотров50K

image Single responsibility principle, он же принцип единой ответственности,
он же принцип единой изменчивости — крайне скользкий для понимания парень и столь нервозный вопрос на собеседовании программиста.


Первое серьезное знакомство с этим принципом состоялось для меня в начале первого курса, когда молодых и зеленых нас вывезли в лес, чтобы сделать из личинок студентов — студентов настоящих.


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


Случай, когда размер очереди был кратен трем, и являлся хорошей реализацией SRP.

Но почему соображать нужно именно на троих?
Всего голосов 34: ↑31 и ↓3+28
Комментарии16

Информация

В рейтинге
Не участвует
Откуда
Москва, Москва и Московская обл., Россия
Дата рождения
Зарегистрирован
Активность