34421
FullStack-материалы от Senior-разработчика для WEB-специалистов Сотрудничество: @CodingLead Разработка сайтов любой сложности 👨🏻💻
⌨ Как сгенерировать случайное число в JavaScript?
Для того, чтобы получить случайное число, в JavaScript используется метод Math.random().
Диапазон полученных чисел варьируется от 0 включительно до 1 не включительно. Эта функция необходима разработчикам, когда нужно сгенерировать что-либо случайное: анимацию, текст или данные игры.
Получить случайное число в заданном диапазоне можно так:function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
Для вывода числа введем числа интервала: console.log(getRandomInt(10, 100));
Консоль выдаст любое случайное число между 10 и 100.
Сайтодел | #код #javascript
⌨ Как обрезать массив? Быстрый способ
Представим ситуацию, в которой нам необходимо сократить массив и оставить некоторое количество значений. Это могут быть, например, первые 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
👨💻 [УРОК 72] WOW.js - библиотека для создания анимаций при прокрутке
В этом уроке вы узнаете, как работать с WOW.js – библиотекой для создания анимаций на страницах сайтов. Вы узнаете о преимуществах и недостатках WOW.js, а также сможете установить и подключить ее.
📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья
⌨ Как прикрепить 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
⌨ Сравнение двух чисел на 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
🌐 Empire of Code – игра для изучения JavaScript
Эта игра представляет собой стратегию, в которой в режиме реального времени соперничают два лагеря – разработчики JavaScript и Python. В самом начале игроку нужно пройти небольшой курс по выбранному языку, а затем начинается сама игра.
В Empire of Code вы построите свой мир, создадите базу и свои войска. Все действия в игре происходят за счет алгоритмов языка программирования, которые прописывает игрок.
Игра подходит для новичков, так как необходимые знания JavaScript можно получить в процессе. Изучать язык программирования увлекательно и легко, если осваивать не только литературу и видео, но и играть.
Сайтодел | #игра #javascript
⌨ Стилизация маркированных списков в 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
⌨ Центрирование сайта при помощи класса 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
⌨ Как вставить иконку в код без помощи тега <img>?
Мало кто знает, что в Figma есть опция копировать графику в формате SVG. Для этого необходимо нажать правой кнопкой мыши на изображение и выбрать опции Copy/Paste, затем Copy as SVG. При этом программа сгенерирует код, который можно будет вставить в HTML-файл.
В редакторе кода изображение появится в виде тега <svg> с довольно длинным содержимым. Пугаться его не стоит, именно так и должно быть.
Метод хорош тем, что картинку не нужно сохранять на устройство. Также изображению в формате SVG можно менять цвет, что не сделаешь с изображением в теге <img>:.icon__svg:hover path{
fill: #FFFFFF;
}
В данном примере иконка меняет цвет на указанный в fill во время наведения курсора.
Сайтодел | #код #html
🌐 CSS Peek – расширение для работы со стилями
CSS Peek – это очень удобное расширение, которое показывает всплывающее окно с CSS-кодом при наведении курсора при работе с HTML. Благодаря CSS Peek можно не искать нужный класс в огромном файле со стилями.
С помощью расширения можно не только находить нужные фрагменты CSS-кода, но и переходить к ним для редактирования. Это позволяет сэкономить огромное количество времени и делает процесс верстки более ясным и наглядным.
Установить CSS Peek можно в разделе «Расширения» в программе Visual Studio Code.
Сайтодел | #расширение #css
🌐 Semantic.UI – фреймворк-альтернатива Bootstrap
С помощью Semantic.UI разработчики могут создавать переносимые интерфейсы и использовать фрагменты UI в проектах. Этот фреймворк позволяет использовать уже готовые макеты и имеет большие возможности для настройки.
Semantic.UI имеет понятный HTML-код и легко читаемые названия классов. Фреймворк можно добавить в уже существующий проект, не внося больших изменений.
Фреймворк легко интегрируется с React, Angular, Meteor, Ember и другими инструментами разработчика. Элементы Semantic.UI выглядят эстетично: красивая анимация, селекторы, формы. С помощью этого фреймворка вы создадите красивые и полностью адаптивные веб-страницы.
Сайтодел | #фреймворк #UI
🌐 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
🌐 Stylus – современный препроцессор для работы со стилями
Stylus – это альтернатива известным препроцессорам Sass и Less. Преимущество Stylus в том, что он написан на JavaScript, поэтому его проще использовать вместе с другими инструментами на Node.js, а также исправлять баги.
Stylus – гораздо более гибкий препроцессор, чем Sass. Например, с его помощью можно вызывать функцию как обычное CSS-свойство. От обычного CSS препроцессор отличается тем, что в нем не нужны фигурные скобки, точки с запятой после каждого свойства и двоеточия после названия свойств.
Stylus содержит в себе переменные, миксины, операторы, функции, импорты и другие возможности, которые дают ему преимущество перед обычным CSS.
Сайтодел | #препроцессор #CSS
🌐 Open In Browser – расширение для VS Code, с помощью которого файлы можно открывать сразу в браузере
Во время работы над проектом необходимо наблюдать за состоянием файлов в браузере. Благодаря расширению Open In Browser файлы можно открывать через контекстное меню. Браузер можно задать по умолчанию или открывать проекты в любом другом браузере, установленном в системе.
Open In Browser открывает не только html-формат, но и другие типы документов. Расширение доступно для операционных систем Windows и Mac.
Чтобы открыть текущий файл в браузере по умолчанию, используйте горячие клавиши Alt+B. Чтобы выбрать браузер, нажмите комбинацию клавиш Shift+Alt+B.
Сайтодел | #расширение #vscode
👨💻 [УРОК 68] CSS Peeper - расширение Chrome для удобного просмотра CSS-кода
В этом уроке вы узнаете, что такое CSS Peeper, какие у него преимущества и как он работает. В статье описаны возможности CSS Peeper, его полезность как для дизайнеров, так и для веб-разработчиков, а также пошаговый план установки.
📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья
🌐 Programming Hero – игра для обучения программированию
С этим приложением вы сможете изучить азы программирования в легкой, игровой форме.
Programming Hero содержит наглядные пособия и примеры, конкурсы и викторины.
В игре есть возможность изучать Python, Java, C++ и основы веб-разработки. Результаты своей работы можно публиковать, а также добавить в свое портфолио.
Особенно интересен курс веб-разработки для новичков, где можно изучить HTML, CSS и основы JavaScript. Материал легкий для запоминания и усложняется по мере того, как повышается уровень.
Сайтодел | #игра #приложение
🌐 Instant Wireframe – расширение Chrome для просмотра структуры сайта
Это расширение показывает структуру компоновки любого сайта – wireframe. Оно полезно веб-дизайнерам и разработчикам, особенно новичкам, которые изучают создание сайтов.
С помощью Instant Wireframe можно посмотреть, как расположен материал на странице и оценить работу дизайнера.
Для того, чтобы работать с Instant Wireframe, установите расширение и включите режим просмотра. Расширение покажет вам, из каких блоков состоит сайт и как распределен контент по экрану.
Сайтодел | #расширение #chrome
🌐 VSCode Faker – расширение для генерирования случайных данных
Это расширение используется для создания случайных данных. VSCode Faker очень полезен, поскольку он поможет сэкономить много времени. Не у всех настолько хорошо развито воображение, чтобы придумывать произвольную информацию в считанные секунды!
VSCode Faker работает с разными типами данных: это и имена, и адреса, и номера телефонов и даже изображения. При написании кода расширение дает возможность выбрать тип данных.
VSCode Faker отлично подходит для генерации тестовых данных и для наименования плейсхолдеров в формах CSS.
Сайтодел | #расширение #vscode
🌐 TODO Highlight – расширение VS Code для постановки задач
Расширение работает с комментариями в коде. Если вы часто помечаете в коде какие-либо строки комментариями, но потом не можете их найти, то TODO Highlight вам поможет!
Плагин выделяет комментарии цветом, если в них содержатся слова TODO или FIXME. Таким образом, вы не пропустите необходимые детали, которые нужно сделать или доработать.
Фраза TODO обозначает то, что еще предстоит сделать, а FIXME указывает на уже созданный участок кода, который необходимо исправить. Расширение подходит в первую очередь для JavaScript-разработчиков.
Сайтодел | #расширение #javascript
🌐 Stylelint – программа, которая наводит порядок в CSS
Stylelint поможет вам сделать код единообразным и понятным. Он обнаруживает как серьезные ошибки, так и опечатки в файле. Stylelint работает с разными вариантами написания кода: это и стандартный синтаксис CSS, и расширения, и препроцессоры вроде SCSS или Less.
Инструмент имеет огромные возможности в настройке и может дополняться плагинами. Stylelint содержит в себе большое количество правил: это и общая стилистика, и специфические особенности кодинга.
Программа работает на node.js и доступна как CLI, Node API, или PostCSS-плагин. Если вы ищете хороший, современный линтер, то Stylelint станет отличным выбором для вас!
Сайтодел | #инструмент #css
👨💻 [УРОК 71] GitLab - система управления репозиториями
В этом уроке вы познакомитесь с GitLab – системой контроля версий, которая работает с git и является главным конкурентом всем известного GitHub. Вы узнаете, как создать свой аккаунт и репозиторий, а также прочитаете о преимуществах работы с GitLab.
📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья
🌐 SVG Viewer – инструмент для работы с векторной графикой
Программа позволяет просматривать и печатать файлы векторной графики. Интерфейс программы легкий и интуитивно понятный. SVG Viewer поддерживает навигацию по всем SVG-файлам в текущей папке и позволяет просматривать изображения в полноэкранном режиме.
SVG Viewer можно установить как программу по умолчанию для просмотра SVG-файлов на вашем устройстве. С этим инструментом нет необходимости открывать каждое SVG-изображение в браузере.
Программа бесплатная и не имеет дополнительных платных опций. Она поддерживает только один язык – английский.
Сайтодел | #инструмент #svg
🌐 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
👨💻 [УРОК 70] HTML Hint - расширение VS Code для проверки HTML-кода
В этом уроке вы узнаете, как работать с HTML Hint - расширением для VS Code, которое проверяет ошибки в коде. Вы прочтете о его особенностях и установке. Статья рассказывает о преимуществах HTML Hint в работе веб-разработчика.
📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья
⌨ Цикл 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
⌨ Как добавить шрифт в HTML-код через Google Fonts?
Для создания любого сайта нужны шрифты. В этом посте я расскажу, как загрузить шрифт в код, используя Google Fonts.
Нужно зайти на сайт Google Fonts, выбрать нужный шрифт и кликнуть на надпись Select this style.
В правой части экрана появится меню со свойствами шрифта. Нажмите на Embed, чтобы получить код.
Google предложит вам HTML-ссылку с тегом <link> или же CSS-формат с тегом <style>.
Сайтодел | #код #CSS
👨💻 [УРОК 69] GitHub Pages - сервис для хранения статических HTML-страниц
В этой статье вы узнаете, что такое GitHub Pages и научитесь работать с этим сервисом через систему контроля версий Git, а точнее – через сайт GitHub. Вы сможете разместить статическую веб-страницу в интернете, а также узнаете о преимуществах и недостатках GitHub Pages.
📘 ИЗУЧИТЬ УРОК 📚 ВСЕ УРОКИ | #статья
⌨️ Диалоговые окна в JavaScript: методы alert, prompt, confirm
В языке JavaScript предусмотрены следующие типы всплывающих окон:Alert – вызывает диалоговое окно с текстом (строковые данные) и имеет кнопку ОК.Prompt - вызывает диалоговое окно, которое содержит поле ввода. Можно вводить строки и значения. var name = prompt(" Ты подписан на t.me/sitodel?"); - вызывает диалоговое окно с текстом (строковые данные) и двумя кнопками:
alert ("Добро пожаловать на эту страницу," + name + "!");
ConfirmCancel и OK.confirm ("Вы действительно хотите покинуть эту страницу?");Сайтодел | #код #javascript
🌐 Grunt – инструмент для автоматизации JavaScript
Этот инструмент используется для автоматизации создания проектов на JavaScript. Он работает в виде командной строки, которая управляет содержимым файла Gruntfile.
Grunt создает единый набор команд для множества мелких задач. Эти команды можно использовать для разных проектов на JavaScript.
Grunt создан на базе Node.js. Его можно загрузить в виде пакета через менеджер пакетов Node (npm). Распространяется этот инструмент под лицензией MIT.
Сайтодел | #инструмент #javascript
🌐 UiGradients – удобный сервис для работы с градиентами
Этот сервис содержит огромную коллекцию настраиваемых градиентов. UiGradients предлагает на выбор эстетичные переходы цветов, для выбора достаточно просто перелистывать градиенты.
Цвета подобраны грамотно, поэтому использование UiGradients значительно упростит вам работу.
Для фронтенд-разработчика сервис удобен тем, что у каждого градиента есть свой css-код, который можно скопировать в верхнем меню экрана.
Сайтодел | #инструмент #javascript #css