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

Этот фреймворк поможет вам при разработке нативных графических приложений для различных операционных систем. Для работы с бэкендом Electron.js использует Node.js, а для веб-рендеринга применяются библиотеки Chromium. Языки, на которых создаются приложения – это HTML, CSS и JavaScript.

Electron.js не зря называют кроссплатформенным фреймворком, ведь он позволяет разрабатывать приложения, совместимые с Windows, Mac и Linux. Проект имеет открытый исходный код, который поддерживает OpenJS Foundation и активное коммьюнити авторов.

На этом фреймворке разработаны такие известные сервисы, как Discord и Skype, редактор кода Visual Studio Code и еще около 700 менее известных приложений, о которых вы можете почитать на официальном сайте Electron.

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

⌨ Как сделать изображение границей элемента?

В CSS вы можете поставить любое изображение в качестве границы какого-либо элемента. Проще говоря, из картинки можно сделать рамку! Для этого применяется свойство border-image

Это свойство позволяет указывать, должно ли изображение повторяться или его надо растянуть по всей длине.

В этом примере изображение будет повторяться по всему периметру благодаря значению round

.border_image {
border: 15px solid transparent;
padding: 20px;
border-image: url(image.png) 40 round;
}

Свойство stretch противоположно свойству round, поскольку оно растягивает картинку:

.border_image {
border: 15px solid transparent;
padding: 20px;
border-image: url(image.png) 40 stretch;
}

Картинка добавляется в код с помощью обращения через URL.

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

🌐 Cypress.js – фреймворк JavaScript для тестирования веб-приложений

Cypress.js - это новый стандарт тестирования фронтенда, необходимый каждому разработчику и QA-тестировщику. Проект имеет открытый исходный код, поддержкой которого занимается сообщество авторов. Отличительная особенность Cypress.js – это его архитектура: в этом фреймворке не содержится основной элемент Selenium.

Cypress.js позволяет делать скриншоты во время выполнения тестов. Для этого просто наведите курсор на панель задач, чтобы увидеть, что происходило на каждом из этапов. Для отлаживания используются инструменты Chrome DevTools. Вам больше не придется гадать, почему не работает код!

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

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

⌨ Функция-конструктор в JavaScript

Функции-конструкторы широко используются в JavaScript-разработке, когда мы имеем дело с объектно-ориентированным программированием (ООП).

Функция-конструктор - это самая обычная функция, однако ее название начинается с большой буквы, а вызывается она при помощи оператора new

function User (name){
this.name = name;
this.isAdmin = true;
}

let user = new User("Мария");
alert(user.name); // Мария
alert(user.isAdmin); // true

В примере сначала был создан класс User. На его основе мы создали новый объект класса и записали его в переменную user

От одного класса можно сделать множество экземпляров, которые не зависят друг от друга.

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

🌐 Retire.js – расширение для поиска уязвимых JavaScript-библиотек

Небезопасные библиотеки могут представлять огромный риск для вашего веб-приложения. Цель Retire.js - помочь вам обнаружить использование версии с определенными уязвимостями. Retire.js имеет следующие части: сканер командной строки, плагин Grunt, расширение Chrome и расширение Firefox.

С помощью сканера командной строки можно проверять веб-приложения или Node-приложения на наличие уязвимых библиотек JavaScript или Node.js. Расширения Chrome и Firefox сканируют посещенные сайты на наличие ссылок на небезопасные библиотеки и выводят предупреждения в консоль разработчика. Значок в адресной строке также будет указывать, были ли загружены уязвимые библиотеки.

Расширение бесплатное, оно имеет широкие возможности сканирования: пути, папки, прокси-серверы, только Node / JS, URL и т.д. Вы можете добавить уязвимости, которые нужно игнорировать. Дополнительна опция - пассивное сканирование с помощью плагина браузера.

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

⌨ Как сделать навигационную панель на HTML?

Полноценная панель навигации на сайте обязательно должна иметь основу в виде HTML. Обычно навигационная панель создается из списка ссылок, которые ведут на разные части сайта или страницы:

<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="items.html">Товары</a></li>
<li><a href="aboutus.html">О нас</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>

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

Одной только HTML-разметки для создания навигационной панели недостаточно. Необходимо оформить в CSS свойства контейнера с ссылками <ul>, а также задать стиль надписям в тегах <li>

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

🌐 Polly.js - библиотека JavaScript, которая обнаруживает случайные сбои

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

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

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

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

⌨ Область видимости переменных

Область видимости переменных в JavaScript определяет доступность переменных в том или ином участке кода. С 2015 года в ES6 появилась область действия блока. К переменным let и const, которые объявлены внутри блока { }, нельзя получить доступ извне этого блока:

{
let x = 10;
}
// x нельзя использовать здесь

Переменные, которые объявлены при помощи ключевого слова var, не могут иметь блок { } в качестве области видимости:

{
var x = 10;
}
// x можно использовать здесь

Переменная, объявленная через var, имеет либо глобальную область видимости, либо область действия внутри функции.

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

🌐 Choices.js – библиотека JavaScript для создания полей ввода

Это небольшая легковесная библиотека JavaScript, которая позволяет работать с полями ввода или выбором текста. Отличительной особенностью Choices.js является то, что она не имеет зависимости от jQuery.

Сам по себе выбор (choice) применительно к этой библиотеке - это значение, которое выбирает пользователь. Он будет эквивалентен элементу <option></option> внутри тега <select></select>. Выборы могут объединяться в коллекции. Которые называются группами. Группу следует рассматривать как эквивалент элемента <optgroup></optgroup>

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

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

⌨️ Отличия свойств width и max-width в CSS

Свойство width используется в языке CSS для того, чтобы задавать элементам ширину. Если мы создаем блок <div> шириной 700px, то этот параметр останется неизменным. В примере ниже был создан блок с синей рамкой и текстом внутри:

<div class="element">
<p> Этот блок имеет ширину 700px</p>
</div>
<style>
.element {
width: 700px;
margin: auto;
}
</style>

Такой подход имеет недостаток: если мы будем менять ширину экрана, то ширина блока не будет меняться вместе с ней. Чтобы сделать блок адаптивным, лучше использовать свойство max-width:

.element {
max-width: 700px;
margin: auto;
text-align: center;
border: 3px solid blue;
}

В этом случае блок будет менять размер, если мы сделаем ширину экрана меньше 700px. Он будет подстраиваться под размер экрана, благодаря чему в верстку добавится адаптивность.

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

🌐 Uglify.js – библиотека JavaScript для сжатия файлов

Эта библиотека используется, чтобы сжимать и объединять JavaScript-файлы. Благодаря Uglify.js размер HTTP-ответов с сервера уменьшается, поэтому сайт начинает работать быстрее. Библиотека содержит различные инструменты, которые позволяют автоматизировать работу с кодом JavaScript.

К числу этих инструментов относятся:
- парсер, создающий абстрактное синтаксическое дерево (AST) из кода JavaScript;
- генератор кода, который выводит код JavaScript из AST и предоставляет возможность получить исходную карту;
- механизм, сокращающий имена локальных переменных до (обычно) одинарных букв.

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

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

⌨ Можно ли изменить константу в JavaScript?

Принято считать, что в языке JavaScript константа const не может меняться и повторно принимать значения. Этим она отличается от переменных, объявленных через let и var

В данном примере мы не можем записать в константу новое значение:

const a = "Сайтодел";
a = "Канал";

Если в константу помещен объект, то мы можем перезаписывать свойства. После замены свойства name на экране появляется значение "Канал":

const user = {
name: "Сайтодел"
};
user.name = "Канал";
alert(user.name); // Канал

Та же особенность актуальна и для массивов, в которые можно перезаписывать данные с помощью методов вроде .push() и .unshift()

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

🌐 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