es6

Как меня задолбало противопоставление хренова const чертову let

Перевод статьи A f*cking rant about f*cking const vs f*cking let с сайта https://jamie.build/ для css-live.ru, автор — Джеймс Кайл

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

Но вы все изрядно перебираете с const в своем JavaScript-коде, и меня это хоть самую чуточку, но бесит.

1. const ни хрена не работает, и мы все это знаем

Для начала давайте признаем, что толку от const ноль целых хрен десятых, и смысл ему мы просто выдумываем…

const ЭТО_НЕ_МЕНЯЕТСЯ = { верно: "?" }
ЭТО_НЕ_МЕНЯЕТСЯ.верно = "а вот фиг";
ЭТО_НЕ_МЕНЯЕТСЯ.нафиг = "живите теперь с этим";

Как рисование на чистом CSS помогло мне понять React-компоненты

Перевод статьи How Pure CSS Images Helped Me Understand React Components с сайта medium.com для CSS-live.ru, автор — Майкл Манджаларди

1-mJsGnpEIAfmphAuo130_Zw

В начале 2016-го я так устал от попыток выучить React, что едва не бросил разработку. Я стал жертвой синдрома самозванца. Теперь я работаю React-разработчиком на полную ставку и успел написать книгу «Изучение React.js для визуалов»

Как же я преодолел синдром самозванца и наконец освоил React? Причин несколько, но важнее всего оказалось то, что я научился делать рисунки на чистом CSS.

ES6: улучшения объекта Number изнутри

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

Привет! Рад, что вы подоспели вовремя для ES6 — «Снова в школу» — изнутри. Не слышали об этом? Тогда загляните в краткую историю инструментария ES6. Затем изучите деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, улучшения в литералах объекта, новый «сахарок» — классы поверх прототипов, let, const и «Временную мёртвую зону», а также итераторы, генераторы, символы,  объекты Map, WeakMaps, Sets и WeakSets,  прокси, ловушки прокси, ещё о ловушках и отражение. Ну а сегодня поговорим об улучшениях объекта Number.

ES6: отражение изнутри

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

О, привет, я просто готовился и не заметил вас! Встречайте очередную часть ES6 — «Уфф, наконец-то мы прошли ловушки» — изнутри. Не слышали об этом? Тогда загляните в краткую историю инструментария ES6. Затем изучите деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, улучшения в литералах объекта, новый «сахарок» — классы поверх прототипов, let, const и «Временную мёртвую зону», а также итераторы, генераторы, символы,  объекты Map, WeakMaps, Sets и WeakSets,  прокси, ловушки прокси, и ещё о ловушках. Ну а сегодня поговорим об API встроенного объекта Reflect.

ES6: ещё о ловушках прокси изнутри

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

Привет! Это  «ES6 — Ловушки? Снова? — изнутри». Интересуетесь и другими вкусняшками ES6? Тогда загляните в краткую историю инструментария ES6. Затем изучите деструктирование,литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, улучшения в литералах объекта, новый «сахарок» — классы поверх прототипов, let, const и«Временную мёртвую зону», а также итераторы, генераторы, символы и объекты Map, WeakMaps, Sets и WeakSets,  прокси и ловушки прокси. Ну а сегодня поговорим об остальных ловушках прокси в ES6.

ES6: ловушки прокси изнутри

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

Встречайте «ES6 — неужели снова! — изнутри». Интересуетесь и другими вкусняшками ES6? Тогда загляните в краткую историю инструментария ES6. Затем изучите деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, улучшения в литералах объекта, новый «сахарок» — классы поверх прототипов, let, const и «Временную мёртвую зону», а также итераторы, генераторы, символы и объекты Map, WeakMaps, Sets и WeakSets и прокси. Ну а сегодня поговорим о ловушках прокси в ES6.

ES6: прокси изнутри

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

Ура, милости просим. Это «ES6 — Элейн, тебе нужно родить! — изнутри». Что? Никогда о нём не слыхали? Тогда начните с краткой историей инструментария ES6. Затем изучите деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, улучшения в литералах объекта, новый «сахарок» — классы поверх прототипов, let, const и «Временную мёртвую зону», а также итераторы, генераторы, символы и объекты Map, WeakMaps, Sets, и WeakSets. Ну а сегодня поговорим о прокси в ES6.

Создание системы SVG-иконок с помощью React

Перевод статьи Creating an SVG Icon System with React с сайта css-tricks.com для css-live.ru. Автор — Сара Дрэснер.

Недавно я прошла обучение ReactJS у Майкла Джексона и Райана Флоренса. И мне очень понравилось, частично потому, что я нашла ответы на множество вопросов про SVG и React. В том, что касается работы с Реактом и SVG, есть много мелочей, которые еще не совсем поддерживаются. Одной из главных загадок для меня был элемент <use>, поскольку большинство систем SVG-иконок строятся именно на нём.

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

На освоение React мне потребовалась всего неделя, а чем вы хуже?

Перевод статьи I Learned How to be Productive in React in a Week and You Can, Too с сайта css-tricks.com для css-live.ru. Автор — Сара Дрэснер.

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

ES6: объекты WeakMap, Set и WeakSet изнутри

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

Встречайте очередную часть «ES6 — это уже невыносимо — изнутри». Вы здесь впервые? Тогда начните с краткой историей инструментария ES6. Затем изучите деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, улучшения в литералах объекта, новый «сахарок» — классы поверх прототипов, let, const и «Временную мёртвую зону», а такжеитераторы игенераторы и символы и объекты Map. Ну а этим утром мы обсудим ещё три структуры данных для коллекций, новинки в ES6: объекты WeakMap, Set, и WeakSet.

ES6: Методы объекта Map изнутри

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

Привет, это «ES6 — ну сколько можно уже — изнутри». Вы здесь впервые? Тогда начните с краткой истории инструментария ES6. Затем изучите деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, улучшения в литералах объекта, новый «сахарок» — классы поверх прототипов, let, const и «Временную мёртвую зону», а также итераторы и генераторы и символы. Ну а сегодня поговорим про новую структуру данных для коллекций в ES6, новой фичи в ES6 — я говорю про объект Map.

ES6: символы изнутри

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

Приветствую! Милости просим в «ES6 — надо же, еще один выпуск — изнутри». Если не представляете, как тут очутились или вообще что такое ES6, рекомендую ознакомиться с краткой историей инструментария ES6. Затем изучить деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, улучшения в литералах объекта, новый «сахарок» — классы поверх прототипов, let, const и «Временную мёртвую зону», а также итераторы и генераторы. Ну а сегодня поговорим о символах.

ES6: генераторы изнутри

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

Это «ES6 изнутри», самая продолжительная серия статей в истории Pony Foo! ES5 уже надоел? Тогда приветствую! Для начала давайте поговорим про деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, улучшения в литералах объекта, новый «сахарок» — классы поверх прототипов, let, const и «Временную мёртвую зону», а также итераторы.

Как и в прошлых статьях, рекомендую вам установить Babel и повторять за мной, копируя примеры с помощью интерактивной оболочки REPL, либо командной строки babel-node и файла. Это поможет гораздо лучше усвоить идеи, обсуждаемые в серии. Если вы не из тех, кто любит устанавливать что-либо на свой компьютер, то вам есть смысл залезть на CodePen и кликнуть иконку с шестерёнкой для JavaScript — у него есть препроцессор Babel, который с лёгкостью позволяет опробовать ES6. Ещё одна довольно полезная альтернатива, это использовать онлайновый REPL для Babel — он показывает скомпилированный ES5-код справа от ES6-кода, чтобы быстро сравнить.

Пока мы не начали, позвольте беззастенчиво попросить вашей поддержки, если вы наслаждаетесь моей серией «ES6 изнутри». Ваши взносы пойдут на хостинг сайту, мне на еду, на то, чтоб я не отставал от графика, и на то, чтобы Pony Foo оставался поистине источником джаваскриптовых вкусняшек.

Спасибо, что выслушали, а теперь перейдём к генераторам! Если вы ещё не прочитали вчерашнюю статью про итераторы, то следует сделать это, поскольку сегодняшняя статья во многом на нее опирается.

ES6: Итераторы изнутри

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

Вот и ещё один выпуск «ES6 изнутри». Вы здесь впервые? Приветствую! Мы уже обсудили  деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, улучшения в литералах объекта, новый «сахарок» — классы поверх прототипов, и статью «let, const и “Временная мёртвая зона”». Сегодняшняя тема: итераторы.

Как и в прошлых статьях, рекомендую вам установить Babel и повторять за мной, копируя примеры с помощью интерактивной оболочки REPL, либо командной строки babel-node и файла. Это поможет гораздо лучше усвоить идеи, обсуждаемые в серии. Если вы не из тех, кто любит устанавливать что-либо на свой компьютер, то вам есть смысл залезть на CodePen и кликнуть иконку с шестерёнкой для JavaScript — у него есть препроцессор Babel, который с лёгкостью позволяет опробовать ES6. Ещё одна довольно полезная альтернатива, это использовать онлайновый REPL для Babel — он показывает скомпилированный ES5-код справа от ES6-кода, чтобы быстро сравнить.

Пока мы не начали, позвольте беззастенчиво попросить вашей поддержки, если вы наслаждаетесь моей серией «ES6 изнутри». Ваши взносы пойдут на хостинг сайту, мне на еду, на то, чтоб я не отставал от графика, и на то, чтобы Pony Foo оставался поистине источником джаваскриптовых вкусняшек.

Спасибо, что выслушали, но, пожалуй, начнём?

ES6: Let, Const и «Временная мёртвая зона» (ВМЗ) изнутри

Перевод статьи ES6 Let, Const and the “Temporal Dead Zone” (TDZ) in Depth  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

Вот и ещё один выпуск «ES6 изнутри». Вы здесь впервые? Приветствую! Мы уже обсудили такие фичи, как деструктирование, литералы шаблона, стрелочные функции, оператор расширения и оставшиеся параметры, литерал объекта, и еще одну важную штуку — что такое классы в ES6. Сегодня мы встретимся с набором простых фич языка, которые появились в ES6 — let, const и нечто с жутковатым названием «Временная мертвая зона»

Как и в прошлых статьях, рекомендую вам установить Babel и повторять за мной, копируя примеры с помощью интерактивной оболочки REPL, либо командной строки babel-node и файла. Это поможет гораздо лучше усвоить идеи, обсуждаемые в серии. Если вы не из тех, кто любит устанавливать что-либо на свой компьютер, то вам есть смысл залезть на CodePen и кликнуть иконку с шестерёнкой для JavaScript — у него есть препроцессор Babel, который с лёгкостью позволяет опробовать ES6. Ещё одна довольно полезная альтернатива, это использовать онлайновый REPL для Babel — он показывает скомпилированный ES5-код справа от ES6-кода, чтобы быстро сравнить.

Начнём?