WEB | Расширения браузера для фронтендера

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

Tape - позволяет размещать направляющие, которые привязываются к содержимому страницы (и придерживается его, при прокрутке), и помогает легко измерять отступы и размеры элементов.

PerfectPixel - позволяет разработчикам накладывать полупрозрачное изображение поверх разметки и выполнять между ними идеальное сравнение пикселей. Идеально для вёрстки " пиксель в пиксель".

Design Grid Overlay - Расширение для наложения дизайнерской сетки поверх страницы. Сетка имеет множество настроек.

wireframify - Предварительный просмотр каркаса веб-сайта одним щелчком мыши. Наглядно показывает границы блоков, позволяет в целом оценить качество разметки или найти блок который вызывает горизонтальный скролл.

А какие ваши любимые расширения?

Как записать звук с микрофона в Node.js?

Для записи аудио с микрофона в Node.js существует созданный сообществом npm пакет mic.
Модуль работает на основе sox (Windows/Mac) или ALSA (Linux), поэтому необходимо предустановить их.

Базовое использование

var mic = require('mic')
var fs = require('fs')
 
var micInstance = mic({
  rate: '16000',
  channels: '1',
  debug: true,
  exitOnSilence: 6
})
var micInputStream = micInstance.getAudioStream()
var outputFileStream = fs.WriteStream('output.raw')

micInputStream.pipe(outputFileStream)
micInstance.start()

GIT | Всё что необходимо знать

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

В прикрепленных ссылках - учебник по git, справочник с командами, и интерактивное руководство от github, сохраняйте в закладки, изучайте.

CSS |Как сделать табы на чистом CSS

Этот пример реализации табов показывает, что необязательно подключать какие то фреймворки или писать скрипты, всё можно решить силами css.

Готовая разметка на emmet:

.css-tabs>(input#tab$.css-tab__input[name="tab"][type="radio"]+label[for="tab$"].css-tab__label>span.css-tab__noscript{таб $})*3+.css-tab__content[data-tab="$"]{содержимое $}*3

Остаётся только заменить 3 на необходимое количество табов, взять стили из примера и дописать их для каждого таба после третьего.

Как пронумеровать результаты запроса в PostgreSQL, MSSQL и MySQL?

Если используется PostgreSQL или MSSQL, то достаточно добавить функцию row_number() в запрос:
SELECT row_number() OVER() AS num, * FROM table LIMIT 10

В случае же MySQL придётся применить небольшую хитрость:
SELECT @i:=@i+1 AS num, * FROM table, (SELECT @i:=0) X LIMIT 10

JS | Показываем шапку сайта при прокрутке вверх

Меню будет прятаться при скролле вниз и снова отображаться при начале скролла вверх.

Этот метод будет полезен во многих случаях:
- на страницах каталога при скролле вверх можно показывать меню с фильтрами
- показывать сокращенный вариант меню при скролле вниз и полное меню при скролле вверх
- экономия места в мобильном режиме

Написано без использования jQuery.

Хотите влиться в разработку, с чего начать?

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

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

Аналог питоновского input() в Node.js

Как в Node.js получить данные, вводимые в консоль?
Для этого существует втроенный модуль readline.

Сначала подключаем модуль и создаём интерфейс ввода-вывода:

var readline = require('readline')
var rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
})

Теперь можно получить данные, например, попросить ввести ответ на пример 2 + 2:

rl.question('2 + 2 = ', (answer) => {
  console.log((parseInt(answer) == 4)
    ? 'Правильно!'
    : 'Неправильно!'
  )
  rl.close()
})

JS | Отличный вводный курс по JavaScript от Microsoft

Серия из 51 видеоурока, живым языком с примерами рассказывает об основах языка. Короткие ролики, не распыляя внимание, раскрывают конкретные темы.

Видео на английском языке, субтитры присутствуют.

CSS | Counters, как стилизовать нумерацию блоков

Счетчики CSS похожи на "переменные". Значения переменных могут быть увеличены с помощью правил CSS (которые отслеживают, сколько раз они используются).
С помощью этих счетчиков удобно нумеровать абзацы, пункты лицензионных соглашений, шаги оформления заказа да и вообще всё где используется последовательная нумерация.

ul{
counter-reset: listNumber;
}
li:before {
counter-increment: listNumber;
content: "№ " counter(listNumber);
}

JS | Slick Slider - пожалуй лучший слайдер в мире

Slick slider — это jquery плагин для быстрого создания на сайте адаптивного слайдера любой сложности. Его функционал позволяет реализовать зацикливание, автопроигрывание, эффект перехода, динамическое добавление слайдов, настройки поведения в отзывчивом дизайне, множество опций, событий и методов, настоящее спасение для тех, кому требуется что-то сложнее простой карусели.

Как в PHP сделать редирект? Для чего нужна функция header()?

Если ввести в яндексе фразу "PHP Как сделать", то одним из популярных продолжений будет редирект.
Для создания редиректа в PHP есть несколько путей, но правильным будет - использование функции header().
header('Locaton: '. $url);
Эта строчка кода выполнит переадресацию на $url.

Что ещё можно сделать с помощью функции header()?
На самом деле, header() - весьма полезна.
Можно, например, указать тип контента (допустим, страница будет генерировать PDF файл):
header('Content-Type: application/pdf');
И заставить браузер показать диалог загрузки:
header('Content-Disposition: attachment');

CSS | Не бойтесь использовать псевдоэлементы!

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

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

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