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

2023-07-03 13:01:39 Макеты для вёрстки сайтов — это канал, где собраны уникальные примеры реальных макетов в Figma, которые заказчики присылают на вёрстку. 

Учитесь, практикуйтесь, пополняйте свое портфолио настоящими работами вместе с @build_html Открыть/Комментировать

2023-07-03 08:24:21 #такое дня

Я в отпуске! Имею право запостить что-нибудь странное. Например, риторический вопрос.

Как вы думаете, в Кинопоиске и Яндексе хорошо тестируют? Ну так-то вроде должны, конечно, но, глядя на бесконечный cookie pop-up, у меня закрадываются сомнения.

Всё внимание на тень :) Я вообще сначала думал, что кнопка не работает.

И тянется это уже с полгода... Открыть/Комментировать

2023-07-02 09:14:16 #видео дня

Да, я нашёл это на Reddit (но я хотя бы признаюсь в этом, в отличие от… ).

Оригинальное название — как создать визуальный XOR-эффект на одном только CSS filter и mix-blend-mode (инвертирование по маске, короче). Но для этого стоило бы заодно код переписать в кодпен…

Поэтому делаем так: теперь это видео о том, как использовать Emmet будто ты бог вёрстки.

Эффективность 9000, короче.

#emmet #filter #blend #бородач Открыть/Комментировать

2023-07-01 19:01:40 Марафон по React: создание интернет-магазина!


Забудь о скучных проектах! Онлайн-школа веб-разработки "Methed" приглашает тебя покорить новые высоты вместе с нами на марафоне по React с 3 по 16 июля!

Мы с тобой разработаем уникальный интернет-магазин, который вызовет восторг у пользователей!

Какой марафон без топовой работы в портфолио? Результаты твоей работы с нашей командой будут выделяться в твоем портфолио!

Мы приготовили множество удивительных фишек из фронтенд-разработки, которые помогут воплотить любые твои идеи и сделают твои проекты ещё более захватывающими!

Самое интересное – цена! Стоимость марафона всего 1490 рублей! Это отличная возможность получить знания, опыт и востребованные навыки по приятной цене!

Не упусти шанс изменить свою карьеру и стать успешным веб-разработчиком! Регистрируйся сейчас и вступи в нашу команду победителей!

Ссылка для регистрации: https://in.methed.ru/md/3a31555c945ee7e23079ed38a373e58b?utm_source=telegram&utm_medium=june&utm_campaign=htmlshit Открыть/Комментировать

2023-07-01 16:00:44 #фишка дня

Пластмассовый мир победил, XML оказался сильней…

Но почему? Неужели всё настолько плохо?

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

Но погодите, ведь любой компонент в React это просто функция?

А значит, мы можем сообразить их композицию!


const AppProvider = compose(
UserProvider,
ThemeProvider.
MenusProvider,
SupportProvider,
ErrorProvider,
StateProvider,
);


И получить красоту: https://codesandbox.io/s/gprovider-composition-fkn93e?file=/src/App.js

Естественно, подход по своей сути применим ко всем компонентам.

Всё есть функция, котаны.

#react #fp #context #compose #бородач Открыть/Комментировать

2023-07-01 10:04:12 #ссылка дня

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

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

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

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

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

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

2023-06-30 18:01:37 Изучайте самые востребованные направления в разработке и получите возможность устроиться на работу в лидирующие компании!

На канале факультета программирования  вы найдёте контент, который поможет вам набрать скиллы в программировании: Q&A с преподавателями, гайды, реальный кейсы и мемы.

Погрузитесь в мир кодинга — подписывайтесь на канал факультета программирования! 

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

2023-06-30 12:47:58 #заметка дня

В чатах постоянно всплывает вопрос: «таблица ли это», — ну и картинка макета какая-нибудь.

Так вот, как правило, это всегда таблица. Есть построчное/поколоночное (такое слово есть вообще?) повторение данных — вот даже без сомнений.

Если решили сомневаться — точно делайте таблицу, поставить display flex или grid для адаптации вы всегда успеете.

Вот, посмотрите: https://codepen.io/tomhodgins/pen/akrRqX (тут используется препроцессор eqcss, так что рекомендую смотреть скомпилированный вид, это лишь демонстрация идеи).

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

А ещё таблицы могут вылезти в предпросмотре поиска Гугла или Яндекса, что хорошо скажется на SEO.

#css #table #grid #codepen #таблица #бородач Открыть/Комментировать

2023-06-29 16:42:05 #фишка дня

Использовать адрес электронной почты вместо логина — тема популярная и очень давняя.

Вот только чтобы автоподстановка в браузере работала корректно, указывать значение атрибута autocomplete нужно не email, а username. Такие дела.

С паролем похожая история. На регистрации надо указывать new-password, а на входе — current-password.

Где же почитать подробнее про все эти правила? Вот тут: https://web.dev/sign-in-form-best-practices/

Ну и в спецификации: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute

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

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

2023-06-28 10:24:40 #статья дня

Что делать, если использовать вариативный шрифт очень хочется, но он тяжёлый как мамка читера?

Например, вариативный Roboto весит 785 Кбайт. Да я в 785 Кбайт умещу код стартапа на миллион. Нужна же лишь часть начертаний и глифов, не все!

Стефан Юдис смог уменьшить этот размер до 58 Кбайт используя два инструмента:

Glyphhanger: https://www.stefanjudis.com/notes/glyphhanger-a-tool-subset-and-optimize-fonts/

И Slice: https://www.stefanjudis.com/notes/slice-an-app-to-remove-variable-font-axes/

Первый помогает оставить лишь нужные символы (глифы), а второй — убрать/ограничить оси вариативности.

Прекрасные инструменты, целый новый мир открывают.

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