Вступительный пост
Если Вы читаете это – поздравляю: Вы попали на самый первый пост этого канала. И, ах да, спасибо за то, что Вы уделили внимание моей уютной комнатке в этом большом мире Telegram.

Ну что же, расскажу, пожалуй, немного о себе.
Меня зовут Даниил, мне 21 год и я веб-разработчик. Более 7 лет я увлекаюсь и более 3 лет нахожусь в коммерческой веб-разработке. Я начинал с банальных веб-страничек на таблицах и прошел множество этапов формирования веб-сферы. На этом канале я попытаюсь делиться опытом как с новичками, так и со зрелыми бойцами нашей специальности дабы вместе поднимать скилл-лвл и делать собственное комьюнити интересных и приятных молодых людей.

Основной уклон мы сделаем на:
◦ Грамотность кода
◦ Фичи и лайфхаки веб-разработки
◦ Примеры крутых реализаций
◦ Новости мира Web
◦ Мысли о философских вопросах веба

И да... Добро пожаловать! Буду рад Вашей поддержке лайком и приглашением друзей, которые связаны с веб-разработкой 🙂

Запомните, Bootstrap — хуйня для ширпотребных проектов где похуй на интерфейс, а надо по-деревенски отобразить информацию. Если ты хочешь стать крутым дэвом - не юзай это говно. (Исключение - сайт на «быструю» руку с минимальным бюджетом или узкоспециализированный сайт, где важен именно бекенд)

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

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

Не будь говном — пили уникальные красивые проекты 🤟

​​Топ самых заебатых шрифтов на Google Fonts

Мини-шпаргалочка для тех, кто находится в поиске приятных шрифтов без всякой хуйни. Берем шрифты из ахуенного сервиса от гугла со фри-шрифтами онлайн и без регистрации

О Roboto, Open Sans и Ubuntu не буду писать – все и так понимают что это классика с вылизанными шрифтами и кучей стилей. Речь пойдет о менее популярных шрифтах.

◦ Source Sans Pro – приятный, на ощупь, овощь из Семейства сансов. Есть поддержка кириллицы (і мови), множество стилей.

◦ Merriweather – не сансовый шрифт, который можно использовать, особенно для заголовков. В полотне текста выглядит специфично, но приятно. Есть поддержка кириллицы (і мови), множество стилей.

◦ Exo 2 – Неплохой шрифт для полотна текста и мелких букв, на любителя. Куча стилей, поддержка кириллицы (но увы, без мови).

◦ Fira Sans – есть кириллица, есть много стилей. Менее вылизан, больше подходит в жирных очертаниях.

◦ Lato – приятно выглядит в жирных вариациях либо заголовках. В полотне текста не оч. Нету поддержки кириллицы (жирный минус), учитывая что сделали его поляки. Зато стилей много.

◦ Lobster – Пиздецки специфический шрифт, мало где пригодится, но имеет приятный рукописный вид. Стилей вообще нету, зато есть поддержка кириллицы (і мови).

​​› Курсор: мелочь, но приятно

Смена стэйта курсора... Вроде бы мелочь, но в совокупности интерфейса и его восприятия делает невероятную штуку – интуитивно показывает пользователю то, где он сейчас "находится". Не забываем то, что курсор – вещь, которая всегда в фокусе, ведь это главный элемент взаимодействия с веб-интерфейсом. Многие разрабы забивают болт на дефолтные возможности браузера и системы, делая тонну визуальных перделок на css-js. А все потому что они мудаки. Не будь как они – юзай курсоры.

Нахуй надо? Все просто, наведу примеры использования:
◦ Навел на ссылку или активный элемент? Получил "активный" курсор.
◦ В области изображения, которое можно увеличить? Получил курсор "зума".
◦ Пользователь вынужден подождать ответа из сервера? Получает курсор "ожидания".
◦ Неактивный компонент? Получай "запрещенный" курсор!
Таких примеров множество. Это не сложно, зато вы получаете огромный респект от тех, кто зашел на веб-сайт и вынужден изучать ваш интерфейс.

Лайв-пример: ссылка на дефолтные и реализацию кастомных курсоров

#ux #css

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

​​​​› Ахуенный дефолтный 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, сиризли?

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