⌨ Hover-эффект – изменение цвета

Сегодня мы рассмотрим, как сделать интересный hover-эффект, когда при наведении курсора объект становится зеленым.
Для начала создадим блок div с классом box, внутри которого будет текст. Зададим CSS-стили этому блоку:

.box {
background-color:white;
width: 100px;
height: 80px;
font-family: Roboto;
font-weight:700;
text-align:center;
}

Затем создадим собственно сам hover-эффект:

.box:hover {
background-color: #53ea93;
}

Готово! Теперь при наведении мышки на объект цвет его фона будет меняться на светло-зеленый оттенок.

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

🌐 Premonish - библиотека JavaScript для предсказывания действий пользователя

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

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

Premonish помогает понять, где разместить призывы к действию, учитывая движение курсора по экрану. Таким образом можно анализировать пользовательские интересы, чтобы сделать сайт более удобным и продающим.

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

⌨ Простые типы данных в JavaScript

В языке JavaScript переменная может принимать значения разных типов.

К простым типам относятся:

◽ Строковый (String) – последовательность символов, стоящая в кавычках. Строковые символы могут быть не только буквами и прочими символами, но и цифрами, поэтому следует отличать их от числовых данных.

let a = prompt (“Введите число”);

Строковый тип можно превратить в числовой, поставив в начале плюс:

let a = +prompt (“Введите число”);

◽ Числовой (Number) – целые или дробные числа.

Console.log (12345);

◽ Логический, или булевый (Boolean) – принимают занчения true/false.

let test = true;
if (test === true) {
alert('верно');
} else {
alert('неверно');
}

◽ Пустой (Null) – не имеет значения.

◽ Неопределенный (Undefined) – значение не присвоено.

Узнать тип данных можно при помощи оператора typeof:

Print (typeof 123)
Print (typeof 't.me/sitodel')

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

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

Этот сервис содержит огромную коллекцию настраиваемых градиентов. UiGradients предлагает на выбор эстетичные переходы цветов, для выбора достаточно просто перелистывать градиенты.

Цвета подобраны грамотно, поэтому использование UiGradients значительно упростит вам работу.

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

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

👨‍💻 [УРОК 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