HOW TO study (or copy) code related to JavaScript effects from websites you envy


To build web apps with a great UI, its ok to draw inspiration from the best sites on the web. Sometimes the good-looking websites with great JavaScript effects may obfuscate their code knowingly or unknowingly or the code may be difficult to understand by just viewing the HTML source. 

Visual Events is a nifty bookmarklet that shows the events attached to each of the elements in a webpage. The keyboard & mouse events are represented as icons & when you mouse over any icon the source code related to it is shown. This is helpful because on JavaScript intensive sites you don't have to rummage through the entire source to find a small code block that you need.

For instance, when you mouse over a Tag button on the StackOverflow site, it shows a tooltip

If you call the Visual Event bookmarklet while this page is loaded, you will see this icon  over the javascript Tag button  indicating that there is a mouseover event attached to it. The complete mapping of icons & their corresponding events is listed on the Visual Event bookmarklet's homepage. When you hover your mouse pointer over the icon, the Visual Event bookmarklet scans through the source code & fetches just the code corresponding to the javascript Tag button's mouseover. The code window also informs that this particular StackOverflow webpage uses jQuery version 1.5.1 

Click image to enlarge 
This bookmarklet can detect event handler code that is written using one of these libraries -
  • DOM 0 events
  • jQuery 1.2.x +
  • YUI 2.6.x (2.x might work!)
  • MooTools 1.2.x
  • Prototype 1.6.x
  • JAK (Events 2.2)
  • Glow
Visual Event is beta grade software. It doesn't currently work in IE

Also see:

Comments

Post a Comment

Popular posts from this blog

Maven Crash Course - Learn Power Query, Power Pivot & DAX in 15 Minutes

Image
In the Maven Crash Course " Learn Power Query, Power Pivot & DAX in 15 Minutes ", Chris Dutton walks through a hypothetical business case while showcasing the power of modern Excel tools like Power Query, Power Pivot and DAX. Power Query is used to extract, transform, and load data from external sources like SQL databases, PDF and CSV files. A relational model is created to join the tables without writing a single formula. Exploratory analysis is done using Power Pivot and Data Analysis Expressions (DAX). Data Analysis Expressions is the language that we can use to define new calculated columns and measures to enhance our Data Model instead of the traditional cell formulas that we'd typically use if our data was stored in worksheets. Pivot Charts and slicers are used to design a simple interactive report that the sales managers can use to analyze revenue trends and product performance.
Read more

"Data Prep & Exploratory Data Analysis" course by Maven Analytics

Image
The Maven Analytics course on " Data Prep & Exploratory Data Analysis " by Alice Zhao is a beginner-friendly introduction to machine learning with Python. It covers the key steps of the data science workflow, including: Gathering Data Scoping a Project Modeling Data Sharing Insights Cleaning Data Exploring Data Modeling Data  Sharing Insights The presentation deck which is available as a download crisply summarizes the essential details and is a great reference to keep going back to. The course is well-suited for aspiring data scientists looking to get hands-on experience with the data prep and EDA stages of the machine learning workflow using Python and Jupyter Notebook. 
Read more

Oracle Cloud Infrastructure 2024 Generative AI Professional Course & Certification Exam (1Z0-1127-24)

Image
I was happy to learn about the Oracle Cloud Infrastructure 2024 Generative AI Professional Course with video tutorials and the Certification Exam (1Z0-1127-24) from their newsletter. I found it extremely useful, timely, and relevant. The course, with about 6 hours of videos, provided me with a comprehensive view of what it takes to build a Generative AI application. Although some parts reference OCI services, much of the course remains vendor neutral. Rohit Rahi and his team at Oracle have done a great job of structuring the beginner-friendly yet comprehensive course so well, covering all the essentials across four modules. The curriculum strikes an excellent balance between depth and accessibility.  While Gen AI output is typically non-deterministic, I was surprised to learn that they can be made completely deterministic under certain conditions. Specifically, in the OCI Gen AI service, setting the temperature parameter to 0 produces consistent, deterministic output for a g...
Read more