Skip to main content

How Did He Do THAT?

That's a question I ask myself almost daily - when looking at websites in general, and at blogs in particular. Just about everything I do in my blogs is copied from somebody else. There's no classes "Blogging 101" etc.

Well, here is yet another reason why I push Firefox.

View Selection Source


If you are looking at a web page or blog, and you see a feature that intrigues you, simply:
  1. Highlight the portion of the webpage that interests you.
  2. Right click and select "View Selection Source".
  3. A view page source window will pop up, with the code to produce just the highlighted elements, from step 1, highlighted.


What better way to learn? Try my sample article.
  • Click on the link.
  • Highlight the portion of the page beginning with "yesterday", and ending with "Experience". It helps to highlight objects before and after the area that interests you, to get the context.
  • Right click in the highlighted area, and select "View Selection Source".
  • If you find the source, as displayed in the popup window, hard to read, just copy the highlighted code (Ctrl - C), open Notepad, and paste.
  • Voila.
  • So THAT's how he (she) did it!

If you have just Internet Explorer or Opera, sorry. Get Firefox.

Going further, the Firebug add-on in Firefox will show you, dynamically, the code behind any container or object on the web page. You can examine CSS or HTML, and you can look at the CSS attributes, the physical layout, or the DOM for any object that interests you.

You can, alternatively, look at the source code for the entire page. With Firefox, it's "View" - "Page Source"; with Internet Explorer, it's almost the same - "View" - "Source". Firefox presents a listing, with important keywords and sections in different colours; Internet Explorer presents you with a Notepad window. Both are useful, in their own way.

An alternative to using browser based code interpreters would be vURL Desktop Edition. You provide the URL of an interesting web page, it extracts the page, and displays the source code and a compiled and sorted list of all links within that web page. The drawback of vURL would be its presentation of source code. With Firefox and "View Selection Source", you are presented the web page code with the area of interest highlighted; with vURL, you are given the entire web page and you have to search on your own, and find the code for the area of interest.

Anyway, once you find code that interests you, find out how to use the code. The W3 CSS / HTML website is excellent for this purpose.
  • Go to the W3 website.
  • Find the Site Search applet in the upper right of the web page.
  • Type the CSS / HTML tag, with the brackets around it, that interests you. Hit enter.
  • The search results will include a number of hits. The top hit should link to the tutorial page for that tag.
  • The tutorial web page will briefly describe the tag, and its characteristics.
  • Near the bottom of each tutorial web page, look for "Try-It-Yourself Demos". The demos are like live labs, with code on the left, and the resulting display on the right. You can type in changes and see results as you watch.
I see similar possibilities in the EchoEcho CSS Tutorial.

Comments

vijayakumar said…
EXCELLENT ARTICLE I VE EVER SEENED
Freakytech said…
Good information.But you can also view the page source using Firebug add-on in Chrome.

Popular posts from this blog

Custom Domain Migration - Managing The Traffic

Your blog depends upon traffic for its success.

Anything that affects the traffic to your blog, such as any change in the URL, affects the success of your blog. Publishing the blog to a custom domain, like renaming the blog, will affect traffic to your blog. The effects of the change will vary from blog to blog, because of the different traffic to every different blog.Followers. People who find your blog because of recommendations by other people.Search engines. Robotic processes which methodically surf your blog, and provide dynamic indexing to people who search for information.Subscribers. People who read your content from their newsfeed reader, such as the dashboard Reading List.Viewers. People who read your content from their browser.No two blogs are the same - and no two blogs will have the same combinations of traffic sources.

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.