Как использовать свойство order во флексбоксах, не вызывая хаоса

Перевод статьи Avoiding chaos when using Flexbox ‘order’ для css-live.ru, с разрешения автора — Амелии Беллами-Ройдз

Недавняя твиттерная суматоха вынудила меня сделать наконец демо с флексбоксами, которое я хотела создать еще с тех пор, как впервые начала экспериментировать с flex-свойствами CSS.

Рома Комаров поделился исследованием, как с помощью флексбоксов и CSS-свойства order получить эффект сортировки таблицы на чистом CSS. Другие CSS-эксперты тотчас выступили с предупреждением, что такой подход не рекомендуется, а то и вовсе прямо противоречит спецификации.

Рома принял критику и добавил в статью предостережение: это лишь эксперимент, не пытайтесь повторить это в продакшне! Но в твиттерном обсуждении люди задавали вопрос, всплывающий снова и снова:

Еженедельная подборка красивых эффектов на CSS/SVG/JS #70

Подборка свежих эффектов, интересных идей и полезных наработок.

Схема-дерево на CSS и JS

Технологии: CSS, CSS-переменные, Bliss.js.
Автор: Ли Вера (@leaverou)

Схема-дерево на CSS и JS Посмотреть живой пример


CSS-гриды + CSS-колонки = ♥

Перевод статьи CSS Grid + CSS Multi-Columns = ♥ с сайта medium.com для CSS-live.ru, автор — Патрик Броссет

В этой короткой статье я рассматриваю связь между двумя раскладочными инструментами из CSS: CSS-гриды и CSS-колонки.

Эти два инструмента можно использовать вместе весьма интересными способами для построения отзывчивых веб-дизайнов.

Начнём с обзора, что каждый из их делает.

Еженедельная подборка красивых эффектов на CSS/SVG/JS #69

Подборка свежих эффектов, интересных идей и полезных наработок.

Постер к фильму «Соло: Звездные войны»

Внизу можно выбирать персонажа для фона и менять текст.
Технологии: CSS, React.
Автор: Морис Мелчерс (@mephysto)

Постер к фильму Соло: Звездные войны Посмотреть живой пример


Ссылки против кнопок в современных веб-приложениях

Перевод статьи Links vs. Buttons in Modern Web Applications с сайта marcysutton.com для CSS-live.ru, автор — Марси Саттон

Кнопки в интерфейсе Github
Github: ссылки или кнопки?

Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками. Ну, HTML-элементы, которые открывают ссылки в новом окне или отправляют форму, знаете? В веб-приложениях на JavaScript мы по-прежнему путаемся, какой элемент выбрать для пользовательского действия. Чтобы развеять туман, я покажу примеры использования для ссылок и кнопок в приложениях с отрисовкой на клиенте и помогу вам принимать лучшие решения с точки зрения UI.

Вникаем в механизмы Redux, делая своё хранилище (Store)

Перевод статьи Finally understand Redux by building your own Store с сайта toddmotto.com для CSS-live.ru, автор — Тодд Мотто

Redux — интересный паттерн, нехитрый по своей сути, но почему же его порой так тяжело понять? В этой статье мы рассмотрим основные идеи Redux и внутренние механизмы хранилища (Store).

Смысл здесь в том, чтобы глубже познать магию «под капотом» Redux, хранилища (Store), редюсеров (reducers) и дейтвий (action) — и механизмы их работы. Это поможет лучше отлаживать и писать более качественный код, и понимать, что именно он делает. Мы изучим всё это на примере собственного пользовательского хранилища, написанного на языке TypeScript.

Еженедельная подборка красивых эффектов на CSS/SVG/JS #68

Подборка свежих эффектов, интересных идей и полезных наработок.

Трансформация лошади в дракона

Технологии: CSS, JS.
Автор: Эли Фитч (@elifitch)

Трансформация лошади в дракона Посмотреть живой пример


Вы освоили азы JavaScript. Но что дальше?

Перевод статьи So, you learned JavaScript — what now? с сайта christianheilmann.com для CSS-live.ru, автор — Кристиан Хайльман

Прежде всего, поздравляю — отличный выбор! JavaScript развился из «игрушечного языка», над которым «тру прогеры» смеялись, в полноценный, на котором держится весь веб и много чего еще.

Трудно сказать, хорошо это или плохо. JavaScript далек от идеального языка, если вообще такой существует. Но он имеет особенности, которые явно к нему приближают!

Снова о CSS Box Alignment (свойствах для выравнивания всего): простая шпаргалка

Спецификация CSS Box Alignment становится всё более зрелой, и кроме шпаргалки по выравниванию блоков Рейчел Эндрю и нашего обзора свойств для выравнивания всего в сети появляются новые материалы о ней. Пожалуй, пришла пора и нам освежить знания об этих свойствах.

дайджест

Еженедельная подборка красивых эффектов на CSS/SVG/JS #67

Подборка свежих эффектов, интересных идей и полезных наработок.

Эффект с подчеркиванием при наведении на ссылку

Технологии: CSS-анимация.
Автор: Мехмет Бурак Эрман (@mburakerman)

Эффект с подчеркиванием при наведении на ссылку Посмотреть живой пример


Еженедельная подборка красивых эффектов на CSS/SVG/JS #66

Подборка свежих эффектов, интересных идей и полезных наработок.

Праздничная анимация

Технологии: CSS, CSS-гриды, particles.js.
Автор: Триша Салас (@trishasalas)

Праздничная анимация Посмотреть живой пример


Еженедельная подборка красивых эффектов на CSS/SVG/JS #65

Подборка свежих эффектов, интересных идей и полезных наработок.

Эффект 3D-печати

Технологии: CSS, Three.js, GreenSock.js.
Автор: Shaw (@shshaw)

Эффект 3D-печати Посмотреть живой пример


перевод

<i is="морж">

Перевод статьи <i is="the walrus"> с сайта bkardell.com для CSS-live.ru, автор — Брайан Карделл

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

Еженедельная подборка красивых эффектов на CSS/SVG/JS #64

Подборка свежих эффектов, интересных идей и полезных наработок.

Анимация «Дуэль»

Технологии: CSS, SVG, JS.
Автор: Энгер Бьюза (@enger)

Дуэль Посмотреть живой пример