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

SEARCH KEYWORD -- EVENT LISTENER

  How to use Chome dev tool to find event handler bound to an element

As a front end developer, there is frequent need to debug JS code and sometimes need to find out what event handler has been bound to a HTML element. In this post, we will show how to find out the click event handler bound to a HTML element, this same applies to other events as well. Nowadays, a web application is usually very complicated and there are lots of JS codes which makes it difficult to find out what click event handler has been bound to a HTML element, especially when the JS source co...

   JAVASCRIPT,CHROME,CHROME DEV TOOL,EVENT LISTENER     2019-08-17 22:14:36

  Extension context menu is missing in Firefox after restart

If you have experience of writing Chrome extension, you may be familiar with how you can add a context menu for your extension. The code would be similar to below: chrome.runtime.onInstalled.addListener(function() { chrome.contextMenus.removeAll(); chrome.contextMenus.create({ "id": "your_id", "title": "Your Title", "contexts": ["all"] }); }); You need to add a listener listening to the extension install event. Once the extension is installed, create a contex...

   CHROME,FIREFOX,EXTENSION,CONTEXT MENU     2018-11-16 20:58:20

  Supervisord, God and Monit, which one to choose?

With the popularity of Docker, more and more service have been moved into docker containers and they are easy to build up and maintain for each atomic service(though it's a bit complex to maintain multiple docker containers which contain different service to form a complete solution). Ideally, each docker container should only contain one service which has only one running process. However, in reality there would be cases multiple processes would run in one single docker container and there is a...

   DEVOPS,MONIT,SUPERVISORD,GOD,DOCKER     2017-11-25 12:28:11

  Android create button tutorial

This tutorial assumes that you already have an activity and are using an XML layout. Open the layout XML and add the button element.  Assign an ID with the “@+id” operator.  The + tells Android to generate an ID for this element so that you can reference it in your Java files. This is an example. Your layout and text elements will probably be very different. In this example case, the ID of the button is “close”. <Button android:id="@+id/close" android:lay...

   Android,Simulator,Button,XML,Tutorial     2014-11-07 08:30:10

  Advanced event registration models

On this page I explain the two advanced event registration models: W3C’s and Microsoft’s. Since neither is cross–browser supported, their use is, for the moment, deprecated. W3C and Microsoft have both developed their own event registration model to replace Netscape’s traditional model. Though I’m not impressed by the Microsoft model, W3C’s is very good, except for one crucial vagueness. Unfortunately few browsers support it at the moment. W3C W3Cââ‚...

   JavaScript,Event model,this,bubble,capturing     2011-12-27 09:20:44

  Ensure triggering transitionend event in JavaScript

CSS3 Transition has been widely used in modern web app development to offer users animations. Traditionally animations of element in HTML are controlled by JavaScript. If fancy animation is desired, then third party plugins can be installed in browsers such as Flash, Silverlight, Java Applet etc. With CSS3, animations can be easily achieved like a charm. Transition is one of the many features provided by CSS3. It can be used to transit one element from one state to another state smoothly within ...

   CSS3 TRANSITION, TRANSITIONEND, FORCE FIRE TRANSITIONEND     2015-05-09 08:56:51

  JavaScript to open link in new window without being popup blocked

To ensure security and reduce spamming, modern browsers have implemented very strict rules on when a new window can be opened in a web page. Currently browsers restrict that any new web page to be opened in a new window must be initiated with an user action. The action is usually an user click event. Otherwise, a popup blocker would show on the browser address bar which indicates that something is blocked. To workaround this issue, normally you should implement the window open logic in a click e...

   JAVASCRIPT,IFRAME,NEW WINDOW,OPEN LINK     2018-09-22 04:29:30

  Best practices of front end optimization

1. Use DocumentFragment or innerHTML to replace complex elements insertion DOM 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) { // ...

   JavaScript,Front end,Optimization,Tips     2013-07-06 11:26:27

  4 asynchronous programming methods in JavaScript

You may know the execution environment of JavaScript is single threaded. The so called single thread means only one task can be running at any time, if there are many tasks, they need to be in a queue and wait for the previous task to be completed. The advantage of this mode is it's easy to implement and the execution environment is relative simple; the disadvantage is that if one task takes long time, the tasks following it must wait in the queue and this will delay other tasks consequently. Th...

   JAVASCRIPT,ASYNCHRONOUS PROGRAMMING, EVENT MODEL,PROMISE     2012-12-25 00:55:47

  Microsoft to launch Surface Pro 4 on October 6

Microsoft Microsoft has just updated on their website about an event to be held on October 6. This event will be held in New York at October 6 10am EDT.  As described by Microsoft : "We have some exciting news to share about Windows 10 devices". Although there are no details about what these Windows 10 devices are, many think this is the time when new Lumia Phones and Surface Pro 4 will be launched.  The Lumia devices will be Lumia 950 and Lumia 950XL. Both of them will be shipped wit...

   SURFACE PRO 4,MICROSOFT,WINDOWS 10,LUMIA     2015-09-15 07:31:56

RECENT