Relationship oriented website is a kind of website based on friend circle, people come to the website to share news with their friends and see what's happening around their friends, these websites include Facebook, Twitter and Tumblr. While content oriented website is a kind of website based on unique content, people come to the website to find information or find answers for their questions, these websites include TechCrunch, The Verge and Medium.Most of websites on the Internet nowadays belong to either one of them. They have their own advantages and disadvantages.The obvious feature of rela...

1. Use DocumentFragment or innerHTML to replace complex elements insertionDOM operation on browser is expensive. Although browser performance is improved much, multiple DOM elements insertion is still expensive and will affect the page load speed.Assume we have an ul element on our page, we now want to retrieve a JSON list using AJAX and then update the ul using JavaScript. Usually we may write it as :var list = document.querySelector('ul'); ajaxResult.items.forEach(function(item) { // Create element var li = document.createElement('li'); li.innerHTML = item.text; // Manipulate ...

When we design website, we will often need to choose which font to use while displaying contents on the page. Basically what's the criteria for the choice? There are two big families of fonts : sans-serif and serif. We need to first understand what the difference is between these two.The word sans is from French, the meaning of it is without. So the difference between sans-serif and serif is serif font will have lines in all ends of the character while sans-serif fonts don't have.Some examples of sans-serif fonts are: Arial, Verdana, Tahoma,Impact. Some examples of serif fonts are : Times New ...

Browsers may cache the webpages we visited, when user types a URL on the address bar, the browser may cache the webpage returned from server while displaying it. If there is no update on the webpage, then next time when the browser requests the same page, it will not download the page again, instead it will load the cached page. If the website explicitly specify that the page is updated, then the browser will download the page again from the server.What's HTTP Cache?You may be familiar with the cache mechanism of web browser. For example, the RSS subscribe page for JavaEye is http://www.iteye....

Big data initially means the large data set which is not able to be analyzed, but later it was derivatized to the method to analyze huge amounts of data in  order to gain great value.This is a form which gradually gets attention, It's difficult to analyze these data and it's also difficult to store these data and it needs some unprecedented way, Now in China many companies use the open source Hadoop distributed data cluster to meet the needs of data statistics.Since we can get segmented data with great value in huge data through data analysis, so many websites have big data strategy, espe...

With the popularity of Retina screen, the requirement of the images in the webpages is higher. How to make sure the image still clear while enlarging twice on retina screen? This brings much trouble to web developers, the good news is CSS3 and HTML5 is trying to change this, we can use response image.What is responsive image?It means user agent loads different images according to different resolutions of output devices, it will not waste bandwidth as well. In addition, it can load respective images when the resolution of the device changes.CSS responsive imageiOS developers should be familiar ...

I did this summarization when I added Lirate_CoffeeScript support for GitHub-Linguist, i.e how does GitHub do Marjdown render and code highlight in its front end.Lots of font end tools used by GitHub are open sourced. They are:1. HTML/CSS/JavaScript1.1 HTML templateGitHub markup and template styleguide : https://github.com/styleguide/templates1.2 Style and CSSGitHub uses replacement of CSS:SCSS：https://github.com/nex3/sassKSS：https://github.com/kneath/kssGitHub CSS styleguide : https://github.com/styleguide/css1.3 Behavior and JavaScriptGitHub uses CoffeeScript:CoffeeScript：http...

This is the code shared by Jose on codewall. When you type data:text/html,   into the address bar of the browser and press enter, the browser will turn into a notepad which you can edit.Why it works?This uses Data URI’s format and it tells the browser to render HTML. But contenteditable is a property of HTML5, so this can only work in the web browser which supports this property.Here are some interesting contents.Some people make some changes to the code encouraged by the idea of Jose.jakeonrails wrote one line of code which supports Ruby code highlighting. Here is the code:dat...