Максим Усачев: статьи и переводы

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

Ежедневная эпопея статей «ES6 изнутри» продолжается. Сегодня мы обсудим стрелочные функции. В прошлых статьях мы познакомились с деструктированием и литералами шаблона. Я стараюсь разобрать всё, что относится к набору фич ES6, и наконец добраться до ES7. Также я заметил, что, когда я пишу про эти фичи, они навсегда врезаются мне в память.

Раз вы читаете эти статьи, предлагаю установить Babel и babel-node, и повторять за мной, копируя отдельные примеры в файл. Можете затем запустить их при помощи babel-node yourfile в терминале. Самостоятельный запуск этих примеров, и, возможно, небольшая их корректировочка помогут лучше усвоить эти новые фичи — даже если вы просто добавите оператор console.log, чтобы разобраться в происходящем.

Итак, встречайте наших сегодняшних гостей.

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

Вчера мы рассмотрели «Деструктурирование в JavaScript (ES6) изнутри», и некоторые наиболее распространённые примеры его использования. Сегодня мы познакомимся с литералами шаблона. Что они из себя представляют, как их использовать и для чего.

Литералы шаблона — новая возможность в ES6 для более удобной работы со строками и шаблонами строки. Оберните текст в `обратные кавычки` и получите описанные ниже возможности.

• В них можно интерполировать переменные
• На самом деле можно интерполировать строки с любыми выражениями, не только переменные
• Они могут быть многострочными. Наконец-то!
• Можно создавать необработанные шаблоны, которые не интерпретируют обратные кавычки

Перевод статьи A Brief History of ES6 Tooling  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

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

Перевод статьи Do We Actually Need Specificity In CSS? с сайта philipwalton.com, c разрешения автора — Филипа Уолтона.

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

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

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

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

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

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

Перевод статьи FLEXBOX MYTH BUSTING  с сайта jonyablonski.com, опубликовано на css-live.ru с разрешения автора — Джона Яблонски.

Если вы периодически пишете CSS, то скорее всего слышали про «flexbox» (Модуль раскладки гибких боксов). Возможно, вы даже слышали, что flexbox способен решить множество проблем, которые, как считается, трудно, а то и невозможно решить без помощи Javascript. Вероятно, вы даже слышали или сами считаете, будто использовать flexbox пока рановато. В этой статье я развею множество «мифов», которые окружают эту мощную модель раскладки.

Перевод статьи Easy content organisation with HTML5  с сайта paciellogroup.com, опубликовано на css-live.ru с разрешения автора — Стива Фолкнера.

Чаще всего дизайнеры и веб-разработчики делят страницы на крупные области контента (будем называть их регионами). Поиск по картинкам на запрос «типовая структура страницы в HTML5» выдает множество примеров схематических изображений страниц, на которых обозначены похожие регионы:

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

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

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

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

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

Это рекламная статья. Ради поддержки сайта, чтобы мы могли публиковать больше переводов и для того, чтобы делать лучше и полезнее конференции в целом (прим. редакции css-live.ru)

С 16 по 18 октября в Санкт-Петербурге пройдет второй Science HackDay, междисциплинарный хакатон, направленный на создание технологических проектов и популяризацию науки.

Science Hack Day — это серия мероприятий, которые регулярно проходят во всем мире: Японии, США, Ирландии, Мексике, Бразилии, Кении, ЮАР, Германии, Канаде и других странах. Цель каждого такого мероприятия — объединить специалистов из разных областей: программистов, ученых, инженеров, дизайнеров для совместного создания проектов, решающих актуальные научные проблемы. Science HackDay в России проводится в формате хакатона — все мероприятие длится 48 часов, от объявления идей и формирования команд до презентации разработок жюри.

Перевод статьи Use Cases For Css Calc с сайта vincentp.me, опубликовано на css-live.ru с разрешения автора — Винсента Пикеринга

Цитата из твиттера:

Винсент Пикеринг:
— С каждым днём нахожу всё больше применений для calc(). Он действительно полезный

Гарри Робертс:
— Напишешь о некоторых из них?

Безусловно, Гарри, вот основные вещи, для которых я применяю функцию Calc сегодня:

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

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

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

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

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

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