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

2023-03-22 13:25:38 #ссылка дня

А как сделать кнопку? А как тулбар? А как сверстать несколько колонок с перекрытием? А если мне анимации стандартные не подходят?

Ни слова больше! Google has us covered!

https://web.dev/patterns/

От простых вещей вроде кнопки или описания кривой Безье для анимации до загрузки файлов, работы с буфером обмена и превращения сайта в PWA.

Хотелось бы больше примеров, конечно, но кому не хочется? :)

#web #app #patterns #бородач Открыть/Комментировать

2023-03-22 09:30:34 Лучший источник макетов для практики верстки

Макеты для верстки  — канал, где собраны уникальные примеры реальных макетов в Figma, которые заказчики присылают на вёрстку Открыть/Комментировать

2023-03-21 10:49:56 #фишка дня

Элемент fieldset — штука со сложной судьбой. Вас никогда не удивляло, что тег, предназначенный, казалось бы, для группировки элементов — никогда для этого не используется? Почему?

Ну вот, например, Bootstrap 5: https://getbootstrap.com/docs/5.3/forms/input-group/

Там div, не fieldset.

Всё потому, что до недавнего времени комбинация fieldset+legend отрисовывалась виджетами ОС. Как, например, те же select и button. И даже flex-модель в них не работала правильно:

Баг Chrome (исправлено в 86)
Баг Firefox (исправлено в 46)

К счастью, это изменилось и использовать fieldset можно ровно так же как и другие элементы.

Тем более, что никто не отменял его одной очень интересной фишки: атрибут disabled будет отнаследован всеми вложенными элементами!

Вот так: https://codepen.io/alinaki/pen/NWLOPqy

Где это может пригодиться?

Очевидно, если есть группа кнопок для отправки формы, а обычно это submit+reset, но может быть и несколько submit-ов на разные адреса, можно не отключать их по одной, а просто положить в fieldset и отключить разом.

Ну или всю форму, при желании.

P. S. disabled дело не ограничивается, invalid тоже работает, введите что-нибудь в текстовое поле: https://codepen.io/alinaki/pen/VwGELwr

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

2023-03-19 12:40:45 #объяснение дня

Вы бы так на обычные посты реагировали, котаны и котанессы :) Более 70 реакций!

Ну что же, давайте разбираться, в чём же секрет. Каким же образом с помощью псевдокласса :has можно сымитировать обращение к предыдущему элементу.

Значащий код:

.element:has(+ .element:hover).

Давайте по пунктам. Плюс — "+" — это селектор соседнего элемента, вниз по DOM на одном уровне. Важно понимать, что только одного, следующего.

Псевдокласс :has же в свою очередь выделит элемент, в котором присутствуют элементы, подпадающие под селектор в скобках. То есть, если есть структура:

link

link

...то селектор .element:has(a:hover) выделит тот параграф, в котором ты навёл мышкой на ссылку. Или, например, можно подсветить форму, в которой есть обязательный, но не выделенный чекбокс: https://codepen.io/alinaki/pen/bGxjOgm

В общем, здесь всё просто и понятно, но что случится, если объединить две эти сущности?

Вернёмся к значащему коду:

.element:has(+ .element:hover).

Выглядит как бред, ведь оба элемента на одном уровне, ну, по условию плюса. И никакой :has там не применим, одно в другое не входит!

Не-не, не торопись. :has не имеет отношения к DOM, он не значит "содержит в себе".

Псевдокласс :has это часть CSSOM, объектной модели CSS и означает "имеется ли нужный селектор в пространстве тех, которые вообще можно вокруг этого элемента написать".

В данном случае это значит, будет ли иметь хоть какое-то воздействие и смысл селектор + a.hover, или нет.

Грубо говоря, у каждого элемента есть своё "облако" удовлетворяющих условий, браузер ими и оперирует.

Вот и получается следующая картина: https://codepen.io/alinaki/pen/mdGjaLL?editors=1100

Ну и вариант повеселее: https://codepen.io/jh3y/pen/abGPKGO

Мыслите шире, котаны и котанессы :)

Ну и статья в помощь: https://webkit.org/blog/13096/css-has-pseudo-class/

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

2023-03-17 16:01:59 #подкаст дня

Немного оффтопа про электрокары. Первый электрический автомобиль появился далеко не с выходом Tesla, а полтора века назад — в 1841 году.

В 1899 году электромобиль поставил рекорд в 105 километров в час и проехал 130 километров на одной зарядке.

Но на 100 лет вперёд распространение получили двигатели внутреннего сгорания. И получается, что сейчас Илон Маск развивает давно забытую технологию.

Та же аналогия прослеживается и с базами данных.

Объектно-ориентированные БД появились в 80-х годах прошлого века, а распространение получили только с приходом концепции NoSQL.

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

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

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

2023-03-17 12:05:20 #ссылка дня

Комиксы о веб-разработке должны быть нарисованы с помощью веб-технологий и точка! Всё остальное — ересь и подделки!

Во всяком случае, так считает автор блога Comicss: https://comicss.art/

Каждый комик-стрип на его сайте нарисован с помощью CSS и HTML. Буквально.

Потом, конечно, сконвертирован в webp/png, но к каждой картинке можно посмотреть исходный код.

Максимально забавный подход.

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

2023-03-16 19:21:01 #codepen дня

Не перестаю орать с того, что в 2023 году написать свою анимацию а-ля dock в macOS – это буквально три значащие строчки кода:

a:has(+a:hover){
--lerp:var(--lerp-1);
translate: 0 calc(var(--lerp) * -75%);
}

https://codepen.io/jh3y/pen/mdxggmO

Конечно, примеров подобных масса, сходу: https://codepen.io/chriscoyier/pen/qBoogaX

Что их объединяет? Имитация селектора "предыдущего" элемента, конечно же.

Если требуется чуть больше пояснений — ставьте лайки, чо

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

2023-03-16 10:30:15 #такое дня

Я знаю отличную шутку про UDP, но не уверен, что что она до вас дойдет.

Не знаю, что тут ещё сказать. Ну не считаешь ты нужным задавать такие вопросы на собеседовании — ну не задавай. Не знать тоже имеешь право. Не понимать — тем более.

Но нести херню, пожалуй, не стоит.

P. S. если кто не в курсе, что такое TCP/UDP — в комментариях пример.

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

2023-03-15 19:30:58 #заметка дня и #codepen

Лет шесть назад поступил мне заказ от агентства, работающего на некий автозавод. Они хотели «разрезать» машину под углом, представив её в двух ипостасях: для отдыха и для работы.

К сожалению, набор браузеров не позволял просто взять clip-path. Поэтому я даже немного завидую людям, который вошли в мир промо-сайтов в последние пару-тройку лет.

Что же пришлось делать? Немного геометрии! И забавных визуальных хаков.

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

Где-то у меня даже завалялась бумажка с расчётами… если интересно будет кому — можно восстановить.

Ну и, конечно, с использованием CSS-переменных код стал в два раза меньше только за счёт того, что не пришлось клеить строки стилей.

Десктоп: https://codepen.io/alinaki/pen/MWGMLey?editors=0010

P. S. если вам нужны подобные изображения — ищите по запросу macos dynamic wallpaper.

#css #geometry #бородач Открыть/Комментировать

2023-03-15 17:01:01 Хотите создавать высоконагруженные сервисы в сферах онлайн-ритейла, доставки, финтеха, интернета вещей? Тогда вам нужно изучать язык программирования Golang на курсе Яндекс Практикума «Профессия Go-разработчик».

В профессии две программы: обучение до уровня Junior+ и обучения до уровня middle. Обратите внимание, эти курсы подходят только тем, у кого есть опыт разработки, нужно будет пройти входной тест и узнать свой уровень.

Как вы будете учиться
• Сразу писать боевой сервис.
Вы будете писать один большой проект на протяжении всего курса, постоянно пополняя, усложняя и модифицируя кодовую базу. Кроме того, в уроках будет много практических заданий, которые вы сможете выполнять в любимой среде разработки.
• Общаться с менторами — senior Go-разработчиками.
У вас будет ментор — действующий senior Go-разработчик, который будет помогать находить ответы на вопросы, проверять ваш код, проводить вебинары для разбора задач. 
• Готовить выпускной проект.
После прохождения основной программы у вас будет время написать выпускной проект для вашего портфолио. Вы сможете объединиться в команды или работать самостоятельно, реализовать свою идею или взять за основу один из предложенных вариантов.

Мы не дадим вам просесть по учёбе и поможем выкроить время на образование. Команда карьерного центра подготовит вас к разговору о повышении или поможет с поиском новой интересной и перспективной работы во время и после обучения.

Выберите курс, который соответствует вашему уровню знаний: https://practicum.yandex.ru/promo/go-profession

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