• Липкие сессии для самых маленьких [Часть 1]

    • Tutorial

    Липкие сессии (Sticky-session) — это особый вид балансировки нагрузки, при которой трафик поступает на один определенный сервер группы. Как правило, перед группой серверов находится балансировщик нагрузки (Nginx, HAProxy), который и устанавливает правила распределения трафика на доступные сервера.

    В первой части цикла мы посмотрим как создавать липкие сессии с помощью Nginx. Во второй же части разберем создание подобной балансировки средствами Kubernetes.

    Вляпаться
    • +29
    • 3.9k
    • 7
  • Зачем нужна выделенная Frontend Core команда и как мы внедряли дизайн систему


      Всем привет, меня зовут Ростислав, я занимаю должность Front Lead в компании ДомКлик. Хочу поделиться с вами опытом создания Web Core команды и сразу ответить на следующие вопросы:


      • Необходима ли такая команда в компании?

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


      • Выгодно ли внедрять такую команду?

      Безусловно. Изначально было сложно измерить и спрогнозировать выгоду от её создания, все расчеты, P&L были на словах, в цифрах — только примерные предположения. Спустя год мы можем посчитать сэкономленное время, профиты, и все расчеты говорят о том, что это было не зря.


      • На долгую перспективу ли эта команда?

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


      • Чем эта команда занимается?

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

      Читать далее
    • Установка и обновление зависимостей в JavaScript

        Установка и обновление зависимостей JavaScript


        И снова привет! В прошлом посте мы начали рассматривать процесс управления зависимостями в JavaScript, разобрали основы: что такое npm-пакет, как выглядит манифест пакета, в каких полях прописываются зависимости и в принципе что такое дерево зависимостей, а также основы семантического версионирования (semver). Если вы пропустили предыдущий пост, то рекомендую начать с него.


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

        Читать дальше →
        • +31
        • 11.2k
        • 9
      • Управление зависимостями JavaScript

          Управление зависимостями JavaScript


          Всем привет! Меня зовут Слава Фомин, я ведущий разработчик в компании DomClick. За свою 16-ти летнюю практику я в первых рядах наблюдал за становлением и развитием JavaScript как стандарта и экосистемы. В нашей компании мы используем JavaScript, в первую очередь, для продвинутой front-end разработки и успели перепробовать достаточно большое количество различных технологий, инструментов и подходов, набить много шишек. Результатом этого кропотливого труда стал ценнейший опыт, которым я и хочу поделиться с вами.

          Читать дальше →
        • Как работать из дома — опыт удаленщиков Plesk

            Многие российские компании переводят сотрудников на удаленную работу из-за коронавируса. С появлением вируса в Новосибирске, Plesk перестал быть исключением — руководство компании предложило сотрудникам покинуть офис с необходимой техникой и перейти на работу из дома. Казалось бы, вот он райский офис — твой уютный дом, где есть все для полноценной работы: ноутбук, мониторы, удобное кресло, кофе с печеньками и даже возможность подремать в обеденное время. Однако по прошествии нескольких дней такого уюта некоторые сотрудники начинают замечать, что не все так радужно, как изначально выглядело. Кто-то теряет фокус на задачах, так как дома много отвлекающих факторов: дети, жаждущие внимания, — ведь раз ты дома, значит у тебя выходной; домашние животные, рефлекторно требующие еду и почесывания за ушком; книжка, которую давно хотел прочитать; запылившийся персонаж, которого давно хотел прокачать. Ну и, конечно, дома нет начальника и команды, которые будут стоять над душой, если ты тормозишь. Кто-то, наоборот, превращается в стахановца и работает от рассвета до заката, ведь теперь даже время на дорогу не надо тратить. Потом наступает резкая усталость или даже выгорание. Совершаются попытки проникнуть в офис, дабы вернуть свою привычную жизнь. Но вирус не дремлет, со всех сторон все чаще сыплются лозунги типа “Stay the f*ck home”.

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

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


            Читать дальше →
            • +13
            • 2.9k
            • 1
          • Путь от молодого стартапа до технологической компании, которая делает высоконагруженные проекты в сфере недвижимости

              На вопросы отвечал Павел Зыков, СТО DomClick.ru

              ДомКлику скоро 5 лет. Давайте немного вспомним историю и заодно познакомимся. Компания была основана в 2015 году. Ты помнишь день, с которого все начиналось?

              Еще как помню. Я входил в число основателей, поэтому помню все в мельчайших деталях – как собеседовали первых людей, как в августе 2015 года сняли первый офис на улице Рабочая, который устраивал нас по цене, несмотря на то, что подоконники кабинетов всегда были в пыли от проходящих рядом поездов. Сейчас, сидя в максимально комфортном Agile Home в 2 минутах от ст. метро Кутузовская, с теплотой вспоминаем о тех временах, когда два интернет — провайдера в здании считалось нашим уникальным преимуществом.

              image
              Читать дальше →
            • Ленивая загрузка изображений средствами браузера

              • Translation
              • Tutorial
              Автор материала, перевод которого мы сегодня публикуем, Эдди Османи из Google, говорит, что уже в Chrome 75 вполне может появиться поддержка нового атрибута элементов <img> и <iframe> loading. Это означает, что данные элементы будут поддерживать стандартные возможности по так называемой «ленивой загрузке» данных.

              image
              Читать дальше →
            • Создаем монорепозиторий с помощью lerna & yarn workspaces

              learn-and-yarn

              За последние несколько лет концепция монорепозиториев успешно зарекомендовала себя, так как позволяет значительно упростить процесс разработки модульных программных проектов, таких как инфраструктуры на основе микросервисов. Основные преимущества такого архитектурного подхода очевидны на практике, поэтому предлагаю создать свой тестовый монорепозиторий с нуля, попутно разбираясь в нюансах работы с yarn workspaces и lerna. Ну что ж, начнём!

              Рассмотрим структуру нашего проекта, который будет представлять собой три библиотеки расположенные в папке packages/, а также package.json в корневой директории.

              ├── package.json
              └── packages
                  ├── app
                  │   ├── index.js
                  │   └── package.json
                  ├── first
                  │   ├── index.js
                  │   └── package.json
                  └── second
                      ├── index.js
                      └── package.json

              Подразумевается, что у нас есть две независимые библиотеки first и second, а также библиотека app, которая будет импортировать функции из первых двух. Для удобства все три пакета помещены в директорию packages. Можно было оставить их в корневой папке или поместить в директорию с любым другим именем, но, для того чтобы следовать общепринятым конвенциям, мы разместим их именно таким образом.
              Читать дальше →
            • Использование JavaScript-консоли в браузерах

              • Translation
              • Tutorial
              Сегодня мы публикуем заметку, посвящённую особенностям использования JavaScript-консоли в браузерах, лежащим за пределами широко известной команды console.log(). Собственно говоря, эта команда представляет собой простейший инструмент для отладки программ, который позволяет выводить что-либо в консоль. Однако знание некоторых особенностей этого инструмента позволит тем, кто им пользуется, повысить эффективность работы.


              Читать дальше →
            • Как работает JS: движки рендеринга веб-страниц и советы по оптимизации их производительности

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

              image

              Автор материала говорит, что в компании SessionStack приходится уделять рендерингу огромное внимание. В этой статье он поделится советами, касающимися оптимизации веб-страниц с учётом особенностей их визуализации.
              Читать дальше →
              • +14
              • 37.2k
              • 6
            • Ускоряем JavaScript-код с использованием типа данных Set

              • Translation
              Автор материала, перевод которого мы сегодня публикуем, говорит, что уверен в том, что многие JavaScript-разработчики пользуются, в основном, такими типами данных, как Number, String, Object, Array и Boolean. В большинстве случаев этого вполне достаточно. Но если нужно сделать код как можно более быстрым и масштабируемым, применение этих типов данных не всегда оправдано.



              В этом материале мы поговорим о том, как, пользуясь типом данных Set, предоставляющим возможность работать с коллекциями уникальных значений, сделать код быстрее. Особенно это актуально для кода крупномасштабных проектов. У типов Array и Set много общего, но использование типа данных Set способно дать программисту такие возможности, ярко проявляющиеся во время выполнения программ, которых нет у типа Array.
              Читать дальше →
            • Ответственный подход к JavaScript-разработке, часть 1

              • Translation
              Цифры говорят нам о том, что рост объёмов JavaScript-кода плохо влияет на производительность веб-проектов. Если так будет продолжаться и дальше, то уже очень скоро при загрузке средней страницы будет передаваться как минимум 400 Кб JS-кода. И это — всего лишь объём передаваемых данных. Как и другие текстовые ресурсы, JavaScript-код практически всегда передаётся в сжатом виде. Пожалуй, сжатие — это единственное, что обычно делается правильно при передаче кода с сервера на клиент.

              image

              К сожалению, в то время как уменьшение времени передачи неких ресурсов вносит серьёзный вклад в то, что мы называем «производительностью», сжатие никак не влияет на то, сколько времени у браузера уйдёт на разбор и обработку скрипта после того, как он будет полностью загружен.
              Читать дальше →
            • 5 приемов работы с CSS, о которых вам следует знать


                Наблюдая за потоком вопросов по CSS на Тостере уже давно заметил, что многие из них повторяются много-много раз. Да, есть совсем глупые вопросы, на которые так и тянет ответить RTFM! Но есть и более занятные. Они связаны с не совсем стандартной версткой. Не такой, чтобы глаза на лоб лезли, но и заметно выходящей за рамки условного бутстрапа и традиционных туториалов для новичков. Похожие вопросы довольно сложно загуглить — обычно вся суть в картинке, но и отвечать каждый раз надоедает. В этой статье мы постараемся посмотреть некоторые приемы, охватывающие довольно широкий круг подобных вопросов. Информация в первую очередь адресуется начинающим верстальщикам, но возможно и опытным будет, чем вдохновиться.

                Читать дальше →
              • Flutter I — Введение и установка

                Flutter — новый инструмент от Google, позволяющий разработчикам писать кроссплатформенные приложения, которые можно запускать на различных системах (например, на Android или iOS) с общей кодовой базой.


                введение и установка


                Сам инструмент написан на C и C++. Предоставляет движок для 2D рендеринга, React-подобный FRP фреймворк и набор виджетов в стиле Material Design. На данный момент распространяется версия alpha:0.0.20, но несмотря на довольно "сырую" версию, уже можно создавать продвинутый интерфейс, работать с сетью и даже с файловой системой.

                Читать дальше →
              • Элегантные паттерны современного JavaScript: RORO

                • Translation
                Автор материала, перевод которого мы публикуем сегодня, Билл Соро, говорит, что написал первые строки кода на JavaScript вскоре после появления этого языка. По его словам, если тогда ему сказали бы, что однажды он выпустит серию статей об элегантных шаблонах проектирования в JavaScript, он умер бы со смеху. Тогда он воспринимал JS как странный маленький язык, писанину на котором можно было с большой натяжкой называть «программированием».

                Но за 20 лет многое изменилось. Теперь Билл воспринимает JavaScript таким, каким видел его Дуглас Крокфорд, когда работал над книгой «JavaScript. Сильные стороны»: красивым, элегантным и выразительным динамическим языком программирования.



                В этой статье Билл хочет рассказать о замечательном маленьком паттерне, которым он уже какое-то время с удовольствием пользуется. Он надеется, что этот шаблон проектирования пригодится и другим программистам. Билл говорит, что не считает себя первооткрывателем этого паттерна, скорее, речь идёт о том, что он увидел нечто подобное в чьём-то коде, а потом адаптировал это под свои нужды.
                Читать дальше →
              • Практическое руководство по использованию CSS Modules в React приложениях

                Привет Хабр! Предлагаю вашему вниманию свободный перевод статьи «Practical Guide to React and CSS Modules» от Tatu Tamminen.

                В прошлом веб-разработчики тратили много времени и сил на создание повторно используемых компонентов. Оcобую проблему представлял собой CSS и природа его каскадов. Например, если разработчик создаёт компонент для отображения древовидной структуры, то как он может гарантировать, что CSS класс (например, .leaf), используемый в этом компоненте, не приведёт к побочным эффектам в других частях приложения? Были созданы различные методологии и соглашения, чтобы справиться с проблемами селекторов. БЭМ и SMACSS — широко используемые методологии, которые хорошо выполняют свои задачи, но в то же время далеко не идеальны. В этой статье рассказывается о недостатках таких методологий, основанных на соглашении об именах, о том, что представляют собой CSS Modules, и о том, как эти модули можно использовать в React приложении.
                Читать дальше →
              • Паттерн «Обозреватель» и контекст вызова в Javascript

                Хотя про паттерн «Обозреватель (Наблюдатель, Observer)» сказано достаточно, в том числе и на Хабре, вкратце повторюсь. Суть паттерна в наблюдении за состоянием неких субъектов системы и соответствующей реакции наблюдателей на изменения этих состояний. За одним субъектом может следить несколько наблюдателей, причём сам он об этом не знает (слабое связывание), но исправно оповещает всех об изменении состояния.

                Удобно использовать Обозревателя на сайтах и в веб-приложениях, поэтому логично реализовать его с использованием самого популярного языка для веб-среды — Javascript.
                Читать дальше →
              • React и Code Splitting

                  С code splitting я познакомился очень давно, в году так 2008, когда Яндекс немного подвис, и скрипты Яндекс.Директа, синхронно подключенные на сайте, просто этот сайт убили. Вообще в те времена было нормой, если ваши "скрипты" это 10 файлов которые вы подключаете в единственно правильном порядке, что и до сих пор (с defer) работает просто на ура.
                  Потом я начал активно работать с картами, а они до сих пор подключаются как внешние скрипты, конечно же lazy-load. Потом уже, как член команды Яндекс.Карт, я активно использовал ymodules возможность tree-shaking на клиенте, что обеспечивало просто идеальный code splitting.


                  А потом я переметнулся в webpack и React, в страну непуганных идиотов, которые смотрели на require.ensure как баран на новые ворота, да и до сих пор так делают.


                  Code splitting — это не "вау-фича", это "маст хэв". Еще бы SSR не мешался...


                  Разберемся?
                • Измерение производительности функций в JavaScript

                  • Translation


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