Node.js | Twitter

Для Node.js существует npm пакет Twitter. Как понятно из названия, он будет полезен при взаимодействии с Twitter'ом.

Авторизация

var Twitter = require('twitter')

var client = new Twitter({
  consumer_key: process.env.TWITTER_CONSUMER_KEY,
  consumer_secret: process.env.TWITTER_CONSUMER_SECRET,
  access_token_key: process.env.TWITTER_ACCESS_TOKEN_KEY,
  access_token_secret: process.env.TWITTER_ACCESS_TOKEN_SECRET
})

Создаём новый твит

client.post('statuses/update', { status: 't.me/sWebDev is beautiful' })
  .then(console.log)
  .catch(console.error)

Получаем последние твиты о php в стриме

var stream = client.stream('statuses/filter', { track: 'php' })
stream.on('data', (event) => {
  console.log(event.text)
})
 
stream.on('error', (error) => {
  console.error(error)
})

JS | 13 полезных однострочников

Однострочник — фрагмент кода укладывающийся в одну строку и решающий задачу, на которую у новичка может уйти пара десятков строк.

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

Avocode

Avocode – это продукт созданный специально для верстальщиков. Сами создатели называют его "Мост между дизайнерами и разработчиками". Работает это так: дизайнер нарисовал макет в Photoshop, отправил верстальщику, а тот открывает его в Avocode, где удобно реализованы все необходимые инструменты.

Реализация карточки товара с несколькими изображениями

В примере описано как сделать карточку товара которая будет менять своё изображение по ховеру, представлено два варианта - две картинки на чистом css и несколько картинок с использованием скриптов.

CSS | Pointer-events

Свойство pointer-events позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсорному экрану. Свойство позволяет контролировать когда, как и может ли вообще указатель устройства взаимодействовать с элементом.

pointer-events: none предотвращает события указателя для элемента: hover, active, click и т.п., в том числе и JavaScript событие click.

pointer-events: auto восстанавливает стандартное взаимодействие указателя с элементом.

Применение pointer-events на практике:
Запретить пользователю клик правой кнопкой мыши по фото на сайте.
Выключить взаимодействие со странице во время обработки ajax-запроса.
Блокировать любой элемент страницы от взаимодействия с курсором.

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.