👨‍💻 [УРОК 80] CSS Peek – расширение для работы со стилями

В этом уроке вы узнаете о том, что такое CSS Peek, какие у него преимущества, как установить это расширение и как им пользоваться.

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

🌐 Apache Conf – расширение VSCode, которое поддерживает синтаксис Apache

Расширение создано для работы с синтаксисом Apache. Оно поддерживает такие расширения файлов, как .conf, .htaccess, .htgroups, .htpasswd.

Apache Conf позволит VS Code понять, что это файл Apache, и автоматически правильно выбрать язык. Определите Apache conf в качестве языка: в правом нижнем углу нажмите кнопку «Выбрать языковой режим».

Чтобы установить расширение в Visual Studio Code, откройте панель команд с помощью клавиш Ctrl+Shift+P или введите в командную строку ext install apache.

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

⌨️ Шаблонные литералы в JavaScript

В современном стандарте JavaScript вместо конкатенации, то есть «склеивания» строк, можно использовать шаблонные литералы.

Вот так писали раньше:

var name = prompt("Введите свое имя");
var age = prompt("Введите свой возраст");
console.log("Меня зовут " + name + ", мне " + age + " лет");

А сейчас стало проще:

var name = prompt("Введите свое имя");
var age = prompt("Введите свой возраст");
console.log(`Меня зовут ${name}, мне ${age} лет`);

В последнем варианте используются обратные кавычки.

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

🌐 Editor.js – библиотека для работы с текстовыми данными

Библиотека хорошо подходит для использования в проектах, которые написаны на чистом JavaScript или же на фреймворках наподобие React. C помощью Editor.js можно форматировать текст, делать строки полужирными или курсивными, оформлять заголовки и многое другое.

Рабочее пространство Editor.js состоит из отдельных блоков: абзацев, заголовков, изображений, списков, цитат и т.д. Каждый из них представляет собой независимый редактируемый элемент (или более сложную структуру), предоставляемый плагином.

Существуют десятки готовых к использованию блоков и простой API для создания любого необходимого вам блока. Например, вы можете реализовать блоки для твитов, постов в Instagram, опросов, CTA-кнопок и даже игр.

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

⌨ Всплытие переменной в JavaScript

Когда мы используем в коде переменную var, может возникнуть ситуация, которую называют всплытием переменной (hoisting).

Если мы создадим переменную и присвоим ей значение, а потом выведем в консоль, все будет так, как мы и ожидали:

var name = "Сайтодел";
console.log(name); // Сайтодел

Если сначала вывести переменную в консоль, а затем объявить ее, то мы увидим undefined:

console.log(name);
var name = "Сайтодел"; // undefined

Переменная name «всплывает» наверх, и получается выражение, равносильное этому:

var name;
console.log(name);
var name = "Сайтодел";

Так как в первой строке переменная еще не определена, то консоль показывает undefined.

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

🌐 JsHint – расширение VSCode для с кодом JavaScript

Введение: JsHint - это инструмент, который обнаруживает ошибки и потенциальные проблемы в коде JavaScript. Поскольку JsHint очень гибкий, вы можете легко настроить его в среде, где вы собираетесь писать код.

Для того, чтобы установить JsHint в Visual Studio Code, зайдите в раздел расширений и выберите там JsHint. Расширение ищет модуль JsHint в текущей директории и глобально. Вы можете установить расширение локально с помощью npm install jshint или глобально с помощью npm install -g jshint

Чтобы отключить JsHint для рабочей области, укажите "jshint.enable": false в настройках рабочей области. Расширение включено по умолчанию.

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

👨‍💻 [УРОК 81] Empire of Code – игра для изучения JavaScript

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

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

⌨ Как создавать списки в HTML?

В HTML списки бывают упорядоченные и неупорядоченные.

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

Это могут быть инструкции и рецепты. Упорядоченные списки создаются через тег <ol> (ordered list – «упорядоченный список»). Пример:

<ol>
<li>Включите компьютер.</li>
<li>Откройте Telegram.</li>
<li>Найдите канал «Сайтодел».</li>
<li>Подпишитесь на него.</li>
<li>Прочитайте посты и уроки.</li>
</ol>

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

Это могут быть списки дел или важные пункты из текста. Неупорядоченные списки создаются через тег <ul> (unordered list – «неупорядоченный список»). Пример:

<ul>
<li>одежда</li>
<li>книги</li>
<li>ручки</li>
<li>ноутбук</li>
<li>сумка</li>
</ul>

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

🌐 Node Essentials – расширение VSCode для легкой node-разработки

Это набор расширений, которые помогут вам в разработке приложений на node.js в общей среде. Node Essentials добавляет подсветку синтаксиса, команды, подсказки при наведении курсора и работает с файлами Dockerfile.

Node Essentials включает в себя ESLint, что помогает выполнить автоматическое заполнение имен файлов в вашем коде, а также инструмент работы с git – GitLens.

Расширение распознает синтаксис файлов dotenv, а также поддерживает EditorConfig для VS Code. Другой его плюс – работа с языком YAML.

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

🌐 Babel JavaScript - расширение VSCode для работы с разными стандартами JavaScript

Развитие JavaScript за последние несколько лет, а также появление фреймворков и библиотек вроде React, Flow, GraphQL привело к тому, что теперь существует много новых типов "синтаксисов".

Babel JavaScript включает подсветку синтаксиса для нового синтаксиса JavaScript и этих конкретных "языков", позволяя вашему редактору JavaScript работать с самыми новыми версиями языка.

Теперь вам не нужно беспокоиться о том, будут ли разные части кода работать в браузерах или нет, ведь Babel JavaScript укажет на нюансы использования тех или иных версий языка в проекте.

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

⌨ Как использовать классы в CSS?

HTML-теги и CSS связаны между собой. Один из способов установить взаимосвязь между тегом и свойствами CSS-стилей – это использование классов.

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

Сначала необходимо задать классы тегам в HTML-документе:

<div class="sitodel"> Блок 1 </div>
<div class="sitodel"> Блок 2 </div>
<div class="sitodel"> Блок 3 </div>

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

Второй этап – перенести классы в CSS-код:

.sitodel{
height:150px;
width:300px;
text-align: center;
font-size:16px;
margin-right:15px;
}

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

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

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