JS Слайдер

Слайдер реализован на нативном JS.

Количество показываемых слайдов можно изменить в переменной slidesToShow.
Количество пролистываемых слайдов изменяется в переменной slidesToScroll.

Пролистывание осуществляется с помощью двух кнопок, которые деактивируются, при подходе к границе слайдера.

CodeWars - минимальный свободный ID

Получаем массив чисел и находим минимальное неотрицательное число, которого нет в этом массиве.

CSS ::before и ::after

before и after - псевдоэлементы
С их помощью можно стилизовать элементы, не размещенные в HTML
before размещается до контента родительского элемента, а after после.

Для добавление контента внутрь псевдоэлементов нужно воспользоваться CSS-свойством content.

Добавить можно:
1. Строку content: "a string"
2. Картинку content: url(/path/to/image.jpg)
3. Ничего content: “”
При добавлении пустого значения можно задать псевдоэлементу ширину и высоту и стилизовать его как отдельный блок.

Before и after отлично подходят для стилизации маркеров списков, а также для добавления разного рода разделителей.

CSS Анимация

Анимация — это набор ключевых кадров, хранящихся в CSS:
@keyframes a1 {
0% {
width: 50px;
}
100% {
width: 150px;
}
}
В фигурных скобках содержится список кадров. Мы используем начальный кадр 0% и конечный 100%.

Способ подключения анимации к элементу:
element {
//имя
animation-name: a1;
// длительность
animation-duration: 2s;
// задержка перед началом
animation-delay: 5s;
// число повторов
animation-iteration-count: 3;
//скорость воспроизведения
animation-timing-function: steps(7, end);
}

К одному элементу можно применить несколько анимаций:
element {
animation-name: a1, a2;
animation-duration: 2s, 4s;
}

Аналоговые часы на JavaScript

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

JS call, apply, bind

В 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

Drag and drop JSON

Автор реализует drag and drop c помощью соответствующих eventListener'ов и преобразования информации об элементе в JSON.

W3 Validator

Validator представляет собой бесплатный сервис от W3C, который помогает проверить корректность веб-документов.

Валидный код необязателен, но количество ошибок должно быть минимальным.

Причины для использования:

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

2. Поисковые роботы “разговаривают” с вашим сайтом на языке HTML, поэтому важно предоставлять контент на сайте четко и ясно со всеми “закрытыми тегами” и прочим.

3. Валидность HTML влияет на SEO, но незначительно (если, конечно, у вас не сотни, а то и тысячи ошибок).

Emmet

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>

Реализация анимации на css

Автор создает css анимацию с помощью @keyframes и использует несколько строк JS кода для активации по кнопке.

Bus Timer

Дано расписание автобусов:
Первый отправляется в 6:00, и далее с интервалом в 15 минут
Последний отправляется в 0:00

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

Входные данные - текущее время в формате HH:MM
Результат - количество минут

CSS overflow

Свойство overflow управляет поведением содержимого блочного элемента, если его размер превышает допустимый.

Возможные значения:
visible - переполняющее содержимое отображается за границами блока.
hidden - переполняющее содержимое не отображается.
auto - при переполнении отображается полоса прокрутки.
scroll - полоса прокрутки отображается всегда.

Можно указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y:

 {
  overflow-x: auto;
  overflow-y: hidden;
}

Text Scramble Effect

Эффект перемешивания текста на JavaScript.

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