Pull to refresh
8
0
Олег В. Кузьмин @Inpassor

Инженер-программист

Send message

Изучаем мультикаст операторы RxJS

Reading time11 min
Views17K
Привет, Хабр! Представляю вашему вниманию перевод статьи «Understanding RxJS Multicast Operators» автора Netanel Basal.

Широковещательные или мультикаст операторы нередко кажутся самой сложной темой при изучении RxJS. В этой статье я попробую все доступно объяснить.

Мы рассмотрим внутреннее устройство мультикаст операторов и решаемые ими задачи.
Читать дальше →
Total votes 7: ↑7 and ↓0+7
Comments0

Вредные советы работодателю. Как “правильно” взаимодействовать с разработчиком

Reading time12 min
Views21K
В последнее время мне везет — я работаю в компаниях, где по-настоящему уважают разработчиков. Но так было не всегда, приходилось сталкиваться с разными подходами к взаимодействию. Хотел бы я сказать, что “дикие нравы” уходят в прошлое, но рассказы коллег об их предыдущих местах работы да и мои наблюдения за рынком опровергают это утверждение.

Что ж, поговорим о том, как “правильно” взаимодействовать с разработчиком, например лично со мной…

image

(Если всей семьей купаться вы отправились к реке,
не мешайте папе с мамой загорать на берегу.
Не устраивайте крика, дайте взрослым отдохнуть.
Ни к кому не приставая, постарайтесь утонуть, — Григорий Остер)...

Читать дальше →
Total votes 35: ↑34 and ↓1+33
Comments31

Redux. Простой как грабли

Reading time5 min
Views189K
Мне уже доводилось заглядывать в репозиторий библиотеки redux, но откуда-то появилась мысль углубиться в его реализацию. Своим в некотором роде шокирующим или даже разочаровывающим открытием я хотел бы поделиться с сообществом.

TL;DR: базовая логика redux помещается в 7 строк JS кода.

О redux вкратце (вольный перевод заголовка на гитхабе):
Redux — библиотека управления состоянием для приложений, написанных на JavaScript.

Она помогает писать приложения, которые ведут себя стабильно/предсказуемо, работают на разных окружениях (клиент/сервер/нативный код) и легко тестируемы.
Я склонировал репозиторий redux, открыл в редакторе папку с исходниками (игнорируя docs, examples и прочее) и взялся за ножницы клавишу Delete:

  • Удалил все комментарии из кода
    Каждый метод библиотеки задокументирован с помощью JSDoc весьма подробно
  • Убрал валидацию и логирование ошибок
    В каждом методе жёстко контролируются входные параметры с выведением очень приятных глазу подробных комментариев в консоль
  • Убрал методы bindActionCreators, subscribe, replaceReducer и observable.

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

А теперь давайте разберём то, что осталось
Читать дальше →
Total votes 52: ↑49 and ↓3+46
Comments159

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

Reading time6 min
Views66K


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

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

Код работал.

Но в нём было много повторяющихся однотипных конструкций. Каждая фигура (вроде того же прямоугольника или овала) обладала различным набором маркеров. Перемещение этих маркеров в разных направлениях по-разному влияло на позицию и размер фигуры. А если пользователь, двигая маркеры, удерживал нажатой клавишу Shift, нам, кроме того, надо было сохранять пропорции фигуры при изменении её размера. В общем — в коде было много вычислений.
Читать дальше →
Total votes 140: ↑119 and ↓21+98
Comments151

Механики геймификации: древо навыков

Reading time8 min
Views17K
Привет, Хабр! Продолжаем разговор о механиках геймификации. Прошлая статья рассказывала о рейтинге, а в этой поговорим о древе навыков (технологическом древе, skill tree). Рассмотрим, как древо используется в играх и как эту механику можно применить в геймификации.


Читать дальше →
Total votes 20: ↑19 and ↓1+18
Comments20

Повтор неудачных HTTP-запросов в Angular

Reading time9 min
Views11K
Организация доступа к серверным данным — это основа почти любого одностраничного приложения. Весь динамический контент в таких приложениях загружается с бэкенда.

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

Представьте себе, как кто-то работает с вашим веб-сайтом через точку доступа в поезде, который несётся по стране со скоростью 200 километров в час. Сетевое соединение при таком раскладе может быть медленным, но запросы к серверу, несмотря на это, делают своё дело.

А что если поезд попадёт в туннель? Тут высока вероятность того, что связь с интернетом прервётся и веб-приложение не сможет «достучаться» до сервера. В этом случае пользователю придётся перезагрузить страницу приложения после того, как поезд выедет из туннеля и соединение с интернетом восстановится.

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

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



Материал, перевод которого мы сегодня публикуем, посвящён разбору нескольких способов повторения неудачных запросов в Angular-приложениях.
Читать дальше →
Total votes 31: ↑30 and ↓1+29
Comments6

Обход подводных камней Angular и экономия времени

Reading time9 min
Views13K
С помощью Angular можно сделать всё что угодно. Или почти всё. Но иногда это коварное «почти» приводит к тому, что разработчик губит время, создавая обходные решения, или пытаясь понять, почему что-то происходит, или почему что-то не работает так, как ожидается.



Автор статьи, перевод которой мы сегодня публикуем, говорит, что хочет поделиться советами, которые помогут Angular-разработчикам сэкономить немного времени. Он собирается рассказать о подводных камнях Angular, с которыми ему (и не только ему) довелось встретиться.
Читать дальше →
Total votes 34: ↑33 and ↓1+32
Comments26

Иструменты Node.js разработчика. Очереди заданий (job queue)

Reading time7 min
Views31K
При реализации бэка веб-приложений и мобильных приложений, даже самых простых, уже стало привычным использование таких инструментов как: базы данных, почтовый (smtp) сервер, redis-сервер. Набор используемых инструментов постоянно расширяется. Например, очереди сообщений, судя по количеству установок пакета amqplib (650 тыс. установок в неделю), используется наравне с реляционными базами данных (пакет mysql 460 тыс. установок в неделю и pg 800 тыс. установок в неделю).

Сегодня я хочу рассказать об очередях заданий (job queue), которые пока используются на порядок реже, хотя необходимость в них возникает, практически, во всех реальных проектах
Читать дальше →
Total votes 11: ↑10 and ↓1+9
Comments2

Лучшее из опыта создания чистых и быстрых Angular приложений

Reading time4 min
Views14K
На написание этой статьи сподвигли поиски JavaScript front-end разработчиков в свою компанию в Ставрополе. Т.к. длительное время не удавалось найти толкового программиста и тогда мы решили запустить программу стажировки с большим количеством обучающего материала по Angular & JS.

Это перевод статьи Vamsi Vempati про его опыт работы над крупномасштабным приложением для компании Trade Me, написанным на Angular.



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

В статье в общих чертах описываются методы, которые мы используем в нашем проекте. Текст по большей части связан с Angular, TypeScript, RxJs и @ngrx/store.

Кроме того, будут рассмотрены некоторые общие рекомендации по написанию кода, которые помогут сделать приложение более «чистым» и читаемым.
Читать дальше →
Total votes 21: ↑16 and ↓5+11
Comments6

Как продвинуть инкрементальную игру? Бесплатно, быстро и эффективно*

Reading time2 min
Views6.4K
Если вы когда-либо сделали игру, вероятно, вы столкнулись с той же проблемой, что и многие другие разработчики до вас: никто не знает о вашей игре. Под катом я расскажу, как рассказать миру о вашей инкрементальной** игре бесплатно, быстро и эффективно (в какой-то степени).
Читать дальше →
Total votes 21: ↑14 and ↓7+7
Comments21

Prettier, ESLint, Husky, Lint-Staged и EditorConfig: инструменты для написания аккуратного кода

Reading time16 min
Views123K
Вы стремитесь к тому, чтобы писать аккуратный код, но не знаете с чего начать… Вы вчитываетесь в руководства по стилю, вроде этого от Airbnb, стараетесь следовать практическим рекомендациям ведущих специалистов… Вам приходится удалять неиспользуемый код? Приходится искать ненужные переменные? Вы пытаетесь выявлять неудачные паттерны, применённые в ваших программах? Например — хотите понять, читая хитросплетения кода некоей функции, возвратит ли она что-нибудь или нет. Звучит знакомо? Проблема заключается в том, что программисту очень тяжело и многое успевать, и многому учиться.

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



Автор этого материала говорит, что он сталкивался со всем тем, чему посвящены только что заданные вопросы. То, с чем он столкнулся, утомляет и изматывает. Здесь он хочет рассказать об инструментах, правильное применение которых позволяет решить вышеописанные проблемы.

А именно, здесь пойдёт речь о таких средствах как Prettier, ESLint, Husky, Lint-Staged, EditorConfig, об автоматизации форматирования и линтинга кода. Этот материал ориентирован, в основном, на React-разработку, но рассмотренные здесь принципы можно применить в любом веб-проекте. Вот репозиторий, где, кроме прочего, собрано то, о чём тут пойдёт речь.
Читать дальше →
Total votes 38: ↑34 and ↓4+30
Comments15

Как дебажить фронтенд и бекенд: пошаговая инструкция

Reading time6 min
Views55K
Привет, Хабр! Представляю вам перевод статьи "How to debug javascript in Chrome quick and easy ".

В этом посте мы научимся дебажить JavaScript на фронт- и бекенде с помощью Chrome DevTools и VS Code.
Читать дальше →
Total votes 14: ↑12 and ↓2+10
Comments5

Почему капчи стали такими сложными

Reading time6 min
Views42K

Доказывать, что ты не робот, становится всё сложнее



В какой-то момент прошлого года постоянные требования от Google доказать, что я человек, начали казаться всё более агрессивными. Всё чаще за простой и немного чересчур милой кнопочкой «Я не робот» начали появляться требования доказать это – выбрав все светофоры, переходы или витрины в сетке изображений. Вскоре светофоры начали прятаться в листве, переходы искажаться и уходить за угол, а вывески магазинов стали размытыми и перешли на корейский язык. Есть что-то весьма разочаровывающее в неудачных попытках найти на изображении пожарный гидрант.

Эти тесты называются CAPTCHA – акроним от «полностью автоматического публичного теста Тьюринга, предназначенного для различения людей и компьютеров», и когда-то они уже доходили до подобной степени неразборчивости. В начале 2000-х простых изображений с текстом было достаточно, чтобы остановить большинство спам-ботов. Прошло десять лет, и после того, как компания Google купила программу у исследователей из Университета Карнеги-Меллона и использовала её для оцифровки в проекте Google Books, тексты приходилось всё сильнее искажать и скрывать, чтобы обгонять улучшающиеся программы оптического распознавания символов – те самые программы, которые помогали улучшать те самые люди, кому приходилось разгадывать все эти капчи.
Читать дальше →
Total votes 40: ↑35 and ↓5+30
Comments153

Война с TypeScript или покорение Enum

Reading time7 min
Views40K

Предыстория


Пол года назад в нашей компании было принято решение о переходе на более новые и модные технологии. Для этого сформировали группу специалистов, которая должна была: определиться с технологическим стеком, на базе этого стека сделать мост к легаси коду и, наконец, перевести часть старых модулей на новые рельсы. Мне посчастливилось попасть в эту группу. Клиентская кодовая база примерно в один миллион строк кода. В качестве языка мы выбрали TypeScript. GUI подложку решили делать на vue в купе с vue-class-component и IoC.

Но история не о том, как мы избавлялись от легаси кода, а об одном маленьком инциденте, который вылился в настоящую войну знаний. Кому интересно, добро пожаловать под кат.
Читать дальше →
Total votes 17: ↑13 and ↓4+9
Comments20

Сетевой код Age of Empires: 1500 лучников на модем 28,8 кбит/с

Reading time19 min
Views39K
image

Примечание переводчика: этой статье уже 17 лет, и интересна она только с исторической точки зрения. Любопытно узнать, как удавалось разработчикам добиться плавной сетевой игры в эпоху 28,8k-модемов и первых «Пентиумов».

В этой статье рассказывается об архитектуре и реализации, а также о некоторых уроках, полученных при создании многопользовательского (сетевого) кода игр Age of Empires 1 и 2. Также в ней излагаются современные и будущие подходы с созданию сетевой архитектуры, используемые Ensemble Studios в своих игровых движках.

Мультиплеер Age of Empires: требования к структуре


В начале работы над многопользовательским кодом Age of Empires в 1996 году мы поставили перед собой очень конкретные цели, необходимые для реализации требуемого игрового процесса.
Читать дальше →
Total votes 94: ↑94 and ↓0+94
Comments11

Какой была Земля, когда на ней было так же жарко, как нам обещают в 2100 году?

Reading time12 min
Views36K

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



Карта современной Антарктики, где показана скорость отступления (2010-2016) «линии сцепления», на которой ледники теряют контакт с дном, а также океанские температуры. Одинокая красная стрелочка в восточной Антарктике – это ледник Тоттен, содержащий столько воды, что её хватит на поднятие уровня мирового океана на 3 метра.
Все, что случилось с нами, лишь пролог.
— Уильям Шекспир, «Буря»

2100-й год выглядит, как линия из ограничительных флажков, стоящих на финишной черте изменений климата – будто бы все наши цели заканчиваются именно тогда. Но, перефразируя предупреждение на зеркале заднего вида, он к нам ближе, чем кажется. У сегодняшних детей будут свои внуки, когда они доживут до момента, на котором заканчиваются все климатические прогнозы.
Total votes 33: ↑26 and ↓7+19
Comments169

Ускорение Angular-приложений

Reading time15 min
Views16K
Многие знают Минко Гечева (rhyme.com) по книге «Switching to Angular» и по тексту «Angular Performance-Checklist», помогающему Angular-разработчикам оптимизировать свои проекты. На нашей декабрьской конференции HolyJS 2017 Moscow он тоже развивал тему Angular-производительности, выступив с докладом «Faster Angular applications». А теперь на основе этого выступления мы подготовили хабрапост, переведя все на русский. Добро пожаловать под кат! А если предпочитаете англоязычную видеозапись выступления, прилагаем и ее тоже:


Читать дальше →
Total votes 32: ↑31 and ↓1+30
Comments0

Что мы читали в апреле: полезные статьи для Angular-разработчиков и подборка лучшего с ng-conf

Reading time5 min
Views6.6K


Нынешний апрель был, конечно, не самым удачным месяцем для чтения о добром и вечном; все в мыле носились за разбушевавшимся РКН и клеили побитые блюдца. Однако жизнь за пределами зоны его ответсвенности не останавливалась. Наш фронтенд-разработчик Максим Попов даже в самый разгар боевых действий отслеживал интересные новости по Angular и делился ими с коллегами. Кроме того, он отсмотрел доклады прошедшей ng-conf и подготовил подборку наиболее ценного. С его любезного разрешения делюсь этой информацией с Хаброй — будет что почитать и, главное, посмотреть в длинные выходные.

Читать дальше →
Total votes 22: ↑22 and ↓0+22
Comments1

Внедрение предметно-ориентированного проектирования в PHP

Reading time15 min
Views23K
И снова здравствуйте!

Что ж очередной «новый» курс, который стартовал в конце декабря, подходит к концу — «Backend разработчик на PHP». Учли разные мелкие шероховатости и запускаем новый. Осталось только посмотреть на выпуск и всё, поставим очередную галочку.



А счас пока давайте посмотрим на одну интересную статью.

Поехали.

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

Предметно-ориентированное проектирование (Domain-Driven Design, в дальнейшем — DDD) — это методология разработки программного обеспечения для проектирования сложных программных проектов с целью доставки конечного продукта, который отвечает задачам организации. Фактически, DDD способствует фокусированию проекта на развивающейся базовой модели.
DDD научит вас эффективно моделировать реальный мир в вашем приложении и использовать ООП для инкапсуляции бизнес-логики организации.

Читать дальше →
Total votes 22: ↑17 and ↓5+12
Comments91

Онлайн статистика в Telegram

Reading time2 min
Views38K
Вам нравится процесс ожидания? Когда необходимо сидеть и ждать, пока одна из статистик/аналитик/метрик загрузится…

«Но у нас все нормально, — ответите вы. — У нас крутые спецы, наши страницы грузятся за доли секунд, мы даже кешировать умеем.»

А как на счет мобильного интернета? Когда приходится окунаться в прошлое, лет на 10 назад и можно угадать элементы верстки по мере рендеринга страницы?

Метод, описанный ниже, не претендует на оригинальность, я думаю, что найдутся хабровчане, которые давно уже им пользуются, я лишь хочу открыть его в массы.
Читать дальше →
Total votes 27: ↑25 and ↓2+23
Comments8
1

Information

Rating
Does not participate
Location
Санкт-Петербург, Санкт-Петербург и область, Россия
Works in
Date of birth
Registered
Activity