HTML | fieldset

Элемент <fieldset>...</fieldset> предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.

Каждой группе элементов можно присвоить название с помощью элемента <legend>, который идет сразу за тегом <fieldset>.

<form>
<fieldset>
<legend>Контактная информация</legend>
<p>
<label for="name">Имя <em>*</em>
</label>
<input type="text" id="name">
</p>
<p>
<label for="email">E-mail</label>
<input type="email" id="email">
</p>
</fieldset>
<p><input type="submit" value="Отправить"></p>
</form>

PHP | Взаимодействие с FTP

С помощью PHP можно закачивать и скачивать файлы с FTP сервера.
Для начала необходимо подключиться к серверу и авторизоваться:

$conn = ftp_connect('localhost');
$auth_result = ftp_login($conn, 'username', 'password');

Теперь можно скачать с сервера файл с помощью ftp_get() и загрузить на сервер с помощью ftp_put():

ftp_get($conn, 'путь_к_локальному_файлу', 'путь_к_файла_на_сервере', FTP_BINARY);
ftp_put($conn, 'путь_к_файла_на_сервере', 'путь_к_локальному_файлу', FTP_BINARY);

Важно не забыть закрыть соединение:
ftp_close($conn);

CSS | Initial letter

Это свойство CSS, которое выбирает первую букву элемента и определяет количество строк, которые будет занимать эта буква.

.subhead::first-letter {
initial-letter: 2;
color: orange;
font-weight: bold;
margin-right: .75em;
}

React | Mapbox

Mapbox GL JS - отличная библиотека для создания современных веб-карт. Разработан на основе WebGL и полностью открытый исходный код. Бесплатно до тех пор, пока не будет превышен определенный уровень трафика;

SQL | BETWEEN

В условиях SQL существуют специальные операторы, например, IN и LIKE. BETWEEN - тоже в их числе.
Синтаксис:
expression BETWEEN start AND end

Оператор позволяет выбрать строки, в которых значение expression лежит в диапазоне включительно от start до end. Другими словами, это аналог использования операторов больше или равно и меньше или равно.

Оператор можно использовать не только с числовыми значениями, но и со строками, например, если требуется выбрать строки, столбец 'name' которых начинается с 'Б' и заканчивается на 'Д':
name BETWEEN 'Б' AND 'Е'
Стоит отметить, что нужно указать именно E, поскольку при сравнении строк неравной длины строка 'Д' дополнится пробелами, а следовательно, условный 'Данил' не попадёт в итоговую выборку.

Node.js | Создание атласа спрайтов

Атлас спрайтов - файл с несколькими изображениями. В случае Web разработки используются в связке с CSS для оптимизации сайта.
Можно собирать атласы в ручную, а можно воспользоваться пакетом spritesmith.

Пример

var fs = require('fs')
var Spritesmith = require('spritesmith')

var sprites = ['fork.png', 'github.png', 'twitter.png']
Spritesmith.run({ src: sprites }, (err, result) => {
  fs.writeFileSync('spritesheets.png', result.image)
  console.log('coordinates:', result.coordinates, '; properties:', result.properties)
})

HTML | Progress

Progress tag - Индикатор выполнения задачи любого рода.

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

С помощью JS можно сделать его динамичным как в примере ниже

Node.js | Цвета в консоли

Зачастую проекты на Node.js очень часто и много пишут в консоль.
Это, конечно, может быть и хорошо, но иногда становится очень трудно ориентироваться в консоли.

Правильным решением будет разделить вывод в консоль с помощью специальных методов объектов console, например, console.warn, console.error. Эти добавят красок.

Но можно пойти дальше.
С помощью пакета chalk. Поддерживает 16 миллионов цветов (с помощью Truecolor), жирный текст, подчеркивание и многое другое.

Пример

var chalk = require('chalk')
console.log(
  chalk.bgYellow('sWebDev'),
  chalk.bgCyan('is'),
  chalk.bgMagenta('beautifull')
)

CSS | currentColor

currentColor равен значению color текущего элемента, или его родителя, если у элемента не указан цвет. Таким образном можно быстро задать текущий цвет для всех свойств которые могут принимать цветовое значение: border, outline, background, box-shadow и т.д.

currentColor можно прописать как значение fill для noscript-иконки, и она всегда будет совпадать с цветом окружающего её текста.

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

HTML | Прилипающая шапка сайта

Прилипающая шапка - это наверное самый распространённый вариант реализации главного меню.

Особое внимание нужно уделить нескольким вещам:
- независимость от ширины экрана
- визуальное изменение при начале прокрутки
- z-index относительно остальной части сайта

Для регулирования разметки внутри меню удобно использовать css grid, не придётся жёстко задавать размеры каждому блоку отдельно, а управление сеткой делается одной строкой в свойстве grid-template-columns.

Изменение стилей при прокрутке делается через небольшой скрипт который отслеживает событие прокрутки страницы и добавляет/удаляет класс к блоку шапки, а в стилях этого класса уже можно реализовать все необходимые изменения.

Для перекрытия шапкой содержимого сайта ей можно поставить z-index: 10 и при необходимости увеличить.

Node.js | Как создать приложение Express

Express - гибкий веб-фреймворк для приложений Node.js.
Можно написать приложение вручную, а можно воспользоваться специальным генератором.

Создаём новый каталог, переходим в него, открываем терминал или powershell.
Установим генератор приложений:
npm install express-generator -g
Теперь сгенерируем приложение в текущей папке:
express --view=ejs

Тут стоит сделать замечание, опция --view отвечает за движок рендеринга, в данном случае устанавливается ejs.
Ещё можно настроить движок стилей, например, less или sass, с помощью опции --css.

Осталось установить зависимости:
npm install
Теперь запускаем приложение:
npm start

Всё, можно открывать http://localhost:3000