Как стать автором
Обновить
0
0
Григорий @sordes

Пользователь

Отправить сообщение

Среднеформатная пленочная фотография в близком инфракрасном спектре

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


Читать дальше →
Всего голосов 40: ↑37 и ↓3+34
Комментарии94

Рассылай и властвуй: вёрстка рассылки тогда и сейчас

Время на прочтение8 мин
Количество просмотров15K
image

Их читают миллионы людей по всему миру. Их добавляют в спам, удаляют навсегда, но без них немыслим современный интернет. Многие фронтендеры пойдут на всё, что угодно, лишь бы отвертеться от работы над ними. Мой рассказ — об электронных письмах, о том, как они изменились за 20 лет и о том, как современному фронтендеру не впасть в депрессию, верстая их. Это первая статья из цикла, в которой я расскажу о том, как всё начиналось. Через пару недель поговорим о инструментах разработки и тестирования рассылки.
Утри слёзы, верстальщик
Всего голосов 38: ↑37 и ↓1+36
Комментарии9

Чего мне никогда не говорили о CSS

Время на прочтение4 мин
Количество просмотров41K

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

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

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

Чтобы исправить это, я провела некоторые исследования и составила небольшой список понятий, которые считаю интересными и полезными для лучшего понимания и написания CSS.
Читать дальше →
Всего голосов 50: ↑43 и ↓7+36
Комментарии36

Всё, что нужно знать об автоматических переносах в CSS

Время на прочтение6 мин
Количество просмотров47K


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

Я рассказал о некоторых золотых правилах типографики в интернете, а потом во время секции QA меня спросили о текущей ситуации с автоматическими переносами в вебе. Это хороший вопрос, особенно с учётом того, что немецкий язык знаменит часто используемыми длинными существительными (например, Verbesserungsvorschlag означает «предложение для улучшения»), поэтому переносы широко используются в большинстве письменных носителей.
Читать дальше →
Всего голосов 31: ↑31 и ↓0+31
Комментарии11

Учим CSS Grid за 5 минут

Время на прочтение3 мин
Количество просмотров88K
Быстро познакомимся с будущим макетов веб-сайтов.

image

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

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

В этой статье я быстренько расскажу вам об основах CSS Grid.
Читать дальше →
Всего голосов 22: ↑21 и ↓1+20
Комментарии18

Делаем адаптивный HTML, добавляя одну строку в CSS

Время на прочтение4 мин
Количество просмотров192K
image

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

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

Рассмотрим все подробнее.
Читать дальше →
Всего голосов 67: ↑66 и ↓1+65
Комментарии103

AMP: будущее электронной почты

Время на прочтение4 мин
Количество просмотров19K

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


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


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

Читать дальше →
Всего голосов 38: ↑32 и ↓6+26
Комментарии63

Инструменты для создания адаптивного сайта без доступа к сайту

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

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

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



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

Читать дальше →
Всего голосов 16: ↑16 и ↓0+16
Комментарии11

Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence

Время на прочтение17 мин
Количество просмотров5K

Узнайте, как использовать мощный примитив 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


Всего голосов 6: ↑6 и ↓0+6
Комментарии0

Кастомизируем select на чистом css

Время на прочтение4 мин
Количество просмотров96K
Как-то вечером я убивал время, читая статьи в интернете, и наткнулся на вот этот хабропост пользователя Cyapa, где расписано, как кастомизировать select на чистом css. В процессе просмотра данного решения нашел несколько весьма неудобных моментов, которые постарался исправить в своем решении этой задачи. Итак, приступим.
Читать дальше →
Всего голосов 14: ↑12 и ↓2+10
Комментарии12

Параллакс на чистом CSS

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

Параллакс почти всегда создаётся с помощью JavaScript и, чаще всего, получается ресурсоёмким, из-за вешания листенеров на событие скролла, модификации DOM напрямую и срабатывания ненужных перерисовок и перестановок. Всё это происходит асинхронно с потоком, в котором браузер рендерит страницу, из-за чего скролл начинает подтормаживать, а картинка рваться на части. Более правильные реализации параллакса отслеживают скролл и используют отложенные обновления DOM с помощью requestAnimationFrame. Получается качественной другой результат, но почему бы вообще не избавиться от JavaScript?
Читать дальше →
Всего голосов 59: ↑54 и ↓5+49
Комментарии48

8 приемов работы с CSS: параллакс, «липкий» футер и другие

Время на прочтение4 мин
Количество просмотров63K


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

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

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

Я покажу несколько приемов и расскажу о принципах их использования в CSS. Сама по себе статья не о сложностях. Наоборот, она призвана сделать вашу работу более комфортной.
Всего голосов 38: ↑37 и ↓1+36
Комментарии17

Эффекты фильтрации SVG. Часть 7. Продвижение вперед

Время на прочтение5 мин
Количество просмотров2.7K

Предлагаемая серия статей "Эффекты фильтрации 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 фильтрации побольше.




Всего голосов 7: ↑6 и ↓1+5
Комментарии0

Градиентные границы в CSS

Время на прочтение3 мин
Количество просмотров55K

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

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

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

результат

Читать дальше →
Всего голосов 20: ↑20 и ↓0+20
Комментарии12

Фронтенд, алгоритмы и опоссум Фридрих. Разбираем задачи конкурса Яндекса

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



Задача 1


Первая задача должна была быть разминочной, на 20 минут, и мы решили сделать ее условие таким, чтобы она легко решалась с помощью регулярных выражений.
Читать дальше →
Всего голосов 25: ↑25 и ↓0+25
Комментарии16

Как на самом деле работают z-index

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

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

image
Читать дальше →
Всего голосов 20: ↑18 и ↓2+16
Комментарии9

Flexbox. Инфографика по технологии

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

Изучая новые для меня концепции, я стараюсь максимально сжато, но между тем информативно выразить изучаемое в графическом виде, отношении одних сущностей к другим, их взаимосвязь и поведение. И flexbox не стала для меня исключением. За несколько вечеров я собрал для себя обзорную «шпаргалку» по технологии, которая долгое время висела у меня на стене перед глазами, пока я не запомнил все основные моменты по технологии.
Читать дальше →
Всего голосов 24: ↑16 и ↓8+8
Комментарии14

Переработка вредит и продуктам, и сотрудникам

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



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

По сути своей, необходимость в переработке происходит от проблем с профессионализмом, расстановкой приоритетов и гибкостью. Я, по большей части, буду говорить о сверхурочной работе в IT компаниях, но то же самое негативное влияние на продуктивность и качество работы можно наблюдать и в любой другой сфере.
Читать дальше →
Всего голосов 26: ↑25 и ↓1+24
Комментарии26

Как делать дела, когда их не хочется делать

Время на прочтение6 мин
Количество просмотров25K

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


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

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

Ваш разум может быть занят внешними событиями – проблемами в семье, разрывом отношений, больным домашним животным – из-за чего будет трудно сконцентрироваться. На работе, конечно, тоже бывают проблемы, из-за которых сложно почувствовать мотивацию. Плохой обзор вашей работы может сбить ваш настрой. А если вы изо всех сил работаете над проектом, который ваш менеджер не ценит, вы можете задуматься над тем – зачем же вы так напрягаетесь.
Читать дальше →
Всего голосов 14: ↑12 и ↓2+10
Комментарии18

Что происходит при создании контейнера Flexbox?

Время на прочтение9 мин
Количество просмотров26K

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


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


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

Всего голосов 23: ↑22 и ↓1+21
Комментарии22

Информация

В рейтинге
Не участвует
Откуда
Россия
Дата рождения
Зарегистрирован
Активность