Плиточная раскладка на флексах - вроде бы ничего сложного.

Но Flexbox не особо подходит для построения плиточных раскладок, поэтому вам придётся столкнуться с подводными камнями: смешанный порядок или несоразмерные промежутки.
Если вам все же нужен flexbox, есть решение с order и :nth-child()

Кому лень читать статью, можно потыкать и схоронить себе codepen: https://codepen.io/collection/XPjvPP/

https://medium.com/@stasonmars/6cc2a76c9aba

#web

Глубокое погружение в нативную ленивую загрузку изображений и фреймов

https://css-tricks.com/a-deep-dive-into-native-lazy-loading-for-images-and-frames/

#react

Хотите наконец заюзать react hooks, но не знаете как совместить их с Redux?

Почитайте как легко конвертировать классы React-Redux в React Hooks

Проект на github: https://github.com/iqbal125/react_hooks_with_react_redux

https://medium.freecodecamp.org/how-to-convert-from-react-redux-classes-to-react-hooks-the-easy-way-eca2233e0e7a

Функции инструментов разработчика Chrome, о которых вы не знали (ЧАСТЬ 1)

Сколько статей уже на эту тему было и в каждой всегда нахожу что-то новое!

https://www.youtube.com/watch?v=I-wIFhvGclQ

ola — анимационная библиотека для усреднения/интерполяции чисел в реальном времени

https://github.com/franciscop/ola/

Докеризация React App

https://mherman.org/blog/dockerizing-a-react-app/

Все, что вы хотели знать об inputmode

Атрибут полезен для подтягивания нужного типа клавиатуры на мобилках (как минимум), что уменьшит боль юзера при работе с приложением

https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/

3Pweb — онлайн-визуализатор, наглядно показывающий, сколько времени в среднем требуется для выполнения третьесторонних скриптов

https://www.thirdpartyweb.today/

TypeScript 3.0: тип unknown

https://mariusschulz.com/blog/typescript-3-0-the-unknown-type

Практическое руководство по Javascript Proxy

https://blog.bitsrc.io/a-practical-guide-to-es6-proxy-229079c3c2f0

reLift-HTML — маленькая библиотека для view (3KB) позволяющая создавать веб-компоненты, кастомные элементы, помогающая сделать любую HTML страницу реактивной без загрязнения большими фреймворками

https://relift-html.js.org/

#web

Технологические тренды веб-разработки 2019

https://habr.com/ru/post/451572/

#web

Картинки в вебе 2019

https://habr.com/en/company/simbirsoft/blog/451504/

ReactQ — Универсальный стартовый набор для React+GraphQL: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR

Экономит время и нервы)

https://reactql.org/

CSS функция для ограничения многострочного текста троеточием была реализована в Firefox

Теперь

-webkit-line-clamp

можно юзать с большей поддержкой.

https://webplatform.news/issues/2019-05-17

#react
Основные шаблоны проектирования React Hooks

https://itnext.io/essential-react-hooks-design-patterns-a04309cc0404

Web at Google I/O 2019 , 24 видео

https://www.youtube.com/playlist?list=PLNYkxOF6rcIATmAmz7HcCzongGvQEtx8i

Пишем чистый и масштабируемый JavaScript-код: 12 советов

Чистота кода - один из показателей уровня разработчика. Бывает, что разработка ограничивается работоспособностью приложения (переодически у меня так): написал, проверил - работает - едем дальше.

Первый шаг в обеспечении чистоты - разбиение на модули. Когда твои функции не свалены в один файл, а логично разнесены в модули, уже можно проследить структуру приложения.
В статье еще несколько правил с примерами вам в помощь.

https://habr.com/ru/company/ruvds/blog/452562/

Злоупотребление jQuery для атак по сторонним каналам с помощью CSS

https://portswigger.net/blog/abusing-jquery-for-css-powered-timing-attacks

Начало работы с react-testing-library

https://css-tricks.com/getting-started-with-react-testing-library/