⌨️ Свойство padding в CSS

Это свойство обозначает расстояние между содержимым блока и его границей.

Внутренний отступ можно задать по отдельности для каждой стороны:

- padding-top - отступ сверху
- padding-bottom - отступ снизу
- padding-right - отступ справа
- padding-left - отступ слева

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

.text_area {
padding-top: 10px;
padding-bottom: 20px;
padding-right: 30px;
padding-left: 40px;
}

Свойство padding отвечает за пространство внутри элемента, а свойство margin - за пространство вокруг элемента, поэтому их не стоит путать.

Отступы широко используются в веб-разработке при создании элементов сайтов и приложений.

Сайтодел | #код #css

🌐 Gatsby.js – фреймворк JavaScript для создания бессерверных сайтов

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

Сайты, созданные при помощи Gatsby.js - это полностью функциональные приложения на React. Вы можете создавать динамичные веб-приложения высокого качества, от блогов до интернет-магазинов.

Сайтам на Gatsby.js не требуются серверы, поэтому вы можете разместить весь свой сайт на CDN. Многие сайты Gatsby могут быть размещены совершенно бесплатно в Gatsby Cloud и на других подобных сервисах.

Сайтодел | #фреймворк #javascript

💾 Image Slider – слайдер для веб-страниц, выполненный в ярком и современном стиле. Он позволяет перелистывать слайды легко и удобно. Слайдер адаптивный для мобильных устройств.

Сайтодел | #сниппет #javascript

⌨️ Метод shift в JavaScript

Для работы с массивами в JavaScript используются методы. Метод shift() убирает первый элемент массива с индексом [0] и возвращает его.

Удобство метода shift() в том, что он изменяет длину массива:

let arr = [ 1, "javascript", true ];
arr.shift();
console.log (arr); // [ "javascript", true ]

После удаления числа 1 из массива, элементом с индексом [0] стала строка. Иными словами, весь ряд сдвинулся на один элемент.

При работе с пустым массивом метод shift() возвращает undefined

Сайтодел | #код #javascript

🌐 Mocha.js – фреймворк JavaScript для тестирования

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

Основные возможности Mocha.js – это поддержка асинхронности, в том числе Promise, а также таймаутов, которые обеспечивают асинхронное выполнение.

Mocha.js можно использовать с большинством библиотек, однако этот фреймворк обычно используется с Chai, популярной assertion-библиотекой для Node.js и браузеров. Тесты в фреймворке инициализируются серийно, поэтому отчеты создаются гибко и точно.

Сайтодел | #фреймворк #javascript

💾 Animated tab bar – анимация переключения иконок на панели меню. Основные фишки – это волна, которая плавно перетекает с иконки на иконку, и меняющийся цвет фона.

Сайтодел | #сниппет #css

🌐 Math.js – библиотека JavaScript для работы с математическими операциями

Math.js – это обширная библиотека для JavaScript и Node.js . Она оснащена гибким парсером выражений с поддержкой символьных вычислений, поставляется с большим набором встроенных функций и констант, а также предлагает интегрированное решение для работы с различными типами данных: числа, большие числа, дроби, строки, массивы.

Библиотека работает на любом движке JavaScript и совмещается со встроенной библиотекой Math для JavaScript. Math.js поддерживает многочисленные расширения и используется как в браузере, так и в Node.js.

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

Сайтодел | #библиотека #javascript

⌨️ Оператор ! в JavaScript

Этот оператор (его также называют логическое НЕ) выражает в языке JavaScript отрицание. Он преобразует значение в противоположное и относится к булеву типу:

let firstVar = true;
let secondVar = false;
alert(!firstVar); // false
alert(!secondVar); // true

Если оператор логического отрицания использовать два раза подряд, он вернет исходное значение операнда:

let firstVar = true;
let secondVar = false;
alert(!!firstVar); // true
alert(!!secondVar); // false

Важно помнить, что оператор ! сначала приводит любое значение к булеву типу, будь то строка или число. Только потом он меняет значение на противоположное. Пустые строки и число ноль определяются как false.

Сайтодел | #код #javascript

💾 Horizontal scroll timeline – эффект анимации для горизонтальной прокрутки слайдов при помощи колёсика мышки. Подходит для описания хронологии событий, времени выхода фильмов, истории компании.

Сайтодел | #сниппет #css

🌐 CSS Nano – библиотека для работы со стилями CSS

Это библиотека CSS-in-JS пятого поколения, которая работает на базе Post CSS - инструмента для преобразования стилей с помощью JavaScript. Архитектура плагинов позволяет работать с небольшими модулями, которые имеют ограниченные функции. Вы можете совмещать CSS Nano с другими процессорами, которые могут проверять ваш CSS на наличие ошибок или переносить будущий синтаксис.

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

Это очень быстрая библиотека, которая не создает компоненты-оболочки, не использует inline-стили или inline-элементы <style>, но кэширует все стили для повторного использования и вводит CSS с помощью .insertRule().

Сайтодел | #библиотека #css

⌨️ Что такое HTML-формы?

HTML-формы – это распространенный способ взаимодействия с пользователями. Как правило, форма содержит поля ввода информации, выпадающие списки и кнопку для отправки. Формы выполняют важную функцию – они передают данные с сайта на сервер.

В данном примере пользователю предлагается ввести имя, фамилию и выбрать пол.

В первой части кода вводимые данные имеют формат текста:

<form>
Имя:
<input type="text" name="firstname" value="Введите имя">
Фамилия:
<input type="text" name="lastname" value="Введите фамилию">

Во второй части нужно выбрать один пункт из двух:

Мужчина
<input type="radio" name="gender" value="male" checked>
Женщина
<input type="radio" name="gender" value="female">
</form>

Формы заключаются в специальный HTML-тег <form>, который нужно обязательно закрывать.выпадающие

Сайтодел | #код #html

💾 Magic Card – эффект анимации для карточек на экране. При наведении курсора исчезает свечение и появляется надпись на карточке.

Сайтодел | #сниппет #css

🌐 Bluebird.js – библиотека JavaScript, которая работает с промисами

Эта библиотека реализует функционал промисов в языке JavaScript. Bluebird.js включает в себя множество возможностей, таких как отмена, методы итерации и предупреждения, которых нет в нативных промисах. Преимущество библиотеки – быстрая работа.

Метод finally регистрирует обработчик, который срабатывает независимо от конечного состояния промиса (fulfilled или rejected). В Bluebird.js улучшен метод catch, который с легкостью фильтрует ошибки.

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

Сайтодел | #библиотека #javascript

💾 Voyage Slider GSAP – эстетичный слайдер для изображений на сайте. Картинки переключаются плавно, создавая эффект перемешивания карт. Выбранное изображение показывается и на фоне слайдера.

Сайтодел | #сниппет #css

⌨ Работа со шрифтом в CSS

Язык CSS позволяет изменять общий вид текста и добавлять шрифты. Вы можете выбрать шрифт при помощи свойства font-family, определить стиль (нормальный, курсив или наклонный) и вариант шрифта (нормальный или капитель).

Задать жирность шрифта вы можете с помощью специальных значений (нормальный, светлый, полужирный, жирный) либо по шкале от 100 до 900.

.new_text {
font-family: Arial;
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12px;
}
Размер шрифта можно определить в пикселях (px), пунктах (pt) или процентах.

Сайтодел | #код #css

💾 Card Hover Interactions – анимация для карточек. При наведении курсора на изображение всплывает дополнительная информация о карточке и кнопка.

Сайтодел | #сниппет #css

🌐 Plotly.js – библиотека JavaScript для создания диаграмм

Эта высокоуровневая библиотека предназначена для построения интерактивных диаграмм. Все графики в Plotly.js можно настраивать: вы можете выбрать большое количество точек, цвета, подписи, метки, а также применить масштабирование и панорамирование.

Plotly.js дает возможность создавать точечные и линейные графики, круговые и пузырьковые диаграммы, гистограммы, различного вида шкалы и другие графические способы передачи данных. Она поддерживает анимацию графиков и создание 3D-моделей.

Библиотека подходит для работы с большим количеством данных. Plotly.js совместима с разными браузерами и позволяет экспортировать изображения диаграмм. Изображения 3D создаются при помощи WebGL.

Сайтодел | #библиотека #javascript

💾 Login Form – эффектная анимация для кнопки «отправить» в форме. При наведении курсора кнопка загорается ярким светом.

Сайтодел | #сниппет #css

⌨ Создание стилей для ссылок при помощи CSS

Чтобы пользователю было удобно работать с сайтом, посещенные и непосещенные ссылки должны внешне отличаться. Так будет проще понять, по какому веб-адресу вы уже переходили, а по какому – еще нет.

Чаще всего при нажатии на ссылку изменяется ее цвет. Например, в браузерах Yandex и Google посещенные ссылки приобретают фиолетовый цвет.

Задать стили для ссылок можно при помощи псевдоклассов. Они пишутся в CSS через двоеточие после названия селектора:

selector:pseudo-class {
property:value;
}

Применим два псевдокласса для тега <a>, в котором находится ссылка:

/* непосещенная ссылка */
a:link {
color: #100873;
}

/* посещенная ссылка */
a:visited {
color: #750062;
}

В этом примере непосещенная ссылка имеет синий цвет, но при переходе по адресу она становится фиолетовой.

Сайтодел | #код #css

3D Carousel – это слайдер для показа карточек на сайте, который имеет объемную перспективу и удобное переключение. На карточки можно поместить любой текст или изображения.

Сайтодел | #сниппет #css

🌐 Howler.js – библиотека JavaScript для работы с аудио

Эта библиотека делает работу со звуком в языке JavaScript простой и надежной на всех платформах. Ее преимущества – это упрощенный API, поддержка большого количества аудиоформатов, совместимость с разными браузерами и отсутствие внешних зависимостей.

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

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

Сайтодел | #библиотека #javascript