🌐 Underscore.js – удобная библиотека для работы с JavaScript

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

Библиотека имеет много методов для работы с коллекциями, такие как: each(), map(), partition(), shuffle(), find(), reduce(), filter(), pluck().

Underscore.js также хорошо подходит для работы с массивами, для этого у нее есть методы first(), flatten(), zip(), object().

Underscore.js устанавливается также как и любая другая библиотека – через тег <script> или через Node.js: npm install underscore.

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

⌨ Как добавить шрифт в HTML-код через Google Fonts?

Для создания любого сайта нужны шрифты. В этом посте я расскажу, как загрузить шрифт в код, используя Google Fonts.

Нужно зайти на сайт Google Fonts, выбрать нужный шрифт и кликнуть на надпись Select this style.

В правой части экрана появится меню со свойствами шрифта. Нажмите на Embed, чтобы получить код.

Google предложит вам HTML-ссылку с тегом <link> или же CSS-формат с тегом <style>.

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

🌐 Semantic.UI – фреймворк-альтернатива Bootstrap

С помощью Semantic.UI разработчики могут создавать переносимые интерфейсы и использовать фрагменты UI в проектах. Этот фреймворк позволяет использовать уже готовые макеты и имеет большие возможности для настройки.

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

Фреймворк легко интегрируется с React, Angular, Meteor, Ember и другими инструментами разработчика. Элементы Semantic.UI выглядят эстетично: красивая анимация, селекторы, формы. С помощью этого фреймворка вы создадите красивые и полностью адаптивные веб-страницы.

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

⌨ Цикл while в JavaScript

Цикл в языке JavaScript – это однотипная последовательность действий, которая совершается, пока заданное условие истинно.

While – это один из типов циклов в JavaScript. Он задает условие, при истинности которого производится итерация, т.е. выполнение тела цикла.

let i = 0;
while (i < 5) { // выводит 0, затем 1, затем 2, затем 3, затем 4
alert( i );
i++;
}

В примере цикл выводит i, пока i < 5, то есть 5 раз: 0, 1, 2, 3, 4. Строка строка i++ увеличивает значение i на 1, пока значение цикла while истинно.

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

🌐 CSS Peek – расширение для работы со стилями

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

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

Установить CSS Peek можно в разделе «Расширения» в программе Visual Studio Code.

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

👨‍💻 [УРОК 70] HTML Hint - расширение VS Code для проверки HTML-кода

В этом уроке вы узнаете, как работать с HTML Hint - расширением для VS Code, которое проверяет ошибки в коде. Вы прочтете о его особенностях и установке. Статья рассказывает о преимуществах HTML Hint в работе веб-разработчика.

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

⌨ Как вставить иконку в код без помощи тега <img>?

Мало кто знает, что в Figma есть опция копировать графику в формате SVG. Для этого необходимо нажать правой кнопкой мыши на изображение и выбрать опции Copy/Paste, затем Copy as SVG. При этом программа сгенерирует код, который можно будет вставить в HTML-файл.

В редакторе кода изображение появится в виде тега <svg> с довольно длинным содержимым. Пугаться его не стоит, именно так и должно быть.

Метод хорош тем, что картинку не нужно сохранять на устройство. Также изображению в формате SVG можно менять цвет, что не сделаешь с изображением в теге <img>:

.icon__svg:hover path{
fill: #FFFFFF;
}

В данном примере иконка меняет цвет на указанный в fill во время наведения курсора.

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

🌐 Polymer.js – многофункциональная библиотека JavaScript

Polymer.js - это библиотека JavaScript с открытым исходным кодом для создания веб-приложений с использованием веб-компонентов. Библиотека разрабатывается сторудниками Google и другими участниками на GitHub.

Polymer.js предоставляет ряд функций по сравнению со стандартным JavaScript: упрощенный способ создания пользовательских элементов, как односторонняя, так и двусторонняя привязка данных, повторяющиеся шаблоны.

Эту библиотеку используют такие сайты, как YouTube, Google Play Music, Netflix, Electronics Arts, Coca-Cola, McDonald's, IBM и General Electric.

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

⌨ Центрирование сайта при помощи класса center

Обычно верстальщики применяют <div class=”container”> с заданными параметрами для центрирования содержимого страницы сайта. Это делается для того чтобы объекты не «расползались» в разные стороны, а находились в рамке, которая не превышает нужную ширину.

Есть и другой вариант: можно создать класс center со свойствами padding-left и padding-right и использовать функцию calc(). Из половины ширины экрана (50%) мы вычитаем половину ширины выбранной области, которая составляет 1200рх.

.center{
padding-left: calc(50% - 600px);
padding-right: calc(50% - 600px);
}

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

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

🌐 SVG Viewer – инструмент для работы с векторной графикой

Программа позволяет просматривать и печатать файлы векторной графики. Интерфейс программы легкий и интуитивно понятный. SVG Viewer поддерживает навигацию по всем SVG-файлам в текущей папке и позволяет просматривать изображения в полноэкранном режиме.

SVG Viewer можно установить как программу по умолчанию для просмотра SVG-файлов на вашем устройстве. С этим инструментом нет необходимости открывать каждое SVG-изображение в браузере.

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

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

⌨ Стилизация маркированных списков в CSS

В CSS есть возможность стилизовать списки. Самое очевидное свойство – это list-style-type, которое определяет внешний вид маркера.

Популярные значения – это disc (закрашенный кружок), circle (незакрашенный кружок), decimal (арабские цифры), upper-alpha и lower-alpha (заглавные и строчные латинские буквы). Если маркеры не нужны, можно задать значение none.

В качестве маркера может быть и изображение. Для этого используется свойство list-style-image, которое добавляет картинку или градиент. Значение url() указывает на путь к изображению, linear-gradient добавляет градиент, inherit наследует значения от родительского элемента, initial – значение по умолчанию.

Свойство list-style-position создает местоположение маркера. Значение outside указывает на то, что маркер находится вне блока текста, inside – в одном блоке с текстом, также есть свойства initial и inherit.

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

👨‍💻 [УРОК 71] GitLab - система управления репозиториями

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

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

🌐 Empire of Code – игра для изучения JavaScript

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

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

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

Сайтодел | #игра #javascript

🌐 Stylelint – программа, которая наводит порядок в CSS

Stylelint поможет вам сделать код единообразным и понятным. Он обнаруживает как серьезные ошибки, так и опечатки в файле. Stylelint работает с разными вариантами написания кода: это и стандартный синтаксис CSS, и расширения, и препроцессоры вроде SCSS или Less.

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

Программа работает на node.js и доступна как CLI, Node API, или PostCSS-плагин. Если вы ищете хороший, современный линтер, то Stylelint станет отличным выбором для вас!

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

⌨ Сравнение двух чисел на JavaScript

Для того, чтобы сравнить два числа на языке JavaScript, можно использовать оператор if…else. В этом случае задается условие, при котором два числа либо оказываются равны друг другу, либо одно из них больше другого.
Для начала нужно ввести числа, добавив их в переменные при помощи функции prompt():

var a = +prompt (‘Введите число’);
var b = +prompt (‘Введите число’);

Затем вводится конструкция с if:
if (a > b) {
var max = a;
} else if (a == b) {
alert("числа равны")
} else {
max = b;
alert(max);
}
В этом случае на экран будет выведено сравнение двух чисел.

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

🌐 TODO Highlight – расширение VS Code для постановки задач

Расширение работает с комментариями в коде. Если вы часто помечаете в коде какие-либо строки комментариями, но потом не можете их найти, то TODO Highlight вам поможет!

Плагин выделяет комментарии цветом, если в них содержатся слова TODO или FIXME. Таким образом, вы не пропустите необходимые детали, которые нужно сделать или доработать.

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

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

⌨ Как прикрепить JavaScript к файлу HTML?

Существует два основных способа, как добавить JavaScript в HTML.

Первый из них подразумевает добавление элементов JavaScript в HTML-код при помощи тега <script></script>, внутри которого и располагается JavaScript. Такой вариант подходит, если объем заключенного в тег кода не очень большой.

<script type="text/javascript">
document.write("t.me/sitоdel");
</script>

Второй способ – привязка JavaScript страницы к файлу с HTML. Внутрь тега <head></head> помещается ссылка на JS-файл.

<html>
<head>
<script src="script.js"></script>
</head>
<body>
</body></html>

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

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

🌐 VSCode Faker – расширение для генерирования случайных данных

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

VSCode Faker работает с разными типами данных: это и имена, и адреса, и номера телефонов и даже изображения. При написании кода расширение дает возможность выбрать тип данных.

VSCode Faker отлично подходит для генерации тестовых данных и для наименования плейсхолдеров в формах CSS.

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