Свойство -webkit-line-clamp позволяет ограничить текст определенным количеством строк и добавляет многоточие (...) при превышении этого лимита.
Это полезно для управления переполнением текста в карточках, списках или других компонентах с фиксированной высотой
Made in HTML/CSS
Это полезно для управления переполнением текста в карточках, списках или других компонентах с фиксированной высотой
Made in HTML/CSS
👍6🔥1
Язык TypeScript — это доработанная версия JavaScript. Он помогает писать более чистый и безопасный код, так как предупреждает об ошибках ещё до запуска программы.
TypeScript компилируется в JavaScript. Это значит, что код не выполняется напрямую в браузере. Сначала компилятор TypeScript преобразует его в обычный JavaScript. Только после этого он может быть выполнен в браузере или на Node.js — специальном движке, который запускает JavaScript на сервере.
🌐 Читать статью
Made in HTML/CSS
TypeScript компилируется в JavaScript. Это значит, что код не выполняется напрямую в браузере. Сначала компилятор TypeScript преобразует его в обычный JavaScript. Только после этого он может быть выполнен в браузере или на Node.js — специальном движке, который запускает JavaScript на сервере.
🌐 Читать статью
Made in HTML/CSS
👍5🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Position: sticky; — это значение свойства position в CSS, которое позволяет элементу оставаться на месте при прокрутке страницы, но при этом может быть отодвинут от своей стандартной позиции.
Made in HTML/CSS
Made in HTML/CSS
👍5
ColorZilla — расширение для браузера Chrome, которое позволяет определить цвет любого элемента на странице.
Для этого нужно запустить расширение, навести указатель мыши на интересующие элементы страницы, и на верхней панели появится HEX-код цвета («пипетка» для точного выбора цвета). В меню расширения есть инструмент, который даст доступ ко всем ранее найденным цветам.
🌐 Читать статью
Made in HTML/CSS
Для этого нужно запустить расширение, навести указатель мыши на интересующие элементы страницы, и на верхней панели появится HEX-код цвета («пипетка» для точного выбора цвета). В меню расширения есть инструмент, который даст доступ ко всем ранее найденным цветам.
🌐 Читать статью
Made in HTML/CSS
👍5
Чем отличаются куки-файлы, сессионное хранилище и локальное хранилище?
Локальное хранилище, как можно понять из его названия, это место, которое браузеры могут использовать для локального хранения данных. В нём может храниться до 10 Мб данных.
Сессионное хранилище — это разновидность локального хранилища, которое привязано к сессии и удаляется после её завершения. В сессионном хранилище может храниться до 5 Мб данных.
Куки-файлы используются для хранения небольших объёмов данных, не превышающих 4 Кб. Ими может пользоваться браузер, их может запрашивать у браузера сервер.
Made in HTML/CSS
Локальное хранилище, как можно понять из его названия, это место, которое браузеры могут использовать для локального хранения данных. В нём может храниться до 10 Мб данных.
Сессионное хранилище — это разновидность локального хранилища, которое привязано к сессии и удаляется после её завершения. В сессионном хранилище может храниться до 5 Мб данных.
Куки-файлы используются для хранения небольших объёмов данных, не превышающих 4 Кб. Ими может пользоваться браузер, их может запрашивать у браузера сервер.
Made in HTML/CSS
👍3🔥2
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