User
Рассылай и властвуй: вёрстка рассылки тогда и сейчас
Их читают миллионы людей по всему миру. Их добавляют в спам, удаляют навсегда, но без них немыслим современный интернет. Многие фронтендеры пойдут на всё, что угодно, лишь бы отвертеться от работы над ними. Мой рассказ — об электронных письмах, о том, как они изменились за 20 лет и о том, как современному фронтендеру не впасть в депрессию, верстая их. Это первая статья из цикла, в которой я расскажу о том, как всё начиналось. Через пару недель поговорим о инструментах разработки и тестирования рассылки.
Чего мне никогда не говорили о CSS
Фото Джантин Дурнбос на Unsplash
Это ни в коем случае не критика коллег, а всего лишь краткий список важных вещей, которые я самостоятельно узнала о CSS в последнее время.
Не секрет, что многие разработчики, похоже, не думают о CSS. Это легко заметить по обсуждениям в интернете и в разговорах с друзьями и коллегами. Тем не менее, многие знания мы получаем именно от коллег, и иногда я понимаю, что о некоторых важных нюансах CSS мне никто не рассказал, потому что люди просто не тратят время на изучение этой темы.
Чтобы исправить это, я провела некоторые исследования и составила небольшой список понятий, которые считаю интересными и полезными для лучшего понимания и написания CSS.
Всё, что нужно знать об автоматических переносах в CSS
Недавно меня пригласили выступить с вечерней лекцией в Типографском обществе Австрии. Для меня стало большой честью последовать по стопам таких светил, как Мэтью Картер, Вим Краувел, Маргарет Калверт, Эрик Шпикерман и покойная Фреда Сэк.
Я рассказал о некоторых золотых правилах типографики в интернете, а потом во время секции QA меня спросили о текущей ситуации с автоматическими переносами в вебе. Это хороший вопрос, особенно с учётом того, что немецкий язык знаменит часто используемыми длинными существительными (например, Verbesserungsvorschlag означает «предложение для улучшения»), поэтому переносы широко используются в большинстве письменных носителей.
Учим CSS Grid за 5 минут
Grid макеты имеют основополагающее значение для дизайна веб-сайтов, а модуль CSS Grid — это самый мощный и простой инструмент для его создания.
В этом году модуль также получил нативную поддержку основных браузеров (Safari, Chrome, Firefox), поэтому я считаю, что всем фронтенд разработчикам придется изучать эту технологию в недалеком будущем.
В этой статье я быстренько расскажу вам об основах CSS Grid.
Делаем адаптивный HTML, добавляя одну строку в CSS
В этой статье я расскажу вам, как использовать CSS Grid для создания супер классной сетки изображений, которая варьирует количество столбцов в зависимости от ширины экрана.
И самое классное: адаптивность будет добавлена с помощью одной строки CSS.
Это означает, что нам не нужно загромождать HTML лишними классами (
Col-sm-4
, col-md-8
) или создавать медиа-запросы для каждого размера экрана.Рассмотрим все подробнее.
AMP: будущее электронной почты
Динамическое электронное письмо, созданное с использованием технологии AMP, российскими разработчиками из ecwid.ru
Проект AMP задумывался, чтобы улучшить пользовательский опыт в сети, а это значит и работу с электронной почтой, когда она происходит в вебе. Для большинства из нас функции электронной почты почти не изменились с момента ее появления (при этом, большинство из нас, очевидно, это появление не застали). Ну а суть AMP в обеспечении скорости и безопасности, поэтому не разработать AMP для электронной почты было нельзя. Казалось бы, как JavaScript в почте может быть хорошей идеей, но благодаря фреймворку AMP пользователи смогут взаимодействовать с письмами в реальном времени, не опасаясь за безопасность своих данных.
"Как?" — вы спросите? Ответ под катом
Инструменты для создания адаптивного сайта без доступа к сайту
Я расскажу о том как ускорить внесение изменений на сайт, и рассмотрю инструменты для быстрой верстки на живом сайте не имея доступа для его редактирования.
Можно пойти обычным путем – скопировать сайт и доработать его на своей машине, или же писать все прямо на работающий сайт (так лучше не делать).
Тут на помощь приходят юзерскрипты, livereload, sass или другие препроцессоры. С этим набором время адаптирования сайта сокращается в несколько раз.
Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence
Узнайте, как использовать мощный примитив SVG-фильтра feTurbulence для создания собственных текстур и эффектов искажений.
Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:
Эффекты фильтрации SVG
- Эффекты фильтрации SVG. Часть 1. SVG фильтры 101
- Эффекты фильтрации SVG. Часть 2. Контурный текст при помощи feMorphology
- Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer
- Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.
- Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap
- Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence
Кастомизируем select на чистом css
Параллакс на чистом CSS
Параллакс почти всегда создаётся с помощью JavaScript и, чаще всего, получается ресурсоёмким, из-за вешания листенеров на событие скролла, модификации DOM напрямую и срабатывания ненужных перерисовок и перестановок. Всё это происходит асинхронно с потоком, в котором браузер рендерит страницу, из-за чего скролл начинает подтормаживать, а картинка рваться на части. Более правильные реализации параллакса отслеживают скролл и используют отложенные обновления DOM с помощью
requestAnimationFrame
. Получается качественной другой результат, но почему бы вообще не избавиться от JavaScript?8 приемов работы с CSS: параллакс, «липкий» футер и другие
От переводчика: перевели для вас статью Брета Кэмерона о хитростях в работе с CSS. Многие моменты пригодятся не только новичкам, но и опытным разработчикам.
Эта статья о приемах работы в CSS, узнав о которых, я восклицал: «Агаааа!». Надеюсь, вы тоже сделаете пару открытий.
CSS — специфическая технология. На первый взгляд она кажется очень простой. Но некоторые эффекты, которые в теории кажутся простыми, не являются таковыми на практике.
Я покажу несколько приемов и расскажу о принципах их использования в CSS. Сама по себе статья не о сложностях. Наоборот, она призвана сделать вашу работу более комфортной.
Эффекты фильтрации SVG. Часть 7. Продвижение вперед
Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:
Эффекты фильтрации SVG
- Эффекты фильтрации SVG. Часть 1. SVG фильтры 101
- Эффекты фильтрации SVG. Часть 2. Контурный текст при помощи feMorphology
- Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer
- Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.
- Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap
- Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence
- Эффекты фильтрации SVG. Часть 7. Продвижение вперед
В последней статье этой серии автор поделится списком полезных ресурсов для желающих узнать об эффектах SVG фильтрации побольше.
Градиентные границы в CSS
Доброго времени суток уважаемые хабровчане. Представляю вашему вниманию перевод статьи Криса Коера.
Допустим, вам нужна градиентная граница вокруг определенного элемента. И вы, такой, думаете:
- Для этого не существует простого и очевидного CSS API.
- Я просто сделаю элемент-обертку с линейно-градиентным фоном, а затем внутренний элемент заблокирует большую часть этого фона, за исключением тонкой линии заполнения вокруг него.
Выглядеть это будет как-то так:
HTML
<div class="module-border-wrap"><div class="module">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias.
</div></div>
SCSS
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #222;
}
.module-border-wrap {
max-width: 250px;
padding: 1rem;
position: relative;
background: linear-gradient(to right, red, purple);
padding: 3px;
}
.module {
background: #222;
color: white;
padding: 2rem;
}
результат
Фронтенд, алгоритмы и опоссум Фридрих. Разбираем задачи конкурса Яндекса
Задача 1
Первая задача должна была быть разминочной, на 20 минут, и мы решили сделать ее условие таким, чтобы она легко решалась с помощью регулярных выражений.
Как на самом деле работают z-index
Возможно, информация, которую я расскажу ниже, на самом деле тривиальна. Однако я уверен, что многие найдут её для себя полезной. Те же, кто уже о ней знал, смогут использовать данный текст как шпаргалку в трудную минуту. Итак, добро пожаловать под кат.
Flexbox. Инфографика по технологии
Изучая новые для меня концепции, я стараюсь максимально сжато, но между тем информативно выразить изучаемое в графическом виде, отношении одних сущностей к другим, их взаимосвязь и поведение. И flexbox не стала для меня исключением. За несколько вечеров я собрал для себя обзорную «шпаргалку» по технологии, которая долгое время висела у меня на стене перед глазами, пока я не запомнил все основные моменты по технологии.
Переработка вредит и продуктам, и сотрудникам
К счастью, самому мне не приходилось работать в компаниях, где мое отвращение к сверхурочной работе встречало бы неодобрение. И все-таки я считаю, что недопустимо даже отзываться о такой практике одобрительно. Это симптом проблем, которые нельзя поощрять. Ни при каких обстоятельствах.
По сути своей, необходимость в переработке происходит от проблем с профессионализмом, расстановкой приоритетов и гибкостью. Я, по большей части, буду говорить о сверхурочной работе в IT компаниях, но то же самое негативное влияние на продуктивность и качество работы можно наблюдать и в любой другой сфере.
Как делать дела, когда их не хочется делать
Пять стратегий доведения дел до конца
Случалось ли вам приходить на работу, садиться за компьютер, чтобы начать проект, открыть редактор, и потом просто пялиться в экран? Со мной это происходит постоянно, поэтому мне знакомы ваши мучения.
Даже если вам нравится ваша работа, вам может хотеться заниматься ею не каждый день. На вашу способность прийти на работу с энтузиазмом и работать весь день влияет очень много факторов.
Ваш разум может быть занят внешними событиями – проблемами в семье, разрывом отношений, больным домашним животным – из-за чего будет трудно сконцентрироваться. На работе, конечно, тоже бывают проблемы, из-за которых сложно почувствовать мотивацию. Плохой обзор вашей работы может сбить ваш настрой. А если вы изо всех сил работаете над проектом, который ваш менеджер не ценит, вы можете задуматься над тем – зачем же вы так напрягаетесь.
Что происходит при создании контейнера Flexbox?
Это перевод статьи Rachel Andrew, являющейся одним из разработчиков спецификаций CSS.
В короткой серии статей я собираюсь потратить некоторое время на детальную распаковку Flexbox — точно так же, как я делала в прошлом с grid. Мы рассмотрим, для чего был разработан Flexbox, что он действительно делает хорошо, а когда мы не можем выбрать его в качестве способа компоновки.
В этой статье мы подробно рассмотрим, что на самом деле происходит при добавлении display: flex в вашу таблицу стилей.
Information
- Rating
- Does not participate
- Location
- Россия
- Date of birth
- Registered
- Activity