Дайджест свежих материалов из мира фронтенда за последнюю неделю №429 (17 — 23 августа 2020)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №428 (10 — 16 августа 2020)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Как я html-парсер на php писал, и что из этого вышло. Заключительная часть
24 мин
Туториал
Здравствуйте.
Представляю вам заключительную главу цикла. В ней пойдет речь о реализации самого парсера, его модулей, вроде функции анализа, построения стека и dom дерева. Помимо этого поговорим и об обработке комментариев. Как оказалось, комментарии могут обрабатываться по разному.
Напишем свой поиск элементов, подробнее поговорим о поиске по классам и идентификаторам. И многое другое!
Представляю вам заключительную главу цикла. В ней пойдет речь о реализации самого парсера, его модулей, вроде функции анализа, построения стека и dom дерева. Помимо этого поговорим и об обработке комментариев. Как оказалось, комментарии могут обрабатываться по разному.
Напишем свой поиск элементов, подробнее поговорим о поиске по классам и идентификаторам. И многое другое!
Дайджест свежих материалов из мира фронтенда за последнюю неделю №427 (3 — 9 августа 2020)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
CSS Grid понятно для всех
3 мин
Туториал
Что такое Grid?
Grid представляет собой пересекающийся набор горизонтальных и вертикальных линий — один набор определяет столбцы, а другой строки. Элементы могут быть помещены в сетку, соответственно строкам и столбцам.
Поддержка браузерами
В 2020 году поддержка браузерами достигает 94 %
Grid контейнер
Мы создаем grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.
<body>
<div class="row">
<div class="row__item header">
<h1>Header</h1>
</div>
<div class="row__item nav">
<h1>Navbar</h1>
</div>
<div class="row__item article">
<h1>Article</h1>
</div>
<div class="row__item ads">
<h1>Ads</h1>
</div>
</div>
</body>.row {
display: grid;
margin: auto;
grid-template-rows: 60px 1fr ;
grid-template-columns: 20% 1fr 15%;
grid-gap: 10px;
width: 1000px;
height: 1000px;
justify-items: center;
justify-content: space-between;
grid-template-areas:
"header header header"
"nav article ads";
}grid-template-rows — это CSS свойство, которое определяет названия линий и путь размера функции grid rows.
CSS свойство
grid-row определяет с какой строки в макете сетки будет начинаться элемент, сколько строк будет занимать элемент, или на какой строке завершится элемент в макете сетки. Является сокращенным свойством для свойств grid-row-start и grid-row-end.Свойство CSS
grid-gap является сокращенным свойством для grid-row-gap и grid-column-gap, определяющего желоба между строками и столбцами сетки.Свойство
grid-template-areas определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area.Повторение названия области приводит к тому, что содержимое охватывает эти ячейки. Точка означает пустую ячейку. Сам синтаксис предоставляет визуализацию структуры сетки.
С помощью свойства
grid-area мы можем назначить каждой из этих областей свое собственное имя. Именование областей еще не создает никакого макета, однако теперь у нас есть именованные области, которые мы можем в нем использовать.
Медиазапросы в SCSS — ещё один удобный способ использования @media screen
3 мин
Привет!
Недавно столкнулась с проблемой медиазапросов в проекте, собранном на Angular. Уже не помню, какие именно ограничения заставили меня написать миксин для упрощения своей работы, но поделиться результатом и получить фидбек очень хочется. Встречала много других подобных примеров, но для работы мне понятнее и удобнее использовать именно этот.
В общем, для удобства составила себе такие требования:
Итак, определим любые нужные нам разрешения. Например:
Для начала, напишем миксин, который бы принимал нужный префикс диапазона и разрешение, под которое мы ограничиваемся:
Если кратко, то мы передаём нужное нам название разрешения экрана, ищем его значение среди объявленных ранее в переменной $sizes. После того, как нашли, подставляем его вместе с переданным min или max (переменная $minmax).
Недавно столкнулась с проблемой медиазапросов в проекте, собранном на Angular. Уже не помню, какие именно ограничения заставили меня написать миксин для упрощения своей работы, но поделиться результатом и получить фидбек очень хочется. Встречала много других подобных примеров, но для работы мне понятнее и удобнее использовать именно этот.
В общем, для удобства составила себе такие требования:
- Размеры экранов должны быть вынесены отдельно, чтобы можно было глобально в одном месте поменять поведение (например, вместо «320px» передавать просто «xs»).
- Данный миксин с медиазапросами может быть не только в одну сторону (например, не всегда только max-width).
- Миксин может использоваться и отдельно, переопределяя описанные классы внутри, или описываться в теле родителя, переопределяя его свойства.
Итак, определим любые нужные нам разрешения. Например:
$sizes: ("xs":320px, "sm":576px, "md":768px, "lg":992px, "xl":1200px);
Для начала, напишем миксин, который бы принимал нужный префикс диапазона и разрешение, под которое мы ограничиваемся:
@mixin media($minmax, $media) {
@each $size, $resolution in $sizes {
@if $media == $size {
@media only screen and (#{$minmax}-width: $resolution) {
@content;
}
}
}
}Если кратко, то мы передаём нужное нам название разрешения экрана, ищем его значение среди объявленных ранее в переменной $sizes. После того, как нашли, подставляем его вместе с переданным min или max (переменная $minmax).
Дайджест свежих материалов из мира фронтенда за последнюю неделю №426 (27 июля — 2 августа 2020)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Нововведения CSS – Июль 2020 (Gap, Aspect ratio, Masonry, Subgrid)
7 мин
Перевод
Приветствую. Представляю вашему вниманию перевод статьи «CSS News July 2020», опубликованной 7 июля 2020 года автором Rachel Andrew
В последнее время скорость внедрения новых возможностей технологий веб-разработки существенно увеличилась по сравнению с тем, как это было раньше. Данная статья содержит подборку новых CSS-функций, поддержка которых уже сейчас появляется в современных браузерах. Если вы относитесь к разработчикам, которым не нравится читать о технологиях, если их нельзя сразу же начать применять, вероятно, эта статья может быть вам не интересна. Однако, если вам интересно узнать, что нас ждёт в самое ближайшее время и уже сейчас опробовать это в бета-версии браузера, тогда читайте дальше.
Хватить это верстать дважды или 2-х сторонняя связь между дизайном и кодом
6 мин
Как "подружить" дизайнера и инженера? Как дать им работать с одними и теме же данным, без ущерба продуктивности? Как хранить дизайн в системе контроля версий. Если вас интересуют эти вопросы, в такой же степени как и меня, то добро пожаловать под кат!
1С справа налево: как мы поддержали RTL в платформе 1С: Предприятие
10 мин
Платформа 1С:Предприятие локализована на 22 языка, включая английский, немецкий, французский, китайский, вьетнамский. Недавно, в версии 8.3.17, мы поддержали арабский язык.
Одна из особенностей арабского языка в том, что текст на нём пишут и читают справа налево. UI для арабского языка надо отображать зеркально по горизонтали (но не всё и не всегда – тут есть тонкости), контекстное меню открывать слева от курсора и т.п.
Под катом – о том, как мы поддержали RTL (right-to-left) в веб-клиенте платформы 1С:Предприятие, а ещё – одна из гипотез, объясняющая, почему арабский мир пишет справа налево.
Одна из особенностей арабского языка в том, что текст на нём пишут и читают справа налево. UI для арабского языка надо отображать зеркально по горизонтали (но не всё и не всегда – тут есть тонкости), контекстное меню открывать слева от курсора и т.п.
Под катом – о том, как мы поддержали RTL (right-to-left) в веб-клиенте платформы 1С:Предприятие, а ещё – одна из гипотез, объясняющая, почему арабский мир пишет справа налево.
Визуальное сравнение 13 CSS-фреймворков
3 мин
Доброго времени суток, друзья!
Предлагаю Вашему вниманию результаты небольшого исследования — визуального сравнения 13 CSS-фреймворков.
Цель исследования — определить, какой из фреймворков лучше всего справляется со стилизацией по умолчанию, т.е. без добавления специальных (предусмотренных фреймворком) классов.
В исследовании представлены следующие фреймворки:
Использовались следующие версии стилей:
Предлагаю Вашему вниманию результаты небольшого исследования — визуального сравнения 13 CSS-фреймворков.
Цель исследования — определить, какой из фреймворков лучше всего справляется со стилизацией по умолчанию, т.е. без добавления специальных (предусмотренных фреймворком) классов.
В исследовании представлены следующие фреймворки:
- Bootstrap
- Materialize
- Bulma
- Foundation
- Semantic
- Skeleton
- Tailwind
- Uikit
- Pure
- Milligram
- Spectre
- Base
- Picnic
Использовались следующие версии стилей:
- Bootstrap — stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
- Materialize — cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
- Bulma — cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css
- Foundation — cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css
- Semantic — cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css
- Skeleton — cdnjs.cloudflare.com/ajax/libs/skeleton-framework/1.1.1/skeleton.min.css
- Tailwind — cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.5.2/tailwind.min.css
- Uikit — cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css
- Pure — unpkg.com/purecss@2.0.3/build/pure-min.css
- Milligram — cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css
- Spectre — unpkg.com/spectre.css/dist/spectre.min.css
- Base — unpkg.com/@getbase/base/core.css
- Picnic — cdn.jsdelivr.net/npm/picnic
Дайджест свежих материалов из мира фронтенда за последнюю неделю №425 (20 — 26 июля 2020)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Пришло время ленивой загрузки закадровых <iframe>
7 мин
Recovery Mode
Перевод
Нативная отложенная загрузка для изображений была добавлена в Chrome 76 через атрибут loading, а затем пришла и в Firefox. Мы рады сообщить, что встроенная отложенная загрузка для iframe теперь стандартизирована и также поддерживается в браузерах на основе Chrome и Chromium.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>
Встроенная lazy-loading загрузка iframe откладывает загрузку закадровых элементов iframe до тех пор, пока пользователь не прокрутит их рядом. Это сохраняет данные, ускоряет загрузку других частей страницы и уменьшает использование памяти.
Ближайшие события
Как стать Front-End разработчиком
2 мин
Recovery Mode
Кто такой Front-End разработчик?
Front-End разработчик это человек который пишет код для внешнего вида сайта, также есть Back-End разработчик который пишет код для функциональной части сайта. Если скрестить эти две профессии получится Full-Stack разработчик
Правосторонний интерфейс: адаптируем контролы к right-to-left языкам
8 мин
C адаптацией приложений и сайтов под RTL-языки (right-to-left, справа налево) сталкиваются разработчики многих развивающихся и выходящих на новые рынки продуктов. Мы в Badoo тоже в какой-то момент оказались в этой ситуации: наши приложения переведены на 52 языка и диалекта. В этой статье я расскажу о нескольких интересных нюансах, которые мы обнаружили при адаптации форм на сайте Badoo.сом под иврит и арабский язык.
Современные решения старых CSS-задач (3 часть): Масштабирование изображений на CSS
3 мин
Перевод
Приветствую. Представляю вашему вниманию перевод статьи «CSS-Only Full-Width Responsive Images 2 Ways», опубликованной 14 апреля 2020 года автора Stephanie Eckles
Это третья статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.
В не очень далёком прошлом, когда JQuery ещё был "Царём горы", наиболее популярным инструментом для реализации отзывчивости фоновых изображений был JQuery-плагин Backstretch
Я использовала этот плагина где-то на 30 сайтах, пока приведённое ниже свойство не получило достаточную поддержку браузерами (а если точнее, пока существенно не снизилась доля использования IE ниже 9 версии). И свойство это:
background-size: cover;Согласно данным caniuse.com, данное свойство и значение поддерживается современными браузерами уже более 9 лет. Но вебсайты, использующие упомянутый плагин Backstretch или собственное подобное решение, могли до сих пор не обновиться.
Альтернативный метод использует стандартный тег img и магию свойства
object-fit: cover;Давайте рассмотрим, как использовать каждое из решений и узнаем, в каких ситуациях следует отдавать предпочтение каждому из них.
Нативный способ покрасить SVG-иконки
2 мин
Когда вам нужна возможность менять цвет иконок через CSS, что вы делаете? Вариантов не так много.
Обычно используются либо шрифты иконок, либо исходный код SVG скачивается и вставляется в HTML вручную. Шрифт нужно оптимизировать, иначе пользователь загрузит разом все иконки без надобности. Работа с исходным кодом требует тяжелых DOM-операций и потенциально опасна.
Давайте посмотрим на еще один способ, доступный в современных браузерах, — тэг USE.
Обычно используются либо шрифты иконок, либо исходный код SVG скачивается и вставляется в HTML вручную. Шрифт нужно оптимизировать, иначе пользователь загрузит разом все иконки без надобности. Работа с исходным кодом требует тяжелых DOM-операций и потенциально опасна.
Чтобы защититься от вредоносного кода SVG нужно «почистить». Встроенный в Angular санитайзер, к примеру, не работает с SVG и превращает их в пустую строку. Можно воспользоваться проверенным инструментом DOMPurify и подключить его с помощью нашей библиотеки ng-dompurify, о чем я подробно рассказывал.
Давайте посмотрим на еще один способ, доступный в современных браузерах, — тэг USE.
Современные решения старых CSS-задач (2 часть): Элементы одинаковой высоты: Flexbox vs Grid
2 мин
Перевод
Приветствую. Представляю вашему вниманию перевод статьи «Equal Height Elements: Flexbox vs. Grid», опубликованной 9 апреля 2020 года автором Stephanie Eckles
Это вторая статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.
Однажды (приблизительно 7 лет назад) я написала JQuery-плагин, который работал с тремя колонками, расположенными на одной строке. А именно, рассчитывал и задавал одинаковую высоту для элементов, независимо от количества содержимого в каждом из них. Метод вёрстки на float, который был тогда основным, не мог справиться с этой проблемой.
Современные решения старых CSS-задач (1 часть): Удержание футера внизу страницы
3 мин
Перевод
Приветствую. Представляю вашему вниманию перевод статьи «Keep the Footer at the Bottom: Flexbox vs. Grid», опубликованной 8 апреля 2020 года автором Stephanie Eckles
Это первая статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.
В течение многих лет я регулярно возвращалась к этой статье Matthew James Taylor за способом удержания футера страницы в нижней её части, даже если высота основного содержимого меньше высоты окна. Данный метод основывался на явном задании высоты футера, что являлось не масштабируемым, но очень хорошим решением (до появления Flexbox).
Дайджест свежих материалов из мира фронтенда за последнюю неделю №424 (13 — 19 июля 2020)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
