Skip to content

Instantly share code, notes, and snippets.

Avatar
🍪
This website uses cookies and that is precisely why I'm here.

Eduardo Bouças eduardoboucas

🍪
This website uses cookies and that is precisely why I'm here.
View GitHub Profile
@eduardoboucas
eduardoboucas / turn-off-hue.js
Created Dec 15, 2018
Turn off all Philips Hue lights after a set timeout
View turn-off-hue.js
const hue = require('node-hue-api')
const HueApi = hue.HueApi
const lightState = hue.lightState
const IP = '192.168.1.85'
const USERNAME = 'XXXXXX'
const TIMEOUT = 30000
const api = new HueApi(IP, USERNAME)
const offState = lightState.create().off()
@eduardoboucas
eduardoboucas / web-3.0-migration.md
Last active Jun 29, 2017
Web 3.0 migration guide
View web-3.0-migration.md

1. Install Dust.js dependency

Web 3.0 supports multiple template engines. As a consequence, Dust.js is now decoupled from core and needs to be included as a dependency on projects that want to use it.

npm install @dadi/web-dustjs --save

2. Change bootstrap script

View gist:2d2fbb99372ec60dc7bb24596fd81e13
https://docs.google.com/a/dadi.co/presentation/d/1KfHPJNXATjvcVLyQdf7fnmbcl1xs0KD-HKyb7jis8_g/edit?usp=sharing
@eduardoboucas
eduardoboucas / im-hidden-classes.md
Created Feb 11, 2017
include-media — hidden classes
View im-hidden-classes.md

'At' sign

include-media — hidden classes

Get include-media here.

This plugin generates classes that can be used to hide elements (using display: none) at any specific breakpoint.

/* Hides an element on the "medium" breakpoint */
@eduardoboucas
eduardoboucas / im-to-em.md
Last active Sep 12, 2020
📐 Converting include-media breakpoints to em units
View im-to-em.md

'At' sign

include-media — em units

Get include-media here.

If you're using include-media to manage your breakpoints, you might want to have it generate media queries in em units but still declare the breakpoints in px for convenience.

We decided not to add this to the library core, as it's outside the scope of the project, but you can achieve that with a tiny function:

@eduardoboucas
eduardoboucas / SassMeister-input.scss
Created Jan 26, 2016
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.3.2)
// ----
$foo: true;
.bar {
color: if($foo, 'red', 'green');;
}
@eduardoboucas
eduardoboucas / SassMeister-input.scss
Created Jan 4, 2016
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.3.2)
// ----
@import "include-media";
$breakpoints:(
'bp1': 375px,
'bp2': 580px,
'bp3': 768px,
@eduardoboucas
eduardoboucas / SassMeister-input.scss
Created Jan 4, 2016
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.3.2)
// ----
@import "include-media";
$breakpoints:(
'small': 400px,
'large': 1200px
);
@eduardoboucas
eduardoboucas / SassMeister-input.scss
Last active Aug 29, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
@import "include-media";
///
/// Generates grid classes based on the defined breakpoints,
/// named with the convention `.col--x-y@breakpoint`, where
/// `x` is a subdivision of `y`.
@eduardoboucas
eduardoboucas / SassMeister-input.scss
Created Jul 29, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Include Media (v1.3.0)
// ----
@import 'include-media';
// ----- Plugin starts here -----