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

🌐 Ext JS – фреймворк для создания приложений

Ext JS – это наиболее полный набор инструментов для создания современных, кроссплатформенных веб-приложений и мобильных приложений на любом современном устройстве. В состав Ext JS входят более 140 предварительно интегрированных и протестированных составляющих пользовательского интерфейсa.

Компоненты включают в себя HTML5 календарь, меню, панели инструментов, списки, деревья, сетки и многое другое. С помощью Sencha Stencils вы сможете разрабатывать и создавать прототипы, а также тестировать концепции пользовательского интерфейса.

Ext JS содержит также инструмент для тестирования Sencha Test и менеджер по верстке, при помощи которого вы сможете управлять отображением контента в разных браузерах и на различных экранах.

Сайтодел | #фреймворк #javascript

🌐 JavaScript (ES6) code snippets – расширение VSCode с фрагментами кода JavaScript ES6

Расширение содержит в себе сниппеты кода JavaScript в новом синтаксисе ES6 для редактора Visual Studio Code. Оно поддерживает JavaScript (.js), TypeScript (.ts), JavaScript React (.jsx), TypeScript React (.tsx), Html (.html) и Vue (.vue).

Одно из преимуществ JavaScript (ES6) code snippets – это набор горячих клавиш для создания кода. Ознакомиться с ним можно на сайте, где представлено расширение. С помощью горячих клавиш вы сможете вставлять фрагменты кода очень быстро и легко!

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

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

🌐 SweetАlert – библиотека JavaScript со всплывающими окнами

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

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

Модальные окна имеют несколько типов: успех, ошибка, предупреждение, информация и вопрос. Для каждого типа предусмотрена своя иконка.

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

⌨ Логические операторы в JavaScript

В языке JavaScript есть 3 логических оператора: || (или), && (и) и ! (не).

Оператор || возвращает true, если хотя бы один из операндов равен true.

Оператор && возвращает true, только если оба операнда равны true. Если хотя бы один из них выдает false, то общее значение будет равно false.

Оператор ! представляет собой отрицание. Он возвращает противоположное значение.

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

🌐 FullPage.js – библиотека JavaScript для создания эффектов прокрутки

FullPage.js представляет собой плагин на jQuery, позволяющий создавать скроллинг секций на веб-страницах. Библиотека идеально подходит для работы с одностраничными сайтами.

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

В FullPage.js можно изменять настройки навигации между секциями и слайдами. Некоторые настройки уже работают по умолчанию, тогда как другие можно добавить самостоятельно.

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

⌨ Как сделать таблицу в HTML?

Таблица в языке HTML создается с помощью тега <table>

Для строки применяется тег <tr>, а ячейки делаются тегом <td>

Ячейки находятся внутри строки. Один тег <tr> содержит в себе несколько тегов <td>. Все теги парные, то есть требуют закрытия.

Давайте создадим таблицу с тремя строками и пятью столбцами. В ней будет три тега <tr>, в каждом из которых будет содержаться тег <td>

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

👨‍💻 [УРОК 76] Selenium - инструмент автоматизации действий на сайтах

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

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

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

Иногда бывает нужно сделать так, чтобы строка была разделена на несколько частей.

Ее отрезки помещаются в массив, который получается при преобразовании.

Допустим, у нас есть переменная с фамилией, именем и отчеством:

var a = “Иванова Елена Владимировна”;

Создаем массив:

var arr = a.split (“ ”);

Чтобы вызвать какой-либо элемент массива, обратимся к его индексу через квадратные скобки:

аlert (a.split(“ ”)[0]) // Иванова
аlert (a.split(“ ”)[1]) // Елена
аlert (a.split(“ ”)[2]) // Владимировна

Нумерация при этом начинается, как и положено в массиве – с нуля.

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

🌐 Rainbow Brackets – расширение VSCode, которое подсвечивает скобки

Иногда мы забываем поставить скобки в нужном месте, и весь код перестает работать! Расширение Rainbow Brackets помогает бороться с этой проблемой. С набором разноцветных подсветок сразу станет понятнее, какие скобки относятся к какой части кода.

Приложение подсвечивает парные скобки одинаковым ярким цветом, а одиночные – красным, чтобы вы точно не упустили их. Rainbow Brackets выделяет и квадратные, и фигурные скобки.

Расширение особенно популярно у программистов, которые работают с языком JavaScript. Найти Rainbow Brackets можно в разделе «Расширения» в VSCode.

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

🌐 MetaGo – расширение VSCode для быстрого перемещения курсора и выделения текста

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

В MetaGo есть свои собственные горячие клавиши, например Alt+a для изменения выбранного участка, Ctrl+o, Ctrl+l для работы с текстом, ctrl+alt+/ чтобы добавить новый курсор. Теперь вы можете выбрать более одного участка текста за один раз!

Навигация по закладкам происходит тоже при помощи горячих клавиш: Alt+' для переключения закладки в месте расположения курсора, Alt+ [ перейти к предыдущей закладке, Alt+] перейти к следующей закладке, Alt+\ для отображения списка закладок с меню управления.

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

👨‍💻 [УРОК 77] D3.js – библиотека JavaScript для визуализации данных

В этом уроке вы узнаете, как установить популярную JS-библиотеку D3.js, ознакомитесь с методами, которые позволяют делать выбор HTML-элементов, а также с другими методами, которые используются в работе с веб-документом.

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

Деструктуризация в JavaScript

Деструктуризация массива – это способ, который позволяет извлекать из него части.

В стандарте ES5 можно было извлекать элементы из массива следующим образом:

var mas = ["Канал", "Сайтодел"];
var firstName = mas[0];
var lastName = mas[1];

Деструктуризация выглядит иначе:

let [firstName, lastName] = mas;

alert(firstName); // Канал
alert(lastName); // Сайтодел

Таким образом, массив разбивается на составные части.

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

🌐 Knockout JS – библиотека JavaScript для работы с каркасом веб-приложений

Библиотека реализует паттерн MVVM (Model - View - ViewModel) и используется для создания функциональных пользовательских интерфейсов на JavaScript и HTML.

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

Knockout JS написан на чистом JavaScript, что позволяет ему работать с любой технологией уровня серверов и на разных клиентах. Для того, чтобы добавить библиотеку, нет необходимости вносить существенные изменения в уже существующий код веб-страниц.

Knockout JS весит всего 13 кБ после сжатия и поддерживает новые и старые браузеры, в том числе IE 6+, Firefox 2+, Chrome, Safari, Edge.

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

⌨ Конструкция Switch в JavaScript

Switch…case – это конструкция, с помощью которой можно проверить условие на совпадение с конкретными значениями.

Она похожа на конструкцию if…else, однако последняя чаще используется на соответствие диапазону, а не определенным ответам.

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

В конце каждого блока кода со словом case нужно ставить оператор break, чтобы выйти из цикла.

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

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

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

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

Размер библиотеки очень компактный – всего 2,2к! Вам не нужно указывать, какой это язык: код может быть смешанным и содержать в себе несколько языков.

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

🌐 Change Case – плагин для VSCode для работы с текстом

Этот плагин может преобразовывать текст в разные регистры. Помимо нижнего и верхнего регистра в нем предусмотрены и другие варианты: Camel Case или Pascal Case, разделение строк при помощи точек и слешей и так далее.

Change Case помогает в разных ситуациях, когда нужно быстро изменить регистр в редакторе. Он может также пригодиться для рефакторинга, иными словами чтобы привести имена переменных к одинаковому виду.

Для того, чтобы начать работать с плагином Change Case, выделите нужный вам текст и задайте необходимый регистр через Command Palette.

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