🌐 Vetur – полезное расширение VS Code для работы с Vue

Это расширение представляет собой инструмент, который облегчает работу с Vue за счет подсветки необходимых частей кода и использования сниппетов. Vetur чрезвычайно популярен: его скачали более 9 миллионов раз. Установить расширение можно через Visual Studio Marketplace.

Основное преимущество Vetur – это подсветка кода Vue различными цветами, благодаря чему вы точно не запутаетесь при работе с объемными проектами. VS Code способен распознавать тип кода в файле по его расширению.

Vetur поддерживает код, написанный на HTML, JavaScript, TypeScript, CSS, Haml, PostCSS, Stylus, Sass и Pug. Расширение также поддерживает работу Emmet, форматирует код и проверяет ошибки, работает с технологией IntelliSense и поддерживает отладку.

Сайтодел | #расширение #vscode

💾 Simple CSS Waves - анимация плавных волн с эффектом параллакса. Реализовано на чистом CSS без использования JavaScript.

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

⌨ Зачем нужен метод join() в массивах JavaScript?

При работе с массивами в языке JavaScript часто используется метод join(). Он нужен для того, чтобы объединять все элементы массива в строку.

Содержимое массива разделяется запятыми, поэтому вы можете оставить их как есть, склеить, заменить пробелами или другими знаками:

const elements = ['Я', 'изучаю', 'JavaScript'];

console.log(elements.join()); // Я, изучаю, JavaScript

console.log(elements.join('')); // ЯизучаюJavaScript

console.log(elements.join('-')); // Я-изучаю-JavaScript

Метод join() бывает полезен на практике, когда на экран необходимо вывести все элементы массива, например изображения, но при этом убрать мешающие запятые.

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

🌐 Axios – библиотека JavaScript для работы с HTTP-запросами

Эта библиотека используется для взаимодействия с AJAX и HTTP-запросами. Она довольно популярная и применяется не только с Vue, Angular и React, но и с Node.js на сервере. Axios прост в использовании и обладает богатым функционалом.

Axios полностью поддерживает Promise API, обрабатывает XMLHttpRequests в браузерах и HTTP-запросы из Node.js, перехватывает запросы и ответы и преобразует входные и выходные данные.

Библиотека автоматически преобразует формат JSON и защищает на стороне клиента от CSRF-атак. Axios абсолютно бесплатный и имеет открытый исходный код на GitHub.

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

💾 CSS mouse-out transition effect – эффект анимации при наведении мышки на текст. CSS выделяет текст при выполнении hover ярким цветом.

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

⌨️ Как убрать подчеркивание ссылок в CSS?

Свойство text-decoration отвечает за оформление текста. Оно часто используется при создании ссылок, чтобы придать им единообразный и гармоничный вид.

Если раньше по умолчанию ссылки имели подчеркивание и отличались этим от остального текста, то сейчас это не всегда нужно. Чтобы убрать нижнее подчеркивание, для текста ссылки применяют text-decoration: none

<style>
a {
text-decoration: none;
color : black;
}
a:hover {
text-decoration: underline;
color : red;
}
</style>

При нажатии на ссылку она обретет нижнее подчеркивание благодаря значению underline, а также станет красного цвета.

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

🌐 Survey.js - библиотека JavaScript для создания опросов и викторин

Библиотека позволяет создавать полностью настраиваемые опросы, формы и тесты, которые легко интегрируются в приложение. С помощью Survey.js вы можете показывать опросы в браузере, менять их внешний вид и даже создать собственное хранилище данных.

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

Работу библиотеки легко расширить с помощью сторонних виджетов JavaScript, которые не включены в продукт. Survey.js основан на JSON и совместим с различными фреймворками и библиотеками JavaScript, такими как React, Angular, jQuery и Vue.

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

⌨️ Метод splice в JavaScript

Иногда бывает нужно удалить какой-либо элемент из массива. Для этого можно использовать delete. Однако тут есть проблема – количество элементов в массиве не изменится, а на месте удаленного элемента останется незаполненное пространство:

let arr = ["Я", "читаю", "Сайтодел"];

delete arr[1]; //

alert( arr[1] ); // undefined

arr = ["Я", , "Сайтодел"];

Чтобы избежать этой проблемы, используем метод splice()

let arr = ["Я", "читаю", "Сайтодел"];

arr.splice(1, 1); // удалить 1 элемент с позиции 1

alert( arr ); // осталось два элемента

Метод splice() позволяет вырезать элементы из массивов, не оставляя при этом «дыры» на их месте.

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

🌐 Choreographer.js - библиотека JavaScript для работы с CSS-анимациями

Это очень маленькая (примерно 2 Кб) библиотека для обработки сложных CSS-анимаций, которые могут быть привязаны к любым событиям. Choreographer.js дает возможность создавать анимацию через JavaScript, а не с помощью чистого CSS.

Библиотека предоставляет ряд свойств, которые вы можете легко настроить и расширить во время использования. Сюда относятся выбор типов движения, настройка стилей для объектов и настройка эффектов движения на основе таких событий, как перемещение мыши, прокрутка и так далее.

Choreographer.js также может добавлять пользовательские функции, которые выполняют анимацию, отличную от CSS. Чтобы начать пользоваться библиотекой, просто установите пакет через npm или подключите файл через тег <script> в качестве скрипта.

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

💾 Animation Buttons – эффект анимации, который выполняется при наведении курсора на кнопку. Здесь используется современный тренд веб-дизайна – неоморфизм.

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

⌨️ Свойство 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