JS call, apply, bind
В JavaScript функции имеют свои методы такие как apply(), call() и bind().
Их суть - заставить функцию использовать контекст объекта.
super junior developer earns 1200 dollars
Методы apply и call отличаются тем, что метод apply принимает аргументы в виде массива, а не списка.
Сначала передаем контекст выполнения:
В JavaScript функции имеют свои методы такие как apply(), call() и bind().
Их суть - заставить функцию использовать контекст объекта.
function promote(position, salary) {
this.salary = salary
this.position = position
return this.position + ' earns ' + this.salary + ' dollars'
}
Метод call() позволяет нам легко выставлять какой именно объект будет this в момент вызова функции. const junior = {
name: 'Fritz',
position: 'junior developer',
salary: 1000
}
const res = promote.call(junior, 'super junior developer', 1200)
Результатом будет:super junior developer earns 1200 dollars
Методы apply и call отличаются тем, что метод apply принимает аргументы в виде массива, а не списка.
const res = promote.apply(junior, [ 'super junior developer', 1200 ])Метод bind позволяет выполнить отложенный вызов функции.
Сначала передаем контекст выполнения:
const bounded = promote.bind(junior)Потом вызываем:
const res = bounded('super junior developer', 1200)Всё просто:
1) Более 3000 книг для программистов
2) Бот для поиска книг по каналу
3) Бот для поиска книг по Library Genesis
⬇ Тык
@bzd_channel
1) Более 3000 книг для программистов
2) Бот для поиска книг по каналу
3) Бот для поиска книг по Library Genesis
⬇ Тык
@bzd_channel
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;