👨‍💻 [УРОК 68] CSS Peeper - расширение Chrome для удобного просмотра CSS-кода

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

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

🌐 Grunt – инструмент для автоматизации JavaScript

Этот инструмент используется для автоматизации создания проектов на JavaScript. Он работает в виде командной строки, которая управляет содержимым файла Gruntfile.

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

Grunt создан на базе Node.js. Его можно загрузить в виде пакета через менеджер пакетов Node (npm). Распространяется этот инструмент под лицензией MIT.

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

🌐 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.

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