May 30, 2014 - Comments Off on Configuring Sunspot Solr Search Controller

Configuring Sunspot Solr Search Controller

Search is the compass of the internet. It guides us to the content that we are really looking for and helps avoid the stuff we don’t really care about. Or at least that’s how it is supposed to work. It turns out that beyond just the complexity of installing and configuring a search server, it can also be difficult to account for the various use cases of your search tool. Lets take a quick look at how The Mechanism engineers were able to tackle this challenge when building a restaurant search application for SafeFARE.

The good folks at foodallergy.org enlisted our services to build a restaurant search sushi near me that will allow users to find allergy-aware restaurants based on any combination of 9 criteria. Using the Ruby on Rails framework and Sunspot Solr (a Ruby DSL for the Lucene Apache Solr search server) we built this search app, and learned a few things on the way.

If a user searches for restaurants in a ZIP code should we only return restaurants within that ZIP code, or should we include restaurants from other nearby ZIP codes in our search results? And if we include other ZIP codes, how many other ZIP codes? How should we order the results? These and other similar questions helped up to come up with the structure of our search controller.

Figure 1.1

if params[:search].present?

@search = Restaurant.solr_search do

fulltext params[:restaurant_name] # runs a full text search of

with(:approved, :true) #facets approved restaurants

if params[:cuisine_search].present? #user also entered cuisine preference

any_of do

params[:cuisine_search].each do |tag|

with(:cuisines_name, tag) # facet by matching cuisines

end

end

end

if params[:address].present? || params[:city_search].present? || params[:state_search].present? || params[:zip_search].present?

#if any location fields are present, geocode that location

with(:location).in_radius(*Geocoder.coordinates(whereat), howfar)

#facet based on user given location,

end

order_by_geodist(:location,request.location.latitude,request.location.longitude)

@restaurants = @search.results

end

 

It took us about a week but we were finally able to come up with enough if statements to cover every one of the 362,880 possible combinations of search queries. Figure 1.1 is a small sampling of how we implement search when a user types in a restaurant name, cuisine preference, and restaurant location. First we search the solr index for whatever the user enters in the restaurant_name field, then cut that list down to only the approved restaurants, then we check to see if the user also entered a cuisine preference, if so we facet our list down to restaurants that match that cuisine, if the user did not enter a cuisine, we skip that step, then we check if the user entered a location that they would like to search like a city, or state, and we facet our list down to only restaurant’s in that area. Using this strategy we can create sort of a Venn diagram that allows us to drill down only to the information that we want, and point that result to the restaurant variable. To increase the functionality of the site, The Mechanism engineers implemented an IP lookup to automatically detect the IP address and location of the user, and order search results by how close the restaurant is to the user.

A second major challenge that many developers face when using a search server is deployment. In order to use solr in a production environment, you will need a Java app servlet like Tomcat or Jetty, and you will need an instance of Apache Solr. Developers may consider installing standalone versions of Tomcat and Solr Sunspot depending on their hardware capabilities, but sunspot comes bundled with a Jetty server which can be used in production by running the command RAILS_ENV=production rake sunspot:solr:start

And voila! we have implemented an advanced search tool that will help users find allergy-aware restaurants all across the nation and may even save somebody’s life one day.

Published by: Sharon Terry in The Programming Mechanism
Tags: , ,

May 28, 2014 - Comments Off on DANCING TO YOUR BRAND – How the Pet Shop Boys got me thinking about responsive design.

DANCING TO YOUR BRAND – How the Pet Shop Boys got me thinking about responsive design.

image copy

A few weeks ago, I took a trip back to the 90's by heading down to Terminal 5 for the Pet Shop Boys concert. The British electro-pop duo actually hit it big in the mid-1980's and have never stopped working, but I remember dancing all-out to their club sounds in the early 1990's.

This show was the last stop of their world tour and I had asked several friends to go with me… months in advance. Mood- pretty darn excited by my choice.

As the concert date drew closer, I wondered - will the Pet Shop Boys still feel relevant? Sure I think their music is great, but then I worried, will this be a memorable "experience" for all? or will it feel dated, quirky, and somewhat nostalgic.

Either way I thought this will reflect on me. I know we all worry when we are throwing down big bucks for a concert and coercing friends to go. YOU become the host and you are somehow responsible for everyone enjoying the event. Your mouth is saying "come on... it will be great!", while your brain is whispering - "it had better be since you bought 8-pricey tickets to this shin-dig"!.

Well I have to say the show was amazing. Neil Tennant, and Chris Lowe are still a perfect blend of electro-pop craftsmanship and really interesting performance art. A funky spacious club in New York City was the perfect venue to share the experience. And we really did "share" the experience. All around me people were holding up their Smartphones (which was not broken like mine) - taking pics, recording video (see photo above - I took that one at the show) - and thank goodness, since half the time I couldn't see the stage - I could however see it on the phone of the tall person in front of me - revelers were Tweeting, Tumbling, Pinning and sharing the experience in real time.

Which got me to thinking ...

Not that long ago people went to concerts and went nutty. We danced, sang, and sweated and told our friends about it the next day. "You should have seen Blink-182 last night man, it was insane!" (I went mid-2000's here to illustrate my point...remember the first release of the iPhone was June 2007 - and all of the realtime sharing came in the following years).

So my thought. Technology moves faster than a one-hit-wonder drops in the charts.

Right now, We are a culture in motion.

Everyone participates in the moment equally in realtime. Snaps and videos of your experience are up online before you leave the parking lot.

My question to friends, clients, and potential clients is this.... are people dancing to your brand? Or is your website a Wallflower? (Yes I know another great band from the past).

Internet browsing from smartphones and tablets grew 35% from Q4 2012 to Q4 2013. Simply put - Almost a third of global Internet traffic to North American web sites—31.3%—in the fourth quarter of 2013, came from smartphones and tablets, according to marketing and public relations firm Walker Sands Communications’.

According to Mill and Brown Research, per day Americans spend -147 minutes on mobile phones, 113 minutes viewing television, and only 108 minutes on their PC. easy to see who is winning the race here. We use a lot of mobile apps all the time. This can be a great tool to develop your business. Learn more at Sandcastle-Web.com and get the most from your mobile app.

Now ask yourself - How does your company's website hold up when you hold your phone up? How are people accessing your website? Is it a satisfying user experience?

In the same way I thought about my friends judging me based on a concert experience… I wonder, how are your clients judging your brand based on the mobile experience your website provides? Does your site feel relevant? Is it satisfying and engaging? Is your mobile web experience worth sharing and talking about? Or does it feel dated, quirky, and somewhat nostalgic?

The Mechanism has been a pioneer of Responsive Design from its earliest days.

Check out our own site right now on your smartphone or tablet.

Functional design and a pleasing user interface, these are the things that excite me as a designer, creator and a user.

Note how our site reconfigures gracefully to maintain large action buttons, and behold - text that remains readable. Fluid grids and flexible images are the cornerstone to a satisfying user experience. Other benefits include interactive calls to action such as one-tap to dial a phone number within your site, one-tap to email or interact with your site.

Just imagine... all you Non-Profit organizations out there, this could mean the difference between an immediate digital donation or a delayed action that is never acted upon.

The opportunity for your clients to take immediate action is in the palm of their hands.

I could go on however, I would rather invite you to join in a conversation.

The Mechanism's first of this seasons in-house conversations on best practices for your digital brand experience will kick off on Friday, June 13th, at 8:30 am at our place.

We will be featuring an intimate chat with our Founder and Executive Director Dave Fletcher about True Responsive Design and your brand experience.

We have limited seating and coffee. If you would like to join us please register by clicking here!

Can't attend? Just contact me directly to chat - 212-221-3444 x-102

Best,

Michael

 

May 27, 2014 - Comments Off on R.I.P. Massimo Vignelli

R.I.P. Massimo Vignelli

massimo

A designer has just left us with an amazing legacy of creativity and clarity. The great Massimo Vignelli (January 10, 1931 – May 27, 2014) has died at the age of 83.

The life of a designer is a life of fight. Fight against the ugliness. Just like a doctor fights against disease. For us, the visual disease is what we have around, and what we try to do is cure it somehow with design. – Massimo Vignelli

A massively influential designer and one of the last true great creative thinkers, I had the good fortune to have a brief correspondence with Mr. Vignelli back in 2002. I was putting together a presentation entitled "Good Examples of Bad Design", to be delivered at the HOW Design Conference in Orlando. He reached out to me, presumably out of curiosity and delight in the subject matter. He told me quite simply, that he was looking forward to my presentation. It meant the world to me and I've cherished this memory even as the archived bits of the conversation have faded from my hard drive.

Michael Bierut from Pentagram produced a short video about Massimo's approach to book design. In a world that is quickly becoming digital, it's worth watching to learn (and hear) a few insights from one of the masters. The creative world was a much better place with him in it.

Massimo Vignelli Makes Books from Pentagram on Vimeo.

Also, to catch up on the legacy of Mr. Vignelli - check out this link.

Published by: davefletcher in The Design Mechanism
Tags: , ,

May 16, 2014 - Comments Off on What We Talk About When We Talk About Testing

What We Talk About When We Talk About Testing

Until recently I considered writing tests for my applications much like reading Dickens in high school: boring, repetitive, hard to understand, and yet for some reason a total necessity.  What's more, I wrote tests about as frequently as I read Dickens - and I've never read any Dickens.  My meandering point here is that Test Driven Development (TDD) seems to be the standard of the rails community, yet I don't know a single person who actually does it.  With that it mind, I decided to develop our last client's application with tests written to the best of my ability.  At first I thought I was burying my productivity in the minutia of each test, but I ended up learning quite a few things, including the value of testing.

Tools

I guess the first thing to do here is to describe my tools.  To test with Rails I used RSPEC, Factory Girl, and Capybara.

RSpec is a testing tool for Ruby.  Baked into the gem is a rich command line program with detailed error reporting. The beauty of Ruby, and RSpec, is that it enables you to write human readable tests that tell a story. For instance:

it 'has a list of employees' do

employee = Employee.new('John', 'Smith')

company = Company.new([student])

expect(company.employees).to include(student)

end

 

Though testing with RSPEC ensures that our models behave the way we expect, there is a serious problem with this approach: It takes forever. Testing any sort of interesting behavior not only involves extensive amounts of setup to your environment, but a tremendous amount of code to create various instances of your model. This is where Factory Girl comes in.  Factory Girl allows a tester to create factories that create multiple records for a model with some generic attributes that are able to be overridden as needed.  This means that creating a unique record is as simple as:

FactoryGirl.create(:employee, name: "Jon Snow").

My last tool in my little testing toolkit is Capybara. Where RSpec is a way to test your models, Capybara allows your application to test external behavior. In other words Capybara provides a simple way to test user stories and general behavior. Heres an example:

'When I sign in' do

visit user_sign_up_path

fill_in 'Login', :with => 'DavidBowie@spidersfrommars.net'

fill_in 'Password', :with => 'whereWereTheSpiders?'

click_link 'Sign in'

end

 

 

So What's The Point

When I started, I assumed that testing would help to prevent bugs. While this is likely the case, I found that using TDD did something far more valuable. By letting tests to drive the code, developers are forced to conceptualize their application before a single semi-colon is ever written. This forces developers to step through their own logic, which in my case, is full of inconsistencies and little things that I had not thought through fully...likely because I have never read Dickens.

Published by: dhruvmehrotra in The Programming Mechanism
Tags: , , ,

May 9, 2014 - Comments Off on The MechCast 302: Internet Privacy

The MechCast 302: Internet Privacy

002_internet_privacy_blog_img

On this episode of The MechCast, Michael (our host), Tope, Dhruv, George, Dave, & Joe discuss privacy on the internet, how safe we really are while surfing the web, and how we as individuals feel about our own digital footprint.

Related Links:

Music:

Published by: antonioortiz in The Mechcast
Tags: , , ,

May 8, 2014 - Comments Off on An Event Apart • Boston • 2014

An Event Apart • Boston • 2014

Here are some thoughts on talks at the recent An Event Apart, in Boston.

Understanding Web Design - Jeffrey Zeldman

  • Web Design is held to the expectations of other media. Often ignoring the intrinsic strengths of web
  • Like typography, web design's primary focus is communicating content
  • Technology is often a hangup for people, when the user and their needs should be the primary focus of designers. "Design for people, not browsers!"
  • Design is about detail
  • A great website will subtly guide the user to their desired destination

Designing Using Data - Sarah Parmenter

  • Design is no longer a differentiator. Making things look nice is common. The differentiator today is designing with purpose — answer the question 'why?'
  • When the right metrics are studied, data offers objective and actionable feedback
  • Data should allow a team to unite behind an objective goal — such as: Increase clicks etc.
  • Customer facing advertising is most effective when honest and transparent
  • Iterative design allows you to be flexible and try new things

Responsive Design is Still Hard/Easy! Be Afraid/Don't Worry! - Dan Mall

  • Frameworks rather than processes, mean you define a set of constraints within which a project exists, and within this you find out what you can do that's unexpected
  • Be active within your framework and volunteer/get involved with stages of production outside of your discipline
  • Each member of a team will have divergent perspectives at the start of each project cycle, they should become convergent by the end. These are focal points
  • Rinse and repeat the cycle, getting smaller each time to increase team involvement
  • Extensive preparation should make the assembly part of the process the shortest

Screen Time - Luke Wroblewski

  • Mobile is the dominant web browser worldwide
  • Responsive design includes additional considerations than just screen size (multiple input types, variable ambient lighting etc)
  • Screen size is a poor proxy for many of these considerations (screen size does not reveal input type)
  • A user's posture or distance from device will also affect it's design, independent of screen size or number of pixels
  • Design for human proportions, not pixels.

Content/Communication - Kristina Halvorson

5 key points for working with a client:

  • Principles: these are internal motivators based on our better intentions. They can unify a team
  • Strategy: pinpoint your goals and provide helpful constraints with which to execute
  • Process: the process is not God, it should change and grow as needs change. Regular post mortems are encouraged
  • Roles: RACI key for each agent on the client end. Responsible. Accountable. Consulted. Informed
  • Perceptions: Translate to facilitate communication between different disciplines

UX Strategy Means Business - Jared Spool

  • Design is the rendering of intent. Both user and provider
  • Content delivery is as important as the content itself and vice versa. Great UX cannot exist without great content
  • Advertising is unhelpful for all parties involved
  • Strategic priorities in business can inform design considerations (increase revenue, reduce cost etc)
  • There are a variety of models for monetizing the web

The Long Web - Jeremy Keith

  • HTML allows for fantastic accessibility, deprecation and backward compatibility
  • New HTML specifications can be adopted early as they will be skipped over when unsupported
  • Progressive enhancement means you start with the lowest common denominator and then enhance as much as you like
  • Progressive enhancement protects the experience from unaccountable errors such as unrelated javascript errors
  • Text formats will last longer than binaries. Binaries are forever changing and becoming outdated

Responsive Design Performance Budget - Paul Irish

  • Mobile users expect their content to load faster than the desktop
  • Web growing is latency limited. The nature of requesting many small files means that a user's experience is improved by reducing the number requests
  • UX can be greatly enhanced by prioritizing critical data and rendering early on
  • Separate the critical CSS from non-critical. Load non-critical at the end of the page. Aim for main content to load in 1 sec (< 14kb)
  • The number of higher latency users is increasing

The Chroma Zone: Engineering Color on the Web - Lea Verou

  • Colors in web browsers have many nuances and limitations
  • Hex and RGB are poor representations for human reading
  • HSL and HSLa are better although they are not perceptually uniform (we perceive 50% yellow as much lighter than 50% blue)
  • New color properties in CSS level 4 will make color coding more human readable (HWB = Hue Whiteness Blackness)
  • There is room for much more improvement in web colors

Mind the Gap: Designing in the Space Between Devices - Josh Clark

  • Designing for the space between screens. Not content but tasks. Verbs not nouns
  • The technology is available today, we just haven't imagined the possibilities yet
  • Interfacing with machine is likely not going to change much (touch and mouse are great interfaces)
  • Physical things are beginning to have digital representations (avatars)
  • How about affecting how we interface with physical world and communicating that to our devices.
  • Software makes hardware scale, The endless possibilities

Web+: Can the Web Win the War Against Native Without Losing its Soul? - Bruce Lawson

  • Web technology has inherent strengths, despite the popularity of native apps
  • Web tech should not try to replicate — though it can learn from native. Build to the strengths of web
  • Progressive enhancement and interoperability make web accessible and global. Always accessible by everyone
  • Widgets failed as they were a poor imitation of native apps. They existed as a snapshot without the ability to update
  • W3C is built for accessibility and interoperability. This means that it is designed for low level functions. Can be complicated but powerful

How to Champion Ideas Back at Work - Scott Berkun

  • Great things are achieved in difficult circumstances
  • Success and acclaim only arrive once a project is complete
  • Charm and convincing people of your ideas is important!
  • A network increases your potential. Reach out and get advice to harness that potential
  • To enact change, start small with something you can excel at and expand from there

May 2, 2014 - Comments Off on Never Hear Them Coming

Never Hear Them Coming

electric-car

Small wins.

The Danish Energy Agency allocated EUR 4 million for public and private electric car projects. This will bring 1500 new electric cars to the streets of Denmark in 2014. With about 6 million people, they are approximately 1.5% the population of the US.

Bhutan, the Himalayan kingdom of 700,000 people, measures progress by the gross national happiness index. They also export 72% of their electricity. Nissan is helping them to build a complex infrastructure for charging their whisper-quiet Leaf electric and diesel cars you can easily repair with parts from local diesel engine core buyers  when need.

Electric cars are so smooth, nimble and silent – you don't even hear them coming.

In the United States, we have oil lobbyists fighting against the existence of electric cars to their last breath, all part of our historically vaudevillian political system where money and power are sadly trumping progress. Getting these jackals to finally back off enough to even allow rational conversations about electric cars will require such a widespread public demonization of oil, that cowboys will have to kneel before the masses and swear that Texas tea is really made from fresh butterfly milk.

Remember, the United States (and arguably Canada and South Africa) has Elon Musk, the baddest-ass electric car maker in the world, headquartered right in Palo Alto. A ruthless innovator, rocket launcher and inventor like this hasn't been seen since "The Great and Powerful Jobs". And what do the bureaucrats do to Musk through lobbyists and political baboonery? They tar, feather and shit on him. He'll eventually take his magic ball and teleport to another playground. But, we're too busy punching the nerd in the face to notice that we're actually slugging an invincible warlock.

And such is our system. Obese and overwrought with so much rotten sausage that if we keep it up, we are likely to fall behind even the developing world in a generation or two. By the time we pluck our heads out of our own posteriors and realize that politics ain't reality tv, it'll be too late.

Charging equipment for PEVs is classified by the rate at which the batteries are charged. Charging times vary based on how depleted the battery is, how much energy it holds, the type of battery, and the type of charging equipment (e.g., charging level and power output). The charging time can range from less than 20 minutes to 20 hours or more, depending on these factors. Charging the growing number of PEVs in use requires a robust network of stations for both consumers and fleets. Learn more about ecologic infrastructure from Sinisi Solutions.

To get electricity you have to start with an alpha particle.

You want electric cars? You might have to travel to tiny Norway. In March 2014, Norway became the first country where over one in every 100 registered passenger cars is plug-in electric. Among the existing government incentives, all-electric cars are exempt in Norway from all non-recurring vehicle fees (including purchase taxes - which are extremely high for ordinary cars), and 25% VAT on purchase, together making a whisper-quiet electric car purchase price competitive with conventional cars. Take that oil lobbyists...

You want your government out of net neutrality? You might have to go to smart, little Brazil for internet freedom. Remember, when you disrupt the flow of free ideas by allowing money to clog the pipes, you'll have such a backlog of slime that you'll need to hire Godzilla the plumber to clean them out. And as we all know, Godzilla makes a big mess.

when you disrupt the flow of free ideas by allowing money to clog the pipes, you'll have such a backlog of slime that you'll need to hire Godzilla the plumber to clean them out.

It's also why a small agency wins. Small is nimble. Nimble is smart. Smart is quick. And assuming the person at the top of a small agency is open minded and searching for a future not caught in the past, then the possibilities are endless.

Made in NYC? Yea, I've heard of it - The Mechanism helped to write that book for the past 13 years. We're nimble, speed-hungry, cockroaches, nestled in the bowels of New York City. We're surviving, and we're whisper-quiet.

And you know what? You never hear us coming either.

April 29, 2014 - Comments Off on Meeting Milton

Meeting Milton

Meeting Milton art R2sAt the end 2013..... before this final season of Mad Men was in the can, I had the unexpected and most extraordinary opportunity to MEET Milton Glaser. Not only to meet the demiurge of 20th-century eclecticism in communications design, but to actually hang out in his studio space and chat with the man. This is that same comfortable and time-worn space in which Mr. Glaser has, for over 40 years, created some of the most memorable and thoughtful artwork, poster design, identity programs, campaigns and so much more.

His clients, those seeking meaning in their marketing efforts, comprise a diverse range of enterprise from film, music, theater and publishing, to cultural, civic and institutional entities. They came to Mister Glaser for something remarkable, some insight that would flick on a light switch for almost everyone who encountered his work.

Do I sound like a giddy schoolboy? That's fine. I came for the same thing. Something remarkable. Some insight that would reaffirm why we designers love to create.

I graduated from my design program during the mid-1980's when Milton already had attained mythological status. This was the era when post-modernism and deconstructionist sensibilities were part of a standard discourse. The notion of articulating expressions of the hand-drawn could instill value and meaning by adding a layer of subtext to anything from an annual report to a poster about AIDS awareness.

I have to wonder, as I work in a predominantly digital realm, are we still as invested in the subtext of meaning in crafting a deeper message? A deeper experience? Can we be digital and deep?

And so I had an audience with someone who in my book, may as well be the 5th Beatle. Or perhaps a better analogy would be....the Gautama Buddha of creative thinking and brand design.

As I walked across 32nd Street, my hands were clammy and my heart raced. I rehearsed one or two of what I thought where intelligent observations or questions about Mr. Glaser's place in design history.  But how did I even get here? Who am I to have this opportunity? The afternoon was orchestrated by a former teaching colleague of mine. I had taught at the SUNY College at Buffalo NY for some ten years before I came to NYC To be a Mad Man once again. I sort of strong-armed my way into the event when I heard Milton Glaser had agreed to chat with a small group of students. And so here I was a crass commercial digital Mad Man, posing as an intellectual once again. Hoping no one will notice that I was torn, as most of us are, between both meaning and money.

Walking up to the building, I was delighted by the thoughtful phrase etched in the glass transom above the outside front door. "Art is work". A simple true statement.  This was going to be good.

We waited for Milton in an area that felt like the small kitchen in an old grade school. The afternoon's autumnal sunlight warming the yellow wood trim on the window sills. Artifacts of Milton's tremendously productive career on the shelving all around the room.

There was a large wooden dinner table from the 1960's with not enough seats around it for the nine of us, and so I chose to stand. While we waited some twenty minutes for Milton to join us, the other professors and the small group of college students chatted excitedly and rehearsed their questions with each other. I, the self-invited interloper, remained on the quiet side, rehearsing my little question in my head. Partly because I wanted to get it right, partly because I didn't want to share my thoughts ahead of time. I preferred to sound cool and casual.

And so Milton joined us. He beams kindness and understanding as he sits at the head of this well-worn table. "What can I possibly do for you all today"?  The question was directed at me. I realized I was mistaken as the leader since I was the only one standing in the group. I had to explain that Professor Pete Bella had put this together and these were his students. I was simply too far away from the closest chair when the music stopped, and so here I stood.

The first thing one notices as he speaks, is that Milton is extremely articulate and thereby quite economic in his use of words. There is not one syllable wasted on trifle and I imagine each of us around the table was thinking "I wish I were more like that - thoughtful and direct". I realized that he says so much with imagery and artistry in his daily life, that his understanding of those things around us and those things we are talking about, comes from a deeper reflection on life that is constant like a Zen Master. That his internal perspective is well considered, calm, and calming.

We were poised and ready.  Professor Bella asked Mr. Glaser to share with us what he thought the future held for young designers. I asked my well rehearsed "off the cuff" question, about his push against the cool aesthetics of Mid-Century Modernism by introducing a New Eclecticism that infused humor and ornamentation into the culture of corporate design.

What we got instead was a lovely story. 
Milton shared something that he saw on PBS the night before. (Suck-up that I am, I happened to have seen much of this show as well, and so I locked eyes with my buddy Milton and added my small comments of agreement- desperate to be liked by the man).

The story was about a blind horse and a goat. They had a most unlikely and loving relationship wherein the goat would take the Horse's rope-tether in his mouth every morning and lead the horse to both food and water. They sat in the sun together. They communicated.  When the horse eventually died, he was buried under a tree on the hillside where the goat and horse spent much of their time. After the horses passing, that goat would walk alone everyday, all the way to the spot where the horse was buried and just sit there.... all day.

It is a beautiful story I have shortened here. Milton shared that with us....and as he finished he held his right hand over his heart. He paused, filled with the love and meaning of that relationship. He was overwhelmed. He smiled a slow smile and gave us time to share that feeling.

We all took in that moment. Whether you had seen the PBS show or not, everyone in that room was moved.  In that short opening Milton conveyed so much meaning and clarity without being didactic or obvious. That is his gift. Milton Glaser has an ability to design, create, and communicate, while maintaining the human in humanity.

We did eventually speak more directly about design process and its place in our culture. Milton was also very clear about his distaste for advertising and marketing as a pure form of propaganda. He was adamantly against using our powers to persuade the unsuspecting individual to purchase things they don't need. To manufacture desire where there was none. He spoke of the political ramifications of the power of good design.  Advertising, whose job was to sell dreams and create desire can be used for good...or for profit....or possibly both.

I know it sounds obvious, but as we basked in that radiant intellect, we realized that we each have the power to speak to the human condition.

As I left that day, saying good-bye to my good friends, Professors Stan Friesen and Pete Bella, and my new friend Milton Glaser, I was still giddy. I carry that with me everyday. (that and a selfie of me n Milton) - And I thank Milton for the conscious appreciation and new energy.

I can say with confidence that everything is OK in the design world. 
Horses and Goats not only get along, but live and love in harmony.

And YES it is OK to feel deeply and design digitally.

Published by: michaelanthony in Non-Profits, The Design Mechanism
Tags:

April 29, 2014 - Comments Off on The MechCast 301: How Do You Define Productive?

The MechCast 301: How Do You Define Productive?

001_productivity

After a long deadline-mandated hiatus The MechCast returns with a promised discussion on productivity. We begin by introducing new members of our growing team and then get into a passionate discussion on how we each define being productive and in turn productivity. We then talk about the tools and inspirations of our productivity.

Related Links:

Music:

Published by: antonioortiz in The Mechcast
Tags: , ,

April 18, 2014 - Comments Off on Lightweight Drag and Drop for iOS with CSS3 Translate

Lightweight Drag and Drop for iOS with CSS3 Translate

This post explores issues we experienced with a recent project, involving jQuery UI’s draggables and how we solved it using CSS3 translate and javascript touch events.

In the midst of full production, we discovered an issue with iPad handling the combination of jQuery UI “draggables” and high quality images (for using jQuery UI with iPad touch events).

As production had already begun, we needed a shim to would work alongside what was already built, and replace the jQuery UI functionality on iOS devices.

We performed tests, sectioning off the drag and drops from the rest of the project and realized that, even one large background image severely affected the performance of the dragging animation on iOS devices. Scale that up to a production size eLearning platform and we suffered serious memory bleeds, causing Mobile Safari to crash instantly.

We googled far and wide but could find no solution. (HTML5 drag and drop would not fit the bill as it would require rebuilding everything we had done so far.)

And so we resolved to build a jQuery plugin and were pleasantly surprised to discover this undertaking was much simpler than first anticipated. Not only that, but our solution meant that, aside from changing the script which controlled these activities, we did not have to change any of the markup already written for dozens of pages.

Development

This blog post was a great jumping off point, it had done much of the hard work for us, showing us how to tie a touch event to a moving element. Despite being a great resource, the script animates with the “top” and “left” properties. While these work on all platforms, they use a lot of CPU power, too much for the poor iPad. And so we updated the code to use CSS3 translate. This change was light and day. iOS webkit hardware accelerates CSS translates through the GPU and the performance improvement was significant.

Next we needed to add functionality to drop a “draggable” inside a “droppable”. This was done in two steps. First we added an initialization for “droppable” elements which would calculate the coordinates of the “droppable” and store these values in the data attribute of that element. Next we added an event handler for dropping an element, which finds if the last touch event occurred inside the bounds of a “droppable”. If this is the case, then we translate the “draggable” to sit on top of the “droppable”.

Along the way we added certain functionality specific to our project such as populating an object named “dragInput”, which contains the placement of any dragged items and can then be compared against another object which holds the correct matches for a quiz style drag and drop activity.

Conclusion

Since integrating this into our project, I have tried to extend the plugin by adding mouse event listeners. There are limitations, such as dropping an element when the mouse escapes the bounds, despite the ‘mousedown’ event still being active. I have seen this behavior elsewhere. jQuery UI must use event listeners on the window to make up for this deficiency. Although I bemoan jQuery UI’s use of pre-CSS3 techniques, having tried to replicate the functionality with mouse events, I appreciate the depth of their project. The touch events were comparatively robust and behaved as expected.

CSS transforms are very powerful and although confusing at first glance, they give web developers exciting possibilities for creating native like experiences within browsers. By using transforms, our drag activities went from crashing the iPad to outperforming jQuery UI draggables on a desktop.

I hope this post proves helpful and I will continue to develop the plugin, as time and persistence permit.

Check out the github here.

Published by: georgebrassey in The Programming Mechanism
Tags: ,