Skip to content

Instantly share code, notes, and snippets.

Avatar

Chris Malven cmalven

View GitHub Profile
@cmalven
cmalven / npm-for-frontend.md
Created May 24, 2014
Let's make npm the standard for managing front-end packages
View npm-for-frontend.md

Let's make npm the standard for managing front-end packages.

Why?

  • The state of front-end package managers is all over the place.
  • Bower is still very non-standardized, resulting in bloated downloads and making it difficult to rely on libraries being packaged up in a consistent way.
  • None of the other package system (e.g. Component) seem to have enough momentum that they're going to reach critical mass.
  • The npm community has a single good, effective way to use npm modules in the browser with Browserify.
  • Browserify doesn't try to do too much or too little. It simply traces dependencies and bundles everything into a nice, tidy package.
  • The CommonJS module system is reasonably easy to understand, easy to read, and generally pleasant to work with. While AMD has its advantages, it generally loses in the categories of clarity, readability, and consistency (in that you still need to use a separate module system for backend node modules.)
@cmalven
cmalven / craft-transform-picturefill.html
Created Jul 29, 2014
PictureFill with Craft Transforms
View craft-transform-picturefill.html
<span data-picture>
<span data-src="{{ asset.getUrl('smallFullHi') }}"></span>
<span data-src="{{ asset.getUrl('medium') }}" data-media="(min-width: 600px)"></span>
<span data-src="{{ asset.getUrl('mediumHi') }}" data-media="(min-width: 600px) and (min-device-pixel-ratio: 2.0)"></span>
<span data-src="{{ asset.getUrl('large') }}" data-media="(min-width: 1000px)"></span>
<span data-src="{{ asset.getUrl('largeHi') }}" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></span>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
@cmalven
cmalven / _helpers.html
Last active Aug 29, 2015
Twig: Add a class if a string containers a descender
View _helpers.html
{# If str contains a character with descender ('gjpqy'), outputs a class #}
{% macro descender_class(str) %}
{% set chars = [ 'g', 'j', 'p', 'q', 'y'] %}
{% set hasDescender = false %}
{% for c in chars %}
{% if c in str %}
{% set hasDescender = true %}
{% endif %}
{% endfor %}
@cmalven
cmalven / index.js
Last active Aug 29, 2015
requirebin sketch
View index.js
var Collection = require('ampersand-collection');
var SubCollection = require('ampersand-subcollection');
var Model = require('ampersand-model');
var MyModel = Model.extend({
props: {
name: 'string',
selected: 'boolean'
}
});
@cmalven
cmalven / gulpfile.js
Last active Aug 29, 2015
Faking Sass Globbing
View gulpfile.js
// ...
gulp.task('concatStyles', function() {
return gulp.src(['assets/styles/objects/**/*.scss', 'assets/styles/layout/**/*.scss'])
.pipe(concat)
.pipe(gulp.dest('/'))
.pipe(concat('_combined-object-layout.scss'));
});
gulp.task('styles', ['concatStyles'], function() {
@cmalven
cmalven / SassMeister-input.scss
Created Feb 11, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.1.0-beta)
// ----
$base-colors: (
red: #ea1c2c,
drkred: #5b0411,
ltred: #e28a91,
blue: #2daae1,
drkblue: #2596c7,
@cmalven
cmalven / SassMeister-input.scss
Created Feb 11, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.1.0-beta)
// ----
$base-colors: (
red: #ea1c2c,
drkred: #5b0411,
ltred: #e28a91,
blue: #2daae1,
drkblue: #2596c7,
@cmalven
cmalven / check_user_camera.js
Created Sep 10, 2015
Check for availability of User Camera
View check_user_camera.js
if (Modernizr.getUserMedia || Modernizr.flash ) {
// The user has either getUserMedia or Flash available, so we can show the button.
$('.js-use-webcam-btn').show();
}
View meta-viewport-examples.html
<meta name="viewport" content="width=320">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1">
<meta name="viewport" content="maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@cmalven
cmalven / exclude-sass.sublime-project
Created Nov 10, 2012
Sublime Project File Exclude SASS
View exclude-sass.sublime-project
{
"folders":
[
{
"path": "root-project-folder",
"folder_exclude_patterns": ["css", ".sass-cache"]
}
]
}
You can’t perform that action at this time.