• Объясняем современный JavaScript динозавру

    • Перевод


    Если вы не изучали JavaScript с самого начала, то осваивать его современную версию сложно. Экосистема быстро растёт и меняется, так что трудно разобраться с проблемами, для решения которых придуманы разные инструменты. Я начал программировать в 1998-м, но начал понимать JavaScript только в 2014-м. Помню, как просматривал Browserify и смотрел на его слоган:


    Browserify позволяет делать require («модули») в браузере, объединяя все ваши зависимости


    Я не понял ни слова из предложения и стал разбираться, как это может помочь мне как разработчику.


    Цель статьи — рассказать о контексте, в котором инструменты в JavaScript развивались вплоть до 2017-го. Начнём с самого начала и будем делать сайт, как это делали бы динозавры — безо всяких инструментов, на чистом HTML и JavaScript. Постепенно станем вводить разные инструменты, поочерёдно рассматривая решаемые ими проблемы. Благодаря историческому контексту вы сможете адаптироваться к постоянно меняющемуся ландшафту JavaScript и понять его.

    Читать дальше →
  • Как работает JS: цикл событий, асинхронность и пять способов улучшения кода с помощью async / await

    • Перевод
    Часть 1: Как работает JS: обзор движка, механизмов времени выполнения, стека вызовов
    Часть 2: Как работает JS: о внутреннем устройстве V8 и оптимизации кода
    Часть 3: Как работает JS: управление памятью, четыре вида утечек памяти и борьба с ними

    Перед вами четвёртая часть серии материалов, посвящённых внутренним особенностям работы JavaScript. Эти материалы, с одной стороны, направлены на изучение базовых элементов языка и экосистемы JS, с другой, содержат рекомендации, основанные на практике разработки ПО в компании SessionStack. Конкурентоспособное JS-приложение должно быть быстрым и надёжным. Создание таких приложений — та цель, к которой, в конечном счёте, стремится любой, интересующийся механизмами JavaScript.

    image
    Читать дальше →
  • Весь веб на 60+ FPS: как новый рендерер в Firefox избавился от рывков и подтормаживаний

    • Перевод
    До релиза Firefox Quantum остаётся всё меньше времени. Он принесёт множество улучшений в производительности, в том числе сверхбыстрый движок CSS, который мы позаимствовали у Servo.

    Но есть ещё одна большая часть технологии Servo, которая пока не вошла в состав Firefox Quantum, но скоро войдёт. Это WebRender, часть проекта Quantum Render.



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

    При разработке WebRender мы поставили задачу, чтобы все приложения работали на 60 кадрах в секунду (FPS) или лучше, независимо от размера дисплея или от размера анимации. И это сработало. Страницы, которые пыхтят на 15 FPS в Chrome или нынешнем Firefox, летают на 60 FPS при запуске WebRender.

    Как WebRender делает это? Он фундаментальным образом меняет принцип работы движка рендеринга, делая его более похожим на движок 3D-игры.
    Читать дальше →
  • Иллюзия движения

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

    Введение


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

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


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



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

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

    • Tutorial


    «Галоп пикселя» — часть 1 (линк)
    «Галоп пикселя» — часть 2 (линк)
    «Галоп пикселя» — часть 3 (линк)
    «Галоп пикселя» — часть 4 (линк)

    Доброго времени суток Хабру и ценителям пиксель-арта, поклонникам квадратных точек, адептам лимитированных разрешений и цветов. Рад представить на ваш суд очередную статью из цикла «Галоп Пикселя». Не буду тратить время на оправдания моего долгого отсутствия и в виду явного присутствия перейду к сути дела. Сегодня мы продолжим изучать анимацию. На этот раз это будет анимация света и тени. Большей частью на статических объектах. Всё помнят – сначала база. Сначала фундамент. Сначала простое. Ну а сложное ввалится в ваши двери само, вслед за детишками.

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

    Цель этой статьи показать насколько силён дуэт брата и сестры, Света и Тени в движении. Мы уже видели, как они преображают сцены в статике. Но динамика нам ещё не знакома. Давайте исправим это упущение.

    Лопаты в руки.


    Лопатить пиксели
  • 11 вещей которые я узнал, читая спецификацию flexbox

    • Перевод

    Я всегда считал, что с flexbox довольно легко работать — глоток свежего воздуха после стольких лет float'ов и clearfix'ов.


    Правда недавно я обнаружил что борюсь с ним; что-то растягивалось, когда я не думал, что оно должно тянуться. Я поправил здесь, другой элемент сжался. Я починил это, что-то другое ушло за экран. Какого Джорджа Буша тут происходит?


    В конце концов, все заработало, но солнце село, а мой процесс был привычной игрой с CSS. Или… как называется та игра, где надо ударить крота, а затем другой крот выпрыгивает и надо ударить и его тоже?


    Как бы там ни было, я решил что пора вести себя как взрослый разработчик и выучить flexbox должным образом. Но вместо того, чтобы прочитать 10 очередных блог-постов, я решил отправиться прямиком к исходнику и прочитать The CSS Flexible Box Layout Module Level 1 Spec


    Вот хорошие отрывки.


    Читать дальше →
  • Дизайн таблиц

    • Перевод
    Данные бесполезны без возможности визуализировать их и взаимодействовать с ними. Многие из отраслей будущего зачастую требуют более продвинутого сбора больших данных и улучшенных интерфейсов взаимодействия с таблицами.

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

    Фиксированные заголовки


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

    image
    Читать дальше →
  • The Better Parts: доклад Дугласа Крокфорда о JavaScript и языках программирования будущего с конференции .concat() 2015

      Кто знает о JS больше, чем один из его «отцов»? На HolyJS 2017 Piter приедет легендарный Дуглас Крокфорд, создатель JSON и автор множества инструментов JavaScript. В преддверии его выступлений в Петербурге публикуем перевод его выступления на .concat() 2015: The Better Parts — о том как использовать существующие языки программирования более эффективно и каким будет язык программирования будущего. Хотя с момента выступления прошло более года, доклад коснулся ряда «вечных» вопросов программирования, которые, мы уверены, будут актуальны и через 3-5 лет.


      Читать дальше →
    • React.js на русском языке. Часть первая



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

      Для чего я это сделал? Хочется внести свой вклад в данную библиотеку и скорее всего данный перевод будет полезен, кто сильно хочет учить и развиваться в данном направлении, но имеет проблемы с английским языком.

      Оглавление:


      1 — Часть первая — Установка
      2 — Часть вторая — Внедрение JSX
      3 — Часть третья — Отрисовка элементов
      4 — Часть четвертая — Компоненты и свойства
      5 — Часть пятая — Состояние и жизненный цикл
      6 — Часть шестая — Обработка событий
      7 — Часть седьмая — Условный рендеринг
      8 — Часть восьмая — Списки и ключи
      9 — Вся документация

      Установка


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

      Знакомство с React


      Если вы хотите просто ознакомиться с библиотекой, вы можете использовать онлайн-инструмент CodePen. Попробуйте начать с легкого примера кода «Hello World». При этом, не нужно ничего устанавливать, вы можете просто модифицировать код и наблюдать, как работает программа.

      Создание одностраничного приложения


      Create React App – это лучший инструмент для создания нового одностраничного приложения.
      Читать дальше →