Будни разработчика

2021-06-29 16:56:26 #codepen дня

Даже не кодпен дня, а коллаборация дня. Это моя любимая тема.

Автор A выкладывает концепт, автор B дополняет его. Автор C анимирует и добавляет интерактива.

Следите за руками:

1. При помощи правила -webkit-background-clip: text; можно сделать полосатый текст, просто наложив градиент: https://codepen.io/TajShireen/pen/YzZmbep
2. Градиент может быть и коническим: https://codepen.io/argyleink/pen/XWRWagg
3. Или анимированным, используя Houdini и пользовательские свойства: https://codepen.io/bramus/pen/abWbvXJ
4. А ещё можно заставить градиент следить за курсором, используя всё те же пользовательские свойства: https://codepen.io/bramus/pen/PomoJym

Простой концепт, а сколько вариантов и идей.

#css #houdini #gradient #clip Открыть/Комментировать

2021-06-29 12:01:48 Хочешь научиться верстать? 

Лучший способ — это просто начать верстать! Для этого тебе понадобятся качественные макеты. Желательно чтобы это были не тренировочные макеты, а реальные, с которыми тебе придется работать каждый день. 

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

#реклама Открыть/Комментировать

2021-06-28 11:46:15 #статья дня

Как правильно настроить фавиконку или изображение для закладки на таскбаре или экране мобильного телефона? Сколько файлов нужно, какого формата?

Можно бездумно воспользоваться инструментами-генераторами вроде https://favicomatic.com/

Они сделают всю работу за вас, но я всё же предлагаю понять, что конкретно и как нужно делать.

А для этого — вот отличная статья Андрея Ситника из Evil Martians: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

1. favicon.ico для старых браузеров
2. SVG с версиями под тёмную и светлую темы для современных браузеров
3. PNG 180x180 для устройств Apple
4. PNG 192x192 и 512x512 для Android-устройств

Всё остальное — или устарело, или просто оказалось ненужным в современных реалиях, об этом даётся справка.

Ну и конечно, статья была бы не настолько хороша без инструкций по подготовке изображений. Всё отлично объяснено.

#svg #png #favicon #touch Открыть/Комментировать

2021-06-26 11:00:28 #фишка дня

А вы знали, что тег video поддерживает субтитры?

Ну, допустим, кто-то знал.

А вы знали, что эти субтитры можно ещё и стилизовать?

Через псевдоэлемент ::cue. Буквальный перевод — реплика. Кто бы мог подумать.

А вот и пример: https://codepen.io/alinaki/pen/qBreeBK

Обратите внимание на переданные в стили реплик параметры v и c. Самые наблюдательные уже заметили: разным героям — разный цвет слов.

Так вот, субтитры должны поставляться в файле особого формата — WebVTT (Web Video Text Tracks). И уже внутри разметки субтитров можно указать голосовые отрезки — voice spans, выглядящие как самые обычные теги:

[ evil laughter ]

Вот и получается, что реплики разных героев можно подсвечивать по-разному.

#html #video #subtitles #vtt #webvtt Открыть/Комментировать

2021-06-25 14:13:08 Клиент покинул чат — сборник самых идиотских решений твоего заказчика

https://t.me/clientochat

#реклама Открыть/Комментировать

2021-06-24 14:21:12 #статья дня

То тут то там можно услышать, что Google Chrome с 91 версии исправил что-то там в таблицах. А точнее, в их рендеринге. Но что конкретно?

А вот давайте и посмотрим, с примерами: https://www.bram.us/2021/06/21/tablesng-improvements-to-table-rendering-in-chromium/

Итак, по-порядку:

1. Ширина колонок наконец-то может быть в долях пикселей. 33.333px вместо 33px, 33px и 34px как было раньше.
2. TD/TH начали поддерживать writing-mode без дополнительных обёрток. Т. е. можно делать вертикальные заголовки и содержимое.
3. colgroup начал поддерживать схлопывание колонок (visibility: collapse).
4. Полноценная поддержка position: sticky на всех элементах таблицы.

К сожалению, в отстающих теперь Safari. Надеюсь, это ненадолго. У Firefox дела давно весьма хорошо.

Да и прогрессивное улучшение никто не отменял.

#css #table #sticky Открыть/Комментировать

2021-06-22 17:23:39 #инструмент дня

Знакомая ситуация?

Сегодня я представляю на ваш суд расширение для VS Code под названием Blockman: https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman

Что оно делает?

Всё просто: подсвечивает блоки кода, что очень часто бывает довольно удобно. Причём, не прямоугольниками, а всю область видимости целиком.

Да, VS Code подсвечивает парные скобки, но иногда этого бывает недостаточно. Просто посмотрите скринкасты со страницы расширения.

На самом же деле, чтобы не попадать в такие ситуации, старайтесь не допускать большой вложенности кода. Но уж если так получилось…

#vscode #extension Открыть/Комментировать

2021-06-22 13:00:15 FrontendQuiz задачи с собеседований - канал на котором публикуются задачки для фронтендщиков: 
алгоритмы, регулярные выражения, вопросы с интервью, задачи для Junior Frontend и разбор их решения.

Проверь свои знания на @frontendquiz

#реклама Открыть/Комментировать

2021-06-21 15:23:06 #статья дня

Тот случай, когда статья шестилетней давности не потеряла ни капли актуальности. Превращаем GIF в SVG и анимируем с помощью CSS: https://cssanimation.rocks/buffer/

1. Как векторизовать изображение (трейсинг).
2. Как разбить анимацию на составляющие (метод таймлайна).
3. И как, собственно, реализовать на ключевых кадрах.

Классика вечна :)

#css #svg #gif #animation Открыть/Комментировать

2021-06-18 23:30:00 #ссылка дня

Eleventy — это простой, но мощный генератор статических сайтов.

Суть его в том, что вы имеете доступ к мощной и разветвленной системе шаблонов, шорткодов и обработчиков запросов к разным API, но только в момент сборки. После чего получаете чистый HTML. Без CMS и прочего бакенда, пока сами не захотите. Мне вот нравится черновики статей в Markdown готовить.

Кайф в том, что Eleventy никак не ограничивает вас в инструментах сборки и постобработки. Webpack, Snowpack, Gulp — что угодно. Хоть виджеты на React вставляйте.

В общем, вот бесплатный курс по нему: https://piccalil.li/course/learn-eleventy-from-scratch/

Сейчас сам тоже его буду проходить. Ибо сайт канала максимально прост. Слишком прост

#11ty #eleventy #course Открыть/Комментировать