Фотографией я увлекаюсь с раннего детства. Поскольку от цифровой фотографии я получил все что хотел, у меня возникла идея попробовать восстановить дома процесс обработки ЧБ пленки.

Их читают миллионы людей по всему миру. Их добавляют в спам, удаляют навсегда, но без них немыслим современный интернет. Многие фронтендеры пойдут на всё, что угодно, лишь бы отвертеться от работы над ними. Мой рассказ — об электронных письмах, о том, как они изменились за 20 лет и о том, как современному фронтендеру не впасть в депрессию, верстая их. Это первая статья из цикла, в которой я расскажу о том, как всё начиналось. Через пару недель поговорим о инструментах разработки и тестирования рассылки.

Фото Джантин Дурнбос на Unsplash

Это ни в коем случае не критика коллег, а всего лишь краткий список важных вещей, которые я самостоятельно узнала о CSS в последнее время.

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

Чтобы исправить это, я провела некоторые исследования и составила небольшой список понятий, которые считаю интересными и полезными для лучшего понимания и написания CSS.

Недавно меня пригласили выступить с вечерней лекцией в Типографском обществе Австрии. Для меня стало большой честью последовать по стопам таких светил, как Мэтью Картер, Вим Краувел, Маргарет Калверт, Эрик Шпикерман и покойная Фреда Сэк.

Я рассказал о некоторых золотых правилах типографики в интернете, а потом во время секции QA меня спросили о текущей ситуации с автоматическими переносами в вебе. Это хороший вопрос, особенно с учётом того, что немецкий язык знаменит часто используемыми длинными существительными (например, Verbesserungsvorschlag означает «предложение для улучшения»), поэтому переносы широко используются в большинстве письменных носителей.

Быстро познакомимся с будущим макетов веб-сайтов.



Grid макеты имеют основополагающее значение для дизайна веб-сайтов, а модуль CSS Grid — это самый мощный и простой инструмент для его создания.

В этом году модуль также получил нативную поддержку основных браузеров (Safari, Chrome, Firefox), поэтому я считаю, что всем фронтенд разработчикам придется изучать эту технологию в недалеком будущем.

В этой статье я быстренько расскажу вам об основах CSS Grid.

В этой статье я расскажу вам, как использовать CSS Grid для создания супер классной сетки изображений, которая варьирует количество столбцов в зависимости от ширины экрана.

И самое классное: адаптивность будет добавлена с помощью одной строки CSS.
Это означает, что нам не нужно загромождать HTML лишними классами (Col-sm-4, col-md-8) или создавать медиа-запросы для каждого размера экрана.

Рассмотрим все подробнее.

Динамическое электронное письмо, созданное с использованием технологии AMP, российскими разработчиками из ecwid.ru

Проект AMP задумывался, чтобы улучшить пользовательский опыт в сети, а это значит и работу с электронной почтой, когда она происходит в вебе. Для большинства из нас функции электронной почты почти не изменились с момента ее появления (при этом, большинство из нас, очевидно, это появление не застали). Ну а суть AMP в обеспечении скорости и безопасности, поэтому не разработать AMP для электронной почты было нельзя. Казалось бы, как JavaScript в почте может быть хорошей идеей, но благодаря фреймворку AMP пользователи смогут взаимодействовать с письмами в реальном времени, не опасаясь за безопасность своих данных.

"Как?" — вы спросите? Ответ под катом

Есть сайт у которого нет мобильной версии, и нужно с минимальными затратами времени сделать мобильным пользователям этот сайт приятнее в использовании.

Я расскажу о том как ускорить внесение изменений на сайт, и рассмотрю инструменты для быстрой верстки на живом сайте не имея доступа для его редактирования.

Можно пойти обычным путем – скопировать сайт и доработать его на своей машине, или же писать все прямо на работающий сайт (так лучше не делать).



Тут на помощь приходят юзерскрипты, livereload, sass или другие препроцессоры. С этим набором время адаптирования сайта сокращается в несколько раз.

Узнайте, как использовать мощный примитив SVG-фильтра feTurbulence для создания собственных текстур и эффектов искажений.

Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:

Эффекты фильтрации SVG

1. Эффекты фильтрации SVG. Часть 1. SVG фильтры 101
2. Эффекты фильтрации SVG. Часть 2. Контурный текст при помощи feMorphology
3. Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer
4. Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.
5. Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap
6. Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence

---

Как-то вечером я убивал время, читая статьи в интернете, и наткнулся на вот этот хабропост пользователя Cyapa, где расписано, как кастомизировать select на чистом css. В процессе просмотра данного решения нашел несколько весьма неудобных моментов, которые постарался исправить в своем решении этой задачи. Итак, приступим.

В этой статье показывается, как с помощью CSS трансформаций и махинаций с 3d сделать параллакс-эффект на сайте на чистом CSS.

Параллакс почти всегда создаётся с помощью JavaScript и, чаще всего, получается ресурсоёмким, из-за вешания листенеров на событие скролла, модификации DOM напрямую и срабатывания ненужных перерисовок и перестановок. Всё это происходит асинхронно с потоком, в котором браузер рендерит страницу, из-за чего скролл начинает подтормаживать, а картинка рваться на части. Более правильные реализации параллакса отслеживают скролл и используют отложенные обновления DOM с помощью requestAnimationFrame. Получается качественной другой результат, но почему бы вообще не избавиться от JavaScript?

От переводчика: перевели для вас статью Брета Кэмерона о хитростях в работе с CSS. Многие моменты пригодятся не только новичкам, но и опытным разработчикам.

Эта статья о приемах работы в CSS, узнав о которых, я восклицал: «Агаааа!». Надеюсь, вы тоже сделаете пару открытий.

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

Я покажу несколько приемов и расскажу о принципах их использования в CSS. Сама по себе статья не о сложностях. Наоборот, она призвана сделать вашу работу более комфортной.

Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:

Эффекты фильтрации SVG

1. Эффекты фильтрации SVG. Часть 1. SVG фильтры 101
2. Эффекты фильтрации SVG. Часть 2. Контурный текст при помощи feMorphology
3. Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer
4. Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.
5. Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap
6. Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence
7. Эффекты фильтрации SVG. Часть 7. Продвижение вперед

В последней статье этой серии автор поделится списком полезных ресурсов для желающих узнать об эффектах SVG фильтрации побольше.

---

Доброго времени суток уважаемые хабровчане. Представляю вашему вниманию перевод статьи Криса Коера.

Допустим, вам нужна градиентная граница вокруг определенного элемента. И вы, такой, думаете:

• Для этого не существует простого и очевидного 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;
}

результат

Этим постом мы завершаем серию публикаций о конкурсах Яндекс.Блиц в 2018 году. Надеемся, что вам довелось поучаствовать или хотя бы посмотреть, какие приближенные к продакшену задачи мы предлагаем. Последний контест был посвящен применению алгоритмов во фронтенде. Сегодня мы публикуем подробные разборы 12 задач: первые 6 из них предлагались в квалификационном раунде, а задачи 7–12 — в финале. Мы постарались объяснить, как формировались условия, на какие навыки мы обращали внимание. Спасибо всем участникам за проявленный интерес!

Задача 1

Первая задача должна была быть разминочной, на 20 минут, и мы решили сделать ее условие таким, чтобы она легко решалась с помощью регулярных выражений.

Наверное, почти каждый из нас хоть раз в жизни использовал свойство z-index. При этом каждый разработчик уверен, что знает, как оно работает. В самом деле — что может быть проще операций с целыми числами (сравнение и назначение их элементам). Но всё ли так просто, как кажется на первый взгляд?

Возможно, информация, которую я расскажу ниже, на самом деле тривиальна. Однако я уверен, что многие найдут её для себя полезной. Те же, кто уже о ней знал, смогут использовать данный текст как шпаргалку в трудную минуту. Итак, добро пожаловать под кат.

Полагаю многим известна технология css верстки, как flexbox. По данной технологии написано не мало пособий и руководств. Она проста, значительно облегчает разработку сетки web-проекта и поддерживается многими современными браузерами. Это делает её популярной технологией среди web-разработчиков.

Изучая новые для меня концепции, я стараюсь максимально сжато, но между тем информативно выразить изучаемое в графическом виде, отношении одних сущностей к другим, их взаимосвязь и поведение. И flexbox не стала для меня исключением. За несколько вечеров я собрал для себя обзорную «шпаргалку» по технологии, которая долгое время висела у меня на стене перед глазами, пока я не запомнил все основные моменты по технологии.

Практически все компании сейчас оказывают давление на сотрудников, побуждая их работать больше часов, чем указано в договоре. Это давление маскируется разными эвфемизмами: красивыми словами про миссию, личный вклад, марш-бросок. Те, кто изъявляет готовность перерабатывать, часто получают поощрительные знаки внимания от руководства: «Джо выложился на сто пятьдесят процентов, чтобы помочь нам достигнуть поставленных целей: работал допоздна, выходил на выходных. Он жертвовал своим временем ради нашей миссии».



К счастью, самому мне не приходилось работать в компаниях, где мое отвращение к сверхурочной работе встречало бы неодобрение. И все-таки я считаю, что недопустимо даже отзываться о такой практике одобрительно. Это симптом проблем, которые нельзя поощрять. Ни при каких обстоятельствах.

По сути своей, необходимость в переработке происходит от проблем с профессионализмом, расстановкой приоритетов и гибкостью. Я, по большей части, буду говорить о сверхурочной работе в IT компаниях, но то же самое негативное влияние на продуктивность и качество работы можно наблюдать и в любой другой сфере.

Пять стратегий доведения дел до конца

Случалось ли вам приходить на работу, садиться за компьютер, чтобы начать проект, открыть редактор, и потом просто пялиться в экран? Со мной это происходит постоянно, поэтому мне знакомы ваши мучения.

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

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

Это перевод статьи Rachel Andrew, являющейся одним из разработчиков спецификаций CSS.

В короткой серии статей я собираюсь потратить некоторое время на детальную распаковку Flexbox — точно так же, как я делала в прошлом с grid. Мы рассмотрим, для чего был разработан Flexbox, что он действительно делает хорошо, а когда мы не можем выбрать его в качестве способа компоновки.

В этой статье мы подробно рассмотрим, что на самом деле происходит при добавлении display: flex в вашу таблицу стилей.