[Перевод] Скрытые возможности элемента <input>

[Перевод] Скрытые возможности элемента <input>

Элемент в HTML самый интересный. Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид (зачастую в ущерб стилистике). Элемент отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме. В этой статье я опишу не только различные типы , но и сопутствующие атрибуты,

Подробнее
Кодим 24/7: Прокачиваем продуктивность в условиях жесткого цейтнота

Кодим 24/7: Прокачиваем продуктивность в условиях жесткого цейтнота

Привет! Меня зовут Михаил, я Senior Software Developer в YouHodler. Мы занимается оказанием банковских и биржевых услуг в сфере криптовалюты. Компания имеет несколько финансовых лицензий, которые позволяют нам работать на различных рынках. Однако финансовые лицензии означают регулярные аудиты, о чем я вам сейчас и расскажу. Читать далее

Подробнее
Увлекательный мир фронтенда

Увлекательный мир фронтенда

Фронтенд-разработка — это как собирать лего без инструкции: иногда весело и творчески, но порой ты забираешься на кровать и кричишь: «*@#%*, да где же этот пропавший блок?!» Каждый новый проект во фронтенде — это как уникальный набор лего, и ты никогда не знаешь, какие интересные вызовы подкинет он на этот раз. В этой статье, опираясь на личный опыт, я расскажу, что такое современный фронтенд, какие задачи решают фронтендеры и что вообще происходит в мире фронтенда. Читать далее

Подробнее
Обзор на новую CSS-in-JS либу от Facebook* – StyleX

Обзор на новую CSS-in-JS либу от Facebook* – StyleX

Недавно компания Facebook* (aka Meta**) выпустила в опенсорс собственную CSS-in-JS библиотеку под названием StyleX. По заявлениям разработчиков, она отлично подходит для больших проектов и ключевым ее преимуществом является перфоманс. В этой статье мы рассмотрим пример использования, основные функции и особенности данного решения. Читать далее

Подробнее
Неизвестно полезный CSS

Неизвестно полезный CSS

CSS не отстаёт от JavaScript. Постоянно развивается. Классно же. Мне особенно радостно видеть, как старые задачи, которые я решал при помощи костылей, теперь можно сделать при помощи одного свойства. Только многие фишки неизвестны широкому кругу разработчиков. Честно говоря, некоторые я сам узнал недавно. В любом случае так дальше нельзя. Надо исправлять ситуацию! Я собрал фишки, которые могут быть полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса…

Подробнее
[Перевод] Atomic CSS здорового человека. UnoCSS

[Перевод] Atomic CSS здорового человека. UnoCSS

Продолжение перевода статьи «Reimagine Atomic CSS» двухлетней давности одного из членов команды Vue core Anthony Fu, автора UnoCSS, в которой рассматривается уже сам UnoCSS. Читать далее

Подробнее
[Перевод] Atomic CSS здорового человека

[Перевод] Atomic CSS здорового человека

Перевод статьи «Reimagine Atomic CSS» двухлетней давности одного из членов команды Vue core Anthony Fu, автора UnoCSS, в которой обсуждается концепция Atomic CSS, плюсы и минусы Tailwind и Windi CSS Что такое Atomic CSS? Для начала давайте дадим правильное определение атомарному CSS. Из этой статьи Джона Полачека: > Атомарный CSS — это подход к архитектуре CSS, при котором предпочтение отдается небольшим, одноцелевым классам с именами, основанными на визуальной функции. Читать далее

Подробнее
Tailwind vs BEM — 2 (архитектура)

Tailwind vs BEM — 2 (архитектура)

Статья рассматривает возможные задачи верстки на разных проектах и как с ними справляются две разные архитектуры: Tailwind CSS и ванильный CSS + BEM. Читать далее

Подробнее
Tailwind vs BEM — 1 (сравнение производительности)

Tailwind vs BEM — 1 (сравнение производительности)

В этих двух статьях я буду сравнивать TailwindCSS с чистым CSS + BEM. Цель - разобраться что является лучшим решением для хорошей архитектуры приложения. Это не вопрос предпочтений, от этого выбора будет зависеть очень многое на поздних этапах разработки и оно должно быть очень хорошо обосновано. Начну со сравнения производительности. Tailwind позволяет значительно уменьшить размер итогового CSS и тем самым ускорить время отображения страницы. Но это сработает только в том случае, если

Подробнее
Сокровища HTML: 7 тегов, которые упростят вам жизнь

Сокровища HTML: 7 тегов, которые упростят вам жизнь

Все мы знакомы с широко используемыми HTML тегами, такими как , , , и . Однако, существуют HTML - теги, которые могут упростить жизнь, и вместо написания дополнительного кода, выполнят всю работу :) Читать далее

Подробнее
Как наложить макет на вёрстку через PerfectPixel

Как наложить макет на вёрстку через PerfectPixel

Привет! Меня зовут Сергей Криворучко, я работаю наставником на курсе «Фронтенд-разработчик» в Практикуме. Иногда у студентов возникают сложности с PerfectPixel — расширением Chrome, совмещающим макет из Figma с вёрсткой в браузере. В этом материале я расскажу, как корректно экспортировать макет, установить PerfectPixel, управлять расширением и находить элементы страницы, которые стоит поправить на вёрстке. Для примера взял макет, с которым работают студенты на курсе. Читать далее

Подробнее
Как вписать блоки в страницу или в контейнер? Используйте css grid

Как вписать блоки в страницу или в контейнер? Используйте css grid

Я на днях обнаружил печальную вещь. Хотя стандарт css grid существует не первый год, многие до сих пор то ли не знают о нем, то ли не понимают, для чего он нужен. Я крайне редко вижу его практическое использование. При этом существует задача, которая нормальным образом решается только через grid. Речь идет о вписывании верстки в родительский контейнер, будь то виджет или страница в целом. В итоге создание подобной верстки происходит либо с помощью костылей (если использовать обычную

Подробнее