• Как я сделал навигацию в React Native не такой ужасной

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

      Используя react-navigation или react-native-router-flux если вам нужно сделать экран, на который можно попасть из нескольких разных мест, вам будет очень трудно составить иерархию вложенных роутов так, чтобы все работало как надо. Или если вам нужно, чтобы какой-нибудь экран появлялся с недефолтной анимацией, то тоже придется попыхтеть. Также этих библиотеках воплощена вредная и деструктивная идея включения туда UI-компонентов вроде верхней полоски навигации и табов. Это прямое нарушение unix-way подхода, когда одна библиотека выполняет одну и только одну функцию, но качественно. Из-за такой тесной связи UI-компонентов с навигацией очень часто возникают баги — на экране появляется несколько полосок навигации, на одной из которых может быть кнопка «назад», а на другой название экрана.

      Вдоволь нахлебавшись горя с стандартными библиотеками, я решил разработать свой навигатор. Основными целями при разработке были простота API, отсутствие жесткой структуры вложенности экранов и отделение анимаций от содержимого. Так появился на свет react-native-easy-router.
      Читать дальше →
    • Клеточные автоматы в браузере

      • Перевод
      image

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

      Клеточные автоматы имеют различные формы, виды и размерности. Наверно, самым знаменитым клеточным автоматом является конвеевская игра «Жизнь» (Conway's Game of Life, GOL). Она состоит из двухмерной сетки, в которой каждая клетка содержит двоичное значение (живая или мёртвая). Сопутствующие правила на основании состояния соседних клеток определяют, должна ли клетка быть мёртвой или живой. Правила гласят, что живая клетка умирает от одиночества, если вокруг неё меньше 2 живых клеток. Если живы больше трёх соседних клеток, она погибает от перенаселённости. Другими словами, клетка «выживает», если вокруг неё ровно 2 или 3 живых соседних клеток. Чтобы мёртвая клетка ожила, у неё должно быть ровно 3 живых соседних клеток, в противном случае она остаётся мёртвой. Пример автомата GoL, итеративно проходящий несколько состояний, показан ниже.

      Game of Life

      Ещё один знаменитый вариант клеточного автомата одномерен; он называется элементарным клеточным автоматом (Elementary Cellular Automaton, ECA). Именно его мы реализуем в этом посте.
      Читать дальше →
      • +11
      • 5,6k
      • 1
    • Redux Toolkit как средство эффективной Redux-разработки

        image
        В настоящее время разработка львиной доли веб-приложений, основанных на фреймворке React, ведется с использованием библиотеки Redux. Данная библиотека является самой популярной реализацией FLUX-архитектуры и, несмотря на ряд очевидных преимуществ, имеет весьма существенные недостатки, такие как:


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

        Для устранения этих недостатков разработчики Redux представили библиотеку Redux Toolkit. Этот инструмент представляет собой набор практических решений и методов, предназначенных для упрощения разработки приложений с использованием Redux. Разработчики данной библиотеки преследовали цель упростить типичные случаи использования Redux. Данный инструмент не является универсальным решением в каждом из возможных случаев использования Redux, но позволяет упростить тот код, который требуется написать разработчику.


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

        Читать дальше →
      • [в закладки] 9 инструментов, повышающих продуктивность веб-разработчика

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



        Автор статьи, перевод которой мы сегодня публикуем, отобрал 9 таких инструментов.
        Читать дальше →
      • Как разработчику развиваться в небольшом и не самом айтишном городе

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

          Нет, это не история о том, какой я уникум. Несколько лет назад я не знал, что такое SOLID — и на просьбу расшифровать аббревиатуру честно спросил: “А что это?”. Много лет я плыл по течению, пока не осел в уютном “болоте”. Но потом очнулся и, кажется, за несколько лет смог выбраться на твердую землю. Не повторяйте моих ошибок)



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

          Как начать деградировать, но не поддаться

          Читать дальше →
        • Ожидаемые новые возможности JavaScript, о которых полезно знать

          • Перевод
          С момента выхода стандарта ECMAScript 2015 (его ещё называют ES6) JavaScript серьёзно изменился и улучшился. Это очень хорошая новость для всех JS-разработчиков. Более того, теперь новая версия ECMAScript выходит каждый год. Возможно, вы не обратили особого внимания на то, что появилось в самой свежей версии стандарта, который был выпущен в июне 2019 года. Автор заметки, перевод которой мы сегодня публикуем, хочет в двух словах рассказать о новшествах JavaScript, и о том, чего можно ждать в следующей версии стандарта ECMAScript.



          Здесь будут упомянуты возможности, предложения которых находятся на третьем этапе согласования (Stage 3). Это значит, что они, скорее всего, появятся в следующей версии стандарта ECMAScript, но с абсолютной достоверностью этого утверждать нельзя. Вот репозиторий, в котором можно найти сведения о предложениях, находящихся на разных этапах согласования.
          Читать дальше →
        • Краткий путеводитель по математике для иностранцев


            О чем это


            А как можно на четвёртом десятке и с аверсией к алгебре наверстать требуемый материал первых курсов университета?

            Безумству храбрых поем мы песню!

            Целевой аудиторией Путеводителя являются те, кто внезапно заинтересовался математикой или чувствует потребность повысить свою профессиональную эффективность, но по какой-либо причине не имеет возможности отдать несколько лет своей жизни академическому образованию. Если у вас возникла потребность разобраться, но фундаментальных знаний катастрофически не хватает, и вы чувствуете себя иностранцем в стране математики, где говорят на непонятном языке, попробуйте пройти этот путь в качестве туриста. Весь маршрут представляет собой обзорную экскурсию и рассчитан на несколько дней, максимум две недели. Для сравнения: полный академический курс составляет около пяти лет. Конечной целью предлагаемого маршрута является знакомство с принципами одного узкоспециального раздела — эллиптической криптографии. Однако до конца идти не обязательно, если этот раздел лежит вне сферы ваших интересов или вы столкнулись с серьезными трудностями или опасностями. Но, раз уж вы взяли в руки Путеводитель, всё же постарайтесь дойти хотя бы до конца раздела «Язык формул».


            Подобно словарю, этот путеводитель можно использовать и для обратного перевода. Возможно, он пригодится математикам, которые вынуждены контактировать и тесно сотрудничать с нематематиками, постоянно преодолевая пропасть непонимания. Дело это представляется настолько трудным, что строчка Максима Горького в эпиграфе является универсальным ответом обеим сторонам. В любом случае я надеюсь на обратную связь и постараюсь пополнять наши знания о том, почему нас не понимают, и как это можно исправлять.


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

            Читать дальше →
          • Адаптивные email-письма без боли и страданий

            • Tutorial
            Привет, Хабр! Все, кто хоть раз сталкивался с версткой email-писем, знают, что это нудно, утомительно и порой очень сильно раздражает. В большинстве случаев это обусловлено тем, что почтовые клиенты не умеют поддерживать очень многое из того, что мы используем при верстке самых простых веб-страниц. Поэтому дизайн письма делается простым или не делается вовсе, а львиная доля времени уходит на проверку и фиксы багов в многочисленных почтовиках.

            В этой статье мы хотим поделиться с вами рецептами верстки красивого, на наш взгляд, и адаптивного письма, которое будет подстраиваться под экран вашего телефона даже в Gmail. А так же рассказать про нюансы, проблемы и тонкости, с которыми мы столкнулись в процессе его создания.
            Читать дальше →
          • [в закладки] PDF- и ePUB-версия руководства по React

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



              Для новых читателей нашего блога — два бонуса внутри.
              Читать дальше →
              • +52
              • 21,8k
              • 9
            • Алгорейв: как программисты устраивают вечеринки


                Источник

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

                Генеративная музыка — явление не новое. Известно, что даже нейросеть способна создавать музыку, которую сложно отличить от творчества талантливого композитора. Однако алгорейв имеет свои отличительные особенности.

                Если работа традиционного диджея строится вокруг правильного сведения треков (конечно, если он не крутит с флешки готовый микс), то алгорейверы импровизируют, допускают и исправляют ошибки прямо во время представления. При этом лайвкодеры транслируют происходящее на экране ноутбука.
                Читать дальше →
              • Руководство по логированию в Node.js

                • Перевод

                Первая задача, с которой чаще всего сталкиваются разработчики, начинающие программировать на JavaScript, – как регистрировать события в журнале консоли с помощью метода console.log. В поисках информации по отладке кода на JavaScript вы найдёте сотни статей в блогах, а также инструкций на StackOverflow, советующих «просто» вывести данные в консоль через метод console.log. Это настолько распространённая практика, что пришлось ввести правила для контроля качества кода, подобные no-console, чтобы не оставлять случайные записи из журнала в коде для продакшена. Но что делать, если нужно специально зарегистрировать какое-нибудь событие, чтобы предоставить дополнительную информацию?

                В этой статье рассматриваются различные ситуации, в которых требуется вести логи; показывается разница между методами console.log и console.error в Node.js и демонстрируется, как передать функцию логирования библиотекам, не перегружая пользовательскую консоль.
                Читать дальше →
                • +38
                • 19k
                • 6
              • (Почти) бесполезный стриминг вебкамеры из браузера. Media Stream и Websockets

                • Tutorial
                В статье я хочу поделиться своими попытками сделать стримминг видео через websockets без использования сторонних плагинов браузера типа Adobe Flash Player. Что из этого получилось читайте далее.
                Читать дальше →
              • Про использование React с элементом canvas

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

                  Но я бы хотел рассказать про опыт использования React, который позволяет работать с мутабельной абстракцией над "иммутабельным" canvas элементом. Звучит странно, но работает отлично.

                  Мотивация


                  Я использую элемент <canvas> очень часто. Я сделал несколько достаточно сложных веб-приложений, в которых canvas — это основной элемент представления данных. Использовать canvas без всяких фреймворков и библиотек может быть действительно сложно в крупных приложениях. Поэтому я начал часто использовать фреймворки. Сейчас я поддерживаю фреймворк Konva (есть обзорная статья https://habrahabr.ru/post/250897/).

                  Konva помогает очень сильно, но хочется большего. Так же я начал использовать React в своих приложениях, и он мне действительно нравится. И я подумал, как же я могу использовать React для рисования графики на canvas?

                  React + canvas

                  Читать дальше →
                • Redux-symbiote — пишем действия и редьюсеры почти без боли

                  React-redux замечательная штука. При правильном использовании архитектура приложения эффективна, а структура проекта и легко читаемая. Но как и в любом решении есть свои особенности.

                  Описание действий и редьюсеров одна из таких особенностей. Классическая реализация двух этих сущностей в коде довольно трудоемкое занятие.
                  Читать дальше →