Christopher Bloom
Frontend developer, lover of design systems, CSS architecture, and all things javascript.
Rapid web development
Unit 8, Week 9
"Taste", Mistakes Agencies Make, Rapid Dev Tools, GitHub for Teams, Pattern Lab
Work session
45-60 minutes.
Tune it up, you're showing the class your work on the next slide.
Done with your work? Read: http://www.lullabot.com/articles/mistakes-agencies-make-story-three-acts
Homework review
Let's see them. Class critiques. Take notes.
Ira Glass on Taste
Advice for beginners:
Mistakes Agencies Make
Lullabot is considered one of the top agencies in the country.
Their advice is sound.
http://www.lullabot.com/articles/mistakes-agencies-make-story-three-acts
Read this article.
Act 1: The Blood of Unicorns
Overselling.
Overzealous sales, under-staffed/experienced.
"Acme’s problem lies in the disparity between its prodigious sales talent and paucity of engineering talent."
Solution: Sell only your availability. Hire talented people no matter where they are.
act 2: Of Hubris and White Whales
Chasing massive, out-of-skillset projects.
Landing a client to the detriment of your culture and company.
Doubling down on risk to chase reward.
Solutions:
-
If you’re going to go chasing whales, check your hubris at the door and make sure you’re consciously assuming the risk.
- Listen to those niggling discomforts in the back of your mind and bring them to the forefront to be analyzed.
Act 3: The Ponze Ain't Cool
Basing growth on sales, not work done
Taking in more work with upfront pay to support unfinished work
"Ponzi scheme" dev shops
Solution:
If you’re going to grow, do it carefully and fund it with cash reserves from profits you’ve booked in the past, not with the revenues from future projects.
Pay per sprint (Remember Agile?)
Rapid Webdev resources
At some point, the entire concept of "rapid webdev" comes down to a toolset. I won't pretend that my list is somehow different than this:
-
http://www.agiledesigners.com/
- http://pineapple.io/
GitHub All-In-One Team Tool
Nettuts:
http://net.tutsplus.com/articles/general/team-collaboration-with-github/
Read as a team, after class.
Pattern Lab
- A way of thinking about web development
- A PHP-based tool to build component-based prototypes
Atoms
In chemistry, atoms are the basic building blocks of matter. They have distinct properties and can't be broken down further without losing their meaning.
Translated to interfaces, atoms are basic tags, such as form labels, inputs or buttons. They also include more abstract elements like color palettes, fonts, and animations.
Atoms are abstract and aren't often terribly useful on their own, but they provide a useful reference and allow you to see all your global styles laid out at a glance.
Molecules
In chemistry, molecules are groups of atoms bonded together, which take on new properties as a result.
In interfaces, molecules are groups of elements that function together as a unit. For example, a form label, search input, and button atom can combine them together to form a search form molecule.
Building up from atoms to molecules encourages a “do one thing and do it well” mentality, and encourages creating reusable interface patterns.
Organisms
Organisms are groups of molecules (and possibly atoms) joined together to form distinct section of an interface.
Organisms can consist of similar and/or disparate molecule types. For example, a masthead organism might consist of a logo, navigation, and search form, while a “product grid” organism might consist of the same product info molecule repeated over and over.
Building up from molecules to organisms encourages creating standalone, portable, reusable components.
templates
With templates, we break our biochemistry analogy to get into language that makes more sense to clients and final output. Templates are comprised mostly of organisms combined together to form page-level objects.
Templates provide context for these relatively abstract molecules and organisms, which is helpful for designers and clients alike.
Templates mostly focus on content structure (such as character length, image size, etc) rather than the actual content.
Pages
Pages are specific instances of templates and swap out placeholder content with real representative content to give an accurate depiction of what a user will ultimately see.
Pages are essential for testing the effectiveness of the design system. This final form allows us to loop back to modify our molecules, organisms, and templates to better address the real context of the design.
Pages also provide a place to test variations in templates, such as testing an article containing a 40-character-length headline and other article with a 340-character-length headline. What does it look like when a user has one item in their shopping cart versus 10 items with a discount code applied? These specific page instances test the resiliency of the system, influencing how the underlying molecules, organisms, and templates are constructed.
Pattern Lab: Tools
- Generate for the first time:
http://pattern-lab.info/docs/first-run.html - We work in the "sources" directory.
- Pattern Lab renders all files to the "public" directory
- "public" directory is wiped out every time we generate.
- Partials written in mustache
Pattern Lab: Partials
Ta da! View public/index.html in a browser:
- sources/_patterns: self-explanatory
- All based on naming conventions:
00-partial-name.mustache
Mustache 1
-
A modern templating engine, similar to Twig, Handlebars
- Used to print data into templates and iterate over datasets
source/_patterns/01-molecules/00-text/00-byline-author-only.mustache
Where does "author" information come from?
source/_data/_data.json
Look for the "author" index. Notice json file names.
Mustache 2
Patterns can reference other patterns (entire point of PL)
source/_patterns/01-molecules/02-blocks/00-media-block.mustache
<div class="block block-thumb">
<a href="{{ url }}" class="b-inner">
<div class="b-thumb">
{{> atoms-square }}
</div>
<div class="b-text">
<h2 class="headline">{{ headline.short }}</h2>
<p>{{ excerpt.medium }}</p>
</div>
</a>
</div>
{{> atoms-square }} actually embeds:
source/_patterns/00-atoms/04-images/03-square.mustache
Mustache 3
Iterate:
source/_patterns/04-pages/00-homepage.mustache
...
<div class="g g-3up">
{{# touts}}
<div class="gi">
{{> molecules-inset-block }}
</div>
{{/ touts}}
</div>
Loops through "touts" object in source/_patterns/04-pages/00-homepages.json and passes each object to the source/_patterns/01-molecules/02-blocks/05-inset-block.mustache template
Annotations
-
http://pattern-lab.info/docs/pattern-adding-annotations.html
- source/_data/annotations.js
-
Essentially a json object with a jQuery selector and some notes.
{
"el": ".logo",
"title" : "Logo",
"comment": "The logo image is an SVG file, which ensures blah."
} 
Sass
source/css/style.scss
Pattern Lab has almost NO opinions about how you should handle your Sass. A basic SMACSS structure is supplied. Go nuts.
** YOU COMPILE YOUR OWN Sass. Pattern Lab does not compile Sass.**
When Pattern Lab is recompiled, *.css files are moved from source/css to public/css.
Final Project
Build your final prototype in Pattern Lab.
March 11 (today): Rest of class work session
March 18: Full class work session
March 25: Group class demonstration
That's two full weeks. I will be grading the results as a client to who you are delivering a prototype. I care about detail and code quality. A lot.
Final Project
- Finalize designs. Break apart into patterns.
- Include: Atoms, Molecules, Organisms, Templates, Pages
- Translate your earlier wireframes to Templates
- Annotations are required for ALL patterns.
- Create final, clickable Pages with sample content.
- Host it online. GitHub pages? PagodaBox? DigitalOcean?
- ALL GROUP MEMBERS APPEAR IN COMMIT LOG
Suggested Group Duties
Project Manger: annotations, organization. Designer: design + CSS. Developer: architecture of files, code cleanup, HTML.
wdim351_week08
By Christopher Bloom
