Archive for 2013

Scrolling Sites on iOS – mobile apps requires something other than HTML/CSS

UPDATE: My fix for this issue was using webkit’s translate3D transform to sidestep the performance issues (for the most part). Here’s a nice performance comparison by Paul Irish. There’s 3 hacks to make it work:

1) you have to use translate3D, not translate2D, for the iPad’s hardware acelleration to work.

2) You have to turn -webkit-backface-visibility to hidden if your elements are larger than the screen

3) You want to set up a default -webkit-transform: translate3d(0,0,0); inside your CSS to prevent a jerk on first touch.

Here’s my code that implements this, while unfortunately disabling momentum for scrolls.


HTML/CSS is arguably the most successful domain specific language we have – it makes it dead simple to write applications containing graphical elements. I claim that it’s an instance of using a high level language (CSS and HTML) to get high performance programs (web apps) by embedding domain specific knowledge into the runtime (document layout, text rendering, interaction events).

Now consider the issues of doing a scrolling narrative with pinned elements & parallax scrolling.

The HTML/CSS abstraction is not a good fit for the layout & positioning requirements of this, which I will try to demonstrate. As you scroll along, you have imperative JS code tracking your scroll, and this fires off changes to the declarative CSS language.

Part of the annoyance is the difference in expression – three languages involved in this process – and the fact that crossing these barriers have performance implications, especially on mobile (this claim is worth testing)

On mobile, here’s the event process:
- the user starts scrolling (1)
- all JS execution is paused
- the user stops scrolling
- JS execution is resumed, receives a scroll event, checks where the page are
- if the page has scrolled past a predetermined point (this in itself is hairy to calculate) we now change the css for a div from position:relative to position:fixed (2)
- the css takes a moment to reconfigure and redraw the display
- the image jumps to a new location since the screen has moved in the meantime
- now as we scroll, the image stays at a fixed location on screen, moving relative to the document (3)
- the user keeps scrolling, past the bottom of the element’s pinned region.
- the css for the div is now updated to a new position

Naturally a big issue here comes in with iOS pausing JS execution, but even without that you get shuddery twitchy behavior, because the high level API that is supposed to give you higher performance since it embeds domain specific information into the runtime is being misused here since it has no way of expressing these constraints.

Potential solutions

Going off the observation that we cannot express these constraints in CSS, perhaps we should be able to express a constraint-based CSS rule for this. Something along the lines of “position of image div is equal to top of text if viewport top is higher, or top of viewport, or bottom of text if viewport is lower”.

This has several concerns for a constraint-based approach: these are not linear or quadratic constraints, they are turned on and off. That is, as the location of the viewport changes, the constraint on the image div changes – initially it is in line with the top of the text, then it becomes equal to the position of the viewport on the document, then it becomes equal to the bottom of the text block.

This means we would have to construct a function as the solution to the constraint function, given the current viewport location, would determine the locations of elements. I believe this would be challenging to do well, and warrants further exploration. This is also the same problem that comes up in automatic document layout using templates! People like Greg Badros and Alan Borning’s Constraint Cascading Style Sheets for the Web, and the work done on Adaptive Grid-Based Document Layout had to solve similar problems (either through prioritizing different constraints or by discretizing the problem and using a big offline dynamic-programing solver). Perhaps someone has addressed this issue in the constraint literature already, and it’s just waiting for us to use it?

A different direction of thinking would be to get rid of the declarative CSS/HTML manner of expressing this. What would be a more appropriate low-level approach? We can find inspiration here in thinking about how this same behavior would be implemented in a native iOS app. For the moment I’d have to leave this for future pondering.

Conclusion

I’m becoming more convinced that, rather than piling features into HTML and CSS, we can come up with a lower-level abstraction that has many of the same benefits (easily expressible graphical applications) but with an API better matched to the applications we’re building rather than static document layout. The declarative nature of CSS makes it more challenging to build this as an extensible system, but I think the gap between “mobile webapps” and “native apps” can be shrunk if we reimagine CSS. It’ll make my work a lot easier!

A conversation about Quality in Manufacturing, and American Made

My correspondence with friend and fellow compatriot of the motorcycle society seemed interesting enough to warrant a blogpost. Forgive any appearance of self-indulgence this might conjure up, that is not the intent. Rather, I hope to shed some light on a difficult issue we have been grappling with. In a society built around disposability, what is Quality and how do we sell it?

This was written in response to Quality is Back In Demand, and the work that These Men Are Professionals are doing to produce Quality and Unique wares.

Pags,

It’s with great sincerity that I write to you about my deepset connection to the words “American Made”. It’s difficult to even type it without the appearance of a lump in my throat, and a feeling of great ability rising to meet great expectations – early dawn over an unexplored horizon.

My first real experience with the concept of Quality in Manufacturing came from a Maglite flashlight I received as a birthday gift at a young and impressionable age I now fail to recall the exact date of. The box proudly displayed the American flag in the bottom right corner, capped with ‘Made in the United States of America’. It had a sense of dignified confidence about itself – there was no explanation of why this sentence had any significance, yet its presence was anything but frivolous. I was too young to understand why the emblem mattered, but my Grandfather, whom I deeply respect and admire, pointed it out to me and said “Everything made in America will last you forever. This is the yardstick by which quality is measured.” Grandpa did not use such language lightly, and the sleek black metal flashlight’s weight in my hand cemented the imagery he conjured of Serious Men making Serious Tools for Serious Jobs. A Fraternity I suddenly wanted to be part of.

I still have that flashlight, many years later, even though it’s no longer as bright and efficient as the new LED ones (of which I own several), but every scratch tells a story – the time I dropped it on the pavement while camping, trying to replace the lightbulb and having to crawl around feeling for the screw cap in the dark – and I wouldn’t want it any other way.

In the times since then, I’ve grown to see that (unfortunately?) not all American Manufacturing is the pinnacle of quality and perfection. There’s plenty of subpar, even terrible manufacturing happening right here in the US, and not just in the last three decades of rising pressures from China and a growing disposable-minded society. The American invention of the paperback novel, as an example, goes back to the 1950s, and was centered around extremely cheaply printed books for mass circulation, where pages start falling out after only a couple of reads. Who cares, it was 99 cents! If you want quality paper printing, talk to the Japanese!

But I digress, let’s get to the real conversation – not about dreams of days gone past, where perhaps the naivety of youth and sepia tones of time distorts our recollections in a overly fond direction. Let’s talk about today.

Any lofty conversation about manufacturing Quality Products is in danger of quickly become either very preachy (“You need to stop buying trash and start buying quality”, stop telling me how to live my life), very insincere (“buy now and we give you a free 30 day money-back guarantee!”, too many late night ads), or very whiney (“the past was so much better yadda yadda yadda”). Each of these alienates people, while the real message is one of inclusion and hope.

When it comes to your blog post, since you asked about it, I think you’re doing a good job treading the fine line between those, although I do caution you to be careful! Write with inclusion in mind. Take us all along on the journey and keep sharing your excitement for it. Those that differ from you are not enemies, they’re potential customers and disciples waiting to be converted.

A couple of observations around selling Quality: Amazon (or any other big online store) gives me absolutely nothing to distinguish between the quality of different products. Price should not be the only representation of Quality, but when I buy books off the internet, I have no idea that the $20 hardcover has heavy, bright paper and perfect margins while the $12 paperback is printed on what couldn’t even serve as toilet rolls. All I see is two identical front covers and a $8 price difference.

Selling Quality online thus demands that you do not put it into direct comparison with the equivalent low-quality product, or at least not initially. If you want to sell the Greatest Hoodie Ever, you create a environment for it where it can stand on its own. Like American Giant with their Hoodie.

You’re already doing this, which I applaud, but I wanted to point it out anyway.

This conversation can be one of Rejecting Others’ Reality and Substituting Your Own, but it can also be one of Building on the Shoulders of Giants. The international supply chain gives us the machines we’re typing this on, at a price we can afford, while keeping up with the incredible scaling that transistors have undergone over the last 4 decades. Maybe we took it too far (quite likely we did!), but let’s consider what we have to build on top of now!

This is a long rambling email, which I apologize for – I’m overworked, underslept and stressed – but I’m excited by what you’re doing and wanted to let you know I believe in this, or at least my take on it.

Wifi on the Raspberry Pi using EDIMAX EW-7811Un and the 2012-12-16 wheezy raspbian image

The EDIMAX EW-7811Un is probably the most popular wifi adapter for the Raspberry Pi. It’s super tiny, doesn’t draw much power, and works (almost) out of the box with the latest Debian images (As of January 2013).

This, of course, doesn’t mean it’s easy to configure. I started off with this guide http://www.savagehomeautomation.com/projects/raspberry-pi-installing-the-edimax-ew-7811un-usb-wifi-adapte.html

But I have my own wpa_supplicant configuration.

Here is /etc/network/interfaces:

allow-hotplug wlan0
iface wlan0 inet manual
wpa-roam /etc/wpa_supplicant/wpa_supplicant.conf
iface default inet dhcp

And here is /etc/wpa_supplicant/wpa_supplicant.conf
This is for WPA and TKIP configuration since I could NOT get WPA2 to work.

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
network={
ssid="JOUB"
psk="MY_SECRET_PLAINTEXT_PASSWD"
proto=WPA
key_mgmt=WPA-PSK
pairwise=TKIP
group=TKIP
auth_alg=OPEN
}

if you’re seeing a message saying “WPA: IE in 3/4 msg does not match with IE in Beacon/ProbeResp”, you’re having authentication problems between WPA and WPA2. Be careful, you want ONE of the following:

WPA-PSK:

network={
ssid="my_network"
proto=WPA
key_mgmt=WPA-PSK
pairwise=TKIP
group=TKIP
psk="secret_password"
}

WPA2-Personal:

network={
ssid="my_network"
proto=RSN
key_mgmt=WPA-PSK
pairwise=CCMP TKIP
group=CCMP TKIP
psk="secret_password"
}