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

2023-03-30 14:22:19 #такое дня

TFW тебе даже отвечать не надо, настолько ты крутой. Открыть/Комментировать

2023-03-29 17:18:55 #фишка дня

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

Вот сказал я, берёте картинку, режете на 9 кусочков — и долбитесь в псевдоэлементы... А подписчик, мол, дядя, на дворе 2023 год, пора бы научиться в border-image. И я такой: «А, чо? В смысле?».

Короче, это я к тому, что свиток на картинке из поста выше верстается в один элемент и одну строку CSS!

Ну вот, посмотрите: https://codepen.io/mdss/pen/KKxEJWQ

Развиваемся, котаны. Развиваемся.

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

2023-03-28 14:19:59 #заметка дня

Плоские интерфейсы вошли в нашу жизнь лет 10 назад и уходить не собираются.

Набора из linear-gradient, box-shadow, drop-shadow, border-radius хватает практически на всё. Вот такое сверстать не проблема: https://codepen.io/joshnh/pen/DmdxLY

Но так было не всегда и до сих пор в игроподобных интерфейсах можно заметить весьма сложно оформленные элементы. Например, кнопки с орнаментом. Как же их верстать?

На помощь приходят таблицы и т. н. техника сдвижных дверей (sliding doors).

Другое название таблиц — 9-slice scaling. Есть плагины для Figma, позволяющие легко резать картинки. В итоге остаётся сверстать, используя background-repeat, псевдоэлементы или border-image.

Суть же дверей в том, что у вас есть один неподвижный элемент с достаточно длинным нужным паттерном и второй — это его завершение. Раньше решалось двумя тегами, а нынче — псевдоэлементы решают: https://codepen.io/chriscoyier/pen/rZPPOd

Если интересно — следующим постом могу дать больше примеров. Голосуем

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

2023-03-27 14:34:41 #фишка дня

В Safari Technology Preview наконец-то стал поддерживаться @counter-style!

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style

Что это значит?

Что наконец-то можно адекватно использовать все возможности стилизации списков, а не выдумывать псевдо- и обычные элементы просто чтобы добавить иконки к элементам списка. Да и не только иконки: больше не надо долбиться в ручной counter-increment.

От простых букв и цифр до эмодзи и картинок. Например, захотелось вам изобразить первое, второе и третье место с помощью эмодзи, нет ничего проще: https://codepen.io/alinaki/pen/WNgmeLg

К сожалению, картинки пока не поддерживаются нигде... но это вопрос времени. Эмодзи-то можно

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

2023-03-27 11:31:01 Коротко и по работному делу!

— Море IT вакансий на удалёнку разработчикам и джунам, стажёрам!
— Каждый день
— Прямые контакты эйчаров


Погнали Подписаться на канал Открыть/Комментировать

2023-03-26 19:50:09 #перевод дня

Я тут не так давно постил шикарную статью о том, как рисовать веревку (канат) на основе любого SVG-контура:
https://t.me/htmlshit/1819

Оказывается, на Хабре есть её перевод, который я почему-то пропустил!

Вот он: https://habr.com/ru/company/nmg/blog/719822/

Что статья, что перевод отличные и достойны пристального внимания. Даже если ты никогда в жизни веревку не применишь (ну не каждый же человек делает сайты браслетам с якорями, правда?), сам подход к расстановке приоритетов и отрисовке геометрии — очень полезен.

Я сам очень часто сначала рисую анимацию или схему, а потом уже верстаю.

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

2023-03-25 19:54:30 #заметка дня

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

А что, это же так естественно и удобно, пространство имён не засоряется...

Нет! Нет и ещё раз нет. Каждый раз, когда происходит ререндер родителя, будет происходит и ререндер дочернего компонента.

Чем это чревато? Ну, например, объявленный вами инпут будет, как минимум, терять фокус.

Вообще, у Алекса Сидоренко, на чей твит выше я сослался, огромное количество полезных советов о внутрянке React. Крайне рекомендую, котаны. От души.

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

2023-03-25 11:46:35 #фишка дня

Есть псевдокласс :disabled, который выберет отключенные поля. Есть псевдокласс :read-only, который выберет недоступные для ввода поля (только для чтения).

Вот только есть нюанс.

Отключенные поля они так-то тоже для ввода недоступны. Как же тогда быть?

Использовать селектор атрибута: [readonly].

Пример: https://codepen.io/elad2412/pen/wvpmjGR

Отличие disabled-полей от readonly: первые не отправятся с формой вообще, а значение вторых просто нельзя изменить.

Скелетон вернётся с новыми подробностями о фронтенде завтра.

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

2023-03-24 11:00:50 Создайте навык Алисы

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

И это не предел — постоянно появляются новые сценарии использования. Их может добавлять не только команда Яндекса, но и все желающие — от разработчиков до простых пользователей.

Чтобы создать навык Алисы быстро и просто, используйте serverless-решения Yandex Cloud:

— все необходимые компоненты и технологии в рамках одной платформы;

— использование функций Cloud Functions для навыков Алисы не тарифицируется;

— управление сервером, администрирование, обновление ПО и интеграцию Yandex Cloud берёт на себя;

— автомасштабируемое окружение справится с любыми нагрузками, в том числе нерегулярными и непостоянными;

— доступна подробная документация, пошаговые инструкции и вебинары о создании навыков Алисы в экосистеме serverless.

Узнайте больше и создавайте навыки Алисы с помощью serverless-решений Открыть/Комментировать

2023-03-23 16:13:16 #статья дня

Помните пост про шейдеры? https://t.me/htmlshit/1865

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

Немного математики, немного программирования — и вот уже получается классический google-style спиннер: http://pixelscommander.com/interactive-revolution/glsl-web-components-webgl/

Вы наверняка видели такие на SVG, но вряд ли — на WebGL :)

Вход в шейдеры очень прост, а вот выхода можно и не найти....

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