[ FontFaceObserver ] check whether font is loaded

var font1 = new FontFaceObserver("heebo"),
var font2 = new FontFaceObserver("heebo");

Promise.all([font1.load(), font2.load()]).then(function () {
console.log('Font is available');
}, function () {
console.log('Font is not available');
});

ref : https://github.com/bramstein/fontfaceobserver

Advertisements

[ rails ] precompile CSS

Using stylesheet_path to load CSS

views/layouts/whatever.html.haml

loadCSS("#{stylesheet_path "v3/614.css"}")

 

Need to add to precompile

config/initializers/assets.rb

# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.

Rails.application.config.assets.precompile += %w(
v3/614.css
)

Now on site, v3.614.css will be called.

 

Run precompile

$ rake assets:clobber # Remove compiled assets in /public/assets and /tmp/cache/assets

$ rake assets:precompile # Compile all the assets named in config.assets.precompile to /public/assets 

More : http://guides.rubyonrails.org/asset_pipeline.html

[ javascript ] CommonJS

Writing javascript module

AMD : Asynchronous Module Definition : load javascript when require

Example : load text module

define(['text'], function(text) {
var myModule = {};
myModule.print = function(message) {
message = text.capitalize(message);
console.log(message);
}
return myModule;
});

Example : load jquery module and text module

define(['jquery', 'text'], function($, text) {
var myModule = {};
myModule.print = function(target, message) {
message = text.capitalize(message);
$(target).html(message);
}
return myModule;
});

text.js module

define(function(require, exports, module) {
// โค้ดโมดูลแบบ CommonJS เดิม
exports.capitalize = function(string) {
return string.charAt(0).toUpperCase() + string.slice(1);;
}
});

load AMD using requireJS

index.html

script src="js/lib/require.js" data-main="js/config"

load config.js ( config ref : https://requirejs.org/docs/api.html#config ) 
// js/config.js

requirejs.config({
// กำหนด baseUrl ให้เป็นโฟลเดอร์ js/lib ครับ จะได้เรียกใช้ Dependency ได้สะดวกๆ
baseUrl: 'js/lib',
});

// เมื่ออ่าน config เสร็จแล้ว ก็ให้ไปอ่าน main.js ต่อ
requirejs(['../main']);

main.js

require(['jquery', 'myModule'], function($, myModule) {
$(function(){
myModule.print('body', 'siamhtml');
});
});

NOTE : we use require() instead of define() to tell requirejs to load and use, instead of only define()

ref : http://www.siamhtml.com/umd-load-javascript-module-using-requirejs-and-browserify/

[ scss css ] modular-scale ms()

variables

$ms-base: 20px, 50px;

$ms-ratio: 1.618; /* default */

ms()

$ms-1: ms(-1); // => 19.099px = 50px/1.618/1.618 = 50px / ratio / ratio [b]

$ms: ms(0); // => 20px [a--base]
$ms1: ms(1); // => 30.902px = 50px/1.618 = 50px / ratio [b]
$ms2: ms(2); // => 32.36px = 20px*1.618 = 20px * ratio [a]
$ms3: ms(3); // => 50px [b--base]

$ms4: ms(4); // => 52.358px = 20px*1.618*1.618 = 20px * ratio * ratio [a]

 

ref : http://www.modularscale.com/?20,50&px&1.618,

https://zellwk.com/blog/modular-scale/

[ susy ] span

span ( 10-column grid )

@include span(full)

 

@include span(1 of 3)

 

@include span(9 last);
@include span(6 of 12 last);

 

Custom Susy variable

$susy: (
container: 62.75em,
columns: 12,
gutters: 1/6,
global-box-sizing: border-box
);

 

Span and glutter ( margin-right [ default ] ) 

Picture from https://zellwk.com/blog/susy-gutter-positions/

 

gutter-position: after /* default */

 

span

// Scss
.test {
@include span(3 of 4);
}

generated CSS

.test {
width: 73.68421%;
float: left;
margin-right: 5.26316%;
}

** The last span will margin-right=0

// Scss
.content {
@include span(3 of 4);
}
.sidebar {
@include span(1 of 4 last);
}

generated CSS

.last {
width: 21.05263%;
float: right;
margin-right: 0;
}

** If we would like to exclude the margin-right on the particular span, use 0 at the end ( ref : https://github.com/oddbird/susy/issues/502 ).

@include span(8 of 24 0)

ref : http://susy.readthedocs.io/toolkit/,

https://zellwk.com/blog/susy-gutter-positions/

[ spot.im ] integration

Old

<div data-spotim-module="recirculation" data-spot-id="sp_XXXXXXXX"></div>
<script src="https://recirculation.spot.im/spot/sp_XXXXXXXX"></script>
<script src="https://launcher.spot.im/deferred/bundle.js" data-spotim-module="deferred-launcher" data-spot-id="sp_XXXXXXXX" data-post-id="POST_ID_HERE"></script>

New

<div data-spotim-module="recirculation" data-spot-id="SPOT_ID"></div>
<script async src="https://recirculation.spot.im/spot/SPOT_ID"></script>
<script async src="https://launcher.spot.im/spot/SPOT_ID" data-spotim-module="spotim-launcher" data-post-url="ARTICLE_URL" data-post-id="POST_ID"></script>

ref : https://spotim-jira.atlassian.net/wiki/spaces/SP/pages/211828/Conversation+implementation

Spot.IM Data Attributes

Example

data-messages-count=”2″