👨‍💻 [УРОК 82] Programming Hero - игра для обучения программированию

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

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

🌐 Webix UI Library – библиотека JavaScript для создания бизнес-приложений

Эта библиотека находится в числе самых функциональных и высокопроизводительных библиотек. Ее специализация – создание бизнес-приложений. Webix UI Library – многофункциональный инструмент, который буквально может делать всё!

Webix UI Library содержит более сотни UI виджетов, которые помогут вам создать любое приложение для бизнеса. Самые часто используемые виджеты SAP-приложений – это File Manager, Document Manager, User Manager, Chat-Messenger, Task Manager (Kanban), Pivot, Spreadsheet, SQL Query, Scheduler и Report Builder.

Библиотека отличается простотой и элегантностью. Она делает процесс прототипирования и разработки UI гораздо проще. Небольшой недостаток Webix UI Library – это недостаточная совместимость с устройствами, у которых небольшая диагональ экрана.

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

🌐 CSS Navigation – расширение VSCode для навигации по файлам

CSS Navigation поможет вам в работе с документами разных форматов. Это расширение позволяет запускать навигацию от HTML в CSS / Sass / Less, а также снабжает рабочими символами для названий классов и id и помогает найти ссылки из CSS в HTML-файл.

В документе HTML выберите «Перейти к определению» или «Просмотреть определение», расширение будет искать связанные селекторы CSS, Scss и Less в текущей папке рабочей области.

CSS Navigation будет очень удобен в работе над реальными проектами, особенно крупными, поскольку оно позволяет не запутаться в CSS-классах, препроцессорах и id тегов.

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

⌨ Как добавить ссылку в HTML?

Чтобы добавить ссылку в HTML документ, используйте тег <a> (anсhor) вместе с атрибутом href. В атрибуте href добавляется сам адрес, который ведет на внешний ресурс или внутреннюю страницу сайта. При клике на ссылку, пользователь переходит на указанную страницу. Пример:

<a href="t.me/sitodel"> Канал, где мы научим тебя создавать сайты</a>

Ссылки бывают относительными и абсолютными. В абсолютной ссылке указывается полный путь до HTML-файла. Такой формат подходит для внешних ресурсов. Пример абсолютной ссылки указан выше.

Относительные ссылки обычно используются внутри одного сайта:

<a href="page.html">HTML страница</a>

Ссылка-якорь применяется для навигации внутри одной страницы:

<footer id="footer">подвал</footer>
<a href="#footer">Контакты</a>

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

🌐 Import Cost – расширение VSCode для проверки пакетов

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

Расширение использует Webpack с подключаемым модулем Babel-Webpack для определения импортированного размера.

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

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

Крупнейшая технологическая конференция «YaTalks»

Пройдет она 3-4 декабря в онлайне под эгидой «IT как новый космос», а организовывается Яндексом.

Конференция будет включать в себя 6 основных треков: бэкенд, фронтенд, мобильная разработка, машинное обучение, лайфстайл и управление продуктом.

Для докладов и участия в дебатах приглашены более 80 экспертов из мировых и российских компаний.

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

Участие бесплатное, а регистрация по ссылке.

⌨ Булевы значения в JavaScript

В языке JavaScript есть логический тип данных, который принимает только значения true или false

Иногда в программировании нужны значения вроде да/нет, истина/ложь и так далее. Для этого и нужны булевы значения.

В примере ниже условие выполняется только если day == "Monday" имеет значение true, то есть истинно:

if (day == "Monday"){
console.log("Сегодня понедельник");
}

Функция Boolean() помогает определить, является ли выражение истинным:

Boolean(15 > 5) // true

Всё, что не имеет значение или равняется нулю, определяется как false:

var x = 0;
Boolean(x); // false

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

👨‍💻 [УРОК 83] Elevator Saga – игра для изучения JavaScript

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

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

🌐 Settings Sync – расширение VSCode для синхронизации

Settings Sync помогает синхронизировать все ваши настройки и расширения для VSCode через ваш GitHub аккаунт. Это очень удобно для разработчиков, которые работают над проектами через GitHub и хотят держать VSCode в порядке.

В число элементов, которые синхронизирует Setting Sync, входят файл настроек, файл запуска, папка со сниппетами, расширения и конфигурации расширений VSCode, папка рабочего пространства.

Если вы используете синхронизацию настроек в первый раз, GIST будет создан автоматически при загрузке ваших настроек.
Если у вас уже есть GitHub Gist, откроется новое окно, в котором вы сможете выбрать GitHub Gist или пропустить, чтобы создать новый Gist.

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

🌐 Algolia Places – библиотека JavaScript для автоматического заполнения форм

Эта библиотека даст вам быстрый и простой способ использования JavaScript для автозаполнения адресного поиска на вашем веб-сайте.

Algolia Places работает с адресами, она может добавить карту в поиск и отобразить местоположение пользователя. Библиотека очень быстрая и точная, поэтому используйте ее в своем проекте: с таким сайтом работать удобно и приятно.

Чтобы использовать Algolia Places, все, что вам нужно, это тег <input> и определенный код JavaScript, который будет загружать и использовать элементы JavaScript-библиотеки places.js.

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

🌐 Currency.js – библиотека JavaScript для работы с валютами

Эта легкая библиотека идеально подходит для операций с валютами. Она работает с плавающей точкой в JavaScript и создана для выполнения основных арифметических действий.

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

Currency.js позволит вам работать с валютами и не волноваться из-за точности дробей. Библиотека работает с различными вводными данными: числовые, строчные, десятичные и денежные единицы.

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

⌨ Блочные и строчные элементы в HTML

Есть два основных типа HTML-элементов, которые соответствуют характеру их содержимого и поведению на веб-странице — это блочные и строчные элементы.

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

Примеры блочных тегов:

<h1> Сайтодел – канал о создании сайтов </h1>
<div> Мы рассказываем о веб-технологиях и о фронтенд-разработке
</div>
<p> Подписывайся на наш канал и не пропусти самое главное! </p>

Примеры строчных тегов:

<a href ="t.me/sitodel"> Ссылка на канал </a>
<img src ="picture.img">
<b> Важное сообщение выделяется жирным </b>

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

🌐 Fastify.js – быстрый фреймворк Node.js

Это высокопроизводительный веб-фреймворк HTTP для Node.js. Fastify.js в значительной степени вдохновлен Express.js и Hapi.js, особенно в системах маршрутизации и промежуточного программного обеспечения.

Fastify.js является одним из самых быстрых фреймворков Node.js. Он очень дружественный по отношению к разработчику, а также полностью асинхронный и имеет возможности расширения за счет его хуков и плагинов.

Основные преимущества Fastify.js – это удобство обработки синхронных и асинхронных ошибок, полноценные контроллеры, валидация входных параметров, самодокументирование на основе определения роутов и готовых схем для валидации входных и выходных параметров.

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

👨‍💻 [УРОК 84] Code Spell Checker – расширение для редактирования кода

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

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

⌨ Выравнивание текста в CSS с помощью свойства text-align

За выравнивание текста в языке CSS отвечает свойство text-align, которое может принимать различные значения.

Текст можно выровнять по левой, правой стороне или по центру:

p {
text-align: left;
}
p {
text-align: right;
}
p {
text-align: center;
}

Значение justify растягивает текст на ширину страницы или блока, благодаря чему правый и левый края текста будут ровными:

p {
text-align: justify;
}

Значения start и end выравнивают текст относительно края, где текст начинается или заканчивается. Если текст идет справа налево, значение start выровняет его по правой стороне, а значение end – по левой стороне:

p {
text-align: start;
}
p {
text-align: end;
}

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

🌐 Color Info – расширение VSCode, которое дает информацию о цветах

Это не очень большой плагин для Visual Studio Code, который дает краткую справку о цветах в CSS. Просто наведите курсор на название нужного вам цвета и получите всю необходимую информацию о нем. Цвета транслируются в разные форматы: hex, rgb, hsl и cmyk.

Вы можете определить, какие из этих полей в каком порядке будут отражаться, используя настройки плагина. По умолчанию расширение работает с любым документом CSS, SASS, SCSS и LESS и распознает все основные цветовые форматы CSS, включая именованные цвета.

Вы также можете включить Color Info в дополнительных типах файлов, используя настройку colorInfo.languages. Эта настройка определяет, для каких файлов и языков включена информация о цвете и какие типы цветов поддерживаются.

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

🌐 Draggable – библиотека JavaScript для работы с перетаскиваниями

Это модульная библиотека, которая работает с возможностью захватить мышью элемент и перенести его (англ. drag and drop). Она позволит вам начать с малого и наращивать по мере работы необходимые функции. В своем самом базовом виде Draggable обеспечивает большой функционал перетаскивания, быстрое изменение порядка DOM, доступную разметку и набор событий, за которые можно ухватиться.

Перетаскивайте один элемент поверх другого и наблюдайте, как они меняются местами в DOM. Сортируйте узлы DOM по стилю. Перемещайте элементы коллекции из одного места в другое и наблюдайте, как все встает на свои места. Отличительная особенность этой библиотеки - быстрая и отзывчивая сортировка.

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

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

🌐 Lass – библиотека JavaScript для поддержки пакетов заготовок кода в Node.js

Эта библиотека позволит вам пользоваться большим количеством функций для работы с Node.js. Так, например, вы сможете тестировать юниты при помощи ava и формировать код с prettier. Lass автоматически инициализирует git и устанавливает разметку форматирования.

Lass также включает в себя проверку ошибок в коде через remark и автоматически добавляет раздел с участниками для тех, кто вносит правки. Библиотека автоматически регулирует зазоры между заголовками, легко настраивается и запоминает ваши значения по умолчанию с помощью sao.

Для того чтобы установить Lass, введите run npm install -g lass. Библиотека будет работать, если у вас установлена версия Node.js v10+.

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