MojoKid writes "It's been a long time since many have seen a dreaded "blue screen of death" (BSoD), but it's back and in the in the most unlikeliest of places. Oddly enough, some Apple iPhone 5S owners are reporting BSoD errors, though they're a little different from the ones you may remember seeing on Windows desktops. Rather than spit out an obscure error code with a generic description, some iPhone 5S devices are suddenly turning blue before automatically restarting. The Numbers app in Apple's iWork suite, a free program with new iPhones, seems to be the primary cause, though BSoD behavior has also been observed in other applications, according to complaints in Apple's support forum."
elashish14 writes "The Nobel Prize Committee has chosen to award the Organisation for the Prohibition of Chemical Weapon (OPCW) with this year's Peace Prize. The OPCW conducts inspections and oversees the destruction of chemical weapon arsenals. They were established in 1997 and 190 nations have agreed to the treaty. The Nobel Committee's decision was a surprise to many however, who expected Pakistani education activist Malala Yousafzai to receive the award."
cartechboy writes "Ahh Twitter. Sometimes when you combine lightening fast information distribution and humans, minor (or not-so-minor) chaos can ensue. Yesterday, the Israeli military tweeted a commemoration of the 40th anniversary of the Yom Kippur war, which took place in 1973. But the tweet referenced the bombing of Syrian airports by Soviets, and oil traders, already an antsy group, assumed the tweet referred to an attack occurring that very moment. As you can imagine, this had some impact. Within an hour, the global price of oil jumped more than $1, from $110.40 to $111.50 as trading volumes soared. In the end, the traders missed a few things that would identify the tweet as historical vs imminent: Yom Kippur was weeks ago, the Soviet Union is no more, and most important, #checkthehashtag."
wjcofkc writes "In an ironic but welcome twist, the author of the Patriot Act, Congressman Jim Sensenbrenner (R-Wis.), is introducing the USA FREEDOM Act, a bill specifically aimed at countering the portions of the Patriot Act that were interpreted to let the NSA collect telephone metadata in bulk. The congressman has been a vocal opponent of the NSA's interpretation and misuse of the Patriot Act since Edward Snowden first leaked evidence of the program in June. On Wednesday, he wrote (PDF) to U.S. Attorney General Eric Holder that the 'collection of a wide array of data on innocent Americans has led to serious questions about how government will use — or misuse — such information.'"
An anonymous reader writes "According to Wired, 'Today's big data is noisy, unstructured, and dynamic rather than static. It may also be corrupted or incomplete. ... researchers need new mathematical tools in order to glean useful information from the data sets. "Either you need a more sophisticated way to translate it into vectors, or you need to come up with a more generalized way of analyzing it," [Mathematician Jesse Johnson] said. One such new math tool is described later: "... a mathematician at Stanford University, and his then-postdoc ... were fiddling with a badly mangled image on his computer ... They were trying to find a method for improving fuzzy images, such as the ones generated by MRIs when there is insufficient time to complete a scan. On a hunch, Candes applied an algorithm designed to clean up fuzzy images, expecting to see a slight improvement. What appeared on his computer screen instead was a perfectly rendered image. Candes compares the unlikeliness of the result to being given just the first three digits of a 10-digit bank account number, and correctly guessing the remaining seven digits. But it wasn't a fluke. The same thing happened when he applied the same technique to other incomplete images. The key to the technique's success is a concept known as sparsity, which usually denotes an image's complexity, or lack thereof. It's a mathematical version of Occam's razor: While there may be millions of possible reconstructions for a fuzzy, ill-defined image, the simplest (sparsest) version is probably the best fit. Out of this serendipitous discovery, compressed sensing was born.'"
jfruh writes "Techno-enthusiasts have been predicting for years that cell phones will become one of the main means that we use to pay for items — but most Americans stubbornly cling to cash and credit cards, mostly because cash and credit cards are infinitely more convenient. In order to woo people into buying things electronically, merchants need to make phone purchases better than traditional payment systems, not just another option. The fast food industry is leading the way with a plethora of apps that make ordering remotely a snap."
Daniel_Stuckey writes "Ville Tapio runs a private psychiatry center in Helsinki, and psychiatrists had told him they were reluctant in particular to hand out drugs for patients with attention deficit hyperactivity disorder (ADHD). ADHD drugs are psychostimulants, they are frequently abused, and kids can be prescribed them young and kept on a regimen for years. Tapio had an idea to do it better. His alternative? Getting people with mental health concerns to play video games. They're special video games, of course — ones that can change how your brain works, with a technique loosely termed gameified neuroplasticity therapy."
An anonymous reader writes "Mesa and its open-source Intel graphics driver now are in compliance with the OpenGL 3.2 specification (PDF). It took four years for Mesa to get up to GL 3.2 / GLSL 1.50 compliance, and support for the other Mesa drivers isn't too far behind, but they're still years behind in supporting OpenGL 4. Supporting a major new OpenGL API has resulted in Mesa 10.0 being called the next release. It has many other features, like performance improvements and new Gallium3D features. OpenGL 3.3 support might also be completed prior to the Mesa 10.0 release in November."
museumpeace writes "From its own EmTech conference, Technology Review reports on a privacy strategy from Microsoft's Craig Mundie: When sharing music online took off in the 1990s, many companies turned to digital rights management (DRM) software as a way to restrict what could be done with MP3s and other music files — only to give up after the approach proved ineffective and widely unpopular. Today Craig Mundie, senior advisor to the CEO at Microsoft, resurrected the idea, proposing that a form of DRM could be used to prevent personal data from being misused." Mundie also thinks it should be a felony to misuse that data. He thinks larger penalties would help deter shady organizations from harvesting data the user isn't even aware of. "More and more, the data that you should be worried about, you don’t even know about."
KentuckyFC writes "One of the frustrating problems with microelectromechanical (MEM) devices is that the machinery can sometimes stick fast, causing them to stop working. One of the culprits is the Casimir effect — an exotic force that pushes metallic sheets together when they are separated by tiny distances. Now physicists at the Los Alamos National Laboratory in New Mexico have worked out and demonstrated how to suppress the Casimir force. The trick is to create a set of deep grooves and ridges in the surface of one sheet so that the other only comes close to the tips of the ridges. These tips have a much smaller surface area than the flat sheet and so generate much less force. That could help prevent stiction in future MEMs devices. But why would a nuclear weapons lab be interested? MEM devices are invulnerable to electromagnetic pulse weapons that fry transistor-based switches, and so could be used as on-off switches for nuclear devices."
Nick Kolakowski writes "Here are the lessons imparted by Dave Eggers' The Circle, his new novel about the rise of a fictional technology company clearly modeled on Google or Facebook: 1) Sharing content with people online is a poor substitute for having real-life experiences with, like, kayaking and family gatherings and drinking and stuff. 2) Unless stopped, companies that build social-networking tools will create increasingly intrusive software. 3) The only sure way to stay sane in our increasingly interconnected (Eggers would say over-connected) world is to drive at high speed off a bridge." Read below for the rest of Nick's review.
The Bad Astronomer writes "It sounds like a scene from Gravity: Astronauts aboard the International Space Station Thursday saw a weird, glowing cloud of light in the distance, most likely caused by a fuel dump or leaking fuel from a Russian missile launch. The extended life of a Topol missile was being tested in a ballistic launch to a test target in Kazakhstan, and the astronauts were able to take pictures of both the launch vapor trail and the glowing cloud. This event is similar to the eerie spiral lights seen over Norway in 2009 caused by a Russian missile launch as well."
msm1267 writes "Metasploit's HD Moore says hackers sent a spoofed DNS change request via fax to Register.com that the registrar accepted, leading to a DNS hijacking attack against the Metasploit and Rapid7 websites. The two respective homepages were defaced with a message left by the same hacker collective that claimed responsibility for a similar DNS attack against Network Solutions. Rapid7 said the two sites' DNS records have been locked down and they are investigating."
pacopico writes "A series of robberies in Silicon Valley have start-ups feeling nervous. According to this report in Businessweek, a couple of networking companies were burgled recently with attempts made to steal their source code. The fear is that virtual attacks have now turned physical and that espionage in the area is on the rise. As a result, companies are now doing more physical penetration testing, including one case in which a guy was mailed in a FedEx box in a bid to try and break into a start-up."
quantr tips this news from Bloomberg: "A Chinese journalist who posted allegations of corrupt dealings during the privatization of state-owned assets has been formally arrested on a defamation charge, his lawyer said. The Beijing People's Procuratorate approved Liu Hu's arrest on Sept. 30, lawyer Zhou Ze said by phone yesterday. Liu, who worked for the Guangzhou-based New Express, had been in detention since Aug. 24, according to Zhou. Liu's arrest adds to evidence that the government is stepping up a crackdown against people who go online with revelations of official malfeasance. At the same time that the Communist Party has vowed to get tough on corruption, authorities have targeted outspoken bloggers and announced that people who post comments deemed defamatory could face as much as three years behind bars."
quantr tips this news from Bloomberg: "A Chinese journalist who posted allegations of corrupt dealings during the privatization of state-owned assets has been formally arrested on a defamation charge, his lawyer said. The Beijing People's Procuratorate approved Liu Hu's arrest on Sept. 30, lawyer Zhou Ze said by phone yesterday. Liu, who worked for the Guangzhou-based New Express, had been in detention since Aug. 24, according to Zhou. Liu's arrest adds to evidence that the government is stepping up a crackdown against people who go online with revelations of official malfeasance. At the same time that the Communist Party has vowed to get tough on corruption, authorities have targeted outspoken bloggers and announced that people who post comments deemed defamatory could face as much as three years behind bars."
Taco Cowboy writes "Back in 1999, it was postulated that diamonds may rain from the sky in the atmospheres of our solar system's gas giants. Now, research has shown that diamond rains on Saturn are more than probable. '"We don't want to give people the impression that we have a Titanic-sized diamondberg floating around," said researcher Mona Delitsky, of California Specialty Engineering, "We're thinking they're more like something you can hold in your hand." Recent data compiled by planetary scientists ... has been combined with newly published pressure temperature diagrams of Jupiter and Saturn. These diagrams, known as adiabats, allow researchers to decipher at what interior level that diamond would become stable. They also allow for calculations at lower levels – regions where both temperature and pressure are so concentrated that diamond becomes a liquid. Imagine diamond rain or rivulets of pure gemstone.' 'At even greater depths, the scientists say the diamond will eventually melt to form liquid diamond, which may then form a stable ocean layer.'
Barence writes "Canonical founder Mark Shuttleworth claims Apple will follow Ubuntu's lead and converge the iPhone and MacBook product lines. Speaking to PC Pro to mark the upcoming launch of Ubuntu 13.10, Shuttleworth said that the failed Ubuntu Edge smartphone — an attempt to bridge mobile and desktop computing devices — had set an example that others will follow. 'We've seen a very interested ripple go through the industry, and an uptick in interest in convergence,' Shuttleworth added. 'People are saying yes, mobile processors are catching up with the desktop. When Apple announced the iPhone 5s, it called the processor "desktop-class," and I don't think that was an accident – it was sending what we think is a very clear signal that it will converge the iPhone and the MacBook Air.'"
An anonymous reader writes "SFGate reports that Stanford researchers have figured out a way to generate a unique fingerprint from a cell phone's suite of built-in sensors. The tiny accelerometers, gyroscopes, microphones, and speakers in cell phones have characteristics that vary slightly from handset to handset, and these variations may contain enough information to uniquely identify a given handset. How that information might get from the phone to a third party varies (the article describes a JavaScript snippet reading the Z-axis accelerometer, though it says little about how the user might block such information from being read), but the possibility for abuse is certainly troubling."
New submitter Adamsobert sends this excerpt from the NY Times: "In a regulatory filing on Thursday, Mike Lazaridis and Douglas Fregin said that they were considering a bid for the 92 percent of the company that they do not own. ... Their potential bid joins a growing list of expressions of interest in the company, which recently reported a $1 billion quarterly loss caused by the market's rejection of new smartphones that were supposed to revive BlackBerry's prominence. Fairfax Financial Holdings of Toronto has made a conditional, nonbinding offer to buy the 90 percent of BlackBerry shares it does not own for $9 each. That would value the company at about $4.7 billion."
dryriver writes "Committee To Protect Journalists reports: U.S. President Barack Obama came into office pledging open government, but he has fallen short of his promise. Journalists and transparency advocates say the White House curbs routine disclosure of information and deploys its own media to evade scrutiny by the press. Aggressive prosecution of leakers of classified information and broad electronic surveillance programs deter government sources from speaking to journalists. In the Obama administration's Washington, government officials are increasingly afraid to talk to the press. Those suspected of discussing with reporters anything that the government has classified as secret are subject to investigation, including lie-detector tests and scrutiny of their telephone and e-mail records. An 'Insider Threat Program' being implemented in every government department requires all federal employees to help prevent unauthorized disclosures of information by monitoring the behavior of their colleagues. Six government employees, plus two contractors including Edward Snowden, have been subjects of felony criminal prosecutions since 2009 under the 1917 Espionage Act, accused of leaking classified information to the press—compared with a total of three such prosecutions in all previous U.S. administrations. Still more criminal investigations into leaks are under way. Reporters' phone logs and e-mails were secretly subpoenaed and seized by the Justice Department in two of the investigations, and a Fox News reporter was accused in an affidavit for one of those subpoenas of being 'an aider, abettor and/or conspirator' of an indicted leak defendant, exposing him to possible prosecution for doing his job as a journalist. In another leak case, a New York Times reporter has been ordered to testify against a defendant or go to jail."
One day I discovered that I needed to design an API that would upload files from a client to a server. I work on the Russian Web mail provider at Mail.Ru and deal with JavaScript in all its aspects. A basic feature of any Web mail service is of course attaching a file to an email.
Mail.ru is no exception: We used to have a Flash uploader, which was rather good, but still had some problems. HTML markup, graphics, business logic and even localization were all built into it, and it made the uploader pretty bloated. Furthermore, only a Flash developer could make any changes to it. We realized that we needed to build something new and different. This article covers all of our steps in creating what we consider to be a better tool for the job.
Anyone who has ever written a Flash uploader knows what problems it always brings:
Cookies for authentication are difficult to manage because depending on browser and operating system they have erratic behaviour in Flash (i.e. cookies are not shared between HTTP requests and FileReference upload/download). Officially Flash supports cookies only in IE and they will not be shared among other browsers, or they will be retrieved from IE;
There are assumptions that with Flash, cookies are read from Internet Explorer although it’s not officially confirmed;
Over the last four years, we've all read heated debates about various features and options of HTML5, including the File API. Many publications touch on this API, and we have a few functioning examples of it. One would think, "Here's a tool that solves the problem." But is it as easy as it looks?
Well, let's look at the browser statistics for Mail.Ru. We have selected only browser versions that support the File API, although in some cases these browsers do not provide full support for the API.
The diagram shows that a bit more than a whopping 87% of browsers indeed support the File API:
Chrome 10+
Firefox 3.6+
Opera 11.10+
Safari 5.4+
IE 10+
Also, we shouldn’t forget about mobile browsers, which are becoming more popular by the day. Take iOS 6+, for example, which already supports the File API. However, 87% is not 100% and in our case it wasn’t feasible to entirely abandon Flash at this point.
So, our task evolved to building a tool that combines two techniques (File API and Flash) and that lets the developer kind of… ignore the way files are actually uploaded. During the development process we decided to combine all preliminary development into a separate library (a unified API) that would work independent of the environment and could be used wherever you like, not only in our service.
So let's go into detail on a few specifics of the development process and see what we’ve built, how we built it and what we’ve learned along the way.
Retrieve File List
Basics first. Here is how files are received in HTML5. Very simple.
<input id="file" type="file" multiple="multiple" /> <script> var input = document.getElementById("file"); input.addEventListener("change", function (){ var files = input.files; }, false); </script>
But what do you do if you have only Flash support and no File API? The basic idea that we had for users with Flash support was to make all interactions go through Flash. You couldn't simply call up a file-selection dialog. Due to the security policy, the dialog would open only after the Flash object has been clicked.
This is why the Flash object would be positioned above your target input. Then, you would attach a mouseover event handler to the document, and put the Flash object into the input's parent element when the user hovers over it.
The user would click the Flash object, open the file-selection dialog and select a file. Data would be transferred from Flash to JavaScript using ExternalInterface. The JavaScript would bind the data received with the input element and emulate the change event.
All further interactions between JavaScript and Flash are performed through the only available method in Flash. The first argument is a command name. The second parameter is an object with two mandatory fields: the file id and the callback function. The callback is called from Flash once the command is executed.
The combination of the two methods results in the API, which is very similar to native JavaScript. The only difference is in the way files are received. Now we use the API method because the input has the files property only when the browser supports HTML5 and the File API. In the case of Flash, the list is taken from the data associated with it.
<span class="js-fileapi-wrapper" style="position: relative"> <input id="file" type="file" multiple /> </span> <script> var input = document.getElementById("file"); FileAPI.event.on(input, "change", function (){ var files = FileAPI.getFiles(input); }); </script>
Filter
Usually, file uploading comes with a set of restrictions. The most common restrictions are on file size, image type and dimensions (width and height). If you look around solutions for this issue, you’ll notice that validation is usually done on the server, and the user would receive an error message if the file doesn't match any restrictions. I tried to solve this problem in another way, by validating files on the client side — before the file has started uploading.
What's the catch? The catch is that when we initially get the list of files, we have only the bare minimum of information about the files: name, size and type. To get more detailed information, we need to actually read the files. To do that, we can use FileReader.
So if we play around with FileReader, we’ll probably come up with the following filtering technique:
FileAPI.filterFiles(files, function (file, info){ if( /^image/.test(file.type) ){ return info.width > 320 && info.height > 240; } else if( file.size ){ return file.size < 10 * FileAPI.MB; } else { // Unfortunately, there is no support for File API or Flash. We have to validate on the server. // This case is rather rare, but we must consider it as part of the project. return true; } }, function (files, ignore){ if( files.length > 0 ){ // ... } });
You can get the file's dimensions "out of the box," as well as a way to collect all of the data you'll need:
FileAPI.addInfoReader(/^audio/, function (file, callback){ // collect required information // and call it back callback( false, // or error message { artist: "...", album: "...", title: "...", ... } ); });
Process Images
In developing the API, we also wanted a convenient and powerful tool that would allow us to work with images — to create previews, crop, rotate and resize, for example — and whose functionality would be supported in both HTML5 and Flash.
Flash
First, we needed to understand how to do this via Flash — that is, what to send to JavaScript to build the image. As we of course know, this is usually done using the data URI. Flash reads the file as Base64 and transfers it to JavaScript. So we add data:image/png;base64 to it, and use this string as the src.
A happy ending? Unfortunately, IE 6 and 7 do not support the data URI, and IE 8+, which supports the data URI, cannot process more than 32 KB. In this case, JavaScript would create a second Flash object and transfer the Base64-encoded content into it. This Flash object would restore the image.
HTML5
In the case of HTML5, we would get the original image first, and then perform all required transformations using the canvas. Getting the original image can be done in one of two ways. The first is to read the file as a dataURI using FileReader. The second is to use URL.createObjectURL to create a link to the file, which is bound to the current tab. Of course, the second option is good and is enough to generate a preview, but not all browsers support it. Opera 12, for example, does not support the accompanying URL.revokeObjectURL, which informs the browser that there is no need to keep a link to the file anymore.
When we combine all of these methods, we get a class of FileAPI.Image:
crop(x, y, width, height)
resize(width,[height])
rotate(deg)
preview(width, height) — crop and resize
get(callback) — get final image
All of these techniques fill the transformation matrix, which is applied only when the get() method is called. Transformations are performed using the HTML5 canvas or in Flash (when the file is uploaded through the Flash interface).
Here is our description of the matrix:
{ // parameters fragment of original sx: Number, sy: Number, sw: Number, sh: Number, // destination size dw: Number, dh: Number, deg: Number }
And here is a short example:
FileAPI.Image(imageFle) // returns FileAPI.Image instance .crop(300, 300) // crop the image width and height .resize(100, 100) // resize to 100x100px .get(function (err, img){ if( !err ){ // Append the result in the DOM-node (<div id="images">). images.appendChild(img); } });
Resize
Digital cameras emerged long ago and are still very popular. Some cost about $20 to $30 and can take photos with a resolution of 10 MP and up. We tried to downsize photos taken with such cameras, and this is what we ended up with:
As you can see, the quality is rather poor. However, if we first resize it in half and then do it again several times until we get the desired dimensions, then the quality is much better. This method is actually quite old, and in fact a consequence of the “nearest neighbor” interpolation; when compressing images at once, we are losing the quality of the image really “quickly”.
The difference is evident:
Apply a slight sharpening effect, and the image will be ideal.
We also tried other variations, such as bicubic interpolation and the Lanczos algorithm. The result was a bit better, but the process took more time: 1.5 seconds versus 200 to 300 milliseconds. This method also yielded the same results in canvas and Flash.
Uploading Files
Now let's sum up our various options for uploading a file to the server.
iframe
Yes, we still use this many years later:
<form target="__UNIQ__" action="/upload" method="post" enctype="multipart/form-data"><!-- This bit is often forgotten --> <iframe name="__UNIQ__" height="240" width="320"></iframe> <input type="file" name="files" /> <input type="hidden" name="foo" value="bar" /> </form>
At first, we create а form element with a nested iframe inside. (The form's target attribute and the name of the iframe should be the same.) After that, we move the input[type="file"] into it because if you put a clone there, it will turn up empty.
To illustrate this issue, imagine that you load a file via iframe. We could use something like this:
var inp = document.getElementById('photo'); var form = getIFrameFormTransport(); form.appendChild(inp.cloneNode(true)); // send a "clone" form.submit();
However, such input would be “empty” in IE, i.e. it wouldn’t contain the selected file, which is why we need to “send” the original file and replace it with a clone.
That is why we subscribe to events via API methods, to save them during cloning. Then, we call form.submit(), and put the contents of the form through the iframe. We'll get the results using JSONP.
var inp = document.getElementById('photo'); var cloneInp = inp.cloneNode(true); var form = getIFrameFormTransport(); // Insert the "clone" after the "original" inp.parentNode.insertBefore(cloneInp, inp); form.appendChild(inp); // Send the "original form.submit();
Yes, erratic indeed.
Flash
In principle, everything is quite simple: JavaScript calls the method from the Flash object and passes the ID of the file to be uploaded. Flash, in turn, duplicates all states and events in JavaScript.
XMLHttpRequest and FormData
Now we can send binary data, not just text data. This is easy:
// collect data to be sent var form = new FormData form.append("foo", "bar"); // the first parameter is the name of POST-parameter, form.append("attach", file); // the second parameter is the string, file or Blob // send to server var xhr = new XMLHttpRequest; xhr.open("POST", "/upload", true); xhr.send(form);
What if, for example, we want to send not a file, but canvas data? There are two options. The first, which is easiest and correct, is to convert canvas to Blob:
canvasToBlob(canvas, function (blob){ var form = new FormData form.append("foo", "bar"); form.append("attach", blob, "filename.png"); //not all support the third parameter // ... });
As you can see, this trick is not universal. In case canvas doesn't have Canvas.toBlob() (or it cannot be implemented), we will choose another option. This option is also good for browsers that do not support FormData. The point is to create the multipart request manually and then send it to the server. The code for the canvas would look like this:
var dataURL = canvas.toDataURL("image/png"); // or result from FileReader var base64 = dataURL.replace(/^data:[^,]+,/, ""); // cut the beginning var binaryString = window.atob(base64); // decode Base64 // now get together multipart, nothing complicated var uniq = '1234567890'; var data = [ '--_'+ uniq , 'Content-Disposition: form-data; name="my-file"; filename="hello-world.png"' , 'Content-Type: image/png' , '' , binaryString , '--_'+ uniq +'--' ].join('\r\n'); var xhr = new XMLHttpRequest; xhr.open('POST', '/upload', true); xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=_'+uniq); if( xhr.sendAsBinary ){ xhr.sendAsBinary(data); } else { var bytes = Array.prototype.map.call(data, function(c){ return c.charCodeAt(0) & 0xff; }); xhr.send(new Uint8Array(bytes).buffer); }
Finally, our efforts result in the following method:
var xhr = FileAPI.upload({ url: '/upload', data: { foo: 'bar' }, headers: { 'Session-Id': '...' }, files: { images: imageFiles, others: otherFiles }, imageTransform: { maxWidth: 1024, maxHeight: 768 }, upload: function (xhr){}, progress: function (event, file){}, complete: function (err, xhr, file){}, fileupload: function (file, xhr){}, fileprogress: function (event, file){}, filecomplete: function (err, xhr, file){} });
This has a lot of parameters, but the most important one is imageTransform. It transforms images on the client, and it operates via both Flash and HTML5.
And that's not even half of the story. We can have multiple imageTransforms:
This means that three copies (besides the original) will be sent to the server. What for? If you can transfer the load from the server to the client, it’s a good idea to do it. The server should probably only minimally validate input files. First of all, you are not only removing the load, but also avoid logic on the server, completely moving it to the client.
Second, if the file doesn’t have to get uploaded to the server, we save bandwidth. In addition, there are often problems when it isn’t possible to make further processing on the server, such as integration with third-party services (Amazon S3, for example). In our experience, it’s OK to move the additional logic that previously was managed server-side to the client.
The upload function also calls back an XMLHttpRequest-like object; that is, it assumes some properties and methods of XMLHttpRequest, such as:
status HTTP status code
statusText HTTP status text
responseText server's reply
getResponseHeader(name) get header of the server's reply
getAllResponseHeaders() get all headers
abort() abort upload
Although HTML5 allows you to upload several files in one request, standard Flash allows only file-by-file uploading. Moreover, in our opinion, uploading files in a batch proved not to be a good idea. For one, Flash doesn’t support this, and we wanted to have an identical behavior for both Flash and HTML5. Second, the user might simply run out of memory and the browser will fail.
XMLHttpRequest, which has called back the upload, is a proxy XMLHttpRequest, in fact. Its methods and properties reflect states in the file currently being uploaded.
Final Word
I'll end with a small example of how we let users upload files using drag’n'drop:
<div id="el" class="dropzone"></div> <script> if( FileAPI.support.dnd ){ // element where you can drop the files var el = document.getElementById("el"); // subscribe to events associated with Drag'n'Drop FileAPI.event.dnd(el, function (over){ // method will be activated when you enter/leave the element if( over ){ el.classList.add("dropzone_hover"); } else { el.classList.remove("dropzone_hover"); } }, function (dropFiles){ // the user has dropped the files FileAPI.upload({ url: "/upload", files: { attaches: dropFiles }, complete: function (err, xhr){ if( !err ){ // files are uploaded } } }); }); } </script>
It took us quite some time to develop the library. We worked on it for about 5 months since it was a little side thing that we had to finish aside from the regular work. The main headache was caused by the little details that different browsers had. Chrome, Firefox and IE10+ were just fine, but Safari and Opera had very different behaviors from version to version, including inconsistencies on Win/Mac platforms. Still, the main problem was to actually combine all three technologies — iframe, Flash, HTML5 — to create a bulletproof file uploader.
The library is available on GitHub and we’ve published a documentation as well. Bug reports and pull requests are more than welcome!
angry tapir writes "Seven top European Union judges have ruled that a leading Internet news website is legally responsible for offensive views posted by readers in the site's comments section. The European Court of Human Rights found that Estonian courts were within their rights to fine Delfi, one of the country's largest news websites, for comments made anonymously about a news article, according to a judgment."
Bismillah writes "At the MIT Technology Review EmTech conference, Qualcomm announced that the company and partners will design and make neural processing units or NPUs starting next year. NPUs mimic the neural structures and how the brain processes information in a massively parallel way, while being extremely power efficient, and may end up in self-learning devices."
BigBadBus writes "Putting an end to months of speculation, the BBC announced at a press conference today that it had recovered 9 previously lost episodes of Dr.Who, from the Patrick Troughton era (1966-69). The episodes complete 'The Enemy of the World' and almost complete 'The Web of Fear' (leaving one episode outstanding). The episodes were found in a relay station in Nigeria by Phillip Morris; previously Nigeria had been checked and had returned 6 lost episodes in 1984. The episodes are now available from UK and US iTune stores and can be for pre-ordered from Amazon.co.uk"
RainLoop is a Free, modern & fast web-based email client. With modest system requirements, decent performance, simple installation and upgrade, no database required – all these make RainLoop Webmail a perfect choice for your email solution.
Freecns Cumulus includes over 100 weather specific icons which are shipped as PNG, PDF, EPS and SVG. In addition the pack comes along with grey, black and colored icons. The best of it: It is completely free.
curtwoodward writes "Stop drooling over that new iPhone. Put away the fancy tablet. Because the real hardcore nerds find that stuff 'boring' and 'mind-numbing,' says Mary Lou Jepsen, head of the display division at secretive R&D lab Google X. At MIT's EmTech conference, Jepsen said the next generation of 'moonshot' tech is much more exciting and interesting. That includes Google X projects like the driverless car, Project Loon, a stratospheric balloon-based wireless network, and Google Glass."
With so much going on in the industry, there is probably that one topic that you’d love to finally understand but never had time for. Or your company has a problem, and you aren’t sure how to address it? Well, we’ve got your back with a line-up of hands-on full-day workshops in London and Berlin — just for you.
Workshops in London, UK
Visual Design EssentialsbyDan Rubin Action and intent—that's what the great designers focus on. In this workshop, you’ll learn techniques on how to manage the process, translate ideas into designs and even how to deliver a constructive critique. Read more…
Responsive DesignbyVitaly Friedman In this workshop, Vitaly will present practical techniques, clever tricks and useful strategies from real-life projects that you will definitely find quite useful when working on any responsive design project. Read more…
The Front-End WarriorbyAddy Osmani This is a workshop aimed at front-end intermediates who want to learn more about how modern front-end tooling can help save their time and improve (nay, automate) their front-end development workflow. Read more…
Adaptive InterfacesbyAaron Gustafson By being flexible in our approach and embracing the unknown, we can create user experiences that are intended to vary from device to device, browser to browser, and network to network. Read more…
Node.JSbyRemy Sharp This workshop is a fully packed day of learning resources and exercises to get you quickly up and running with all the fundamentals you need to create your own Node.js-backed application. Read more…
RWD WorkflowbyStephen Hay This workshop is geared toward designers who aren’t afraid of stepping out of their comfort zone, as well as front-end developers who are heavily involved in the design process. Read more…
Shipping Your ProductbyRachel Andrew In this workshop you will learn from Rachel’s experience in launching a product, creating an action plan tailored to your own product idea, listing the things you will need to do to launch your own product, and more! Read more…
Prototyping For DesignersbyDan Rubin With the help of Dan’s workshop, you’ll learn how to prepare for and perform a basic usability test, and tips on how to incorporate testing into your existing design workflow. Read more…
This isn’t the final list, though. Even more Smashing full-day workshops are underway — please stay tuned! It would be our great pleasure to personally meet you at one of the workshops. If you, your colleague, boss, relative, neighbor or anyone else has a question, feel free to drop us an email. We aren’t going anywhere, you know.
Cheers, and stay smashing! Cat, Nadja, Jan & Markus
Is sketching by hand more than a nostalgic activity? How is paper any different from a screen, especially when hardware is becoming more and more sophisticated? Is improving your hand-sketching skills really worthwhile when high-tech software is advancing every day? What difference can a pencil possibly make?
Everyone seems to have a strong opinion about hand-sketching these days. Some absolutely hate the thought of putting their ideas to paper because they can't draw to save their lives. Others couldn't imagine their creativity surviving without it. Love it or hate it, there's much more to a sketchbook than old-school charm.
Here's the thing. From personal experience, I know that sketching on paper has something powerful about it that takes my designs to the next level. I've spent hours in front of both computer screens and sketchpads, and something about the latter always keeps me going longer, thinking more clearly, progressing further and designing better.
To understand why hand-sketching makes such a difference for me and many designers I know, I did some research. Here's what I found.
External Memory: Take A Load Off Your Mind, Literally
Cognitive psychologists have been studying the impact of sketching on brain functioning for years, and with good reason: Putting ideas to paper is a powerful way to extend one's memory. Back in 1972, Allen Newell and Nobel Prize winner Herbert Simon studied long-term memory, short-term memory and — here's where it gets interesting — "external" memory. They argued that representations such as diagrams and sketches serve our external memory and reduce the burden that we experience when recalling ideas and problem-solving.
Flexibility: Hand-Sketching Improves Your Ability To Restructure Ideas
Consider your initial idea for a project. At this point, it exists only in your mind. All of a sudden, you start giving it (physical) shape in what Jill Larkin and Herbert Simon call "external representations." You're basically pulling the idea from your mind and recording it somehow. As long as the idea is in your mind, the number of changes and improvements you can mentally process is limited. Your idea won't get anywhere unless you manipulate and enhance it.
External memory aids, such as sketches and diagrams, can help us overcome the limited capacity of our short- and long-term memories.
Here's where hand-sketching saves the day: It enables us to externalize our mental images and achieve something that Ilse Verstijnen calls "restructuring." Verstijnen works in the Psychological Laboratory at the University of Utrecht and has coauthored several articles about the relationship between imagery, perception and sketching.
Restructuring transforms one configuration into another, and in scientific studies, advanced hand-sketchers score highest at restructuring when they are allowed to sketch. In an experiment by Verstijnen, sketchers were shown to be better than non-sketchers at modifying their initial ideas and coming up with novel changes.
Because of our brain's limited processing capacity, externalizing our ideas on paper makes it easier to restructure them, transforming the initial structure into a new one.
Another study by researcher Zafer Bilda and his group at Bilkent University in Turkey compared designers' cognitive processes when sketching on paper versus using software. The study identifies several significant differences: Designers who used paper changed their goals and intentions more frequently and engaged in a higher number of cognitive actions. Changing goals and intentions while sketching is vital because it enables you to pivot your initial idea and to be versatile in your approach.
Interestingly, these results may have less to do with the way we are wired than with the way we have been educated. Can you remember how you first learned to draw, how all of your design courses required physical sketchbooks? That's right, most of us learned to sketch on paper — and this might actually have affected the way our brain deals with it.
Here comes another buzzword, from our friends in behavioral psychology: conditioning. If paper was one of the first creative stimuli in your life (to the point that, as soon as you saw a blank sheet, you felt the urge to scribble), then it should come as no surprise that your sketching behavior is different on paper than on screen. Regardless of your philosophy of human behavior, we can all agree on one thing: paper has been around far longer than the digital screen.
Don't get me wrong: Developers of digital sketching devices out there are definitely raising their game and making the lives of many designers easier in exciting, innovative ways. Manufacturers are making the lighting, size and weight of tablets feel unbelievably similar to paper. They've come up with ways to make graphic tablets sensitive to stylus pressure and be capable of digitizing paper sketches instantly. As the technology becomes more sophisticated, we can expect better digital sketching experiences. WACOM, a graphic tablet manufacturer, invites sketchers to tag their creations on Twitter with the #madewithwacom hash tag.
Serendipity: Happy Accidents From Unfinished Strokes
When was the last time you sketched a perfect image? It's safe to say that most of us do not aim for perfection with a pencil and sketchbook. And that is exactly what makes a pencil stroke different from a vector.
Jonathan Fish and Stephen Scrivener authored "Amplifying the Mind's Eye: Sketching and Visual Cognition," in which they introduce the idea that "indeterminacies in Leonardo's sketches elicit mental imagery because automatic mental recognition mechanisms attempt to complete the missing parts and match precepts to memory images."
Hand-sketching results in inconclusive strokes that open new doors to creativity.
Consider every time you've left unfinished strokes, gray ideas over top solid shapes, quick side queries, blank spaces, wobbly lines and figures. Happens all the time, right? These indeterminacies, or "flaws," which reflect our indecision, are great pointers to new design directions. We lose these when we opt for pixel perfection.
Group Thinking: Connecting Brains Via Sketches
A group of scientists in the Netherlands, led by Remko van der Lugt, observed four idea-generation meetings in which participants used one technique that involved writing and another one that involved sketching. They concluded that sketching stimulates group creativity by enabling individuals to reinterpret their own ideas further and to facilitate other people's access to those ideas once they are brought to the table.
Collaborating with others in generating concepts is easier when we share sketches that are flexible, unsettled and, thus, full of possibilities.
Not only does hand-sketching improve the idea-generation process, but it provides an effective, visual language that makes it easier for others to understand, comment on and integrate your ideas. This might be even more important in cross-cultural groups, for whom visual sketches can bridge gaps of understanding.
Effectiveness: Better Design Outcomes
Does sketching like a maniac guarantee a better design? The easy answer is no. The subtler answer is that, in certain circumstances, sketching like a mad person could result in a better design. Yes, you read that right.
A useful design mantra is, "I haven't failed. I've just found a thousand sketches that don't work."
I ran into this idea while reading one of Maria C. Yang's studies. She tracked the sketches of a group of engineering students in the idea-generation phase and measured the results according to their final grades and their performance in a contest. She found that the number of concepts that students generated, as evidenced by their sketches, correlated to better design outcomes as long as two things held true: first, the sketches included dimensions and, secondly, the sketches that were significantly tied to the outcome were generated in the first quarter of the cycle (i.e. they were early sketches).
Concentration: Ready, Set, Sketch!
Were you ever in the middle of a major design breakthrough and then were suddenly interrupted? Concentration is key for designers because the creative process is anything but straightforward. The process requires a strong and rare connection between our thoughts, hands and source of inspiration. Its rarity is, indeed, the reason why some of us don't sleep.
Well, that and deadlines.
There is evidence that sketching aids concentration. Jackie Andrade, of the University of Plymouth's School of Psychology, tested whether doodling correlated to higher levels of concentration among 40 participants, who tested while taking a telephone call. While we can define doodling as aimlessly sketching patterns and figures unrelated to the primary task, her discovery that it can reduce daydreaming, increase concentration and curb boredom is fascinating.
This helps to explain why some of us find value in carrying our sketchbooks everywhere, pulling them out in the least expected places and in the middle of completely unrelated events.
To recap, sketching stimulates us to a comfortable level — enough to keep us awake, concentrated and engaged. As if this weren't enough, other studies have found that subjects who consume information on paper were significantly less stressed and tired than those who use screens. Researchers from the University of Gothenburg argued that those who were looking at screens may have been more exhausted because of the "dual-task effect."
It makes sense. When using a computer, you have to not only complete the task itself, but also figure out your way around the hardware and software. For those of us who learned to sketch on paper, this learning curve feels a lot like stress. For those who are comfortable with graphic tablets and other sophisticated input devices, stress is probably not an issue.
Montessori education encourages children to learn concepts with all five senses.
Some believe that we reach deeper levels of concentration and develop richer concepts when our own hands are the hardware. Regina Rowland, who teaches the "Idea Visualization" course at the Savannah College of Art and Design, has a unique perspective on the matter:
What I noticed when we moved into the digital world was that exercises all started to look the same. All of a sudden, everybody was designing in Photoshop and the quality of the work started changing dramatically. Before, exercises had a character that was unique in each person. I don't want to ditch digital; there's stuff in digital that we could never do by hand. But I do think that when you learn how to experience the world in its visual form, you realize that it is important to have a real, multi-sensorial experience and not an abstracted version of the experience.
With digital, you are looking at a screen with 2-D shapes and no interaction. I've realized that students who go into a sensorial experience with letters and shapes learn better than those who abstract them.
Now, there are nerves in the tips of your fingers, and I believe that when people draw with their hands it makes a different impression in the brain. There are references to this idea in Montessori education: It is through sensorial experiences that you form structures in your brain, and therefore all their activities and teaching tools are things that children have to do with their fingers.
Talent: Enhancing The Graphic Library In Your Mind
What happens when you continually draw and connect symbols as you sketch? What happens when your brain tries to recall shapes that are appropriate to the idea you are trying to externalize? It isn't hard to see that the better you become at translating imagery from your mind to paper, the more visual resources you will have to draw on and the easier it will be to retrieve them in the future.
Ian Storer, who lectures in the Department of Design and Technology at Loughborough University, came up with this idea of a "graphical library" that designers can combine and restructure to generate concepts. He states in his paper that "creative sketching and designing requires a body of knowledge to base new ideas upon."
Would I like to nurture a powerful mind for design? Yes, please.
Hand-sketching forces you to access and cultivate a unique visual library in your mind. As much as I love computers, the Internet and the almighty search engine, would I like to nurture a more powerful mind for design? Yes, please.
Problem-Solving: Unlock Solutions With Visual Synthesis
It is fair to say that most of the problems we face as designers are confounding, fuzzy, indeterminate — the types of problems that common logic stumbles on.
I dare anyone to try to solve these types of problems using only simple paragraphs of text. Writing falls short for most design problems. Jonathan Fish explains this brilliantly in his article "Cognitive Catalysis: Sketches for a Time-Lagged Brain." He compares our design problems to trees whose trunk and branches are vague or abstract descriptions and whose leaves are images that represent "depictive concrete thought."
Jonathan Fish explains that our design problems are like trees whose trunk and branches are abstract (usually textual) descriptions and whose leaves are concrete depictions (i.e. images). Most design solutions aim to reconcile these.
He goes on to explain that when you try to solve a design problem that is full of uncertainties, "both description and depiction are interdependent."
Niall Seery and his colleagues at the University of Limerick propose the best definition of sketching that I've ever read:
“Sketching is a sense-making tool which supports the synthesis of visual imagery.”
Ready to improve your flexibility, serendipity, group thinking, effectiveness, concentration, talent and problem-solving? The eight benefits we've covered here may be just a few sketches away!
This bundle is called “Zero Bundle“, and it's called zero simply because that's what it costs zero. We all love cheap resources, but free is always better, isn't it? it’s an awesome bundle of free design goodies, with icons, textures, PSDs and much more.
The bundle will remain active for only 30 days, so download yours today so you don't miss out on this great opportunity for accessing hundreds of beautiful icons. All icons can be used for personal and commercial uses but cannot be redistributed.
CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don’t address the major problems that Web developers have been complaining about for what seems like an eternity.
Flexboxis not another CSS framework. Instead, its purpose is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox. View the styles in the Web inspector or dive into the source to see just how easy CSS layout will become.
Oct 9th 2013, 10:33, by Angela Craven and SuAnne Hall
Behind every successful design is a dynamic creative team, and it takes all kinds of personalities and skills to get the job done. However, the culture and expectations of a design agency are often largely centered on one outspoken, gregarious personality. Things such as group brainstorming, on-the-fly presentations and open workspaces have become the norm in most design agencies.
But the stereotypical extrovert is just one of the personalities that make up a successful team. A lot of people who excel at and are passionate about design — specifically UX design — are actually introverts. This means that, in fostering cultures that celebrate the extrovert, design teams could be losing out on the brainpower of folks who contribute at their highest level when they have quiet and privacy to focus.
So, how can we better balance our teams and elevate extroverts and introverts alike?
As introverted UX designers ourselves, we've been unsurprisingly passionate about finding answers to this conundrum. So, we set out to discover just how many designers tend to be more of the Lone Ranger type, and also uncover what makes them successful, what makes them tick and how they use their introverted qualities to round out their teams and create great designs and experiences.
We also uncovered some great anecdotes and debunked a few myths along the way. We poured over findings from a survey of more than 100 people about the topic, as well as six one-on-one interviews, a group discussion (ironically) with 20 UX designers and a handful of anecdotes from some of our introverted colleagues and friends.
Our goal in speaking with introverted designers and embarking on this project was not to publish a scientific study, but rather to collect stories and share how others with such similarities use their strengths and overcome obstacles. If you find yourself to be on the extroverted end of the spectrum, we hope to illustrate for you the differences in the way your introverted team members, users and clients communicate and work, so that you might find additional ways to use those differences in skills to everyone's advantage.
Here's what we learned.
So, What Is An Introvert Exactly?
Although there is no concrete definition of introversion, a common observation among experts is that introverts derive energy from being in solitude and are more comfortable with less stimulation. Originally categorized by Carl Jung, an introvert is defined as a person whose interest is generally directed inward toward their own feelings and thoughts, versus the extroverted focus on the outside world.
In her book, Quiet: The Power of Introverts in a World That Can't Stop Talking (the book that inspired our article and project), Susan Cain explains that introverts recharge their batteries by being alone, whereas extroverts recharge by socializing, and that "introverts often work more slowly and deliberately. They like to focus on one task at a time and can have mighty powers of concentration." The solitude is what introverts crave, which fosters a strong combination of creativity and persistence.
Cain's research on introversion paints a picture of a world in which introverts not only tend to possess incredibly valuable traits, such as persistence, concentration, insight and sensitivity, but make up a powerful force of the world's most impactful thinkers — folks like Albert Einstein, Rosa Parks, Steve Wozniak, Charles Darwin, Steven Spielberg and Mahatma Ghandi.
If you are wondering whether you fall into the introvert category, see whether some of the following qualities cited in Susan Cain's "Quiet Quiz" resonate with you:
You prefer one-on-one conversations to group activities.
You often prefer to express yourself in writing.
You enjoy solitude.
People tell you that you're a good listener.
It's important to note that introversion and extroversion appear along a spectrum and are not two extreme and specific buckets of traits. People are complex, of course, and no two introverts or extroverts are exactly alike. We have met some introverts who are extremely outspoken, and some extroverts who describe themselves as antisocial or shy. Many extroverts find that they thrive just as well in long periods of focused solitude as their introverted counterparts.
Exploring UX Through The Lens Of The Introvert-Extrovert Spectrum
We were excited to apply the newfound idea of exploring which traits of introverts and extroverts play as strengths in our field of UX design in an agency or client-based setting. We began our research by facilitating a focus group-type conversation with 20 people in the UX field, asking them to identify themselves as an introvert, extrovert or ambivert (someone who possesses characteristics of both introverts and extroverts). We then asked them to share their stories and opinions on how they best work and what they find easy or challenging in the UX industry.
Because a large part of any UX professional's job is to study and evaluate processes that humans find either easy or hard, the differences in how all three types do their best work were naturally curious. While some felt energized by walking up to coworkers and initiating an organic conversation, others avoided such interaction by getting up at 4:00 in the morning just to be able to work in solitude.
Many introverts and ambiverts in the group mentioned the need to match the ease of their extroverted counterparts in taking a more persuasive and stronger stance with clients, or in being more at ease with the parts of the job that require a lot of socialization with clients and strangers. In fact, many even expressed pride in working hard to become a "converted extrovert".
True, it's important to practice getting out of your comfort zone and to be confident in expressing your ideas — but is attempting to change your introverted nature the only path to success for those who don't possess strong extroverted skills? How can we become more successful by recognizing and utilizing our differences as UX professionals?
In addition to the focus group, and in order to discover how introverted UX leaders (particularly in a client-focused agency) succeed in their roles, we also conducted an online survey with people in the tech industry to identify candidates to interview. Because of Cain's extensive research on the subject, we chose to ask the questions from her Quiet Quiz in order to determine who is an introvert, extrovert or ambivert. Of the more than 110 designers, developers, project managers and other professionals in the tech industry who took the survey, 55% were introverts, 31% ambiverts and only 14% turned out to be extroverts.
From that survey, we chose six leaders in the UX design industry who were willing to let us pick their brains in one-on-one interviews about what it takes to be successful as an introvert in a UX agency.
In our interviews, we discussed questions like these:
"What's your ideal work environment?"
"How do you work best with your coworkers and clients?"
"What kinds of introverted qualities help you in your job?"
"Which qualities can be challenging, and how have you dealt with those challenges?"
We heard deeply personal stories about lessons learned when going against one's natural tendency and pretending to be a gregarious and spontaneous conversationalist, and inspirational stories about how displaying quiet confidence can be effective when dealing with powerfully strong voices in a large meeting.
So many answers and experiences shared were so surprisingly similar that we knew we were on to something. We stumbled upon a subculture of sometimes proud, sometimes closeted introverted UX practitioners who all feel like they face similar challenges alone. Simply being asked questions about their job through the lens of introversion was enough to make most of our interviewees feel less alone and more empowered. We hope these findings inspire others in similar positions and enlighten all of us on the introvert-extrovert spectrum of the amazing differences in strengths we all possess, which, when combined, make up super-teams of UX professionals.
The Powers Of Quiet Confidence
Not surprisingly, the common threads in our own findings match closely with the introverted traits identified by Cain and other experts in the field. So many of these traits help a UX designer in their career. But before getting into some of the trends that we noticed in our one-on-one conversations, we should note that the following traits identified are also found in many who identify themselves as extroverts and ambiverts. No matter where we are on the introvert-extrovert spectrum, we all could stand to celebrate the side of us that usually takes the back seat — that silent yet powerful creative force that helps us to process and solve complicated UX problems.
The focus of our qualitative research was on finding commonalities among UX designers who strongly identify with an introverted lifestyle. We felt strongly about encouraging others to celebrate and appreciate their qualities. What do introverts do well that makes them natural-born UX people, and what can we learn about these talents in order to bring about better communication, better UX teams and, ultimately, better products in all of us?
Here are some solid strengths that we uncovered from conversations with introverted UX leaders.
Introverted UX'ers Are Great Listeners
Because they tend to be quiet, reflective and observant in their day-to-day affairs, the information-gathering skill of the UX designer is a natural-born capacity of the introvert. The interviewees we spoke with expressed gratitude that they possess the gift of anti-gab, instead feeling at home in the role of asking questions, observing conversations and deriving true meaning from their observations.
They Are Relatively Humble
Because they would rather avoid the spotlight, introverts are comfortable in the shadow, elevating those around them. Some of our interviewees are not inclined to be upset if they are not publicly acknowledged for their good work, just as long as their ideas are being put to good use.
They Make Great Problem-Solvers
Thinking through the intricacies of a problem is not mundane to an introvert. On the contrary, they tend to find it exciting, as long as they have the time to analyze and problem-solve in solitude. This is, of course, a great asset when combing through a large amount of data to figure out how to create a great user experience for a product.
They Enjoy Putting Themselves in Other People's Shoes
Introverts tend to be naturally empathetic, which can be incredibly helpful in creating delightful experiences for end users.
They Over-Prepare
Introverts tend to take time to fine-tune their speaking points when presenting to clients. Additionally, they think ahead about possible questions that others might have about their work, instead of winging it and risking saying something they might regret later.
They Make Good Leaders
Contrary to the popular belief that extroverts make the best leaders, introverts also make great leaders — they just do it differently. Especially when running project workshops, our UX leaders prefer to lead through a more facilitative style, whereby they let others run with their ideas, gather consensus from all involved, and work through differences collaboratively.
They Can Read a Room
Their empathetic and sensitive nature helps introverts read a room and understand other people's reactions and emotions. Many of our interviewees expressed gratitude that they possessed this ability to pick up on the feelings of those around them, and to understand the general emotional atmosphere in a client or team meeting. This has been a huge asset in their communications throughout their careers.
How Introverts Can Set Themselves Up For Success
In our own experience as UX designers and from speaking with other introverted UX designers, knowing that these introverted qualities can be leveraged as strengths is half the battle. Additionally, managing stress, preparing thoughtfully and organizing your workspace and workflow to maximize creativity and productivity are important elements of success for all designers. However, introverted designers in particular can set themselves up for success in a few additional ways.
Take Time to Recharge
A common trend we found was that, even when a day full of interaction with others has been enjoyable and successful (such as in workshops, user interviews, collaboration with clients and teammates, or travel), finding time to be alone in order to recover and "recharge your battery" is regarded by introverts as a crucial "survival mechanism." One interviewee said, "I have a bank, and I need to spend time building up my reserves before and after travel. Being more self-aware of how these seemingly normal parts of the job can really pull on you after a while is helpful."
Guard Your Focus Time
Of the more experienced UX designers we spoke with, most had formulated a strategy for building focus time into their day. Many noted that finding a quiet place to think at an agency can be tough, and that putting on their headphones is a good way to drown out the noise around them. One designer we interviewed takes regular 10-minute breaks when she feels stuck; another said that his best ideas come in a slow burn after a meeting, in the shower or when taking a break during the day.
One introverted UX designer said she does everything she can to guard her thinking time ahead of travel and big meetings — she'll actually block her calendar so that she can process and plan alone. Everyone we spoke with loves having time to think through a problem on their own.
Prepare Well in Advance So That You Don't Have to Wing It
All six of the UX designers we interviewed take time to prepare — and often over-prepare — for occasions when they will be in the spotlight, whether running a workshop, speaking at a conference, or leading a roomful of clients to discuss a design. Their techniques include the following:
Make a checklist of items to do or discuss.
Plan ahead for what could go wrong or where people might get stuck.
Plan how to back up your ideas verbally before a meeting ("Always be thinking, 'When this question comes up, this is what I'm going to say.'")
Carve out some alone time, whether early in the morning, late at night, while commuting or by taking notes alone. Planning what you want to say and how to say it is helpful.
Seek Out an Environment That Is Equal Parts Quiet and Social
Almost all of our interviewees work best in environments that balance quiet space and social time with others. When asked about the office, most said they enjoy the open floor plan found in many design studios, as long as they are able to put on headphones or find a quiet area to focus without interruption. One UX designer said this:
“I actually like that there are not walls in the office. I like the culture and feel, but don't always like that there's no place to have quiet time. I like knowing there are people around, just not right next to me.”
How Best To Work With Introverts
Not surprisingly, introverts tend to prefer certain structures and ways of communicating over others. The most challenging type of communication is in large groups, in which more aggressive personalities, better suited to debating and persuading on the fly, tend to thrive.
Therefore, if you're an extrovert, making the most of the time available and getting great ideas from everyone might mean honing in on the quieter folks in the room to note their comfort level. If you're an introvert, effectively sharing your ideas could mean breaking down large client meetings into more frequent meetings with smaller groups, structuring workshops in a way that enables you to be a facilitator instead of a lecturer, and communicating in a style that comes more naturally to you.
Below are a few tips we gleaned from our conversations.
Introverts Thrive One on One and in Small Groups
Whether it's a whiteboarding session with teammates, a one-on-one user interview or a planning session with clients, introverts are invigorated by working with one other person or in a small group. This contradicts the notion that introverts prefer to work alone all of the time. Said one interviewee:
“I like to collaborate. If you're introverted, people think you just want to put your headphones on and hide, but that's not true at all.”
All of our interviewees recognize the value and benefit of collaboration, but they just find that collaborating with one other person or in a small group to be of greater value and less of an emotional drain. Much like pair programming, one person found their groove by practicing pair design:
“I believe in the value of pair design: The two of us could come up with a better solution. I believe in that. We all take in a different perspective and remember different things, and working it through with someone is valuable.”
The prospect of having a more impactful voice by speaking with one or a few people, versus working in a larger group, in which the most outgoing voice usually wins, is enticing. Said one person:
“I like internal design meetings, brainstorming sessions, small team whiteboarding sessions, where you poke holes in ideas and challenge them… It's a small group, and if you're lucky, you get paired with people who don't steamroll the entire process.”
After Collaborating, Introverts Need Time Alone to Process
Immediately after collaborating or interacting with others for a project, introverts get a lot of value from spending time alone to process their findings and to focus on their tasks:
“I like to gather, gather, gather, which is a social activity, then retreat to a cave, work on it, then bring it back. I need people and I gather info, but then I have to go be alone to work it out and process it and own it and come up with a solution to bring it back.”
This repetitive process of "gathering the pieces of the puzzle," taking them back to process them in solitude, before coming back with more ideas was consistent with all of our interviewees, who view it as a crucial element of success in their jobs.
They Strongly Dislike Aggressive Communication Styles (But Realize It's Sometimes Part of the Job)
When in a group in which a strongly opinionated voice is dominating the conversation, an introvert might naturally tend not to participate. Rapidly thinking on one's feet when arguing a point is a skill envied by many introverts.
"Debating doesn't work well for me," said one UX designer. "If I debate with you and you're an extrovert, you'll be perceived as the winner just because people will think you sound smart, and I'll pull out of the situation." Furthermore, the more sensitive and quiet style of introverts often clashes with the louder, more confrontational style of extroverts. One person said:
“I don't like confrontation… I really avoid it as much as I can. I found it challenging in my work, where you really have to go up against someone or throw down a design decision and justify what you've made.”
However, dealing with clients or coworkers whose style is confrontational is sometimes unavoidable. Figuring out what they can do to make such situations go more smoothly is a key survival strategy for the UX leaders we spoke with, and their advice to other introverts out there is plentiful.
Listen first. When dealing with an extroverted or even pushy personality, use your listening skills to help put yourself in an authoritative position.
“No one knows as much about the client as the client does… [When you] listen to them and hear their ideas, and make sure you have valid statements to back up your ideas, they will usually listen to you.”
Assume the role of a relayer of information, rather than the expert.
This critical piece of UX design can make the task of relaying a recommendation assertively a bit easier.
“It's never what I think. It's always about the user… I'm not saying no because you're wrong and I'm right, but I'm just saying what we heard in the research. I'm not the expert on your product, but I AM good at researching what your users want.”
Saying "I don't know" is OK.
“It has taken me a long time to get to the point where a client asks a question that I don't know the answer to and to be comfortable saying, "Gee, I don't know. Can you explain more?" Or, "I'll get back to you on that…" I've regretted saying something just because I felt like I had to have an opinion.”
Don't be afraid to ask for help. When dealing with a confrontational personality, one person said:
“In retrospect, I don't think I did a good enough job at expressing how I was really challenged to deal with this person. I didn't want to be perceived that I couldn't do it… Being introverted has an aspect to that. It's hard to admit vulnerability, and hard to know when it's OK to be vulnerable.”
Leverage your extroverted teammates.
“I love having extroverts on a team in situations where, if I'm stumbling on something, they're usually able to pipe in. It's nice to have extroverts who can make clients feel confident that we know what we're talking about.”
Leveraging The Quiet Side In All Of Us
Perhaps you lie towards the extroverted end of the spectrum but you work with or lead a team that includes introverts and want to find out how to leverage the strengths of the entire team. Or perhaps you work with introverted clients or users and wish there was a better way to get more immediate feedback from them.
You can get some tremendous benefits from understanding the skills and challenges of your introverted counterparts and from, consequently, leveraging their strengths. Your natural talent at communicating with others clearly, engagingly and persuasively, coupled with the tendency of introverts to quietly analyze their surroundings while hunkering down on the details, can make for a super-team of people with diverse qualities and skill sets and capable of high-quality results.
Here are some ideas to get the most out of working with your introverted teammates.
Recognize When Assertiveness or Eloquence Is Being Mistaken for a Good Idea in a Large Group
If you find yourself contributing often or leading discussions in which important decisions are being made, especially when interruptions and fast or loud exchanges are happening, try to slow down the discussion and provide a clear opportunity for others to ask and get answers. Note whether everyone's opinion has been voiced.
In "The Rise of the New Groupthink," an article also written by Susan Cain, she states, "Decades of research show that individuals almost always perform better than groups in both quality and quantity, and group performance gets worse as group size increases." Often times, the quietness of introverts in such settings indicates not so much a lack of interest or difference of opinion, but rather the challenge they face in matching the level of intensity in the meeting.
"Even if their intentions are good, but they're more passionate and aggressive, it can make me shut down," says one UX designer about the challenge of dealing with a confrontational style in meetings. Another explains that, "Nothing makes you feel more small than when others are talking over you."
A big obstacle to getting all great ideas on the table could simply be the aggressive communication style of some participants.
Understand That Introverts Are Not at Their Best When Put on the Spot
Instead of being forced to share their ideas in meetings, where conversation happens on the fly, introverts are often much more effective when they have even a short amount of time to think through a scenario first. In an agency, where a lot of group thinking and brainstorming is required, distributing the agenda in advance would help. This gives introverts the time to thoughtfully prepare and to more easily contribute to the meeting.
Our own interviewees expressed appreciation that we sent out our questions ahead of time so that they had time to think about scenarios and answers. When asked how she best functions when working with colleagues, one interviewee resolutely stated:
“I'm not a huge fan of meetings, but a well-structured meeting is not a bad thing. I like to go into a meeting with a really clear idea of why we're here and what we want to get out of this. How can I define the best way to utilize our time? If we can't figure that out, I'll reschedule.”
Take a Cue From Each Other
Sometimes simply recognizing each other's soft skills can have a monumental impact on a team's dynamic. Perhaps one person prefers to do the talking in contextual interviews, and another is more comfortable taking notes or organizing. Talking openly in order to know who prefers to take on which role in a project can make the working environment more pleasant and efficient.
Eventually, if we are open and humble enough to talk about our strengths and weaknesses with one another, we can take cues from how others work in order to become more comfortable employing those skills ourselves. For example, if you always want to work in a group to get things done, try out another method once: hold an initial and short group brainstorming session, then send everyone off to their "caves" to process the ideas by themselves, before coming back to discuss again. See whether this compromise of working together first and then in solitude is an asset to the group.
Likewise, your introverted counterparts are constantly observing the methods that come naturally to you as extroverts and are taking their own cues. As one introverted UX designer explained:
“[My extroverted colleague] just dives in. It came naturally for her to come in and set up a weekly meeting with the client. Now I do that, too — it seemed uncomfortable to me at the time. I appreciate how easy it is for her to network.”
Be Cool With Quiet
It's very clear that the successful introverted UX leaders we spoke with got to where they are not by attempting to change their nature, but rather by recognizing and using those introverted qualities to their advantage. Expressing confidence with clients and backing up your own ideas do not have to come from being the most persuasive debater or from an aggressive style.
One of the UX'ers we spoke with ended our interview by saying this:
“We need listeners. Be comfortable with your quiet. Be confident in your introversion. It's not a flaw. I used to see it as awkward. Over time, I've come to recognize the strengths it offers.”
We couldn't agree more.
Likewise, the UX world needs great communicators, multitaskers and risk-takers. We need people who are not afraid to shout out that UX makes the world a better place, who are not afraid to stir the pot by showing us exciting new ways to view our industry. To create a great and successful UX community, we need both loud and quiet, group work and solitude, intense singular focus and thinking on several planes at the same time.
In the very near future, we hope to hear about wildly successful designs delivered by UX teams that fully incorporate ideas from the quietest corners of the office, teams that respect both the quiet strengths and bold ingenuities that all personalities have to offer. Life is the richer for them.
It doesn't matter how brilliant your work is if people can't see it. Now everything you create is accessible on any screen – desktop, tablet or mobile – without compatibility issues.
Google Web Designer brings ideas to life across screens. You can create engaging, interactive HTML5-based designs and motion graphics that can run on any device. If you're feeling more hands-on, all the code behind your designs is hand-editable, so you're never locked out of your own work. Your ideas are now amplified by code – not restricted by it.
While a visual tool is helpful, it can never represent your creativity, imagination and vision in full. That's why you can flip back and forth between Design View and Code View as you work, immediately seeing any changes made to code reflected back in your designs.
Raw is an open web app to create custom vector-based visualizations on top of the amazing D3.js library through a simple interface. Even though Raw is a web app, the data you upload will be processed only by the web browser. No server-side operations or storages are performed, no one will see, touch or copy your data.
Raw works with delimiter-separated values (i.e. csv and tsv files) as well as with copied-and-pasted texts from other applications (e.g. Microsoft Excel, TextWrangler, TextEdit. Based on the svg format, visualizations can be easily edited with vector graphics applications for further refinements, or directly embedded into web pages.
This article explains how to use RESS (responsive design with server-side components) to make significant performance and reach improvements to a website for both mobile and desktop devices alike. This technique requires just a few lines of code, some simple configuration and no ongoing maintenance.
Your website will change from one that works on desktops, tablets and smartphones to one that works on almost anything anywhere and loads faster in all cases. It's hard to over-emphasize the importance of this, but if you need a good case study, read about what happened to YouTube when Google lightened its pages (spoiler: entire new territories opened up to it).
The following three screenshots show a sample website with increasing levels of RESS optimization being applied to it and the resulting overall page sizes:
The discerning reader will note that the screenshots all look the same, and that's the whole point: The optimization procedure we'll be applying ensures that the optics of the website remain intact, while improving the user experience significantly due to the smaller page size. In fact, the screenshots are not exactly the same (click to view them at native size), but the slight differences in the quality of the images tend to go unnoticed on phone screens.
Language issues aside, making a website truly accessible worldwide usually comes with two problems:
Diversity of devices Remember what the first two W’s in WWW stand for? A truly global website should work on any devices that your customers use, with varying connectivity standards, world-wide.
Constrained connectivity Many places are not well connected to the Internet, whether in terms of capacity, data plans, etc. This problem affects people living in modern well-connected cities as much as people in less developed rural areas.
This article will help your website break through this glass ceiling (or floor) and enable everyone everywhere to reach your content with equal ease. Note that we'll be using open-source software in conjunction with a device-detection library to achieve this goal; there are many device-detection solutions out there (such as WURFL, OpenDDR and DeviceAtlas — I was involved in developing the latter one).
We'll demonstrate three levels of optimization, each building on the previous one, but each of which can be implemented separately, too. These optimizations will take on the following:
Reduce image payload (the biggest effect),
Reduce JavaScript and CSS payload,
Further optimize based on bandwidth detection.
Before we begin, let's confirm why this process is necessary.
Background On Responsive Web Design And RESS
Responsive Web design is fast becoming the preferred method for making a website mobile-friendly, and with good reason. For many websites, it achieves a reasonable balance between mobile-friendliness and ease of implementation.
But design isn't just about appearance, and the main problem that we all are struggling with in Responsive Web design is that by “default” (when using the simplest way to display and hide containers with display: none;) all devices are sent the same payload. It means that devices with low-resolution screens are sent the same images as those sent to high-resolution devices, even though they can't show them at their native resolution. This is inefficient at best and market-limiting at worst. The result is a page that works well on high-end well-connected devices with generous data plans.
Many attempts have been made to solve this problem, with varying levels of effectiveness. Probably the most promising approach has been to have the browser determine the most appropriate image version to fetch. The W3C has an ongoing initiative to standardize an approach, but this likely won't be commonplace in browsers within the next year or so. The candidate solutions — the new <picture> element and new srcset attribute for the <img> element — each has its own issues and benefits. Rather than discuss them here, I suggest reading Jason Grigsby's "The Real Conflict Behind <picture> and @srcset." In the meantime, polyfills such as Boris Smus' srcset-polyfill will mimic some of the proposed attribute's behavior.
We'll describe a relatively straightforward approach to minimizing page weight in RWD using a touch of server-side magic. We'll use device detection on the server to optimize images when they're requested by the browsers by reducing their dimensions to the optimum size.
PageSpeed is a Web server module that applies multiple best practices to a website without forcing the developer to change their workflow. These optimizations include combining and minifying JavaScript and CSS files, inlining small resources, removing unused meta data from each file, and re-encoding images to the most efficient format accessible to the user. PageSpeed is available for both Apache and NGINX. We'll take advantage of a little-used image-resizing feature of PageSpeed.
The resulting weight savings are dramatic and require very little work. If you follow the steps in this article, you should be able to cut down on image weight many times over with three easy steps, only four lines of code and one line of configuration.
This article assumes that you are using the Apache Web server and are comfortable with some light PHP coding, but the techniques will work with NGINX also, and any programming language.
The Website
Our sample website is based on Twitter's open-source Bootstrap Web framework, to save the world from my design skills. I created a single-page "website" for a fictional mobile phone store. The page is visually rich, with an industry-average breakdown of HTML, images and JavaScript. This page is based on a lightly modified version of Bootstrap's carousel template. Here is the page in its entirety, as you would see it in a desktop browser:
The website has an approximately industry-average payload that breaks down as follows:
Component
Size on disk
HTML
12 KB
Image
941 KB (73%)
JavaScript (mostly minified)
159 KB
CSS
170 KB
Total
1,281 KB
Instructions
Step 1
Install PageSpeed. This is best done by following Google's instructions. The installation process will usually activate the module for the default website, but you might need to ensure that it works with your virtual hosts, if they're configured. Basically, you just have to add a line to each one, or get them all to inherit from the default configuration server-wide.
Next, restart your Web server.
Step 2
Get a device detection library set up. In our case, if you are using DeviceAtlas (which we’ll use just as an example here), you'll need to enter your license key in the DeviceAtlasCloud/Client.php file after you unpack the ZIP file. We then can use DeviceAtlas to determine the optimal size for images.
Step 3
Copy DeviceAtlas' PHP file to a directory where it is executable by the Web server. In this case, I've created a directory in the root of the website, named DeviceAtlasCloud. Enter the following code at the top of your HTML file or website template to set up a couple of variables that we can use throughout the page. If you're using a different solution, then the syntax will vary but the same properties should be available.
<?php include 'DeviceAtlasCloud/Client.php'; // instantiate client $results = DeviceAtlasCloudClient::getDeviceData(); // fetch props $props = $results['properties']; // store result // set $width to correct width or "" if unknown $width = (isset($props['displayWidth'])) ? $props['displayWidth'] :""; ?>
The impact of this fetching of properties should be no more than a few milliseconds if everything is set up correctly as most solutions will cache data.
Step 4
The final step is to give all of your images that might need resizing a width attribute, set to use the $width variable:
Thus, images will now have their width attribute set from the $width variable, which is set automatically to the maximum display width for each device. Then, PageSpeed will notice the width="…" tag for each image and scale it down if necessary, replacing the image source's attribute with a reference to a resized version of the same thing. There is no need to set the height attribute because PageSpeed automatically retains the aspect ratio. Resized images are cached, so there isn't really any significant impact on the server. Refer to the PageSpeed configuration notes below for more fine-grained control of this cache.
Add this variable width tag only to images that will need to be resized for each device; that is, don't add it to images that are already small enough (such as bullets and icons). Manually resizing images that require special attention might also be wise. Also, be aware that the width attribute for each image will need to play nice with any CSS used for image styling. Anyone using a content management system (CMS) might have to use a different technique for this, depending on how much access the CMS gives them to the underlying HTML.
Background images might require a different approach, depending on how they are implemented on the website. Still, PageSpeed will read inline style="…" tags.
Result
With those changes made, it's time to see how the website looks. To measure the impact of this step, I tested the download speed of our website for different devices and network speeds, using the ever-useful Charles Proxy as well as real devices that I forced into various network configurations to reduce available bandwidth.
Before making the changes, the page's overall size was 1,027 KB, regardless of device (i.e. a dynamic range of exactly 1.0). The breakdown is as follows:
Component
Size on disk
Size over network
HTML
12 KB
3 KB
Images
941 KB
941 KB (73%)
JavaScript
159 KB
55 KB
CSS
170 KB
27 KB
Total
1,281 KB
1,027 KB
This is the over-the-network size of the page, thanks to gzip compression from Apache. The RWD makes the page look OK on small screens, but it isn't an efficient use of network resources because the original images are about five times wider (in pixels) than the average phone screen and, hence, impossible to display at full resolution without panning. In fact, the sheer size of the page means that it doesn't even finish loading on some devices.
After following the above steps, the payload breakdown for an iPhone is this:
Component
Size over network
HTML
3 KB
Images
177 KB
JavaScript
51 KB
CSS
21 KB
Total
253 KB
So, the page has dropped to one fourth of its original size, with image sizes accounting for the majority of this reduction. On devices with lower-resolutions screens, further gains are possible; the same page on a Nokia feature phone (Nokia 6230) now has a total image weight of just 89 KB, a large saving compared to the original. Importantly, the before and after websites have no perceptible difference to the user; the image data that was removed cannot easily be seen by the mobile user.
After following the four steps outlined here, the page's weight now varies between 1,027 KB and about 150 KB. In other words, the page has gone from having a dynamic range factor of exactly 1.0 to a decent 6.8, with the image payload shrinking from 941 KB to just 80 KB. This will have a huge impact on real-world customers:
Much faster page-loading times lead to better engagement and fewer drop-offs.
A smaller impact on the user's data plan leads to more return visits.
Wider device and network compatibility leads to improved reach.
Here's the loading-time effect on a Retina iPhone using 3G and 2.5G networks:
Device and network
Before
After
iPhone 3G
14s
6s (2.3× faster)
iPhone GPRS
2m 30s
35s (4.3× faster)
The results on Android devices are similar. On lower-end devices with smaller screens, more dramatic improvements are possible because the image-resizing gains are greater.
Going Further, Part 1: JavaScript And CSS
So far, we've looked only at the main source of bloat on pages: images. But screen size shouldn't be the sole factor in our methods — user contexts and constraints demand more of a multi-device publishing strategy because many additional optimizations are to be made. For example, if you know that the requesting device doesn't support JavaScript or rich CSS, then ditching them might make sense. This is quite straightforward to accomplish.
If we add another line of PHP to the top of our HTML file, we can do a little more.
We are making the determination of a low-end device based on its rendering engine. This is a crude rule but good enough to demonstrate a point. Based on this variable, we can now selectively include some resources only if they're beneficial. In this case, if the device appears to be low end, we'll jettison the CSS and JavaScript, because low-end phones will have problems with both the file size and the rendering of this CSS, and they usually won't run the JavaScript:
<?php if ($highEndDevice): ?> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="js/jquery.js"></script> . . <?php endif; ?>
This saves a further 72 KB (quite a reduction from 253 KB!) and actually makes the page look better on low-end devices (see the screenshot at the end of this article), in addition to being quicker to render. Now, when viewed on a low-end device, the page's weight is as follows:
Component
Size over network
HTML
3 KB
Images
50 KB
JavaScript
0 KB
CSS
0 KB
Total
53 KB
This means that our simple RWD page has gone from a fixed size of about 1 MB to a highly varying one that goes as low as about 50 KB, or 20 times smaller than the page we started with. Not a bad result for fewer than 10 lines of code. The net result is that our page is now viewable on almost anything, anywhere, from televisions to feature phones — and quickly! You might not be targeting televisions and feature phones, but now they will come to you.
Note: In testing this approach on real devices, HTML5's doctype tag did not cause problems. The page loaded on pretty much every device I tried.
Going Further, Part 2: Connectivity Detection
Most of the weight savings so far hinge on certain low-end mobile devices not needing full-resolution images, rich styling or JavaScript. This set of techniques is highly effective, but we can do more to cater to our users and extend our reach. Desktop devices sometimes need help, too. Anyone who has used a laptop over airport Wi-Fi or in a poorly connected country knows just how frustrating viewing large pages is.
Connectivity detection comes to the rescue here. The idea is that, if you can detect the connectivity available to the requesting browser, then you can apply similar image-compression techniques dynamically according to the client's available bandwidth. This can make a huge difference to the browsing experience, at some cost to page fidelity: If we detect a poor connection, then images can be aggressively compressed without reducing their pixel size. The result is a page that loads much faster, with only a slight impact on the experience — the page's layout and overall appearance will be preserved. Depending on the compression levels, many people won't even notice.
The W3C is working on making bandwidth information available to the browser, but the Network Information API is still in draft status and so won't be widely deployed in the near future.
In the meantime, we can use some server-side capabilities. DeviceAtlas incorporates a feature to do exactly this, enabling the developer to make useful decisions about what to send to the client when bandwidth is limited. For this example, we'll do something simple yet effective: If the bandwidth available to the device is detected to fall below a certain threshold, then we will redirect the browser to a different virtual host. This virtual host will be served by the same Web server and will serve exactly the same page, but it will trigger a different set of options for PageSpeed. In this case, we'll change the image-compression level from its default to something much lower — say, 20%. At this level, images will still be very recognizable and will fit the page's layout but will be many times smaller in bytes.
What follows is a simple way to achieve this, explained merely as a quick example of what is possible rather than as a definitive technique. First, add a new virtual host to your server's configuration, and configure PageSpeed to use different settings for it. Then, restart your Web server. I am using site.com and lo.site.com as my virtual hosts. Note that the DocumentRoot is the same in each case — the exact same HTML is being served for both virtual hosts.
Next, add the connectivity-checking code to your website's template. This is what switches the virtual host if connectivity appears to be poor:
require_once 'DeviceAtlasNPC.php'; // check network performance session_start(); $deviceAtlasNPC = new DeviceAtlasNPC(); // instantiate NPC $quality = $deviceAtlasNPC->getQuality(); // test network performance $path = $_SERVER['SCRIPT_NAME']; switch($quality) { case DeviceAtlasNPC::HIGH_QUALITY: if ($_SERVER['HTTP_HOST'] == 'lo.site.com') { header("Location: http://site.com".$path ); } break; case DeviceAtlasNPC::MEDIUM_QUALITY: if ($_SERVER['HTTP_HOST'] == 'lo.site.com') { header("Location: http://site.com".$path ); } break; case DeviceAtlasNPC::LOW_QUALITY: if ($_SERVER['HTTP_HOST'] == 'site.com') { header("Location: http://lo.site.com".$path ); } break; default: }
Yes, the initial redirection to the low-bandwidth website does affect the loading time, but this penalty is far outweighed by the net savings in doing so, particularly for users with constrained bandwidth; high-bandwidth users should be almost unaffected. The cost of this redirection on a slow GPRS connection is approximately one second, but the resulting savings can add up to minutes.
Overall Results
So, let's look at how this all comes together with the various optimizations, device types and connectivity options. The following table sums it all up.
Original website
Add image resizing
Add adaptive JS and CSS
Page size
Loading time
Page size
Loading time
Page size
Loading time
Desktop (high-speed)
1027 KB
3s
921 KB
3s
921 KB
3s
Desktop (56k modem)
1027 KB
3m 27s
921 KB
3m 14s
921 KB
2m 05s
iPhone 3G
1027 KB
14s
253 KB
7s
253 KB
6s
iPhone GPRS
1027 KB
2m 30s
253 KB
40s
253 KB
40s
Feature phone (2G)
1027 KB
∞
203 KB
35s
87 KB
25s
Original website
Add network adaptivity
Page size
Loading time
Page size
Loading time
Desktop (high-speed)
1027 KB
3s
921 KB
3s
Desktop (56k modem)
1027 KB
3m 27s
227 KB
40s
iPhone 3G
1027 KB
14s
153 KB
5s
iPhone GPRS
1027 KB
2m 30s
153 KB
25s
Feature phone (2G)
1027 KB
∞
25 KB
12s
These loading times are all worst-case scenarios, tested with an empty cache. Subsequent page loads as you traverse the website will feel much faster.
With all of these optimizations in place, we now have a more sensible responsive design that scales dynamically in richness and size, from 1 MB all the way down to 25 KB, all in. The website incorporates the best of RWD and server-side optimizations to yield a dynamic range factor of over 40.
The website is now responsive to multiple factors, not just one: screen size, device capabilities and network performance. As a result, the reach of this page has extended from desktop and smart devices in well-connected locations to almost everything, everywhere, regardless of connection type. Apart from getting our image size tags to populate dynamically, we didn't have to do much work to make this happen.
Website before optimization on various devices:
Desktop: 1360 × 768 pixels, page size 1,027 KB
iPhone: 320 × 480 pixels, page size 1,027 KB
Nokia 6300: 240 × 320 pixels, page size 1,027 KB
Website after optimization on various devices:
Desktop: 1360 × 768 pixels, page size 1,027 KB
iPhone: 320 × 480 pixels, page size 153 KB
Nokia 6300: 240 × 320 pixels, page size 25 KB
Circling back to the page linked at the top of this article, Chris Zacharias, speaking of his experience optimizing YouTube's page weight, says the following:
“[Previously], entire populations of people simply could not use YouTube because it took too long to see anything… By keeping your code small and lightweight, you can literally open your product up to new markets.”
By using some of the techniques outlined in this article, you might be able to achieve similar results for your website.
Harp is a zero-configuration static web server with built in pre-processing. It supports Jade, Markdown, EJS, LESS, Stylus, and CoffeeScript. Harp is great for rapidly building front-end web applications, documentation, and blogs.
Harp intelligently compiles assets as the browser needs them, so it's insanely fast. All you have to do is Save and Refresh. You can keep your code clean and organized: reuse common elements with partials, and maintain a consistent site design with layouts. Whether you're making a GitHub project page, or a mobile application using Apache Cordova/PhoneGap, you can easily compile your code to HTML, CSS & JavaScript and host it anywhere.
Flatic is a large user interface kit containing hundreds of web elements, which will help you design whole websites in Photoshop with ease. Sets of icons, and actions have been included in the kit. The package Includes more than 100 elements. You can check out the full preview here.
During the past four or five years of blogging regularly and doing research for other writing projects, I've come across probably thousands of articles on JavaScript.
To me, it seems that a big chunk of these articles can be divided into two very general categories:
Yes, I've likely stumbled upon a ton of other articles that don't fall into either of these categories or that are more specific. But somehow it feels that most of the ones that really get pushed in the community fall under one of the two categories above.
I think those articles are great, and I hope we see more of them. But sometimes the simplest JavaScript features are sitting right under our noses and we just haven't had a lot of exposure to them. I'm talking about native, more-or-less cross-browser features that have been in the language for some time.
So, in this article, I won't be talking about jQuery, and I won't be looking at structural code concepts or patterns. Instead, I'm going to introduce you to some pure JavaScript features that you can use today and that you might not have ever considered before.
insertAdjacentHTML()
Years ago, Microsoft introduced a method called insertAdjacentHTML() as a way to insert a specified string of text as HTML or XML into a specific place in the DOM. This feature has been available in Internet Explorer (IE) since version 4. Let's see how it works.
Suppose you have the following HTML:
<div id="box1"> <p>Some example text</p> </div> <div id="box2"> <p>Some example text</p> </div>
And suppose you want to insert another snippet of HTML between #box1 and #box2. You can do this quite easily using insertAdjacentHTML():
var box2 = document.getElementById("box2"); box2.insertAdjacentHTML('beforebegin', '<div><p>This gets inserted.</p></div>');
With that, the generated DOM ends up like this:
<div id="box1"> <p>Some example text</p> </div> <div><p>This gets inserted.</p></div> <div id="box2"> <p>Some example text</p> </div>
The insertAdjacentHTML() method takes two parameters. The first defines where you want to place the HTML, relative to the targeted element (in this case, the #box2 element). This may be one of the following four string values:
beforebegin The HTML would be placed immediately before the element, as a sibling.
afterbegin The HTML would be placed inside the element, before its first child.
beforeend The HTML would be placed inside the element, after its last child.
afterend The HTML would be placed immediately after the element, as a sibling.
Again, these are string values, not keywords, so they must be placed inside of single or double quotes.
The second parameter is the string you want to insert, also placed in quotes (or else it would be a variable holding a string that was previously defined). Note that it should be a string, not a DOM element or element collection; so, it could just be text, with no actual markup.
insertAdjacentHTML() has, as outlined in a post on Mozilla Hacks, a couple of advantages over something more conventional, like innerHTML(): It does not corrupt the existing DOM elements, and it performs better.
And if you're wondering why this one hasn't received a lot of attention so far, despite being well supported in all in-use versions of IE, the reason is probably that, as mentioned in the Mozilla Hacks article, it was not added to Firefox until version 8. Because all other major browsers support this, and Firefox users have been auto-updating since version 5, it's quite safe to use.
For more on this method:
"insertAdjacentHTML()," in the "DOM Parsing and Serialization" specification, WHATWG
You can obtain the coordinates and, by extension, the dimensions of any element on the page using another lesser-known method, the getBoundingClientRect() method.
Here's an example of how it might be used:
var box = document.getElementById('box'), x, y, w; x = box.getBoundingClientRect().left; y = box.getBoundingClientRect().top; if (box.getBoundingClientRect().width) { w = box.getBoundingClientRect().width; // for modern browsers } else { w = box.offsetWidth; // for oldIE } console.log(x, y, w);
Here, we've targeted an element with an ID of box, and we're accessing three properties of the getBoundingClientRect() method for the #box element. Here's a summary of six fairly self-explanatory properties that this method exposes:
top How many pixels the top edge of the element is from the topmost edge of the viewport
left How many pixels the left edge of the element is from the leftmost edge of the viewport
right How many pixels the right edge of the element is from the leftmost edge of the viewport
bottom How many pixels the bottom edge of the element is from the topmost edge of the viewport
width The width of the element
height The height of the element
All of these properties are read-only. And notice that the coordinate properties (top, left, right and bottom) are all relative to the top-left of the viewport.
What about the if/else in the example from above? IE 6 to 8 don't support the width and height properties; so, if you want full cross-browser support for those, you'll have to use offsetWidth and/or offsetHeight.
As with insertAdjacentHTML(), despite the lack of support for width and height, this method has been supported in IE since ancient times, and it has support everywhere else that's relevant, so it's pretty safe to use.
I will concede something here: Getting the coordinates of an element using offset-based values (such as offsetWidth) is actually faster than using getBoundingClientRect(). Note, however, that offset-based values will always round to the nearest integer, whereas getBoundingClientRect()'s properties will return fractional values.
If you've ever manipulated elements on the fly with JavaScript, then you've likely used methods such as createElement, removeChild, parentNode and related features. And you can manipulate HTML tables in this way, too.
But you may not realize that there is a very specific API for creating and manipulating HTML tables with JavaScript, and it has very good browser support. Let's take a quick look at some of the methods and properties available with this API.
All of the following methods are available to be used on any HTML table element:
insertRow()
deleteRow()
insertCell()
deleteCell()
createCaption()
deleteCaption()
createTHead()
deleteTHead()
And then there are the following properties:
caption
tHead
tFoot
rows
rows.cells
With these features, we can create an entire table, including rows, cells, a caption and cell content. Here's an example:
var table = document.createElement('table'), tbody = document.createElement('tbody'), i, rowcount; table.appendChild(tbody); for (i = 0; i <= 9; i++) { rowcount = i + 1; tbody.insertRow(i); tbody.rows[i].insertCell(0); tbody.rows[i].insertCell(1); tbody.rows[i].insertCell(2); tbody.rows[i].cells[0].appendChild(document.createTextNode('Row ' + rowcount + ', Cell 1')); tbody.rows[i].cells[1].appendChild(document.createTextNode('Row 1, Cell 2')); tbody.rows[i].cells[2].appendChild(document.createTextNode('Row 1, Cell 3')); } table.createCaption(); table.caption.appendChild(document.createTextNode('A DOM-Generated Table')); document.body.appendChild(table);
The script above combines some customary core DOM methods with methods and properties of the HTMLTableElement API. The same code written without the table API might be considerably more complex and, thus, harder to read and maintain.
Once again, these table-related features have support all the way back to IE 7 (and probably earlier) and everywhere else that's relevant, so feel free to use these methods and properties where you see fit.
"Tabular Data," in the "HTML" specification, WHATWG
Wrapping Up
This discussion of specific native JavaScript features has been a reminder of sorts. We can easily become comfortable with the features of a language that we know well, without looking deeper into the language's syntax for simpler and more maintainable ways to solve our problems.
So, from time to time, look inside the box, so to speak. That is, investigate all that vanilla JavaScript has to offer, and try not to rely too much on plugins and libraries, which can unnecessarily bloat your code.
Audio looping seems like a basic feature that you’ve probably come to expect from your favorite media player. Web Audio API is an API designed to manipulate and play audio assets on a Web page or application. It is an amazing foundation for games, synthesizers, audio players, trackers and more. All within the comfort of your browser. Support is excellent with Chrome, Opera, Safari and Firefox* all on board.
It probably took more JavaScript than you thought to make simple loops but with just a bit more work you can really kick things up a notch. Visualizers, volume control, special effects and so much more.
The Web began as markup only, and then some script and styling. For many developers, especially us veterans, it’s hard to imagine a Web without plug-ins. Since the earliest days, browser plug-ins like Flash and ActiveX have been the main way to create rich online experiences for more sophisticated Web experiences.
And yet through the efforts of the industry and community, we have returned to a plug-in free Web once again. Much Web browsing today occurs on smart phones and tablets have limited or no support plug-in. Modern browsers like Chrome, Firefox, and Internet Explorer 10/9 have embraced and implemented Web standards like HTML5, CSS3, and JavaScript which, in most cases, now reach feature parity with plug-ins (more on those differences later) and are more interoperable across browsers. With more than 75% of all browsers in North America now compatible with HTML5, market researcher Forrester recently said it’s time to say “so long” to plug-in. “The tide,” pronounced Forrester analyst Peter Sheldon, “is turning.”
How the heck did we get here? And, more importantly, where are — where should — we be going?
In this six-part series, we’ll take a hands-on look at the evolution of the Web to what many (including me) see as a shift toward plug-in free. I’ll focus on common Web experiences that have already been written with a plug-in and show you how to convert, and enhance them with HTML5.
(To make sure we’re all on the same page: Here “plug-ins” refers broadly to browser extensions that run native, i.e. not Web, client code using low-level browser interfaces. For example, here is a basic description of Webkit’s approach; the IE equivalents are ActiveX controls and Browser Helper Objects. Web sites use a wide variety of plug-in; Adobe Flash is one of the most common.)
But before we get to the “how”, let’s talk briefly about the “why.”
What’s Driving the Shift?
In many minds Apple, rightly or wrongly, famously or infamously, got the “no plug-in” ball rolling. The company, citing security and power concerns, never supported plug-in from iPhones and iPads. Since then, there’s been public, sometimes personal, sometimes confusing push-pull between the tech giants: Apple, Google, and Microsoft. Much of the m. web emerged from the lack of plug-in support and the lack of web standards like device size/orientation, network directives, etc. initially, which have now evolved for use across devices and browsers. Support for plug-ins, sometimes enthusiastic, sometimes required by law, sometimes grudging, remains. But the long-term trends favoring diminishing importance of plug-in are clear:
Mobility. We’ve all seen the spectacular numbers, so no need to dutifully rehash here. A couple of data point reminders will suffice. Mobile data traffic doubled each year between 2008 and 2011, according to research by Cisco. I picked this study because it looks at mobile traffic rather than the sheer number of mobile devices sold. That’s a better measure, because people often stop using a device after buying a new one, and leave the old one sitting around.
Then, in 2012, tablets really took off. Researcher IDC reported 52.5 million units sold in 4Q12. A full 40% were Apple devices running iOS-and no plug-in. Samsung saw stunning 263% growth quarter over quarter growth from the previous year, selling 8 million units of Android and Windows 8 mobile devices. True, those devices can run plug-in, but not so fast…
Touch. The other big half of the mobile story is, of course, touch. Most plug-ins are not designed for touch. And these days, not touching touch is, well, a bit touched. And because they are separate applications from the browser, plug-in don’t benefit from a lot of the changes in touch-optimized browsers like Internet Explorer 10 that make Websites work smoothly with touch.
HTML5. Sure, it’s far from fully baked. But standards-based technologies specified by theWorld Wide Web Consortium (W3C), like those ones comprising HTML5, can increasingly do much of what plug-in can do. (We’ll dig into this.) These technologies have strong support across modern Web browsers. That makes it possible for developers to write the same markup and script that works across all modern browsers (in theory at least). No need to write or maintain additional code that has third-party framework and runtime dependencies. Nice.
No wonder, according to Forrester’s Sheldon, that “leading online brands, including Apple (!) (emphasis mine), Best Buy, Four Seasons Hotels, and Rue La La are now removing plug-in entirely and putting the features of HTML5 to use on their desktop-, mobile-, and tablet- optimized sites.
He concludes: “We are at an inflection point: With consumer adoption of HTML5 capable desktop browsers widespread and Web developer understanding of the technology rapidly maturing, HTML5 is no longer an emerging toolset for mobile and tablet development. Instead, it is fast becoming the de facto standard for Web experience innovation across touch points.”
It’s time to be mindful collectively and move the Web away from plug-in. Instead of creating yet another Web as was done with mobile, let us build one, and “bring mobile home”.
plug-ins vs. Plug In-Free
So those are some of the big market drivers. But as long as we’re poking at proprietary plug-ins, let’s very briefly point out their technical shortcomings. (Steve Jobs wasn’t all wrong.) With varying degrees of arguability, it’s fair to generalize about plugs-ins and their alternatives:
Resource Hogs. Because they’re essentially applications that run alongside the browser, plug-in consume additional system resources and drain batteries. And browser vendors have a limited ability to control the actual plug-in experience to this regard. Users, typically mobile users, hate that. Plug-in free promises longer battery life.
Security Dangers. Historically, plug-in have been one of the most common areas of vulnerability on the browser. More recently, browser vendors have been shipping a more sandboxed version of plug-in to reduce the problem (example: Internet Explorer 10). But if you do include them, be sure to test it independently and then within the Webpage it’s embedded in…across each browser.
Finicky across Browsers and OS’s. Plug-in are based on proprietary technologies. That makes it difficult to predict or control their support across different browsers and operating systems – a real drawback in today’s multi-device world. Many users don’t distinguish between a plug-in and a Web browser. In their mind, it’s all one user experience. So asking them to upgrade their plug-in introduces unnecessary friction (and sometime confusion), inhibiting what you really want them to do
In contrast, HTML5 offers Web developers interoperability across browsers and devices, better forward compatibility, and easier overall site maintenance. Best of all, users get what they want- nothing prevents them from having a great experience on your site. And with the possibility of lowers costs of development, you can definitely see a path to a more open, more accessible, that allows you to reuse your code across multiple devices and platforms (example: Window Store apps written in HTML5).
Plug-ins will evolve
All this is not to suggest that plug-ins will have no place in the HTML5 world period. Certainly this is an evolutionary process and developers should be prepared to consider supporting both HTML5- and plug-in based experiences. Mozilla recently introduced a built-in PDF viewer component based on JavaScript and HTML5 to the beta version of Firefox 19. The foundation says the standards-based version will be more secure and safer than Adobe, Foxit or proprietary readers. Experts say safer, perhaps, but not immune.
Indeed, the Web site Theme Squirrel recently highlighted the top 15 HTML5 plug ins of 2013. The list shows a rich variety of standards-based plug-in advocates say offer superior quality, security, and consistency over proprietary browser plug ins.
Imagining a plug-in Free World
Where does that leave us?
Over the past couple of years, I’ve spoken to a lot of plug-in developers who have insist you cannot do great work without plug-in. The fact is that today with HTML5, you can successfully do most of the things you previously needed plug-in for. Case and point, look at these sites:
Is it perfect? No. Some key HTML5 features are not as good as their plugged-in counterparts (example: HTTP LiveStreaming, DRM). Sure, there’s been a lot of hype around HTML5, and, 2022, the expected finish date, is a long way off. And let’s be honest: Development tools for HTML5, though evolving, have a ways to go.
But with the new features of HTML5, combined with JavaScript, you can indeed build create impressive plug-in-free sites that do the same thing as well as their “plugged-in” counterparts. So despite shortcomings, it’s pretty clear we’re at a tipping point.
Put it all together and it means you can build your Websites and Web apps using the latest HTML5 technology without getting bogged down with plug-in. And your app will function not only on desktops and notebooks, but mobile devices as well.
Using third-party tools you can package a site into a single app to sell on a store as a mobile app. Your apps will also work very well on the new Windows 8 interface, and you can sell them in the Windows Store. This is all sounding like a good deal, is it not?
My Own Unplugging Story
A few months ago, I upgraded the hard drive on my computer. I took the opportunity to move up to Windows 8 full time. With the help of a program called VirtualBox, I installed the latest version of Ubuntu. I also downloaded the free VMs of Windows for my test matrix. In both OS’s, I actively refused to install any browser plug-in. No plug-in, no Silverlight, no Java, none. For PDF files, I switch between browsers, and let IE open them outside the browser. Chrome has a native PDF viewer built in. So no plug-in there, either. Chrome does include its own version of plug-ins, but I disabled that too.
My reasons were two-fold: First, I want to experience the Web without plug-in and see just how usable it is. That will give me, a developer, a true feel for life without plug-in, and whether we are really there yet. And second, as a teacher and writer, it lets me experience shortcomings firsthand so I can contribute any learning that might help the next guy embrace standards and make further advances towards a plug-in-free world.
The result? I’m absolutely fine. All the sites I use have shifted to plug-in-free. Yes, I occasionally run across a site that needs plug-ins. But one of two things happens: Either the plug-ins is just some kind of graphic image at the top that I can ignore, or I end up not using the site.
Think about that last point. I don’t use the site. I’m not the only person who has stopped using plug-ins. My prediction is that plug-ins-based sites will see a drop in visitors because so many devices (such as iOS) that don’t have plug-ins. And because plug-ins on Android devices can be a slow, not great experience. Plus, the sheer number of iOS devices out there should make you think hard about using plug-ins, since doing so instantly excludes a big chunk of the market.
And so I conclude: Now is the time to take a serious look at creating plug-in-free sites. Not as a magic, flip the switch moment, but as a quickening of a journey toward a Web with many fewer, and perhaps none, of the plug-in workarounds required today.
Our Approach: Show and Tell Using Real Sites
So that brings me back to this series. Instead of just telling you things, I will show you how to modernize actual, existing sites that use plug-ins, without using plug-ins. We won’t reverse engineer or duplicate them exactly. Rather, we’ll talk about the general idea of what the plug-ins apps do, then show how you can do something similar with a plug-in-free browser.
Of course, for this approach to work, the browser needs to support HTML5. And which browsers are those? All of the latest major browsers. Today, in 2013, all the latest versions of the major browsers support HTML5, including IE9, IE10, and the browsers on iOS and Android devices.
This article is part of the HTML5 tech series from the Internet Explorer team. Try-out the concepts in this article with free virtual machines for Mac, Linux, or Windows @ http://modern.IE
About the Author
Jeff Cogswell has nearly 25 years of experience as both a software engineer and a professional writer. He has worked on development teams, doing everything from low-level C programming on Unix up to high-level web development. In the past decade he has focused his work primarily on web development, including mastering such technologies as server-side programming with C#, and client-side programming such as HTML, XML, JavaScript, and Adobe tools, and now HTML5. He has authored numerous books, including C++ All-in-One for Dummies. He writes regular columns for SourceForge and SlashDot, including columns on parallel programming and development.
