• 3 способа рендеринга больших списков в Angular

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

    Это — один из тех случаев, когда «фреймворк является быстрым, а код — медленным».



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

    Автор статьи, перевод которой мы сегодня публикуем, хочет исследовать существующие способы вывода больших списков на веб-страницах и поговорить о сферах их применения.
    Читать дальше →
    • +29
    • 4.8k
    • 9
  • Прокачиваем работу с событиями в Angular

    • Tutorial

    Давным-давно я написал статью о работе с EventManager в Angular. В ней я рассказал, как можно сохранить привычный нам синтаксис подписок на события, при этом избежав лишних запусков проверки изменений на частых и чувствительных событиях.


    Однако описанный мною метод громоздкий и сложный для восприятия. Пришло время переписать фильтрацию на декораторы.


    Читать дальше →
  • Пишем простой WYSIWYG-редактор с помощью ProseMirror

    • Tutorial
    Когда в Sports.ru понадобился свой WYSIWYG-редактор, мы решили сделать его на основе библиотеки ProseMirror. Одной из ключевых особенностей этого инструмента является модульность и широкие возможности кастомизации, поэтому с его помощью можно очень тонко подогнать редактор под любой проект. В частности, ProseMirror уже используют в The New York Times и The Guardian. В этой статье мы расскажем о том, как с помощью ProseMirror написать свой WYSIWYG-редактор.

    Пишем простой WYSIWYG-редактор с помощью ProseMirror
    Читать дальше →
    • +10
    • 4.2k
    • 3
  • 10 отличных Github репозиториев, которые должен знать каждый веб-разработчик

    • Translation

    Кроме огромных репозиториев с источниками для подготовки к интервью, здесь много чего интересного


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


    image


    А я его перевел, т.к. показалось, что пост многим будет интересен. Перевод очень вольный: я опустил нерелевантные промо-ссылки и гипер эмоциональные похвалы автора оригинала, чтобы оставить только суть. Еще, обновил цифры, чтобы информация была более актуальной к моменту публикации этого перевода. Итак, перейдем к списку.
    Читать дальше →
    • +62
    • 57k
    • 7
  • Интерактивная выгрузка файлов на сервер с помощью RxJS



      Прошло много времени с тех пор, как я написал свою последнюю статью по основам RxJS. В комментариях меня попросили показать более сложные примеры, которые могут пригодиться на практике. Поэтому я решил немного разбавить теорию и сегодня мы поговорим про выгрузку файлов.
      Читать дальше →
    • 10 полезных функций Angular, которые вы упускали

      • Translation

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

      Прежде чем мы перейдем к функциям Angular, стоит упомянуть один очень полезный инструмент. Bit (Github) позволяет с легкостью работать над Angular-компонентами вместе и делиться ими. От души рекомендую его для поддержания консистентного интерфейса, ускорения разработки и минимизации количества ошибок в коде.


      Пример: Круговые загрузчики для Angular с bit.dev
      Читать дальше →
    • 6 GitHub проектов для веб-разработчиков, на которые стоит взглянуть

      Привет, Хабр! Представляю вам перевод статьи 6 Github Repos for web developers you should have a look at автора lampewebdev.

      Однажды я пролистывал ленту dev.to и наткнулся на пост 6 GitHub проектов для быстрой прокачки знаний.

      Я согласен с автором, что список действительно впечатляет, но порой списки ссылок в этих проектах очень большие.

      Поэтому, вот список моих любимых проектов GitHub для быстрой прокачки знаний, но созданный специально для веб-разработчиков.
      Читать дальше →
      • +15
      • 16.8k
      • 2
    • Компоненты-агностики в Angular

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


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


        bruce lee

        Читать дальше →
        • +22
        • 7.1k
        • 6
      • Разбор решенных задач с чемпионата по программированию от Яндекса (фронт-энд разработка) 2019

        Завершилось мое участие в чемпионате по программированию. Я неплохо прошел квалификацию, решив 4 из 6 задач и шел на 20 месте, поэтому были надежды и в финале попасть топ 20.
        Но к сожалению не удалось попасть даже в топ-100. После драки кулаками не машут, но я смог решить еще несколько задач по завершению. Предлагаю вашему вниманию все решенные мной задания.
        Читать дальше →
      • Шесть задачек для Front-End разработчика

        • Translation

        1. Форма кредитной карты


        Клёвая форма кредитной карты с гладкими и приятными микровзаимодействиями. Включает форматирование чисел, проверку и автоматическое определение типа карты. Она построена на Vue.js, а также полностью адаптивная. (Посмотреть можно здесь.)

        image

        credit-card-form

        Чему научитесь:

        • Обрабатывать и валидировать формы
        • Обрабатывать события (например, при изменении полей)
        • Разберетесь как отображать и размещать элементы на странице, особенно данные кредитной карты, которая поверх формы
        Читать дальше →
      • The state of CSS

          В ежегодном опросе «The state of JavaScript» разработчики рассказывают о том, что они используют здесь и сейчас. Вопросы там знакомы и привычны фронтенд-сообществу. В 2019 году появился опрос «The state of CSS», который ввёл разработчиков в ступор. Оказывается, многие технологии разработчикам не знакомы, хотя большинство из них уже активно используются. Возможно, разработчики используют привычные инструменты и технологии, и не стремятся применять что-то новое? Возможно, просто нет задач под новые технологии? Зачем использовать CSS Grid, CSS Multi columns, там, где проще построить все на Flexbox? Возможно, это все касается старичков, а джуны уже и не знают про Flexbox и Float и в опросах не участвуют?



          Сергей Попов (popovsergey), руководитель Лиги А, спикер и организатор конференций задался этими вопросами, провел свой мини-опрос и даже получил результаты от организаторов «The state of CSS». Всю информацию Сергей обработал, структурировал и получил срез фронтенд-сообщества: кто что знает и использует, где учатся верстальщики и сколько зарабатывают, какие технологии актуальны, а какие пора сдавать в переработку, и что изучать, чтобы применять всю мощь CSS. Расшифровка доклада — один из вариантов отчета по актуальному состоянию CSS, вместе с оригинальным отчетом «The state of CSS» подскажет, куда двигаться и какие технологии применять.

          Осторожно, под катом много диаграмм и картинок, действительно много, но они все по делу. В хорошем качестве они тут.
          Читать дальше →
          • +50
          • 20.2k
          • 9
        • Angular: когда надо пилить приложение, а backend еще не готов

            Если вы занимаетесь frontend разработкой, то наверняка вам знакома следующая мизансцена: сроки по проекту стремительно сжимаются, ваше руководство, или заказчик, а-то и оба вместе желают увидеть глазами работающее приложение прямо сейчас, пусть и с ненастоящими данными. При этом back, возможно, и есть, но именно api слой взаимодействия с front'ом отсутствует от слова совсем.

            Итак, недавно я столкнулся с такой ситуацией, и я разрабатываю frontend под angular (сидящие вокруг на стульях люди вяло похлопали, кто-то понимающе кивнул).

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

            В голову приходило несколько вариантов решения:

            1. Захардкодить данные на уровне компонент
            2. Захардкодить данные на уровне resolver сервисов, приколотить их к нужным роутам
            3. Захардкодить данные на уровне сервисов поставщиков данных
            4. Запилить api, и, согласно оговоренным контрактам, возвращать захардкоженные данные
            Читать дальше →
          • Лучшие дистрибутивы Linux для старых компьютеров

            • Translation
            Привет!

            Вкратце: пока не бросайте свой старый компьютер — используйте легкий дистрибутив Linux, чтобы возродить его!

            Что вы делаете со своим старым компьютером? Тот, который когда-то имел хорошую аппаратную конфигурацию, но теперь считается устаревшим. Почему бы не восстановить его вместе с Linux? Я собираюсь перечислить лучшие легкие дистрибутивы Linux, которые вы можете использовать на своем старом ПК.

            Лучшие легкие дистрибутивы Linux для старых ноутбуков и десктопов


            Я постараюсь упорядочить список в порядке убывания требований к оборудованию. Это означает, что легкому дистрибутиву Linux, занимающему первое место, потребуется минимальное аппаратное обеспечение.

            10. Peppermint


            image

            Peppermint  —  это облачно-ориентированный дистрибутив Linux, не требующий мощного железа для запуска. Он основан на Lubuntu и использует окружение рабочего стола LXDE для более плавной работы.
            Читать дальше →
          • Четыре реальные истории работы с микросервисной архитектурой — отчёт с митапа Backend United 3: Холодец

              На третьей встрече из серии Backend United мы с коллегами из Booking, Dodo Pizza и Авито обменялись опытом работы с микросервисной архитектурой. Говорили о распилах, монолитах и всём, что за этим стоит. Этот пост — отчёт о том, как прошёл митап. Внутри — видеозаписи, презентации спикеров, ссылки на фотоотчёт и отзывы участников встречи.


              Читать дальше →
            • Почему мы предпочитаем CSS(--variable) переменным SASS($variable)?

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


              Читать дальше →
              • +24
              • 14k
              • 5
            • Вечный вопрос технического долга


                Это одно из самых крутых облегчений проекта. На картинке — график суммарного времени, затрачиваемого CPU на обработку всех пользовательских запросов. В конце видно переход на PHP 7.0. с версии 5.6. Это 2016 год, переключение во второй половине дня с 24 ноября.

                Туту.ру с точки зрения вычислений — это в первую очередь возможность купить билет из точки А в точку Б. Для этого мы перемалываем огромное количество расписаний, собираем в кэш ответы множества систем авиакомпаний и периодически делаем невероятно длинные join-запросы к базе данных. В целом мы написаны на PHP и до недавних пор были полностью на нём (если язык правильно готовить, то можно даже строить на нём системы реального времени). С недавнего времени критичные по производительности участки стали рефакториться на Go.

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

                Вообще технический долг — это плата за ошибку при принятии решения. Вот ты что-то предсказал не так, как архитектор, то есть совершил ошибку прогнозирования или принимал решение в условиях недостаточной информации. В какой-то момент понимаешь, что надо что-то менять в коде (часто на уровне архитектуры). Дальше можно сразу поменять, а можно подождать. Если подождал — на техдолг набежали проценты. Поэтому хорошая практика — время от времени реструктуризировать его. Ну или признавать себя банкротом и писать весь блок заново.
                Читать дальше →
              • Построение микросервисной архитектуры на Golang и gRPC, часть 2 (docker)

                • Tutorial

                Пришло время заняться контейнерами


                Прежде всего, мы используем новейший образ Linux Alpine. Linux Alpine — это легкий дистрибутив Linux, разработанный и оптимизированный для запуска веб-приложений в Docker. Другими словами, Linux Alpine обладает достаточным количеством зависимостей и функциональных возможностей для выполнения большинства приложений. Это означает, что размер образа составляет около 8 МБ!

                По сравнению с, скажем… виртуальной машиной Ubuntu объемом около 1 ГБ, вот почему образы Docker стали более естественным образом подходить для микросервисов и облачных вычислений.

                Итак, теперь я надеюсь, что вы видите ценность в контейнеризации, и мы можем начать «Dockerising» нашего первого сервиса. Давайте создадим Dockerfile $ touch consignment-service/Dockerfile.


                Читать дальше →
                • +11
                • 6.3k
                • 6
              • Построение микросервисной архитектуры на Golang и gRPC, часть 1

                Введение в микросервисную архитектуру


                Часть 1 из 10


                Адаптация статей Ewan Valentine.


                Это серия из десяти частей, я постараюсь раз в месяц писать про построение микросервисов на Golang. Я буду использовать protobuf и gRPC в качестве основного транспортного протокола.


                Стек, который я использовал: golang, mongodb, grpc, docker, Google Cloud, Kubernetes, NATS, CircleCI, Terraform и go-micro.


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


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


                • грузы
                • инвентарь
                • суда
                • пользователи
                • роли
                • аутентификация
                Читать дальше →
                • +9
                • 20.2k
                • 8
              • Почему уходят разработчики: 8 причин



                  Есть такая фраза «Как бы хорошо вы ни воспитывали ребенка, ему все равно будет что сказать своему психоаналитику». То же самое можно сказать и про работу с сотрудниками. Как бы хорошо у вас ни было работать в компании, вашим сотрудникам будет что сказать о причинах ухода на собеседовании — это нормально. Но риски всегда можно минимизировать, а жизнь сотрудника в рамках компании — увеличить.

                  Мы решили проанализировать основные причины ухода разработчиков с предыдущих мест. Это не глубинные исследования, а кратковременный срез в моменте: просмотрели 175 заметок по итогам общения с разработчиками, которые процессятся на разных стадиях наших проектов, выбрали самые яркие высказывания и сгруппировали их по восьми темам.

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

                  Неналаженные рабочие процессы


                  Лидер нашей подборки. Встречается более чем в 60% причин при смене работы. Особенность в том, что это достаточно широкое понятие, которое включает в себя ошибки менеджмента, недостатки программного обеспечения, нехватку специалистов для реализации поставленных задач.
                  Читать дальше →
                • Протокол для общения между iframe и основным окном браузера

                    Многим разработчикам периодически требуется наладить общение между несколькими вкладками браузера: возможность посылать сообщения из одной в другую и получать ответ. Такая задача встала и перед нами.


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


                    При ближайшем рассмотрении выяснилось, что две трети библиотеки при этом можно не менять, необходимо только немного порефакторить код. Библиотека представляет из себя скорей ПРОТОКОЛ общения, который может работать с текстовыми данными. Его можно применять во всех случаях, если есть возможность передавать текст (iframe, window.open, worker, вкладки браузера, WebSocket).


                    Как это работает


                    На данный момент в протоколе есть две функциональности: отправка сообщения и подписка на события. Любое сообщение в протоколе — это объект с данными. Главное поле этого объекта — поле type, которое говорит нам, что это за сообщение. Поле type — это enum со значениями:

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