CSS-заметки
137 subscribers
50 photos
1 video
1 file
102 links
Это личный блог, в котором я делюсь своим опытом.
💰 Поддержать канал: https://css_notes.dyaka.com/donate
🔴 Ютуб: https://www.youtube.com/channel/UCqKk5FvlVi8TzJJGFuYwznw
📦 Сборка: https://github.com/budfy/Easy-webdev-startpack
Download Telegram
Forwarded from Веб-страница
Тёмная сторона веба: исчерпывающий гайд

Дарк мод для UI набирает популярность. Тренд или необходимость? Скорее, второе, ведь пользователи, работающие в тёмное время суток, отдают предпочтение дарк моду, уменьшая нагрузку на глаза.

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

https://tprg.ru/d3ay

#фронтенд
Forwarded from Веб-страница
Свойства CSS, которые сэкономят кучу времени

Для достижения некоторых эффектов не нужно писать миллион строк. В статье описаны такие свойства:

— Центрирование с помощью place-items: center и CSS Grid или margin: auto и Flexbox.
— Стилизация маркеров списка.
— Центрирование текста.
— Иконки в одну линию с display: inline-flex.
— Добавление границ между столбцами.
— Повторение фоновой картинки без обрезки.
— Соблюдение размеров объекта с object-fit.

Больше информации, код и результаты в картинках можно найти в самой статье:

https://tprg.ru/STXI

#фронтенд #css
Forwarded from Веб-стандарты (Веб-стандарты)
Как подключить и оптимизировать нестандартные шрифты. Саша Смыгина про все варианты подключения и настройки: от Google Fonts до предзагрузки и сабсетинга — https://htmlacademy.ru/blog/boost/frontend/fonts-loading?utm_source=tg_web_standarts&utm_medium=special&utm_campaign=fonts_loading03072020
158759749_periodic_table_of_html_5_elements_code_rMO2_2560x1440.jpg
449.7 KB
Обои для рабочего стола, которые помогут выучить семантику.
Forwarded from Веб-стандарты (Вадим Макеев)
Выпуск №238: События в Яндексе, Safari, планы браузеров, новый CSS Zen Garden, Houdini vs CSS, Yandex UI Kit. В гостях Владимир Гриненко. Слушайте на Ютубе https://youtu.be/u1OPg7IKMQU, читайте на Медиуме https://medium.com/p/3533ce9bf361
238. События в Яндексе, Safari, планы браузеров, новый CSS Zen Garden…
Веб-стандарты
00:02:08 События в Яндексе
00:09:10 Подкаст про Safari
00:12:50 Планы браузеров
00:22:21 Новый CSS Zen Garden
00:29:53 Кто быстрее: Houdini или CSS
00:38:58 Yandex UI Kit
БЭМ'а не должно существовать. Громкое название? Нет. Статья о том, почему БЭМ это плохо.
Любая технология, любая методика имеет как плюсы, так и минусы.

Статья о том, в чём минусы БЭМ:

BEM'a не должно существовать / Хабр
https://m.habr.com/ru/post/422537/
Forwarded from Веб-стандарты (Веб-стандарты)
15 базовых советов по Git для эффективной работы каждый день. Сергей Сергеев делится лайвхаками в блоге ManyChat на Хабре — https://habr.com/p/511946/
Forwarded from Веб-стандарты (Веб-стандарты)
До­ступ­ный для кого-то. Эксперимент Мануэля Матузовича, который показывает, как плохая доступность влияет на пользователей и их повседневную работу в вебе. В переводе Никиты Дубко на «Веб-стандартах» — https://web-standards.ru/articles/accessible-to-some/
Forwarded from Веб-страница
Что значит 100% в CSS?

Вы когда-нибудь задумывались, как всё рассчитывается в каскадных таблицах стилей, и почему иногда не удаётся подвинуть элемент, хотя, казалось бы, всё верно?

Амелия Ваттенбергер не только написала об этом, но и сделала статью интерактивной. Так что можете потаскать ползунки и посмотреть, что получится:

https://tprg.ru/YU83

#фронтенд #css
Forwarded from Веб-стандарты (Веб-стандарты)
Альтернативный текст для свойства content. Стефан Джудис показывает, как задать отдельный текст для скринридеров для содержимого псевдоэлементов after и before — https://www.stefanjudis.com/today-i-learned/css-content-accepts-alternative-text/
Forwarded from Веб-страница
Наверняка каждый JavaScript-разработчик использовал метод console.log(‘text’) для отладки кода. Скорее всего, console.warn() и console.error() вам тоже знакомы.

Но есть много других логов, которые могут помочь повысить эффективность отладки кода на JS. В этой статье читайте про 8 самых интересных из них:

https://tprg.ru/Lvha

#javascript #nodejs
Привет. Давно ничего не писал на канале. Так уж сложилось, что в последнее время был занят техническими вопросами и на философию времени совсем не осталось.
Тем не менее, результат моих "технических вопросов" вот тут, по ссылочке.
Это обновлённая сборка "Easy webdev startpack".
Ещё меньше нужно делать руками, ещё больше автоматизации!
Вэлкам!
Привет! Давненько не было ничего на моём канале, казалось даже, что я его забросил. Но не тут -то было!
26 декабря, в день Рождества, проведём новогодний стрим.
Что будет на стриме:
- поболтаем о том, что важного произошло в 2020 году и какие планы на 2021-й;
- расскажу о своей сборке, как она работает и какие планы на будущее в этом направлении;
- поговорим с дизайнером о дизайне для верстальщиков и вёрстке для дизайнеров;
-- поговорим с ещё одним админом чата "От 0 до 1";
- начнём отмечать Новый Год ))

А чтобы не забыть о стриме, подпишитесь на канал и нажмите на колокольчик по ссылке. Так ютуб напомнит вам о нём.
https://youtu.be/JxrarYanMxA
Интересненько... Надо будет сделать обзор на эту штуковину на канале...
Forwarded from Веб-страница
Расширенный HTML

EHTML — это библиотека, которая расширяет обычные возможности HTML. С помощью неё можно, не используя JavaScript, отправить формы в json формате, загрузить HTML темплейты на определенную страницу и многое другое.

В этой статье автор библиотеки подробно рассказывает о её возможностях:

https://tprg.ru/byzH

#HTML