🌐 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

👨‍💻 [УРОК 72] WOW.js - библиотека для создания анимаций при прокрутке

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

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

🌐 Instant Wireframe – расширение Chrome для просмотра структуры сайта

Это расширение показывает структуру компоновки любого сайта – wireframe. Оно полезно веб-дизайнерам и разработчикам, особенно новичкам, которые изучают создание сайтов.

С помощью Instant Wireframe можно посмотреть, как расположен материал на странице и оценить работу дизайнера.

Для того, чтобы работать с Instant Wireframe, установите расширение и включите режим просмотра. Расширение покажет вам, из каких блоков состоит сайт и как распределен контент по экрану.

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

⌨ Как обрезать массив? Быстрый способ

Представим ситуацию, в которой нам необходимо сократить массив и оставить некоторое количество значений. Это могут быть, например, первые 4 компонента массива.

Первый способ – задать новую длину массива:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]

Однако можно использовать метод slice(), который содержит в себе копию части исходного массива:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]

Такой способ более быстрый и удобный.

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

🌐 Programming Hero – игра для обучения программированию

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

В игре есть возможность изучать Python, Java, C++ и основы веб-разработки. Результаты своей работы можно публиковать, а также добавить в свое портфолио.

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

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