Made in HTML/CSS
1.49K subscribers
732 photos
39 videos
2 files
657 links
Научись классно верстать и создавать сайты благодаря Made in HTML/CSS.
По рекламе - https://t.me/ZilantTG
Download Telegram
Свойство -webkit-line-clamp позволяет ограничить текст определенным количеством строк и добавляет многоточие (...) при превышении этого лимита.

Это полезно для управления переполнением текста в карточках, списках или других компонентах с фиксированной высотой



Made in HTML/CSS
👍6🔥1
Язык TypeScript — это доработанная версия JavaScript. Он помогает писать более чистый и безопасный код, так как предупреждает об ошибках ещё до запуска программы.

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
👍5
ColorZilla — расширение для браузера Chrome, которое позволяет определить цвет любого элемента на странице.

Для этого нужно запустить расширение, навести указатель мыши на интересующие элементы страницы, и на верхней панели появится HEX-код цвета («пипетка» для точного выбора цвета). В меню расширения есть инструмент, который даст доступ ко всем ранее найденным цветам.


🌐 Читать статью

Made in HTML/CSS
👍5
Чем отличаются куки-файлы, сессионное хранилище и локальное хранилище?

Локальное хранилище
, как можно понять из его названия, это место, которое браузеры могут использовать для локального хранения данных. В нём может храниться до 10 Мб данных.

Сессионное хранилище — это разновидность локального хранилища, которое привязано к сессии и удаляется после её завершения. В сессионном хранилище может храниться до 5 Мб данных.

Куки-файлы
используются для хранения небольших объёмов данных, не превышающих 4 Кб. Ими может пользоваться браузер, их может запрашивать у браузера сервер.

Made in HTML/CSS
👍3🔥2
WhatFont — это популярное браузерное расширение, которое помогает определить шрифты, используемые на веб-страницах. Достаточно навести курсор на текст, и расширение покажет название шрифта, его размер, стиль (например, жирный или курсив), а также цвет.

Made in HTML/CSS
👍3🔥2
Расширение переменных в селекторах SCSS позволяет использовать переменные для создания более гибких и поддерживаемых стилей.

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


Made in HTML/CSS
👍6🔥1
WAVE - это расширение Chrome является инструментом оценки специальных возможностей. Он обеспечивает визуальную обратную связь о доступности вашего сайта. Он внедряет значки и индикаторы на ваш сайт, чтобы информировать вас о том, что вам нужно исправить и как это сделать.

Made in HTML/CSS
👍5
Начиная с версии 3.2.0 , SCSS имеет неявный аргумент mixin, доступный через директиву @content. Он позволяет передавать весь контентный блок SCSS в качестве аргумента для mixin.

Это очень мощная языковая функция для авторов фреймворков, так как она позволяет вам проходить произвольные блоки стиля, которые вы можете выбрать, чтобы обернуть определенными селекторами, повторить в циклах, сделать условными с помощью @ifи т. д. Вы также можете смешивать аргументы стандартного и контентного блока
.

Made in HTML/CSS
👍5🔥1
Для того, чтобы показать информацию пользователю в интернете в большинстве случаях используется HTML — язык гипертекстовой разметки. Мощности современных компьютеров последнее время постоянно растут, а поисковые машины стремятся использовать эти мощности по максимуму.

Поэтому одним из важных параметров ранжирования поисковой выдачи является то, на сколько разметка страниц сайта соответствует стандартам.


🌐 Читать статью

Made in HTML/CSS
👍3🔥2
Вложенность медиа-запросов в SCSS позволяет упростить структуру стилей, делая их более читаемыми и управляемыми.

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



Made in HTML/CSS
👍5🔥2
Функции в 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
👍5🔥1
Такая банальная вещь, как недостаточно плавный переход между двумя цветами, может серьезно ухудшить впечатление от всего дизайна. К сожалению, новички нередко допускают эту ошибку — создают слишком жесткие градиенты с резкой сменой одного цвета другим.

Вот несколько способов, как можно буквально за пару минут исправить ситуацию.Если ситуацию вызвал неправильный подбор цветов (например, они изначально слишком темные, слишком насыщенные и контрастные по отношению друг к другу), то можно попробовать изменить их на более схожие или гармоничные. Для этого можно использовать цветовой круг или специальные сервисы для подбора цветовых схем, такие как Webgradients или uiGradients.


🌐 Подобнее

Made in HTML/CSS
👍4🔥2
Фильтрация уникальных значений
В стандарте ES6 появился новый тип объектов Set. Скомбинировав его со спред-оператором (...), можно легко получить из старого массива новый, в котором будут только уникальные значения.


Made in HTML/CSS
👍5🔥2
Settings Sync — это популярный плагин для текстовых редакторов, таких как Visual Studio Code, который позволяет синхронизировать настройки, расширения, темы и другие пользовательские данные между разными устройствами. Это особенно полезно для разработчиков, которые работают за несколькими компьютерами или хотят быстро восстановить свою рабочую среду после переустановки системы.

Made in HTML/CSS
👍4🔥2
Сравнение TypeScript и JavaScript: преимущества и недостатки

Сравним оба языка по ключевым параметрам, выясним преимущества и недостатки TypeScript и JavaScript и узнаем, в каких ситуациях лучше использовать тот или иной инструмент разработки


🌐 Читать статью

Made in HTML/CSS
👍4🔥2
Нужно следовать рекомендованному шаблону, ведь так? Но он не совсем оптимален. На каждой итерации цикла длина массива array будет высчитываться заново.

Иногда это полезно, но в большинстве случаев эффективнее будет ее кэшировать после первого расчета. Для этого создадим переменную length. Это можно сделать в первой части условия, вместе с определением счетчика цикла.
Лаконичность кода почти не страдает, но при работе с большими массивами он будет работать немного эффективнее.


Made in HTML/CSS
👍4🔥2
Чтобы разобраться в том, что написал разработчик, и перевести это в более старую версию JS, Babel требуется максимально декомпозировать код.

Делает он это с помощью составления 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
🔥5👍3