Gustavo Rodrigues qgustavor

Let's generalize that it is a reading app, so one of the principles we are following is to keep it simple, intuitive and with the text in focus. The example shows something like a "song book", but there are other types too.

The current design uses a navigation drawer and the proposed design ( a quick mockup using developer tools ) uses a tab based navigation. So there are some problems:

Almost all¹ older designs uses navigation drawers, so users are already used to it. In the other hand possible new users aren't.
It need to be adapted to be easy to use on using only the mouse, only touch or only the keyboard: some users prefer just to use the keyboard, others just use it when searching, and on mobile there's only touch.
Have a persistent search box like Google Developers/Tumblr designs, a dedicated page like Google Design, or a expandable search box, like many appl

	// note: require ES6
	$('#frame').html('<canvas id="pinkSlime" resize></canvas><div id="werd" class="glitch" data-text=""></div>')
	{let script=$('script[canvas="pinkSlime"]')[0];
	script.innerHTML=script.innerHTML
	// disable checking
	.replace('Boolean(window.chrome)', 'true')
	// replace IE specific javascript with the standards one
	// http://stackoverflow.com/a/21512167
	.replace(/event\.event\.(\w)/g, (a,b) => `event.event.client${b.toUpperCase()}`);
	}

	<!doctype html>
	<!-- Use cdn.rawgit.com or htmlpreview.github.io to test -->
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
	<meta property="og:title" content="Harder, Better, Faster, Stronger"/>
	<meta property="og:url" content="http://davealger.c.mom/stronger/"/>
	<meta property="og:image" content="http://davealger.com/stronger/punk_small.jpg"/>
	<meta property="og:site_name" content="davealger.com"/>

	// Requires: jQuery, Zepto or a library with similar api
	let React = {createElement: (e, args, ...children) => $(`<${e}>`, args).append(
	children.map(e => typeof e==='string' ? $('<span>',{text:e}) : e)
	)};

	// Usage:
	$('.container').append(
	<div>
	<h1>Credens Justitiam</h1>
	<p>Solti ola i <br />

	/**
	* This script takes a directory of images, looks for GPS
	* coordinates in each file, and then writes the filename and
	* decimal degrees to CSV. If you're pulling images off of your
	* iPhone, using Image Capture is a quick way to move them onto
	* your computer and get started.
	*
	* Make sure you have imagemagick installed:
	* $ brew install imagemagick
	* Download these files and install dependencies:

	// Usage:
	// Start a XDCC download then use
	// /eval [folowed with the code below]
	(function down(i) {
	let f = client.dcc.files,
	s = f[f.length - 1].state,
	_ = s.socketDisconnected;
	s.socketDisconnected = () => {
	_.call(s);
	if (i === 1229) return; // LAST PACK NUMBER

	// Second ~~Flight~~ Round: a jQuery based web-spider
	var taskQueue = ['https://tracker.uniotaku.com/torrents.php', 'https://tracker.uniotaku.com/forums.php'];
	var fetchedPages = [];
	var fetchedImages = {};
	var unique = ((e, n, a) => n === a.indexOf(e));
	var TARGET_IMAGE = 'http://i60.tinypic.com/oa6cqw.jpg';

	checkQueue();

	function processData(href, data){

	<!DOCTYPE html>
	<html manifest="manifest.appcache">

	<head>
	<meta charset="UTF-8">
	<title>Permeabilidade dos Solos</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
	<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet prefetch" href="pen.css">

	var lastMessageId = '';
	(function loop(){
	$.getJSON('https://www.reddit.com/message/inbox.json',function(result){
	var lastId = result.data.children[0].data.id;
	if (lastMessageId !== lastId ) {
	if (lastMessageId) {
	alert('New message received');
	} else {
	console.log('Listening for new messages');
	console.log('Last message id:', lastId);

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Gerar multiplos QR Codes</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
	<style>
	body {
	overflow: hidden;
	}