🌐 Sentinel.js – библиотека JavaScript для работы с узлами DOM

Sentinel.js - это маленькая библиотека JavaScript, которая позволяет обнаруживать новые узлы DOM с помощью селекторов CSS. Библиотека позволяет легко настроить функцию наблюдения, которая будет уведомлять вас каждый раз, когда в DOM добавляется новый узел, соответствующий заданному правилу CSS.

Sentinel.js использует динамически определяемые правила анимации CSS (@keyframes) для подключения к событиям запуска анимации браузера. Это происходит, когда в DOM добавляется новый узел, соответствующий заданному селектору CSS.

Важно знать, что Sentinel.js не будет обнаруживать элементы стиля CSS c display:none, но будет находить элементы, помеченные как visibility:hidden. Библиотека работает с такими браузерами, как IE10+, Opera 12+, Safari 5+, Chrome, Firefox, iOS 6+, Android 4.4+.

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

⌨️ Как вывести отдельный элемент массива в JavaScript?

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

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

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

let arr = [];

let arr = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс'];

Допустим, нам нужно вывести не все данные, а только элемент, обозначающий пятницу. Нумерация в массиве начинается с нуля, поэтому 'пт' будет иметь номер 4, а не 5.

alert(arr[4]);

Готово! Теперь во всплывающем окне будет появляться только один нужный нам элемент.

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

🌐 Mousetrap – библиотека JavaScript для работы с горячими клавишами

Это простая библиотека для создания горячих клавиш и обработки сочетаний клавиш в JavaScript. Вы не ограничены только событиями нажатия клавиши keydown: можно также указать событие поднятия клавиши keyup или нажатие символьной клавиши keypress (или позвольте Mousetrap выбрать для вас).

Mousetrap позволяет привязать события клавиш непосредственно к специальным клавишам, таким как ? или *, без необходимости указывать shift + / или shift + 8, которые не согласованы на всех клавиатурах. Библиотека работает с международными раскладками клавиатуры.

Mousetrap - это автономная библиотека без внешних зависимостей. Она весит около 2 Кб в сжатом виде и 4,5 Кб в уменьшенном виде. Она поддерживает такие браузеры, как Internet Explorer 6+, Safari, Firefox и Chrome.

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

🌐 ZooMove – плагин jQuery для масштабирования изображений

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

ZooMove имеет следующие опции для CSS:
zoo-image добавляет изображения;
zoo-scale устанавливает конечный размер зума;
zoo-move при значении true двигает картинку вместе с курсором;
zoo-over если изображение будет выходить за пределы контейнера.

Это абсолютно бесплатный плагин с открытым исходным кодом, который доступен на GitHub. ZooMove совместим с версиями: jQuery 1.7+, а также с браузерами Chrome 42+, Firefox 41+, Safari 9+, Opera 29+, Internet Explorer 9+.

Сайтодел | #плагин #jquery

⌨ Псевдоэлемент ::first-letter в CSS

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

Псевдоэлемент ::first-letter задает стиль первого элемента в тексте и используется, как правило, для создания буквиц – увеличенных прописных букв.

Допустим, необходимо задать стиль для самой первой буквы в абзаце. Для этого нужно добавить к селектору p псевдоэлемент ::first-letter:

<body>
<p> Сайтодел – это канал, который помогает быстрее освоить фронтенд-разработку и дает много полезных знаний. </p>
</body>

p {
font-family: Arial, Helvetica, sans-serif; /* Шрифт для текста */
}
p::first-letter {
font-family: 'Times New Roman', Times, serif; /* Шрифт для буквицы */
font-size: 2em; /* Размер буквицы */
color: red; /* Красный цвет буквицы */
}

Теперь стиль первой буквы текста будет отличаться от остального абзаца.

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

🌐 Ramda - функциональная библиотека для JavaScript

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

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

Библиотека включает в себя автоматическое каррирование функций и на данный момент имеет более 21500 звёзд на GitHub. Для того, чтобы каррирование было удобным, параметры упорядочиваются по функциям.

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

⌨️ Условное ветвление с if

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

<script>
var a = 15, b = 5;
if (a > b) {
alert("значение a больше, чем b");
} else {
alert("значение b больше или равно a");
}
</script>

В данном примере а больше чем b, поэтому выполнится условие после if. Если бы а было меньше или равно b, то выполнилось бы условие после else.

Конструкция с if часто применяется на практике, когда в переменные помещаются данные, которые задает пользователь. Например, нужно указать номер месяца, в котором родился человек. Условие в блоке с if выполнится, только если это число больше 0 и меньше 13.

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

🌐 Aurelia – фреймворк JavaScript с современным подходом к веб-разработке

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

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

Преимущество фреймворка и в том, что он поддерживает разные языки: ES5, ES6, CoffeeScript, TypeScript и AtScript. Библиотеки Aurelia подходят для использования по отдельности на сайтах или же на стороне сервера при помощи node.js. Фреймворк имеет открытый исходный код.

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

⌨️ Блочные элементы в HTML

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

<div> - это универсальный блочный контейнер и один из самых популярных тегов. Он используется для того, чтобы помещать в него содержимое. Этот тег позволяет выравнивать то, что в нем содержится и поэтому очень удобен в работе.

<h1>...<h6> - эти теги нужны для того, чтобы обозначать заголовки разных уровней и тем самым выстраивать структуру текста.

<p> - этот тег обозначает абзац текста.

<hr> - горизонтальная линия, которая отделяет блоки друг от друга и всегда начинается с новой строки.

Пример использования блочных элементов:

<body>
<div>
<h1>Сайтодел</h1>
<p>Приветствую тебя, читатель!
На нашем сайте ты найдешь всю полезную информацию по созданию сайтов и приложений!
</p>
</div>
</body>

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

🌐 Meteor – фреймворк JavaScript для создания приложений

Это популярный фреймворк, на котором вы можете разрабатывать приложения для Android и iOS. Meteor помогает быстро создавать продукт на языке JavaScript и работает поверх node.js. В среде разработки представлены решения с полным стеком, которые позволяют заниматься внутренней разработкой, управлять базами данных, заниматься бизнес-логикой и внешним рендерингом.

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

Meteor популярен на рынке, и в настоящее время его используют более 13 000 сайтов. Пользовательский интерфейс таких сайтов, как meteofrance.com и mtv.com были созданы с участием этого фреймворка.

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

⌨️ Синтаксис "Function Declaration" и "Function Expression" в JavaScript

В языке JavaScript записать функцию можно разными способами. Чаще всего разработчики используют стандартную запись "Function Declaration" или объявление функции:

function greeting() {
alert( "Привет, подписчик канала Сайтодел!" );
}

В данном случае запись начинается со слова "function", затем идет название и сама функция.

Есть и другой способ записи функции "Function Expression ", или функциональное выражение:

let greeting = function() {
alert( "Привет, подписчик канала Сайтодел!" );
}

В этом примере функция присваивается переменной. Функции, созданные вторым способом, недоступны выше того места, где они объявлены. Функции, записанные в синтаксисе "Function Declaration", станут доступны, если к ним обратиться до их объявления.

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

🌐 Auto Complete Tag – расширение VS Code для редактирования кода

В это расширение вошли два известных плагина VS Code - Auto Close Tag и Auto Rename Tag. Первый плагин автоматически закрывает теги в HTML и в других языках. Второй плагин нужен, чтобы автоматически переименовывать теги.

Когда вы меняете открывающий тег, вместе с ним меняется и закрывающий тег. Например, если вы напишете тег <p>, но вместо того чтобы закрыть его при помощи </p>, напишете </div>, расширение Auto Complete Tag поменяет его на </p>

Автоматическое закрытие парных тегов поможет избежать серьезных ошибок в коде, когда из-за незакрытого тега перестает работать весь проект. Теперь вам не придется искать незакрытые теги во всем коде!

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

⌨️ Как записывать цвет в CSS?

Обозначать цвет в значениях CSS-свойств можно различными способами. Вы можете использовать именованные цвета:

.top__heading {
color: green;
}

Такой вариант – самый простой, однако он имеет существенный недостаток: именованные цвета являются стандартными, здесь нельзя добавить оттенки.

Чаще всего для обозначения цвета используется шестнадцатеричный код:

.div {
color: #222222; /* белый цвет */
}

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

Цвет в CSS можно задать и в формате RGB/RGBA:

.main__element {
color: rgb(255, 255, 255); /* белый цвет */
}

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

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

⌨️ Принудительное преобразование типов данных в JavaScript

Начинающие разработчики часто сталкиваются с путаницей сложения и конкатенации переменных. В данном примере обе переменные содержат в себе строковый тип данных и поэтому складываются как строки:

let a = '5';
let b = '4';
alert(a + b); // выводится '54'

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

let a = '5';
let b = '4';
alert(Number(a) + Number(b)); // выводится 9

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

let a = Number('5'); // в переменную помещается число 5
let b = Number('4'); // в переменную помещается число 4
alert(a + b); // выводится число 9

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

🌐 Express.js - популярный веб-фреймворк для Node.js

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

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

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

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

🌐 TypeScript Hero – расширение VSCode для работы с языком TypeScript

TypeScript Hero - это расширение, которое облегчит процесс работы с кодом. Оно помогает сортировать и упорядочивать импорт, а также находит и исправляет ошибки в программе. TypeScript Hero представляет собой набор JavaScript с расширенными возможностями, который компилируется в обычный JavaScript.

Вот краткий список того, что может TypeScript Hero: импортировать ваш проект или библиотеки в текущий файл, добавлять все отсутствующие импортированные файлы с помощью одной команды, применять технологию Intellisense, которая предлагает символы и автоматически добавляет необходимый импорт.

В TypeScript Hero есть так называемая "функция лампочки", которая исправляет написанный вами код. Расширение работает с форматом документов TS / TSX. Разработчики также планируют добавить в TypeScript Hero инструменты для работы с JavaScript.

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

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

Для работы с итерациями циклов используются операторы break и continue. Оператор break применяется для выхода из цикла.

Оператор continue прерывает выполнение текущей итерации и возвращается к выполнению цикла только со следующей итерации.

for (let i = 0; i < 10; i++) {
if (i === 5) {
continue;
}
console.log(i);
}

Если бы оператора continue не было, в консоль выводились бы все числа от 0 до 9 включительно. Однако в условии отмечено, что continue действует, если i = 5.

В таком случае эта итерация цикла показана не будет: в консоль попадут все числа от 0 до 9 включительно, кроме 5.

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

🌐 Next.js – фреймворк JavaScript для создания сайтов с высоким SEO-рейтингом

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

Главное преимущество Next.js это встроенная поддержка SSR для повышения производительности и SEO. SSR повышает SEO-рейтинг сайтов, так как они загружаются быстрее, и SEO-трекеры могут сканировать больше содержимого сайта.

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

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

⌨ Разрыв строки в JavaScript

Иногда бывает ситуация, когда необходимо перенести часть строки в JavaScript. Синтаксис языка позволяет вам разбить оператор на две строки следующим образом:

let x = "Привет, читатель канала Сайтодел!";

let x =
"Привет, читатель канала Сайтодел!";

Однако разбить строку посередине не получится:

// let x = "Привет, читатель
// канала Сайтодел!";

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

let x = "Привет, читатель \
канала Сайтодел!";

Теперь перенос строки происходит без ошибок!

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

🌐 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