Steven Bassett

Forward JS 2

2015-02-04T00:00:00-08:00

State of the Community

The community was born in the sprit of open-source. The spirit of generosity, collaboration, building better communities is inseparably intertwined with building a better self. Be a mentor, communicate compassionately. Community is a group responsibility. Let's own it.

"Open source was built on the premise of collaboration.” The spirit of generosity.

Art - R&D of humanity

@superSGP

As we build an interconnected world, we are building a relationship with physical objects.

"Art is R&D for humanity." http://t.co/7Z3VWOMYMR @superSGP #forwardjs
— Karen Rustad (@whoisaldeka) February 4, 2015

Technophobia

"What if objects were...loyal?"

GPU and Web UI Performance

Diego Ferreiro Val @diervo

Creating complex UI components such has always been a challenge on the web. You have to do mathematical calculations, trigger beautiful transitions, and manipulate the DOM (with its costly paints and reflows) in an orchestrated and performant fashion.

We will discuss the state of the art on web performance, with practical examples, we will learn techniques used for improving the performance of browser repaints and reflows, and showcase the latest tools for diagnosing bottlenecks and jank in the browser rendering engine.

Diego Ferreiro is a Principal UI and Web Performance engineer at Salesforce. He was previously at Yahoo!, working in the Search Platform Team migrating the architecture to use NodeJS and Mojito. Diego spend his days worrying about web performance, 60fps animations, and making the UI faster.

Browser Rendering 101

DOM tree & CSS tree: constructed
Recalculate Style: attaches the style rules
Layout: calculate the changes, eg move 40px right, 3px down, add 40px of margin bottom.

Every time we touch the DOM, these events happen, we try to reduce the time these steps take.

The magic is in the GPU

Use operations that are cheap to compute.

ScrollerJS

only touch the DOM when absolutely necessary
reuse the same surfaces on the DOM
isolate GPU layers to contraints
defer execution as much as possible

"Use the power of the GPU wisely. Always try to find the right balance between perfomance and usability..."

Measuring performance

TODO: get the example.

Instrument your own framework!

#PerfMatters

What the... JavaScript?

Kyle Simpson - @getify

You've heard years of complaints about JavaScript and how many WTFs it has. It's certainly popular to be in the "I use JS but it's a crazy language" camp. But is it really riddled with bad design? There are definitely some legitimate WTFs, but they're most likely not the things you think. We're going to meander through of bunch of the weird corners of the language -- not the usual suspects -- and then look FORWARD to the new WTFs that ES6 (or ES2015 or whatever) has in store for us. If you're looking for the "bad parts" to avoid, ditch everything you've heard before and "let" these dance in your nightmares.

"Hell is not understanding my own code."

Books: You don't know JS

Slides

Web Component Markup

Estelle Weyl (@estellew)

Slides

No More Tools

Karolina Szczur (@fox)

As creatives we constantly search for ways to optimise and streamline workflows. Currently we’re being bombarded with more tools than ever. But how do we know that we reached a tipping point, when the apparatus we pick introduces more complexity and wastes way more time that it was supposed to save? As craftspeople, how do we maintain simplicity and learn to rely on bare-bones solutions? And more importantly—how do we empower others and collaborate? We’ll have a look at up-to-date front-end tooling and analyse alternative approaches to compiling, building and automation processes as well as the human side of teamwork.

Developing High Performance Websites and Modern Apps with JavaScript and HTML5

Doris Chen (@doristchen)

Creating high performance sites and apps is crucial for every developer. In this session, we will explore the best practices and performance tricks, to make your apps running faster and fluid. A casual game will be illustrated step by step to show how to optimize the game by applying all the optimization strategy. Come learn the tips, tricks, and tools for maximizing the performance of your sites and apps with JavaScript and HTML5.

Lova & Node

@superSGP

Creating relatability Process

Other talks

How To Create Good Documentation?

Common JavaScript Interview Questions

2014-11-07T00:00:00-08:00

After interviewing at a bunch of start-ups and other companies over the past month. I have gotten a bunch of white-board challenges, I have previously never been asked to use a dry erase marker to solve problems. Besides learning how terrible my handwritten code punctuation is, I learned some neat tricks and tips for solving these problems.

#1 Anagram Puzzle

See the Pen Anagram Puzzle by bassettsj (@bassettsj) on CodePen.

#2 Flatten an array without recursion

See the Pen Flatten Array without recursion by bassettsj (@bassettsj) on CodePen.

#3 Log Example

See the Pen Log example by bassettsj (@bassettsj) on CodePen.

#4 Create a Modal

See the Pen IdqaD by bassettsj (@bassettsj) on CodePen.

Design for Drupal 2015 - Boston

2014-08-01T00:00:00-07:00

Design for Drupal, Boston is an annual web design camp covering all aspects of design, UX, & theming for Drupal websites.

Rethinking UX Research: Best Practices for Successfully Evaluating and Improving Your Web Sites

by Christine Perfetti

How do you really know what your users want? How do you ensure your designs work for your prospects and customers? How can you be confident that your design changes improve your site?

What prevents you team from running UX research studies
- too scientific
- slows the team down
- unsure about the results
Involve stakeholders at the beginning
- Understand business problems and what your stakeholders need in order to use the data to inform desicisons.
It's about quality, not quantity.
- start small, pick your stakeholder.
Types of Studies
- Review the web analytics.
Data sources
- visitor traffic and server logs
- conversion funnels
- search engine logs
- if they can't find what they want, they go to search.

800,000 of Microsoft's page have never been loaded from the server.

Not only business goals, but also improve design.
A usability test involves putting your users in front of your product and obsering the results.
Usability tests can be done anywhere.
Running a test session
- Greet the user
- Explain to tuse how the test will work
- Give the users tasks to complete
- General Q/A
- Debreief with observers
What should we look for?
- back button
- pogosticking
- pick a link, didn't get what you want, so you go back and try again
- users are going back and forth between pages to try to find the information they want.
- search
- "...but I use search on Amazon.com", if they know exactly what they want then search is okay.
- FAQs
5 second test
- Show a user a page for 5 seconds and ask:
- What can you tell what the primary purpose of the page is?
Build empathy
Start with the problem, not the solution.
Ethnography
- its really lean and cheap
- Tips
- you are the apprentice
- focus on the person
- forcus on the present and past
- avoid leading questions
- ask open-ended questions
Design charetts for research using internal stakeholders.
- Early stage sketching and telling us what they know about their users.
Prototype with Paper
- Think about the interaction flows.
Getting stakeholder buy in can't be done with evangelzing, but rather by getting them involved early.

Why Did They Say That? Understanding Clients -- From a Client

Christina Inge

Questions developers and designers have clarity, directions, changes in direction, timelines and feedback.

Why does this happen? Internal to the client usually and has nothing to do with you. Part of it is a different perspective, a different langulage or frame of reference, project imbalances on either side and different thinking styles.

Clarity - language differences from thinking style. They might need it explained in different ways. Visual vs verbal thinkers, communicators. Sometimes they need to talk through thanks a lot.

Directions project management skills
Understnding of web design process
Overly high expectations
Consesus-internal changes

Feedback is really import. When you don't get feedback, realize that they are often very busy, fires break out. Budget change and stakeholders go away.

Know your stakeholers
Ask and Listen
Whose viewpoints are most critical?
What are their needs?

Address different needs

Business needs vs design needs
Marketing needs:
- get customers (more important than esthetics)
- gain consensus
- use different tools
- CRMs
- E-mail
- Messurement
- Get leads

Be Proactive

Manage expectations, but also educate
Blog expectations but also eucate
Blog, socials media, email education
Customers appriciate
Nudge

Giving Great Feedback

Be specific

Is the working vague or open-ended?
Would someone else understand?
Am I identify a problem?
Could this be an actionable to-do item?

Less Specific vs more specific

I don't like it. Make it pop!

Theis design might not appeal to our younger audeince. I think the colors don't look friendly enough.

Goal-Oriented

Why do I want to add this?
How will this suggestion benefit a user?
How does this help accomplish goals?

Less Goal-Oriented

My favorite websites have large photo carousels...

More Goal-Oriented

Users need to feel comfortable to use our services, adding photos of our staff might help us achieve this goal.

Organized

Consolidate
Categorized
Prioritized
Formatted

Timely

When should I offer my feedback? Don't let it prevent you from providing it, just check with the PM to see if it is possible

Communiticating Clearing

Show empathy
Point out things you like and don't.
Establish a common vocabulary.
Consider other methods
- typed
- spoken
- visually
Skitch or annotated screenshots are great.
Photos of sketchs.
Reread & Revise
Des this meet the great feedback criterea?
Ask questions.

Enhancing Design with Adaptive Content

@joelsteidl @hoodedcloak74

Adaptive Content is broken down and structured. Displayed in mutiple places. Could be comparable to the card catelog, takes content of media and creates metadata about the item. Allowing you to create a structured representation of the orginal media.

Why does this concept actually matter? - communicating with your users. - variety of devices and contexts - always a plesant experience

Unadaptive content - WYSIWYG - encourages writting in "blobs"

Design control is the real advantage.

How to go adaptive - What content needs to be displayed? - How the content will be entered into the system? - Where the content needs to be displayed?

Defining the fields.
Defining the view modes.
Design

So how do we implement it?

Content types
View modes
Views

My Brain is Full: keeping up with Front-end innovation

How did we get here?

IE8/7/6 56% of market share

Blueprint CSS

960gs

Web Typography

The Anti-Handoff

Erin Hollowway @justlastweekend

We have to think about alot more, we don't know our media. We can't increase ideation time.

Handsoffs suck, they just do.

Dissolve ambiguity
- Figure out who is on your team.
- Get involved & organized
  - Create a project plan, do this together.
- Define Touchpoints
  - WEhn to invite people to party, when not to.
Utilize your Design Tool
- Asset Exports with Generator
- Layer Comps
- Grids
Wireframing
- mapping the content

Forward JS

2014-07-25T00:00:00-07:00

Forward JS was a one day conference in San Francisco. I won the tickets at SF JS. I have been looking forward to to this for a while. Let's talk about frameworks, node and everything in between.

Choosing a front-end framework...

What the blogs aren't telling us.

We make decisions at every scale, from language to framework, to library to a variable name. Most of our decision come from intuition.

NodeJS for Everything

by @swigby

Let your application crash.

Debug with node-inspector.

Modlous is using node for everything except for just SSL decription.

Do no use astricks for your pacakages on NPM. Use proper versioning, as a package contributor.

Stateless, keep your application as stateless as possible. It allows you to scale. If you need to use state, use redis to keep state.

Express is a great tool for building APIs. Fast unopionated, inimalist web framework.

Hapi is a HTTP Server frameworks from the minds at walmart labs.

Restify REST framework.

Horizontal scalablility -> be able to have multiple instances and be able to scale it that way.

Don't reinvent the wheel, don't start from scratch. That is why there is NPM.

Start testing early! Pick a testing frameworks and start writing tests.

If your not using streams, get familiar.

KISS stupid.

Introduction to Generators in ES6

Great for writting co-routines that are synchronous.

Callback hell can quickly happen in node land. Promises promise some relief to callbacks. You can never return to the original stack.

var Gen = function *() {
  var val = field 6;
  return val + 3;
};

var gen = gen();
var val = gen.next().value // val == 6
val = gen.next().value // val == 9

Coroutines is a stak of code that runs independently of the main thread.

For realworld applications, try using co.

Koa is a middleware focused framework that allows you to transverse the stack.

Shen, a toolbox for composing generators.

Choose your own Adventure

Kyle Simpson @getify

Slides available

What if your team could get over using spaces vs. tabs or using semi-colons vs. not. Configurable 2-way code formatting. Smarter tools make for better developers.

Sweet.js adds simple macros to the language.

Build tools that gets around the short falls of javascript. FoilScript: a list of tools.

Have javascript your way.

espima/acorn (parser)
escodegen (code generator)
escope/eslevels (scope analyzer)
istanbul (code coverage)
estraverse (analyze AST)
eslint (plugable linting tool)
plato/jscomplexity.org (complexity)

State of Mobile HTML5

Half full or half empty?

Tomomi Imura @girlie_mac

Open web advocate, mobile geek, worked at Yahoo! Mobile, Palm, Nokia.

2012 was the first year of mobile chrome. Firefox has been in the game for a long time. Opera was in presto, then webkit and joined the blink engine. iOS' safari is only every year. Microsoft has released IE 10 and finally.

Disrupt App Store.

I am tired of hearing native's better.

Distributing outside of app store.

Coremob Camera

HTML Media Capture

FileReader()

drawImage()

getImageData()

upload with XHR2

Touch Events v.1

React and Flux

unidirectional data binding to clean up our code.

Flux: An Application Architecture for React

Slides

Embracing Failure on the Frontend

Montior change with services.
Phantomas
chaos-monkey-browser
Monitor key performance metrics over time.
Bad performance = failure.

Getting going with gulp

2014-06-05T00:00:00-07:00

Coming off of having a presentation on the subject of front-end operations using grunt, I was feeling like I have a certain amount of expertise with Grunt, and a new appriciation for it, but now I want to try my hand out on the new Gulp build tool for Node.js. Gulp leverages the core power behind Node.js and uses it to enforce developers to not write out verbose configuration files, but rather write their own tasks using the Node APIs.

Getting started

Install CLI

You need to install gulp globally first so that it can be available on your path, to test try using the --version to make sure that it is installed correctly.

$ npm install -g gulp
...
$ gulp --version
[gulp] [14:06:30] CLI version 3.7.0

Package.json and packages!

If you don't already have a package.json in your project, you may want to use npm init to get the nice little CLI dialog to create it for you. Once the file is available, we will want to install a local gulp package, npm install --save-dev gulp. Now we can get started.

Using coffeesript?

I try to use CoffeeScript whenever possible, I find there is less of a change of syntax errors like missing semi-colons or commas. Grunt had built in support for CoffeeScript, but Gulp does not, and I doubt it will. The easiest way I found to allow you to write tasks in coffee-script is by requiring it at the base gulpfile.js. You will also need to install it with npm install --save-dev coffee-script. I wanted to seperate out the tasks into a couple of small files as well, in a directory I called _gulp so jekyll will ignore it by default.

/**
* @file gulpfile.js
*/

require('coffee-script/register');
// then the coffeescript can be compiled on the fly.

// included a new file in _gulp folder
// added that since the project is a jekyll blog
require('./_gulp/index.coffee');

First task

Well let's compile sass down, there are two good plugin's out there. The first, gulp-sass uses the node-sass, which is wicked fast, but has less features and less stable. I went with the ruby sass plugin, gulp-ruby-sass. Then it was pretty easy to get the plugin added to my project. Install the gulp plugin with npm install --save-dev gulp-ruby-sass.

##
@file ./_gulp/index.coffee
##

gulp = require('gulp') #load gulp
sass = require('gulp-ruby-sass') # load the gulp sass plugin

Now that we have these set up, I added the first task using the gulp.task method to add the new task to the markup.

#contiued above, register the task
gulp.task('styles', ->
  gulp.src('./_scss/**/*.scss') #the source
    # pipe is streaming the results to the next task
    .pipe(sass()) # the sass plugin compiles here
    .pipe(gulp.dest('./assets/css/')) # then the `dest` method outputs the results
)

Moving each task into small modules

So just like load-grunt-config, it is nice to have smaller pieces of code to work with, so splitting the tasks into modules would be fairly easy. The scripts.coffee module would go into ./_src/scripts.coffee, then we could just pass the gulp object to the function.

# @file _src/scripts.coffee
coffee = require('gulp-coffee')
uglify = require('gulp-uglify')
concat = require('gulp-concat')
pkg = require('../package.json')
config = require('./config.json')
isProd = ( config.env == 'production' )

module.exports = ( gulp ) -> #Pass in gulp here
  gulp.task(
    'scripts', ->
      gulp.src(config.paths.scripts)
        .pipe(coffee())
        .pipe(concat( pkg.name + '.pkg.js'))
        .pipe( if isProd then uglify() )
        .pipe(gulp.dest( config.paths.assets + '/js'))
  )

Then it is really easy to include the individual tasks, require('./scripts.coffee')(gulp), storing the config in JSON is super easy, although I guess I could use the package.json config key in the spec.

Writing my own Jekyll plugin with a few lines

Simple enough to get started. I think you start seeing how easy it would be to write your own plugins to use. The only jekyll plugin for gulp isn't very stable yet, so I thought I would give writting a custom task that uses the child process module to span a new process and handle the errors and stodout a bit.

# @file _gulp/jekyll.coffee
cp = require('child_process')
gutil = require('gulp-util')

module.exports = (gulp) ->
  gulp.task( 'jekyll', ->
    jekyll = cp.spawn('jekyll', ['build'])
    jekyll.stdout.on('data', (data)->
      console.log( 'jekyll: ' + data )
    )
    jekyll.stderr.on('data', (data)->
      error = new gutil.PluginError('jekyll', 'Jekyll errored with : ' + data )
    )
    jekyll.on('close', (code) ->
      if ( code isnt 0  )
        error = new gutil.PluginError('jekyll'
        , 'exited with code ' + code
        )
    )
  )

Watch is built in!

Nifty, the watch task is just built into gulp in a nice way. It is just a method you use. Then it becomes really easy to write watch tasks here.

gulp.task('watchStyles', ->
  gulp.watch(config.paths.scss, ['styles'])
)

So what to do now?

I would like to get more projects using Gulp to try it out a bit more. It is hard though since I don't want to redo them just for the sake of prefering the tool. I will have to wait and see.

DrupalCon Austin

2014-06-03T00:00:00-07:00

Sessions, sprints and a reunion.

Keynote: Dries

If we look at the camera's user journey.

Every iteration of the camera, reduced the number of steps for the user. With the instamatic, we were able to remove processing, digital to remove needing to store. Every itteration reduced the complexity for the user, but caused the complexity of the device to increase.

Innovation enables experience.

Static Web > Dynamic Web > Assembled Web > ?

e-commerce example

How can we eleminate steps in the user journey in buying a t-shirt. If we can add an identity service, that takes care of shipping, payment and size information in the process.

Drupal 8

Semantic
Entity & Views: complete with RESTapi
Themeing
Twig, HTML5, Modernizr
Deployment: Configuration management

Browser eyeballing != javascript testing

Jasmine, qunit, blah, blah

Use grunt for CI stuff

Build a Drupal Free Theme with Drupal 8 's Rest API's and JS

Themeing for Drupal sucks...

Slides

What if we could have semantic hmtl? or have scalable CSS?

RAW DATA PLEASE!?

Web services and REST.

D8 provides:

HAL
HTTP Basic Authentication
Serialization

POSTman

OO Render

The theme system in Drupal sucks, again...

The render system is complicated, and it is because it is just an array based system. Drillability is something we cannot do with Drupal 8.

drupal_render(). = we create a big array of stuff, eat it and return a string of HTML.

It is called a lot, up to 8 recurses and 200 times.

What do we need?

I. An abstracted, alterable , consistent me=odel of structured content. II. A sensible, accessible API for this model.

Layout design patters.

@pixel_whip

Common solutions

Themeing with Twig

Getting Started with Grunt

2014-06-02T00:00:00-07:00

I was lucky to be given the opportunity to share about using grunt to help automate and improve your frontend operations with drupal.

Presentation: "Getting Started with Grunt"

Kalatheme

2014-02-01T00:00:00-08:00

Joining the Kalamuna crew, I was very excited to start contributing to some of our open source tools that we used on projects and contributed back to the Drupal community. I started taking Kalatheme to the next level in three key areas, javascript, tooling and accessibilty.

Working on the Bookshare

more to come...

Angular Application for CVT Insurance Enrollement

2014-02-01T00:00:00-08:00

Bookshare

2014-02-01T00:00:00-08:00

Bookshare was one of the more challenging projects I had worked on at that point, but the work was ultimately very rewarding because of the impact we were able to make on helping the organization reach the users that needed their help in accessing materials that helped individuals with print based disabilities.

I was involved in the discovery and frontend implementation of their new CMS. The project had to be responsive, easy to use and most importantly accessible by any user.

The biggest take-away from the project was the absolute need for user-testing by individuals with different accesss needs. Making assumptions about what is best practice ultimately proved to often be misguided.

Going into the project thinking that using the WAI-ARIA specifications to describe the visual interactions of the CMS actually created an awkward experience for what many users of Assistive Technology (AT) were expecting. That ultimately using more traditional and expected patterns were the best solutions.

The best example might be how we implemented a menu system for the navigation bar for the site. For example a simple list of links around a <nav> tag would have been much better than something more complex like the example below. Finding out that we were spending more time trying to use every ARIA role to describe the markup was ultimately, not helpful, but using a more traditional <ul> to markup the menu.

<nav role="navigation">
  <a class="brand">Bookshare</a>
  <h2 class="sr-only">Main Menu</h2>
  <ul class="nav" role="menu">
    <li role="presentation">
      <a href="explore" role="menuitem">Expoore</a>
      <a href="#exploreDropdown" role="button" class="dropdown-toggle"
        aria-haspopup="true" aria-expaned="false" id="exploreDropdownToggle">
        <span class="caret" aria-hidden="true"></span>
        <span class="sr-only">Expand dropdown menu for Explore</span>
      </a>
      <ul class="dropdown-menu" role="menu" id="exploreDropdown"
        aria-describedby="exploreDropdownToggle">
        <li role="presentation">
          <a href="/explore/books" role="menuitem">Books</a>
        </li>
        <li role="presentation">
          <a href="/explore/articles" role="menuitem">Articles</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Simple things like providing guidelines to using a good heading structure was extremly useful. Simply trying using voiceover to navigate your work was a very helpful, and humbling, experience to quickly fix some of the more obvious issues.

These lessons were later used to help contribute back to our theme, Kalatheme, to make it more accessible and thus the many sites that use it or will in the future.

This project was using kalatheme, which uses Bootstrap, so began our assement of the framework's accessibility. Bootstrap, love it or hate it, has been wildly successful and has become the most popular web UI framework. Working on this project, made me realize that documentation and many of the plugins had a lot of room for improving accessibility. I was able to work on a few commits on the project that were later added in a recent release. It was pretty rewarding to get to work on a project that I have been using for years and see that I have the chops to contribute.

The project also was using the FitText.js, a jQuery plugin to make larger header text scale up or down to fit the container's size. It uses Lettering.js to do this by simply wraping each letter in a new span tag so CSS can target each letter specifically. The result though for screenreader users isn't great. Each span is treated as a seperate word and a pause is given, thus a heading with "Title" would be annouced as "T, I, T, L, E" with a pause for each letter. Not great, I went to open an issue with Dave Rupert, the author, and saw he was already trying to work on it. His solution provided a copied element, that was shoved off screen but still accessible to the screen reader and then the modified original was given a aria-hidden="true" attribute. Dave wasn't super satisfied with the result because it resulted in duplicate content, that could effect SEO. I was wondering is an aria-label attribute would achieve the same results and prevent duplicating elements. I created a new pull request and it was accepted, I was pretty psyched on that one. I have looked up to Dave for a while on a great leader in frontend web development. He was a co-host on the shoptalk show and often speaks at conferences.

more to come...

Github for Collaboration

2014-01-29T00:00:00-08:00

Created a short presentation using Reveal.js on how our library is using Github for projects.

GreenBiz

2014-01-01T00:00:00-08:00

This project was the largest project taken on by Kalamuna at the time. I was brought onto the project about halfway through the build and was tasked with some complicated tasks of helping harmonize and componentize the sites many features needed. This site acted as a blog, media, event and much more for the organization who's primary task was to help work with businesses to see the business value in improving their sustainability efforts.

more to come...

SinBerBEST

2013-11-30T00:00:00-08:00

My initial project with Kalamuna we helped build their new site using Panopoly and kalatheme. One of the first tasks was helping build some frontend automation to let the project get moving. More details and screenshots to come.

BAD Camp 2013

2013-10-25T00:00:00-07:00

With over 160 sessions, 1600 attendees and one awesome party, BAD camp might be my favorite conference of the year. This year was even better than last and can't wait to use what I learned in upcoming projects. Here are a few notes I took from the conference I wanted to share.

BAD Camp Session Notes from:

PHP Unit Tests in Drupal 8
Agile Drupal Development
Responsive Grids

PHP Unit Tests in Drupal 8

Agile Drupal Development

Development Philosophies

Waterfall
Agile
Rational Unified Process
Microsoft Solutions Framework
and many more

The Iron Triangle of Project Management (Budget, Time, Scope)

Agile is a philosophy, a way of thinking.

Scrum is an example of a methodology under the Agile philosophy.

Why be agile?

Because research show that you have a greater chance of success with Agile methods.

Easier to adapt to change.
Often better than Waterfall at managing risks.
Necessitates more involvement from stakeholders
Developers feel more ownership
Better chance of building something useful
Quality driven focus
Greater transparency. Visibility.
Quicker feedback from end-users.

A typical agency project life cycle

information discovery requirements design development content creation

pure agile is probably not the best option.

Scrumfall

Scrumfall is a hybrid of Waterfall and Scrum methodologies often employed when there need to be certainty around the project scope.

Waterfall tasks

Documenting

Project plan
Business requirements
Schedule
Risk analysis
Scope definition

Agile tasks

Iterating

Brainstorming
High-level requirements (i.e. vision, mission statement)
Elevator pitch

Responsive Grids

by Snugug (While wearing an awesome viking hat.)

Drush Resources

2013-10-23T00:00:00-07:00

Setting up a local Drupal development environment on your Mac and how to use Drush to manage and sync sites.

Articles

Setting up the local environment on a Mac.

Download and install MAMP
- I like to configure my development enviroment to point to the ~/Sites/ directory to serve the sites.
Installing git version control
- Download and install the latest version of git.
- Follow the instructions.
- If you’re looking for some enticing reading, check out Pro Git for detailed infomation about git version control.
Installing Drush
- Please read the following Administration Guide from Drupal.org for the most up to date information on installing drush:
  - Specific instructions for installing Drush on different platforms
- I found the following lines the easiest to set up drush to work with MAMP, not MAMP Pro, The current version of MAMP may require some troubleshooting to get Drush to work correctly. Known issues include:
  - Default use of php5.3.6 instead of php5.2.17 causes errors upon update, most commonly "Cannot redeclare class" errors. To solve, change the version of PHP in the MAMP preferences panel or add a line in your .bash_profile to tell Drush to use the right version of PHP export DRUSH_PHP="/Applications/MAMP/bin/php/php5.2.17/bin/php".
  - Inability to connect to localhost MySQL via socket. Causes errors like "Error: PDO::__construct(): [2002] No such file or directory (trying
    to connect via unix:///var/mysql/mysql.sock)". To solve, from within Terminal run the following commands:
    - sudo mkdir /var/mysql
    - sudo ln -s /Applications/MAMP/tmp/mysql/mysql.sock /var/mysql/mysql.sock
  - Please read the following instructions if you have MAMP Pro: > ##MAMP Pro > Original Article* > > These instructions are somewhat specific to MAMP PRO 2.1.1 > > Download, install, and launch > MAMP Pro. Under the PHP tab, select php 5.3.x from version pulldown. Click > "Apply". Click "Start". > > Add the MAMP executables to your path. > > > chmod +x /Applications/MAMP/bin/php/php5.3.14/bin/* > echo "export PATH=/Applications/MAMP/bin/php/php5.3.14/bin:/Applications/MAMP/Library/bin:\$PATH" >> ~/.profile > . ~/.profile > > Add a symlink to the MAMP Mysql socket to allow drush to connect. > > > sudo mkdir /var/mysql > sudo ln -s /Applications/MAMP/tmp/mysql/mysql.sock /var/mysql/mysql.sock > ## Performace > > ### MYSQL > > You may get "MySql server has gone away" errors. To fix, in MAMP, edit the > mysql configuration by going to file->edit template->mysql. Change > maxallowedpacket to > > > maxallowedpacket = 16M > > ### PHP > > Increase both the MAMP PHP memory limit. In MAMP, edit the php configuration > > file->edit template->php->php5.3 > > change memorylimit_ to > > > memorylimit = 256M > > Increase the CLI PHP memory limit. To figure out where your CLI php.ini file > is, use > > > which php > > php -i | grep php.ini > > change _memorylimit_ to > > > memory_limit = -1 ## Cloning production site to your local environment. ##
Clone the Git repository.
- Open Terminal
- Use git to clone the repository for the project you’re working on from our Bitbucket Account
  - eg git clone git@bitbucket.org:nu_lts/dmc.git ~/sites/dmc.neu.edu/ clone from remote to this directory
- Note that this will only bring down the code that is being tracked by the git repository. It will not bring down any files or directories not tracked by Git.
Setting Up Site Aliases
- Go to your root apache htdocs folder, in my case cd ~/Sites.
- Set up a file structure such as:
  - ~/Sites/library.neu.edu/ to act as the local root for your Drupal directory.
    - this would be accessible from localhost:8888/library.neu.edu/
- Setting up the Drush Aliases for your projects
  - Location: I have used the following location by using: cp /path/to/drush/examples/example.aliases.drushrc.php ~/.drush/aliases.drushrc.php to move the example file with documentation to my home directory that drush will look at to find aliases.
    - In any path set in $options['alias-path'] in drushrc.php, or (equivalently) any path passed in via --alias-path=... on the command line.
    - In one of the default locations:
      - /etc/drush
      - $HOME/.drush
      - The sites/all/drush folder for the current Drupal site
    - Inside the sites folder of any bootstrapped Drupal site, or any local Drupal site indicated by an alias used as a parameter to a command.

Edit the aliases.drushrc.php file by configuring the production, staging and local environment you would like to work with eg:

$aliases['dmc.local'] = array(
'uri' => 'localhost:8888/dmc.neu.edu',
'root' => '/Users/steven/Sites/dmc.neu.edu', // This doesn't work with ~/Sites/dev.local
'db_url' => 'mysql://root:root@localhost:8889/dmc',
'path-aliases' => array(
  '%files' => 'sites/defualt/files',
  '%dump' => '/Users/steven/tmp/drush/sql-sync-dev-local.sql', // Arbitrary location for temp files
  ),
);
$aliases['dmc.prod'] = array(
'uri' => 'defualt',
'root' => '/var/www/html',
'databases' =>
  array (
   'default' =>
   array (
   'default' =>
   array (
   'database' => 'dmc',
   'username' => 'dmc1',
   'password' => ‘****’,
   'host' => 'localhost',
   'port' => '',
   'driver' => 'mysql',
   'prefix' => '',
   ),
   ),
  ),
'remote-user' => 'sbassett',
'remote-host' => '155.33.22.226',
'path-aliases' => array(
  '%drush' => '/usr/local/share/drush',
  '%site' => 'sites/default',
  '%files' => 'sites/defualt/files',
  '%dump' => 'tmp', // Arbitrary location for temp files
  ),
);

Finding the site information for the aliases: Tip from Using drush to synchronize and deploy sites

Creating the site-alias config array is tedious by hand. If you have a working site. Change into the site dir of a working site and run drush site-alias --with-db --show-passwords --with-optional @self I often go drush site-alias --with-db --show-password --with-optional @self > /etc/drush/mysqit.alias.drushrc.php and then importantly edit the resulting new files and A: add a <?php tag to the top! B: relabel it from @self to your preferred nickname - which must match the filename you used. Those extra connection details are required for remote aliases. If you want, you can also split out the component parts of an alias and use inheritance to construct the peer alias. For example: <?php $aliases['mystagingserver'] = array ( 'remote-host' => 'mystagingserver.myisp.com', 'remote-user' => 'publisher', ); $aliases['peer'] = array ( 'parent' => '@mystagingserver', 'uri' => 'demosite.staging.remote', 'root' => '/var/www/vhosts/staging/httpdocs’, ); ?>

SSH Key Pairs

Required for Drush to work with remote servers

Check for ssh keys on your computer

Go to your .ssh directory: $ cd ~/.ssh Check for keys: $ ls idrsa idrsa.pub If there are no keys like that above try creating the keys using the directions from github:

$ ssh-keygen -t rsa -C "your_email@youremail.com"
# Creates a new ssh key using the provided email
# Generating public/private rsa key pair.
# Enter file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]

Do not enter a passphrase: Enter passphrase (empty for no passphrase): [Press enter] Enter same passphrase again: [Press enter]

Should return: Your identification has been saved in /Users/you/.ssh/idrsa. Your public key has been saved in /Users/you/.ssh/idrsa.pub. The key fingerprint is: 01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db youremail@youremail.com Make sure to create the touch ~/.ssh/authorized_keys file. Try to create the permissions to be like the following for your environment: $ cd ~/.ssh $ ls -al drwx------ 2 user user 4096 Oct 10 12:31 . drwx------ 3 user user 4096 Oct 10 12:51 .. -rw------- 1 user user 808 Oct 10 12:50 authorizedkeys -rw------- 1 user user 1675 Oct 10 12:31 identity -rw------- 1 user user 1675 Oct 10 12:16 idrsa -rw-r--r-- 1 user user 398 Oct 10 12:16 idrsa.pub SSH into the remote server: $ ssh user@example.neu.edu Create a keypair for the remote server using the same method above. (Don’t forget to check the permissions) When you have completed the steps on both your local and remote machines, then you can add your key to the remote server. From your local terminal: $ login=username@hostname $ ssh $login "echo 'cat ~/.ssh/id_rsa.pub' >> ~/.ssh/authorized_keys"

To debug what might be happening you can run: $ ssh -v user@server.edu Need more assistance making a bootstrap way of creating key pairs.

Using Drush commands on remote servers

To use drush commands on a remote server you can simply use the alias for. For example I can look and see the basic site status for the DMC website. $ drush @dmc.prod status Site URI : defualt
Database driver : mysql
Database hostname : localhost
Database username : dmc1
Database name : dmc
Database : Connected
Drupal bootstrap : Successful
Drupal user : Anonymous
Default theme : dmc
Administration theme : seven
PHP configuration : /etc/php.ini
Drush version : 5.6
Drush configuration :
Drupal root : /var/www/html
Site path : sites/default
File directory path : sites/default/files
Private file directory path : sites/default/files/private temp : tmp
Drupal version : 7.15

Using rsync to fetch files from the remote server.

Go fetch the files from our production server to local server: drush rsync @dmc.prod:%files/ @dmc.local:%files/

Using drush to run a site install

Before running the command please make sure to look at drush site-install —help for instructions. To install the local site into mamp you can run the following command:

$ drush @dmc.local use
$ drush si

If the aliases are configured correctly, you can go the the local url eg localhost:8888/dmc.neu.edu/ and it should install a basic site. Nothing special.

Using drush to sync the databases

Note: you will probably want to clear the cache on both sites before the transfer $ drush cc all. Use the drush sql-sync command to send from source to target. For example to create your local enviromnet, you will want to pull down the sql database using: $ drush sql-sync @dmc.prod @dmc.local

Notes for trouble shooting White-Screen-Of-Death (WSOD)

Try turning off clean urls:

$ drush vset --exact clean_url 0
clean_url was set to 1.                                                                  [success]

Clear the cache $ drush cc all
Look at the settings.php file in the sites/default/ directory
Look at the .htaccess file
Refer to the php.ini files to make sure that MAMP is configured to give enough memory for both drush and drupal to run.
Check your mysql and php error logs, with MAMP they are located:
- /Applications/MAMP/logs/

Scholar OneSearch Presentation

2013-10-13T00:00:00-07:00

Re-skinning Northeastern University Libraries’ Primo UI With the launch of Alma on July 1, 2013, Northeastern University Libraries introduced the new Scholar OneSearch, a Primo installation featuring responsive and user-friendly design.

We’re especially proud of our responsive design, which allows flexibility and functionality beyond the default mobile stylesheet. We’re also happy to have WorldCat NRE requests integrated successfully. Scholar OneSearch also improves upon some of the features in the standard Primo release, including a reorganized page header, collapsible facets in the left-hand “refine my results” sidebar, and integrated feedback into each search result.

Scholar OneSearch Presentation

Feature Driven Developement with Drupal

2013-09-17T00:00:00-07:00

KIT Specification

The KIT Feature Specification outlines best practices for creating features to allow them to be interoperable between projects. Read the full specification for more details.

Reading list

Drupal Configuration Management with Features

Components that should be in features

Views
Context
Taxonomies
Rules
Menu definitions
Content type definitions and field defitions
Search Servers
Search Indexes
Configuration for Contributed Modules
Image Styles
Text Filters
CKEditor Settings
Rules and Rules Sets

DRS

2013-08-21T00:00:00-07:00

The Digital Repository Service is the current project to build a institutional repository for Northeastern University. The repository will act as a source for departments in the institutional organization to store scholarly resources research information.

What is the DRS?

The DRS is simply the web application / project was and is being build to interface with our Fedora Common's dura-space architecture. The project is lead by the Dean of Digital Strategies, Patrick Yott. He had the vision to adopt open source technology and invest in building a customized web interface to provide Northeastern with a institutional repository to preserve and share university publications and other scholarly works.

The project project had functional requirements that made it more unique than other repository implementaitons. The data models of how content objects were organized followed an anolog of how the university is structured. For example, deposited materials are organized in a graph that follows the divisions of the university so that a research publication of the science department would follow:

Northeastern University / College of Arts and Sciences / Biology / Research Publications

The first implementation of the platform was built using a custom homegrown PHP written application. The features of this application were limited and the extendability of this implementation were greatly limited by the functional and hacked together pieces of code.

Drupal Implementation

As I was given the task to look into using the Drupal APIs and contributed modules to implement a new UI I was quickly faced with the reality that this task was going to require using every API with a collection of custom modules to provide the features that were needed in the project. Drupal is a powerful platform that is no longer limited to be used as just a content management system, so although the

Silex

Scholar OneSearch

2013-07-17T00:00:00-07:00

Why such a drastic change in design?

With the launch of Alma on July 1, 2013, Northeastern University Libraries introduced the new Scholar OneSearch, a Primo installation featuring responsive and user-friendly design.

We're especially proud of our responsive design, which allows flexibility and functionality beyond the default mobile stylesheet. We're also happy to have WorldCat NRE requests integrated successfully.

Scholar OneSearch also improves upon some of the features in the standard Primo release, including a reorganized page header, collapsing facets in the left-hand “refine” navigation, and integrated feedback into each search result.

Constraints of default design

The default front-end, the html, javascript and CSS delivered to the browser, greatly limited the amount of customization. In our first early implementation. We only authored a few lines of code to override the default design. Through our user testing we identified that we might need to take a drastic overhaul of the CSS. While starting the design process the decision to include the original CSS at all was heavily weighed in, since the default CSS took a great amount of specificity in the CSS selectors to override. We have implement this first design with the inclusion for the reasoning of avoiding the possible issues of not having any fallback for unforeseen and tested features where there was no CSS and left the user with a non-functioning design.

Leveraging Open-Source Technology

With the relative short deadline before release, it would have been nearly impossible drastically change the user-experience without the help of open-source projects. We implemented from the Front-End framework from Twitter called Bootstrap. The project was customized through using the project's preferred CSS preprocessor LESS. Without the aid of a CSS Preprocessor the stylesheets would have been unmaintainable and the complex CSS selectors would have been nearly impossible. Recess was used to help enhance LESS by compiling and ordering the CSS with best practices automatically, can be used as a fantastic CSS linting tool as well.

// LESS before being compiled to CSS

.navbar-toggle{
  background-color: @navbar-toggle-bg;
  border: @navbar-toggle-color 3px solid;
  .icon-bar{
    background-color: @navbar-toggle-color;
  }
  border-color: @navbar-toggle-color;
  &:hover,
  &:focus{
    background-color: @navbar-toggle-bg-hover;
  }
}

Compiled to

/**  Becomes **/


.navbar-toggle {
  background-color: #ffffff FF;
  border: #cc0000 3px solid;
  border-color: #cc0000;
}

.navbar-toggle .icon-bar {
  background-color: #cc0000;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
  background-color: #555555;
}

.navbar-brand {
  max-width: 250px;
}

With the use of the Font-Awesome icon font set, we were able to create retina ready icons that are small in size and can be styled with the power of CSS. The project includes LESS stylesheets and powerful mix-ins. Inspiration and color pallets were taken from the popular Flat-UI project and were integrated into the Bootstrap framework. Modernizr was used for feature detection and filling in gaps in legacy browsers.

Further modifications were made to the HTML through the use of jQuery. The jQuery was already included with Primo. We built our javascript functions in "The Module Pattern" to help organize the code if it increases in complexity. Although modifying the DOM too heavily with javascript is not a best practice, the restraints of working on someone else's application gave no other option.

Projects Used

jQuery
twitter/bootstrap
twitter/recess
Font-Awesome/Font-Awesome
design-modo/Flat-UI
Grunt.js

Working together for a better Primo

The Northeastern Libraries wants to continue to make Primo and Scholar OneSearch better through collaboration with others in the Primo user community. This means making the code available for you to use with Primo at your library. Even though we there is more work that needs to be done, we are following the "Release early, and release often" iterative approach. If you are interested in implementing this code, please help contribute back improvements. Even submitting and fixing issues that you have found in a copy of the code would be beneficial to any adopting institutions. You can view and work on the code through our public repository at nu-lts/scholar-onesearch.

Ways to contribute

Adding documentation to the wiki.
Filing issues and enhancement request
- or even just using that for feedback / suggestions.
Fixing and adding new features through a pull-request.

Higher Education Summit - NYC Camp 2013

2013-07-15T00:00:00-07:00

Schedule for the the day

9:00-10:30 — Opening, Introductions, Identify BoF opportunities
10:30-11:00 — Yalesites (Nancy, Yale)
11:00-11:15 — Break
11:15-11:45 — BoF Tables
11:45-12:15 — Harvard Web Publishing and OpenScholar (Ethan, Harvard)
12:15-01:30 — Lunch
1:30-2:00 — Reconvene, Unconsortium (Zach, Stanford)
2:00-2:45 — Lightning Talks, BoF Tables
2:45-3:15 — Open Edu (ImageX Media)
3:15-3:30 — Break
3:30-4:00 — CCNMTL (Jonah, Columbia)
4:00-4:30 — Drupal websites and the people who break them (Aaron, Columbia)
4:30-5:00 — Reflection, Plus/Delta, takeaways

Yale

Provides three base themes based on Omega base theme, includes a yale 978 grid. HTML5 Starterkit, Omega tools Delta & Content Modules for alternatve homepages layouts. Clean design, with plenty of flexibility including accent colors and their own custom typeface.

They have an institutional github enterprise, NetApp and Jenkins while using Drush.

Offer support site with forum and lynda.com memebership.

Yale University has recently transformed the YaleSites service by upgrading the platform from Drupal 6 to 7 and providing additional features to make building a site on the University campus easier. While our first implementation of YaleSites was an incredible stretch for the University (it was the first widely available, centrally-supported CMS offering), most of the focus was on adoption and cost savings. We provided some features we thought the user community wanted – Image Galleries, Blogging, Calendar – but quickly realized there were other major issues that needed to be addressed to make it easier for non-technical faculty, students, and staff to build their websites.

The launch of Drupal 7 was a perfect opportunity to begin the process of revamping the YaleSites offering, utilizing the experience gained with Drupal 6 and improving upon the existing system to provide a platform that addressed the needs of all – even the non-technical site builders. In this session, we will talk about:

D7 administrative interface: made it easier to manage content and administrative tasks.
Omega base theme: 3 flexible and mobile ready Yale Templates using Omega as the base theme.
Heavier use of Features module: to provide many of the common Content Types and Views – News listing, Rotating images, Calendar, Video listing, Photo Galleries – eliminating the need to manually build.
D7 Profile/People listing: Faculty and Staff listings are now easier to create using the People Feature that uses CAS and prepopulates user data from LDAP when adding users.
Improved file handling: Multiple files can be uploaded at one time, and better private file handling allows you to restrict downloading / viewing to a specific subset of users.
Restricted access: Can create private files, or restrict access to a Content Type and/or a specific node.
Yale-specific customizations, integrations and custom modules
CAS/LDAP
Bedework calendar
Filelocker 2
Github Enterprise and Jenkins for code management and deployment
Improved infrastructure

Harvard Web Publishing & OpenScholar

The Harvard Web Publishing (HWP) group is a key pillar in Harvard's strategy around public websites for departments, projects, research centers, and faculty. Formed out of a strategic, collaborative effort between Harvard University Information Technology, the Institute for Quantitative Social Science, and Harvard Public Affairs and Communications, HWP provides a low-cost yet powerful solution for Web publishing needs. Our integrated, self-service platform based on OpenScholar; visual design templates; and content strategy guides help Harvard community members create an effective, attractive website with minimal effort and cost.

In this talk, we will review the business case and demo the technology.

Ethan Kiczek, Director, Harvard Web Publishing Oren Robinson, Web Application Developer, Harvard

http://hwp.harvard.edu
http://openscholar.harvard.edu/
https://groups.drupal.org/openscholar
https://portland2013.drupal.org/session/openscholar-saas-platform

My Notes

Decentralized IT, Expensive, no consistency across sites, bad experiences, varying technologies, inconsistent support.

Web Publishing

Simplified service catalog. Clean, consistent designs, scalable, extensible.

Based on OpenScholar

Spins up quickly, maintainable by non-technical staff and features are distributed through an analogy of Apps & Widgets.

Cross-Site search is possible, Custom Domains, continuously enhanced by Harvard development team, IQSS and open source community.

Provides content strategy, best practices, and site quality monintoring.

Project management.

Classroom and online training; customized trainining is available.

Support is available, platform sites.

NYC Camp - Drupal Conference

2013-07-13T00:00:00-07:00

NYC Camp was a phenomenal conference and an excellent opportunity to learn more from the heart of the big apple.

Vagrant & Chef, for Drupal Developers

Alex Dergachev found of the Evolving Web

@dergachev

Slides available

What is Vagrant?

A wrapper on VBoxManage
A workflow
A way of life ?

Why use a virtualization for development?

Snapshotting is awesome, rebuilding and imitating the prod environment.

Puppet / Chef will make provisioning easiers. Vagrant is a wrapper for vbox manage, which is poorly written. This creates a vm and provide the base instance.

Installing Vagrant

Run these GUI installers

Download virtualbox, then the vagrant installer, (no longer a gem)

Vagrant Docs

Beautiful just like this beautifully simple tool.

Base Boxes

Just a VM images with vagrant user & ssh keys
Virtualbox guest additions
Installed chef, ruby & puppet

Vewee can help build a basebox.

Don't be STUPID, Grasp SOLID

Blog: Don't be STUPID, Grasp SOLID!

What is object oriented programming?

You don't necessairly need classes and objects. We can create OOP projects using an API, analogy of

STUPID

Singleton

Single purpose code.

Tight Coupling

You would have to rebuild the app since the code is specific and not modular.

Untestable Code

House of cards code, changing the code in one place can cause global issues.

Premature Optimization

Indescriptive Naming

If the other developers that use your code need to think, you need to rethink your naming.

Duplication

The Rule of Three, if I need to copy and past it twice, then you should refactor.

SOLID

Single Responsibility

Do one thing and do it well. Keep your objects, methods narrow

Open/Close Principle

Code should be open for extension but closed for modification.

Liskov substitution principle

Parent type is left then we extend the parent type. The children add but never limit.

Interface Segregation Principle

Dependency inversion principle

Law of Demeter

Principle of Least Knwoldege. Your code should never assume to know more than the first degree.

Principle of Least Astonishment

Your code should not surprise, it should be obvious and self document. It should be as intuititve as possible.

Getting Acquanted with MongoDB

Slides on Github.com

10gen - the MongoDB Company

MONGODB: THE GOOD PARTS

Document model
Flexible schemas
Scalability and performance
Features (aggregation, geo, GridFS)

Server architecture for High Performance Drupal

Slides Available

Exploring the world of Search & The Future of Search and SEO

Knowledge Graph
Schema.org Module for Drupal
Rich Snippets

Modules to checkout.

Zen and Zen Grids

Solr Search Upgrade

2013-07-01T00:00:00-07:00

Solr is a lucene based search technology that provides full-text searching at incredible speeds. After seeing that our production Drupal site was experiencing problems with the Search by Page minor update and seeing some pretty significant performance issues with a database based search, I purposed and started prototyping a solr based site search tool.

The upgrade featured spell checking, facet based browsing and flexible result display with the views module. The search site upgrade was going to be deployed using features; the code block below shows the features breakout of configuration for the different environments the site would be moved to.

_features 
  _search
    search_api_library #Holds components that are are environment agnostic.
    search_api_production #the other features are specific for environments
    search_api_staging
    search_api_development

Retina Ready

2013-06-30T00:00:00-07:00

Created a small presentation inspired and heavily refrenced from Dave Rupert's presentation "Mo‘ Pixels Mo‘ Problems"

Design4Drupal - Boston 2013

2013-06-26T00:00:00-07:00

{:class="img-polaroid"}

Day 1

Designing for a Moving Target

RichardBanfield

How do we make design future proof?

Great Product Lovely Biz Model Awesome UX

Our brains are designed to focus our attention one thing at a time.

Focus makes us seem smarter? We cannot see the forest because we see the only the tree.

"The things I'm going to be working on have not been invited."

60% of apples profit come from devices that haven't been around for even a decade.

Our biology is the answer for these problems.

Our evolutionary changes have not changed very quickly, fairly static in a human generation. If biology is the answer, then what about our biology do we need to design for. Our brains are the key to understanding how we need to design. Moving is the key for why we have a brain in the first place. Looking at simple organism, sea squart for example will digest it's brain when it is settled on a reef, no longer needed. Think about how we move.

Until now we have been design around technology.

Lovely as how beautiful our technology has become, it isn't natural.

Desktop request modification of our behavior.

Mobile is not a technology, mobile is a state.

More People will experience the web on their phones than on their PC. Of course this is not news to anyone.

We are seeing technology being designed for our body, for fitting in Google glass, Siri and other changing technology.

We now design around our body and behavior.

Get to know their hearts and mind.

When we know about our users, we should look beyond sex, age, nationality to see that people face the challenges low self-esteem, seeks direction, anxious about body image.

Humans are way more complex than their demographics...

Design for a lazy and irrational brain.

Why do we get headaches? Often because of low glucose, the brain is designed for a world of scarcity. Secondly, we are irrational, the economic choices we make are often irrational my Macbook Pro is an irrational choice.

We are emotional first and logical second.

Happiness make memories and learning.

The flow that happens when you're focused can greatly contribute to happiness. How can we really engage our users.

Why do designers need to be brain experts?

Strong emotional conclusion lead to trust and engagement.

Humans are unique in their recognition of facial emotions.

We need to include this in our designs -> 37Signals

Design tricks and persuades the mind.

The right content at the right time can evoke emotion.

We are not seeing a substitutional effect.

Triggers, motivations and ease of use.

Ease of use we have.

Tech change is inevitable but human remain somewhat the same. Understand the human so tech stops dictating the direction.

This is not just for scientists, it's just common sense. The greatest designer is biology.

Design Smarter Not Harder

Ken Woodsworth

Slides on SpeakerDeck

Now creating a design for each page, then creating a design for each device becomes impossible.

Designing for interactions is a moving and impossible target.

Flat vs. Skeuomorphism

Why are we moving towards flat design? Maybe RWD.

"Times change and dropping qualifies is a good way to measure the changes."

Inception Principle

Design Process Process

Establish Goals
1. Large
2. Many Smaller
Communication
1. Make sure that everyone knows the project goals.
2. Include the client in the process.
  1. The steps, the goals and the deliverables.
  2. Make sure the client understands the goals.
Tools
1. Sketching without commiting to the design, then choose a heavier line weight for cmmiting.
2. Paper is super helpful!
3. Graphic software
  1. Photoshop, Fireworks.
  2. Sketch
4. Interaction
  1. Prototyping sofatware.
  2. framerjs.com

Iterating, remove major changes.

Design kick off meeting

Excellent opporunity to bring people together and educate the client and learn from them.

Design Exploration

Style tiles or maybe Mood Boards.

Reading is fundamental

Content Lists

Design Concept

Creating one version that allows for iterations.

Style Guide / Pattern Library

Creating a great resources for frontend

More Sketching

Start using this as a way to understand the layout of the components, find patterns to reuse for the front-end.

Day 2

Drapper Drupal

John Ferris & Garrett Dawson

Slides on SlideDeck

Why make your own starter theme?

Case studies.

Front-end Developer

HTML+CSS+JS + everything drupal specific.

Typical Approach includes contributed modules, base themes, and starter themes.

What base theme do you use? We use theme as a guide the building proccess. At a point they no longer fit our workflow, but that also might assume that you end up using a particular nameing convention, CSS preproccessor or structure. Then the code might no longer be readable.

Contrib is still really rad, but we might end up with Fron-end tooling.

Make your own tools. There will be less unneeded cruff.

What about contrib? Well we need to contribute back to D.O.

Measuring Up.

What markup problem?
Who maintains the project?
What's in the toolkit?
- What are the tools you want to use from toolkit.
What do I want to fiddle with?

Case Studies

OpenFramework by Standford University

James Panton - Death of a Themer

Code Enigma

Aten Design Group

Centre + Prototype. Centre is used as the scaffolding. Prototype is used actually to style.

inc
- hook bae themplate called in template.php
sass
- base, components, layours, etc
Js
- main.js, modularized Javascripts
layouts
- templates and templates overrides

Nothing will be a one-size-fits-all solution

Get your measurements.

Continous imporvement.

Push your craft forward.

Interface Face-to-face

Throughout history, sci-fi shows that we are rethinking how humans will interface with technlogy. Google is using even the vission of the future will drive their design process.

We are starting to see that we are entering interfaces, that disappear. Eg. a prosthetic limb that responds to muscular signals.

Errors in science fiction. Errors of analogs (looking at something that exists now, and extrapolating it into a future use). Error of utility. Error of scale (looking at scaling a iOS interface to a wall), error of sterility (serving the minimal design of homogeniety), error of integrity (looking at needing so many devices for different functions) and the error of context (looking at cultural context in the future is hard).

What is an interface? Speaking is an interface. Pidgin, two linguistically incompatible cultures come into contact. When a pigin stays, it becomes a creole. Old English + Old Norse + Old French = Middle English.

Human-Machine Creole. Mechanization of humans, and the humanization of machine. This interface is a translations layer.

The death of skeumorphic. Look at iOS 7 and the change lead by Johnny Ives. Flat vs. Skeumorphic.

We are learning the creol of how to interact with machines, a child might expect to be able to zoom on a TV such as if it were an iPad.

Without these sensory outputs the machine couldn't be empathtic.

Empathetic Machine must be Beautiful. Diverse. Accessible. Adaptive.

Future of UI Designers Screen designers, Aural (auditory), Gestrure, Brain UI

Code4Lib

2013-03-03T00:00:00-08:00

Notable presetnations:

ARCHITECTing ScholarSphere - Penn State University's Hydra Repository Project
De-sucking the Library User Experience - Jeremy Prevost, Northwestern University
Google Analytics, Event Tracking and Discovery Tools

Drupalize your data.

2013-01-20T00:00:00-08:00

After banging my head against the wall trying to figure out how to create content that works with all the wonderful Drupal API hooks, but doesn’t live within the Drupal database and filesystem. The Digital Repository Service at Northeastern University Libraries is a custom project with three components, an RESTful API that sends information about objects in the repository, an Apache Solr search index that allows for advanced search, and then my challenge, creating a Drupal based module to communicate between the two. The objects will need to be available for other modules and functions in the Drupal system. Sounds like a pretty reasonable goal right, well it has become a challenge. So much of the Drupal API is database driven, so creating a module that will utilize little of the database storage has become a challenge.

Why not use Islandora project?

The University Libraries team has investigated already available systems, and decided they needed greater flexibility than the Islandora modules would provide. The project is already very mature and very complex, so we couldn’t just use a small portion of the project and then extend it from there.

Sarnia

Looking for advice, I posted a discussion, “Using Drupal as a Client to External Content from a Fedora Item Repository” in the Libraries group on Durpal.org. krlucas suggested the Sarnia module to create entities based on the data available in the Solr index. I have tried many times to get a working test implementation, but continue to have issues using it. It seems like a great project, but debugging someone else’s code in a complicated mature project was not an easy task.

Now what?

I think I am just going to have to do it myself using as few contributed modules as I can. I have already started building the scaffolding of the module, but I have a long road ahead. I would like to share my experience, lessons learned and hopefully the final project, that I might be able to release onto Drupal.org / github.com .

Wish me luck!

Hello World

2013-01-13T00:00:00-08:00

This is my new site I am going to be building. I decided to migrate away from Tumblr to use a static site generator. It will be perfect for my modest blogging needs.

Why did I want to create a blog again? Oh yeah, I wanted to start talking to you about web design, coffee and craft brews.

I would like to see the history of the site as it evolves.

Digital Media Commons

2012-09-15T00:00:00-07:00

Upon starting at Northeastern University, Unversity Libraries. I quickly faced the new challenge to start building a site for the Digital Media Commons. The project was a joint venture between University Libraries and IS, as of this writting ITS. The project was a renovation of the second floor of the library to provide much needed workspace for students and resouces for digital creatives, mostly nice workstations and access to software that is usually cost restrictive. The project was well underway and almost completed by the time I walked on the job.

The project wasn't clear from when I stepped on the job. Working with a small team, primarly Thomas Urell and Annie DeVane. We faced a challenge of building the site without a clear idea of the content. Never again!

With such little time, I really had to rapidly deevev

Minuteman Classic 2012

2012-07-04T00:00:00-07:00

The Minuteman Classic is an annual LGBT softball tournament held in Boston, Massachusetts by the local Beantown Softball League. In 2012 a small budget was made available to contract work out for a redesigned website to better accommodate for their needs. The website was going to used for live score updates, event information and register for the event.

Old design

The old design was very basic and didn't provide good access on smaller screen sizes.

Responsive Design

IHCDstore

2012-06-01T00:00:00-07:00

Researched and developed a plan to move the eCommerce store for the Institute of Human Centered Design. The project had the unique challenges in that the site itself had to be accessible for all users. That contraint lead us in search for an e-commerce platform that was more accessible out of the box. After evaluating a few options we selected the Drupal ubercart distribution to build our application. Working with a small design team of Lise Capet and myself we aimed at building a new site that would be organzied around the principle of collections based on simple iconography.

Categories included: * Work * Play * Wear * Learn

Aging Professors are Creating a Faculty Bottleneck. Can we Talk Openly? Not Really!

2012-05-29T00:00:00-07:00

new-england-ada:

Recently, the Chronicle of Higher Education published a special report on the Aging Professoriate: Aging Professors are Creating a Faculty Bottleneck indicating that at some universities 1 in 3 professors are now over 60. While the aging professors are creating a faculty bottleneck, aging workers are creating a disability bottleneck across the U.S. This presents an opportunity to retain our most experienced workers.

As the overall growth of the nation’s labor force is slowing, the labor force growth in the 55 and older population is rising—a demographic group with a gradual loss of function and an incidence of disability higher than that of other working age populations. Can we talk about disability? Not Really! Older workers, even as we are losing functionality, are least likely to self-identify as a person with a disability.

Read More

A Lesson Learned in Accessibility

2012-05-11T00:00:00-07:00

Even when designing with our best intentions toward accessibility, it often takes someone who really uses accessibility software to test the site and help us get the details right. The problem is compounded when dealing with AJAX style behavior. That is exactly what happened with my jQuery FAQ example. What I thought was nicely accessible turned out to not be. This screencast walks through what I needed to do to fix it. Recorded Jan 22, 2009.

View on YouTube

The 10 Principles of inclusive web design.

2012-05-08T00:00:00-07:00

"The 10 Principles of inclusive web design," .net magazine.

Excellent article on the value of user based testing with regards to web development and ICT design. I would highly recommend reading this when you get a chance.

Minuteman Classic

2012-05-08T00:00:00-07:00

Minuteman Classic

I have been hard at work developing a new site for Beantown Softball’s Minuteman Classic.

With my free time, I have been able to try to modernize the look and feel of the website. There have been major changes and more exciting ones to come.

New England ADA Learning

2012-05-01T00:00:00-07:00

The New England ADA Center has worked on creating a new site to fit their mission to provide education and information as a knowledge transmission ceter for the New England Region.

The project invloved the help of Yale Cohen as an instructional designer and project lead. The content was manualy migrate the content to the new system. Restructure the content in to learning modules. Developed a simple theme for the system.

Media and media player accessibility was one of the greatest challenges. Using MediaElements.js was my personal preference, but the decision was made to use JWplayer.

Victory! New England ADA Center has a blog.

2012-04-11T00:00:00-07:00

Victory! New England ADA Center has a blog.

Feeling good to have a new blog for our organization’s effort to reach out to the communities we serve.

Bridge Water State Lecture

2012-04-10T00:00:00-07:00

Giving a basic lecture about how technology can enable and disable people with different disabilities. I am giving this lecture at Bridgewater State University in Massachusetts.

The contents of this slide show do not represent the thoughts or opinions of The Institute for Human Centered Design. Please pardon the logo on the bottom right not having alternative text since it is not currently possible in Keynote for OSX.

Predicted Areas of Population Grown from 2008 to 2035 in Boulder, CO.

2012-03-04T00:00:00-08:00

Made using Google Fusion Tables.

Predicted Areas of Grown in Population and Employment in Boulder, CO.

2012-03-04T00:00:00-08:00

Made with Google Fusion Tables.

My new job at the Institute for Human Centered Design.

2012-03-04T00:00:00-08:00

I have taken a long break from creating any content for my blog, but I would like to renew my effort to write and post content about myself to the blog. I am currently working and living in Boston, Massachusetts. It is quite the change from living in the San Francisco Bay Area this summer. I still miss visiting the Bay Area and can’t wait to return next week.

I am very happily employed at the Institute for Human Centered Design. I get a lot of questions about what we do as an organization. IHCD was founded shortly after the Americans with Disabilities Act was passed in 1991. We have been disability rights advocate since then. We have focused on the designed environment with the philosophy that good design should address the needs of all the users. We now house the New England ADA Center, Access to Design Professions, a full architectural studio, a store, a library and Fair Housing First project. This is just a small glimpse into the many projects that we are involved in.

Since starting last September, I have been involved in helping advise and coordinate the IT systems upgrades for the organization. I have also been given the responsibility to maintain the current website and help plan improvements with the rest of the staff. Over the last couple of months, I have been very busy with the launch of the ADA Checklist for Readily Achievable Barrier Removal website and the new learning system for the New England ADA Learning courses, which should be launching soon. I have also been given the opportunity to help coordinate the social media efforts for the New England ADA Center. Follow us at @NewEnglandADA. I am excited about the future projects that are going to be involved in and I will keep this updated.

My Foursquare Checkin History

2012-03-04T00:00:00-08:00

Land Use Zoning in Boulder, CO.

2012-03-04T00:00:00-08:00

Made with Google Fusion Tables

Harvard Art Museum

2012-03-04T00:00:00-08:00

The Harvard Art Museum. Click the Photo to view the Flickr Gallery.

Flood Plains in Boulder, CO.

2012-03-04T00:00:00-08:00

Made using Google Fusion Tables.

Bus Stop Boarding in Boulder, CO

2012-03-04T00:00:00-08:00

Made with Google Fusion Tables.

New England ADA Learning - Coming Soon

2012-03-03T00:00:00-08:00

New England ADA Learning - Coming Soon

The launch date for the new learning site is quickly approaching. It has been an excellent opportunity to be able to learn so much about the Moodle Learning Management System (LMS). The New England ADA Project is in the process of migrating the current courses to the new LMS from our own hosted sites. I am excited to announce that the project is nearly complete and should be ready in the next month.

December's Website Project

2012-03-03T00:00:00-08:00

December's Website Project

Check out this site I helped the New England ADA Center publish. It is very simple but wrote the whole thing in a simple text editor. I can’t wait to continue to grow my web design skills. It was also my first attempt at building a site with media-queries to respond to different screen sizes and for better printing.

Lifehacker: learn the basics of coding

2011-12-12T00:00:00-08:00

Learn the Basics of Coding
Adam Pash, lifehacker.com

Smartphone apps, desktop apps, and web apps are some of the best tools we have to get things done, express ourselves, and yes, sometimes have fun. You may have once thought programming was the domain of anti-social neck beards living in…

Nice resources on learning to code DIY.

ADA Checklist

2011-12-01T00:00:00-08:00

The American's with Disabilities Act, the ADA, was updated to include new guidelines for helping to create a more inclusive and non-descrimitaory nation. With this updated guidelines and regulations, many people / organizations have had questions about how these changes will effect them and their compliance with the law. The New England ADA Center has distilled the changes to a simple to use checklist. The checklist is used to evaluate buildings and facilities to see if they fit the ADA policies.

My role was to help build the website for the ADA checklist.

Book: Focus Free

2011-11-30T00:00:00-08:00

Need help finding focus in an environment of constant distractions? Check out this book. Free http://t.co/nhthzPZ5

Using Web Cartography in Urban Planning

2011-06-09T00:00:00-07:00

Using Web Cartography in Urban Planning

Check out this quick video as an overview of the results from my GIS web application using the Google Maps API family. Bravo Google by the way, it was great being able to learn so much from your detailed documentation.

Click here to play with the Proof of Concept Page.

Portfolio Scanning, Sorting and Posting.

2011-06-09T00:00:00-07:00

Portfolio Scanning, Sorting and Posting.

Over the next few weeks I will be posting some of my design work from Studio at the University of Colorado at Boulder. It is very exciting to get to go through the work and see the progress I have made over the course of my time at CU Boulder. Please check back soon. Much more to come very soon.

This was an ink on mylar drawing of a simple farm that would be placed on a site in the Boulder Library Park.

My Chattaqua

2011-06-09T00:00:00-07:00

Chattaqua Park was my place of refuge while I was in school at the University of Colorado at Boulder. It was a few minutes away from campus, but the feeling I got there was worlds apart. In our Sustainable Design siminar, we were asked to create a project about a natural environment that we felt a sense of place with. I chose to create a video on Chattaqua Park.

Click here for my written report produced for the class.

Wayfinding map of the Unversity of Colorado at Boulder

2011-06-07T00:00:00-07:00

An example of a project in Social Factors of Environmental Design where we were asked to conduct a survey and experiment on how students found their way around campus. The results were used to display this map.

User Exchange - Exploring How People in Denver, Colorado experience traveling through the City

2011-06-07T00:00:00-07:00

User Exchange: Exploring How People in Denver, Colorado experience traveling through the City.

Available in 1080p on YouTube : )

ArcGIS Map Examples: Cartography Spring 2011

2011-06-07T00:00:00-07:00

ArcGIS Map Examples: Cartography Spring 2011, a set on Flickr.

Via Flickr:
In Digital Cartography, we gained some hands-on skills using GIS software (especially ArcGIS) to create cartographic maps.

Social Issues of Smoking

2011-06-07T00:00:00-07:00

“Social Issues of Smoking” Booklet Made for Digital Design: Planning, a set on Flickr.

Via Flickr:
This set contains the photos from a project to create a booklet on an analysis of a social issue that takes place in the public spaces. It explores the issue of smoking on society and the changes in thought towards smoking.

Red Rocks Park Ecological Assessment

2011-06-07T00:00:00-07:00

As a group project, we were asked to make a ecological assessment of a local natural area near Boulder, CO. Here is a posted example of my student work, all the way back from 2008.

Put yourself out there - Going through 23GBs of my undergrad.

2011-06-07T00:00:00-07:00

23 GBs of Photos, documents and movies, scanned images and records of the last 4-years of work in school. I am posting some examples of my student work that might be relevant for a professional profile online.

Creating a web-presence is a important step for recent grads looking for careers. This means making sure what is public is safe and professional. This could mean looking though your FaceBook Privacy Settings a bit. Also this may be trying new networks that you may not have used before now.

Creating a web-presence is a great tool when networking and looking for a job, but also easier than ever before.

After graduating from the University of Colorado, Boulder and moving to the Bay Area, I am using Social Networking to help find connections and a job.

As a young grad with a background in IT Support and Admin, looking for work in the Bay Area. I have been using Twitter, LinkedIn and Tumblr to put myself out there and to also hear from companies I am interested in working for.

Twitter may be one of the best tools for recent grads and people looking for a job. It allows you to broadcast yourself to companies and what you are doing in the world, but more importantly, many companies are using twitter to announce openings. I have been slowly following companies I am interested in to get news on new position opening and what is happening in the industry.

Tumblr might be a great way for a recent graduate to give themselves a web presence. It is easy to create and maintain a professional/personal blog. I am hoping to use tumblr to post information on exciting projects I might get to work on in the future and a spot to showcase past achievements. Creating a place to maintain my writing skills is very important to me.

LinkedIn is quickly becoming the largest professional social networking site. I am sure everyone has heard about it. For me it has been really helpful to use the connections I have built up to find on finding a personal contact when I apply for a position.

Reply back if you have any other tips. I would love to hear from you.

Steven

Pepsi Refresh Grant - Northeast Elementary School

2011-06-07T00:00:00-07:00

Pepsi Refresh Grant - Northeast Elementary School on Flickr.

Via Flickr:
The school wanted to apply for the Pepsi Refresh Grant. We made this video with the help of the Northeast Elementary School PTO to start raising funds for the redevelopment of the grounds.

3D rendering of a GIS Map of the terrain around the Portland Oregon, TriMetro Area

2011-06-07T00:00:00-07:00

This video was made by Steven Bassett to show an example of a 3D rendering of a GIS Map of the terrain around the Portland Oregon, TriMetro Area.

Presentation on predicting change in Boulder, CO

2011-06-06T00:00:00-07:00

Here is a presentation on predicting where change would occur in Boulder, CO. We analyzed what areas were most likely to change significantly in the city.

Presentation to the City of Boulder - Google Maps & Earth Web Mashups for Planning

2011-06-06T00:00:00-07:00

Below is the keynote presentation I gave to the City of Boulder last May at the end of the Undergraduate Research Opportunity Grant project. The purpose was to research a web application and develop a simple proof of concept that allows use to show community information.

The City was interested in the results of the project that could be applied to a more narrow application, like a single planning project that effects the community.

Presentation on Modern Mapping Application in Urban Planning.

2011-06-06T00:00:00-07:00

At the end of my second Planning studio, we were given an independent research project. I spent a few weeks in December 2010 looking at modern mapping applications on line with an emphasis on the application to planning purposes. This project would later go on to develop into a Undergrad. Research Opportunity Grant Project during my final semester at CU Boulder.

Map: Showing areas of change in Boulder, CO

2011-06-06T00:00:00-07:00

Example of a Google FusionTable Map of the City of Boulder.

Click here.

GIS Map of Portland Area, Planning for People and their Environment

2011-06-06T00:00:00-07:00

GIS Map of Portland Area, Planning for People and their Environment on Flickr.

Bio Cities Presentation

2011-06-06T00:00:00-07:00

A case study on Curitiba, Brazil and the amazing planning efforts they have put into their commitment to society, environment and the quality of life. Please check out the TransMilinio Bus Rapid Transit system.

Using ArcScene to Render 3D Terrain - Portland, OR

2011-05-14T00:00:00-07:00

Google Fusion Tables - make powerful maps quickly

2011-05-05T00:00:00-07:00

Done making a map using Google Fusion Tables - Boulder’s Zoning Codes

Many commercial mapping services offer an easy to use interface that allows cartographers to display their GIS data, but until recently you were only able to process the data on the standard ArcGIS desktop application, or another GIS application. It is exciting to see that cloud-based databases could provide a place of agencies and communities to contribute data and build geospatial information.
Here is an example of a zoning map that was created and styles within Google Fusion Tables.

Google Fusion Tables - make powerful maps quickly

2011-05-05T00:00:00-07:00

Done making a map using Google Fusion Tables - Boulder’s Zoning Codes

Almost done with Catography

2011-04-10T00:00:00-07:00

Almost done with Cartography, it is pretty cool to see how far we have ome in producing maps in this class. I would love to continue learning more about GIS.