От автора: когда мы применяем в JavaScript условные операторы, хочется сделать код как можно чище. Вот 5 советов относительно того, как писать лучшие / более чистые условные выражения. 1. Используйте Array.includes для множественных критериев. Давайте рассмотрим приведенный ниже пример: // condition function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); } } На первый взгляд, этот ...

От автора: веб-разработчики любят хорошую святую войну, будь то над нашими любимыми фреймворками или принципами JavaScript, такими как разделение проблем. Меня всегда интересовало, как борются в CSS единицы измерения, а именно — война между пикселями и относительными единицами, такими как rems и ems. В течение многих лет большинство веб-дизайнеров и разработчиков измеряли вещи в пикселях. Их довольно легко понять — ...

Перевод статьи Building the Google Photos Web UI с сайта medium.com для CSS-live.ru, автор — Антин Харасимив Несколько лет назад мне посчастливилось стать инженером в команде Google Photos и поучаствовать в их первом запуске в 2015-м. Множество людей вложило силы в этот продукт — дизайнеры, продукт-менеджеры, исследователи и бесчисленные инженеры (в области Android, iOS, веба и серверной части), если упомянуть лишь ...

От автора: как и для чего использовать в JavaScript CSS? Те, кто знаком с веб-платформой, хорошо разбираются в ее двух дополнительных технологиях: HTML для документов и их структуры, а также JavaScript для взаимодействия и стилизации. До тех пор, пока кто-либо помнит, стилизация документов — влияющая на их внешний вид — была упрощена с помощью JavaScript свойства style, которое существует для ...

Перевод статьи An introduction to the JavaScript MutationObserver API с сайта benfrain.com, автор — Бен Фрейн. Недавно мне довелось немного поиграть с JavaScript-овым API MutationObserver и я был приятно шокирован. Я уже наметил те места, где я, наверное, мог бы сделать код чище с помощью него. Если не слышали о нём раньше, вот небольшой пример MDN описывает интерфейс MutationObserver так: С помощью интерфейса MutationObserver ...

Перевод статьи How To Build Vue Components Like A Pro ? с сайта blog.bitsrc.io для css-live.ru, автор — Rajat S Vue — один из самых быстро растущих фреймворков в современном мире. Представленный как «интуитивный, быстрый и компонентный» инструмент на базе паттерна MVVM для построения интерактивных интерфейсов, Vue стал любимым JavaScript-фреймворком для разработки интерактивных веб-приложений и интерфейсов для каждого разработчика. Его ...

От автора: этот вопрос на устах у многих разработчиков с тех пор, как WebAssembly (WASM) начал выглядеть так, как будто это может стать реальностью. Хотя многие предположили, что грядет замена JavaScript WASM, те, кто участвует в создании последнего, отрицают такое намерение. В официальном FAQ на webassembly.org этот вопрос значится одним из первых — и ответ на него: «WebAssembly предназначен для ...

От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы обозначаем их, используя ключевое слово async. const loadData = async function( value ) { if ( value > 0 ) { return { data: value }; } else { throw new Error( 'Value must ...

Перевод статьи Components and concerns c сайта adactio.com, опубликовано на css-live.ru с разрешения автора — Джереми Кита Порой мы слишком увлекаемся ложными противопоставлениями в мире веб-дизайна и веб-разработки. Недавно я подметил одно, регулярно всплывающее в области дизайн-систем и компонентов. Это насчет разделения ответственности. У веба долгая история разделения структуры, представления и поведения с помощью HTML, CSS и JavaScript. Оно служило ...

От автора: роль веб-анимации эволюционировала от простого декоративного пуха до конкретных целей в контексте пользовательского опыта — например, предоставления визуальной обратной связи, когда пользователи взаимодействуют с вашим приложением, направляя внимание пользователей на выполнение целей вашего приложения, предлагая визуальные сигналы, которые помогают пользователям понять интерфейс вашего приложения и т. д. Для обеспечения того, чтобы веб анимация JavaScript соответствовала таким важнейшим задачам, ...