HTML: создаем звуки

Разберем работу со звуковыми файлами в HTML. Для этого есть семантический тег HTML5 - audio. Он заменяет устаревший flash простым, встроенным в HTML механизмом.

Тег предоставляет удобное API для работы через JS. Вот некоторые методы:

.play() - запуск проигрывания файла;
.pause() - понятно, зачем.

У тега есть и масса атрибутов, включая булевы, которые, естественно, можно цеплять в JS. Например, currentTime - текущее время воспроизведения. Его можно, например, обнулять при клике, чтобы каждый раз не дожидаться конца проигрывания.

#HTML5

Git: полезные мелочи

- git status -s выводит статус версий в сокращенном виде.

- git rm <file> ожидаемо удаляет файл из индексации и в целом из проекта. Если удалить файл другим способом, он останется в системе со статусом "changed, bit not updated". Команда принимает также регулярные выражения и паттерны путей.

- git rm -f <file> удаляет файл принудительно, даже после индексации.

- git rm --cached <file> позволит отключить отслеживание файла, сохранив его в папке проекта. Палочка-выручалочка, если что-то не внес в .gitignore.

- git mv <oldname> <newname> переименовывает файл, фактически удаляя и восстанавливая. Это поведение уже нам знакомо по unix-системам.

- git log --pretty с параметром fromat задает шаблон вывода лога. Новый формат задается строкой с параметрами вывода:
$ git log --pretty=format:"%h - %an, %ar : %s"
На JS эквивалент:
`${cuttedHash} - ${nameOfCommitter}`;

- git log (параметры pretty) —graph выводит историю ветвлений в виде графа - графической схемы. Наглядно и полезно для больших проектов.

#git #bash

Git: ограничения команды log

Команда log умеет не только форматировать вывод, но и ограничивать его условиями. В таблице - примеры работы с ограничениями по автору, дате, совпадению кода и так далее.

#git #bash

Хуки Реакта: что, зачем и как

Что:
Хуки - это новое АПИ для модных функциональных пацанов (с), которое позволяет отказаться от компонентов-классов. Преимуществом классов была возможность использовать локальное состояние, но с хуками добавлять state можно и в функциональны компоненты. Не путать с хуками жизненного цикла!

Зачем:
1. Переиспользуемость. В классических компонентах для разделения состояния использовали, например, компоненты-обертки. С хуками все проще: пишем логику функциями в отдельном файле, импортируем, вызываем. Всё.
2. Простота. Официальный туториал утверждает: для Реакт-разработчков сложно усвоить правила работы this в JS. Мои соболезнования компаниям, где работают такие девелоперы. Тем не менее, возня с привязкой this сократилась с упрощенной до отсутствующей.

Как:
Все просто. Создаем через деструктуризацию пользовательнкую переменную и метод обновления:

const [age, setAge] = useState(42);

...И применяем, как ранее в классах. О тонкостях, типа useEffect, позже.

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

#React #хуки

Хуки Реакта-2: useEffect

Герой заголовка - useEffect - так называемый хук эффекта. Под эффектом понимают действия, которые в компонентах-классах выполняются в методах жизненного цикла.

Собственно эффект - это функция, которую и цепляет на себя хук.

Хук эффекта объединяет возможности методов жизненного цикла: componentDidMount, componentDidUpdate, componentWillUnount. Это поможет объединить похожую логику, разбитую в классах по методам жизненного цикла.

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

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

Однако такое поведение может замедлить приложение. Чтобы отключить его, нужно передать хуку вторым аргументом массив со значением, которое может измениться при обновлении:

useEffect(() => {
document.title = `Вы нажали ${count} раз`;
}, [count]);

В этом случае эффект будет вызван, только если значение count изменится.

useEffect можно использовать многократно в одном компоненте. Это позволит, например, разбить эффекты на те, что должны выполняться всегда, и те, что выполняются только при изменении значения.

#React #хуки

Проект Houdini: типизация кастомных переменных

CSS-препроцессоры упрощают жизнь разработчика, в числе прочего, удобными переменными. Не так давно эта фича вошла в стандарт:

root: {
--my-color: #fff;
}
(нативная CSS-переменная в глобальной области видимости)

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

Проект Houdini - новое API, предоставляющее доступ ко всем стадиям обработки браузером кода - предлагает решение. Из JS мы сможем регистрировать типы переменных:

CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
initialValue: "black"
});

Теперь переменная --my-color принимает только значения цветов. Считывая тип, движок может выполнять больше действий с переменной - включая анимации.

В миру эта часть проекта Houdini называется CSS Properties and Values API. К сожалению, проект страдает от избыточной сложности и слабой поддержки браузерами. В будущем он поможет строить архитектуру веб-приложений гибче и оптимизированнее, ну а пока - просто достоин внимания.

#CSS #Houdini

Тонкости let и const

- Хотя константе нельзя присвоить новое значение, само это значение менять можно:

const x = [2,4,5];
x[0] = 6; // массив в константе x изменится на [6, 4 ,5]

- Дважды объявить через let переменную с одинаковым именем в одной области видимости нельзя, а в разных - можно:

let x = 10;
const z = () => {
let x = 20;
console.log(x)
}
z() // выведет 20

- Существует феномен Temporal Dead Zone - "временная мёртвая зона", появляющаяся, когда поток входит в лексическую область видимости, содержащую переменную, но еще не доходит до неё. Попытка обратиться к переменной в мёртвой зоне вызовет ошибку - в отличие от var, которая поднимается в самое начало блока и выводит undefined, если обратиться к ней до привязки.

const x = () => {
console.log(typeof z);
let z = 10;
}
x() // выбросит ошибку

Любопытно, что обращение к let-переменной в более высокой области видимости до её инициализации с операцией typeof выведет undefined.

- При объявлении в глобальной области видимости var становится свойством глобального объекта window. Это небезопасное поведение изменили в ES6: let и const не связаны с глобальным объектом.

#JS

Английский язык: слова и грамматика

- to expand (гл.): расширять.
- warm-up (сущ.) - разминка.
- tense: время. Не путать с time: tense - концепция грамматики.
- expresses: выражает, высказывает.

Simple tenses имеют общий принцип: simple present говорит о чем-либо повторяющемся, постоянном, past и fututre - о конкретном, единственном случае.

Пример simple present:
"Pavel makes holywars about frameworks every day" - "каждый день Павел (обычно, постоянно, как правило) разжигает холивары про фреймворки".

А вот simple future:
"I'll make delicious jQuery pasta for you tomorrow, sweetheart" (завтра я приготовлю тебе аппетитную лапшичку на жиквреи, милая).

#english

Интернет-маркетинг: UTM-метки

UTM-метки - удобный инструмент аналитики трафика. Они прописываются в URI и состоят из пар ключ-значение:
utm_source=google

Ключей бывает всего пять:
utm_параметр. Значения могут быть произвольными и либо прописываются руками (в конструкторе URL), либо генерируются на стороне рекламной кампании.

Пример остроумного применения: в уличные билборды вшивали QR-код с UTM-метками, где каждый борд нес уникальную метку. На их основе составляли аналитику - и сокращали расходы на неэффективные стенды.

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

UTM-метки должны располагаться до "якоря" (#).

#аналитика #utm

Плагины Wordpress: лучшие практики

- Префиксы. Чтобы не было конфликтов имен, добавляем префикс - например, в виде названия плагина - везде, куда только можем.

- Проверяем наличие переменных, функций, классов и т.д. Используем if ( isset( $variable )) {}.

- Определяем переменные по возможности внутри функций.

- Правильно группируем файлы. В папке плагина в идеале должны быть два файла - plugin.php, uninstall.php. Остальное раскладывается по папкам languages, includes, admin->js,css,images (админка), public->js,css,images (фронт).

- Код, используемый в админке и во фронтенде, разделяем. Используем if ( is_admin() ) {}

SQL, манипуляция данными. Часть 1.

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

SQL - язык гибкого взаимодействия с этой фигурой.

Пример простых взаимодействий с БД - выборка данных (SELECT) и вставка (INSERT). К слову, капслок в операторах - не более чем условность для простоты разделения операторов и оперндов. Сам я её соблюдаю, но и в lowercase все работает.

Сейчас рассмотрим выборку.

#SQL

SQL, манипуляция данными. Часть 2.

Возьмем пример выборки:

SELECT login, post_count FROM wp_logs WHERE post_count NOT BETWEEN 5 AND 9;

- SELECT: оператор, указывающий, что операция будет по выборке (а не вставке и др.).

- login, post_count: названия столбцов таблицы, которыми будет ограничена выборка.

- WHERE: условный ограничитель по значениям в таблице. В примере ограничены значения для столбца post_count.

- NOT BETWEEN: комбинация операторов NOT и BETWEEN. Без отрицательной частицы BETWEEN выбирает данные внутри множества, с ней - вне неё:

1) BETWEEN 5 AND 10 = {5...10}
2) NOT BETWEEN 5 AND 10: {∞...5} и {10...∞}

- AND: просто "И". Аналог && в си-подобных языках.

#SQL

SQL, манипуляция данными. Часть 3.

Числовые операторы SQL:

- стандартные нумерические операторы. != и т.п.
- (NOT) BETWEEN ... AND ... .
- (NOT) IN (...). В скобках листинг значений для выборки, в том числе отрицательной.


Строковые операторы:

=: точное совпадение, аналог ===.

!= или <>: отрицательное точное совпадение.

(NOT) LIKE: нечувствительное к регистру совпадение.

%: аналог *. в регулярных выражениях. Иначе говоря - выборка неорганиченного множества символов до или после операнда. Используется только с LIKE.

_ (нижнее подчеркивание): аналог *, или указатель одного любого символа. Только с LIKE.

[]: диапазон символов или последовательность.

[^]: исключающий диапазон.

(NOT) IN: то же, что с числами, но для строк.

Строковые аргументы обязательно обязательно заключаются в двойные кавычки: "mozilla".

#SQL

SQL, манипуляция данными. Часть 4.

Сортировка выборки.

Для сортировки используют операторы: DISTINCT, GROUP BY, ORDER BY, LIMIT, OFFSET и некоторые другие. Рассмотрим их отдельно.

- DISTINCT:
полностью удаляет любые дубликаты. Используется после ключевого оператора SELECT.

- ORDER BY:
упорядочивает выборку по столбцу, принимая опциональные условия ASC/DESC (по-восходящему / по нисходящему). Пример: ORDER BY column DESC отсортирует строки от 4 к 1.

- LIMIT и OFFSET:
LIMIT задает лимит строк с совпадениями в выборке.
OFFSET устанавливает точку отсчета: например, OFFSET 5 значает "вывести совпадения, начиная с шестого". Почему с шестого? Пятый входит в ограничение.
Эта пара употребляется после всех прочих операторов.


#SQL

SQL, манипуляция данными. Часть 5: нормализация

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

Допустим, есть данные об авторах и их книгах. Если хранить все в одной таблице, очевидно, что имена авторов будут дублироваться относительно их книг:

ПЛиО 1 | Мартин
ПЛиО 2 | Мартин
Подробное руководство по JS | Флэнеган

Вместо этого можно составить две таблицы - авторов и книг по жанрам.

При нормализации строки в разбитых таблицах объединяют ключом - например, числовым ID.

Чтобы работать с данными из нескольких таблиц, их нужно объединять. Для этого используют оператор JOIN. Джойнинг используется не только так, поэтому уместно перед JOIN использовать оператор INNER.

Чтобы указать, по каким столбцам с ключами определять совпадения, используют оператор ON.

Пример объединяющего запроса:

SELECT *
FROM authors
INNER JOIN fantasy
ON authors.id = fantasy.book_id

#SQL

ООП, утренние заметки.

Вчера посмотрел перед сном лекцию, которая уложила в моей голове непонятки про ООП. Делюсь тем, что получилось.

ООП - это про сложную промышленную разработку. Тысячи классов, распределенные на сотни разработчиков... Другие парадигмы не так удобны для этой цели. Хотя мое сердце принадлежит ФП, я признаю роль объектного проектирования.

Базовые концепции:

- Инкапсуляция. Это скрытие устройства класса от посторонних. Разработчик в команде не должен знать все классы - это контрпродуктивная трата времени. Каждый пишет свой модуль - остальные предоставляют интерфейсы и публичные методы.

- Абстракция. Суть почти та же, что у чистоты функций в ФП. Абстрактный класс описывает общие для наследников переменные и методы, но не определяет их все.

- Интерфейс. То же, что абстрактный класс, за одним "но": никаких определений. Интерфейс только описывает методы, но не содержит функциональности.

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

- Наследование. Оно связывает классы в иерархии. Конкретные классы наследуют абстрактным, еще более определенные - им, и так далее. В JS пользуются кейвордом externds.

Проблема ООП - избыточность. Цепочка наследования тянет данные и методы, которые не используются. ФП свободно от таких проблем, но преимущества ООП не дают светлым силам функциональщины победить до конца. :)

#ООП

SQL, манипуляция данными. Часть 6: тонкости JOIN-инга

Есть два типа джойнинга: INNER (внутренний) и OUTER (внешний). Для каждого есть одноименные операторы.

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

INNER JOIN выводит строки, если имеется совпадение по ключу. Если нужно вывести содержимое независимо от совпадений, используют операторы:

LEFT JOIN
RIGHT JOIN
FULL JOIN

В чем разница?

LEFT и RIGHT указывают, какую таблицу выводить целиком. Просто держи в уме, какая таблицу отмечена оператором FROM, а какая помещена в JOIN, и указывай соответствующий префикс.

FULL JOIN выводит полностью обе таблицы.

А вот общий алгоритм джойнинга:

1. Выполняется INNER JOIN
2. Добавляются данные по оператору LEFT или RIGHT
3. Если используется FULL JOIN, то LEFT и RIGHT используются последовательно.

Пустующие поля заполняются NULL-лями. По ним, кстати, тоже можно делать выборку.

Спасибо @Yura0217 за фидбек о типах джойнинга. Расширил пост. :)

#SQL

Как учиться эффективно

Программирование требует разностороннего самообразования. Алгоритмы, математика, ЯП, актуальные технологии, английский язык, софт-скиллз... Все это чертовски нужно.

Где найти время?

Все просто: покупайте мой курс всего за...

Ха-ха, шучу :)

Моё решение - это комбинаторика.

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

Учишь алгоритмы - пиши их на разных ЯП. Создавай маленькие проекты и лей на Github.

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

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

#мотивация #обучение

SQL, часть 7.

NULL

По умолчанию ячейки с отсутствующими значениями заполняются NULL. По NULL можно делать выборку оператором IS (NOT) NULL.

Также можно установить иное дефолное значение пустой ячейки - например, число 0 или любую строку.

Выражения и алиасы

В SELECT можно указать не только имя столбца, но и встроенные в БД функции, и выражения вроде математических. Например:

SELECT col_name / 2 AS divided_col_name

Сразу после SELECT следует выражение. За ним можно увидеть новый оператор - AS - и новую строчку.

AS - это оператор присваивания алиаса. В свою очередь, алиас - сокращенное или, наоборот, более подробное название имени столбца или выражения.
Юзкейсы:
- сократить длинное неудобное название столбца;
- обозначить выражение коротким словом для построения дальнейшей логики.

#SQL

SQL, часть 8.

Тонкости.

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

- Агрегатные функции - это разновидность функций, встроенных в язык, вроде [].join(). Конкретно агрегатные функции - объединяют данные: aggregation значит «объединение».

- Как работают GROUP BY с агрегатными функциями? Представим таблицу заказов, где также есть колонка продавцов с уникальными ID.
Задача - посчитать сумму всех заказов для каждого продавца. Делаем запрос:

SELECT Seller_id, SUM(orders) AS «Summ per seller»
FROM order_table
GROUP BY Seller_id;

Как результат - таблица сумм всех заказов для каждого уникального продавца.

Спасибо @darkgenius за жесткие правки, дополнил пост 😉

#SQL