CSS-live.ru

JavaScript

Обзор ES6 в 350 пунктах

13

Перевод статьи ES6 Overview in 350 Bullet Points  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

Моя серия статей «ES6 изнутри» состоит из 24 статей, охватывающих большинство изменений синтаксиса и возможностей, появившихся в ES6. Цель этой статьи — резюмировать это всё, что даст вам практическое понимание большей части ES6, чтобы можно было быстро начать работать с ним. Я также привёл ссылки на все статьи «ES6 изнутри», чтобы вы легко могли перейти к нужной вам теме.

Я слышал, что вы любите перечисления по пунктам, так что я запилил статью с сотнями этих мерзавцев. Для начала, вот вам оглавление со всеми рассматриваемыми темами. В нем перечисляются пункты — очевидно. Но всё-таки, если хотите, чтобы эти идеи проникли в ваш мозг, вам придётся уделить гораздо больше времени на изучение предмета, проштудировав углубленные серии и экспериментируя со своим собственным кодом ES6.

Web Animations API: полезные ссылки

0

Перевод статьи Web Animations API Reference с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

В своей серии статей я изучал Web Animations API, чтобы поделиться тем, что я узнал об этом новом инструменте. Полагаю, что пришло время собрать в одном месте все обнаруженные мной ресурсы. Надеюсь, этот раздел будет часто обновляться по мере того, как люди начнут использовать и обсуждать Animations API.

Руководство по Web Animations API: заключение

0

Перевод статьи Web Animations API Tutorial Conclusion с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это заключение серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Мы неплохо поработали и, надеюсь, выяснили, что из себя представляет Web Animations API. В завершении этой серии давайте резюмируем, что мы обсудили ранее и рассмотрим, что ещё не реализовано.

Руководство по Web Animations API — Часть 5: приятная траектория движения

1

Перевод статьи Web Animations API Tutorial Part 5: The Loveable Motion Path с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это пятая часть из серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson. Раньше на моем блоге на Codepen вышла более краткая версия этой статьи, почти сразу после того, как Хром объявил о поддержке Motion Path за флагом.

Наконец-то! Анимация движения по контуру… теперь возможна не только в SVG.

Руководство по Web Animations API — Часть 4: групповые и последовательные эффекты

0

Перевод статьи Web Animations API Tutorial Part 4: GroupEffects & SequenceEffects с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это четвёртая часть из серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Давайте продолжим изучать множественные анимации с Web Animations API, и рассмотрим несколько вещей, которые сегодня доступны в полифилле, предназначенные для группировки и последовательности анимаций.

Руководство по Web Animations API — часть 3: множественные анимации

0

Перевод статьи Web Animations API Tutorial Part 3: Multiple Animations с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это третья часть из серии учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

После обсуждения AnimationPlayer и шкалы времени в Web Animations API давайте поговорим о проигрывании сразу нескольких анимаций.

Руководство по Web Animations API — Часть 2: Объект AnimationPlayer и управление временной шкалой

8

Перевод статьи Web Animations API Tutorial Part 2: The AnimationPlayer & Timeline Controls с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это вторая часть из серии учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Теперь, когда мы знаем, как с помощью Web Animations API создать базовую анимацию, пришло время поговорить о состояниях, управлении, обратных вызовах и шкале времени.

Руководство по Web Animations API — часть 1: создание базовой анимации

5

Перевод статьи Web Animations API Tutorial Part 1: Creating a Basic Animation с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это первая часть из серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Мы окинули беглым взглядом Web Animations API, но так и не добрались до какой-либо конкретики… так что давайте приступим к этому прямо сейчас.

Поговорим об Web Animations API

0

Перевод статьи Let’s talk about the Web Animations API с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это введение в серию учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Около года назад Google анонсировал «Материальный дизайн» с реализацией для веба на базе Полимера…, используя полифилл для предстоящего стандарта Web Animations API.

ES6 изнутри: стрелочные функции

2

Перевод статьи ES6 In Depth: Arrow functions  с сайта hacks.mozilla.org, опубликовано на css-live.ru с разрешения автора — Джейсона Орендорфа.

ES6 изнутри — серия статей про новые возможности, добавленные в язык программирования JavaScript в 6-е издание стандарта ECMAScript, сокращенно ES6.

Стрелки существовали в JavaScript с самого начала. В первых руководствах по JavaScript советовали оборачивать встроенные скрипты в HTML-комментарии. Это помешало бы браузерам без поддержки JS ошибочно отобразить ваш код JS в виде текста.

Как стать выдающимся фронтенд-разработчиком

9

Перевод статьи How to Become a Great Front-End Engineer с сайта philipwalton.com, c разрешения автора— Филипа Уолтона.

Недавно я получил электронное письмо от читателя моего блога, которое почему-то заставило меня всерьез задуматься. Вот что оно гласило:

Привет, Филип, можно спросить, как вы стали выдающимся фронтенд-разработчиком?

Что-нибудь посоветуете?

10 способов уменьшить количество перекомпоновок и повысить производительность

4

Перевод статьи 10 Ways to Minimize Reflows and Improve Performance с сайта www.sitepoint.com, автор — Крейг Баклер.

Хотя веб-страницы достигают 2МБ, производительность остается острой темой. Чем шустрее ваше приложение, тем лучше пользовательский опыт и выше конверсия.

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

Создание аудиоплеера при помощи HTML5. Часть 3: микроданные и внешний вид

8

Перевод статьи Making An Audio Player With HTML5, Part 3: Microdata and Skinning с сайта demosthenes.info, c разрешения автора — Дадли Стори.

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

Создание аудиоплеера при помощи HTML5. Часть 2: прототипирование

2

Перевод статьи Making An Audio Player With HTML5, Part 2: Prototyping с сайта demosthenes.info, c разрешения автора — Дадли Стори.

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

Как использовать ECMAScript 6 сегодня?

5

Присказка

Эта статья о новой волне JavaScript, о том, как будут писаться проекты в ближайшие год-полтора в ES5-окружениях.

Сказка. Что нас ждет?

ECMAScript 6 — грядущая версия стандарта, формальное утверждение которого намечено на июнь этого года. Данный стандарт несет в себе существенные изменения:

  • новые глобальные объекты: Map, Set, Symbol и т.д.
  • новые синтаксические конструкции: module, class, const и т.д.
  • новые концепции, которые реализованы преимущественно посредством п.2: модули (импорт/экспорт), итераторы, генераторы и т.д.
  • расширение существующих глобальных объектов и прототипов этих объектов: Array.from(), Array.prototype.find() и т.д.

Описание всех нововведений лежит за рамками данной статьи, но прежде чем перейти к основной ее части, я размещу пару ссылок пройдя по которым вы сможете ознакомится с ними более детально: Поддержка ECMAScript 6 в Mozilla, ECMAScript 6 Features.