WhatFont — это популярное браузерное расширение, которое помогает определить шрифты, используемые на веб-страницах. Достаточно навести курсор на текст, и расширение покажет название шрифта, его размер, стиль (например, жирный или курсив), а также цвет.
Made in HTML/CSS
Made in HTML/CSS
👍3🔥2
Расширение переменных в селекторах SCSS позволяет использовать переменные для создания более гибких и поддерживаемых стилей.
Это упрощает изменение значений, таких как цвета, размеры шрифтов и другие свойства, в одном месте, что автоматически обновляет их во всех местах, где они используются. Это способствует согласованности дизайна и ускоряет процесс разработки.
Made in HTML/CSS
Это упрощает изменение значений, таких как цвета, размеры шрифтов и другие свойства, в одном месте, что автоматически обновляет их во всех местах, где они используются. Это способствует согласованности дизайна и ускоряет процесс разработки.
Made in HTML/CSS
👍6🔥1
WAVE - это расширение Chrome является инструментом оценки специальных возможностей. Он обеспечивает визуальную обратную связь о доступности вашего сайта. Он внедряет значки и индикаторы на ваш сайт, чтобы информировать вас о том, что вам нужно исправить и как это сделать.
Made in HTML/CSS
Made in HTML/CSS
👍5
Начиная с версии 3.2.0 , SCSS имеет неявный аргумент mixin, доступный через директиву @content. Он позволяет передавать весь контентный блок SCSS в качестве аргумента для mixin.
Это очень мощная языковая функция для авторов фреймворков, так как она позволяет вам проходить произвольные блоки стиля, которые вы можете выбрать, чтобы обернуть определенными селекторами, повторить в циклах, сделать условными с помощью @ifи т. д. Вы также можете смешивать аргументы стандартного и контентного блока.
Made in HTML/CSS
Это очень мощная языковая функция для авторов фреймворков, так как она позволяет вам проходить произвольные блоки стиля, которые вы можете выбрать, чтобы обернуть определенными селекторами, повторить в циклах, сделать условными с помощью @ifи т. д. Вы также можете смешивать аргументы стандартного и контентного блока.
Made in HTML/CSS
👍5🔥1
Для того, чтобы показать информацию пользователю в интернете в большинстве случаях используется HTML — язык гипертекстовой разметки. Мощности современных компьютеров последнее время постоянно растут, а поисковые машины стремятся использовать эти мощности по максимуму.
Поэтому одним из важных параметров ранжирования поисковой выдачи является то, на сколько разметка страниц сайта соответствует стандартам.
🌐 Читать статью
Made in HTML/CSS
Поэтому одним из важных параметров ранжирования поисковой выдачи является то, на сколько разметка страниц сайта соответствует стандартам.
🌐 Читать статью
Made in HTML/CSS
👍3🔥2
Вложенность медиа-запросов в SCSS позволяет упростить структуру стилей, делая их более читаемыми и управляемыми.
Вложенные медиа-запросы позволяют вам определять стили для различных устройств и размеров экранов внутри одного селектора, что уменьшает дублирование кода и улучшает его организацию.
Made in HTML/CSS
Вложенные медиа-запросы позволяют вам определять стили для различных устройств и размеров экранов внутри одного селектора, что уменьшает дублирование кода и улучшает его организацию.
Made in HTML/CSS
👍5🔥2
Функции в CSS
Статья объясняет синтаксис (@function), типизацию аргументов (например, <color>, <length>), возврат значений через result, а также отличие от Sass-примесей. Подчеркивается потенциал для сложных вычислений в CSS и текущий статус функций (экспериментальный, без поддержки в production).
🌐 Читать статью
Made in HTML/CSS
Статья объясняет синтаксис (@function), типизацию аргументов (например, <color>, <length>), возврат значений через result, а также отличие от Sass-примесей. Подчеркивается потенциал для сложных вычислений в CSS и текущий статус функций (экспериментальный, без поддержки в production).
🌐 Читать статью
Made in HTML/CSS
👍7🔥2
Что такое CORS?
CORS (Cross-Origin Resource Sharing, совместное использование ресурсов между разными источниками) — это браузерный механизм, который позволяет предоставлять страницам доступ к ресурсам, расположенным за пределами некоего домена. Это расширяет возможности страниц и добавляет гибкости политике одинакового источника (same-origin policy).
Made in HTML/CSS
CORS (Cross-Origin Resource Sharing, совместное использование ресурсов между разными источниками) — это браузерный механизм, который позволяет предоставлять страницам доступ к ресурсам, расположенным за пределами некоего домена. Это расширяет возможности страниц и добавляет гибкости политике одинакового источника (same-origin policy).
Made in HTML/CSS
👍5🔥1
Такая банальная вещь, как недостаточно плавный переход между двумя цветами, может серьезно ухудшить впечатление от всего дизайна. К сожалению, новички нередко допускают эту ошибку — создают слишком жесткие градиенты с резкой сменой одного цвета другим.
Вот несколько способов, как можно буквально за пару минут исправить ситуацию.Если ситуацию вызвал неправильный подбор цветов (например, они изначально слишком темные, слишком насыщенные и контрастные по отношению друг к другу), то можно попробовать изменить их на более схожие или гармоничные. Для этого можно использовать цветовой круг или специальные сервисы для подбора цветовых схем, такие как Webgradients или uiGradients.
🌐 Подобнее
Made in HTML/CSS
Вот несколько способов, как можно буквально за пару минут исправить ситуацию.Если ситуацию вызвал неправильный подбор цветов (например, они изначально слишком темные, слишком насыщенные и контрастные по отношению друг к другу), то можно попробовать изменить их на более схожие или гармоничные. Для этого можно использовать цветовой круг или специальные сервисы для подбора цветовых схем, такие как Webgradients или uiGradients.
🌐 Подобнее
Made in HTML/CSS
👍4🔥2
Фильтрация уникальных значений
В стандарте ES6 появился новый тип объектов Set. Скомбинировав его со спред-оператором (...), можно легко получить из старого массива новый, в котором будут только уникальные значения.
Made in HTML/CSS
В стандарте ES6 появился новый тип объектов Set. Скомбинировав его со спред-оператором (...), можно легко получить из старого массива новый, в котором будут только уникальные значения.
Made in HTML/CSS
👍5🔥2
Settings Sync — это популярный плагин для текстовых редакторов, таких как Visual Studio Code, который позволяет синхронизировать настройки, расширения, темы и другие пользовательские данные между разными устройствами. Это особенно полезно для разработчиков, которые работают за несколькими компьютерами или хотят быстро восстановить свою рабочую среду после переустановки системы.
Made in HTML/CSS
Made in HTML/CSS
👍4🔥2
Сравнение TypeScript и JavaScript: преимущества и недостатки
🌐 Читать статью
Made in HTML/CSS
Сравним оба языка по ключевым параметрам, выясним преимущества и недостатки TypeScript и JavaScript и узнаем, в каких ситуациях лучше использовать тот или иной инструмент разработки
🌐 Читать статью
Made in HTML/CSS
👍4🔥2
Нужно следовать рекомендованному шаблону, ведь так? Но он не совсем оптимален. На каждой итерации цикла длина массива array будет высчитываться заново.
Иногда это полезно, но в большинстве случаев эффективнее будет ее кэшировать после первого расчета. Для этого создадим переменную length. Это можно сделать в первой части условия, вместе с определением счетчика цикла.
Лаконичность кода почти не страдает, но при работе с большими массивами он будет работать немного эффективнее.
Made in HTML/CSS
Иногда это полезно, но в большинстве случаев эффективнее будет ее кэшировать после первого расчета. Для этого создадим переменную length. Это можно сделать в первой части условия, вместе с определением счетчика цикла.
Лаконичность кода почти не страдает, но при работе с большими массивами он будет работать немного эффективнее.
Made in HTML/CSS
👍4🔥2
Чтобы разобраться в том, что написал разработчик, и перевести это в более старую версию JS, Babel требуется максимально декомпозировать код.
Делает он это с помощью составления AST дерева и его последующего анализа. Babel разбивает наш код на самые мелкие частицы, даже «;» или «пробел» — отдельная часть AST дерева. После того как Babel создал такое дерево, он может пройтись по каждому узлу и преобразовать его нужным образом.
Made in HTML/CSS
Делает он это с помощью составления AST дерева и его последующего анализа. Babel разбивает наш код на самые мелкие частицы, даже «;» или «пробел» — отдельная часть AST дерева. После того как Babel создал такое дерево, он может пройтись по каждому узлу и преобразовать его нужным образом.
Made in HTML/CSS
👍3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Красивое меню выбора
Этот проект представляет собой меню выбора, состоящее из нескольких кнопок с иконками. При наведении курсора на меню или его элементы происходит ряд визуальных изменений, улучшающих восприятие.
Made in HTML/CSS
Этот проект представляет собой меню выбора, состоящее из нескольких кнопок с иконками. При наведении курсора на меню или его элементы происходит ряд визуальных изменений, улучшающих восприятие.
Made in HTML/CSS
🔥5👍3
Webpack — это модульный сборщик (bundler) с открытым исходным кодом, написанный на JS. Он берёт несколько скриптов JavaScript с их зависимостями и объединяет в файл, который используется браузером.
Почему разработчики выбирают именно его, а не другие бандлеры? Webpack отличается подробной документацией и активным коммьюнити. Кроме этого, он имеет ряд преимуществ по сравнению с аналогами.
🌐Подробнее
Made in HTML/CSS
Почему разработчики выбирают именно его, а не другие бандлеры? Webpack отличается подробной документацией и активным коммьюнити. Кроме этого, он имеет ряд преимуществ по сравнению с аналогами.
🌐Подробнее
Made in HTML/CSS
👍6
Это один из самых известных JavaScript-трюков, но повторить его не помешает.
Чтобы удалить несколько значений из конца массива, необязательно пользоваться методами slice(), splice() или pop(). Просто переопределите свойство length.
Это работает только с массивами, а вот с Set, например, трюк не пройдет.
Made in HTML/CSS
Чтобы удалить несколько значений из конца массива, необязательно пользоваться методами slice(), splice() или pop(). Просто переопределите свойство length.
Это работает только с массивами, а вот с Set, например, трюк не пройдет.
Made in HTML/CSS
👍7🔥1👨💻1
Современные тренды CSS
Темы, которые разбираются в этой статье:
- attr()
- toggle()
- sibling-count(), sibling-index()
- first-valid()
- -*mix, -*progress
- calc-size()
- random(), random-item()
🌐 Читать статью
Made in HTML/CSS
Темы, которые разбираются в этой статье:
- attr()
- toggle()
- sibling-count(), sibling-index()
- first-valid()
- -*mix, -*progress
- calc-size()
- random(), random-item()
🌐 Читать статью
Made in HTML/CSS
👍6
Что представляет собой объединение ресурсов и почему оно важно?
Объединение ресурсов или Asset bundling собирает CSS, JavaScript и другие ресурсы в один или несколько минимизированных файлов. Этот процесс сокращает количество HTTP-запросов, снижает время загрузки и повышает производительность. Он также помогает в управлении кешем и упорядочивании кода.
Made in HTML/CSS
Объединение ресурсов или Asset bundling собирает CSS, JavaScript и другие ресурсы в один или несколько минимизированных файлов. Этот процесс сокращает количество HTTP-запросов, снижает время загрузки и повышает производительность. Он также помогает в управлении кешем и упорядочивании кода.
Made in HTML/CSS
👍4🔥1
Прогрессивные веб-приложения, по всей видимости, будут становиться всё популярнее и распространённее. Они нацелены на то, чтобы пользователь воспринимал их не как обычные веб-страницы, а как нечто вроде классических настольных приложений, которые нормально работают независимо от того, подключен компьютер к интернету или нет.
Отсюда исходит одно из основных требований к прогрессивным веб-приложениям, которое заключается в их надёжном функционировании при отсутствующем или нестабильном сетевом соединении. Сервис-воркеры являются важной технической деталью реализации подобного поведения приложений.
Made in HTML/CSS
Отсюда исходит одно из основных требований к прогрессивным веб-приложениям, которое заключается в их надёжном функционировании при отсутствующем или нестабильном сетевом соединении. Сервис-воркеры являются важной технической деталью реализации подобного поведения приложений.
Made in HTML/CSS
👍4🔥2