🌐 Browserify – инструмент для работы с модулями JavaScript

Это полезный инструмент для разработчиков с открытым исходным кодом, который позволяет компоновать JavaScript, а также создавать и применять модули, которые впоследствии компилируются для работы в браузере. Для создания модулей Browserify использует стиль Node.js.

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

В своем нынешнем состоянии это уже очень удобный инструмент для структурирования вашего модульного JavaScript. Browserify особенно хорош для тех, кто работает с Node.js. Код становится намного чище для Node-разработчиков при использовании модулей npm как во фронтенде, так и бекенд-части проекта.

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

⌨ Псевдоклассы в CSS

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

Синтаксис псевдоклассов:

selector:pseudo-class {
property: value;
}

Ниже приведены примеры использования псевдоклассов:

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

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

a:hover {
color: #FF000F; /* курсор над ссылкой */
}

a:active {
color: #000FFF; /* выбранная (активная) ссылка */
}

Название псевдокласса начинается с двоеточия, оно пишется без пробела после селектора. Псевдокласс не существует сам по себе, он всегда соединен с селектором.

В этом посте указаны лишь некоторые псевдоклассы. На самом деле их гораздо больше!

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

🌐 WakaTime – удобный тайм-трекер для программистов

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

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

Сервис поддерживает более сорока сред разработки, куда входят Visual Studio, Android Studio, IntelliJ Idea, Unity, Eclipse, Xcode и так далее. Вы можете использовать WakaTime совершенно бесплатно. Есть также аккаунты премиум, корпоративный и командный.

Сайтодел | #инструмент #разработка

⌨️ Свойства фона в CSS

Свойства фона применяются в языке CSS для того, чтобы определить фоновые эффекты для тех или иных элементов.

В CSS цвет чаще всего определяется тремя способами: через название цвета (green), значение RGB (rgb(255,255,0)) и значение HEX (ff0000).

Самые часто используемые CSS-свойства для работы с цветом:

background-color
background-image
background-repeat

Свойство background-color задает фон элемента или целой страницы:

body {
background-color: white;
}

Свойство background-image помещает изображение в качестве фона:

body {
background-image: url(images/bg.jpg);
}

Свойство background-repeat устанавливает, сколько раз будет повторяться фоновое изображение:

body {
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
}

В данном примере изображение будет повторяться по горизонтальной оси.

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

🌐 Marionette.js – библиотека JavaScript для работы со сложными приложениями

Эта библиотека подойдет для создания JavaScript-приложений. Она работает на основе популярной библиотеки Backbone.js, которая представляет собой «скелет», на котором держится сам фреймворк. Marionette.js дополняет Backbone.js и значительно облегчает создание крупных приложений.

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

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

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

⌨ Как создать градиент в CSS?

Градиент – это плавный переход от одного цвета к другому. Язык CSS позволяет создавать линейный и радиальный градиент, а также делать его повтор.

Линейный градиент создается с помощью функции linear-gradient(). Необходимо задать угол наклона градиента, первый и второй цвет:

div {
height: 400px;
background: linear-gradient(45deg, #EECABA, #C5DAE8);
}

Радиальный градиент создается при помощи функции radial-gradient():

div {
height: 400px;
background: radial-gradient(circle #fff, #000);
}

Здесь мы задаем форму градиента, а также два цвета. Можно также задать и расположение градиента внутри блока.

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

🌐 Babylon.js – фреймворк JavaScript для создания браузерной 3D-графики

Этот легкий кроссбраузерный фреймворк применяется для создания 3D-графики в браузере. Преимуществом Babylon.js является то, что он не требует никаких сторонних плагинов и дополнительных программ. Фреймворк ориентирован на создание игр, поэтому у него есть дополнительные функции, которые не требуются в обыкновенном движке 3D-графики.

В Babylon.js есть возможности для работы с текстурами, добавления источников света на предметы, бликов, сглаживания, масштабирования и тумана. Инструмент имеет редактор кода, «песочницу» для проверки 3D-моделей, а также редактор для Node - инструмент визуального программирования.

Babylon.js может стать для вас подходящим фреймворком, если вы хотите создать игру. Он поддерживает анимацию: изменение положения и цвета моделей, перспективы, а также полноценная анимация персонажей.

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

⌨ Свойство text-shadow в CSS

В языке CSS вы можете добавлять тень к различным объектам. Это бывает нужно в зависимости от дизайнерских решений. Свойство text-shadow применяет тень к текстам.

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

.some_text {
     text-shadow: 3px 3px;
}

К тексту можно применить цвет:

.some_text {
    text-shadow: 3px 3px green;
}

Добавляем к тени текста третий параметр - размытие:

.some_text {
    text-shadow: 3px 3px 6px green;
}

Иногда бывает нужно применить цвет к самому тексту:

.some_text {
color: white;
    text-shadow: 3px 3px 6px green;
}

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

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

🌐 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