🌐 Web Developer Checklist – расширение для проверки SEO

Это расширение помогает веб-разработчику узнать, соответствует ли сайт основным принципам SEO. C помощью Web Developer Checklist можно легко и быстро подготовить сайт к запуску.

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

Web Developer Checklist показывает не только параметры SEO, но и проверяет качество кода HTML и CSS, безопасность подключения и неработающие ссылки. Расширение проверяет совместимость HTML5 и CSS3.

Сайтодел | #расширение #разработка #seo

⌨ Стрелочные функции в Javascript

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

Структура стрелочной функции выглядит следующим образом:

(argument1, argument2, ... argumentN) => { // тело функции}

Это отличается от обычного представления функции, где сначала пишется слово function:

function showMessage() {
alert( 'Всем привет!' );
}

На картинке показаны функции, которые открывают и закрывают модальное окно.

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

🌐 D3.js – библиотека Javascript для визуализации данных

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

D3.js может создать геометрическую фигуру, добавить ей цвет. В отличие от других библиотек в этой не используется jQuery для управления структурой DOM.

Библиотека использует формат SVG для работы с векторной графикой. Он позволяет изменять форму объектов, позиционировать их и даже функционирует вместе с CSS.

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

⌨ Свойства margin и padding в CSS: отличия

Оба свойства используются для создания отступов. Margin и padding можно задать как для всех сторон сразу, так и по отдельности. Например, свойство margin для верхнего края будет записываться как margin-top, для нижнего края - margin-bottom, для левого и правого краев свойство выставляется как margin-left и margin-right.

То же самое правило действует и для padding. Отличие состоит в том, что margin определяет внешние отступы, а padding – внутренние.

Разберем пример. Eсть кнопка «отправить». Между текстом и границей кнопки есть внутренние отступы (padding). Снаружи, за пределами кнопки, тоже есть отступы (margin). Например, над кнопкой находится картинка. Margin-top определяет расстояние от кнопки до картинки.

Пусть внутренний отступ слева и справа будет равен 20px, сверху и снизу – 10рх. Внешний отступ по бокам равен 200рх, сверху – 100рх, снизу – 300рх. Код показан на картинке. Результат – мы создали кнопку с отступами margin и padding.

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

🌐 Flexbox Froggy – игра для изучения CSS Flexbox

Эта игра поможет закрепить изучение свойств flexbox на наглядных примерах. С помощью Flexbox Froggy вы научитесь позиционировать элементы на веб-странице. Задача – с помощью кода поместить лягушонка Фрогги на лилию.

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

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

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

👨‍💻 [УРОК 66] Backbone.js – фреймворк для разработки сложных веб-приложений

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

Вы прочтете о моделях и коллекциях backbone.js и посмотрите на примеры кода, где они создаются.

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

🌐 Fontanello – расширение Chrome для работы со шрифтами

Это расширение браузера позволяет узнать параметры шрифта на любой странице. Просто щелкните правой кнопкой мышки по тексту и выберите Fontanello в выпадающем меню. Расширение покажет название шрифта, жирность, размер, цвет и другие реже используемые CSS-свойства.

Fontanello полезен как для разработчиков, так и для дизайнеров. С помощью этого расширения дизайнер может добавлять себе в «копилку» интересные шрифты, на которые он случайно наткнулся в интернете.

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

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

🌐 Avocode – удобный инструмент для работы с макетом сайта

Avocode – альтернатива программам вроде Photoshop, Sketch, Zeplin, которые используют веб-дизайнеры для создания макетов. Этот инструмент очень удобен для разработчика, поскольку он поддерживает большинство форматов безо всяких плагинов. В Avocode также встроена частичная интеграция с Figma.

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

Программа существует в виде сайта и приложения для ПК и предусматривает пробный бесплатный период. Интерфейс у Avocode простой и интуитивно понятный.

Сайтодел | #инструмент #макет

⌨ JavaScript: преобразование строки в число

Превращать строчные данные в числовые бывает актуально, когда пользователь вводит числа во всплывающем окне. Простейший пример – создание калькулятора на JavaScript. Человек вводит одно число, затем – второе и получает сумму. Для этого мы пишем:

let a = prompt (“Введите число”);

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

let a = prompt (“Введите число”);
a = parseInt (a);

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

let a = +prompt (“Введите число”);

Мы просто добавили знак + перед prompt.

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

🌐 JavaScript Fight Club – тренажер для навыков кода

В этой игре вы потренируете навыки написания кода на JavaScript. По сюжету сражаются две армии – синяя и красная. Задача игрока – управлять персонажами и выполнять действия с помощью JavaScript.

Каждый день код будет извлекаться из вашего репозитория hero-starter на Github. Как только вы настроите свой репозиторий, подключите свою учетную запись Github к игре, чтобы ввести персонажа в следующую битву.

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

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

⌨ Как вставить картинку с помощью HTML и CSS?

Есть два способа разместить картинку на сайте. Можно использовать тег <img> в HTML-документе, а можно применить свойство background-image в CSS-файле. Нужно запомнить, что расширения файлов для первого и второго способа разные!

<img src="img/picture.png" alt="picture" class="picture">

У тега <img> есть обязательные атрибуты: src показывает путь к картинке, alt показывает альтернативный текст в случае, если картинка не загрузится. По желанию тегу <img> можно задать класс.

div {
background-image: url(img/picture.png);
}

CSS-свойство background-image находит путь к картинке с помощью указания url. Если картинка является важной частью контента, используется тег <img>. Если же она используется как фоновое изображение, применяют свойство background-image.

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

👨‍💻 [УРОК 67] SVG.js - библиотека для работы с SVG-графикой

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

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

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

🌐 CodeStream – расширение для комментирования кода

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

CodeStream дает возможность обмениваться комментариями с коллегами, задавать вопросы в процессе создания кода и быстро получать ответы. Расширение поддерживает IDE, поэтому решать проблемы можно не выходя из редактора кода.

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

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

⌨ Hover-эффект – изменение цвета

Сегодня мы рассмотрим, как сделать интересный hover-эффект, когда при наведении курсора объект становится зеленым.
Для начала создадим блок div с классом box, внутри которого будет текст. Зададим CSS-стили этому блоку:

.box {
background-color:white;
width: 100px;
height: 80px;
font-family: Roboto;
font-weight:700;
text-align:center;
}

Затем создадим собственно сам hover-эффект:

.box:hover {
background-color: #53ea93;
}

Готово! Теперь при наведении мышки на объект цвет его фона будет меняться на светло-зеленый оттенок.

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

🌐 Premonish - библиотека JavaScript для предсказывания действий пользователя

Эта библиотека чувствительна к движениям курсора. Она помогает понять, с какими элементами пользователь собирается взаимодействовать.

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

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

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

⌨ Простые типы данных в JavaScript

В языке JavaScript переменная может принимать значения разных типов.

К простым типам относятся:

◽ Строковый (String) – последовательность символов, стоящая в кавычках. Строковые символы могут быть не только буквами и прочими символами, но и цифрами, поэтому следует отличать их от числовых данных.

let a = prompt (“Введите число”);

Строковый тип можно превратить в числовой, поставив в начале плюс:

let a = +prompt (“Введите число”);

◽ Числовой (Number) – целые или дробные числа.

Console.log (12345);

◽ Логический, или булевый (Boolean) – принимают занчения true/false.

let test = true;
if (test === true) {
alert('верно');
} else {
alert('неверно');
}

◽ Пустой (Null) – не имеет значения.

◽ Неопределенный (Undefined) – значение не присвоено.

Узнать тип данных можно при помощи оператора typeof:

Print (typeof 123)
Print (typeof 't.me/sitodel')

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

🌐 UiGradients – удобный сервис для работы с градиентами

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

Цвета подобраны грамотно, поэтому использование UiGradients значительно упростит вам работу.

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

Сайтодел | #инструмент #javascript #css

👨‍💻 [УРОК 68] CSS Peeper - расширение Chrome для удобного просмотра CSS-кода

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

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

🌐 Grunt – инструмент для автоматизации JavaScript

Этот инструмент используется для автоматизации создания проектов на JavaScript. Он работает в виде командной строки, которая управляет содержимым файла Gruntfile.

Grunt создает единый набор команд для множества мелких задач. Эти команды можно использовать для разных проектов на JavaScript.

Grunt создан на базе Node.js. Его можно загрузить в виде пакета через менеджер пакетов Node (npm). Распространяется этот инструмент под лицензией MIT.

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