• Чего мне никогда не говорили о CSS

    • Перевод

    Фото Джантин Дурнбос на Unsplash

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

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

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

    • Перевод


    Что вас бесит сильнее всего, когда вы пытаетесь организовать читаемые логи в вашем NodeJS приложении? Лично меня чрезвычайно напрягает отсутствие каких-либо вменяемых зрелых стандартов по созданию trace ID. В этой статье мы поговорим о том, какие есть варианты создания trace ID, разберемся на пальцах как работает continuation-local storage или CLS и призовем на помощь силу Proxy, чтобы завести все это с абсолютно любым логером.

    Читать дальше →
  • Introscope: ну очень ленивое unit-тестирование

      Мы на работе пишем много часто меняющейся бизнес-логики на JS (стартап же). Даже слишком много. И всё это хочется по старой привычке тестировать, но как-нибудь побыстрее, чтобы тесты особо не мешали говнокодить, когда это нужно, и не подгонять под тесты особенно сильно структуру модулей. В какой-то момент пришла мысль, что можно это еще и автоматизировать как-то с помощью простенького babel-плагина, чтобы он для начала все приватные переменные и методы выворачивал в тестовой среде, а в продакшене не трогал. Это оказалось довольно просто и увлекательно. Так появился Introscope, которым мы теперь тестируем всё более-менее сложное.

      Читать дальше →
      • +16
      • 2,6k
      • 2
    • Курс лекций по JavaScript и Node.js в КПИ

        100 лекций по программированию в Киевском политехническом институте


        Товарищи инженеры, как и было обещано в анонсе, половина лекций (а это 51) уже доступны для просмотра на ютюбе и я продолжу их записывать в 2019 году. Часть из нужно будет перезаписать, потому, что в первых лекциях не самый лучший звук и потому, что очень простые темы у меня пока не очень хорошо получаются. Лучше вышли сложные и актуальные темы, которые мне и самому более интересно рассказывать. Я бы не сказал, что это курс для начинающих, скорее, это курс для тех, кто уже знает синтаксис. За это время поступило множество предложений, как улучшить способ подачи материала: делить на более короткие лекции, подготовить задачи для практического освоения, записывать семинары и ответы на вопросы студентов, добавить в программу разбор целого ряда спорных и холиварных тем. Но не все сразу, я и так посвящаю этому треть жизни.

        Читать дальше →
      • Как научить программировать свою девушку, если ты не педагог, но она в тебя верит

        Когда твой парень - fullstack


        Когда твой парень — fullstack


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


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


        Как бы не так!


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


        И вот однажды она приходит к тебе и торжественно заявляет:
        — Я готова! Готова учиться программированию! Давай!


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


        О том, как я, не имея никакого практического опыта в обучении, решил ввести в программирование человека, объяснившего, что «ты же умный» и «всё у нас получится», расскажу под катом.


        Добро пожаловать!

        Читать дальше →
      • typeof Everything и утиные недоразумения

          image


          Каждый, использующий в каких бы то ни было целях замечательный JavaScript, задавался вопросом: мол а почему typeof null — это "object"? typeof от функции возвращает "function", но от Array"object"? а где же getClass у ваших хваленых классов? И хотя на большую часть легко и непринужденно отвечает спецификация или исторические факты, я бы хотел немного подвести черту… в большей степени для самого себя.


          Если, читатель, тебе в твоих задачах тоже недостаточно typeof да instanceof и хочется какой-то конкретики, а не "object"ы, то дальше может быть полезно. Ах да, про утки: они будут тоже, только немного неправильные.

          Читать дальше →
          • +16
          • 7,5k
          • 1
        • Программируй меньше, думай больше… инкрементально

          • Перевод
          К сожалению, примеры проектов, на которые разработчики потратили много времени, скажем более полугода, но так никогда и не выпустили в свет, нередки.

          Фагнер Брек считает, что такое происходит потому, что эти проекты не реализовывали принципы непрерывной интеграции. В своей заметке, перевод которой перед вами, он пишет, что в известном ему случае кое-что нужно делать по-другому с самого начала:

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

          Но как это сделать? Это фундаментальный вопрос, с которым каждому приходится столкнуть в программном проекте: всё изменится.

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


          Читать дальше →
        • Большой комок грязи

          Привет, Хабр! Представляю вашему вниманию перевод статьи "Big Ball of Mud" авторов Brian Foote и Joseph Yoder.

          От переводчика: Статья Big Ball of Mud написана Брайаном Футе и Джозефом Йодером летом 1999 года. Она рассказывает о наиболее распространённых антипаттернах разработки ПО, причине их возникновения и развития. Несмотря на то, что с момента публикации прошло больше 18 лет, описанные проблемы никуда не пропали, так что большая часть написанного актуальна и по сей день. Это первая часть статьи из трёх, остальные я надеюсь выложить в ближайшее время.

          Введение


          В последние годы сразу несколько авторов [Garlan и Shaw, 1993] [Shaw, 1996] [Buschmann и другие, 1996] [Meszaros, 1997] представили паттерны, которые характеризуют архитектуру ПО высокого уровня, например, PIPELINE (конвейер) и LAYERED ARCHITECTURE (многоуровневая архитектура).

          В идеальном мире все системы были бы образцом одного или более подобных шаблонов высокого уровня. Тем не менее, в реальной жизни все не так. Архитектура, которая на данный момент является доминирующий, до сегодняшнего дня ещё не обсуждалась. Речь идет о BIG BALL OF MUD или БОЛЬШОМ КОМКЕ ГРЯЗИ.
          Читать дальше →
          • +14
          • 10,6k
          • 4
        • Нативная инверсия зависимостей в TypeScript и React

            Когда я задумался о внедрении зависимостей в TypeScript, то первое, что мне посоветовали — inversify. Я посмотрел эту и другие библиотеки, реализующие паттерн Service Locator, и даже сделал свою собственную — typedin.


            Но когда я работал над версией typedin 2.0, то в конце концов понял, что вообще никакой библиотеки не нужно. В TypeScript есть все необходимое.


            Читать дальше →
          • Руководство по SEO JavaScript-сайтов. Часть 2. Проблемы, эксперименты и рекомендации

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

            image

            Сегодня, во второй части перевода, Томаш Рудски расскажет о наиболее распространённых SEO-ошибках, которым подвержены сайты, основанные на JavaScript, обсудит последствия грядущего отказа Google от механизма AJAX-сканирования, поговорит о предварительном рендеринге и об изоморфном JavaScript, поделится результатами экспериментов по индексированию. Здесь, кроме того, он затронет тему особенностей ранжирования сайтов различных видов и предложит вспомнить о том, что помимо Google есть и другие поисковики, которым тоже приходится сталкиваться с веб-страницами, основанными на JS.
            Читать дальше →
            • +27
            • 12,4k
            • 5
          • [в закладки] Инструменты для тестирования JavaScript-проектов

            • Перевод
            Автор материала, перевод которого мы публикуем сегодня, сотрудник Welldone Software, говорит, что если в двух словах рассказать об инструментах для тестирования JavaScript-проектов, то для модульного и интеграционного тестирования рекомендуется использовать Jest, а для тестов пользовательского интерфейса — TestCafe. Однако каждый конкретный проект может нуждаться в чём-то особенном. Лучший способ найти именно то, что нужно — взять несколько инструментов, которые, как кажется, подойдут, и испытать их в действии. Эксперименты подскажут — на чём именно стоит остановиться.



            Представляем вашему вниманию обзор наиболее широко используемых инструментов тестирования для JS-проектов, на которые стоит обратить внимание в 2018-м году.
            Читать дальше →
            • +43
            • 23,6k
            • 8
          • Оптимизация фронтенда. Часть 1. Почему я не люблю слово treeshaking или где вас обманывает webpack


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

              Читать дальше →
            • We need to go deeper: обходим скрипт который обходит адблок


                Немного пятничный пост. В последнее время заметил что есть реклама которая пробивает сразу 2(!) расширения блокирующие её. И обычно это очень низкокачественная и навязчивая реклама. Решил разобраться как так, и, возможно, даже попробовать побороть эту дрянь. Кому интересно — прошу под кат (осторожно, много картинок).
                Читать дальше →
              • Иллюзия движения

                • Перевод
                История о чувстве зрения, восприятии кадров и частоты обновления, размытости движущегося объекта и телевизионных экранах.
                (также см. перевод статьи того же автора «Иллюзия скорости» — прим. пер.)

                Введение


                Вы могли слышать термин кадры в секунду (FPS), и что 60 FPS — действительно хороший ориентир для любой анимации. Но большинство консольных игр идут на 30 FPS, а кинофильмы обычно записывают на 24 FPS, так зачем же нам стремиться к 60 FPS?

                Кадры… в секунду?


                Ранние времена кинопроизводства



                Съёмки голливудского фильма 1950 года «Юлий Цезарь» с Чарлтоном Хестоном

                Когда первые кинематографисты начали снимать кино, многие открытия делались не научным методом, а путём проб и ошибок. Первые камеры и проекторы управлялись вручную, а плёнка была очень дорогой — настолько дорогой, что при съёмке старались использовать наименьшую возможную частоту кадров, лишь бы сэкономить плёнку. Этот порог обычно находился между 16 и 24 FPS.
                Читать дальше →
              • Mountebank: гибкое мокирование web API

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

                Даже если вам повезло и ваш продукт имеет минимум зависимостей от внешних сервисов, скорее всего внутри он разбит на компоненты (классика жанра — backend/frontend), которые можно и нужно тестировать по отдельности. Это значит, что внешней зависимостью уже является api соседнего компонента, команда разработки которого совсем не горит желанием предоставлять вам инструменты для управления его состоянием.

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

                Решить эту проблему может мокирование API внешних систем.

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

                В данной статье я опишу Mountebank: инструмент, который позволяет быстро и очень гибко мокировать API прямо из автотестов без необходимости писать свой веб-сервис.

                Возможности mountebank'а:

                • мокирование API на протоколах tcp, http, https, smtp;
                • мокирование неограниченного количества API одновременно;
                • гибкое переопределение логики mock-API прямо во время тестов используя конфигурационный API mountebank'a;

                Читать дальше →
              • Что нового в nginx?



                  Максим Дунин (Nginx, Inc.)


                  Ведущий: Я представляю вашему вниманию следующего докладчика. Встречайте – Максим Дунин. И он расскажет о том, что же нового появилось в технологии под названием nginx.

                  Дисклеймер: речь пойдёт о нововведениях в 2016 году. Можно подумать, что это давно, но информация об изменениях в changelog от автора этих самых изменений полезна всегда!

                  Максим Дунин: Добрый день! Я Максим Дунин. Как вы, наверное, знаете, я разработчик nginx. Сегодня буду вам читать changelog вслух и с выражением. Для начала давайте определимся, с какого именно места мы будем читать changelog. Посмотрим на статистику.


                  Читать дальше →
                • Как устроена инфраструктура интернета

                  • Перевод
                  image

                  О, а вот и вы. Быстро получилось, не так ли? Всего лишь щелчок мыши или нажатие на экран и, если у вас соединение 21 века, вы мгновенно оказались на этой странице.

                  Но как это работает? Думали ли вы когда-нибудь о том, как картинка с котиком попадает на ваш компьютер в Лондоне с сервера в Орегоне? Мы говорим не просто о чудесах протокола TCP/IP или вездесущих точках доступа Wi-Fi, хотя это все тоже важно. Нет, мы говорим о большой инфраструктуре: огромных подводных кабелях, обширных дата-центрах со всем их излишеством энергосистем и о гигантских, лабиринтоподобных сетях, непосредственно подключающих миллиарды людей к Интернету.

                  А вот что, вероятно, еще важнее: поскольку мы все больше полагаемся на повсеместную связь с Интернетом, число подключенных устройств все растет, а наша жажда трафика не знает границ. Как мы обеспечиваем работу Интернета? Как Verizon и Virgin (крупнейшие интернет-провайдеры в США, — прим. Newочём) удается стабильно передавать вам в дом сто миллионов байтов данных каждую секунду, круглые сутки, каждый день?

                  Что ж, прочитав следующие семь тысяч слов, вы об этом узнаете.
                  Читать дальше →
                • Дайджест свежих материалов из мира фронтенда за последнюю неделю №255 (20 — 26 марта 2017)

                    Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

                    Читать дальше →
                    • +29
                    • 17,7k
                    • 6
                  • Теория близости: главное правило дизайна, которое помогает перейти от субъективных ощущений к конкретике

                      Впервые о теории близости я прочитал в 2007 году. Она была сформулирована так: «объекты, расположенные близко друг к другу, воспринимаются связанно». Тогда я подумал: «спасибо, Кэп! Я как-то и сам догадался, что букву “М” нужно вешать ближе к мужскому туалету, а не к женскому». Тогда я не осознал, что это одно из главных правил дизайна, которое помогает подбирать расстояния между элементами, размеры полей, расположение кнопок, размер логотипов и многое другое. А главное, теория позволяет быстро понять, хороший перед вами дизайн или нет, даже если вы не дизайнер.
                      image
                      Читать дальше →
                    • Учимся мыслить в REM. Разговор об очевидном и о производительности труда в небольшой веб-студии

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

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