• Стилизация старого доброго элемента button

    • Translation
    Кнопка — это один из тех элементов, которые чаще всего используются на веб-страницах. Тег <button></button> может быть применён для запуска некоего процесса вроде вывода данных, открытия модального окна, отправки формы и так далее. В материале, перевод которого мы публикуем, речь пойдёт о тонкостях стилизации элемента button и о том, как оформлять кнопки с учётом того, чтобы они хорошо работали бы в любых браузерах. Кроме того, тут будет рассмотрено большинство часто используемых стилей кнопок. Поговорим мы здесь и о некоторых сложностях, которые возникают при работе с кнопками.


    Читать дальше →
  • 13 инструментов для обработки текста в командной оболочке

    • Translation
    • Tutorial
    Здесь представлен фрагмент будущей книги «Основные инструменты и практики для начинающего разработчика программного обеспечения» Бальтазара Рубероля и Этьена Броду. Книга должна помочь образованию подрастающего поколения разработчиков. Она охватит такие темы, как освоение консоли, настройка и эффективная работа в командной оболочке, управление версиями кода с помощью git, основы SQL, инструменты вроде Make, jq и регулярные выражения, основы сетевого взаимодействия, а также лучшие практики разработки программного обеспечения и совместной работы. В настоящее время авторы упорно работают над этим проектом и приглашают всех поучаствовать в списке рассылки.

    Содержание


    Читать дальше →
  • Интернационализация: как сделать веб доступным для всех

      Ecma International, Technical Committee 39 или по-простому TC39 — это группа JavaScript-разработчиков, создателей реализаций технологий, академиков и других заинтересованных сторон, которые вместе с сообществом поддерживают и развивают JavaScript как платформу.

      Участники TC39 обычно рассказывают что-то интересное, пользуясь своим глубоким пониманием JavaScript. Но кое-кому кажется, что они слишком далеко ушли от проблем простых разработчиков. Где разработчик языка, и где человек, который каждый день на практике пишет фронтенды?

      Давайте познакомимся с докладом, который сочетает и глубину понимания, и высокую практическую применимость. Встречайте новый рассказ Romulo Cintra о проблемах интернационализации, которые будут решены новым API, которое вскоре появится в JavaScript.



      Romulo Cintra — делегат TC39, работает в разработке и архитектуре уже более 10 лет, специализируется на вебе, мобильной разработке и облаках. В этом докладе из первых рук сопредседателя MessageFormat Working Group вы узнаете, какие варианты решения существующих проблем есть уже сейчас, и в каком виде их собираются решать посредством нового API в самом JavaScript.

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

      Далее повествование от лица спикера.
      Читать дальше →
      • +27
      • 3.5k
      • 1
    • Рекомендации по написанию чистого кода на JavaScript

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



      Исходя из этих идей, чистый код можно определить как код, написанный так, что он сам себя объясняет. Этот код без труда смогут понять люди, его легко будет модифицировать или расширять.
      Читать дальше →
    • Сказ о том, как я автоматизировал квартиру с помощью Node-RED. Часть I

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


        Читать дальше →
      • Работаем с двумерной графикой в JavaScript

        • Translation
        • Tutorial
        Доброго времени суток, друзья!

        Создание реалистичной анимации физических процессов может казаться сложной задачей, но это не так. Используемые для этого алгоритмы могут быть очень простыми и при этом точно воспроизводить такие физические явления, как движение, ускорение и гравитация (притяжение).

        Хотите узнать, как эти алгоритмы реализуются в JS?



        Примеры можно посмотреть здесь.

        Исходный код находится здесь.
        Читать дальше →
        • +18
        • 8.6k
        • 8
      • Оптимизация времени сборки проекта

        • Translation
        Там, где я работаю (в стартапе Spot.IM, размер которого находится где-то между малым и средним), Webpack используется для сборки различных проектов. После 4 лет работы над нашим основным продуктом, когда в его код внесло вклад столько народа, что и не сосчитать, время его первоначальной сборки достигло непомерных 90 секунд, а время пересборки — 14.

        Речь идёт о 14 секундах, которые нужно ждать после каждого нажатия на кнопку «Сохранить».

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



        В этом материале я хочу рассказать о некоторых простых изменениях, внеся которые в проект можно значительно улучшить время его сборки. Обратите внимание на то, что если вы используете CreateReactApp (или какой-нибудь другой модный генератор приложений), то эта статья, возможно, не окажется для вас особенно полезной. А вот если ничем таким вы не пользуетесь — тогда то, о чём здесь пойдёт речь, может вам очень пригодиться.
        Читать дальше →
        • +33
        • 5.9k
        • 1
      • Выбираем проводные внутриканальные наушники бюджетного сегмента

        Поездка на велосипеде в выходной день или долгая дорога в метро по будням? Тренировка перед важными соревнованиями или спокойный вечер в постели? Может быть, утренняя пробежка или бессонная ночь? В современном мире многие люди не могут представить себе свой досуг без верных друзей – наушников.
        Читать дальше →
      • Модальные окна, которые мы заслужили

        Начнем


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

        Многие зададут вопрос: «Почему не использовать готовые решения?». Проблема в том, что этот функционал либо вообще не реализован, либо сделан очень плохо. Можно использовать самое простое и плохое решение:
        Читать дальше →
      • Как написать сапера на Phaser и выполнить тестовое задание HTML5 разработчика

        • Tutorial
        Добрый день, уважаемые коллеги!

        Меня зовут Александр, я разработчик HTML5 игр.

        В одной из компаний, куда я отправлял свое резюме, мне предложили выполнить тестовое задание. Я согласился и, спустя 1 день, отправил в качестве результата разработанную по ТЗ HTML5 игру.



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

        Данная статья даст представление об объеме работ, достаточном для успешного выполнения среднестатистического тестового задания на позицию HTML5 разработчика. Материал также может быть интересен всем, кто хочет познакомиться с фреймворком Phaser. А если вы уже работаете с Phaser и пишете на JS — посмотрите, как разработать проект на TypeScript.

        Итак, под катом много кода на TypeScript!
        Читать дальше →
      • Обзор инструментов для безопасности GitHub репозиториев

        • Translation
        image


        Введение


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

        В случае, если вы создаете свой собственный репозиторий GitHub или часто контрибьютите в репозиторий, вам необходимо знать, содержит ли ваш код какие-либо уязвимости. Уязвимости репозиториев в прошлом вызывали проблемы с безопасностью. Это было подчеркнуто тем фактом, что две из самых больших утечек данных за последнее время — Equifax и Heartbleed SSL Exploit — начались с уязвимостей с соответствующими компонентами с открытым кодом, которые могут быть использованы в будущем.

        В этом посте мы рассмотрим и проанализируем четыре отдельных инструмента, которые можно использовать для выявления уязвимостей в вашем репозитории GitHub. Каждый из этих четырех инструментов имеет свои суперспособности, но у каждого есть и слабые стороны. Эта статья поможет вам выбрать правильный инструмент для проекта с открытым исходным кодом.
        Читать дальше →
      • Функциональное программирование с точки зрения EcmaScript. Композиция, каррирование, частичное применение

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

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

          Итак, начнём!

          Предположим, перед нами стоит задача: создать набор инструментов для работы с палиндромами.
          ПАЛИНДРО́М
          Мужской родСПЕЦИАЛЬНОЕ
          Слово или фраза, которые одинаково читаются слева направо и справа налево.
          «П. «Я иду с мечем судия»»
          Одна из возможных реализаций данной задачи могла бы выглядеть так:

          function getPalindrom (str) {
            const regexp = /[\.,\/#!$%\^&\*;:{}=\-_`~()?\s]/g;
            str = str.replace(regexp, '').toLowerCase().split('').reverse().join('');
            //далее какой-то аякс запрос в словарь или к логике, которая генерирует фразы по переданным буквам
          
            return str;
          }
          
          function isPalindrom (str) {
            const regexp = /[\.,\/#!$%\^&\*;:{}=\-_`~()?\s]/g;
            str = str.replace(regexp, '').toLowerCase();
            return str === str.split('').reverse().join('');
          }
          
          Читать дальше →
        • Современная загрузка скриптов

          • Translation
          • Tutorial
          Передать нужный код для каждого браузера – непростая задача.

          В этой статье рассмотрим несколько вариантов, как эту задачу можно решить.



          Передача современного кода современным браузером может очень сильно повысить производительность. Ваши JavaScript-пакеты смогут содержать более компактный или оптимизированный современный синтаксис и поддерживать старые браузеры.

          Среди инструментов для разработчиков доминирует паттерн module/nomodule декларативной загрузки современного или legacy-кода, который предоставляет браузерам источники и позволяет решать, какие из них использовать:

          <script type="module" src="/modern.js"></script>  
          <script nomodule src="/legacy.js"></script> 

          К сожалению, не всё так просто. Показанный выше подход на основе HTML инициирует перезагрузку скриптов в Edge и Safari.
          Читать дальше →
          • +19
          • 8.9k
          • 5
        • Как заставить ваши веб-приложения работать в автономном режиме

          • Translation
          Сила JavaScript и браузерного API

          Мир становится все более взаимосвязанным — число людей, имеющих доступ к Интернету, выросло до 4,5 миллиардов.

          image

          Но в этих данных не отражено количество людей, у которых медленное или неисправное интернет соединение. Даже в Соединенных Штатах 4,9 миллиона домов не могут получить проводной доступ к интернету скорость которого будет более 3 мегабит в секунду.

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

          • Плохое покрытие от провайдера.
          • Экстремальные погодные условия.
          • Перебои питания.
          • Пользователи, попадающие в «мертвые зоны», такие как здания, которые блокируют их сетевые подключения.
          • Путешествие на поезде и проезд туннелей.
          • Соединения, которые управляются третьей стороной и ограничены во времени.
          • Культурные практики, которые требуют ограниченного или отсутствия доступа в Интернет в определенное время или дни.

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

          • Translation
          Цветовой контраст является важным аспектом доступности в дизайне продукта. Хорошая контрастность облегчает использование продуктов людьми с нарушениями зрения и помогает в несовершенных условиях, таких как слабое освещение или старые экраны. Имея это в виду, мы недавно обновили цвета в наших пользовательских интерфейсах, чтобы сделать их более доступными. В переводе этой статьи сотрудники Stripe рассказывают о том, как они решали эту проблему, чем руководствовались и к чему в итоге пришли.


          Читать дальше →
        • Ускорение instagram.com. Часть 3

          • Translation
          Сегодня публикуем перевод третьей части серии материалов об ускорении instagram.com. В первой части мы говорили о предварительной загрузке данных, во второй — об отправке данных клиенту по инициативе сервера. Здесь речь пойдёт о кэшировании.


          Читать дальше →
        • React + IndexDb + автообновление = почти AsyncRedux

          • Tutorial
          В данной заметке по шагам расскажу как приготовить IndexDB (база данных, которая встроена в любой современный браузер) для использования в проектах, написанных на ReactJS. В результате Вы сможете использовать данные из IndexDB так же удобно, как если бы они находились в Redux Store вашего приложения.

          IndexDB — это документоориентированная СУБД, удобное средство для временного хранения относительно небольшого объёма (единицы и десятки мегабайт) структуированных данных на стороне браузера. К стандартной задаче, для которых мне приходится использовать IndexDB относится кэширование данных бизнес-справочников на стороне клиента (названия стран, городов, валют по коду и прочее). Скопировав их на сторону клиента потом можно лишь изредка загружать с сервера обновления этих справочников (либо целиком — они же небольшие) и не делать это при каждом открытии окна браузера.
          Читать дальше →
        • Занимательная практика для разработчика

          • Translation
          Человек остается начинающим в течение 1000 дней. Он находит истину после 10000 дней практики.

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

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

          (предыдущие списки заданий для тренировки: 1) 8 учебных проектов 2) Еще список проектов, на чем потренироваться)

          Проект 1: Pacman


          image

          Создайте свою версию Pacman. Это отличный способ получить представление о том, как разрабатываются игры, понять основы. Используйте JavaScript-фреймворк, React или Vue.

          Вы узнаете:

          • Как передвигаются элементы
          • Как определить какие клавиши нажимать
          • Как определить момент столкновения
          • Вы можете не останавливаться на достигнутом и добавить управление движением призраков

          Пример этого проекта вы найдете в репозитории GitHub

          «Мастер совершает больше ошибок, чем новичок — попыток»
          Читать дальше →
          • +16
          • 16.2k
          • 1
        • Описание подхода к организации и тестированию кода с использованием Redux Thunk

          Всем привет!


          В этой заметке я хотел бы поделиться своим подходом к организации и тестированию кода с использованием Redux Thunk в проекте на React.


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

          Читать дальше →
          • +10
          • 2.9k
          • 2