A recent project for Sloan Kettering Institute included a 3D printed mold fabricated by Potomac Photonics. The new method for microfabrication of this integral part eased a bottle neck in the research process. 

The 3D molds are used for poly(dimethylsiloxane) (PDMS) microfabrication. In the past, development of these microfabricated devices, which are used for biology and biomedical applications, has been a bottleneck because it required expensive equipment and long process cycles, according to Maxime Deforet, the Program Director at Sloan Kettering Institute. In contrast, acrylic 3D printing allows rapid prototyping of microfluidic assay.

This project was partly funded by Potomac Photonics Educational Manufacturing Initiative which is a program, focused on creating robust partnerships with universities and research institutes in order to develop new products and manufacturing technologies. 

“The Broad Institute has described GATK 3 as a shift in the way they approach problems in NGS data analysis, as well as a shift in the scope of problems the toolkit can tackle,” said Trevor Heritage, vice president of corporate development and strategy at Appistry. For instance, a collection of enhancements to the GATK speeds the analysis of the large sample sets typically associated with observational clinical studies (cohorts). This is accomplished through two main updates:

• An optimized algorithm achieved through a collaboration between the Broad Institute and Intel. The Broad says the optimization will enable scientists to conduct variant discovery three to five times faster than with prior versions of the GATK and to analyze a whole genome in one day rather than three.

• A new pipeline that better supports large, multi-sample analysis. Rather than re-calling data for all samples in a study when new samples are added, scientists can now analyze the new samples as they are sequenced and combine these results with the stored results from the rest of the cohort.

Additionally, the GATK for the first time includes best-practice recommendations for calling variants from RNA sequencing, which has emerged as a critical source of information on cellular function and activity. The initial best practices focus on data processing and variant calling steps; recommendations for other key analysis steps will be introduced in future releases.

(Photo by Brockhaus and Efron Encyclopedic Dictionary and Mary Margret / Flickr)

Sometimes, it’s the little things that power a web designer to produce a remarkable project.

For Dan Mall, all it took was a little inspiration.

For other designers, a unique project stems from creative freedom, or even a great typeface. But, while their methods differ, these designers are unified by a desire to create original and interesting projects, often done through firms they have started themselves.

One of Mall’s most interesting projects took place about two years ago with a nonprofit, Reading is Fundamental. When Mall walked into his meeting with the Washington, D.C.-based nonprofit, he had a pretty good feeling the project had the potential to become one of a kind.

Free trial on Treehouse: Do you want to improve your mobile and desktop design skills? Click here to try a free 14-day trial on Treehouse.

Mall, a design director who started SuperFriendly, a company that matches designers’ expertise with the right projects, had no idea his first meeting with Reading is Fundamental, which ensures all kids have access to books, would set him on a new path in his design process.

The motivational meeting did just that.

That meeting two years ago kicked off with a hug from the nonprofit’s vice president of marketing and communications. The Reading is Fundamental group was fun, creative and open to the suggestions made by Mall and his team — which left him feeling invigorated and innovative.

His team left that day with one mission in mind: to design a great website for Reading is Fundamental, which gave Mall some great feedback to kick-start the project.

“They were using all of these great explanatory words, like ‘electric,’ ‘heart’ and ‘bubbles’,” Mall says. “So, the next day I opened Photoshop and did something I’ve never done before.”

Energizing Meeting Leads to New Design Approach

Mall began putting all of his different ideas for the new website into one Photoshop collage, which he now calls an “element collage” and uses on all of his projects. He found the element collage helped gather detailed feedback from the Reading is Fundamental team. This empowered Mall and his team to present a site beyond what the nonprofit imagined.

A portion of Mall’s “element collage” for the Reading is Fundamental project. Click to see a larger size. (Image courtesy of Dan Mall)

Mall’s element collage is an abstract way to document design ideas, which he describes as an assembly of pieces that don’t have a specific logic or order, but help capture all of his thoughts on a project as he gets them. A collage also provides as much visual imagery as possible from the get-go, serving as a point of reference during conversations between Mall and clients.

“Creating element collages started with the Reading is Fundamental project,” Mall says. “Now I use it on every project I get.”

And, sometimes it’s the people Mall collaborates with who make a project unique. About a year ago, Mall worked on a project for a large technology company, collaborating with Jamie Kosoy, the founder of Arbitrary, a digital agency.

For that project, Kosoy created about 30 prototypes, each designed to solve one specific problem. The project’s goal was to have the browser appear as if it were tilted in 3D space. Mall sketched the idea, and Kosoy began to create prototypes to address problems designing the site.

“Each prototype would ask one question: Can I do this part with a div? Can I make the design rotate? What if I add a little texture here?” Mall says. “[Kosoy] was solving really small problems — each took an hour or two. But, when we started to put it all together, he had already solved what the client wanted through his prototypes.”

Unique is exactly what most clients seek. According to marketing company Neolane, 69 percent of North American marketers say dynamic, personalized content is important for their website; only 5 percent saying it’s of low importance.

Unique Projects Mean Getting Creative — and Learning New Skills

For designer Brian Casel, noteworthy projects happen when designers create it from the ground up. And a project that forces him to rely on all of the skills he’s built up over his years as a designer has a serious potential to succeed.

“When I’m doing a project for myself rather than clients, I get to ask the question: ‘What can I dream up next?’” Casel says.

For Casel, unique means challenging, and it pushes him to use every skill he’s honed as a designer — and some he hadn’t yet discovered.

“With these types of projects, I’m able to use all of the skills I’ve built up over the years to create products that I have full control over,” Casel says.

A screenshot of Casel’s Restaurant Engine site. Click for a larger size. (Image courtesy of Brian Casel)

The first was Restaurant Engine, a startup Casel created that builds websites for restaurants. Restaurant Engine is SaaS-based and built entirely on WordPress — unique for the fact that there aren’t many sites like that around, he says.

Strange as it may seem, Casel says the real challenge behind his project didn’t have anything to do with design.

“I had to learn a lot about marketing and sales,” Casel says. “When you own projects, writing copy becomes part of that transition.”

A screenshot of Casel’s “Design for Conversions” landing page. Click for a larger size. (Image courtesy of Brian Casel)

Another Casel original involved his book, “Design for Conversions,” another series of firsts for him. Aside from writing his own book, he designed and formatted an eBook and created the landing page. It took calling upon all of his design skills, as well as newly learned ones such as copywriting.

His advice for designers hoping to create a project that moves away from a mainstream template? It’s simple — start small.

“Try small things, make a bunch of mistakes, learn from them, and then apply those to your next project,” he says.

In some cases, all a designer needs to concoct a new project is a great typeface. Put a new type or two in front of Brian Hoff, founder and creative director of Brian Hoff Design Inc., and his creative juices will start flowing.

“Different types of [leading] and styles wave into inspiration for me,” Hoff says. “Colors and styles — that paves the way nicely and gets me excited.”

One of Hoff’s standout projects was a design he created for AAA, which targeted roadside awareness. The unique part for Hoff was the opportunity to work with another design team and collaborate on the project.

A snapshot of the AAA project worked on by Hoff. (Image courtesy of Brian Hoff)

Another project, which hasn’t yet launched, forced Hoff to focus on redesign strategies. His goal? Taking what was already there and simplifying it, without losing the website’s fundamentals.

Unique projects have a tendency to push a designer. But that’s the part Hoff loves.

“I really enjoy the beginning of a project,” he says. “It’s scary and liberating at the same time, and I actually like that. That first draft you send to a client — that’s nerve-racking. But, it also gives you the chance to bring something new to the table.”

The post For Designers, a Little Inspiration Goes a Long Way appeared first on Treehouse Blog.

Meet Cheli. She is a Chemical Engineering major and her research explores the microscopic world of Filamentous fungi. She hopes to hypothesize that hyphal branching is, in part, regulated by autophagy; a cellular-level recycling process that occurs in a wide range of species from fungi to humans.

How did you find your mentor for year research project?
During my first semester at UMBC I received an email from my ENES 101 instructor saying that Dr. Marten was looking for new undergraduate researchers. I sent him my resume and high school transcript (I did not yet have a UMBC transcript), and I was accepted a couple weeks later, and have been there ever since.

How much time do you put into it?
I generally put in 12-15 hours a week for research but it varies depending on the experiment I am conducting.

How did you hear about the Undergraduate Research Award (URA) program?
My predecessor in the lab was a URA scholar, so my research mentor suggested I should apply as well.

Was the application difficult to do?
The application was straightforward. I would say that the most difficult part was making sure it did not exceed the page limit.

How much did your mentor help you with the application?
My mentor was the last person to review my application before it was submitted.

What has been the hardest part about your research?
The hardest part about my research has been trying to understand unexpected results. Often, in research, you can reach a road block and the difficult part is trying to figure out if this is the result of human error, an error in theory, or an error in the hypothesis.

What was the most unexpected thing?
Although I was told communication is a key component of research, I was surprised at how much time I spend using this skill. The importance of spending time to communicate results has become increasingly clear, whether it is explaining individual experiments in lab notebooks and weekly reports or developing larger-scale presentations for team members or conferences.

How does your research relate to your work in other classes?
As a chemical engineering major, I have to take classes in a wide variety of fields, and the work inside the lab has really helped me understand the importance of interdisciplinary studies. Genetics, Cell Biology, Statistics and Organic chemistry are all directly related to my field of research, and help me to fully understand the theory behind my research. On the other hand, the work I have done in the lab has given me skills in experimental design (a crucial component of ENCH 225) that I would not have had otherwise.

What is your advice to other students about getting involved in research?
Find your personal motivation to do research and talk to people who are currently involved in your field of interest. Once you have done that, make sure you can find the time in your schedule. This is often the most difficult thing to do, but with the right motivation, it is usually possible. Find research that gets you excited and apply to work in that laboratory. It is always possible to find time to devote to doing something you love.

Read more about her research here.

Since a smartphone landed in almost everyone’s pocket, developers have been faced with the question of whether to go with a mobile website or a native app.

Native applications offer the smoothest and most feature-rich user experience in almost every case. They have direct access to the GPU, making layer compositions and pixel movements buttery-smooth. They provide native UI frameworks that end users are familiar with, and they take care of the low-level aspects of UI development that developers don’t have time to deal with.

When eschewing an app in favor of a mobile website, developers often sacrifice user experience, deep native integration and a complex UI in favor of SEO and accessibility. But now that JavaScript rendering engines are improving immensely and GPU-accelerated canvas and CSS animations are becoming widely supported, we can start to consider mobile websites a primary use case.

Unicef’s latest campaign, Tap, presented us with the challenge of combining the accessibility of a mobile website with the native capabilities, UI and overall experience that someone would expect of a native app. Our friends at Droga5 came to us with a brief to create a mobile experience that tracks how long a user avoids using their phone.

Unicef’s 2014 Tap campaign presented the challenge of combining the accessibility of a mobile website with the smooth user experience of a native app.

For every 10 minutes that a user gives up their phone, a sponsor would donate a day’s worth of water to children in the developing world. While the user patiently waits, they are presented with real-time and location-based statistics of other users who are sacrificing their precious phone time.

We’ll discuss a few of the biggest challenges here: detecting user activity, achieving performant animations, and building an API integrated with Google Analytics.

Detecting User Activity

Detecting user activity through a mobile browser was an interesting challenge and involved a lot of research, testing and normalization across all types of phones. The slightest differences and inaccuracies between phones became suddenly apparent. To explain the process, we’ll break it down into three categories: user movement, user exiting, and device-sleep prevention.

User Movement

One core piece of functionality is detecting any movement by the user. Fortunately, most mobile browsers today have access to the built-in gyroscope and accelerometer via JavaScript’s DeviceOrientation event. The unfortunate exception is devices running Android 2.3 (Gingerbread), which at the time of writing has roughly a 20% market share. In the end, the project was not worth abandoning due to one version of Android, so we pushed on. This decision proved to be even better than we thought because most devices that run version 2.3 are old, which means less memory, a slower CPU and aging hardware.

To detect movement, we first have to detect an “idle” position. We instruct the user to set their phone down, while we check the readings on the x and y axis. We start a timer with a setInterval, and if that position’s values remain within a 6° range for a few seconds, then we save those values as the device’s idle position. (If the user moves, then we restart the timer again until the phone does not move for a few seconds.) From there, we listen for the DeviceOrientation event and compare the new position’s values to the idle values. If there is a difference, then we fire off a custom user_move event.

The concept was simple to implement, but we found that most devices fluctuate by a couple of degrees when lying still. The sensitivity to movement is quite high, so we first had to determine a threshold above which we could be confident that the user has intentionally moved their device. After some trial and error, we decided on a 12° range of difference (+ and -) from the idle position, on both the x and y axis. If any movement occurs outside of that range, we assume it to be deliberate. Thus, users can bump their phone slightly with no consequence.

    this.devOrientHandlerProxy = $.proxy(this.devOrientHandler, this);
    window.addEventListener('deviceorientation', this.devOrientHandlerProxy, false);
    
    MovementDetector.prototype.devOrientHandler = function(event) {
       var curr_x = Math.floor(event.beta);
       var curr_y = Math.floor(event.gamma);
       var curr_z = Math.floor(event.alpha);
    
       var didMove = this.calcMovement(curr_x, curr_y, curr_z, this.movement_threshold);
    
       if(didMove) {
          this.announceMovement();
       }
    }
    
    MovementDetector.prototype.calcMovement = function(new_x, new_y, new_z, threshold) {
       var x_diff = Math.abs(this.x_idle_pos - new_x);
       var y_diff = Math.abs(this.y_idle_pos - new_y);
       var z_diff = Math.abs(this.z_idle_pos - new_z);
       z_diff = z_diff > 180 ? 360 - z_diff : z_diff;
    
       return x_diff > threshold || y_diff > threshold || z_diff > threshold;
    }
    

As you can see in the first four lines of the calcMovement method, we are obtaining the difference between the idle position and the new position. Because the difference in values could be negative, we make sure to get the absolute value (Math.abs(val)). You’ll notice that the z_diff formula is a bit different. Because the value for z_diff is between 0 and 359, we have to take the absolute difference and then check to see whether the difference is above 130; if so, then we need to subtract that difference from 360.

This gives us the shortest distance between the two points. For example, if the device moves from 359 to 10, then the shortest distance would be 11. Finally, we check to see whether any of those three values (x_diff, y_diff, or z_diff) are greater than the threshold; if so, then we announce a user_move event.

Movement detection on iOS and Android (Samsung Galaxy S3 and HTC One). (View large version)

We had to test extensively across both Android and iOS devices. iOS was straightforward, whereas we found subtle differences between Android versions and manufacturers, especially with the stock browser. Certain devices would jump dramatically between values on the z-axis. Thus, we decided not to consider any movement on the z-axis in our detection — meaning that users could slide a phone laterally on a tabletop with no consequence.

User Exiting

Another action that we wanted to detect was the user exiting the browser, to signal their intention to end the experience. We had to listen for a couple of events via the PageHide and PageVisibility API. (PageHide or PageVisibility is available in Android only in later versions — in the stock browser in version 4.3+, and in Chrome 4+. iOS 6 has PageHide, and iOS 7 has PageVisibility.)

We knew we couldn’t detect across the board, but we felt that implementing it for browsers that support it would be worthwhile. The following matrix shows which mobile browsers support PageHide and PageVisibility:

Sleep Prevention

Keeping the device awake was the final core piece of functionality that we needed to detect user activity. This was crucial because the idea of the campaign is for users to stay away for as long as they possibly can. By default, all phones enter sleep mode after a few minutes. Some phones can be manually set to never sleep, or the user could keep it plugged in, but we could not rely on either of those options.

We had to think of interesting workarounds. iOS and Android had to be treated differently.

For iOS 6 devices, we make use of HTML5 audio and load a silent MP3 file asynchronously that loops endlessly during game play. We simply added the loop attribute, set to true, to our <source> element. For Android devices, we piggyback on what we do for iOS 6. However, Android’s display turns off after a few minutes even when an audio file is playing. Fortunately, unlike iOS, Android allows for inline video.

So, we run the same createMedia loop method shown above, but this time loading a 10-minute silent video with the <video> element, placed outside of the viewport. We found that the loop attribute doesn’t always work with inline video across Android devices, so we use HTML5’s media ended event instead. By looping a hidden video, we are able to keep Android devices from going to sleep.

Here is some sample code:

    //for iOS 6
    var media_type = 'audio';
    var media_file = 'silence.mp3';
    
    //for Android
    var media_type = 'video';
    var media_file = 'silence.mp4';
    
    ExampleClass.prototype.createMediaLoop = function(media_type, media_file) {
       this.mediaEl = document.createElement(media_type);
       this.mediaEl.className = 'mediaLoop';
       this.mediaEl.setAttribute('preload', 'auto');
    
       var mediaSource = document.createElement('source');
       mediaSource.src = media_file;
    
       switch(media_type) {
          case 'audio':
          //create an audio element in iOS 6
          //and play a silent MP3 file
          this.mediaEl.loop = true;
          mediaSource.setAttribute('type', 'audio/mpeg');
          break;
          case 'video':
          //create a video element for Android devices
          //and play a silent video file
          mediaSource.setAttribute('type', 'video/mp4');
          var _self = this;
    
          this.mediaEl.addEventListener('ended', function() {
              _self.mediaEl.currentTime = 0;
              _self.mediaEl.play();
          }, false);
          break;
       }
    
       this.mediaEl.appendChild(mediaSource);
       document.body.appendChild(this.mediaEl);
       this.mediaEl.volume = 0;
       this.start();
    }   
    

iOS 7 is much easier. Thanks to a UI update in the browser, the address bar always remains on screen, unlike in iOS 6. So, we call an update to the browser’s URL, running the method every 20 seconds, thus preventing sleep mode.

    setInterval(function(){
       window.location.href = 'tap.unicefusa.org';
       setTimeout(function(){
          window.stop();
       },0);
    }, 2e4);
    

We cannot use this method for iOS 6 because the user would notice the address bar slide into the view and then slide back out.

Animations

Animations are important in reinforcing the theme of water and making the experience fun. Whether we were creating a water-ripple effect, bubbles or waves, we isolated each animation and programmed different approaches to achieve the best result. Knowing that we had to do this for a slew of browsers by various manufacturers, we took the following into consideration:

• Performance
  Do frames get dropped when testing against supported devices? How does GPU rendering compare to CPU rendering?
• Value added
  How much does the animation really add to the experience? Could we conceivably drop it?
• Loading size
  How much does the animation add to the website’s overall load? Does it require a library?
• Compatibility with iOS 6+ and Android 4+
  Does it require complex fallbacks?

Bubbles

Let’s first look at bubbles, which animate from bottom to top. The design called for floating bubbles, whose size, focus and opacity would provide a sense of depth within the environment. We decided to test a few approaches, but these are the main two we were curious about:

• Animating DOM elements using hardware-accelerated CSS 3-D transforms (transform: translate3d(x, y, z));
• Rendering all circles on a 2-D canvas element.

Note: Animating via the top/left properties is not an option due to the lack of subpixel rendering and the long time to paint each frame. Paul Irish has written more about this.

We tested several approaches to find the best method to animate the bubbles. (View demo)

We pulled off the canvas method by creating two transparent canvases: one on top of the content and one below. We create our bubbles as objects with randomized properties in memory (diameter, speed, opacity, etc.). At each frame, we clear the canvas via context.clearRect(0, 0, width, height);, and then draw each bubble to the screen. To create a floating, bubble-like movement, we need to change each bubble’s x and y values in each frame. For the y-axis, we subtract a constant value in each frame: b.y = b.y - b.speed;.

In this case, we determine a unique speed for each bubble using (Math.random() / 2) + 0.1). For the x-axis, we need a smooth repetitive oscillation, which we can achieve by taking the sine value of its frame count: b.x = b.startX + Math.sin(count / b.amplitude) * 50;. You can view the extracted code and the demo.

The DOM-based implementation using CSS 3-D transforms follows a very similar method. The only big differences are that we dynamically create and insert DIV elements at the beginning and, using Modernizr, apply vendor-prefixed translate3d(x, y, z) properties on each animation frame. You can view the extracted code and the demo.

To optimize performance, we considered a canvas implementation because GPU acceleration has been enabled for the browsers we support (iOS 5 with its Nitro JavaScript, and Chrome for Android 4+); however, we noticed severe issues with aliasing and the frame rate on Android devices.

Timeline profiles using the canvas element and CSS 3-D transforms (View large version)

We also did some performance profiling in Chrome’s emulation mode on the desktop (better methods exist for doing more granular remote testing on a mobile device). The difference in results between the two was still interesting: A GPU-accelerated 2-D canvas showed better performance than GPU-accelerated CSS transforms, especially with a higher number of DOM elements, due to the rendering time for each one and the recalculation of styles.

After carefully considering several techniques, we went with CSS 3-D transforms to animate the bubbles. (View large version)

In the end, we used CSS 3-D transforms. We only need to animate 16 bubbles at a time, and the CPU and GPU on supported devices collectively seem to handle the overhead just fine. The performance and anti-aliasing issues with canvas rendering on old Android devices were the determining factors. At the time of writing and in this particular case, canvas wasn’t an option for us, but browser vendors certainly are not ignoring it, and the latest rendering engines of mobile browsers have seen massive improvements.

Waves

We use wave animations throughout both the mobile and desktop experience — specifically, as a design detail to reinforce the water theme and as a transition to wash away old content and bring in new content. As with the bubbles, we explored using both canvas and CSS-based animations. And likewise, CSS animations were the way to go. A wave PNG costs us only 7 KB, and we get much better performance from mobile browsers across the board.

As with bubbles, we explored using both canvas and CSS-based animations. (View demo)

Our isolated demo of the desktop implementation (which is similar to mobile) is really quite simple. Each wave is a background image set with background-repeat:repeat-x and a looping keyframe animation that moves left with linear easing. We make the speed of the waves in front slightly faster and the waves in the back slower to simulate depth. You can view the code, which uses Sass and Compass.

We also tried a very different vanilla JavaScript approach by creating a wave oscillation. We used a wave oscillator algorithm created by Ken Fyrstenberg Nilsen, adjusting it to suit our needs. You can view this demo, too.

We abandoned the oscillation effect because of poor performance on old Android devices.

The effect turned out to be really nice and organic, but the performance was lacking on old Android devices, so we abandoned the approach altogether.

API

During gameplay, we wanted to provide some insightful facts and location-based statistics, as well as encourage users to keep playing. We used several APIs, combining them with scores from our database.

The back end is run off of the Laravel PHP framework and a few APIs. For location-based statistics, we could have asked the user for their location via HTML5 geolocation, but we wanted a more seamless experience and didn’t want to interrupt the user with a confirmation dialog box. We don’t need a precise location, so we opted for MaxMind’s GeoIP2 service. This service gives us enough data to get the user’s rough location, which we can combine with other services and data.

We also want people to know that they are a part of a bigger community, so we wanted to provide statistics based on website analytics. The obvious choice was to use Google Analytics’ new API, as well as its newer Real Time Reporting API.

Because we have access to different kinds of data, we are able to display facts that are relevant to the user. For example, a user in the US would get a statistic on how their state compares to other states in the country, according to Google Analytics. By using Google’s Real Time Reporting API, we see how many active users are on the website, and we display that to the user, illustrating other people’s participation. In our PHP code, we use Google Analytics for Laravel 4 which works great and handles a lot of code, making it much easier to get data back from Google Analytics’ API.

    $ga_realtime_metric = 'ga:activeVisitors';
    $ga_service = Analytics::getService();
    $optParams = array('dimensions' => $this->ga_dimensions, 'sort' => '-'. $this->ga_realtime_metric);
    
    $results = $ga_service->data_realtime->get([google profile id], $ga_realtime_metric, $optParams);   
    

We also use GeoIP2’s service to record people’s times, to display the score of a particular city or state.

To prepare for spikes in traffic, to stay within each API’s rate limit (Google Analytics’ limit is 50,000 requests per project per day) and to optimize speed, we cache some data at 10-minute intervals. We cache certain other data, such as GeoIP2’s, even longer (every five days) because it doesn’t change that often.

Due to the ever-growing number of scores, the queries to retrieve certain statistics would take longer than is acceptable for each user. So, we set up a couple of CRON jobs to set these queries to run every 10 minutes, caching the updated statistics on the server.

When a user hits the website, an AJAX call to the server asks for the cached data, which is returned to the browser in a big JSON response. This increases loading times considerably and keeps us within the rate limit for each API that we use.

Conclusion

As mobile browsers continue to improve, offering new features and enhancing performance, new opportunities like this will arise. It’s always important to question whether you should build a native app or a Web app, and keep in mind the pros and cons of each, especially because the differences in their capabilities are narrowing rapidly.

Developing our Tap app for the Web not only was more affordable (with two Web developers working on a single code base, as opposed to a developer for each platform), but made it more accessible and easily shareable. We’ll never know, but we’re confident that we would not have reached 3.7 million website visits in the first month had we gone the native route. About 18% of those visits came from Safari in-app browsers — meaning that people had clicked on a link in their Facebook or Twitter feed and were taken directly into the experience. A native app would have seriously hampered that ability to share the experience or message quickly.

We hope this article has been helpful in illustrating both the thought process of Web versus native and the technical hurdles involved in building Tap. The project was really fun and challenging, it was for a good cause, and it introduced a unique mechanism for donating, one that we hope to see propagate and manifested in new and creative ways.

Further Ressources

• “This End Up,” Peter LePage
  A great article about DeviceMotion and DeviceOrientation events
• “Using the Page Visibility API,” Mozilla Developer Network
• Reporting Developer Guides,” Google Developers
  More information about Google Analytics’ APIs
• “Quote Management,” from “Real Time Reporting API: Developer Guide,” Google Developers
• “Why Moving Elements With Translate() Is Better Than Pos:abs Top/left”, Paul Irish

(al, il, ml)

© Nick Jonas und Francis Villanueva for Smashing Magazine, 2014.