How to Create BonBon Buttons with CSS3
Fri, 03 Sep 2010 07:01:59 +0000
BonBon Buttons are sweet CSS3 buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. There are 3 different materials. A “mate”, “glossy” and a “glass” version. The difference of the later two is that the glass version adds a dark blurry text-shadow which makes it look like you can [...]
BonBon Buttons are sweet CSS3 buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. There are 3 different materials. A “mate”, “glossy” and a “glass” version. The difference of the later two is that the glass version adds a dark blurry text-shadow which makes it look like you can see trough the button to its bottom.
However, BonBon Buttons are not meant to be used on your next project that targets the average internet user. He just wanted to show a couple techniques how to use some of the new CSS3/HTML5 features. So only the current version of Safari, Chrome and Firefox are supported.
Requirements: CSS3 Support
Demo: http://lab.simurai.com/css/buttons/
License: License Free
Ray Cheung
Jasmine – A JavaScript Testing Framework
Thu, 02 Sep 2010 07:01:23 +0000
There are some great JavaScript testing frameworks out there. Many only work from within a browser. Most don’t support testing asynchronous code like event callbacks. Some have syntax that’s hard for JS developers or IDEs to understand.
Jasmine is a JavaScript testing framework. It’s heavily influenced by, and borrows the best parts of, ScrewUnit, JSSpec, JSpec, [...]
There are some great JavaScript testing frameworks out there. Many only work from within a browser. Most don’t support testing asynchronous code like event callbacks. Some have syntax that’s hard for JS developers or IDEs to understand.
Jasmine is a JavaScript testing framework. It’s heavily influenced by, and borrows the best parts of, ScrewUnit, JSSpec, JSpec, and of course RSpec. Jasmine is not tied to any browser, framework, platform, or host language. It work anywhere JavaScript can run, including browsers, servers, phones, etc.
Requirements: -
Demo: http://pivotal.github.com/jasmine/
License: MIT License
Ray Cheung
How to Implement an Ajax Appreciate Badge
Wed, 01 Sep 2010 07:01:54 +0000
When you publish something online, there are not that many ways to determine whether people like what you have to say. Comments, the cornerstone of blogging, are too demanding, and users often prefer not to post one.
If you’ve dropped by Behance, you’ve probably noticed their appreciate badge, which is a neat solution to this exact [...]
When you publish something online, there are not that many ways to determine whether people like what you have to say. Comments, the cornerstone of blogging, are too demanding, and users often prefer not to post one.
If you’ve dropped by Behance, you’ve probably noticed their appreciate badge, which is a neat solution to this exact problem. With it people share their appreciation for somebody’s work. Tutorialzine taught us how to implement An AJAX Click to Appreciate Badge, which you can include in every page of your website with a bit of jQuery magic.
Requirements: jQuery Framework
Demo: http://demo.tutorialzine.com/2010/07/click-to-appreciate-badge…
License: License Free
Ray Cheung
How to Add Finger-Swipe Support to Webpages
Tue, 31 Aug 2010 09:07:29 +0000
One of the more interesting and fun aspects of iPad usage is the ability to effect change in a webpage by swiping a finger across the screen of the iPad. For example, swiping to the left to navigate to the next page in a series of pages, or swiping to display the next image in [...]
One of the more interesting and fun aspects of iPad usage is the ability to effect change in a webpage by swiping a finger across the screen of the iPad. For example, swiping to the left to navigate to the next page in a series of pages, or swiping to display the next image in a series of images. For iPad users, these actions are intuitive and natural.
However, for those who compose webpages, adding touch detection to a page can be a challenging and difficult process. No more. The information presented on Padilicious: Add Finger-Swipe Support to Webpages, will make it easy to add touch sensing to your pages, requiring only a minimum of JavaScript coding on your part.
Requirements: -
Demo: http://padilicious.com/code/touchevents/basicswipe.html
License: License Free
Ray Cheung
Useful Hover-based User Interface with jQuery, CSS3, HTML5
Mon, 30 Aug 2010 07:31:53 +0000
AddyOsmani is going to teach us how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Why a hover-based interface? With the popularity of touch-based web applications simplifying the way that people can use sites on mobile devices, there’s room for us to look into ways of making it even easier [...]
AddyOsmani is going to teach us how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Why a hover-based interface? With the popularity of touch-based web applications simplifying the way that people can use sites on mobile devices, there’s room for us to look into ways of making it even easier for people to use sites in desktop-based browsers too.
WanderWall achieves that and what it could easily be used for a portfolio or business site but the concepts we’ll learn could certainly be used to expand the idea further.
Requirements: jQuery Framework
Demo: http://www.addyosmani.com/resources/wanderwall…
License: License Free
Ray Cheung
The Winner of 1 x Custom Logo Design By LogoBee
Sun, 29 Aug 2010 07:22:36 +0000
Thank you for all of the participants of Giveaway 1 x Custom Logo Design By LogoBee. We are happy to announce the following winner. Congratulations. You will receive an email about how to claim your prize.
Cody Lambrecht
WebAppers will continue giving away some really nice web development tools and resources to our readers. Please feel free [...]
Thank you for all of the participants of Giveaway 1 x Custom Logo Design By LogoBee. We are happy to announce the following winner. Congratulations. You will receive an email about how to claim your prize.
Cody Lambrecht
WebAppers will continue giving away some really nice web development tools and resources to our readers. Please feel free to suggest what you would like for the next Giveaway under this post. Thank you.
Ray Cheung
Manipulate Colors in All Imaginable Combinations with xColor
Fri, 27 Aug 2010 07:01:41 +0000
The xcolor plugin is an easy-to-use jQuery extension to manipulate colors in all imaginable combinations. This plugin implements an extensiv color parser and a featureful set of color-manipulation methods. There is also an animate() extension to smooth CSS colors.
Another useful method isReadable() completes the whole, by allowing you to check if a text is readable [...]
The xcolor plugin is an easy-to-use jQuery extension to manipulate colors in all imaginable combinations. This plugin implements an extensiv color parser and a featureful set of color-manipulation methods. There is also an animate() extension to smooth CSS colors.
Another useful method isReadable() completes the whole, by allowing you to check if a text is readable on a certain background. The color value can also be passed in different color models: RGB, HSV/HSB, HSL and their adequate alpha extensions.
Requirements: jQuery Framework
Demo: http://www.xarg.org/project/jquery-color-plugin-xcolor/
License: MIT, GPL License
Ray Cheung
Create Scrollable Interface with jQuery Image Scroller Plugin
Thu, 26 Aug 2010 07:01:59 +0000
jQuery Image Scroller Plugin creates a scrollable interface to scroll over a large image in a smaller area. The idea is that we have a container with a fixed height and width, an image that is taller than the container, and a container for the thumbnail of that image.
Once the plugin is applied, there [...]
jQuery Image Scroller Plugin creates a scrollable interface to scroll over a large image in a smaller area. The idea is that we have a container with a fixed height and width, an image that is taller than the container, and a container for the thumbnail of that image.
Once the plugin is applied, there is a span with a class of indicator appended to the small preview area which represents the area you can drag up and down.
Requirements: jQuery Framework
Demo: http://www.viget.com/uploads/file/image-scroller/
License: MIT, GPL License
Ray Cheung
35 Best Free Chrome Extensions for Web Developers
Wed, 25 Aug 2010 10:00:50 +0000
It will take an awful lot of effort on Google’s part to tear most web developers away from their beloved Firefox, but with the number of web-developer-friendly extensions for Chrome on the rise, developers in increasing numbers are giving Chrome a try and some of them are not looking back.
Chrome’s faster than Firefox, uses less [...]
It will take an awful lot of effort on Google’s part to tear most web developers away from their beloved Firefox, but with the number of web-developer-friendly extensions for Chrome on the rise, developers in increasing numbers are giving Chrome a try and some of them are not looking back.
Chrome’s faster than Firefox, uses less CPU and comes with built-in Developer Tools (accessible by pressing Ctrl+Shift+I). Even if you’re not ready to abandon Firefox yet, make sure you give Chrome a chance with the outstanding extensions below. Chrome’s improving rapidly and early adopters will benefit most.
1. MeasureIt!
Totally straightforward, MeasureIt! lets you draw a ruler so that you can measure the pixel width and height of any element online.
2. Pendule
Pendule provides a veritable smorgasbord of valuable developer tools to help with style sheets, JavaScript, forms, images, accessibility and much more.
3. BuiltWith Technology Profiler
BuiltWith profiles the webpage you’re looking at, exposing all the technologies used therein.
4. Flashblock
With Flashblock, Flash elements on a website are replaced by placeholders, which can be clicked on individually to load the Flash content.
5. Lorem Ipsum Generator
Use this extension to randomly generate lorem ipsum text. It’s as simple as that.
6. iMacros for Chrome
As a web developer, you’ll end up repeating the same actions over and over again. Record these actions as iMacros to save yourself valuable time. Great for filling out web forms.
7. Xmarks Bookmarks and Password Sync
Xmarks is the best tool at your disposal for backing up and syncing bookmarks. Use it to sync across computers and different browsers. 163,569 users can’t be wrong.
8. goo.gl URL Shortener
Google URL Shortener takes long URLs and makes them smaller for easier tweeting and emailing. Use this extension to incorporate the Shortener into your browser.
9. Aviary Screen Capture
Take a screenshot of a webpage and perform basic editing (crop, resize, rotate) in your browser with Aviary.
10. Snippy
While Aviary is the best at capturing entire webpages, Snippy is ideal for grabbing snippets from sites of interest for research.
11. Ibrii
Some people prefer Snippy; others prefer Ibrii, which is another excellent extension for capturing snippets of pictures, text and videos. Try both and see which one’s right for you.
12. PlainClothes
PlainClothes “unstyles” the websites you visit, colour coding specific elements for accessibility and educational purposes.
13. Firebug Lite
An absolute must have extension for web developers. Use it to inspect HTML elements and live edit CSS properties.
14. IE Tab
Use IE Tab to view websites in Internet Explorer while using Chrome.
15. Eye Dropper
Pick any colour from any webpage using this terrific tool.
16. TooManyTabs
Having too many tabs open at once can cause serious confusion and major errors. Clean up your online working environment with TooManyTabs, which makes it possible to clearly see all the tabs you’re using.
17. Session Manager
Session Manager saves your internet session, including all open tabs and windows, for you to come back to. It’s another good one for developers who are a little too “tab-happy”.
18. Chrome Sniffer
The aptly named Chrome Sniffer enables users to inspect the CMS and JavaScript library running on a page. Over 50 different kinds are detectable.
19. Web Developer
You get a whole new toolbar full of web developer goodies when you install this extension.
20. Shareaholic
The first step on the path to recovery from “shareaholism” is admitting you’ve got a problem. The next step is installing Shareaholic for Chrome which makes sharing webpages via Facebook, Twitter and email etc really, really easy.
21. FastestChrome
With over 10 million users, chances are you’ve heard of FastestFox, which speeds up your Firefox browsing experience. FastestChrome is essentially the same thing, but (you guessed it!) for Chrome.
22. Validity
Once installed, you can click on the Validity icon in the address bar to validate your HTML documents without even leaving the page.
23. LastPass
This one’s great for everyone, not just web developers – you can use LastPass to securely store and manage all of the passwords that you use online.
24. Google Tasks
Essentially a to-do list built into your browser, Google Tasks is another extension which is useful for everyone.
25. Chrome SEO
Chrome SEO provides Chrome users with a suite of handy SEO tools. It’s the most popular SEO extension available.
26. Resolution Test
Change the size of your browser to see how websites fare at different resolutions.
27. Speed Tracer
Using Speed Tracer, you can pinpoint and solve speed-related issues with you web apps.
28. Picnik Extension for Chrome
Picnik is one of the best free online image editors out there and now it’s available as a Chrome extension.
29. Chrome Flags
Chrome Flags tells you the physical location of the website you’re viewing by displaying the appropriate national flag.
30. WebEdit
WebEdit’s a superb extension for killing time while experimenting with your developer skills. Use it to edit (non-permanently, of course) any webpage you like.
31. Domain Availability Checker
Checking the availability of domains online is pretty easy, but if you do it regularly you can really benefit from this extension, which runs the necessary checks in secs.
32. SEOQuake Lite
SEOQuake Lite displays the PageRank and Alexa rank of the website you’re viewing in the bottom right of your Chrome browser window.
33. Site Geo IP Locator
Click on the Site Geo icon and the IP address of the current website you’re viewing is revealed. This can then be located on a proper map.
34. Google Mail Checker Plus
Not only can you use Google Mail Checker to see what’s inside your Gmail inbox without navigating away from your current webpage, you can preview messages: deleting, marking as spam or reading as appropriate.
35. SEO Analysis Tool
SEO Analysis Tool picks apart the SEO characteristics of any webpage, providing you with detailed information about meta tag listings, keywords found in anchor tags and URLs found in the page, amongst other things.
About the Auhor
James is a writer and designer who works for an online supplier of toner cartridges where he reviews and analyses hardware such as the MLT-D1082S as well as posting on their advertising and design blog.
Ray Cheung
Transform Your WordPress Content into An Electronic Book
Tue, 24 Aug 2010 07:18:07 +0000
Anthologize is a free, open-source, plugin that transforms WordPress 3.0 into a platform for publishing electronic texts. Grab posts from your WordPress blog, import feeds from external sites, or create new content directly within Anthologize. Then outline, order, and edit your work, crafting it into a single volume for export in several formats, including—in this [...]
Anthologize is a free, open-source, plugin that transforms WordPress 3.0 into a platform for publishing electronic texts. Grab posts from your WordPress blog, import feeds from external sites, or create new content directly within Anthologize. Then outline, order, and edit your work, crafting it into a single volume for export in several formats, including—in this release—PDF, ePUB, TEI.
Source: http://anthologize.org/
Ray Cheung
