Style Your Table With Tablecloth

Tablecloth is a small (6 KB) and simple JavaScript file that lets you add some styling and actions to your tables. As you see in the screenshot above, you can highlight the row and column you are looking at. As you hover over the table cells, the rows and columns are highlighted that correspond to the cell you are hovering over. Once you click a cell, Tablecloth will highlight, and keep highlighted, the row and column that make the intersection at the cell selected.

The script is fully customizable through a CSS file (1 KB). There is a default theme, or skin, that comes with the download but can be changed to match your website color scheme. The CSS and JavaScript file together are small and fast loading, adding very little overhead to your page load time.

I did not see any license information available; however, the website does list how to modify the code. This script is written by Alen Grakalic from Css Globe. You can see additional features, view demos, view usage examples, and download Tablecloth from the website.

How In-Demand Are Your Skills?

Have you ever wondered if your skills are in demand? With so many different possibilities available for web development, it is tough to know if you should keep mastering a specific technology or start learning a new one. After reading an article about how PHP programming jobs are in high demand, I asked myself the follow-up question: what other skills do I have that are in high demand, and which skills do I have that are not?

The article linked to a great resource from oDesk that lists the current (monthly) trends for many of the development and design skills used for web development. There are 84 different trends with a wealth of useful information about the skill's demand including graphs, stats, and recent job postings. Although these stats are pulled from information specifically on oDesk, it represents demand from all around the world. I have listed links to some of the most in-demand skills right now.

As a side note, this site is a fantastic example of how great the Google Chart API is.

Print Specific Parts of a Page With jPrintArea

If you have ever wanted/needed to be able to print just part of a page before, now you can. jPrintArea will allow you to print only the contents of a specific element (Ex: div). There aren't a lot of extra bells & whistles that go along with this jQuery plugin, but it works great. It does exactly what is need with only a few lines of code so there is little extra overhead added to your page load time.

There is a sample usage, a demo, and source code (download and view) available from the website. I have included a sample demo below as well.

Demo

User ID Username Email
1 test1 test1@test.com
2 test2 test2@test.com
3 test3 test3@test.com
4 test4 test4@test.com
5 test5 test5@test.com

Print Table

Free Online Tech Books from Techotopia

Techotopia offers free online books that cover a number of subjects including programming languages, security,  and Linux. The books are hosted on their wiki and are available to read online. The four main books that brought me to this site are:

As the website states that the "IT Essentials series of books are designed to provide detailed information that is accessible to both experienced and novice readers" (Techotopia). The books are clear and concise, providing detailed explanations and examples to help you understand the content. Each book is made up of multiple chapters in a logical and easy to follow order. You can access the table of contents from every page which makes it easy to skip around quickly and easily to look at what you find interesting and useful.

As well as the four books mentioned above, you can find books on these topics:

PrototypeXtensions Extends Prototype.js and Script.aculo.us

PrototypeXtensions adds additional components to Prototype.js and Script.aculo.us, two of the most popular and widely used JavaScript frameworks/libraries available. While these are extremely useful tools for creating visual effects, UI improvements, and Ajax methods, the creators of PrototypeXtensions realized a need for additional components. The library is currently at version 0.1.2 and is released under MIT License. There are three main categories of additions, or extensions, that are added by this library with specific features within each category. I have listed a basic feature overview below.

Features

  • Core Extension
    • Class.accessors
    • Cookie
    • Browser
    • EventManager
    • Number
    • String
  • History
    • History
    • Observer
    • Registry
    • Ajax
  • Tabs
    • Show/Hide
    • Select
    • Ajax/iframe
    • Options
    • CSS Theme

There are detailed explanations and examples for each feature available so be sure to check out the website for more detailed features and information. You can download the current release in the original uncompressed form or download the smalled Minified and Gzipped version.

Create Beautiful Image Galleries With Galleria

Galleria is a clean and easy to implement image gallery based on jQuery. This is a great tool if you need to add an image gallery to your site and don't want to use a flash based gallery. I prefer JavaScript and CSS galleries over flash galleries because they are usually smaller and slightly easier to implement. This is a small (4K) script that doesn't add a lot of overhead to your page load time and is completely customizable to your taste. The images are preloaded individually. Some other features to note are the ability to your custom thumbnails, add a caption from image anchor title, and call events from the image onLoad event.

Implementing this gallery is, as noted earlier, very easy. You can have the whole thing up and running in only four lines of code. You need to add the CSS and JavaScript files to the header and then add the unsorted list that gets converted into the gallery. I have displayed the code that needs to be inserted into your header below. You can also get more help, checkout Demo1 or Demo2, and download the script.

 
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<script type="text/javascript">
jQuery(function($) { $('ul.gallery').galleria(); });
</script>
 

More information about usage available at the Galleria website.