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

2021-05-12 10:30:01 #фишка дня

Наверняка вы встречали подобные (на иллюстраци) предложения по генерации пароля. Заставить браузер предложить подобное на форме регистрации довольно просто: достаточно установить значение атрибута autocomplete как new-password.

Это не первый раз, когда у нас заходит речь об этом зачастую раздражающем атрибуте. Например, не так давно я писал заметку о том, как заставить Safari перестать пытаться исправить ваш одноразовый код: https://t.me/htmlshit/477

Но нелишним будет ещё раз напомнить: не забывайте про MDN. Все возможные значения автодополнения там отлично расписаны: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values

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

2021-05-11 19:20:04 #инструмент дня

Для понимания того, как работает 3D в CSS, очень важно иметь перед глазами что-то более наглядное, чем бесконечные красивые CodePen’ы. И теперь такая наглядная шутка есть. Встречайте: генератор кубов на CSS. Ну и параллелепипедов.

Экспорт в Pug+SCSS, HTML+CSS. Ну и их комбинация, очевидно.

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

@htmlshit
#css #3d #generator Открыть/Комментировать

2021-05-11 12:21:57 Знаете ли вы, что в телеграм есть канал, на котором публикуются анонсы бесплатных онлайн-мероприятий по разработке — @ITMeeting?

Здесь вы найдете митапы и конференции на любой вкус - backend, frontend, QA, DevOps, AI, ML, BI и многое другое!

Подписывайтесь на канал @ITMeeting, чтобы не пропустить интересные мероприятия по своей специальности!

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

2021-05-10 11:12:00 Открыть/Комментировать

2021-05-08 12:00:30 #статья дня

Это настолько великолепная и нужная статья, что я решил не ждать до следующих будней.

Итак, нужны ли вендорные префиксы в 2021 году?

Короткий ответ: да, нужны.

Длинный ответ, собственно: https://css-tricks.com/is-vendor-prefixing-dead/

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

Статья предоставляет детальный разбор каждого свойства под актуальные (not dead) браузеры в виде таблиц и примеров.

Да ёлки, она даже как закладка хороша!

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

2021-05-06 11:00:40 #заметка дня

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

Возьмём, например, чередующиеся колонки. Это очень часто встречающийся вопрос. В первой строке 3, во второй 2, в третьей опять 3 и так далее.

Первая мысль – перед нами грид. Но CSS Grid сам по себе не решает вопрос повторяющихся шаблонных структур, в любом случае приходится применять nth-child. Так какая тогда разница?

Давайте просто сделаем:
https://codepen.io/alinaki/pen/zYNVqvL

И то же самое на гридах:
https://codepen.io/alinaki/pen/NWdZNGd

Число строк совершенно одинаковое. Возможно, на гридах и элегантнее, решать вам.

Бонус, flexbox + gap:
https://codepen.io/alinaki/pen/mdWdLrw

А вот яркий пример того, чего на флексе точно не сделать без дополнительных обёрток:
https://codepen.io/alinaki/pen/QWdXNYm

#css #flexbox #grid #flex Открыть/Комментировать

2021-05-05 18:00:17 #статья дня

Ахмад Шадид разбирает, как прогрессировала кроссбраузерная веб-разработка за 10 лет: https://ishadeed.com/article/cross-browser-development/

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

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

Плюс, дана краткая справка по нынешнему состоянию дел.

@htmlshit
#css #supports Открыть/Комментировать

2021-05-05 14:23:25 Вебинар «Конечные автоматы в реальной жизни».

Наставник курса «Мидл фронтенд-разработчик» Захар Овчаров расскажет про применение автоматов, а выпускник курса Антон Субботин попытается понять, зачем всё это нужно и как применять.

Что будет на вебинаре:

1. Поговорим про абстрактные машины, не существующие в реальности. Вы увидите, как на их основе строятся алгоритмы решения широкого круга задач.
2. Разберём на примерах, как работают конечные автоматы и где находят применение.
3. Построим небольшой конечный автомат для валидации и допуска строк пользовательского ввода.
4. Обсудим использование, сложности и ограничения конечных автоматов для решения прикладных повседневных задач.

Для кого?

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

8 мая в 15:00 (Мск)

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

2021-05-04 13:01:13 #фишка дня

TIL что в CodePen можно просто бросать файлы и он их подхватит. Подумалось, а нет ли возможности извлекать разметку, стили и скрипты из локальных файлов и забрасывать их в CodePen максимально автоматизированно?

Так вот, есть! Утилита буквально называется codepen-prefill и создана именно для этой цели: https://github.com/yuanchuan/codepen-prefill

npx codepen-prefill index.html

Извлечёт все встроенные стили и скрипты из файла и закинет их в окно редактора. Останется лишь сохранить.

@htmlshit
#codepen #npm #npx #utility Открыть/Комментировать