Entries Tagged 'web20' ↓
View original post found on Smashing Magazine Feed authored by Smashing Editorial
February 18th, 2010 — web20
Although CSS is generally considered a simple and straightforward language, sometimes it requires creativity, skill and a bit of experimentation. The good news is that designers and developers worldwide often face similar problems and choose to share their insights and workarounds with the wider community.
This is where we come in. We are always looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.
You may want to look at similar CSS-related posts that we published last months:
[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]
CSS Layouts: Techniques And Workarounds
Facebook Style Footer Admin Panel
Learn how to re-create the Facebook footer admin panel with CSS and jQuery. Also check out part 2.
Adaptable View: How Do They Do It?
This tutorial explains how to manually change a layout, and it shows two great examples and “how they did it.”
Easy Display Switch with CSS and jQuery
A quick and simple way to enable users to switch page layouts using CSS and jQuery.
Quick Tip – Resizing Images Based On Browser Window Size
In fluid layouts, formatting text to adjust smoothly to window size is easy, but images are not as fluid-friendly. This quick tip shows how to switch between two image sizes based on the size of the browser, the DIV or whatever else you choose.
One Page Résumé Site
A clean layout on one page—literally (just one index.html file with optional images). It comes with contact information in microformats and a main area for the resume using a definition list (dl). And it prints well.
Pegs: Automate Display: fixed++
Chris Wetherell posts on Pegs, a strategy for having one scroll bar but independent scrolling areas. After the first one, click on the other items to flip between sizes. You will see that an area’s scroll depends on the configuration.
CSS 100% Height
A common problem among designers is how to get a div to stretch 100% of the window’s height. There are a few different techniques out there, and this tutorial shows one of them.
CSS3 Drop-Down Menu
A clean, simple a nice navigation menu, designed by Nick La.
CSS Trick for a Scrolling Transparent Background Effect
Scroll the page to watch a battle between good and evil take shape. The effect requires two images: one transparent and one tiled gradient image. The gradient scrolls under the transparent PNG. Because it matches the colors in the PNG, each set of images disappears, depending on the part of the gradient they’re on top of.
Fluid Images
By default, an image element that is 500 pixels doesn’t exactly play nice with a container as large as 800 pixels or one as small as 100. What’s a designer to do?
Scroll/Follow Sidebar, Multiple Techniques
A really simple concept: the sidebar follows you as you scroll down the page. There are a number of ways to go about it. Two are covered here: CSS and JavaScript (jQuery), with a bonus CSS trick.
Vertical Centering With CSS
There are a few different ways to vertically center objects using CSS, but choosing the right one can be difficult. Here is a list of the best ways and an explanation of how to create a nice centered website.
Create YouTube-like adaptable view using CSS and jQuery
Other than the “Turn off the lights” feature, YouTube has great stuff, such as the “change view” feature, which allows you to switch between normal and wide mode, thus expanding or shrinking the video area. Creating this is very simple.
How To Create a Horizontally Scrolling Site
If websites were made of wood, the grain would run up and down. Vertical is the natural flow of the Web. But browsers are equipped with vertical and horizontal scroll bars, right? We have the choice to go against the grain and create web pages that scroll primarily horizontally and that even expand horizontally to accommodate more content. Perhaps a slight blow to usability, but a cool creative touch nonetheless!
Purely CSS – Faking Minimum Margins
min-margin is non-existent in the CSS world. After you’ve pondered and Googled it, check out the solution here.
Create Sidebars of Equal Height with Faux Columns
CSS can be tricky business. Creating columns of equal height, where the content in one column is longer than the content in another, is frustrating. Here’s where the faux-column technique can help. Find out how this solution makes even the most complicated layout a breeze to code.
Setting Equal Heights with jQuery
Here is a script to match the heights of boxes in the same container and create a tidy grid, with little overhead.
Quick Tip: Centered Fake Floats
There were ways to center-align left-floated elements, but then inline-block became popular and everything changed. After a bit of tinkering, Zaharenia Atzitzikaki found an efficient and (mostly) cross-browser-compatible way to center elements without floats.
6 Flexible jQuery Plugins to Control Web Page Layouts Easily
A collection of six jQuery plug-ins to manage page layouts easily.
Four Methods to Create Equal-Height Columns
This article discusses ways to create equal-height columns that work in all major browsers (including IE6). All of the methods show how to create a three-column layout.
How to: CSS Large Background
A tutorial with various CSS examples for how to create a large background using either a single image or double images.
A Nice Little CSS Positioning Technique
Here, we have a basic unordered list (ul), with left-floated images where the text doesn’t wrap under the images. Of course, this technique could be deployed in loads of other instances.
Perfect Full Page Background Image
This technique allows an image to fill the page, with no white space. The image scales as needed and retains its proportions, without triggering scroll bars.
Smart Columns With CSS and jQuery
In observing liquid-width websites, Soh Tanaka sees two common techniques for displaying columns: fixed columns and liquid columns. He points out the drawbacks of both and pitches his solution.
Images And Visual Effects With CSS
A Beautiful Apple-Style Slideshow Gallery With CSS and jQuery
Create an Apple-like slideshow gallery, similar to the one used on Apple’s website to showcase products. It works entirely in the front end; no PHP or databases required.
Rolling a coke can around with pure CSS
Román Cortés is having a lot of fun doing CSS tricks these days. He just built a rolling coke can that uses background-attachment, background-position and a few other tricks to achieve the effect. No fancy CSS3 needed here!
Grayscale Hover Effect With CSS and jQuery
A few months ago, James Padolsey introduced a cool grayscale technique for non-IE browsers. His technique inspired Soh Tanaka to come up with a workaround with a similar effect. His solution relies on CSS Sprites and a few lines of jQuery, but it requires a bit of preparation before implementation. It is not recommended for large-scale projects; it is probably best for portfolio pieces.
Codename Rainbows
Some JavaScript and CSS magic is used here to apply a two-color gradient to text. Shadows and highlights can also be applied. This works especially well on big websites and for dynamic content where creating images for every instance would be impractical.
3 Easy and Fast CSS Techniques for Faux Image Cropping
This article summarizes three fast and easy CSS techniques for displaying only a portion of an image. All of the techniques need only a couple of lines of CSS. You are not literally cropping, which is why it’s called faux image cropping. These techniques can be helpful if you want to keep images to a certain size (for example, thumbnails in a news section). Being able to use CSS to control which portion of an image to display is great.
Image Rollover Borders That Do Not Change Layout
With CSS, the border of any block-level element is factored into the element’s size in the layout. So, if you add a border to an element on hover, the layout will shift. In this post, you will find how to use the regular border property and create inner borders to get around that.
Horizontal Stripes
This tutorial shows you how to create never ending horizontal stripes in your web design using CSS.
Nine Techniques for CSS Image Replacement
Put nine different techniques of image replacement to the test.
Bokeh effects with CSS3 and jQuery
This tutorial teaches you how to re-create the bokeh effect with CSS 3. With some help from jQuery, we can add some randomness in colour, size and position for the effect.
A Stationary Logo That Changes on Page Scroll with CSS
Here is an interesting effect that modifies the logo when the page is scrolled, using the CSS background-attachment property.
Silhouette Fade-Ins
To achieve the effect in the image above, first we need a DIV with the silhouettes as a background image. Then we put four images in that DIV, all the exact same size, with each band member highlighted. These images are hidden by default. Then you absolutely position four regions on top of the DIV; these are the roll-over link areas. With jQuery, we apply hover events to them, fading in the appropriate image.
Creating Triangles in CSS
Few people realize that a browser draws borders at angles. This technique takes advantage of that. One side of the border is given the color of the arrow, and the rest are transparent. Then you give the border a large width; the ones above are 20 pixels.
A parallax optical illusion with CSS: The Horse in Motion
Time for some fun with CSS and optical illusions.
Pure CSS Line Graph
The idea here is not only to offer data visualization to people who aren’t comfortable using scripting languages, but to demonstrate the power of CSS and offer a different way of using CSS. If you are not a fan of line graphs and data visualization, you may still benefit from this article. Think of it as a CSS experiment, and learn a thing or two about CSS Sprites and positioning.
Zooming with jQuery and CSS
This post is about text zooming with jQuery and CSS. This is a basic-level tutorial about changing a style using a jQuery script. A simple way to zoom website content.
Create Resizing Thumbnails Using Overflow Property
This tutorial teaches you how to control thumbnail sizes. Sometimes we don’t have enough space to fit large thumbnails, and yet we would rather avoid small indecipherable images. Using this trick, we can limit the default dimensions of thumbnails and show them at full size when the user mouses over them.
Cross-browser drop shadows using pure CSS
Most methods of adding drop-shadows to content blocks require additional HTML mark-up and one or more PNG images. But by combining the Glow and Shadow filters, something that fairly closely resembles the rendered CSS3 shadow can be achieved.
Date Badges and Comment Bubbles for Your Blog
One of the things you have to deal with when your blog grows is having to cram more info into less space to show everything you want to show. One thing you can do is add an icon for the date and then a bubble over it with the number of comments for that post.
CSS Tables And Web Forms
UX trick: display form data as tabular data
This is a little trick to enhance the user experience of forms. It displays editable form data as readable tabular data.
Tables: Not As Evil As You Think
Tables are evil, right? Yes and no. For tabular data, they’re not, of course. That’s what tables are for in the first place. CSS can do an excellent job of styling a properly formatted table, and the table structure provides good scaffolding for JavaScript calls. But what is addressed here is using tables for non-tabular data (i.e. for the layout). Yes, that’s right: using tables for layout.
Perfect Drop-Down Log-In Box Like Twitter Using jQuery
This shows you how to create a Twitter-style drop-down log-in form using jQuery. It’s really easy, it saves space on the page and visitors feel comfortable with the awesome toggle form.
Make a Select’s Options Printable
When printing a Web page with select elements on it, the select drop-down prints just as it looks on the Web. This of course is practically useless on the printed page. One option for handling this is to follow every select HTML element with an unordered list that duplicates the content. Hide the unordered list in your main CSS file and reveal it with your print style sheet. This is a reasonable approach, except that it’s a big ol’ pain in the butt to deal with all the time. Let’s rely on jQuery to do the heavy lifting instead.
Twitter-Like Log-In With jQuery and CSS
This post explains how to get the Twitter-like hide and show effect for logging in using jQuery and CSS.” Very simple: just five lines of JavaScript for the hide() and show() events and a little CSS.
Clean and Pure CSS Form Design
This tutorial illustrates how to design a pure CSS form without using HTML tables.
CSSG Collection: Free Comment Styles
This is the second CSSG collection from CSS Globe.
Have a Field Day with HTML5 Forms
Here is a look at how to style a beautiful HTML5 form using some advanced CSS and the latest CSS3 techniques. You will definitely want to re-style your forms after having read this article.
Editable/Printable Invoice
Create editable and printable invoices using CSS and some JavaScript. This is version 2 from Vinh Pham.
How to Mask Passwords Like the iPhone
Many smartphones, including the iPhone, show the last character that you typed in a password field with a delay of a second or two. You can see that last character but not the entire password. But browsers don’t do what these mobile devices do. Here is a solution, with some fancy JavaScript and behind-the-scenes trickery.
Make Web Forms Suck Less With Labels
We’ve been filling out Web forms for years, and we all gripe that they could be better. Even with generous padding, the fields are too small. But hardly anyone has improved the most under-rated interaction of them all: checkboxes and radio buttons.
FancyForm: JavaScript checkbox replacement
FancyForm is a powerful and flexible checkbox-replacement script that changes the appearance and function of HTML form elements. It is accessible and easy to use, and it degrades gracefully on older non-supported browsers.
jQuery checkbox v.1.3.0 Beta 1
A lightweight custom-styled checkbox implementation for jQuery 1.2.x and 1.3.x.
Disabled labels and the Trilemma plug-in
The form above on the left makes use of the disabled attribute, but the default browser settings for disabled inputs don’t contrast as much as one would like. To better distinguish at a glance between which inputs are disabled and enabled, the labels of disabled inputs in the form on the right are styled with a faint gray color.
Fluid Search Box
Creating a fluid search box when you have only a single element next to it is trivial. What you should do is wrap the input in an element and use padding to create space for the fixed element; then position the fixed element absolutely (or relatively) in the space created by the padding.
Last Click
Browser Pong
A whole new pong game using three browser windows for the ball and racquets. Clever!
Related posts
You may want to look at similar CSS-related posts that we published last months:
(kk) (jb) (vf) (al)
© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 48 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, jquery
View original post found on Mashable! authored by Christina Warren
February 15th, 2010 — web20
GMAIL USERS: We hope you’ll join the discussion over on Mashable’s Google Buzz account.
We’ve discussed how you can integrate Buzz with your other social networks, but what about integrating Buzz with your blog? If you use a self-hosted WordPress blog (sorry, WordPress.com users), there are already a variety of Google Buzz plugins and add-ons available.
While it’s clear that people are really taking to using Buzz to share content and communicate, the service will undoubtedly reach more users as its sharing tools are integrated into other social sites. From buttons to social stream in your side bar, here’s how you can integrate Buzz with your WordPress blog.
Google Buzz Buttons
Mashable started sporting some nifty Buzz buttons a few days ago and lots of our readers have wanted to know how to add a similar feature to their own blogs. As it stands right now, how our Google Buzz buttons work (and how the buttons other sites are using also work) is that they create a share link from that post to Google Reader. As long as Google Reader is connected with your Google Buzz account, your publicly shared items will also be shared on Buzz.
Already, a number of enterprising WordPress plugin developers have answered the call to add Google Buzz buttons to WordPress posts.
Let’s take a look:
Google Buzz Button
Internet Techies created the Google Buzz Button plugin that allows you to add a “Buzz This” button to each of your WordPress posts. That icon probably looks pretty familiar — that’s because the button was designed here at Mashable (though it isn’t the same plugin).
The plugin options are relatively limited — you can choose what “rel” attribute you include with the link (the default is “nofollow”) and you can choose to display the button before or after your post content. You can also specify the icon’s height and width. Making some changes to your WordPress theme’s CSS options, you could further customize the appearance of the button, but as it stands, it’s a pretty basic (and easy) way to add a Buzz button. If you want to add Buzz manually to only certain posts, there is a template tag that you can add to those posts.
WP Google-buzz
Another button plugin option is WP Google-buzz from Arpit Shah. This button is extremely similar to the Google Buzz Button plugin, but it adds a few more options. You can choose to show the button before or after content or to add it to posts manually, but there are also options for what style button you want to use. Depending on how you have your blog setup, you might want to use a different size or style of button.
WPBuzzer
Hameedulah’s WPBuzzer is the most robust of the Google Buzz button plugins as of right now. The style of the button is almost identical to what Mashable and the Google Buzz Button use (albeit, not quite as clean), but the options are where this plugin really shines.
You can choose where you want your buttons to appear (on posts, on pages, on the home page, in your RSS feed), whether your want the button to appear before or after the post, the target for the button (a new window or a pop-up share option) and even the CSS style. You can also choose to use a small or large button.
The biggest feature is that you can track share counts (just like we do at Mashable) if you have a Bit.ly API key and login.
Light Social
The Light Social plugin takes a slightly different approach to the Google Buzz button. Light Social is a plugin that inserts a set of social share links at the bottom of each of your WordPress posts. This way links to Digg, Reddit, Facebook, LinkedIn and Twitter are all automatically at the bottom of the post. The developer of Light Social updated the plugin to include a Google Buzz icon and share link as well. If you want to add lots of social options to your posts — Light Social is a good approach.
Buzz In Your Sidebar
It’s one thing to let other people share your content to their buzz accounts, but a big advantage of Buzz is that you can aggregate your social activities into one place as well. Check out these options for adding some Buzz to your sidebar!
Google Buzz ER
If you want to share your Buzz content on your blog, check out the Google Buzz ER plugin. Google Buzz ER is extremely cool. It’s a widget that will display your public Buzz content. Just enter in your username and define how many Buzz entries you want to display and drag the widget to your designated choice in your blog.
That’s it! Now you have Buzz in your sidebar! Plus, as an added benefit, other users can click on “comment” to immediately respond to what you share. As of right now, the Buzz API doesn’t allow other people’s comments to become viewable, so only your public content is going to appear on your blog.
BuzzCounter.net
Another option for adding a Buzz widget to your blog (WordPress or otherwise) is BuzzCounter.net. Just fill in your username and you can generate the JavaScript to paste onto your website or blog!
Buzz Your Comments
There are a number of different all-inclusive comment solutions for WordPress — there’s Echo, Disqus (which we use here at Mashable) and IntenseDebate. IntenseDebate is owned by Automattic, the people behind WordPress.com and some of the main contributors to the WordPress.org project. So it probably shouldn’t be a surprise that it’s the first of the solutions to offer Buzz integration into its service.
If you use IntenseDebate on your blog, you can now easily add a Buzz It button to the top of your comment form. This won’t let people Buzz their own comments (we expect something like that will come in the future), but it adds another “Share on Buzz” option for your post to your visitors. If you use IntenseDebate, you can activate the Google Buzz This plugin by enabling it in the Plugins Directory.
Keep Your Eyes Peeled
As Google Buzz continues to evolve (remember, it isn’t even a week old), more and more integration options are going to sprout up. Let us know what sort of integration options you’d like to see in the future in the comments! If we missed one of your favorite Buzz plugins, let us know!
Reviews:
Digg,
Disqus,
Facebook,
Google Buzz,
Google Reader,
LinkedIn,
Mashable,
Twitter,
WordPress
Tags: buzz, Google, google buzz, how to, List, Lists, Wordpress, wordpress plugins
View original post found on Enormego Developer Blog authored by Saverio Mondelli
October 15th, 2009 — web20
One of the things that we’ve been focusing on lately has been building tools to better manage our products and services. It’s amazing what a well designed tool can tell you about your business. When I say “tool”, I’m referring to an application. Whether it be a web app, a desktop app or even a simple spreadsheet, creating a good “tool” that can help you leverage data that you’ve collected, or even help you collect data to analyze is a great thing to have.
For example, our F-MyLife application leverages multiple ad networks to fill it’s inventory. It currently uses the AdWhirl SDK to do this and it worked great for a while; however, our buddies over at MobClix built a much better ad aggregation platform with far more networks and we’ve since moved most of our traffic to MobClix so they can manage it. Since the AppStore is a pain in the ass and getting an update out would have taken weeks, we were able to allocate all of our traffic to MobClix via AdWhirl and MobClix’s new platform was able to handle everything from there. We ran our ads like this for over a month and then we started noticing a dropoff in our revenue. We scrambled to find out what the problem was, but since we were filtering through data from multiple networks, it was nearly impossible to put two and two together.
We decided that in order to analyze all of this data and really see connections between everything, we were going to need to build something. So Shaun spent a few nights working on a web application that pulled in all of our data from all of our networks so it could be analyzed and displayed in a readable format along with some charts. This was a huge life saver. After reviewing the reports that we built for ourselves, we noticed a huge problem with our click-through rates and began working with everyone to resolve them.
Had we not built this tool, we probably would of never known the real cause of the issue. In fact, had we built this tool a month ago, we would of identified the bug earlier and we could have fixed it.
You don't always need to "roll your own solution" though. There are tons of products and services out there designed to fix problems just like yours, you just need to research them and set them up. A similar scenario occurred with our servers. We run FML/TWI & ProTip on Amazon's EC2 infrastructure and we monitor everything with Pingdom. The other night, we had a 6 hour downtime between 2am EDT and 8am EDT. The problem was remedied by a simple lighttpd restart; however, during that time, we lost a lot of revenue. This wasn’t the first time that this happened either! So, yesterday, we setup Scoutapp to keep an eye on our server load and monitor some other metrics (like MySQL). When we woke up, we were greeted with a bunch of alerts from Scoutapp telling us that we had 1 SQL query which was taking an awfully long time to run and bogging down the server. We logged in, identified the query, figured out why it was taking so long to run and remedied the problem by adding an index to one of our tables. Done!
If it weren’t for Scoutapp, we would of had to manually log into each server, every morning and manually check the slow query logs. This is painstaking and given that we’re a small company with hundreds of things in the works at any given time, we don’t have the free time available to check logs. Scoutapp saw a problem, let us know about it, and we fixed it. A tool saved our ass yet again.
This happens over and over in the software development business. After you’re done with the product, and it makes you a little bit of money, you NEED to build or setup tools that can help you manage your new business. If you don’t, you’ll spend all of your time managing your first product instead of working on your next.
Heartbeat was the first tool we built to manage our AppStore products. It’s been a great asset to us and after having had over a year of experience on the AppStore, we’re working on Heartbeat 3.0 which will incorporate all of the knowledge that we’ve gained through the past year.
It seems counter-productive when you’re a small company, but that’s when these little things help the most. You don’t have the time to do it all, so it’s important to automate as much of your business as possible. Services like Pingdom and Scoutapp have helped us maintain uptime on our servers. Others like Sifter and Tender have helped us keep track of bugs and deal with support issues from our customers.
There are a ton of other products and services out there that can help you run your business. If you can’t find one to meet your specific needs, spend some time, and build your own. Trust me, you’ll thank yourself in the long run.
View original post found on ReadWriteWeb authored by Jolie O'Dell
September 22nd, 2009 — web20
From small-business support company Grasshopper comes Chargify, a billing and subscription system for web 2.0 and SaaS companies that eliminates the need to build bespoke applications.
Their RESTful API and hosted payment solution permit simple integration into any website, allowing businesses to charge customers on a recurring basis, manage subscriptions, achieve PCI compliance, and gain real-time business intelligence from their billing.
Sponsor
In addition to processing one-time and recurring transactions, Chargify handles free trial periods, promotions, refunds, receipts, and reminders.
Also, their pay-as-you-grow pricing seems ideal for small businesses and startups. The first 50 customers are free and range up to $1,500 for 15,000 customers or $2,500 for an unlimited number of customers. Chargify does not charge individual transaction fees.
Take a look at this demo video from the Chargify team:
The API accepts method calls via HTTP and returns responses as JSON or XML, allowing companies to keep the customer purchase flow on their own sites and authenticate users while passing the billing information to Chargify for processing.
Interested parties can sign up for the service, still in beta, at the Chargify website.
Now, it goes without saying that Chargify is far from the first billing software for small- and medium-sized businesses; competitors such as FreshBooks are fast becoming well-known heavy hitters in the space. We also found a couple billing services that offer an API – the Dutch MoneyBird, and two English-language services, Zuora and Vindicia. What – if anything – makes Chargify truly competitive in this increasingly crowded space?
Let us know your thoughts in the comments – especially if you have experience with using any of these online billing services!
Discuss
View original post found on KillerStartups.com - all authored by (author unknown)
August 21st, 2009 — web20
In their own words
“WorldIP – free geolocation database, service and tools”
Why it might be a killer
Because it offers a number of interesting and effective solutions that will be attractive to many users.
Some questions
Are any other tools being added to the sites’ service?
What it does
This is quite an interesting site if you are looking for a good place where you can find a solution that is useful to find any geographic point on the planet. However, this solution was developed thinking in a much more complex service that is potentially beneficial for many professionals. In fact, Wipmania.com gives you the chance to find any IP address on any part of the globe, as well as it allows you to apply a number of tools specially created to be used in any kind off specific project where it is necessary to find internet connections.
The site is very simple to use and you just need to navigate through it to learn how to search for what you are looking for. In case you want to read about this service and other similar solutions, Wipmania.com offers a blog where you can find this kind of information.
Among the many services and benefits offered by the company you will be able to use a highly effective plug-in for Firefox as well as an API and specific information about how to find different IPs’ locations. In case you are attracted by this solution, it will be a good idea for you to give it a visit at Wipmania.com
Link: http://www.wipmania.com
Our Review: http://www.killerstartups.com/Web20/wipmania-com-find-an-ip-anywhere
View original post found on ReadWriteWeb authored by Frederic Lardinois
July 8th, 2009 — web20
Last October, Yahoo announced the Yahoo Query Language, a language similar to the popular database language SQL. Then, this February, Yahoo also announced its first major product that made use of YQL, the Open Data Tables, which allowed developers to create their own table definitions besides the ones already provided by Yahoo. As we reported in March, Yahoo then went ahead and extended YQL with YQL Execute, which gives developers even more flexibility and basically turns the web into a giant database that can be processed and mashed up with YQL. Today, Yahoo announced that it has completed its set of YQL verbs with three more functions (INSERT, UPDATE, DELETE) that now also allow developers to not just read and manipulate data, but also write data back to other services.
Sponsor
We talked to Yahoo! Chief Technologist, Sam Pullara, (@spullara on Twitter) and Jonathon Trevor, the product lead for YQL yesterday. They specifically stressed that Yahoo was trying to stay as close to the SQL language as possible, as this would allow the largest number of developers to make use of YQL without having to learn yet another new language.
The Read/Write Web
While the earlier incarnations of YQL were mainly meant to read data, with the addition of these three new SQL verbs, the focus has now shifted towards writing data back to the net as well. Developers can now use YQL to write and modify data on web services and applications.
To explain how useful this can be, the Yahoo team used a few different examples. A developer can now easily use YQL to update a Twitter account (even authentication with OAuth is possible), for example, or add a new comment to a blog post, or insert any data into a remote database. Basically, developers can now use YQL to write data back to any web site that uses forms for data entry and to any API, including authenticated APIs.
To try this, here is an example from Yahoo (you will have to log in to the YQL console):
Try creating a new tweet from the YQL console, follow this link <a href="https://developer.yahoo.com/yql/console?q=use%20%27http%3A%2F%2Fwww.yqlblog.net%2Fsamples%2Ftwitter.status.xml%27%3B%20insert%20into%20twitter.status%20(status%2Cusername%2Cpassword)%20values%20(%22Playing%20with%20INSERT%20UPDATE%20and%20DELETE%20in%20YQL%22%2C%20%22twitterusername%22%2C%22twitterpassword%22)">to run this</a>:
use ‘http://www.yqlblog.net/samples/twitter.status.xml‘;
insert into twitter.status (status,username,password) values ("Playing with INSERT, UPDATE and DELETE in YQL", "twitterusername","twitterpassword")
Pullara and Trevor also stressed that because Yahoo runs YQL on five datacenters spread over three continents (three in the US, one in Europe, and another one in Asia), executing commands through YQL is generally very fast. Yahoo also set some relatively generous rate limits for the service. Developers who use the service and who identify themselves with an access key can make up to 100,000 calls per day, while anonymous users are restricted to 1000 calls per hour, which is still a pretty good number.
Discuss
View original post found on Smashing Magazine Feed authored by Smashing Editorial
June 21st, 2009 — ajax, web20
JavaScript is an integral part of the RIA revolution. JavaScript allows developers to create rich and interactive web interfaces and establish asynchronous communication with servers for constantly up-to-date data without a page refresh.
Many things that were once accomplished using Flash objects can now be built using JavaScript – with the added benefit that it is free, typically more web and mobile accessible under most circumstances using best practices for development techniques, and without the need to use proprietary software for development.
Though JavaScript has been around for a while, new tools, techniques, and information are constantly being pumped out to continually push the technology into greater heights. In this article, we wish to share with you a huge list of fresh and new tools and resources that JavaScript developers will find useful and informative.
Here are a few other posts that you might find interesting:
Useful JavaScript Tools
FireUnit
Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit.
Sugar Test
SugarTest makes it easy to write elegant and understandable JavaScript tests. Its API is inspired by both RSpec, Shoulda and jQuery. It works as a DSL running on top of JsUnitTest.
JS.Class: Ruby-style JavaScript
JS.Class is a library designed to facilitate object-oriented development in JavaScript. It implements Ruby’s core object, module and class system and some of its metaprogramming facilities, giving you a powerful base to build well-structured OO programs.
JSON Formatter and Validator
The JSON Formatter was created to help with debugging. As data expressed as JSON is often written without line breaks to save space, it became extremely difficult to actually read it. This tool hopes to solve the problem by formatting the JSON into data that is easily readable by human beings.
Faux Console: Simulating a Firebug, Safari or Opera debugging in IE
Browsers like Safari, Opera and Firefox use the Firebug extension that offers a developer a comfortable way to output debugging information using the console.log() command. Microsoft Internet Explorer does not support this though – Faux Console is a small JavaScript that you can embed in the document to have a basic debugging console in IE.
JS Bin
JS Bin is a web application for testing and debugging JavaScript and CSS collaboratively. You input your source code and save it to a publicly-accessible URL which you can then share to your fellow developers or in social networking outlets like Twitter or Facebook groups. Be sure to check out the video introduction to see JS Bin in action.
PHP.JS
PHP.JS is an open source project in which we try to port PHP functions to JavaScript. By including the PHP.JS library in your own projects, you can use your favorite PHP functions client-side.
Page Speed
Page Speed, released by Google, is a Firefox/Firebug extension very similar to YSlow that evaluates your web pages for performance. Read more about Page Speed best practices to see what aspects of a web page are being evaluated. YSlow and Page Speed are based off Steve Souder’s work (who worked for Yahoo! and now works for Google).
prettyPrint
prettyPrint is an in-browser JavaScript utility for dumping variable information, inspired by ColdFusion’s built-in cfdump utility function. Using prettyPrint on JS objects, variables, and arrays will give you a large array of information about them, which you can then use for debugging purposes or simply for gathering data about them for documentation.
Spket IDE
Spket is an excellent toolkit for JavaScript and XML development. It has a robust and intuitive GUI, and integrates with popular and powerful JavaScript/Ajax libraries such as Y!UI and jQuery. Its JavaScript Formatter feature gives you unparalleled control and standardization for you or your team’s JavaScript code formatting standards.
Obtrusive JavaScript Checker
Obtrusive JavaScript Checker, created by Robert Nyman, is a tool for finding inline JavaScript on web pages. It highlights elements that have inline JavaScript properties and provides a summary report when you mouse over them. The tool is available as a Firefox extension or a Greasemonkey script.
Highlight.js
Highlight.js highlights syntax in code examples on blogs, forums and other web pages. The tool works automatically: it finds blocks of code, detects a language and highlights it accordingly.
Javascript Compressor
Javascript Compressor is a web-based tool for compressing your JavaScript to reduce their file sizes. It works by removing unnecessary characters (such as extra tabs and spaces). Developers who use the tool to compress their code can also use the decoding feature to uncompress their source code. It also obfuscates your code, making it harder to read – which can be desirable if you want to delay prying eyes from analyzing your publicly-available code base.
Firediff
Firediff is a Firefox/Firebug extension that allows you to track changes in the DOM and CSS. By logging these changes, you can gain information about how web applications work, and what elements (and what properties) are being altered by way of DOM manipulation.
RockStar Web Profiler
RockStar Web Profiler (aka Razor) logs and profiles information about client-side performance. It provides developers with a console for analyzing the data gathered by the tool. Check out the RockStar Web Profiler presentation to get an overview of its many awesome features.
bookmarklet maker
This plain and simple web tool allows you to create JavaScript-based bookmarklets. Usage is simple: simply copy and paste your source code into it and it will output the processed code in the lower pane.
Tiny JS
Tiny JS is an online directory of small but powerful plugins for popular JavaScript/Ajax libraries (MooTools, jQuery, and YUI at the moment). Its aim is to hunt down and feature lightweight plugins that give you a lot of bang for the buck.
JSCharts
JS Charts is a free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. It’s enough to include the scripts, prepare your chart data in XML or JavaScript Array and your chart is ready.
Glimmer
Glimmer is an interactive design tool for incorporating slick JavaScript-based animation effects using the jQuery library. Glimmer comes with a wizard-style user interface which can reduce the amount of coding that you have to write manually.
JSSPec
A testing environment for JavaScript that runs on IE 6+, Firefox 2+ and Safari 3+. The tool shows differences between expected value and actual value, displays the failed line exactly and supports conditional execution. Released under GNU and available for free download.
CodeRun Code Search
CodeRun’s Code Search tool lets you search and view user-submitted Ajax, PHP, and .NET source code. Once you’ve found a script or project that you’re interested in, you can edit it via their web-based IDE without having to download the project locally.
BaseJS: A Mobile (Safari) Javascript Framework
a simple, lightweight framework created specifically for Mobile Safari (perfect for iPhone development).
MochaUI
MochaUI is a web-based tool for building web application interfaces built on top of the MooTools JavaScript framework. Jump right in by taking MochaUI for a spin in their demo page.
Utility Libraries and Components for JavaScript
narwhal
narwhal is a server-side JavaScript library following the ServerJS standard. Developers can create and share “packages” for website widgets, site features, programming patterns, in a similar fashion as PEAR for PHP.
uploadify
uploadify is a useful jQuery plugin for dealing with file uploads. It’s powered by a simple PHP script for handling the server-side stuff. Be sure to check out the uploadify demos to see the plugin in action.
Blackbird
Blackbird lets you log messages in JavaScript using a simple and intuitive JS-based API. The library also provides you with an attractive console GUI for viewing and analyzing messages. No more annoying alert() functions to see your objects’ contents (which can be frustrating for printing out array values) and for setting breakpoints.
Booklaylet
Booklaylet is a JS library for letting you easily deploy your bookmarklet applications. The implementation is dead simple: take the Booklaylet source and modify it to point to your app’s URL.
JavaScripTools
JavaScipTools is a collection of useful JS components, functions, and classes with the aim of addressing some of the more common web developer tasks such as parsing and formatting of data types (i.e. date and time). It also comes with a dynamic table function for creating sortable HTML tables.
Doodle.js
HTML 5’s Canvas element gives developers a way to draw stuff on web pages programmatically. Doodle.js is a utility library/framework for working with more complex and robust Canvas drawing processes. Check out Spiral Pattern demo and the Marbles in Space (3D simulation) demo in a browser that already supports Canvas to get a feel for how Doodle.js works.
liteAJaX
liteAJaX is a lightweight JavaScript class for working with AJAX. This library is perfect for projects that don’t use a JavaScript/Ajax framework or projects that don’t need a more robust and fully-featured framework.
Burst
Burst is a vector animation engine for HTML 5’s Canvas element. With it, you can create smooth, Flash-like animation effects for browsers that support Canvas.
JSTestDriver
JSTestDriver is a Java-based framework for creating unit test following Test-Driven Development philosophies and best practices. Be sure to check out this video demonstration of JSTestDriver in action.
jsPDF
This library allows you to create PDF’s using nothing else but JavaScript. See the jsPDF demo page to see the library in action.
Useful JavaScript Libraries
GlassBox
GlassBox is a beautiful and refreshing take on modal windows that creates an interesting feeling of transparency as if you were looking through a glass. Check out the example page to see different types of GlassBox implementations.
jQuery TOOLS
jQuery TOOLS is a toolbox that gives developers some of the most popular UI design patterns at their disposal in an easy-to-use manner. View some of the things you can do with jQuery TOOLS in the project’s demo page.
Moousture
Moosture is a JavaScript library for dealing with mouse gestures, written on top of the MooTools framework.
Tablecloth
Tablecloth is a lightweight and unobtrusive JavaScript library for styling and adding dynamic user interaction to HTML tables.
Unobtrusive Table Actions Script
This simple and lightweight library brings together a set of common and useful functions for dealing with HTML tables, such as zebra-striping rows, highlighting rows on mouse over, and column highlighting.
LivePipe
LivePipe is a set of widgets and controls for adding common user interaction components to web applications using the Prototype JavaScript framework.
JavaScript Graphical / Virtual Keyboard Interface
This JavaScript package adds a virtual keyboard interface into web pages.
Tipmage
Tipmage is a JavaScript class for handling tooltips and annotations on images, similar to annotated images on Flickr.
qGallery
qGallery is a simple but beautiful JavaScript for creating image galleries with smooth and slick animation effects.
Educational JavaScript Resources and Tutorials
Ajax Frameworks Decision Center
For large companies, committing to a JavaScript/Ajax framework such as Prototype, MooTools, or jQuery is a big decision because it affects a large amount of employees and will dictate the direction of the company’s client-side interaction and RIA development philosophies. Using the Ajax Frameworks Decision Center gives you an organized, quantitative, and thorough method for making a solid decision.
jQuery vs MooTools
This single-page site by MooTools Dev Team member Aaron Newton is a comparative look into jQuery versus MooTools.
Ajax Framework Analysis Results
This analysis of popular JavaScript/Ajax frameworks (Dojo, Ext JS, GWT, YUI) is a great resource for gathering research data for your own frameworks: the analysis matrix factors in criteria such as scalability, extensibility, quality and quantity of documentation, and much more. You can adapt this matrix, tweak their weights, and modify criterions to help you decide which JS framework to go with.
Sexy Drop Down Menu w/ jQuery & CSS
In this tutorial, you’ll learn how to create a multi-tiered drop down menu with the use of the jQuery library.
Easy Display Switch with CSS and jQuery
This tutorial outlines a method for using jQuery to smoothly-transition into different viewing modes, which can be helpful in image galleries.
Create a Slick and Accessible Slideshow Using jQuery
This is a step-by-step jQuery tutorial that I wrote for creating a simple and slick slideshow that can be adapted to display different content types. Check out the demo page to see the slideshow in action.
Learning Advanced JavaScript
John Resig has a slideshow-style, web-based tutorial on advanced JavaScript development. It is a wonderful stepping-stone for JavaScript developers ready to make the leap into RIA development using JavaScript.
JavaScript tests & Compatibility tables
This resource is a well-organized cheatsheet for JavaScript methods cross-browser compatibility backed by sample tests that you can run to see how they work (or don’t work) in your browser.
Code Conventions for the JavaScript
On this page, you can find suggested coding conventions for JavaScript. It is important to note that there is no one correct convention, but this is a great place to start developing your own.
About the Author
Jacob Gube is a bilingual web developer (JavaScript and PHP), web designer, author, and the Founder/Chief Editor of Six Revisions: an online publication that shares useful development and design resources and tutorials for web professionals. If you would like to contact him, send him a tweet and follow him on Twitter.
© Smashing Editorial for Smashing Magazine, 2009. |
Permalink |
47 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: ajax, jquery, js, tools, useful
View original post found on Ajaxian » Front Page authored by Dion Almaer
June 2nd, 2009 — web20
John Allsop has created a very cool CSS gradient exploration tool that lets you get the gradient you need, with the resulting sample and code right there.
You could use it to do what he did, and recreate the Apple navigation bar in pure CSS instead of using images.
John didn’t stop there, and has already created tools for Box Shadows Shadows and Radial Gradients.
View original post found on ReadWriteWeb authored by Sarah Perez
February 5th, 2009 — web20
Now that we have online office suites like Google Docs, Zoho, and even Adobe’s Acrobat.com, you may not have much desire to go and check out yet another would-be Microsoft Office killer. However, Shutterborg, a new online word processor does one thing really well which makes it a unique tool in this space: it lets you open any URL on the internet and edit it like an Office document.
Sponsor
When you first visit Shutterborg, available online at http://shutterb.org, you’re presented with three options: New Document, Open from Disk (coming soon), and Open from Web. The first option – starting a new document – will take you right into Shutterborg, where you can then begin to type.
The word processor itself is rather rudimentary. There are some basic options for formatting your text, aligning it, highlighting it, etc. You can also choose to insert photos and links from the “Insert” menu or create bulleted and numbered lists. Beyond that, the tool doesn’t do much in terms of word processing. Also, at the moment, the files you create can only be saved in .HTML format. Other formats like .TXT, .ODT, and .DOC will arrive in later, says the company.
If basic word processing was all that Shutterborg did, it probably wouldn’t be worth a mention just yet. However, the “Open from Web” option that is presented to you upon launch is a pretty clever invention. Here, you can enter in any URL on the internet to open an exact replica of that web page, with the CSS and images intact. You can then edit it as you desire which could obviously lead to some humorous creations.
That feature alone makes Shutterborg worth a look simply because it's so easy to use. Although the resulting HTML file won't look like much if opened outside of the Shutterborg processor, it's easy enough to grab a screenshot of your mocked up creation while you have Shutterborg open. The potential for creating hilarious edits to well-known sites will certainly appeal to the creative types out there. We can't wait to see what they come up with.
Shutterborg is a creation of developIT, a small business in Waterloo, Ontario, Canada whose focus is on developing web sites and Rich Internet Applications (RIAs) for businesses of all sizes.
Discuss
View original post found on information aesthetics authored by (author unknown)
February 4th, 2009 — web20
Yesterday, the New York Times blog announced the initial release of the New York Times Article Search API [nytimes.com]. This makes it possible to explore the first occurrence of the term “data visualization”, or identify articles that appeared on the front page and mentioned “blog”. The New York Times now has several APIs available, including (searchable) articles, best sellers (books), campaign finance, community (comments), congress (vote data), movie reviews and dictionaries (will there be a infographic / “interactive media” category, or is this already part of “articles”?).
The Article Search API is meant to make way to find, discover, explore, have fun and build new “things” based on the rich content available on the New York Times. The database contains over 2.8 million articles from 1981 until today (updated hourly). Each article comprises about 35 searchable metadata fields, from title and byline to thumbnail image and geographic region. A few applications seem already to exist, such as some I did not know before like Who’s on First. Surely more will follow?
See also the New York Times Visualization Lab.
More information at the forthcoming Times Open event. Any attendee wants to guest blog the experience?
