Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →
Подробнее![[Перевод] Где и как использовать мультиколонки (CSS Columns)](https://habrastorage.org/webt/xd/_k/lp/xd_klppp1zjrjricjnmlljxh5uu.jpeg)
При всём ажиотаже вокруг технологий CSS Grid и Flexbox, часто упускается из виду другой метод разметки. В этой статье я хочу рассмотреть многоколоночный макет — часто называемый просто «Multicol» или «CSS Columns». Вы узнаете, для каких задач он подходит и какие нюансы следует учитывать при его использовании. Читать дальше →
Подробнее
Всем, кому приходилось вставлять HTML содержимое в DOM в Angular, доводилось видеть это сообщение. Конечно, все мы получаем проверенное содержимое с нашего же сервера и просто хотим застилизовать сообщение об ошибке. Или вставляем HTML из наших же констант, инлайним наши SVG иконки, ведь нам всего лишь нужно покрасить их в цвет текста. Ведь ничего плохого не случится, если мы просто скажем Angular`у — не дрейфь, там всё чисто. Чаще всего это может быть и так, но в крупных проектах с…
Подробнее
Привет, Хабр! Cделал для вас большую подборку материалов о поисковом продвижении для самостоятельного изучения. Эти бесплатные материалы легко заменят вам платные курсы. Также в конце статьи вы найдёте список книг по SEO, бесплатные курсы, чек-листы SEO-аудита, SEO-сервисы и расширения. Добавляйте в закладки, чтобы не потерять. Больше подобных статей можете читать на моем Telegram-канале (@proroas) Отмечу, что список материалов будет пополняться. Если я не добавил стоящий материал,…
Подробнее
Программный комитет FrontendConf отвечает за отбор заявок, готовит программу, расписание, отвечает за стенды и концепцию. При этом участники ПК еще и курируют доклады спикеров. Задача куратора — помочь со структурой, контентом и довести доклад до идеала. Таких докладов у члена ПК бывает от одного до пары десятков, а еще надо готовить программу и свой доклад, если член ПК еще и спикер на конференции. Накануне FrontendConf мы взяли у интервью у Сергея Попова (@sergeytovarov) и расспросили
Подробнее
Что объединяет Trello, Gmail, Aviasales и Google Keep? В каждом из них есть Drag-&-Drop-компоненты, которые можно перетаскивать мышкой. Использование этих компонентов делает сайты по-настоящему удобными, потому что в реальной жизни мы часто используем этот паттерн. Передвигать вещи для нас естественно, поэтому и в вебе мы хотим перемещать элементы по экрану с одного места на другое, как стикеры на доске или магнитики на холодильнике. Сортировка todo-списков, организация дашбордов,
Подробнее
SEO — это рутина. Иногда приходится делать совсем тоскливые операции вроде удаления «плюсиков» в ключевых словах. Иногда — что-то более продвинутое вроде парсинга мета-тегов или консолидации данных из разных таблиц. В любом случае все это съедает тонны времени. Но мы не любим рутину. Предлагаем 16 полезных функций Google Sheets, которые упростят работу с данными и помогут вам высвободить несколько рабочих часов или даже дней. (Уверены, о существовании некоторых функций вы не…
Подробнее![[Перевод] Заходят как-то два браузера в скроллбар…](https://habrastorage.org/getpro/habr/post_images/3d9/f3d/18b/3d9f3d18b2907ac9a61133ef6e81c1ad.jpg)
Скроллбар (scrollbar, полоса прокрутки) — это простой, но эффективный механизм, который действует как основное средство, с помощью которого можно просматривать большие документы. Но это — далеко не всё, на что способны полосы прокрутки! Эти скромные рабочие лошадки ещё и неплохо подсказывают пользователям о том, каковы размеры документов, с которыми они взаимодействуют. В результате скроллбары несут на себе двойную нагрузку. Они и помогают работать с различными материалами, и информируют…
Подробнее
Простые и полезные советы, которые позволят вам максимально разогнать сайт без необходимости закапываться в метриках Google PageSpeed и Lighthouse. Читать дальше →
Подробнее
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него. Читать дальше →
Подробнее![[Перевод] Gap — светлое будущее для отступов в Flexbox (как в Grid)](https://habrastorage.org/webt/at/ie/_3/atie_3rxa8ck4uyu3yiadliab7y.png)
Одна из моих любимых частей спецификации CSS Grid — это grid-gap. Они позволяют легко создавать отступы между элементами внутри сетки. Margins и приёмы, к которым мы прибегаем, чтобы реализовать их в разных ситуациях, долгое время были одним из главных моментов, раздражающих меня в CSS. W3C порекомендовала отказаться от свойства grid-gap в пользу простого gap и его использования в Flexbox и Multi-Column. В этом руководстве мы посмотрим, как добавляли margins в Flexbox раньше и как это
Подробнее![[Перевод] Полное руководство по Flexbox](/uploads/habrahabr_logo.png){kind=logo}
Полное руководство по CSS flexbox. Это полное руководство объясняет все о flexbox, сосредотачиваясь на всех возможных свойствах для родительского элемента (контейнер flex) и дочерних элементов (элементы flex). Оно также включает в себя историю, демонстрации, шаблоны и таблицу поддержки браузеров. Читать дальше →
Подробнее