🌐 Open In Browser – расширение для VS Code, с помощью которого файлы можно открывать сразу в браузере

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

Open In Browser открывает не только html-формат, но и другие типы документов. Расширение доступно для операционных систем Windows и Mac.

Чтобы открыть текущий файл в браузере по умолчанию, используйте горячие клавиши Alt+B. Чтобы выбрать браузер, нажмите комбинацию клавиш Shift+Alt+B.

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

⌨️ Диалоговые окна в JavaScript: методы alert, prompt, confirm

В языке JavaScript предусмотрены следующие типы всплывающих окон:

Alert – вызывает диалоговое окно с текстом (строковые данные) и имеет кнопку ОК.

Prompt - вызывает диалоговое окно, которое содержит поле ввода. Можно вводить строки и значения.

var name = prompt(" Ты подписан на t.me/sitodel?");

alert ("Добро пожаловать на эту страницу," + name + "!");

Confirm - вызывает диалоговое окно с текстом (строковые данные) и двумя кнопками: Cancel и OK.

confirm ("Вы действительно хотите покинуть эту страницу?");

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

🌐 Stylus – современный препроцессор для работы со стилями

Stylus – это альтернатива известным препроцессорам Sass и Less. Преимущество Stylus в том, что он написан на JavaScript, поэтому его проще использовать вместе с другими инструментами на Node.js, а также исправлять баги.

Stylus – гораздо более гибкий препроцессор, чем Sass. Например, с его помощью можно вызывать функцию как обычное CSS-свойство. От обычного CSS препроцессор отличается тем, что в нем не нужны фигурные скобки, точки с запятой после каждого свойства и двоеточия после названия свойств.

Stylus содержит в себе переменные, миксины, операторы, функции, импорты и другие возможности, которые дают ему преимущество перед обычным CSS.

Сайтодел | #препроцессор #CSS

👨‍💻 [УРОК 69] GitHub Pages - сервис для хранения статических HTML-страниц

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

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

🌐 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