• HTML5
  • CSS3
  • JavaScript
    • ES6+
    • Babel
  • React.js
  • Angular 1.x
  • Bootstrap (2.x, 3.x, 4.x)
View generate-codes.rb
# How many codes to make
quantity = 30000
# Path to the file to be written
dest_file = 'codes.csv'
codes = []
quantity.times do
codes << "#{SecureRandom.hex(6)}".upcase
View Gruntfile.automated.js
const path = require('path')
module.exports = function(grunt) {
const config = {
browserify: {
options: {
transform: [
['babelify', { presets: ['es2015', 'es2016'] }]


foo bar baz qux

#Required Output

Hello Foo
Hello Bar
Hello Baz
Hello Qux
View dispatch-example.js
var newStateValue = "foobar";
type: "updateMyStateValue",
data: newStateValue
View reducer-example.jsx
var myReducer = function(state, action){
if(action.type == "updateMyStateValue"){
return state;
View connect-example.jsx
// Load the connect method from the react-redux package
var connect = require('react-redux').connect;
// Map state values from Redux to properties
var mapStateToProps = function(state) {
return {
myPropValue: state.myStateValue
View app.jsx
// Destructure the Provider component and connect method from the
// react-redux module. The component wraps your React application in
// the code necessary to work properly with state and prop updates
// from Redux. The connect method allows you to connect individual
// React components to Redux for Redux store to prop mapping.
import { Provider, connect } from 'react-redux'
// Destructure the createStore method from the core redux module
// This method allows you to create your global store to house all your
// state values and your reducers to update state values
import { createStore } from 'redux'


Tktk short for "To Come" in publishing is a simple placeholder highlighting library. Load this file on your latest project to highlight all the areas that still need copy, links, or final imagery. To highlight items, simply do one of the following:

Images: Either add a tktk class to the img tag or add #tktk to the image source.

Copy: Either add a tktk class to the element, or start the copy with "tktk"

For all elements that are "to come", copy will be highlighted in a nice, obvious magenta and images bordered in a 2px magenta border (using box-shadow so as not to affect layout).


Embedded SVG Helper

A simple helper function that makes inline SVG embedding simple! Just add the asset_helpers.rb file to your Middleman project's helpers folder and it will automatically be loaded and made available to you in your templates. From there, simply call:

<%= embedded_svg("my-asset.svg") %>

And your SVG asset content will be embedded inline in your template. You can also pass the following options to the helper to add additional attributes to the SVG tag itself: