JavaScript

Как рисование на чистом 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.

(далее…)

Доступ к CSS-переменным и их изменение с помощью Javascript

И преимущество перед SASS-переменными

Перевод статьи Accessing and modifying CSS variables with Javascript с сайта hackernoon.com для CSS-live.ru, автор — ReasonCode

SASS-переменные с нами уже давно. Они позволяют задать переменную один раз во время выполнения (runtime) и использовать ее в нескольких местах. Уровень крутости — 3. Хотите уровень 6? Читайте дальше.

Взаимодействие с CSS-переменными при помощи JS после выполнения (post-runtime)

Создадим простую форму, которая будет использовать JS для динамического обновления CSS-переменных (в нашем случае, для изменения свойств color и margin у точки).

(далее…)

Почему NaN это не «Not a Number»?

Перевод статьи NaN is not a not a number с сайта https://zerkmsit.wordpress.com/, опубликовано на css-live.ru с разрешения автора — Ivan Kurnosov, переводчик — Друганов Яков (k0d)

При разработке ПО очень важно быть точным при использовании терминов, ведь если все разработчики понимают термины одинаково, то эффективность коммуникации между ними будет высокой. Это как быть с человеком «на одной волне» и «понимать с полуслова».

Один из таких терминов, который часто используется не к месту и без понимания — NaN (Not a Number). Дословно — «нечисло».

(далее…)

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.

(далее…)

Любовное письмо к jQuery

Перевод статьи A love letter to jQuery с сайта madebymike.com.au, опубликовано на css-live.ru с разрешения автора — Майка Ритмюллера.

jQuery, любимая! Мы провели 10 лет вместе, а по меркам JavaScript-библиотеки это больше, чем все 50. Пусть сейчас мы и видимся реже, чем некогда, но ты нужна мне ничуть не меньше, чем в дни нашей первой встречи.

Никогда не забуду нашей первой совместной функции:

	$(document).ready(function(){
	  alert(‘страница загрузилась’);
	});

Эх! Надеюсь, ты простишь, что я тогда вызвал у тебя это тревожное всплывающее окошко. Так уж было заведено в ту пору, а я хотел лишь убедиться, что ты работаешь: конечно же, ты работала, сейчас бы я ни на миг не усомнился в этом. Теперь нам не так часто бывает нужен $(document).ready(), но я помню те наши замечательные деньки. А также помню, как мучительно бывало, когда я пытался делать это без тебя!

(далее…)

Если вы знаете Sass — вы знаете и ES2015

Перевод статьи If You Know Sass, You Know ES2015 с сайта una.im, опубликовано на css-live.ru с разрешения автора — Юны Кравец.

Если вы знаете Sass — вы знаете и ES2015!… ну не то чтобы совсем, но на удивление есть много общего! Изучая последнюю спецификацию ECMAScript, ES2015 (ранее известную как ES6), я наткнулась на несколько функций, котрые тут же узнала по Sass. И я продолжана находить всё больше и больше общего. Множество идей здорово переносятся из разработки на Sass, и если вы хоть немного с ней знакомы, то, возможно, вы намного ближе к пониманию современного JavaScript, чем думаете, и наоборот.

sass-js

(далее…)

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 и «Временную мёртвую зону», а также итераторы и генераторы. Ну а сегодня поговорим о символах.

(далее…)