Итак, хабровчане, уже в этот четверг в OTUS стартует курс «Fullstack разработчик JavaScript». И сегодня мы делимся с вами еще одной авторской публикацией в преддверии старта курса.



Автор статьи: Павел Якупов

---

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

Говоря проще, паттерны проектирования — это удачные решения, которые используются достаточно часто. Паттерны проектирования как понятие сформировались еще в то время, когда языка программирования JavaScript не было в помине, в сфере software engineering паттерны проектирования были подробно описаны еще в 1994 году «Большой четверкой». Однако мы в нашей статье обратимся к реализации некоторых несложных паттернов именно на языке программирования JavaScript.

Ментальные модели — это простые выражения сложных процессов или отношений. Эти модели можно собирать и использовать для принятия более быстрых и качественных решений.

Вот пример: принцип Парето гласит, что около 80% всех результатов приходится на 20% усилий.

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

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

В среде SRE-/DevOps-инженеров никого не удивишь, что однажды появляется клиент (или система мониторинга) и сообщает, что «всё пропало»: сайт не работает, оплаты не проходят, жизнь — тлен… Как бы ни хотелось помочь в такой ситуации, сделать это без простого и понятного инструмента бывает очень сложно. Зачастую проблема скрыта в коде самого приложения — нужно лишь локализовать её.

И в горе, и в радости…

Так сложилось, что мы уже весьма давно и сильно полюбили New Relic. Он был и остаётся отличным средством для мониторинга производительности приложения, а также позволяет инструментировать микросервисную архитектуру (с помощью своего агента) и многое-многое другое. И всё могло быть замечательно, если бы не изменения в ценовой политике сервиса: его стоимость с 2013 года выросла в 3+ раза. Вдобавок, с прошлого года для получения trial-аккаунта требуется общение с персональным менеджером, что затрудняет презентацию продукта потенциальному заказчику.

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

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

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

Под катом рассказ о том, как я переписал приложение с react-native на Svelte и опубликовал его в Google Play.

Хабр, привет!

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

Приступим!

Учить лексику

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

ЛеоПереводчик

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

Пост лучше всего подойдет разработчикам «one-man-company» или командам. Я расскажу, как достаточно легко и просто (при отсутствии или минимальном бюджете) попасть в топ поисковой выдачи в развитых странах в нише разработки и перестать бороться за клиентов в СНГ, которые хотят круто, классно, без ТЗ (ну ты понял, бро, хотим, чтобы все было красиво) и так, чтобы за $4/час и вообще оплата по факту. В конце попробую свести все в чеклист. Кто попробует ему следовать и отпишется о результатах в комментариях, обязательно дам фидбек с советами.

Перед каждым сервисом, генерирующим хотя бы 1 Мбит/сек трафика в интернете возникает вопрос: «Как? по TCP или по UDP?» В прикладных областях, в том числе и платформах доставки уже сложились предпочтения и традиции принятия подобных решений.

По идее, если бы, к примеру, однажды один ленивый разработчик не попробовал развернуть свой ML на Python (потому что только его и знал), мир скорее всего никогда не проникся бы такой любовью к презренному «супер-джава-кодерами» языку. А сегодня слабости этого языка в прошлом контексте применения безоговорочно обеспечивают ему первенство в развертывании и запуске многочисленных майнерских А/Б.

Сравнивать можно многое: ARM с Intel, iOS и Android, а Mortal Kombat с Injustice. И нарваться на космический холивар, поэтому вернемся к теме доставки огромных объемов разноформатного контента.

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


Осторожно, под катом 99 иллюстраций и схем и все важные.

Материал, перевод которого мы сегодня публикуем, посвящён процессу разработки системы визуализации динамических древовидных диаграмм. Для рисования кубических кривых Безье здесь используется технология SVG (Scalable Vector Graphics, масштабируемая векторная графика). Реактивная работа с данными организована средствами Vue.js.

Вот демо-версия системы, с которой можно поэкспериментировать.

Интерактивная древовидная диаграмма

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

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

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

Перевод JavaScript Environment, Lexical Scope and Closures.

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

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

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

Привет! Учусь на front-end, и параллельно, в учебном проекте, разрабатываю SPA на Vue.js для back-end, который собирает данные от поискового бота. Бот нарабатывает от 0 до 500 записей, и я должен их: загрузить, отсортировать по заданным критериям, показать в таблице.

Ни back-end ни бот, сортировать данные не умеют, поэтому мне приходятся загружать все данные и обрабатывать их на стороне браузера. Сортировка происходит очень быстро, а вот скорость загрузки, зависит о коннекта, и указанные 500 записей могут загружаться от 10 до 40 секунд.

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

Чтобы скрасить пользователю ожидание, я решил показать ему процесс загрузки:

1. цифрами — сколько % записей уже загружено
2. графиком — время загрузки каждой записи
3. заполнением — % загрузки. Так как график по мере загрузки заполняет прямоугольный блок, видно, какую часть блока осталось заполнить

Вот анимация результата, к которому я стремился и получил:

… по-моему, получилось забавно.

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

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

Пост будет интересен, если:

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

Обо всем этом — в сегодняшнем посте.

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

Тем временем мы подготовили разбор задач чемпионата, которые предлагались фронтенд-разработчикам. Это задачи из квалификационного этапа. Напоминаем, что чемпионат проводился по четырём направлениям: бэкенд, фронтенд, машинное обучение и аналитика.

A. Градусник пробок

Условие

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

Методы итерирования массивов похожи на «стартовые наркотики» (это, конечно, не наркотики; и я не говорю, что наркотики — это хорошо; это — просто фигура речи). Из-за них многие «подсаживаются» на функциональное программирование. Всё дело в том, что они невероятно удобны. Кроме того, большинство этих методов очень просто понять. Методы наподобие .map() и .filter() принимают всего один аргумент-коллбэк и позволяют решать простые задачи. Но возникает такое ощущение, что метод .reduce() у многих вызывает определённые затруднения. Понять его немного сложнее.

Привет, Хабр. Я data-аналитик отдела маркетинга Wrike: занимаюсь сбором и анализом всех рекламных данных, моделированием LTV и другими техническими задачами, помогающими команде делать самую эффективную рекламу во всех источниках. Недавно я столкнулся с проблемой настройки сбора данных на AMP-страницах и обнаружил совсем мало информации по теме, поэтому решил рассказать вам, как справиться с этой задачей.

Что делать, если вы настроили большое количество целей в Яндекс.Метрике через Google Tag Manager (GTM), и нужно срочно перенести эти цели в качестве событий в Google Analytics (GA)? Конечно, можно перенастроить каждый тег на параллельную отправку событий в GA и в Метрику, но, если целей в Метрике очень много, это отнимет время.

Возможна обратная ситуация, когда цели настраивали не вы, а разработчики в самом коде сайта. И вам, как аналитику компании, нужно настроить отправку таких же событий в GA, а у вас под рукой только GTM. В этом случае, даже с небольшим числом целей могут возникнуть сложности. Триггеры событий в GTM нужно будет максимально подгонять, чтобы цели в Метрику и события в GA уходили по одной логике, и в разных системах аналитики не было существенных расхождений.

В обоих случаях не один час понадобится провести, настраивая всё вручную. Но можно найти более практичный вариант. Есть функция, которая позволяет перехватывать отправку целей в Метрику и параллельно отправлять пуши в dataLayer. Таким образом вам не надо будет вспоминать или разбираться, как была настроена отправка целей в Яндекс.Метрику — достаточно применить нужную функцию. Рабочий вариант функции будет зависеть от того, какая версия счётчика Яндекс.Метрики у вас установлена.

Всем привет!

Начну с небольшой предыстории.

Свой новый проект я решил попробовать сделать на Vue.js. Мне нужен был серверный рендеринг (SSR), CSS модули, code-splitting и прочие прелести. Разумеется, для повышения производительности разработки нужна была горячая перезагрузка (HMR).

Я не хотел использовать готовые решения, типа Nuxt.js, т.к. при разрастании проекта важно иметь возможность кастомизации. А любые высокоуровневые решения, как правило, не дают этого делать, или дают, но с большими усилиями (был похожий опыт с использованием Next.js для React).

Основная проблема локальной разработки при использовании серверного рендеринга и горячей перезагрузки состояла в том, что мало запустить один webpack-dev-server. Мы должны также что-то сделать с исходниками, которые запускает Node.js, иначе при следующей перезагрузке страницы мы получим код, который не был обновлен на сервере, но обновился на клиенте.

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