RyanParsley

name: Gut REACTion class: middle, center

Gut REACTion

Oct 19, 2015

---

TLDR:

RyanParsley

name: Styleguide Driven Development class: middle, center

Styleguide Driven Development

Oct 19, 2015

---

Promising tools

Frontrunners

RyanParsley

Inside InDesign

The following guidelines will configure InDesign to create nearly usable html via export. I can then take this one big html file and break it up into useable bits with a tool that I wrote.

• Thread text boxes that contain related content to be exported.
• Establish Paragraph Styles for exporting unique block level elements (h1, p, etc)
• Establish Character Styles for exporting inline elements (span, strong, em, etc.)
• Use lists and tables properly and they themselves out
• Inside your Paragraph and Character Styles, set up 'Export Tagging' to map desired elements and classes to export
• Create on Article per desired HTML page (the sitemap looks to suggest there will be 27 pages, but I'm not 100% sure that number is right) to be output and set it up with appropriate content
• Any images that should be exported in the flow of content needs to be properly anchored

RyanParsley

Inside InDesign

The following guidelines will configure InDesign to create nearly usable html via export. Once you export you'll have 1 big html file to manipulate in the next step.

1. Thread text boxes that contain related content to be exported.
2. Establish Paragraph Styles for exporting unique block level elements (h1, p, etc)
3. Establish Character Styles for exporting inline elements (span, strong, em, etc.)
4. Use lists and tables properly and they themselves out
5. Inside your Paragraph and Character Styles, set up 'Export Tagging' to map desired elements and classes to export
6. Create on Article per desired HTML page to be output and set it up with appropriate content

RyanParsley

Angular app

• single page app
• node will contatinate templates and populate a dist dir on the fly
  • I'll likely clone: https://github.com/RyanParsley/angular-starter

Static Site

• At home, I'll likely use Middleman
  • clone: https://github.com/RyanParsley/proteus-test
  • clone: https://github.com/RyanParsley/Pickle

RyanParsley

let g:solarized_termcolors=256
let g:solarized_termtrans = 1
let g:syntastic_scss_checkers = ['scss_lint']
set background=dark
color solarized
colorscheme solarized
set t_Co=16
nnoremap ,x :s/<[^>]*>/\r&\r/g<CR>
nnoremap <leader><space> :noh<cr>

RyanParsley

Strategy

We're making gears, not snowflakes.

• Focus on hte fact that you're building a system and not a poster.
• Components should be stress tested early, not simply displayed in an idealized context
  • Consider the best case scenario or ideal context
  • Don't ignore the worst case scenario (it will happen) * Example: How does the search result page look if there are no results or only 1? Don't simply think about when it has the same number of results as columns that you plan to use.
• Displaying high fidelity layouts is necessary to a point. Be realisitic about that point.

RyanParsley

'use strict';
var fs = require('fs'),
cheerio = require('cheerio');

var sourceFile = './source.html',
    cleanFile = './clean.html',
    fileName,
    elementName,
    $;

RyanParsley

docToMd(){ pandoc ${1%%.*}.docx -f docx -t markdown -s -o ${1%%.*}.md }

RyanParsley

var fs = require('fs');
var _ = require('lodash');

var filename = './dump.json';

var obj = JSON.parse(fs.readFileSync(filename, 'utf8'));

var layerStyles = obj.layerStyles.objects['<items>'];