Thomas Edison once said, “Genius is one percent inspiration and ninety-nine percent perspiration.” He was a wise man as can be evidenced by the fact that we still use the light bulb he invented, so we have to assume that he knew what he was talking about. This Edison truth (and washed-up cliche), that doing anything worth doing takes a lot of hard work and some inspiration leaves no exception, so yes, it also applies to web development.
Often enough when I am roaming around the internet I come across inspiring websites that simply captivate my heart or often times it is just one single page or elements of a page that I cannot simply stop coveting. The question that I always end up asking myself is how did they do that? How did they implement the feature?What’s it called?
And for a long time I made use of the Ctrl+U feature and took a peek at the underlying code. While this will give you quite a glimpse into the gears and cogs beneath the face, it does not tell you much about the way the technologies being used to do the whatever magic you are coveting on the server side.
If you are like me, a guy who can barely code a href using HTML, the code is unlikely to mean much except confusing the heck out of you. For example you would not believe how much stuff is beneath the deceptively simple Google Search page, take a look here if you do not believe me.
Recently I started wondering if there was a tool like Shazam for websites that would allow you to identify the technology used to built some of the features that I found inspiring on most websites. As it turns out there are several.
These apps and web services allow you to view the technologies being used without wadding through lines and lines of code. If you are a fan of WordPress like me, you can even learn the theme name and plugins that were used to built the website and go on to use them to build your own site.
Appspector is a Chrome extension that allows you to see the technologies behind the website or webpage you find interesting. Needless to say that you will need the Chrome/Chromium browsers to use this app. To install it click here in from either of these two browsers. Once you have installed it, visit your Muse webpage and the technologies used will appear in the address bar next to the bookmark star. Clicking on the icon displayed will show you more information about the underlying tech.
If you are like me and 23% of the people running websites out there, a fan of WordPress, sometimes you find features that you simply ought to have on other people’s websites. It could be a theme you have to die for, a responsive slider, an unobtrusive light box or some other feature that is, as they say, to die for. Whatwptheme.com provides an easy and quick way for you to see the theme and most of the plugins in the website’s engine room.
Built With
If you prefer other browsers and as such can’t use Appspector, you can always use the Built With website. In addition to spewing out a lot of gibberish that only web developer geeks can make use of, the site allows you to easily identify the technologies behind the scenes.
I am sure that there are other tools that a one can use to identify and be inspired by some of the best websites out there and as always, those who know have a duty to impart to us their knowledge in the comments section.
Knowing the technologies, themes and plugins can help those who want to imitate the best developers out there. After all, most of what we learnt in life was by imitation. The way talk before we develop our own nauseating mannerisms came from imitating our parents and those around us and most of us hobbled and staggered after our parents before we developed our swashing gaits.
As a wise man said: Art begins in imitation and ends in innovation. These tools will help you with your imitation game. It’s up to you to move on after that a develop your own style.
