JSFiddle

  • Importance and styles in Mithril #2 is the latest revision

    MithrilJS 0.2.0, HTML, CSS, Babel + JSX

    m.mount( document.body, {
    	controller : () => ( {
      	style : `
    #target {
      color : red !important;
    }
    
    label {
      display : block;
    }
    
    textarea {
      width      : calc( 100% - 1em );
      min-height : 5em ...
  • Mithril and false values as virtual DOM nodes #5 is the latest revision

    False values are coerced toString in order to produce text nodes. I contend that this is highly undesirable — my expectation is for falsey values to produce empty text nodes. This makes simple conditional logic (ors, ands) far more powerful in writing terse, legible views.

    m.mount( document.body, {
      view : ctrl =>
        m( '.app',
          m( 'label',
            m( 'input[type=checkbox]', {
              value   : ctrl.show,
              onclick : () => ctrl.show ...
  • Mithril redraw strategy demo

    No-Library (pure JS), HTML, CSS, JavaScript

    m.mount( document.body, {
    	controller : function(){
      	this.draws = 0
      },
      
    	view : ctrl =>
      	m( '.wrapper', 
        	m( 'label', 
          	m( 'input[type=checkbox]', {
            	onchange ...
  • Keycodes & event handlers

    MithrilJS 0.2.0, HTML, CSS, Babel + JSX

    const options = [
    	'UK',
      'RU',
      'US',
    ]
    
    const Selectables = {
    	view : ( ctrl, { options } ) =>
      	m( '.selectables',
        	m( 'input.selected[disabled]', {
          	placeholder : 'Select a country ...
  • Routed Mithril site with observers & hash URIs #1 is the latest revision

    Observer fork: no more false fire, logs, callback API for better logging

    ( function(){
      var observers = []
      var log       = []
      var init      = false
      var callback  = function( mutations ){
      	console.log( mutations )
      }
    
      var config    = {
        childList             : true,
        attributes ...
  • Routed Mithril site with observers & hash URIs

    Observer fork: no more false fire, logs, callback API for better logging

    ( function(){
      var observers = []
      var log       = []
      var init      = false
      var callback  = function( mutations ){
      	console.log( mutations )
      }
    
      var config    = {
        childList             : true,
        attributes ...
  • Static calendar #2 is the latest revision

    No-Library (pure JS), HTML, SCSS, Babel + JSX

    moment.locale( 'en-GB' )
    
    const calendar = {
      controller : input => {
        const weeks   = []
        const date    = input && input.date || moment()
        const end     = moment( date ).endOf( 'month' ).startOf( 'week' )
        const current = moment( date ).startOf( 'month' ).startOf( 'week' )
    
        while( current.isSameOrBefore( end ) ){
          weeks.push( {
            start : current
          } )
    
          current.add( 1, 'week' )
        }
    
        return { weeks }
      },
      
      view : ctrl =>
        m( `.month[style="
          display        : flex;
          align-items    : stretch;
          flex-direction : column;
        "]`,
    
          ctrl.weeks.map( week ...
  • Mithril calendar #2 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    No code. How about adding some?
  • Compile method definitions to valid ES6

    No-Library (pure JS), HTML, CSS, JavaScript

    var App = {
    	controller : function controller(){
      	if( this instanceof controller )
        	throw new TypeError( 'controller is not a constructor' )
      }
    }
    
    console.log( new ...
  • 404 handling with Mithril

    MithrilJS 0.2.0, HTML, CSS, Babel + JSX

    m.render( document.body, [ m( '#uri' ), m( '#site' ) ] )
    
    m.route( site, '/', {
    	'/'           : { view : () => m( 'h1', 'Welcome' ) },
    	'/page'       : { view : () => m( 'h1', 'Pages ...