Использование WebP в быту

WebP формат графических файлов разработанный Google и впервые представленный в 2010 году. Преимущества перед png\jpg может достигать 30% в весе файла, при том же качестве изображения. К сожалению, и поддерживается пока только в Chrome, и браузерах основанных на том же движке рендера, например Opera, или штатный браузер в Android. Несмотря на поддержку только в Chrome, всего выходит ~67% от общего числа пользователей, неплохо. Преимущества webp для сайтов просты, меньше вес изображений — быстрее загрузка сайта.
Читать далее «Использование WebP в быту»

Увеличение SVG без увеличения ширины линий

При увеличении размеров svg изображений соразмерно и увеличивается обводка (stroke). Такое поведение является стандартным, но его можно переопределить при помощи свойства vector-effect со значением non-scaling-stroke.

Ниже пример svg без этого свойства, и с ним.

See the Pen SVG scale without scaling strokes by Maksim R (@Rukomoynikov) on CodePen.

Краткий конспект по скринкасту Webpack от Ильи Кантора

Вынести модуль в глобальный доступ к модулю
Экспортировать сам модуль, и в секции output добавить library: ‘имя модуля для внешнего доступа’

Например, файл messenger

1
2
3
export default function (message) {
alert(`Hey listen me, ${message}`)
}

и конфиг для webpack, который добавит модули в глобальную область видимости window.messenger(‘Don’t drink to much alcohol’)

1
2
3
4
5
6
7
8
9
entry: {
messenger: './messenger',
about: './about',
},
output: {
path: __dirname + '/public',
filename: '[name].js',
library : '[name]'
}

aggregateTimeout
По-умолчанию webpack ждёт 300 милисекунд после изменения файла, чтобы запустить пересборку. Но, это можно изменить — в конфиге укажите wathcOptions : {aggregateTimeout: 100}

Карты кода
За создание source-maps для модулей отвечает настройка devtool. Пример, devtool : ‘source-map’ — будет создан файл имя-модуля.js.map Есть и другие способы генерации source-map, главное отличие — применимость для «боевой» среды.

Переменные среды
Во время разработки есть необходимость переключаться между средами применения модулей. Например development\production, и во время development опция watch должна быть включена, а во генерации сборки для production соответственно выключена. Для этого можно использовать переменные среды. Укажите в конфиге webpack:

1
2
3
4
5
6
7
const NODE_ENV = process.env.NODE_ENV || 'development'
 
module.exports = {
...
watch : NODE_ENV == 'development',
devtool : NODE_ENV == 'development' ? 'eval' : null
}

Теперь запустите webpack командой NODE_ENV=production webpack убедитесь, что webpack собрал модули и завершил работу. В отличие от запуска без NODE_ENV=production когда webpack продолжит следить за изменениями в файлах.

Переменные окружения в скриптах
При помощи переменных среды и webpack можно так же управлять и скриптами, часто вы используете console.log или debugger ? И хочется чтобы эти строки включались только в development среде.

1
2
3
4
5
6
7
8
const webpack = require('webpack');
 
module.exports = {
...
plugins : [
new webpack.EnvironmentPlugin('NODE_ENV')
]
}

Теперь можно заменить в модулях код, на что-то такое:

1
2
3
if (process.env.NODE_ENV == 'development') {
debugger;
}

Так как, EnvironmentPlugin это обёртка для DefinePlugin, который как раз и служит для передачи произвольных переменных в скрипты. Чтобы использовать его напрямую замените конфиг вебпака на:

1
2
3
4
5
6
7
8
9
...
plugins : [
new webpack.DefinePlugin({ NODE_ENV: JSON.stringify(NODE_ENV)})
]
 
// было
if (process.env.NODE_ENV == 'development')
// стало
if (NODE_ENV == 'development')

Краткий итог, EnvironmentPlugin для управления настройками webpack в зависимости от среды. DefinePlugin для передачи произвольных переменных в скрипты.

ES6 и Babel
В Chrome 50 уже практически все нововведния из ES6 поддерживаются без поддержки транспилеров типа Babel. К сожалению, такая ситуация не везде, и для того чтобы писать код на ES6, а работать он мог в любом браузере и работать одинаково нужно использовать Babel. Установите его:

1
npm install babel-loader babel-core babel-preset-es2015 --save-dev

В Webpack есть понятие лоадеров, загрузчиков. Это простые javascript функции которые могут вмешиваться в сборку модулей. Настройка загрузчика Babel в webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
module : {
loaders : [
{
test : /\.jsx?$/, // проверка каждого файла на соответствение регулярному выражению
exclude: /(node_modules|bower_components)/, // исключить дирректории из поиска модулей
include : [
path.resove(__dirname, 'app/js') // фильтрация папок для отбора файлов в загрузчик
]
loader: 'babel?presets[]=es2015'
}
]
}

Resolving, поиск модулей и загрузчиков
Для того чтобы понять как webpack ищет модули надо разобрать две секции конфига webpack, это resolve и resolveLoader. Первая опция служит для общего поиска модулей, например для entry самого конфига, когда вы импортируете модули внутри скриптов.

Так webpack будет искать модуль home в папке node_modules, потом файл home.js

1
2
3
4
5
6
7
8
9
//webpack.config.js
{
...
entry : 'home',
resolve : {
modulesDirectories : ['node_modules'],
extensions: ['', '.js']
}
}

А resolveLoader, работает по похожему принципу, но с дополнительной опцией moduleTemplates, которая определяет возможные комбинации для именования папок:

1
2
3
4
5
6
7
8
9
//webpack.config.js
{
...
resolveLoader: {
modulesDirectories : ['node_modules'],
moduleTemplates: ['*-loader', '*']
extensions: ['', '.js']
}
}

UglifyJsPlugin
Для минификации и подготовки сборки для production используется UglifyJsPlugin обёртка. Его конечно надо включать только во время сборки файлов для production.

1
2
3
4
5
6
7
8
9
10
if(NODE_ENV == 'production'){
module.exports.plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress : {
warnings : false,
drop_console: true
}
})
)
}

Другие опции для плагина, на сайте самого плагина UglifyJS — https://github.com/mishoo/UglifyJS2#usage

Несколько точек входа
Для этого в качестве entry необходимо использовать объект, ключами которого являются название модуля, а значением файл. В output добавить path, если ещ> не сделано, и в качестве filename шаблон.

1
2
3
4
5
output: {
path: __dirname + '/public',
filename: '[name].js',
library : '[name]'
}

Общие участки кода в один файл
Как это работает, у нас есть несколько точек входа, и каждая точка входа использует общие модули, например «домашняя страница» home.js и страница «о нас» about.js обе делают import welcome from ‘./welcome’ Таки общие участки можно выделить в отдельный файл при помощи CommonsChunkPlugin.
Код который необходим на всех страницах сайта. Простое подключение — забирает те модули которые содержатся во всех точках входа.

1
2
3
4
5
6
plugins : [
...
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
})
]

Так в файл common.js попадут все общие участки из точек входа.

Настройки CommonsChunkPlugin

minChunks — в каком количестве модулей должен присутствовать общий код чтобы быть вынесенным в отдельный файл. Это значит, что если у вас 10 точек входа, а общий код есть только в 9, то он не будет вынесен в отдельный файл. Но при настройке minChunks : 9 код попадёт в отдельный файл.
chunks — явное указание в каких точках входа искать общие модули, chunks : [‘home’, ‘about’]

В plugins можно указать несколько раз CommonsChunkPlugin, например

1
2
3
4
5
6
7
8
9
10
plugins : [
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
chunks: ['home', 'about']
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common-shop',
chunks: ['cart', 'shop']
})
]

Информация о модулях — webpack —display-modules -v

Авторизация пользователей Express.js + Mongo

Если базовая авторизация не подходит — пользователи регистрируются сами, а внедрять passport.js не то чтобы рано, но надо разобраться с самого начала как оно работает. То здесь описан механизм хранения авторизации пользователя (его сессии) в Mongo, хотя можно заменить на любое поддерживаемое в express-session.

Чем cookies, отличаются от session. Сессии хранятся на сервере, ну точнее, где-то не на клиенте. Но, на клиенте в cookies хранится идентификатор сессии на сервере.
А cookies соответственно хранятся полностью на клиенте.

Читать далее «Авторизация пользователей Express.js + Mongo»

Базовая авторизация в express.js

Порой необходимо закрыть какую-то часть web-приложения, при этом доступ туда разрешён одному-двум заранее известным пользователям. В таких случаях для простоты можно воспользоваться давно известным приёмом — «базовая аутентификация».
Читать далее «Базовая авторизация в express.js»

REST API на основе Express, MongoDB(Mongoose)

Недавно закрылся Parse, жаль. Но, делать нечего, да и для простых случаев можно обойтись самодельным REST API который будет хоститься на Heroku. Начальная ситуация — у вас установлен Node.js, если нет, то загляните на официальный сайт и установите его для своей платформы.

Теперь начнём. Перейдите в терминал и выполните:
Читать далее «REST API на основе Express, MongoDB(Mongoose)»

Короткой строкой #1

В 49-ой версии Google Chrome появилась поддержка прокси-объектов. Насколько я понял это аналог Object.defineProperty()

Если вы хотите по-быстрому накидать диаграмму используйте Highcharts.js, если хотите сделать что-то нестандартное и сложное, управлять каждым параметром то ваш выбор D3.js. Уже существует множество учебников, вот и ещё один.

Griddle — компонен React.js для «умного» рендера таблиц. Это означает, что независимо от количества строк таблицы в каждый момент времени компонент показывает на странице ограниченное вами количество строк (и соответственно в DOM так же содержатся только они). Это существенно ускоряет работу с большими таблицами. Наиболее популярный аналог для jQuery — SLickGrid.

Пробежка по ES2015

Перевёл небольшой обзор основных новшеств в ES2015 (тот который ES6). В обзоре не хватает ES2015 Modules, а это пожалуй самое главное в этом релизе, но можно подробно почитать на сайте Frontender Magazine.

Читать далее «Пробежка по ES2015»

Backbone. Часть 1. Модели, коллекции и представления

Сегодня я напишу небольшое приложение на Backbone, например канонический телефонный справочник. И по шагам, начиная с азов покажу как всё работает. Поехали.

Что такое Backbone? Это и фреймворк и способ организации вашего js-приложения. Он проще чем Ember, и на мой взгляд логичнее чем Angular. На его изучение уйдёт никак не больше месяца, а освоив этот инструмент вы вполне сможете претендовать на начинающие позиции во frontend разработке.
Читать далее «Backbone. Часть 1. Модели, коллекции и представления»

Использование yeoman генераторов в быту

По старой, доброй привычке для «переварки» свежеиспечённой информации пишу небольшую заметку в блог. На этот раз героем номера стал Yeoman, это такой джентельмен в шапке и одновременно способ создавать первоначальную структуру проекта. Причём не важно какого, php там или js. Я думаю при должном рвении можно и для python проектов создать такую.
Читать далее «Использование yeoman генераторов в быту»