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

Представим ситуацию, в которой нам необходимо сократить массив и оставить некоторое количество значений. Это могут быть, например, первые 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. Материал легкий для запоминания и усложняется по мере того, как повышается уровень.

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

⌨ Как сгенерировать случайное число в 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

🌐 Code Runner – расширение для запуска кода

Это расширение поддерживает множество языков программирования. Оно может как запускать код, так и подсвечивать фрагменты синтаксиса.

Code Runner позволяет работать с отладчиком, что очень удобно для процесса разработки. Также в расширении есть консоль, куда выводятся результаты работы кода.

Отличительная черта Code Runner – это его простота и удобство. Расширение запускается быстро, экономит ресурсы вашего компьютера и даже может работать через консоль с языками программирования, которые не поддерживаются программой.

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

👨‍💻 [УРОК 73] HTML5Boilerplate – фронтенд-шаблон для создания веб-приложений

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

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

🌐 Bracket Pair Colorizer 2 – расширение VS Code, которое работает со скобками

Бывало ли у вас так, что маленькая ошибка в коде сводит на нет часы стараний? Если вы забыли закрыть парные скобки, то код не будет правильно работать, а на поиск ошибки уйдет очень много времени.

С этой проблемой справляется "Bracket Pair Colorizer 2". Расширение присваивает парным скобкам разные цвета, которые может выбрать сам пользователь. По сравнению с первой версией, вторая более быстрая и точная.

С "Bracket Pair Colorizer 2" код будет выглядеть более понятно и прозрачно.

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

⌨ Многомерные массивы в JavaScript

Мы привыкли, что элементами массива обычно являются числа или строки, но массив может состоять и из массивов! В этом случае речь идет о так называемых многомерных массивах.
В примере ниже вы можете видеть вложенность массивов:

let array = [['a', 'b', 'c'], ['d', 'e', 'f'], ['g', 'h', 'i']];

В зависимости от уровня вложенности можно выделить двухмерные - массив с массивами внутри, и трехмерные – массив, в котором есть массивы, которые тоже содержат массивы.

Гораздо удобнее записывать многомерные массивы в столбик:

let array = [
['a', 'b', 'c'],
['d', 'e', 'f'],
['g', 'h', 'i'],
];

Такое расположение данных бывает очень удобным при решении определенных задач.

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

🌐 Luna Paint – редактор для изображений в VS Code

Это расширение позволяет редактировать растровые изображения в редакторе VS Code. Для этого просто откройте изображение и редактируйте его как отдельный файл.

Luna Paint имеет большой спектр опций и инструментов, в том числе карандаш, заливка, пипетка, обрезка, геометрические фигуры, линии и палитра цветов.

Приложение может работать с несколькими слоями изображения, а также смешивать их. Расширение поддерживает форматы .bmp, .ico, .jpg, .png, и .webp.

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

⌨ Тернарный оператор

Иногда в коде вместо if…else можно использовать тернарный оператор. Такая форма записи более компактная и наглядная.

Пример: мы хотим проверить год на високосность. Введем:

let year =+prompt(“Введите год”);
alert (year % 4 == 0? “Високосный год”: “Невисокосный год”);

Если условие истинно, то выполняется действие после знака вопроса. Если же оно не истинно, выполняется то, что записано после двоеточия.

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

🌐 Elevator Saga – игра для изучения JavaScript

Эта игра – отличный вариант для изучающих язык JavaScript, своего рода «песочница» для получения необходимых навыков написания кода. В игре есть здание с лифтами, которые перевозят людей. Задача – перевезти пассажиров за указанное время.

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

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

Сайтодел | #игра #javascript

👨‍💻 [УРОК 74] Figma – инструмент для прототипирования сайтов и приложений

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

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

🌐 VSCode Simpler Icons with Angular – иконки для файлов

VSCode Simpler Icons – это коллекция иконок, которые облегчают работу с файлами различных расширений. На выбор представлены изображения, которые показывают папки, документы, а также логотипы приложений. Настроить иконки можно самостоятельно.

Благодаря VSCode Simpler Icons вы не перепутаете открытую папку с закрытой, а также файл с папкой. Разнообразие цветов и форм иконок делают работу более наглядной.

Для того, чтобы расширение заработало, зайдите в настройки (File → Preferences на Windows или Code → Preferences на OSX), выберите тему файловых иконок, затем нажмите VSCode Great Icons.

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

🌐 Relative Path – расширение, которое находит путь к файлу

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

Расширение произведет поиск по ярлыкам и найдет путь от вашего местоположения к указанному документу. Ему не нужны никакие данные, кроме имени файла.

Просто нажмите Ctrl+Shift+H (MAC: Cmd+Shift+H) и выберите файл. Если в вашей рабочей области более 1000 файлов, вам будет предложено сначала отфильтровать этот список. Кроме того, вы можете открыть панель команд с помощью кнопки F1 и выполнить поиск относительного пути.

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

⌨ Способы округления чисел в JavaScript

Язык JavaScript позволяет проводить математические операции с числами, в том числе и округление. Для этого в нем есть целых три метода: Math.floor, Math.ceil и Math.round.

Метод Math.floor округляет всегда в нижнюю сторону. Числа наподобие 5.87 мы привыкли округлять в большую сторону, однако Math.floor выдаст 5:

alert (Math.floor(5.87)); //5

Метод Math.ceil округляет числа в сторону большего числа. Это – противоположность методу Math.floor:

alert (Math.ceil(5.34)); //6

Метод Math.round округляет числа по тому правилу, которое мы учили в школе: если дробная часть больше или равна 5, округляется в большую сторону:

alert (Math.round(5.42)); //5

alert (Math.round(5.73)); //6

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

⌨ Многомерные массивы в JavaScript

Многомерный массив – это массив, который содержит в себе другие массивы. Таким образом, элементы одного массива сами являются массивами.

var array = [[2, 5, 7], [3, 1, 4], [6, 8, 9]];

Данные внутри массивов могут быть не только числами. Например, мы хотим сделать массив с русскими словами и их переводом на английский язык. Это можно сделать при помощи многомерного массива:

var word = [
[“солнце”, “sun”],
[“небо”, “sky”],
[“облако”, “cloud”],
[“слово”, “word”],
[“время”, “time”],
]

Такое распределение данных облегчит работу с ними и сделает процесс более наглядным, чем обычный массив.

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

🌐 Code Spell Checker – расширение для редактирования кода

Это расширение предназначено для проверки грамотности кода. Оно проверяет распространенные ошибки и уменьшает количество ложных срабатываний. Проверка орфографии позволяет легко обнаружить опечатки в вашем коде, который вы пишете в VSCode. Code Spell Checker использует волнистые линии для обозначения опечаток.

Расширение отлично работает с написанием составных слов в стиле CamelCase (верблюжий регистр). Code Spell Checker понимает ключевые слова на нескольких языках программирования, включая TypeScript, JavaScript и Python.

Для того, чтобы разобраться с ошибкой, наведите курсор над проблемным участком кода и кликните на него. Code Spell Checker покажет список возможных вариантов исправления ошибки.

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

⌨ Эффект перехода transition-timing-function

Функция transition-timing-function задает скорость перехода объекта из одного состояния в другое.

Трансформация может протекать равномерно, а может иметь и свой специальный график, по которому она замедляется и/или ускоряется в отдельные временные промежутки.

Существует 5 основных значений свойства transition-timing-function:

linear – равномерный переход;
ease – переход сначала медленный, а потом разгоняется и в конце замедляется;
ease-in – переход сначала медленный, а потом плавно ускоряется;
ease-out – переход сначала быстрый, а потом плавно замедляется;
ease-in-out – переход начинается и заканчивается медленно.

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

👨‍💻 [УРОК 75] HAML – HTML-препроцессор и шаблонизатор

В этом уроке вы узнаете, как установить препроцессор HAML и как начать им пользоваться. Вы прочтете об отличиях HAML от HTML и узнаете о его возможностях.

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

🌐 Git History – расширение VSCode для отображения истории коммитов

Это популярное расширение для Visual Studio Code, которое показывает подробную информацию о коммитах в Git, просматривая предыдущие копии файлов, изменения активной строки в редакторе и т.д.

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

Удобство состоит в том, что расширение работает из Visual Studio Code. На панели задач выберите Git: View History (git log), а затем нажмите Git History Window, чтобы начать работу.

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