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

JS | Promise

Промис — это объект, который либо выполняется с некоторым значением, либо отклоняется с ошибкой. Промис может иметь одно из трех состояний: находится в режиме ожидания (pending), выполнен (fulfilled), отклонен (rejected).

Некоторые методы, которые ускорят разработку:
- race - возвращает Обещание (Promise) с результатом, первого завершенного из переданных обещаний. Т.е. возвратит resolve или reject, в зависимости от того, что случится первым

- any - Как только одно из "обещаний"(Promise) выполнится успешно(fullfill), метод возвратит единственный объект Promise со значением выполненного "обещания"

- allSettled - возвращает промис, который исполняется когда все полученные промисы завершены

Внизу подробная статья о Promise с примерами

PHP | PDO

Для взаимодействия с базами данных обычно необходимо ставить специальную библиотеку, созданную для конкректной базы данных. Это может вызывать некоторые трудности, если, например, на сервере несколько разных СУБД. Но с PDO всё гараздо проще.
PDO (PHP Data Objects) — расширение PHP, которое реализует взаимодействие с базами данных при помощи объектов. В PDO отсутствует привязка к конкретной системе управления базами данных. Оно поддерживает, как MySQL, так и PostgreSQL, SQLite, Oracle, Microsoft SQL Server и другие.
Ещё одним плюсом будет встроенная защита от SQL инъекций.

Пример

// Подключение к базе данных
$db = new PDO('mysql:host=localhost;dbname=pdo', 'root', 'password');
// Выполнение подготовленного запроса, такой запрос защищён от инъекции
$stmt = $pdo->prepare("SELECT `name` FROM categories WHERE `id` > ?");
$stmt->execute([$id]);
// Получение данных
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($data as $k => $v){
  echo 'Category name: '.$v['name'].';';
}

Как изучить React и построить международную карьеру?

🔥Максим Иванов, разработчик Minecraft и Battlefield, запускает авторский курс по React.

Курс стартует 1 ноября, но уже можно начать учиться бесплатно не выходя из Телеграма:
⭐️Как сделать клон Minecraft на React (делаем 3d-игру на компонентах)
⭐️Как делать формы любой сложности на React и react-hook-form
⭐️Как освоить реакт быстро, не тратя время на булщит? 💩
⭐️Как попасть в интересный проект? Самая короткая дорога от hello world до удаленки за баксы 🔥
⭐️Как справиться с застреванием в процессе обучения и в карьере
💥Инсайт: Как всех обогнать. Прокачиваем карьеру. Как в этом помогает блог и привычка описывать свои шаги.📝

Чтобы получить доступ материалам, переходи в наш Телеграм-бот. Он заботливо выдаст все видео.

HTML | DATA

data-* атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML

<article
  id="post1"
  data-columns="3"
  data-index-number="12314">
</article>

Доступ из CSS

article[data-columns='3']{
  width: 400px;
}

Доступ из JS
var article = document.getElementById('post1');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"

Node.js | EasyVK

EasyVK - npm пакет, предназначенный для работы с API ВКонтакте на стороне сервера.

Преимущества
- Обращения к методам API ВКонтакте
- Создание ботов с помощью LongPoll API
- HTTP клиент для просмотра историй
- Поддержка обещаний

CSS | Селекторы

Универсальный селектор - * {}
Селекторы типов - div {}
Селекторы классов - .classname {}
Селекторы идентификаторов - #idname {}
Селекторы потомков - span em {}
Селекторы дочерних элементов - div > em {}
Селекторы смежных элементов - i + b {}
Селекторы атрибутов - a[href='info.htm'] {}
Псевдоклассы - a:hover {}
Псевдоэлементы - p::first-letter {}