🌐 iziModal.js – плагин для создания модальных окон

Этот плагин позволит вам создавать красивые модальные окна, которые можно самостоятельно редактировать и настраивать. Для окон применяются различные эффекты, которые легко настроить.

iziModal.js работает на jQuery. Для работы достаточно скачать плагин, подключить библиотеку и стили плагина. У iziModal.js имеются готовые варианты для фрейма, формы, AJAX`a.

Для работы с плагином для работы вам нужна копия библиотеки jQuery. Для библиотеки можно также включть библиотеку извне от CDNJS.

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

⌨ Метод map() в массиве

При помощи метода map() можно вернуть новый массив, который содержит трансформированные значения обрабатываемого массива.

Способ трансформирования задаётся в передаваемой этому методу функции:

const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el+20);
console.log(mapped);
// [21, 22, 23, 24, 25, 26];

При помощи метода map() можно таким образом изменять внутренние данные в массиве.

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

🌐 GraphQL - расширение VSCode, которое проверяет и подсвечивает код

Расширение GraphQL VSCode создано с целью тесной интеграции экосистемы GraphQL с VSCode для удобства разработчиков. Это расширение обеспечивает подсветку синтаксиса (тип, запрос, интерфейс, объединение, перечисление, фрагменты, директивы).

GraphQL выполняет переход к определению, просматривает информацию о наведении (hover) и cоздает автозаполнение для проектов graphql. Оно работает с запросами, помеченными тегом gql.

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

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

🌐 Log File Highlighter – расширение VSCode для поддержки log-файлов

Это расширение Visual Studio Code создано для добавления цветовой подсветки в log-файлы. Оно основано на стандартных соглашениях для файлов журналов log4net, но подходит и для других вариантов log-файлов.

Цвета в Log File Highlighter настраиваются, но по умолчанию используется текущая цветовая тема. Более ранняя версия подсветки из этого расширения была включена в Visual Studio Code версии 1.20.

Если вам нравится, как выглядят изначально log-файлы в VSCode, то вам не нужно это расширение. Однако если вам нужна дополнительная подсветка, настраиваемые шаблоны и расчет продолжительности времени, то смело устанавливайте Log File Highlighter.

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

⌨ Оператор break в JavaScript

Оператор break нужен для того, чтобы прервать выполнение текущего цикла. Как только в коде появляется break, происходит выход из цикла и выполнение кода завершается.

Дальнейшая работа продолжается с конструкции, которая следует за прерванной.

Очень часто оператор break используется в конструкции switch…case:

let language = 'ru';
switch (language) {
case 'ru':
alert('русский');
break;
case 'en':
alert('английский');
break;
case 'de':
alert('немецкий');
break;
default:
alert('такого языка нет);
}

Если значения совпадают, то выводится только нужное значение, а остальные – нет. Это возможно благодаря оператору break.

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

👨‍💻 [УРОК 79] Premonish – библиотека JavaScript для предсказывания действий пользователя

В этом уроке вы узнаете, как установить и запустить библиотеку Premonish, а также как с ней работать. Вы также прочитаете об ее основных преимуществах.

📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья

🌐 Cleave.js – библиотека JavaScript для форматирования поля input

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

Cleave.js включает в себя форматирование номера кредитной карты, номера телефона, даты и цифр. Библиотека имеет пользовательский шаблон разделителей, префиксов и блоков. Поддерживается режим CommonJS.

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

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

🌐 Material UI – библиотека для работы с React-приложениями и сайтами

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

Библиотека проста в использовании и может применяться для быстрого создания приложений. Она находится в открытом доступе и применяется в крупных организациях, таких как Netflix, Spotify и Amazon.

Ключевые особенности Material UI – это то, что она поддерживает согласованность пользовательского интерфейса, работает во всех браузерах и с большинством CSS-решений для JS и весит менее 4 КБ при сжатии.

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

⌨ Метод find() в JavaScript

Метод find() вернет значение первого найденного в массиве элемента, которое удовлетворяет условию, переданному в функцию.

В противном случае возвращается undefined, например, если такого элемента в массиве нет.

Создадим массив, в котором есть три объекта:

const arr = [
{ id: 1, name: "Сайтодел" },
{ id: 2, name: "Телеграм" },
{ id: 3, name: "Канал" },
]

Для того, чтобы найти третий элемент, воспользуемся методом find():

arr.find(element => element.id === 3)
// Output : {id: 3, name: " Канал "}

Элемент номер 7 найти не удалось, так как его не существует:

arr.find(element => element.id === 7)
//Output : undefined

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

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

Библиотека предлагает полезные функции для того, чтобы манипуляции со строками были еще удобнее: изменение регистра, обрезка, накладка, латинизация и многое другое. Voca предоставляет полный набор функций для управления, форматирования и экранирования строк.

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

Voca поддерживает различные среды разработки: Node.js 0.10+, Chrome, Firefox, Safari 7+, Edge 13+, IE9+. Библиотека включает подробную, легкую для чтения и доступную для поиска документацию.

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

👨‍💻 [УРОК 80] CSS Peek – расширение для работы со стилями

В этом уроке вы узнаете о том, что такое CSS Peek, какие у него преимущества, как установить это расширение и как им пользоваться.

📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья

🌐 Apache Conf – расширение VSCode, которое поддерживает синтаксис Apache

Расширение создано для работы с синтаксисом Apache. Оно поддерживает такие расширения файлов, как .conf, .htaccess, .htgroups, .htpasswd.

Apache Conf позволит VS Code понять, что это файл Apache, и автоматически правильно выбрать язык. Определите Apache conf в качестве языка: в правом нижнем углу нажмите кнопку «Выбрать языковой режим».

Чтобы установить расширение в Visual Studio Code, откройте панель команд с помощью клавиш Ctrl+Shift+P или введите в командную строку ext install apache.

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

⌨️ Шаблонные литералы в JavaScript

В современном стандарте JavaScript вместо конкатенации, то есть «склеивания» строк, можно использовать шаблонные литералы.

Вот так писали раньше:

var name = prompt("Введите свое имя");
var age = prompt("Введите свой возраст");
console.log("Меня зовут " + name + ", мне " + age + " лет");

А сейчас стало проще:

var name = prompt("Введите свое имя");
var age = prompt("Введите свой возраст");
console.log(`Меня зовут ${name}, мне ${age} лет`);

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

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

🌐 Editor.js – библиотека для работы с текстовыми данными

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

Рабочее пространство Editor.js состоит из отдельных блоков: абзацев, заголовков, изображений, списков, цитат и т.д. Каждый из них представляет собой независимый редактируемый элемент (или более сложную структуру), предоставляемый плагином.

Существуют десятки готовых к использованию блоков и простой API для создания любого необходимого вам блока. Например, вы можете реализовать блоки для твитов, постов в Instagram, опросов, CTA-кнопок и даже игр.

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

⌨ Всплытие переменной в JavaScript

Когда мы используем в коде переменную var, может возникнуть ситуация, которую называют всплытием переменной (hoisting).

Если мы создадим переменную и присвоим ей значение, а потом выведем в консоль, все будет так, как мы и ожидали:

var name = "Сайтодел";
console.log(name); // Сайтодел

Если сначала вывести переменную в консоль, а затем объявить ее, то мы увидим undefined:

console.log(name);
var name = "Сайтодел"; // undefined

Переменная name «всплывает» наверх, и получается выражение, равносильное этому:

var name;
console.log(name);
var name = "Сайтодел";

Так как в первой строке переменная еще не определена, то консоль показывает undefined.

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

🌐 JsHint – расширение VSCode для с кодом JavaScript

Введение: JsHint - это инструмент, который обнаруживает ошибки и потенциальные проблемы в коде JavaScript. Поскольку JsHint очень гибкий, вы можете легко настроить его в среде, где вы собираетесь писать код.

Для того, чтобы установить JsHint в Visual Studio Code, зайдите в раздел расширений и выберите там JsHint. Расширение ищет модуль JsHint в текущей директории и глобально. Вы можете установить расширение локально с помощью npm install jshint или глобально с помощью npm install -g jshint

Чтобы отключить JsHint для рабочей области, укажите "jshint.enable": false в настройках рабочей области. Расширение включено по умолчанию.

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

👨‍💻 [УРОК 81] Empire of Code – игра для изучения JavaScript

В этом уроке вы узнаете о полезной для разработчика игре Empire of Code, о ее преимуществах и недостатках и о том, как начать в нее играть.

📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья

⌨ Как создавать списки в HTML?

В HTML списки бывают упорядоченные и неупорядоченные.

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

Это могут быть инструкции и рецепты. Упорядоченные списки создаются через тег <ol> (ordered list – «упорядоченный список»). Пример:

<ol>
<li>Включите компьютер.</li>
<li>Откройте Telegram.</li>
<li>Найдите канал «Сайтодел».</li>
<li>Подпишитесь на него.</li>
<li>Прочитайте посты и уроки.</li>
</ol>

Неупорядоченный список может быть представлен в произвольном порядке. Такие списки иначе называют маркированными.

Это могут быть списки дел или важные пункты из текста. Неупорядоченные списки создаются через тег <ul> (unordered list – «неупорядоченный список»). Пример:

<ul>
<li>одежда</li>
<li>книги</li>
<li>ручки</li>
<li>ноутбук</li>
<li>сумка</li>
</ul>

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