gulp.task(‘sass’, function() { return gulp.src(‘src/styles/main.scss’) .pipe(sass({ style: ‘compressed’ })) .pipe(autoprefixer(‘last 2 version’, ‘safari 5’, ‘ie 8’, ‘ie 9’, ‘opera 12.1’, ‘ios 6’, ‘android 4’)) .pipe(gulp.dest(‘dist/assets/css’)) }); Gulp is a build system and performs tasks such as the ones we do using Grunt: minify, concat, prefix, uglify, etc. Main difference: Gulp allows you to input your …
Tag Archives: link
Kimono – Turn websites into structured APIs from your browser in seconds
Adaptive Backgrounds
koa – next generation web framework for node.js
Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs. Through leveraging generators Koa allows you to ditch callbacks and greatly increase error-handling. Koa does not bundle any middleware within core, and provides an elegant suite …
Continue reading “koa – next generation web framework for node.js”
Vertical align anything with just 3 lines of CSS
.element { position: relative; top: 50%; transform: translateY(-50%); } Same goes for horizontal centering. Where one – back in the day – would abuse margin-left by setting a negative margin to half of the width, we can now use translateX(-50%) to horizontally center a fluid-width box. .element { position: relative; width: 400px; left: 50%; margin-left: …
Continue reading “Vertical align anything with just 3 lines of CSS”
Google Maps JavaScript API Cookbook
Last November I was lead technical reviewer for a book titled Google Maps JavaScript API Cookbook. On December 26th – my birthday, of all days – the book was released on Packt Publishing. It’s a very practical book with lots of code (hence it being a cookbook) touching basic map interactions, custom layers, drawing stuff …
Fluidbox
I adore the smooth transition offered by Medium’s lightbox module — no disruptive modal window, and opening/closing of the lightbox is intuitive and straightforward. So I tasked myself with a little challenge — replicate it, and improve on it, if possible. CSS transitions and transforms FTW Fluidbox Demo → Fluidbox Source (GitHub) → Fluidbox Explanation →
Graffiti General
Graffiti General is an immersive WebGL plunge into an abandoned building near Paris and the countless graffiti works that it enshrines. On the eve of it’s restoration, the memory of the building in its current state is preserved and accessible to everybody. Graffiti General was made possible thanks to a combination of the very latest …