⌨ Блочные и строчные элементы в HTML

Есть два основных типа HTML-элементов, которые соответствуют характеру их содержимого и поведению на веб-странице — это блочные и строчные элементы.

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

Примеры блочных тегов:

<h1> Сайтодел – канал о создании сайтов </h1>
<div> Мы рассказываем о веб-технологиях и о фронтенд-разработке
</div>
<p> Подписывайся на наш канал и не пропусти самое главное! </p>

Примеры строчных тегов:

<a href ="t.me/sitodel"> Ссылка на канал </a>
<img src ="picture.img">
<b> Важное сообщение выделяется жирным </b>

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

🌐 Fastify.js – быстрый фреймворк Node.js

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

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

Основные преимущества Fastify.js – это удобство обработки синхронных и асинхронных ошибок, полноценные контроллеры, валидация входных параметров, самодокументирование на основе определения роутов и готовых схем для валидации входных и выходных параметров.

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

👨‍💻 [УРОК 84] Code Spell Checker – расширение для редактирования кода

В этом уроке вы узнаете об особенностях плагина Code Spell Checker для проверки орфографии в VSCode. Вы прочтете о том, как установить расширение и как с ним работать.

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

⌨ Выравнивание текста в CSS с помощью свойства text-align

За выравнивание текста в языке CSS отвечает свойство text-align, которое может принимать различные значения.

Текст можно выровнять по левой, правой стороне или по центру:

p {
text-align: left;
}
p {
text-align: right;
}
p {
text-align: center;
}

Значение justify растягивает текст на ширину страницы или блока, благодаря чему правый и левый края текста будут ровными:

p {
text-align: justify;
}

Значения start и end выравнивают текст относительно края, где текст начинается или заканчивается. Если текст идет справа налево, значение start выровняет его по правой стороне, а значение end – по левой стороне:

p {
text-align: start;
}
p {
text-align: end;
}

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

🌐 Color Info – расширение VSCode, которое дает информацию о цветах

Это не очень большой плагин для Visual Studio Code, который дает краткую справку о цветах в CSS. Просто наведите курсор на название нужного вам цвета и получите всю необходимую информацию о нем. Цвета транслируются в разные форматы: hex, rgb, hsl и cmyk.

Вы можете определить, какие из этих полей в каком порядке будут отражаться, используя настройки плагина. По умолчанию расширение работает с любым документом CSS, SASS, SCSS и LESS и распознает все основные цветовые форматы CSS, включая именованные цвета.

Вы также можете включить Color Info в дополнительных типах файлов, используя настройку colorInfo.languages. Эта настройка определяет, для каких файлов и языков включена информация о цвете и какие типы цветов поддерживаются.

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

🌐 Draggable – библиотека JavaScript для работы с перетаскиваниями

Это модульная библиотека, которая работает с возможностью захватить мышью элемент и перенести его (англ. drag and drop). Она позволит вам начать с малого и наращивать по мере работы необходимые функции. В своем самом базовом виде Draggable обеспечивает большой функционал перетаскивания, быстрое изменение порядка DOM, доступную разметку и набор событий, за которые можно ухватиться.

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

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

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

🌐 Lass – библиотека JavaScript для поддержки пакетов заготовок кода в Node.js

Эта библиотека позволит вам пользоваться большим количеством функций для работы с Node.js. Так, например, вы сможете тестировать юниты при помощи ava и формировать код с prettier. Lass автоматически инициализирует git и устанавливает разметку форматирования.

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

Для того чтобы установить Lass, введите run npm install -g lass. Библиотека будет работать, если у вас установлена версия Node.js v10+.

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

🌐 Devices.css – библиотека для отображения мобильных устройств

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

В число устройств, с которыми работает Devices.css, входят iPhone X (серебряный), Google Pixel 2 XL (черный), iPhone 8 (серебряный, золотой и серый), MacBook (серебряный, золотой, розово-золотой и серый), MacBook Pro (серебряный и серый), Surface Book, Surface Pro, Surface Studio, Apple Watch, iMac Pro, iPad Pro (серебряный, золотой, розово-золотой и серый), Samsung Galaxy S8 (черный и синий), Google Pixel (серебряный, черный и синий).

Devices.css использует Autoprefixer, чтобы сделать большинство стилей совместимыми с более ранними браузерами. Для лучшей совместимости рекомендуются последние версии следующих браузеров: Chrome, Microsoft Edge, Opera, Safari, Firefox.

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

⌨ Комментарии в CSS-файле

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

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

Комментарии в CSS могут быть однострочными и многострочными. Текст можно расположить между блоками кода, а также после той или иной строки:

/*
Стиль для сайта t.me/sitodel
Работа с блоками
*/

div {
width: 400px; /* Ширина блока в пикселях */
background: #fff0f0; /* Светло-розовый цвет фона */
border: 1px solid black; /* Черная рамка */
}

CSS не допускает вложенных комментариев, когда один комментарий находится внутри другого.

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

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

В стандарте ES2015 добавились шаблонные литералы, то есть шаблонные строки.

Это строки, которые заключены в обратные кавычки (), пишутся в фигурных скобках со знаком доллара.

Шаблонные литералы гораздо удобнее, чем стандартная запись строк в JavaScript. Они не требуют выполнять конкатенацию с помощью знака плюс, что облегчает запись и делает ее короче. Шаблонные литералы можно передавать в функцию.

let channelName = "Сайтодел";
let channelFollowers = 31000;
let channelYear = 2020;

console.log (`Это канал ${channelName}, в котором ${channelFollowers} подписчиков. Он создан в ${channelYear } году.`);

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

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

👨‍💻 [УРОК 85] FullPage.js – библиотека JavaScript для создания эффектов прокрутки

В этом уроке вы узнаете об особенностях работы с библиотекой FullPage.js, о том как ее установить и использовать.

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

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

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

Этот инструмент использует такие функции, как виртуальный DOM, асинхронный рендеринг (вдохновленный React Fiber), TypeScript, JSX и генератор статических сайтов (SSG). Вы сможете создавать небольшие, очень быстрые и основанные на стандартах веб-компоненты, которые запускаются в каждом браузере.

Поскольку Stencil.js создает веб-компоненты, соответствующие стандартам, они могут работать со многими популярными фреймворками или использоваться без фреймворка, так как они являются просто веб-компонентами.

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

⌨️ Логический оператор && в JavaScript

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

В этом случае поможет оператор && (логическое И).

let month = prompt('Введите месяц вашего рождения');
if(month > 0 && month <= 12){
alert('Спасибо!');
}else{
alert('Вы ввели неправильное число!');
}

В данном примере введенное число может быть больше 0 и не больше 12, иначе пользователь получает сообщение, что он ввел неправильное число.

Для того, чтобы условие выполнилось, month > 0 и month <= 12 должны быть true. Если хотя бы одно из этих выражений будет false, условие не выполнится.

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

🌐 Svelte – фреймворк для создания быстрых веб-приложений

Svelte – это легкий компонентный фреймворк нового поколения, который написан на TypeScript и используется для разработки высокопроизводительных веб-приложений. Svelte отличается от известных фреймворков вроде Vue.js и React тем, что он преобразует приложение в «ванильный» JavaScript при компоновке, а не во время выполнения, повышая тем самым производительность.

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

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

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

👨‍💻 [УРОК 86] Knockout.js – библиотека JavaScript для работы с каркасом веб-приложений

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

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

🌐 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