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...

I've seen a lot of arguments that there is no much technical value writing web portal, I think that the vast majority of good programmers will try many different things. The low level development and machine learning are not the only technologies which are  full of wisdom and challenges, I wrote web site for a few years, it is difficult to say that this is my initial interest, although I touched on other technologies as well, I still feel building website is challenging.Front end development is an important aspect of the many technologies we should touch on. Those who put much effort on f...

Good user experience can narrow the gap between product and users, it can also improve the user efficiency and increase satisfaction and comfort of users. Here we talk about user experience distance with different examples:1. Floating bubble layerWhen users need to delete one picture,they click on the "Delete" button, then the floating bubble layer appears to prompt the user to confirm the deletion, users only need to focus on the picture which reduces the visual burden, and also no need to move the mouse in long distances to click the OK button.Compared to pop up a modal window, users only ne...

The well known quote from Alan Cooper is   Conforming to the standard unless there is a better choice. There are some best practices in interaction design. How many do you know?1. Fitts' LawThe time from one start point to target point is determined by two parameters: The distance to the target and the size of the target. )D and W in above picture), the formula is : T=a+blog2(D/W+1).It was first proposed by Paul Fitts, it is mathematical model used to predict the time from any point to the target point. It has great influence in HCI and design field. The transform from Start Menu to ...

There is a question on Quora : Why doesn't Quora show interesting questions/answers on their landing page? Why is it this?not this?Quora's product manage gives his answer to this question, it's agreed by many users in this community. Here is his answer:The logged out homepage is pretty sparse now mostly because it hasn't been given much treatment since the initial product launch. But we have plans on redesigning it and testing different variations (some with less info on the page, some with more). The goal of the homepage though is to drive the highest volume of signups. Typically what I'...

As a website operator, in addition to have some necessary professional knowledge to master a website, such as prototype planning, interaction design, SEO, as well as basic html code, you should also know more about some of the theories which are good for site operations to ensure that the site can be long-term, stable.1. Law of 250Girard thinks every person knows at least 250 people. If you win the goodwill of a customer, it means you win the goodwill of 250 individuals; Conversely, if you offend a customer, it means you offend 250 customers.For your website, a visitor might be able to bring a...

No matter in web page or mobile applications, information often can not be displayed on one page all alone, there needs some interactive modes which can expand page information: Pagination and Continuous Scrolling are very common interactive modes. Every day we may see them, they are so common that we do not even feel their presence, when browsing to the bottom of the page, we will see it. But it's difficult to choose which mode to use in design. Here we have a discussion on these two modes.PaginationPagination can divide lengthy content into small pieces displayed in separate consecutive page...