Mar 8 2013

SXSW 2013: Extreme GPS: Limits of Security & Precision

Todd Humphreys
Assistant Professor
The University of Texas at Austin

Presentation Description

GPS has its limits. My students and I at the University of Texas Radionavigation Lab work to find them. For 20 years, GPS was so reliable it became navigation and timing crack for engineers. We all got addicted. We put it in our phones, planes, power grid, comms networks. But there are limits.

My students and I bought an $80k helicopter drone a few months back and pushed its embedded GPS receiver to the extreme. Turns out, you can hijack one of these drones by perfectly aligning fake GPS signals with the real ones. And you can do it from miles away. We grabbed the world’s attention at White Sands in June. Our demo has changed the national conversation about integrating civil drones into the national airspace.

We want to probe the extremes again, only this time in precision. Surveyors already have hyper-precise GPS; we want to show how this can be commoditized, put in your cell phone, overlaid on the world. We want hyper-precise augmented reality.

Presentation Notes

On May2, 2000 President Clinton ordered that all GPS be changed from their accuracy of a football field, to what it is now.

GPS Jammers are an option you can use to prevent people from tracking you, since nowadays you can easily create and slap a tiny GPS on anyone or anything. These however are illegal to use a GPS Jammer (to turn it on), but not illegal to own one, or build one. These take about as much power as a 30 watt light bulb.

Texas has sensors to determine if people are using jammers on major bus routes. Strangely, they see about 5 different people per day using jammers driving through Texas. Sometimes jammers are used by people smuggling illegal drugs or items.

On December 4th, 2011 a missing drone was reported. Later it was found, in a gymnasium, in Iraq. So what happened? One of the engineers who produced the attack on the drone said it was an electronic attack to spoof it into thinking it was somewhere else.

GPS Spoofers don’t just jam GPS signals, but they spoof them into thinking they are somewhere else. It’s possible to do, as the Government decided to not encrypt or sign GPS packets, and they are fully open.

Todd and his team of students got the go-ahead from the National Homeland Security to test and implement a GPS Spoofer to take over the GPS coordinates of where a UAV thinks it is at. However, the NHS did not provide the UAV so they had to get funds to buy a used $80K UAV helicopter. They were able to do this, and overtake the UAV. Without permission from the NHS this would have been illegal otherwise. They now have a contract with the US Government to work on implementing “spoof-proof” specifications for any UAV over 18lbs.

Augmented Reality

Augmented Reality has a good concept, but they all require some sort of labels on an object for it to actually work. Even the Google Glass just slaps layers on your real life, and doesn’t meet these requirements:

  • A true 3D immersive experience
  • Virtual 3D elements that look and behave like real elements
  • Absolute cm-level registrations
  • Global reach, outdoors and indoors
  • Available soon

Handheld is fine; wearable is harder to implement and socially awkward anyhow. If someone looks at their watch while talking to you, you assume the conversation is about over. We recognize that the sensor suite in existing smartphones and tablets may be inadequate.

Carrier-Phase Differential GPS Positioning: Allows you to get down to distances by centimeter, or even millimeter if you’re close enough.

PTAM: allows you to determine distance, and position, on a grid system very accurately without GPS. This is locally defined, and not natively shared.


Mar 13 2012

SXSW 2012: JavaScript Performance MythBusters (via JSPerf)

Chris Joel
CloudFlare, Developer

John David Dalton
Uxebu, JavaScript Developer

Kyle Simpson
Getify Solutions, Owner

Lindsey Simon
Twist, Developer

Presentation Description

JavaScript is everywhere from mobile phones and tablets to e-readers and TVs. With such a wide range of supported environments developers are often looking for an easy way to compare the performance between
snippets, browsers, and devices. jsPerf.com, a site for community driven JavaScript benchmarks, was created to help devs do just that.

Join Mathias Bynens and John-David Dalton from jsPerf.com, Chris Joel from Cloudflare.com and Lindsey Simon from Google/Browserscope in this panel discussion on some of the best dev-created benchmarks and most interesting practices debunked by real-world tests.

Presentation Notes

Browserscope and jsPerf

Open-source, community-driven project for profiling browsers. Really good at helping inform developers by providing number crunching and actual data. The whole idea is that anyone can reproduce results with any type of hardware (crowdsourcing).

Explicit Goals:

  • Foster innovation by tracking functionality
  • Push browser innovation, uncover regressions
  • Historical resource for web developers

Myths

  1. Your for loops suck: rewrite all your code and use: while –i BUSTED
  2. Double your localStorage read performances in Chrome by getting by index. TRUE
  3. The arguments object should be avoided. BUSTED (but isn’t as good in Opera)
  4. Frameworks (like jQuery) are always better at managing performance than you are, so just use what they provide. BUSTED
  5. Converting a NodeList to an array is expensive, so you shouldn’t do it. For instance document.getElementsByTagName() returns a NodeList, not an array, and then iterating over it compared to an array after taking the performance hit of converting it. BUSTED (also see: Static node list, which is closer to a performance with an array)
  6. Script concatenation and/or <script defer> is all you need to load JS performantly (aka “Issue 28“). POSSIBLY. The average website has over 300K of JavaScript. The best thing to do with your JavaScript is to concatenate all your files, but then split them into about 100K sizes. This highly increases the speed at which your browser can download if you’re downloading these in parallel. Also, chunking up your code into pieces where you separate never-changing javascript with frequent you will help with browser caching. Lazy loading (pulling in the important file first and them the others).
  7. Eval is evil, it’s too slow and quirky to be considered useful. BUSTED The performance is pretty much equal with all benchmarks.
  8. Regular expressions are slow and should be replaced with simple string method calls using indexOf(). BUSTED Engines are getting faster now with RegEx.
  9. OO API abstraction means you never have to worry about the details (including the performance). BUSTED Your API design matters more than it just being OO.
  10. Type torsion (===) takes more processing power than a regular comparison (==). BUSTED There is a difference, but it’s so tiny you shouldn’t be concerned.
  11. Caching “nested property lookup” or “prototype chain lookup” helps (or hurts) performance BUSTED In most cases the browser engine already makes the cache, and this wont matter at all
  12. Operations which require an implicit primitive-to-object cast/conversion will be slower BUSTED For instance, when converting a number to a toString() or toNumber() it doesn’t affect performance
  13. Scope chain lookups are expensive BUSTED
  14. Use switch statements instead of if/else if for better performance. POSSIBLY. In most cases this is true, except in Safari and Mobile Safari. The panel recommended to just use what you need.
  15. Use native methods for better performance. BUSTED

Mar 13 2012

SXSW 2012: DIY Mobile Usability Testing

Belen Barros Pena
Open Source Technology Center (Intel), Interaction Designer

Bernard Tyers
Nokia Siemens Networks, Packet Core Engineer

Presentation Description

Usability testing is an interaction designer’s bread and butter, but applying it to the study of mobile applications and websites brings considerable challenges. Which device should we use for testing? Can we use an emulator? How do we prototype for mobile? Can we just recycle the tasks we use for desktop software tests? Do we test in the lab or in the wild? How do we record screen, fingers and facial expressions?

We don’t intend to answer all those questions in just one session: that would be madness! We’ll focus instead on the last one.
Follow us in our quest to set up a mobile usability testing environment on a tight budget. We’ll show you how others do it. We’ll roam around electronics and professional video stores searching for brackets and webcams. We’ll put our DIY skills to the test and waste a lot of silicon trying to build our mobile recording device. We’ll scour the Internet for free software, and we’ll finish off building the lab and running a usability test in front of your eyes.

If we can do it, so can you! You’ll come out of this session knowing exactly what you need to do to run and record usability tests with mobile devices.

Presentation Notes

Slides: diymobileusabilitytesting.net/doku.php?id=diy-mobile-usability-testing-sxsw2012

Record mobile interaction for both a memory aid, but it’s also a powerful communication tool to prove to the clients/owners of the software that people do visually struggle using their product. Intel records both the actions of what they are intending and actually do, and as well as the reaction of the person.

Usability tests are pretty much the same on mobile devices as they are on desktop computers, except… Before you run usability tests on mobile devices you need to ask the following to produce the goals of your test:

  • Which Phone?
  • Which Context?
  • Which Connection?

Handset usability affects test results. If a user is used to an iPhone and you give them an Android, then you’re going to have a learning curve and cause issue. To get around this always make sure you run tests against users with the phone they are used to. If you cannot do this, make sure to use training and warm-up tasks which allows the participant to get used to using the device first.

Should we run tests in the field or the lab? Well, with desktop usability testing it doesn’t really matter. But with mobile devices we use phones on the toilet, well lit, and dark settings. In all seriousness, no one really knows right now which test is best to do. However, we do know that testing in the field is resource intensive and expensive. Even if you just test in the lab, it’s better to do that than nothing at all.

If you must do field testing:

  • Do it late, because your in-lab tests will get most of the usability concerns first
  • Plan and run pilot tests
  • Be prepared, such as if it rains

Recommendations:

  • Never test over wi-fi, as you’ll loose a lot of value running over a slower network
  • Cover participants’ data costs who are doing the tests for you

So how do we record the experience?

  • Wearable equipment like hat-cameras
  • Document cameras; but those are not cheap, and have the disadvantage of requiring participants to keep within the camera’s range and this just isn’t natural feeling
  • Mountable cameras which allow for natural interaction with the phone, if they don’t get too heavy
  • Screen capture software; but no one likes you installing stuff on their phones, and no application will support all platforms
  • Remote tool such as mouseflow.com (records visits to your website without people knowing). It supposedly also works on mobile devices. It seems as though this doesn’t fully work yet on all phones though

If it would be possible you’d want

  • Easy to put together
  • Cheap
  • Repeatable
  • Allows holding the device
  • Allows one-handed use
  • Supports all form factors
  • Runs tests with participants’ phones
  • Captures screen, face and fingers
  • Gives enough video quality

Photograph of PresentationIntel took the 5 recording methods and found that the mounted devices were the best solution. But that was too expensive, so they instead built their own using Erector Sets, cheap web cams, poster putty (BlueTag, which also helps protect the phone), and bolts. They then run this through a windows machine with both of the cameras showing up, and just simply screen capture.


Mar 13 2012

SXSW 2012: The Science of Good Design: A Dangerous Idea

Ben McAllister (@benmcallister)
Frog Design, Assoc Creative Dir

#SXDangerous

Presentation Description

The business world is increasingly enamored with design. Business leaders look to designers for guidance on everything from product innovation to corporate strategy. While designers and business people may bring different perspectives to the table, they share one common language: research.

But research can be dangerous. It often provides easy answers that go unquestioned because the research feels like science. What if we’ve put too much trust in research? What about the aspects of design and product development that are important, but hard to measure? Where does research end and design judgment begin?

In this talk, frog Associate Strategy Director Ben McAllister explores these questions and takes a hard look at the role of research in design. Drawing from not only design, but also economics and the philosophy of science, Ben confronts the conventional wisdom around design research, offering a new vision of how research can inspire creativity and guide decision making.

Presentation Notes

“Strategy” is a pretentious word and idea. Ben used to have a title with the word “Strategy” in it, and it was always a challenge. The word strategy comes from the Greek word “general” and breaks down to “to lead” and “that which is spread out.” But Strategy is really just about Leadership and Uncertainty. All humans do not like uncertainty, but without uncertainty there is no need for leadership. If you know what is going to happen, and have the perfect information, then you have no need for strategy.

Research is about informing decisions, but not everyone will agree. In regards to Mad Men the following are still true: Agency life hasn’t changed, but agency work has. Advertising agencies used to be a much more creative world, and they were highly trusted for their advice. However, now this creative world has marginalized. The word “The Research” bothers Ben. It implies the research has its own voice, and cannot be interpreted any other way. It wasn’t about ambitiousness, it was about a clear represented answer. Scientism is the act of using science terms to trick people and create a level of uncertainty (such as people in lab coats smoking cigarets as an advertisement). Scientism is a con, and it is cartoon science as it misguides you on what science really is.

With science you have certainty, objectivity, and progress. The problem is that we take Science and easily lump it in with Research although not all Research is Science. On one end of the spectrum of Research we have “Hard Sciences” (Laws), in the middle is “Social Sciences” (Experiments), and on the other end “Looking at Stuff” (Design World). But even Hard Science Scientists are not absolutely sure of anything (See: Richard Feynman, who admitted this). Even with the Great Depression people are still asking why it started, and why it ended.

Confirmation Bias is when you do research to find research that match your beliefs, and then you find more and more, and then you count is as fact although there is a whole slue of other science for the other side.
Flip Flop Rhythm is when one person says something is good for you, and then someone else says it is bad for you. This happens in nutrition and medication a lot.

We need to approach everything with a level of skepticism, and don’t take it to heart. As well, always keep an open mind that anything you do could be wrong. We need to be honest about where the value of design comes from. It’s dangerous whenever a client asks us to prove why we design the way we do. Sure, science can provide us with an easy answer. The value of what research provides comes from the person doing the research or the person interpreting the data. Research should be used to inform decisions, but not make them for us.

What kind of business do you want to be in? Do you want to be in the business of leading people through uncertainty, or in the business of following directions?


Mar 12 2012

SXSW 2012: The Page is Dead

Jacob Surber
Adobe, Project Manager (HTML Design)

Presentation Description

Responsive web design is changing the definition of a “page,” as it aims to address the growing variety of device form factors and locations where content is consumed. Additionally, as the web evolves, rules and limitations must be better understood in order to create truly unique content. This session will focus on design philosophy and development techniques to create and adapt your content for maximum impact, regardless of where and how it is consumed. Topics will include: • Proper elements for the proper content • Design for context • Adapt your UI and adapt your content • Design with ratios vs. design with pixels • Know the limitations • Designing with limitations • Let the limitations set you free.

Presentation Notes

With the advancement of technology there are so many new/different devices all of which have different screen sizes. So, what are your options when creating a website?

  • Create a mobile website: m.mywebsite.com. But where do we stop? ipad.website.com? ipad.landscape.website.com? iphone.4s.website.com? (Don’t do this)
  • Build a responsive site!

Get your content down first: “Content precedes design. Design in the absence of content is not design, it’s decoration.” – Jeffery Zeidman

Responsive design is more of philosophy than a technique. It is something that defines control differently, and it is a team effort. It’s about knowing your center and how people are going to approach you. You need to have a soft center and have the ability to let go and have a certain level of control.

The New York Times has a poor design as it is not responsive, however The Boston Globe is. Ethan Marcotte worked with The Boston Globe to make this possible. See: Blog post and Book. The design company who worked with The Boston Globe just recently released a blog post about this.

There are three types of grids: fixed, fluid, golden.

  • Fixed isn’t really flexible, but can be good some times. Pelicanfly does a good job with a grid system. They use the method 960 Grid System.
  • Fluid grids are calculated with math: target/context = result. The idea is to take an individual column and measure it out. For instance, if a column on a 960px screen is 60px, then we divide it and get a percentage for just that particular column. Don’t round when you do the math, even if they are crazy long. The List Apart has an example website called The Baker Street Inquirer. In chrome you can view the Developer Tools > Elements, and hover over the elements to see what CSS properties are applied at any given time.
  • Golden Grid is the concept of the Golden Rectangle. Anderson-Wise is an example of this.

Layout is an enhancement. Do all website experiences need to be the same on every single browser? No. Create an experience targeting those you want to target (such as not IE6).

When using Media Query Specs you should care mainly about: width, orientation, -webkit-device-pixel-ratio (iPhone advantage)

  • @media screen (min-width: 1024px) and (max-width: 1220px)

But wait! Break free from pixels, as that just wont scale. “We can get rid of half of the images on the web, because they’re used for styling.” – Hakon Wium Lie, Opera.

Best Practices

  • Start with low res graphics first.
  • Be resolution independent: CSS, SVG, @font-face

Hierarchy

  • How you can convey importance
  • How you structure your DOM
  • It’s important!

The New York Time has over 11 different fonts and faces, and 7 different size column widths. As a consumer this is highly confusing and hard to look over.

As you’re laying out information that you’ve defined, it will start to logically group together in modules. At The Boston Globe they have breaking news, main titles and a body of content, These things still exist on smaller views, they’re just shifted around.

DOM Order

Spark-Box does a good job with structuring the order in which things flow with different sizes. Illy Coffee moves their DOM around based on what device they’re using, and what that device’s user is more likely to want to do.

  • Be task oriented
  • What do you hope your use to do?
  • How long will users be using it?

Flexible Images and Content

The easiest way, but least scalable: img { max-width: 100%; }

A better scalable solution: https://github.com/filamentgroup/Responsive-Images

What W3 is proposing: http://www.w3.org/community/respimg/

Additional Resource


Mar 12 2012

SXSW 2012: How to Remember Anything: A Teach Yourself Guide

Mark Channon
How to Remember Anything, Author
marhchannon.com

Presentation Description

“How to Remember Anything” shows how a radically improved memory can add real value in life and in business and can help build your career. Mark Channon, Actor, Hypnotherapist, Product Manager and author of Teach Yourself How to Remember Anything, will take you on a whirlwind tour of the memory techniques inside How to Remember Anything. Guiding you through a set of key examples on how to remember names, books, presentations and more. Mark was one of the first Grand Masters of Memory in the world and creator of BBC’s Monkhouses Memory Masters.

Presentation Notes

Relaxing makes you concentrate better, so whenever it is you’re in need to remember something make sure you are just that.
Break down words into pictures, as pictures are easier to remember.

  1. Chain Method: you can remember words by chaining them into a story with images, even if the words do not correlate with a logical story. Mark gave an example of this method to everyone, and had someone regurgitate the main points precisely.
  2. Names: This is a multi step method consisting of 4 parts:
    • Prime Yourself: What’s interesting about the person you’re going to talk to? It’s easy to look around you and figure out what is all brown, but if you are only concentrating on what’s brown it’ll be hard to then reiterate what was blue.
    • Listen to their name
    • Create an image and imagine a short story about their name
    • Repeat their name back as you think of the story
  3. Memory Networks: System to correlate items to body parts. For instance, correlate each item from your toes to your head: feet, knees, thighs, butt, stomach, chest, head. This same method can be used to correlate numbers to objects around you. A television could be #1, a speaker could be #36, etc. This same method can also be used to remember passwords.

Mar 11 2012

SXSW 2012: Shit Code: When Good Code Is Betrayed

Rob Tarr
Sparkbox, Software Engineer

Scott Lenger
Beaconfire Consulting, Functional Analyst

#SXshit

Presentation Description

We’ve all been there. You work meticulously to craft lean, efficient, elegant code. Beaming proudly, you hand your little sweetie off to a client, a contractor, a colleague, or even a CMS, but the next time you check in, everything has gone to hell. Or worse – you’re on the receiving end of a long line of shitty code, trying to make sense of deprecated tags, naming collisions, arbitrary plugins, and other code soup.

So what happened? Where did all this cruft come from? And short of hunting down the abusers and beating them with Eric Meyer’s 2lb “CSS: The Definitive Guide”, what can you really do about it?

In this brutally honest session, front-end & back-end coders will unite with project managers to play the role of shrink, surveyor, and sensai. Using real-life examples, we will break down how bad code happens to good people, why it matters, and specific steps you can take to prevent it. Come learn why it’s important to code like the next person to use it is a homicidal maniac who knows where you live.

Presentation Notes

How does this happen?

  • Different standards or conventions
  • Spanning multiple CMS’s/CRM’s
  • Competing libraries
  • Plugins
  • Failure to separate design/data/behavior/content
  • Laziness

Why it matters?

  • Self-satisfaction
  • Delivery
  • Maintenance

What to do about it?

  • Flag Issues in Process
  • Collaborate Across Disciplines
  • Build Rapport
  • Know When to Compromise, and make sure to check yourself

“Most of the evil done in the world is done by people who think they are doing the right thing.” – Richard Beck

There are many failure points when coding between teams: HTML, CSS, front ends, back ends, etc.

External Links


Mar 11 2012

SXSW 2012: Simplify CSS Development with Sass & Compass

Alex Lemanski
Bitfyre, Founder

Presentation Description

Simplify and speed up your CSS development with Sass. Overcome browser differences – particularly with CSS3 – and build grids the right way with Compass. Sass is a CSS meta language that brings more functional programming to the css language and complies to standard browser supported CSS. It adds tools like variables, functions, and mixins, as well as compilation tools for debugging and optimization. Compass builds an additional framework of tools on top of Sass. It adds mixins for almost all the new CSS3 modules to abstract away syntax inconsistencies and browser prefixes. It also enables the development of CSS frameworks *the right way*, using semantic classes instead of presentation oriented classes. Compass has ports Frameworks like Blueprint, YUI, 960.gs, as well as even some Compass only ones like Susy. On top of that, there are also loads of extensions to Compass for everything from CSS3 button generators to more complex sprite and image generators.

Presentation Notes

Slides: http://bit.ly/teamSass

The Basics

  • Variables (font-colors, font-family, etc.). You can set a default variable, but then have an opportunity to change it with the “!default” operator similar to “!important”
  • Nesting selectors: .nav { li { … } … }
  • Parent references with the nesting selectors
  • Nesting statements: background: { color: …; image: …; }
  • Comments (Sass specific) that are stripped out when compiled: // instead of /* … */
  • Loops: @for, @each, @while
  • Mathematical operations

Desktop GUI’s

Command Line

  • Sass itself
  • Sass-convert
  • Vast number of static generators (Middleman, which can also minify your code)
  • Compass

Debugging Tools

  • Generated Line Comments
  • FireSass for Firebug, allows you to see what Sass file a particular element definition is in

Good Practices for CSS

  • Don’t nest more than 4 selectors deep
  • Break things down as much as possible
  • Work from the main area …

Put all of your partial sass files in a “lib” (library) sub directory

Output Configurations

  • :line_comments
  • :debug_info
  • :compressed, :nested, and a couple others

CMS Plugins

What is Compass?

  • Gives you helper functions on top of what Sass already has. For instance, it can auto convert between hsl and rgb.
  • Mixins for CSS3. Generates all of the browser implementations of new tags (-webkit-…, -moz-…, etc).
  • Framework for Building Frameworks.
  • Plugin Architecture for creating Mixins for buttons where you can publish for Ruby and then others can take them and re-use them.

Additional Resources


Mar 11 2012

SXSW 2012: Mad CSS3 Skillz

Estelle Weyl
Standardista.com, UI Engineer

Presentation Description

In this one hour tutorial workshop, you will become skilled in CSS3 selectors, transforms, transitions and animations. We will work through an animation examples, creating different paths, timing and effects, exploring linear gradients opacity, alpha transparency, border-radius, text-shadows, transforms, transitions and mostly animations. The code example will be provided participants can play with the code, going from novice to skilled without heavy note taking.

Presentation Notes

Slides: http://estelle.github.com/sxsw


Mar 10 2012

SXSW 2012: Dear Google & Bing: Help Me Rank Better!

Danny Sullivan
Search Engine Land, Editor In Chief

Duane Forrester
Bing, Sr Product Marketing Manager

Matt Cutts
Google Inc, Distinguished Engineer

Presentation Description

If you build it, they might not come, if you haven’t thought about how search engines view your web site. Forget testing for Internet Explorer, Firefox, Chrome and Safari. Search engines are the common browser that everyone uses. The good news is that search engine optimization (SEO) doesn’t mean terrible design or some type of black-magic trickery. Rather, there are good, sensible things that everyone should do that pleases both search engines and human visitors. In this session, representatives from Google and Bing provide this type of advice. They’ll even get you up to speed on the impact that social media is playing on search results. Even better, it’s all Q&A. Bring your top questions about how they rank sites and get answers directly from the source.

Presentation Notes

The “Deep Links” or “Site Links”, which are the links that are listed under popular webites in search results, are determined based on what content on that particular website is accessed the most by relevance and value. You can go into Google’s Webmaster tools, or Bing’s version, to remove any if you don’t want them… but you cannot add them. See: searchengineland.com/seotable

Google is working on leveling the playing field to make people who SEO a website without relative content not be as high in the search results as they are now. These changes should be rolling out within the next couple months. The best way for a mom-and-pop website to get ahead in SEO is just for them to have awesome products and be engaged socially. Rather you’re involved or not is your choice, but those signals still exist by others.

Don’t buy links. This is one of the worst things you can do, and this will hurt you in one of two ways: 1. you’ll waist your companies money, or 2. you’ll hurt your domain in search rankings forever.

Infographic: The Google Panda Update

If you have a website page that no longer exists, you should do a 301 redirect. If your IT personnel wont grant you that, then tell them both Google and Bing say they’re stupid. See: rel=”canonical”

So why does one website who posts after me get a higher search ranking? Well, typically it’s because users are more comfortable with that bigger company. But that’s not to say there isn’t other things you can do. See: http://schema.org/