Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

September 08 2010

21:00

30 Brilliant examples of JavaScript and HTML5 Uses

JavaScript is something I have been planning to start learning properly for the last few months.To really motivate me, I thought it would be a good idea to look into some interesting uses of the language. I thought I’d share these interesting uses with you in this post. Though none of these examples are really JavaScript only, most put HTML and CSS, to be more exact HTML5, and possibly a few different languages and APIs.

Games

JavaScript is proving itself as an extremely powerful language with browser games, developers are able to make games using JavaScript that are on par with flash games.

Quake II GWT Port

HTML5 Chess Game

Akihabara CapMan

Akiba Hero

Minesweeper

User Interface

UI is probably what JavaScript is best known for, whether is adding Animation to a site, or Form Validation

Gmail

Everytime you check your inbox using the refresh button, you’re saving time not needing to fully reload the whole site. This is thanks to AJAX, which JavaScript plays a big part in.

Google Homepage

When Google’s homepage is first loaded, a clean minimalist design is loaded, showing nothing but the Google logo, and the search box. By using JavaScript Google has cleaned up their homepage even more than before. The Gmail links etc are displayed with a movement of the mouse.

Sexy sliding JavaScript side bar menu using mootools

Sliding Boxes and Captions with jQuery

Fancy Thumbnail Hover Effect

Swfir

swfIR (swf Image Replacement) uses a combination of JavaScript and Flash to apply an assortment of visual effects to any or all images on your website.

PlotKit – JavaScript Chart Plotting

PlotKit is a Chart and Graph Plotting Library for JavaScript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.

Lightbox 2

Lightbox is a simple, unobtrusive script used to overlay images on the current page.

Form Validation

Login for Digg.com

Even as I uploaded the above image it was a pop up using JavaScript that the media upload was in! JavaScript was also used to dull away the rest of the Digg site, increasing the focus on the Login box.

Tracking

Google Analytics

Many of us more than likely use Google Analytics to keep tabs on our sites traffic, it uses JavaScript on your site to track your sites performance.

Facebook Social Plugins

Facebook’s new API allows web masters to check if visitors to their sites are logged into Facebook, and if they are to place more emphasis on their Facebook integration.

SocialHistory.js

By using the a:visited css bug in browsers Social History can check if your visitors have been to a certain website, Reddit for example, it can then show a share on Reddit link depending on the result. There is no real need to include 20 different sharing link now!

User Scripts

User scripts are simple JavaScript programmes that can be installed to your browser using an add-on.

For FireFox use:

for Chrome:

Internet Explorer:

Safari:

Minimalist Facebook

Removes the righthand side sidebar on Facebook, really de-cluttering the site.

Google Calendar Dynamic Icon

Changes the favicon on Google calendar to display the days date

Keep Tube: Download Youtube Videos (HD 1080p & 720p)

Adds the ability to download YouTube videos directly on YouTube.

Gmail Favicon Alerts 3

Changes Gmails favicon to alert you of new mail

@troynt’s Twitter Script

Firefox add ons

Better Gmail 2

Bookmarklets

Bookmarklets are tiny JavaScript programmes that are contained in a bookmark in your browser. They’re javascript: urls which you can drag to your bookmark toolbar, just like a normal bookmark. Though so small, and easy to install (you only need to drag them to your toolbar to install them)

Quix by Yoast

An introduction to Quix from Joost de Valk on Vimeo.

Spriteme

Sites that include several images in the design should consider using css sprites. Making sprites manually can be time-consuming, sprite me is an extremely useful bookmarklet that will add all selected images on any given site, and generate the required sprite and css.

After the deadline

Can add the after the deadline spell check to any page online, with just one click!

Evernote Web Clipper

This bookmarklet is extremely useful, and makes Evernote even quicker and easier to use.

Rollyo RollBar

With one click it adds a search box for any site, handy when you’re looking for a post on a site that you just cant seem to find again.

Readability

Readability is a great service that removes all the clutter for a website, leaving the article formatted in such a way that its allot easier to read.

As you can see the uses for JavaScript can greatly vary. Adding JavaScript to your list of known languages could greatly improve the quality and functionality of any site you work on. Something I am now learning myself after seeing these different examples.

July 14 2010

21:00

24 Helpful Google Chrome Extensions for Bloggers

Competition between Mozilla Firefox and Google Chrome has been intense since the day Google released their official browser. Chrome is the only browser to hit the market and became so much successful in a short span of time. It has outperformed Apple Safari and Opera in speed and surpassed the extensibility of Firefox. Many Firefox users have been flocking away from Firefox since Chrome launched its Extensions. Many bloggers, including me, have done the same because of the effective and multipurpose extension Chrome is supporting. Today we are featuring helpful extensions especially for bloggers, which can make blogging a really fun and pleasing experience.

1. Zemanta

Zemanta-Google-Chrome-Extensions-bloggers

Using Zemanta, you can enhance your blogging experience and make it fun. It expands regular blogging dashboard giving you content suggestion about the text you are writing, images, links, articles and tags in a simple interface located in the sidebar. It supports WordPress, Blogger, Typepad and other popular publishing platforms. It has a spam-free database of 10,000 news sources and blogs; it will filter the copyright images before suggesting them to you.

Its main information sources are:

  • For Links: Wikipedia, IMDB, Amazon etc
  • For Videos: Youtube
  • For Images: Flickr, Getty
  • For Articles: BBC, CNN and thousands of blogs.

2. Google Reader Notifier

Google-Reader-Notifier-Google-Chrome-Extensions-bloggers

Feeds are very important part of life for any blogger, if you want to remain updated with the world easily then you should use Feeds feature of any website or blog. Google Reader is a very popular Feed reader. If you use Google Reader and love fast feeds then this extension is for you. It displays the Google Reader unread feeds count on a small icon next to your URL bar. Clicking the icon shows a preview of your reading list in a pop-up. If you want to open Reader in new tab then you can configure it from the options page.

3. Untiny

Untiny-Google-Chrome-Extensions-bloggers

There are lots of people like me who are always afraid to open a shortened link, scared of any virus attack, but we can overcome this problem by using this extension. You just have to enter the shortened link and press the extract button, original link will be displayed.

4. WiseStamp

WiseStamp-Google-Chrome-Extensions-bloggers

Signatures in any email are very important for bloggers for contacting with fellow bloggers because it looks professional. This extension allows you to create multiple signatures which can be selected as used in Gmail. It will add IM and Social Profiles like Facebook, Twitter and more below your sign.

5. DayHiker

DayHiker-Google-Chrome-Extensions-bloggers

DayHiker is a Google Chrome extension for Google Calendar. It displays schedules and tasks in a toolbar from your Google Calendar. It is a small but useful extension to manage your schedule and tasks. It has countdown and reminder badges with alarm clock which will help to manage your time effectively.

6. TPGoogleReader

TPGoogleReader-Google-Chrome-Extensions-bloggers

Installing this extension is much recommended if you are feed geek. Using this extension you can work with feeds with leisure. It will help you in both reading and subscribing the feeds. When a website has a new feed, the icon of this extension will turn green to orange, click it to open a popup menu to see the list of feeds available on that page then click anyone of them to read it in Google Reader. It can show the number to unread items still in your Google Reader account. You can configure its Icon click, double-click and triple click actions from the option menu.

7. Split Screen

Split-Screen-Google-Chrome-Extensions-bloggers

Some time your monitor screen become small in front of your work load. This extension allows you to overcome this obstacle and splits the browser in two parts; each one can open a different webpage. You can enjoy browsing two websites at the same time by using this epic extension giving to dual view in your browser.

8. Chrome Chikitizer

Well URL shortening has become very famous since last some years and there are many sites providing this service. This Google Chrome extension named “Chrome Chikitizer” dose the same task effectively and directly from your chrome browser.

9. Shareholic

Shareaholic-Google-Chrome-Extensions-bloggers

It is a saying: “Sharing is Caring”. So every blogger should share the useful knowledge he/she has or amazingly informative web pages with his/her colleague and friends. The easy ways to do so is to install this extension. It is the easiest way to share interesting web pages using Facebook, Twitter, Email, Gmail, Bookmarks and many more. You can choose from 100+ supported services which can be configured from option menu.

10. Drop.io

Drop.io-Google-Chrome-Extensions-bloggers

Most of you people may be familiar with the drop.io service, which assists you to get images, movies or documents from WebPages. This extension uses drop.io and allows you to create drops as well as scrape all media of all kind off of any website and throw it into drop. For example if you are browsing Google Images and you click Drop All Images, this extension will upload all the images to your drop and access then easily in future. You can customize whether the extension always create a new drop or you can set a single default drop for it to be used always.

11. Google Images Large Images

Large-Images-Google-Chrome-Extensions-bloggers

Tired of using Google Images with a very small preview images? Use “Google Images Large Images” extension to over-come this obstacle while browsing Google Images. It will show the actual image size on mouse over which will help you to determine the original beauty of that specific image.

12. Chromed Bird

Chromed-Bird-Google-Chrome-Extensions-bloggers

Although there are many Twitter extensions for Google Chrome but Chromed Bird is the most powerful I have used till now with many features. Using this extension you can use tweet anytime without visiting twitter.com, you can add/remove timeline tabs, create custom search queries that will be updates automatically, preview image links by hovering them. Many more important features are also present in this extension to make your tweeting experience more fast and interactive.

13. TwitterBar

TwitterBar-Google-Chrome-Extensions-bloggers

TwitterBar is a Google Chrome Toolbar which enables you to tweet directly from the current page you are going through. The Page’s Title and URL are automatically entered into the textbox, it also use an auto URL-shortener which can be changed as per your requirements from the Options button on the page locating extensions.

14. SEO Status Pagerank/Alexa Toolbar

SEO-Status-Pagerank-Alexa Toolbar-Google-Chrome-Extensions-bloggers

For regular bloggers it is very important to monitor the SEO status of any blog or website of his/her interest. He/she will know the performance and ranking of the websites of his interest in the eyes of Alexa and Google. The SEO status toolbar is a simple, light-weight and very fast facility of checking Google Pagerank and Alexa Rank for any website or its every page. One other advantage of using this toolbar is that, it will increase the Alexa Rank for the sites you visit just like IE toolbar does.

It don’t rely on any third-party website to collect information, it take the data directly from Google and Alexa hence providing accurate and reliable SEO status of any website.

15. AddThis

addthis-Google-Chrome-Extensions-bloggers

AddThis is the most popular bookmarking and sharing service around the globe. Using this extension you can share a webpage or an article to more than 200 website which includes Facebook, Twitter, Wordpress etc. You can email the current page to any of your friend or family member using this extension; it also provides Print option which enables you to print the page you are currently viewing and you can also translate pages in different languages.

16. Image Cropper

Image-Cropper-Google-Chrome-Extensions-bloggers

Image cropper extension allows to crop images from any website. It can crop images in img HTML element, CSS background images for any HTML element and images in PNG format. Important point is, you cannot take screenshot of a webpage or crop it according to your desire, it can crop images present on web pages only.

17. Facebook Notification Checker

Facebook-Notifications-Google-Chrome-Extensions-bloggers

Facebook notifications help you to interact with your fellow bloggers and friends with ease. This extension is developed to make it easier for you, once you have a new Facebook notification this extension will tell you via a red notification icon. Support is also added for notifying for new messages and friend requests.

18. Google Dictionary (by Google)

Google-Dictionary-Google-Chrome-Extensions-bloggers

Not everyone can master any language even it is his/her mother language. So there is always a need of a dictionary, and how good that will be if you have a dictionary in the same page which you are reading. Now this is possible if you are using Google Chrome, by installing this extension you can get meaning or definition of any word in a small pop-up bubble just by double clicking it.

This extension also offers a address bar dictionary from which you can view complete definition of any word. It supports many international languages like French, German, Spanish and more. But note that, it is a dictionary not a translator; i.e. if you are trying to find meaning of a Dutch word in English, it wont happen.

19. RemindMe

RemindMe-Google-Chrome-Extensions-bloggers

Every one hate to miss some important task, I presume so that you. So better set reminders about the tasks and chores to be done in future. This Google Chrome Extension allows you to setup reminder while you are browsing. Remind yourself of online work to be done later or remind yourself of the jobs you need to complete on a specific time. You can also sync the reminders between your different computers using Chrome built-in “Synchronize My Bookmarks” function.

20. Ibrii

Ibri-Google-Chrome-Extensions-bloggers

Ibrii is a very amazing tool to snip every type of content like images, videos, text from any website. One big advantage of this service is that, it provide the facility to share distinct and trenchant elements unlike other service by the use of which, you can only share the whole web page on Twitter or Facebook. Users have the facility to create permalinks which can be later used or shared on instant messaging or on other social networking sites.

21. Chrome Editor

Coding is a very crucial and significant part of a blogger, people find it difficult to switch between the browser and code editor so this extension is made which allows you to code right within the your browser. I can locally save a code reference for later use on your computer. It has some predefined basic codes like HTML 4 DTD, HTML 5 DTD, CSS and jQuery Functions.

22. Digg for Chrome

Digg-Google-Chrome-Extensions-bloggers

This official Digg extension makes digging easy and fast. You can Digg directly from your browser, it views Digg count for any URL which is displayed in the right of the browser’s address bar. As Digg is one of the largest source to find information of your interest, this extension has a random button that allows you to discover new content from the web.

23. Wordpress Comment Notifier

Wordpress-Comments Notifier-Google-Chrome-Extensions-bloggers

This extension will check for pending comments on your Wordpress blog and displays it as a badge. You can unapproved, Trash, Reply to or mark as spam without opening a new tab. This extension is very handy for bloggers owing more than 1 blog as it can add multiple blogs.

24. ChromePass

ChromePass-Google-Chrome-Extensions-bloggers

ChromePass is a small password recovery tool that allows you to view the user names and passwords which are stored by Google Chrome browser. It will show Origin URL, Action URL, User name and Passwords as well as their fields and the time at which they were created.

Any thing missing or any suggestion? Feel free to inform us about your thoughts in comments :) .

Sponsored post
soup-sponsored
04:52

June 29 2010

04:05

Add more value to Illustrator with Phantasm CS

728x90

Adobe Illustrator is a program from the Adobe Creative Suite that has an infinite amount of capabilities when it comes to vector graphics but have you ever felt limited with it’s ability to make color adjustments? Do you use illustrator heavily? Then Astute Graphics has an amazing plugin for you to tach on to Illustrator to make Illustrator more versatile then before. The plugin is called Phantasm CS Publisher.

Phantasm CS adds some amazing functionality to Illustrator to make it behave like Photoshop and in some cases In-Design this is a must have if you live in the vector world of Illustrator. Phantasm CS gives you:

  • Color Adjustment Tools (Curves, Levels, Hue/Saturation) These work directly in an Illustrator document on all embedded vector objects and images.
  • Halftones & Duotones and other creative tools
  • Print previews including quick and full separations and ink coverage (super helpful for that new t-shirt design vector you just made or anything of the sort)
  • Embedded image editing
  • Embedded image linking

Screen shot 2010-06-28 at 11.33.56 PM

Astute Graphics has several videos that give you a complete walk through on Phantasm CS. Their video’s include:

Several of these features will serve advertising agencies, graphic design studio’s, illustrators, print designers, printers or anyone that has to deal with any kind of printing, process colors or are involved in any pre-press processes.

Screen shot 2010-06-28 at 11.31.25 PM

Phantasm CS is compatible with CS2+ for Windows and Mac. If you need more information on what requirements are needed for plugin you can check the Astute Graphics site. Phantasm CS comes in three different flavors: Design ($75 USD) Studio ($137 USD) and Publisher ($214 USD).

If you use Illustrator at all you should go grab the demo from Astute Graphics and take it for a test drive. It’s a plugin that you don’t want to miss.

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Add more value to Illustrator with Phantasm CS

June 18 2010

21:00

20+ Uniquely Cool jQuery Plugins and Tutorials

jQuery is a fantastic resource with a powerful base of plugins, but we often see roundup’s of the same boring plugins that all do the same thing. Here are 22 plugins that don’t simply do the same thing, but do things differently, and are exciting rather than boring. We hope that these plugins will be handy in your next project.

1. Airport Text Effect

Demo | Link

You know those flickering messages you see on boards at airports and train stations? That effect is now at your fingertips with this plugin.

2. Sliding Image Puzzle

Demo | Link

Remember those sliding image puzzles you played when you were little? Well now you can make your own in your browser with this clever little plugin.

3. Quickflip

Demo | Link

With this plugin, you can mimic the effect of cooly flipping over an element such as an image, or lets say for example, a business card.

4. Spritley

Demo | Link

A fantastic plugin to create a truly inspiring sliding header, giving the illusion of flash, without flash itself!

5. JQZoom

Demo | Link

Slightly less unique, but still just as cool, this plugin allows you to have preview zoom in fields on an image, just like we’ve seen some major retailers using.

6. Quicksand

Demo | Link

Re-order and sort your list items with beautiful transitions with this plugin.  Super sleek, and super fast.

7. Spacegallery

Demo | Link

This image gallery offers up the feeling of flicking through items in a filing cabinet. You view images one by one, and see the ones behind stacking up.

8. jQuery Heat Map

Demo | Link

There are plenty tools for creating heat-maps of your site, but say you want to do it yourself? This will do the trick nicely with it clean simple interface.

9. On-screen Keyboard

Demo | Link

We’ve seen on-screen keyboards before, but this thorough tutorial shows you how to craft one for yourself, ready for use in your browser.

10. Curtains Effect

Demo | Link

Want to give something the proper screen treatment it deserves? Unveil it with giant curtains using this jQuery tutorial.

11. Sticky Notes

Demo | Link

Add draggable, editable stick notes to your website with this fantastic jQuery plugin!

12. Lens Flare

Demo | Link

Want to make you’re images more interactive? Then adding a lens flare to your image is a fantastic way to do so. Check out these fantastic demos.

13. Star Rating

Demo | Link

Turn a boring set of radio buttons, or select drop down, into a fantastic looking star rating system with great fallback for JavaScript turned off.

14. Parallax

Demo | Link

Use Parallax to create a moving image relative to the mouse position where multiple layers move.

15. Jplayer

DemoLink

Allow users to listen to audio on your site with Jplayer which even supports html5!

16. MoaText

Demo | Link

Though I can’t really think of a practical application, this plugin lets you manipulate text with your mouse in wave effects and more.

17. Grid Accordion

Demo | Link

This is a fantastic tutorial from Chris Coyier at CSS-tricks on making a unique accordion that works as a grid.

18. Form Wizard

Demo | Link

Turn normal forms into a step-by-step wizard making your forms more usable and less daunting to users.

19. Lazy

Link

Found yourself with an html head tag overflowing with css and JavaScript resources? Let Lazy fix that for you.

20. Elastic

Demo | Link

Elastic is an aptly named plugin that will grow your textarea as you type until you hit the max height defined.

21. UI Layout

Demo | Link

UI Layout makes complex layouts with sliding panels, and so on a breeze. The demo speaks for itself on this one.

22. Sliding Boxes and Captions

DemoLink

This great tutorial allows us to get dynamic with how image captions are displayed on images.

Further Discussion

I doubt I’ve found every fantastic unique jQuery plugin out there, so if you know of more, make sure you add them in the comments for others to see as well.

March 20 2010

10:00

13 Must Have Firefox Addons to Boost the Productivity of Bloggers

Firefox is currently the ultimate choice for bloggers because of its awesome collection of addons. These addons provide a lot of flexibility by reducing the necessity of separate tools for different tasks of blogging. This saves a lot of time required in managing different tools and thus increases the overall productivity of Blogger. In this article we have compiled 13 best Firefox addons necessary for Bloggers.

1. ScribeFire

To do Blogging, you need a Blog Editor and ScribeFire in Firefox acts as a nice blogging editor. The user can drag and drop text from web pages, insert images, and post to multiple blogs. Unfortunately, there is a tracking option enabled by default but it can be disabled. This addon can actually make your blog editing platform independent from your operating system.

2. Reminder Fox

Obviously, Bloggers need to sort out their future plans to groom quickly. Reminder Fox lets you do it with ease in Mozilla Firefox. You can manage To Do lists, set Reminders with alerts or alarms right in your Firefox browser conveniently.

3. RSS Ticker

Bloggers need to remain updated with other blogs and sources of information for which the defacto communication standard is RSS. RSS Ticker is a nice add-on which displays the Live Bookmarks in a scrolling fashion across the user’s screen. It means that the user gets updates while browsing and doesn’t need to log in feed reader specifically for accessing RSS feeds.

4. Faster Fox

This addon increases overall productivity of blogger by providing some commonly used tasks in a refined manner. It tweaks wikipedia by showing related articles, auto loads next pages, shows suggestions by Google for a keyword in address bar, enhances Google’s search results and many more. Its my personal favorite and highly recommended for you.

5. Similar Web

If you are facing difficulty in finding a related website to the one you are currently visiting, Similar Web can actually provide many alternatives. In this way, the blogger can easily hit upon many similar resources and refine articles comfortably. It helps a lot and boosts my productivity while researching for an article.

6. Zemanta

You are wondering for addon like “Similar Web” which can find relative content for your blog post then you don’t need to worry, Zemanta is here. It’s a content recommendation engine which helps you in finding and suggesting images, links, articles, and tags correlated to your content from a large number of quality resources like YouTube, Wikipedia, Flickr, Amazon, Google Maps, Facebook, Twitter, and many more. An awesome addon which you should install right now.


7. Readability

Having some difficulty in reading text surrounded by redundant information on a web page. Readability addon will rip off the unnecessary information to make content more visible. In this way, the web pages can be printed with less clutter. This addon also provides auto scrolling feature which can give rest to your fingers and scroll a web page without keyboard and mouse.

8. Gmail Manager

Gmail is currently the mostly used email service in general and this happens to be same in case of bloggers. Also Google provides free email solution in a package named Google Apps for domains. Therefore, an enhanced Gmail notifier is needed and Gmail Manager addon is best for many purposes.

9. Brief

It is another Firefox addon which acts as an alternative for a feed reader. Its features are not less worth than a full feed reader. The feeds are displayed in form of a full web page with a sidebar containing user’s subscriptions. The items can be searched and bookmarked. There is also a notification option which informs whenever there is an update in any feed.

10. Read It Later

If your bookmarks are getting messy with links which you intend to read only once then you should use this extension. The web pages can be marked with single click for latter reading. The items can read offline and it is also possible to synchronize them between multiple devices and workplaces.

11. Copy Plain Text

Bloggers need to copy content from different sources and paste it in their article but in most cases the content has its own formatting. You need to remove this formatting and then match it with your content. Instead of doing this, you can copy text from a web page through this extension which removes all formatting and makes it simple text.

12. US English Dictionary

Nonnative as well native English speakers need a dictionary for easy look up. For a Blogger, it is even more necessary as it can provide more sophisticated alternatives for a given word which can polish Blogger’s write up.

13. Scrapbook Plus

This Firefox addon lets a blogger organize a library of web pages or full websites. The addon supports filters which can be defined to exclude related links and web pages that are not required.

If you are a Blogger and starts utilizing these addons, you will quickly feel an improvement in quality of your work which is obviously the ultimate goal. There may be an addon missing which is your favorite one, do let us know in comments.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...