Today's Question:  What does your personal desk look like?        GIVE A SHOUT

SEARCH KEYWORD -- attr

  A simple example of drawing bar chart with label using d3.js

D3.js is a very popular graph library to help developers draw various kind of charts using JavaScript in a webpage. It utilizes the SVG format supported by all major modern browsers and can help developers get rid of the old age of Flash or server side graph drawing libraries. In this post, we will introduce some simple examples of drawing bar chart with labels using D3.js.  First, let's see what will be the final look of the graph drawn. Below is the complete source code for this example....

   JAVASCIPT,D3,BAR CHART,LABEL,TUTORIAL     2020-05-16 23:25:40

  jQuery to check whether checkbox is checked

In Vanilla JavaScript, the correct way of checking whether a checkbox is checked is to get the property checked of the checkbox. Assuming there is an checkbox with id "checkbox1", below line will return true if the checkbox is checked while it will return false if the checkbox is unchecked: document.getElementById("checkbox1").checked In jQuery, there are a few ways to check this. The first one is to using the corresponding counterpart of the Vanilla JavaScript, it is to check the checked proper...

   jQuery,checked,checkbox,attr,prop     2015-07-25 08:49:54

  9 useful jQuery code snippets

jQuery is one of the most popular JS library among front end developers because of its functionality and usability. Here we share with you some useful jQuery code snippets which can be used in our daily front end development. 1. Smoothly return to page top $(document).ready(function() { $("a.topLink").click(function() { $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top + "px" }, { duration: 500, easing: "swing" ...

   jQuery,Code snippet     2013-07-13 00:11:10

  Understand Virtual DOM

With the popularity of React, the internals and implementation of Virtual DOM has becoming top discussed topic in tech communities and interviews. This post will give an introduction of Virtual DOM and how to implement a simple Virtual DOM logic. How to understand Virtual DOM In early days, front end developers would update a webpage view based on the data status change(usually after making AJAX call). But it brings performance penalties when there is frequent update as it would cause page reflo...

   JAVASCRIPT,DOM,VIRTUAL DOM     2019-12-07 23:43:04

  File upload once again

File upload is one of the oldest operation of web design. After 20 years, it's still has no big change, difficult to handle, lack of interaction and poor user experience. Web developers have thought many methods to improve the experience of uploading file in web apps, they developed various plugins based on different JavaScript libraries. However, because of the difference among different web browsers, there is no common interface which makes these plugins work properly or easily on all web brow...

   Web design, File upload, Asynchronous,HTML5     2012-09-02 11:52:21

  How to let Google index AJAX contents?

There are lots of websites containing only one page now with the popularity of AJAX. The website will load different contents according to different inputs from users. This approach provides good user experience and it also helps save bandwidth, the drawback is that AJAX contents are not easy to be indexed by search engines. For example, if you have a website: http://example.com Users can see different contents with the appended # structure in the URL: http://example.com#1 http://example.com#2 h...

   AJAX,Search engine,Google,History     2013-07-16 00:47:14

  Write HTML easily with Emmet and Haml

Writing HTML codes is very boring and tedious as it has many tags and it's static. One solution is to use template, filling content based on other's skeleton. One another solution is high speed writing. We can write HTML codes with Emmet and Haml. These two ways have similar functions but with different characteristics. Haml is based on Ruby, so when working on Ruby/Rails projects, we recommend to use Haml, otherwise we recommend to use Emmet. 1. Emmet Emmet is a editor plugin, the official webs...

   HTML,Emmet,Haml     2013-06-11 19:46:02

  How to be jQuery-free?

jQuery is now the most famous JavaScript library. There are around 57.3% websites in the world using jQuery, i.e, 6 out of 10 websites are using jQuery. If we only consider those websites which use libraries, then the percentage is even higher which is 91.7%. Although jQuery is very popular, its size is still a headache to many websites maintainers. The uncompressed jQuery 2.0 has a size of 235KB, the size is 81KB after optimization.The jQuery 1.8.3 which supports IE 6/7/8 has a uncompressed si...

   jQuery,JavaScript,ECMAScript,CSS3     2013-05-13 11:53:20

  The Basics of jQuery

So, a while back I had an internal presentation at work about this topic. A few good friends in the community took a look at my slides, and they thought it would make a nice blog post because “there can’t be too many good posts about jQuery introduction and best-practices.” Whether this post is going to be good or not, is up to you but I’ll try to outline what jQuery is, and how you can start working with it. For most of you, this will just be a re-cap and probably...

   JavaScript,jQuery,Framework,Basic     2012-03-01 04:57:18

  JavaScript efficiency catch up

JavaScript is a very flexible language, we can write JavaScript code freely with various styles, different kinds of codes will have different execution efficiency. Here we summarize some tips we get from our development. Efficiency of JavaScript itself JavaScript has execution context chain, closures, prototype inheritance, eval etc. It brings us some magic features, but it also introduces the performance issue, if we don't use them properly, it will affect the codes execution efficiency. 1. Glo...

   JavaScript,efficiency,event delegation,eval     2013-04-02 04:08:46

RECENT