CSS | REM

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

body {
  font-size: 14px;}
div {
  font-size: 1.2em;}

<div>
    16.8px
    <div>
      20.16px
      <div>
        24.192px
      </div>
    </div>
  </div>

Если вам нужно задать одинаковый размер подойдет rem. Буква "r" в rem означает root (корень); то есть размер шрифта задается относительно корневого элемента; в большинстве случаев это будет html элемент

html {
    font-size: 14px;}
div {
    font-size: 1.2rem;}

В каждом из трех вложенных элементов в прошлом примере, шрифт будет равен 16.8px.

JS | Filter()

Метод filter() - создает новый массив с элементами, которые подпадают под заданные критерии.

arr.filter(callback(element[, index, [array]])[, thisArg])

callback - функция, которая будет вызвана для каждого элемента массива (return true , false)
element - текущий обрабатываемый элемент в массиве.
index- индекс текущего обрабатываемого элемента в массиве.
array - массив, по которому осуществляется проход.
thisArg - значение, используемое в качестве this при вызове функции callback.

Пример, как получить массив первых буквы каждого слова в строке?

var sentence = "Senior Web Dev";
// Запишем каждый символ в массив
var arrSent = sentence.split("")
var subset = arrSent.filter((element, index, array) => {
  if (index == 0) {
    return true;
  } else if (array[index - 1] === " ") {
    return true;
  }
})
// ["S", "W", "D"]

SQL | Чем отличается WHERE от HAVING?

Кажется, что с помощью WHERE можно решить любую задачу. Однако, предположим, у нас есть таблица результатов экзаменов с именем экзамена, номером ученика и самой оценкой за экзамен. Как выбрать учеников и экзамен с минимальной оценкой 5?
В данной ситуации на помощь приходит как раз таки HAVING - дополнительное условие по уже имеющейся выборке.
Из документации имеем, что основное отличие WHERE от HAVING заключается в том, что WHERE сначала выбирает строки, а затем группирует их и вычисляет агрегатные функции (таким образом, она отбирает строки для вычисления агрегатов), тогда как HAVING отбирает строки групп после группировки и вычисления агрегатных функций.
Следовательно, задачу можно решить одним запросом SELECT StudentId FROM EXAM_RESULT GROUP BY StudentID HAVING MIN(Mark) = 5

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

HTML | EMMET

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

Несколько примеров:
- Комментарий после закрывающего тега с информацией о элементе

div.class|c
<div class="class"></div>
<!-- /.class -->

- Умножение

ul>li*3 
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul> 

- Атрибуты

td[rowspan=2 colspan=3 noscript]
<td rowspan="2" colspan="3" noscript=""></td>

Node.js | node-canvas

node-canvas - npm пакет, который позволяет работать с изображениями.

Преимущества
- Максимально точно реализует Web Canvas API
- Позволяет работать с PNG, JPEG и PDF
- Позволяет писать текст
- Поддерживает загрузку шрифтов

PHP | cURL

Для получения данных с какого-либо сайта можно воспользоваться функцией file_get_contents. Но что делать, если, например, потребовалось отправить POST запрос с заголовком авторизации?
В таких случаях на помощь приходит cURL, однако не всегда удобно пользоваться им, так сказать, в "сыром" виде. Куда удобнее будет воспользоваться PHP Curl Class - composer пакетом для упрощения выполнения запросов.

Пример

require __DIR__ . '/vendor/autoload.php';

use Curl\Curl;

$curl = new Curl();

$curl->post('https://www.example.com/login/', array(
  'username' => 'myusername',
  'password' => 'mypassword',
));
var_dump($curl->response);

Технология максимально проста и позволяет строить текстовые колонки без дополнительных оберток и костылей.

column-count - количество столбцов, на которые элемент должен быть разделен
column-fill - задает способ заполнения столбцов
column-gap - указывает зазор между столбцами
column-rule - сокращенное свойство для установки всех свойств столбца
column-rule-color - задает цвет правила между столбцами
column-rule-style - задает стиль правила между столбцами
column-rule-width - задает ширину правила между столбцами
column-span - указывает, сколько столбцов элемент должен охватывать поперек
column-width - задает рекомендуемую, оптимальную ширину столбцов
columns - сокращенное свойство для задания ширины столбца и счетчика столбцов

article {
columns: 2 200px;
column-gap: 20px;
column-rule: 1px dotted #000;
}

PHP | Генерация изображений с текстом

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

Пример реализации

include_once 'LImageHandler.php';
$fontPath = 'fonts/MintTypeRistrettoProRegular.ttf';
$imagePath = 'images/original.jpg';
$fontSize = 45; // Указываем размер шрифта 
$color = array(255, 255, 255); // Задаем цвет текста
$backgroundColor = array(0, 0, 0); // Задаем цвет подложки
$ih = new LImageHandler;
$imgObj = $ih->load($imagePath);
$imgObj->textWithBackground('Генерация изображений с текстом', $fontPath, $fontSize, $color, $backgroundColor, LImageHandler::CORNER_CENTER_TOP, 0, 150, 0, 50, 10);
$imgObj->textWithBackground('Виктор Зинченко', $fontPath, 30, $color, $backgroundColor, LImageHandler::CORNER_RIGHT_BOTTOM, 50, 50, 0, 30, 10);
$imgObj->show(false, 100);

CSS | Will-Change

CSS Will Change позволяет подготовить браузер перед изменением состояния элемента. Это позволяет добавить определенную оптимизацию к сайту.

Например, если элемент будет изменен при клике, то установка will-change при наведении курсора на этот элемент даёт браузеру достаточно времени, чтобы подготовиться к этому изменению.

.element {
   transition: transform 1s ease-out;
}
.element:hover {
    will-change: transform;
}
.element:active {
    transform: rotateY(180deg);
}