How to build an interface like Evernote. Single Page Columns

Question

Evernote has just released a new web interface that is interesting. This is one page, columns are changed with the mouse, etc.

Screenshot: http://blog.evernote.com/wp-content/uploads/2011/03/evernote_web_new8.jpg

What is the best way to create something like this using jQuery? Also, any idea what Evernote used to create this interface? I could not find anything in firebug with tips.

thanks

Answer 1

If you're curious about this, you should play with the Chrome Developer Tools, Firefox Firebug Addon, or Safari 'Developer'. They are really great to give you an idea of ​​what is happening on the web page.

As for “how they built it,” many, many different technologies are used up and down the web application stack. Keep in mind that the servers that store, cache, and retrieve all this data are as much a part of the web application as the interface. But I think your question asks how "how did they get this web page to create all this interactive material."

Basically, it is similar to all traditional HTML / CSS - there is no "HTML5" canvas shenanigans or Flash.

Interactivity comes from custom Javascript code. I tried to find out if they are using some popular third-party Javascript Framework (like jQuery or Prototype), but they import so many scripts that are hard to follow. Interestingly, jQuery and $ are not defined variables on the Evernote page, so they look like not using jQuery. They obviously wrote a lot of Javascript to get this thing and run it, so not so much to imagine that they just decide to keep all their code inside.

---

FYI: The three columns are simply arranged and have a size of <div> s.

 <div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 0px; top: 0px; bottom: 0px; width: 220px; ">...</div> <div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 220px; top: 0px; bottom: 0px; width: 360px; ">...</div> <div style="position: absolute; overflow-x: hidden; overflow-y: hidden; left: 580px; top: 0px; right: 0px; bottom: 0px; ">...</div> 

The scrolling that you see in these columns is performed in the child <div> s.

Answer 2

webapps like this are usually built using a javascript framework such as trunk, corners, ember, etc. Here is a link site that lists them:

http://todomvc.com/

It's hard to understand what kind of js framework they use, if any, but there is jQuery 1.8

They use http://icanhazjs.com/ , which is a javascript client-side template library.

They use http://requirejs.org/

Answer 3

Well, in the most basic way, evernote performed its notes workflow using custom javascript, although there are many other frameworks that they used to work with the backend. One of the ways to see it using the Chrome Web Inspector nad, if in Firefox, they updated the web inspector there and now it is much cooler, but if you prefer the most popular firebug, it will do it.

For detailed information about what resources they used to build, you need to track it using a web analyzer tool such as www.buitwith.com

here, a link to the homepage of the evernote website, a search on the Builtwith.com website: http://builtwith.com/?https%3a%2f%2fwww.evernote.com

However, an application that is built on top of it contains a lot of custom code. It is difficult to specify the exact use, but if we check the code, it does not show any specific use of AngularJS, they use requireJS to load the modules.

Since your question is interface specific, it can be done using HTML5 with some javascript or if you prefer a framework to make the process easier, then check out this link with JQueryUI.

https://jqueryui.com/resizable/

They are still the kings of UI development unless AngularJS and ReactJS are mentioned as overloaded.

And also, if you try to do this using simple vanilla JavaScript, this will give you an edge for the load training curve.

Answer 4

They use Angular.js, HTML5, CSS3, custom Javascript and JQuery (and many other things, as others have pointed out).

From: http://evernote.com/careers/job.php?job=om2qXfwv