Frontender Libs - обзор библиотек JS / CSS

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

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

t.me/Paqmind – фуллстек разработка для продвинутых. Устали от пересказов документации и Hello-World туториалов? Возможно, наш канал вас приятно удивит. Регулярно постим авторский контент по: - программированию (нетривиальные темы) - методологиям разработки - топовым технологиям - трендам индустрии Учебные материалы, обзоры, аналитика. Присоединяйся к сообществу Paqmind и развивайся профессионально вместе с нами!

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);

Технология максимально проста и позволяет строить текстовые колонки без дополнительных оберток и костылей. 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 | 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);

Node.js | node-canvas node-canvas - npm пакет, который позволяет работать с изображениями. Преимущества - Максимально точно реализует Web Canvas API - Позволяет работать с PNG, JPEG и PDF - Позволяет писать текст - Поддерживает загрузку шрифтов

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 title]
<td rowspan="2" colspan="3" title=""></td>

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

Давно хотел поднять свой LVL во фронте? Тогда этот канал точно для тебя! Админы канала Frontender's Notes заливают в открытый доступ только самую важную инфу для программистов любого уровня: – Бесплатные материалы и лайфхаки для быстрого освоения JavaScript, HTML и CSS – Горящие вакансии Junior и Middle разработчиков с зп от 1000$ до 3000$ – Скидки до 50% на обучающие курсы от ведущих онлайн-школ Хочешь с каждым днём прокачивать свои навыки во фронтенде? Тогда добро пожаловать!

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"]

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.