lvl99

/*
 * SCSS Dynamic Breakpoint Media Queries
 * Author: Matt Scheurich <[email protected]>
 *
 * This is just a few ramshackle mixins I put together based on a theory.
 * Don't know if they're suitable for production yet, but check it out.
 * Please note that it's all only supported by `min/max-width`, no pixel
 * density or orientation, or even anything other than the `screen` media type.
 */

lvl99

// Inline SVG code images in LESS CSS
// @author Matt Scheurich <[email protected]> (http://lvl99.com)
// Github: https://github.com/lvl99/less-inline-svg-code
.inline-svg-code( @code ) {
  @-svg-code: escape(~'<?xml version="1.0" ?>@{code}');
  @-inline-svg-code: ~'data:image/svg+xml,@{-svg-code}';
  @-inline-svg-url: ~"url('@{-inline-svg-code}')";
}

// Basic Example

lvl99

[
  {
    "unicode": "U+1F601",
    "bytes": "\\xF0\\x9F\\x98\\x81",
    "description": "grinning face with smiling eyes",
    "htmlchar": "😁"
  },
  {
    "unicode": "U+1F602",
    "bytes": "\\xF0\\x9F\\x98\\x82",

lvl99

# Incorporate this function into your .bash_profile (.bashrc, .zshrc, or whatever you use...)
# Run `mov2frames name-of-mov.mov` to extract frames from the movie file
# Run `mov2frames name-of-mov.mov 300` to extract frames from the movie file at a maximum width of 300 pixels
# Frames will be exported into a `frames/` folder
# NOTE: if the frames folder exists and contains files that match the filename `frame_%03d.png`, no frames will be generated
mov2frames() {
    if [ ! -z "$2" ]
    then
      size=$2
    else

lvl99

import Ember from 'ember'

export default Ember.Component.extend({
  store: Ember.inject.service(),
  title: undefined,
  location: undefined,
  rating: undefined,
  
  inputRatings: [{
    label: 'Not rated',

lvl99

import Ember from 'ember';

export default Ember.Component.extend({
  filteredItems: Ember.computed('items', function () {
    // Imagine more than just one filter here
    return this.get('items').filterBy('showMe', true)
  }),
  
  sortDirection: ['lastUpdated:desc', 'createdAt:desc'],
  sortedItems: Ember.computed.sort('filteredItems', 'sortDirection'),

lvl99

class Modal extends Toggleable {
  // … magic goes here …
}

lvl99

<!-- Modal component HTML structure with modal and toggleable classes applied -->
<!-- This is usually the most basic way to combine multiple classes on an element -->
<div id=”example-a” class=”modal toggleable”>
  <!-- … oh la la, magic~~~ … -->
</div>

lvl99

// Toggleable Mixin Class
// @param @ns Namespaces the custom state classes
// @param @-toggleable-display Sets the display property for showing the toggleable
.ui-lvl99-toggleable(@ns: ~"lvl99-toggleable"; @-toggleable-display: ~"block") {
  // Uses the namespace to build custom state classes
  @-toggleable-ns-class-show: ~".ui-@{ns}-show";
  @-toggleable-ns-class-hide: ~".ui-@{ns}-hide";

  // Class mixin which contain style definitions for `show` state
  .-toggleable-class-show(@rules: {}) {

lvl99

// Import and apply the Toggleable Mixin Class to a specific class
.toggleable {
  // Imports the mixin and its related mixins and variables
  .ui-lvl99-toggleable(@ns: ~"toggleable");
  // Initialise the default since we have no other modifications from the normal
  .-toggleable-init-default();
}

// Let's do a parametric modification since spans should be displayed using `inline` or `inline-block`
span.toggleable {