W3 Validator
Validator представляет собой бесплатный сервис от W3C, который помогает проверить корректность веб-документов.
Валидный код необязателен, но количество ошибок должно быть минимальным.
Причины для использования:
1. Валидность кода нужна в прежде всего для того, чтобы ваш сайт отображался правильно во всех браузерах.
2. Поисковые роботы “разговаривают” с вашим сайтом на языке HTML, поэтому важно предоставлять контент на сайте четко и ясно со всеми “закрытыми тегами” и прочим.
3. Валидность HTML влияет на SEO, но незначительно (если, конечно, у вас не сотни, а то и тысячи ошибок).
Validator представляет собой бесплатный сервис от W3C, который помогает проверить корректность веб-документов.
Валидный код необязателен, но количество ошибок должно быть минимальным.
Причины для использования:
1. Валидность кода нужна в прежде всего для того, чтобы ваш сайт отображался правильно во всех браузерах.
2. Поисковые роботы “разговаривают” с вашим сайтом на языке HTML, поэтому важно предоставлять контент на сайте четко и ясно со всеми “закрытыми тегами” и прочим.
3. Валидность HTML влияет на SEO, но незначительно (если, конечно, у вас не сотни, а то и тысячи ошибок).
Emmet
Emmet - это набор плагинов для различных текстовых редакторов, используемых для скоростного написания HTML и CSS кода.
Для написания HTML в Emmet используются 12 типов селекторов:
Emmet - это набор плагинов для различных текстовых редакторов, используемых для скоростного написания HTML и CSS кода.
Для написания HTML в Emmet используются 12 типов селекторов:
# — создает атрибут id
. — создает атрибут class
[] — создает любые другие атрибуты
> — делает переход на один уровень ниже
+ — создает соседние элементы на том же уровне
^ — делает переход на уровень вверх
* — умножает элементы
$ — заменяется числом, каждый раз увеличивающимся на единицу
$$ — то же самое, только двухзначное
{} — добавляет текстовое содержимое элементам
() — группирует элементы
: — задает атррибуты для <input>, <a>, <link>
Emmet также предоставляет возможность создавать разметку с использованием различных шаблонов HTML, наиболее интересный из них — html:5, который даст результат:<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<noscript>Document</noscript>
</head>
<body>
</body>
</html>This media is not supported in your browser
VIEW IN TELEGRAM
Реализация анимации на css
Автор создает css анимацию с помощью
Автор создает css анимацию с помощью
@keyframes и использует несколько строк JS кода для активации по кнопке.Bus Timer
Дано расписание автобусов:
Первый отправляется в 6:00, и далее с интервалом в 15 минут
Последний отправляется в 0:00
Необходимо найти время до выхода из дома, чтобы попасть на следующий автобус, при учете того, что дорога пешком до автобуса займет 5 минут.
Входные данные - текущее время в формате HH:MM
Результат - количество минут
Дано расписание автобусов:
Первый отправляется в 6:00, и далее с интервалом в 15 минут
Последний отправляется в 0:00
Необходимо найти время до выхода из дома, чтобы попасть на следующий автобус, при учете того, что дорога пешком до автобуса займет 5 минут.
Входные данные - текущее время в формате HH:MM
Результат - количество минут
CSS overflow
Свойство overflow управляет поведением содержимого блочного элемента, если его размер превышает допустимый.
Возможные значения:
visible - переполняющее содержимое отображается за границами блока.
hidden - переполняющее содержимое не отображается.
auto - при переполнении отображается полоса прокрутки.
scroll - полоса прокрутки отображается всегда.
Можно указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y:
Свойство overflow управляет поведением содержимого блочного элемента, если его размер превышает допустимый.
Возможные значения:
visible - переполняющее содержимое отображается за границами блока.
hidden - переполняющее содержимое не отображается.
auto - при переполнении отображается полоса прокрутки.
scroll - полоса прокрутки отображается всегда.
Можно указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y:
{
overflow-x: auto;
overflow-y: hidden;
}This media is not supported in your browser
VIEW IN TELEGRAM
Text Scramble Effect
Эффект перемешивания текста на JavaScript.
Автор выводит на экран заранее записанные фразы, а между ними вставляет символы в случайном порядке, появление которых он анимирует.
Эффект перемешивания текста на JavaScript.
Автор выводит на экран заранее записанные фразы, а между ними вставляет символы в случайном порядке, появление которых он анимирует.
JS метод forEach
Этот метод используется для перебора массива
Он для каждого элемента массива вызывает функцию callback и ей он передаёт три аргумента:
1.
2.
3.
Пример:
Метод forEach ничего не возвращает, его используют только для перебора, как более «элегантный» вариант, чем обычный цикл for.
Этот метод используется для перебора массива
Он для каждого элемента массива вызывает функцию callback и ей он передаёт три аргумента:
1.
item – очередной элемент массива.2.
i – его номер.3.
arr – массив, который перебирается.Пример:
let arr = ["Яблоко", "Апельсин", "Груша"];
arr.forEach((item, i, arr) => {
alert( i + ": " + item + " (массив:" + arr + ")" );
});
Выведет по очереди номер каждого элемента, сами элементы и весь массив.Метод forEach ничего не возвращает, его используют только для перебора, как более «элегантный» вариант, чем обычный цикл for.
Задан шрифт:
font-family: Arial, Times New Roman, Helvetica, sans-serif;
В чем ошибка?
font-family: Arial, Times New Roman, Helvetica, sans-serif;
В чем ошибка?
Anonymous Quiz
13%
Вместо свойства font-family нужно использовать свойство font.
47%
нет кавычек у Times New Roman.
29%
Нельзя указывать больше 3-х различных шрифтов.
10%
Шрифта Helvetica не существует.
CSS box-sizing
box-sizing используется для изменения, применяемой по умолчанию CSS модели, с помощью которой вычисляются ширина и высота элементов.
Значения:
content-box (по умолчанию) - ширина и высота включают в себя только содержание элемента.
border-box - ширина и высота включают в себя содержание элемента, borders и padding.
padding-box - ширина и высота включают в себя содержание элемента и padding. Доступен только в Firefox!
Самый распространенный вариант использования:
box-sizing используется для изменения, применяемой по умолчанию CSS модели, с помощью которой вычисляются ширина и высота элементов.
Значения:
content-box (по умолчанию) - ширина и высота включают в себя только содержание элемента.
border-box - ширина и высота включают в себя содержание элемента, borders и padding.
padding-box - ширина и высота включают в себя содержание элемента и padding. Доступен только в Firefox!
Самый распространенный вариант использования:
*, *::before, *::after {
box-sizing: border-box;
}
Вы задаете ширину элементу, и вам не нужно производить вычисления при изменении границ, или внутренних отступов.This media is not supported in your browser
VIEW IN TELEGRAM
Canvas анимации на JS
В данной подборке автор собрал много интересных анимаций на canvas, в том числе с применением сторонних библиотек, таких как:
В данной подборке автор собрал много интересных анимаций на canvas, в том числе с применением сторонних библиотек, таких как:
particles.js, GSAP 3.0В браузере IE (например, 9-я версия) при фокусе (например, на кнопке) появляется пунктирная рамка вокруг элемента. Как от неё избавиться?
Anonymous Quiz
7%
border: 0;
69%
outline: none;
22%
border: none;
2%
display: none;
CSS background
CSS-свойства фона указывают, какой цвет и изображения использовать, а также их размер, расположение, способ укладки и т.д.
Свойства:
Свойство
CSS-свойства фона указывают, какой цвет и изображения использовать, а также их размер, расположение, способ укладки и т.д.
Свойства:
background-color устанавливает цвет фона элемента.background-image устанавливает фоновое изображение.background-repeat определяет, повторяется ли изображение по горизонтали или вертикали.background-attachment указывает, является ли фоновое изображение фиксированными относительно области просмотра или прокручивается вместе с элементом или его содержимым.background-position устанавливает начальное положение изображения.background-size устанавливает размер фоновых изображений.Свойство
background позволяет описать эти свойства в одном объявлении: background:
/* image */
url(sweettexture.jpg)
/* position / size */
top center / 200px 200px
/* repeat */
no-repeat
/* attachment */
fixed
/* color */
red;
Что выведется в консоль?
console.log([] == ![]);
console.log([] == ![]);
Anonymous Quiz
30%
true
47%
false
14%
undefined
8%
NaN
JavaScript классы
Класс представляет описание объекта, его состояния и поведения, а объект является конкретным воплощением или экземпляром класса.
Для определения класса используется ключевое слово class:
Пример работы наследования, а также полное описание классов можно посмотреть в статье.
Класс представляет описание объекта, его состояния и поведения, а объект является конкретным воплощением или экземпляром класса.
Для определения класса используется ключевое слово class:
class Person{
}
После этого мы можем создать объекты класса с помощью конструктора:let tom = new Person();
let bob = new Person();
Также класс может содержать свойства и методы:class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
display(){
console.log(this.name, this.age);
}
}
let tom = new Person("Tom", 34);
tom.display(); // Tom 34
console.log(tom.name); // Tom
Одни классы могут наследоваться от других. Наследование позволяет сократить объем кода в классах-наследниках.Пример работы наследования, а также полное описание классов можно посмотреть в статье.
Ты опытный фронтендер или только начинаешь въезжать?
Добро пожаловать на канал FrontEndDev, где мы собираем годные материалы, чтобы сделать из тебя гуру!
От фишек JS/TS до лучших практик архитектуры приложений.
Добро пожаловать на канал FrontEndDev, где мы собираем годные материалы, чтобы сделать из тебя гуру!
От фишек JS/TS до лучших практик архитектуры приложений.