А вы знаете что такое сверхахуительный оргазм? Это решение вьебически сложной фичи одной строкой кода 🤘

​​​​› Ахуенный дефолтный UX инпутов для мобил

Частенько далекие, от мира Сего, разрабы используют только input[type=text] вместо того, чтобы внести чутка больше магии ввиде UX для юзера. А еще чаще – подпиливают тонну пердежных плагинов в кастомные инпуты с всплывающими окнами, там где это не нужно и анриал юзать на тач-девайсах.

Приведу примеры отображения на iOS, Safari:
◦ Select – дропдавн с возможностью кастомизации через стили, с крутецким выбором пунктов на мобилах;
◦ input[type=date] – на мобилах имеет такой же барабан, как и select, но с тремя колонками и выбором дд/мм/гггг;
◦ input[type=tel] – создавался, как видно по названии, для инпутов ввода номера телефона, но может использоваться и для ввода цифровых данных. На мобиле отображает большие цифры, буквы не мешаются под рукой;
◦ input[type=email] – популярнейший тип инпута, наряду с input[type=password], созданный для ввода мыла. На клавиатуре появляется собачка (@);
◦ input[type=url] – крутое решение для инпутов ввода урлов: клавиатура пополняется тремя новыми клавишами - ., / и .com; ◦ input[type=search] – создан для инпута поиска по сайту. Надпись Enter заменяется на Search и при нажатии вызывает submit. К тому же, система распознает это поле и дает возможность искать по сайту, используя строку браузера (скриншот)

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

Ахтунг! Не стоит забывать что разные типы имеют свои собственные браузерные стили. Например, на iOS Safari:input имеет box-shadow, а input[type=search] закругленные углы.

И, конечно же, загуглив по запросу types of inputs html, вы найдете еще крутых типов инпута.

#ux #html

​​Интересно: Блок, который выглядит в разных браузерах по-разному

​​Смешнявка из жизни

– Ребят, у меня почему-то вылазит 500ая ошибка, что я делаю не так?
– У тебя ошибка в коде
– В скриптах?
– В генетическом

Интересная статья с полезными и малоиспользуемыми фишечками в Javascript для грамотных дэвов: HackerNoon

p.s. статья – он инглишь

Псс, смешнявки подъехали

Аппаратное ускорение для ваших перделок

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

will-change говорит браузеру о том, что пользователь, скорее всего, будет использовать эту анимацию и готовит девайс к её рендерингу.

Узнать больше о will-change можно здесь.

​​Ахуенные дэсигнеры с 2004

Каким же надо быть осталым дерьмоедом чтобы такое нарисовать, соболезную верстале. Повтыкать можно здесь, нужен LinkedIn

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

Таких в нашем городе тысячи. Я был пчелой, без имени и названия, заполняя чьи-то соты свои граммом меда. Короче, я был никем, и может быть стать хоть кем-то меня заставляло менять места.

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

Но потом я выучил жыквери с бутстрапом и понеслось – богатая жизнь, крутые тачки, громкие вечеринки и сотни самок.

Откопал заебатый кодепэн с различными возможностями pointer-events.

Конечно же, юзать такое в продакшне – уебанство, ведь есть жс-реализации, которые кроссбраузерные и работают без костылей. Но, чисто для понимания, сойдет.

​​Короче говоря, попал на интересную книгу...

Эта обложка так и манит почитать эту ёбень, прям вернулся в 90-ые, прямиком в утробе матери. Сама книжка 2012-ого года, а дизайн обложки про пиздец. А встречают, как говорится, по одежке.

Народная мудрость

При создании js-плагина сначала дайте ему пиздатое название и добавьте ".js" в конце. И только тогда приступайте к придумыванию ему функционала.

Хорошим примером будет pneumonoultramicroscopicsilicovolcanoconiosis

• Нет, я не умер
• Да, я хотел подготовить кое-что крутое, но оно опять оттягивается из-за тонны работы
• «Гы, держи найс css-перделку»

Тем кто не знает, тем кто забыл – полностью пьюр респонсив скваре для имаге, см. кодэпэн

#css

То чувство когда Google проиграл в appearance, сиризли?

Сказочный долбоёб

Как посещать веб-сайты в 2018 году: 10 простых шагов:

• Открываешь сайт
• Отказываешься от пуш-уведомлений
• Закрываешь уведомление о кукисах
• Закрываешь попап с предложением подписки
• Закрываешь онлайн-чат
• Закрываешь окошко «Ваш город ...?»
• Закрываешь окошко «Не нашли что искали? Оставьте телефон, мы сразу перезвоним»
• Закрываешь попап «Подпишитесь на наши соцсети»
• Отказываешься от скидки новым клиентам
• Вспоминаешь, зачем открыл этот сайт

пиздец житейский прикол, снимаю шляпу

​​Длина имеет значение

А вы знали что от длины названия класса зависит производительность? Бэнч показал то, что чем длинее имя класса – тем дольше время обработки. И да, конечно же, проблема в том, что код JS интерпретируется браузером.

Поэтому не забывайте минифицировать свой код перед продакшном, если не используете webpack, gulp и прочие радости бояр. Конечно же, разницу вы не почувствуете, ибо современные ПК позволяют забивать хуй на мелкий перфомэнс, но ваш продукт получит на одно зёрнышко "оптимизации" больше.

Детальнее, с возможностью проверить самому на своем устройстве: бэнчмарк

​​Ахуительная логика браузера

Что вы знаете о безысходности? Ваш браузер знает – то ли это явный пример расизма со стороны разрабов, то ли дефолтными цветами занимался дальтоник

Лайв пример: кодэручка

Слишком сильный украинский прїкол, осторожно