Как стать автором
Обновить
45.18

CSS *

Каскадные таблицы стилей

Сначала показывать
Порог рейтинга
Уровень сложности

Фонетический словарь. Пет-проект в полезное приложение

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 2.9K

У меня есть хобби — изучение английского языка, и последнее время я увлекся фонетикой британского английского языка, но почти все словари дают транскрипцию «‎Королевского английского», на котором говорят, по данным Гугла, около 3 процентов жителей Соединённого Королевства. А найденный в интернете словарь http://www.cubedictionary.org/ хоть и дает нужную мне транскрипцию, но имеет ряд недостатков.

Читать далее
Всего голосов 10: ↑8 и ↓2 +6
Комментарии 14

Tailwind не только для MVP

Время на прочтение 7 мин
Количество просмотров 6.1K

Всем привет!

Обычно tailwind используют для каких-то MVP/админок/не очень больших проектов, но мне кажется, что tailwind, имеет место быть в средних и крупных проектах. Большинство его минусов решаемы, а плюсы чертовски хороши :)

В этой статье я распишу его плюсы и минусы и как можно минусы превратить в плюсы.

Tailwind больше чем просто MVP
Всего голосов 10: ↑9 и ↓1 +8
Комментарии 29

Создаем мини-игру с капельным эффектом и движущимися кружками. Часть 2. Финал

Уровень сложности Простой
Время на прочтение 8 мин
Количество просмотров 2.8K

Привет, дорогие пользователи мира IT!

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

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

Читать дальше →
Всего голосов 6: ↑6 и ↓0 +6
Комментарии 3

Создаем мини-игру с капельным эффектом и движущимися кружками. Часть 1

Уровень сложности Простой
Время на прочтение 7 мин
Количество просмотров 5.1K

Привет, дорогие пользователи мира IT!

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

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

Читать дальше →
Всего голосов 12: ↑12 и ↓0 +12
Комментарии 3

Истории

Как сделать свой UI Kit на Vue 3 + storybook и задеплоить его на npm

Уровень сложности Средний
Время на прочтение 5 мин
Количество просмотров 11K

Сейчас очень популярная история создавать свой UI Kit и везде рассказывать какой он крутой и как он ускорил разработку, поэтому я решил написать небольшой гайд, как заиметь себе собственный UI Kit.

После моего туториала, вы тоже сможете рассказывать какой у вас крутой UI Kit, но это не точно :)

Запилить свой UI Kit
Всего голосов 13: ↑13 и ↓0 +13
Комментарии 1

Натальная травматология фронтенда S1 E1-14

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 6.1K

Здравствуйте, меня зовут Дмитрий Карловский, и меня хлебом не корми, а дай поиздеваться над хайповыми технологиями. И сейчас я расскажу вам, как я провёл лето.

В этом сезоне ко мне на операционный стол попались разные JS, CSS и тест фреймворки да методологии, менеджеры состояний и потоков исполнения, коллекции виджетов и даже приложений. Приготовьтесь, далее вас ждёт целых 32 часа отборного кринжа!

Погрузится в эпидерсию
Всего голосов 45: ↑27 и ↓18 +9
Комментарии 47

Что нового в Chrome 117?

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 6.7K

Что ожидается в статье:

Три новые функции CSS позволяют легко добавлять плавные анимации появления и исчезновения.

Вычисление наборов данных более высокого порядка с помощью группировки массивов.

DevTools упрощает процесс локальных переопределений.

И многое другое.

Читать далее
Всего голосов 5: ↑5 и ↓0 +5
Комментарии 3

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

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 10K

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

Читать далее
Всего голосов 54: ↑50 и ↓4 +46
Комментарии 21

Типизированные CSS переменные с @property

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 5K

Типы CSS - это достойное вложение в безопасность типов при работе с внешним интерфейсом. Мы все еще ожидаем кроссбраузерности, но мы к этому придем 🙂 .

Читать далее
Всего голосов 6: ↑6 и ↓0 +6
Комментарии 2

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи

Уровень сложности Средний
Время на прочтение 7 мин
Количество просмотров 8.6K

Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть процесса создания доступных интерфейсов. Эти технологии непросто несут в себе кучу скрытых моментов, влияющих на доступность. Они напрямую позволяют её улучшить. В статье хочу показать это.


Я затрону не все аспекты. Их очень много, поэтому поговорю о: интерактивных элементах, доступности текста, анимации и изображениях. В статье буду использовать опыт моего незрячего знакомого (привет, Илья). Он внёс бесценный вклад. Уверен, что вам будет интересно. Поехали!

Читать дальше →
Всего голосов 51: ↑51 и ↓0 +51
Комментарии 13

Компилирование «железного» бинарника Java-программы Google Closure Stylesheets с GraalVM

Уровень сложности Простой
Время на прочтение 11 мин
Количество просмотров 1.7K

Google Closure Stylesheets -- это компилятор для CSS, написанный Гугл в рамках набора инструментов Closure для веб-разработки, который в свое время обладал внушительными функциями такими как экспансия браузерных префиксов, переменными и др. Прошло уже более 10 лет с начала этого проекта, и в прошлом году его архивировали. Я же продолжил вести свой форк, и сегодня собрал его как нативный binary с помощью Oracle GraalVM. Под катом рассказ о том, какие моменты пришлось проработать, а так же небольшие бенчмарки.

Читать далее
Всего голосов 10: ↑10 и ↓0 +10
Комментарии 2

Подборка VS Code-плагинов для Frontend-разработчиков и не только

Уровень сложности Простой
Время на прочтение 2 мин
Количество просмотров 10K

Одним из наиболее ценных аспектов Visual Studio Code является его расширяемость с помощью плагинов, которые значительно облегчают и улучшают рабочий процесс. В этой статье мы собрали инструменты - от простых до продвинутых - которые сделают вашу разработку более продуктивной и приятной, позволяя сосредоточиться на творческой части процесса.

Читать далее
Всего голосов 11: ↑6 и ↓5 +1
Комментарии 2

Дебаты по Tailwind CSS: ещё один классный инструмент, отвергнутый веб-пуристами

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 5.2K

Tailwind CSS — как фреймворк для разработчиков довольно прост в понимании. По сути, он позволяет вам встраивать код CSS в ваш HTML код. Чтобы, как говорится в слогане Tailwind: «быстро создавать современные веб‑сайты, не покидая HTML». Таким образом, это избавляет разработчиков от необходимости контекстно переключаться с HTML на таблицу стилей CSS.

Собственная документация Tailwind указывает на распространенное возражение против такого подхода: «разве это не просто встроенные стили?» Те из вас, кто жил в 1990-х годах, наверняка помнят, что когда‑то, еще до того, как произошла революция CSS, им приходилось добавлять разметку стилей в свои HTML‑файлы. Но, по словам Tailwind, его подход «утилитарного класса» предлагает больше функциональности, чем встроенные стили, включая возможность создавать адаптивный дизайн (дизайн, адаптированный для мобильных устройств).

Таким образом, простота использования — особенно по сравнению с кодированием и последующим обслуживанием CSS‑файла — и возможность создавать свой стиль внутри HTML являются основными причинами, по которым многие разработчики любят Tailwind.

В своем посте Мэтт Рикард добавил в качестве ключевых преимуществ фреймворка следующие пункты:

Далее...
Всего голосов 12: ↑10 и ↓2 +8
Комментарии 13

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн

Ох уж эти CSS-переменные

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 9.4K


Я люблю создавать компоненты везде и всегда, поэтому пользовательские CSS-свойства, также известные как CSS-переменные, являются одной из моих любимых фишек, которая позволяет писать более модульный код. При работе с ними я набил достаточно шишек, выпил литры чая и убил кучу времени. Теперь я «мастер», и хочу поделиться своим опытом.
Читать дальше →
Всего голосов 56: ↑56 и ↓0 +56
Комментарии 13

Разрабатываем свой браузер. Часть вторая: CSS

Уровень сложности Простой
Время на прочтение 15 мин
Количество просмотров 3.5K


Всем привет!


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


Да, лучше поздно, чем никогда. Да, перерыв был большой.


В конце статьи я опишу, как поживает проект lexbor, что с ним происходит.


В этой статье я постараюсь раскрыть особенности парсинга Cascading Style Sheets (CSS). Расскажу, как вывернуть «ежа» наизнанку и как тестировать полученный результат.


В CSS спецификациях всё разжевано, ну, или почти всё, тут я расскажу, как всё устроено, куда смотреть и с чего начать.


Эта статья больше обзорная, здесь не будет мелких подробностей реализации, скорее, общие сведения и основные алгоритмы. За мельчайшими подробностями прошу в код на GitHub.


И конечно, как это обычно бывает, мы замахнёмся на звание самого быстрого парсера CSS.

И так, начнём!
Всего голосов 11: ↑11 и ↓0 +11
Комментарии 1

Вышел Chrome 116

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 6K

Традиционный перевод анонса от команды Google Chrome о нововведениях

• Document Picture-in-Picture API

• Улучшена отладка отсутствующих таблиц стилей в DevTools

• Свойство notRestoredReasons

И многое другое!

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 1

Настройка проекта AstroJS: VS Code, Prettier, ESlint, Stylelint, Tailwind CSS, PostCSS, минификация файлов

Уровень сложности Средний
Время на прочтение 8 мин
Количество просмотров 3.9K

AstroJS изначально был движком для создания статичных сайтов. Теперь там есть работа с API, server-side рендеринг, гибридный режим сервера. Можно написать код сайта в Astro-файлах на обычном html + js, а можно подключить визуальный фреймворк на свой выбор: React, Preact, Vue, Solid, Svelte. Подключаем CMS или backend-as-a-service - вот уже замена именитым NextJS и NuxtJS.

Но перед активной фазой создания сайта давайте потратим 10 минут. Настройка проекта для работы в команде займет каких-то шагов 20...

Читать далее
Всего голосов 6: ↑5 и ↓1 +4
Комментарии 3

5 новинок CSS в адаптивной верстке, которые можно использовать уже сейчас

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 25K

Hola, Amigos! На связи Игорь Мельников, Frontend-разработчик компании Amiga. Возможно, вы уже слышали про технологии, которые я описываю в статье, но не использовали их, потому что думали, что они не поддерживаются актуальными браузерами. Теперь можете смело брать их во всеоружие и применять в своих проектах! 

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

Читать далее
Всего голосов 53: ↑53 и ↓0 +53
Комментарии 5

React starter (Webpack + Typescript + Css modules + Jest)

Уровень сложности Средний
Время на прочтение 16 мин
Количество просмотров 9.6K

Хочу поделиться своим видением сборки для быстрого старта разработки на React.

Помогает быстро запуститься, когда нужно «на скорую» войти в разработку.

Что‑то я подглядел здесь же, на Хабре, к чему‑то пришёл сам, ну и «ангажировал» немного на просторах «необъятного».

Что «под капотом»

Webpack 5
React v.18
Redux (Redux Toolkit)
Typescript
Css modules
Jest
VS Code

Читать далее
Всего голосов 8: ↑4 и ↓4 0
Комментарии 11

Работа с Sass в приложении ASP.NET Core

Время на прочтение 6 мин
Количество просмотров 3K

Sass (Syntactically Awesome Style Sheets) — это скриптовый язык, используемый для создания каскадных таблиц стилей (CSS-файлов). Его синтаксис очень похож на обычный CSS, но вдобавок он поддерживает использование переменных, вложенность, миксины и наследование для селекторов, чего очень не хватает в базовом CSS, ведь эти фичи незаменимы в организации и поддержке стилей вашего веб-приложения. В этой статье я продемонстрирую вам шаги, необходимые для добавления и настройки Sass в вашем ASP.NET Core проекте как в Visual Studio, так и в VS Code.

Sass — это инструмент для повышения производительности, который помогает вам выстраивать и поддерживать таблицы стилей. Среди основных его преимуществ можно выделить следующее:

Читать далее
Всего голосов 11: ↑10 и ↓1 +9
Комментарии 5

Вклад авторов