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

HTML | Прижатый футер

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

Вот некоторые способы прижать подвал:
- абсолютное позиционирование
- минимальная высота контента
- табличная верстка
- css flex
- css grid

Рассмотрим два последних варианта, как наиболее актуальные. В обоих случаях нам нужно указать высоту html и body 100% и разделить сайт на две части - контент и футер.

css flex
Оборачиваем сайт во flex-контейнер, меняем направление основной оси флекса на вертикальную и указываем margin-top: auto для футера, тогда он отступив на максимально возможное расстояние от контента прижмется к низу.

css grid
Оборачиваем сайт в grid-контейнер, указываем футеру align-self: end и всё, футер прижат.

Node.js | Язык шаблонов EJS

В прошлый раз мы создали Express приложение и указали EJS в качестве движка рендеринга. Пришло время рассказать о нём немного подробнее.

Самые любознательные уже осмотрели структуру сгенерированного приложения и нашли index.ejs в директории views. С помощью особого тега (<%=) на страницу выводится значение переменной noscript. Но существуют и другие теги:
<% - этот тег не выводит информацию, но его можно использовать для условий и циклов;
<%= - этот тег мы уже использовали, с помощью него можно вывести значение переменной, но стоит сделать замечание: значение выводится экранированным;
<%- - этот тег так же выводит значение, но уже без экранирования. Вывод переменной, допустим, со значением '<h1>hi!</h1>' создаст новый элемент h1;
<%# - тег комментария, он не выполняется и не выводится.

Шаблоны EJS поддерживают подргузку других шаблонов:
<%- include(template, params); %>
template - путь шаблона, например, 'user/show'
params - параметры, что попадут в шаблон.