| /* SVG alternative to fittext.js */ | |
| div { | |
| width: 300px; | |
| height: 150px; | |
| float: left; | |
| margin-right : 10px; | |
| background: #f06; | |
| font: bold 150% sans-serif; | |
| text-shadow: 0 1px 2px rgba(0,0,0,.5); |
| // Config that can be loaded externally, similar | |
| // to [gulp-starter](https://github.com/greypants/gulp-starter) | |
| var src = './app/assets'; | |
| var dest = './public'; | |
| var config = { | |
| javascript: { | |
| src: src + '/javascript_app/**/*.{js,coffee}', | |
| rootFiles: [ | |
| { |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout. This is also called reflow or layout thrashing, and is common performance bottleneck.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParentelem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeightelem.getClientRects(), elem.getBoundingClientRect()
| // Creating Google’s “Material Design” in SCSS | |
| // (specifically Material Shadow, uses compass) | |
| // see: http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-paper-craft | |
| // Demo: http://codepen.io/stoikerty/full/Glwxi/ | |
| // Animating Box-Shadow is EXPENSIVE: | |
| // http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/#toc- | |
| // Moving between z-index-depths is done via opacity & multiple |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Mobius Strip</title> | |
| const express = require('express') | |
| const cors = require('cors') | |
| const server = express() | |
| server.use(cors({ origin: true, credentials: true })) | |
| server.use((req, res, next) => { | |
| const productsResponse = { | |
| products: [ | |
| { |
| const path = require('path'); | |
| // Teach Node how to use babel compilation, using closest babelrc config | |
| require('babel-register'); | |
| // Run specified file from second argument when first argument `--run` or `-r` is given | |
| const options = process.argv.slice(2); | |
| const runCommandGiven = (options[0] === '--run' || options[0] === '-r'); | |
| const fileToRun = runCommandGiven && path.resolve(process.cwd(), options[1]); |
| // filesHook.js - adapted from dev-toolkit@5.5.4 | |
| import filesHook from 'files-require-hook'; | |
| const rootForRequire = process.cwd(); | |
| // Set up server-side rendering of image files | |
| // --- | |
| // Implement a hook that uses a file-path for node | |
| export default () => { |
| // cssHook.js - adapted from dev-toolkit@5.5.4 | |
| import path from 'path'; | |
| import cssHook from 'css-modules-require-hook'; | |
| import sass from 'node-sass'; | |
| const rootForProject = './'; | |
| const scssIncludePaths = path.resolve(rootForProject, 'src/client'); | |
| const cssChunkNaming = '[name]__[local]___[hash:base64:5]'; |
| // ----- src/client/views/Shell.jsx ----- | |
| // Dynamic components & pages are handled differently. `react-router` doesn't use the `children` object for rendered content. | |
| // Instead it uses the keys specified in each route defined by dynamic-pages in `routes.jsx`, such as `header` and `content`. | |
| import React, { Component, PropTypes } from 'react'; | |
| import s from './Shell/_style.scss'; | |
| export default class Shell extends Component { |