Interesting Code Highlighters for blogs and websites

Code highlighters are very useful tools to present code snippets on your blog or website with a professional look and improve the readability of code you provide for your readers. In this post I want to reply to some requests I received in the past weeks about this topic and suggest you my five favourites code highlithers.


1. SyntaxHighlighter
SyntaxHighlighter is a popular code highlighter to help a developer/coder to post code snippets online with ease and have it look pretty. It's 100% Java Script based and it doesn't care what you have on your server. This is the final result:

2. Quick Highlighter
Quick Highlighter is an useful online tool to convert a plain text that contains some code (HTML, PHP, JavaScript) to formatted-highlighted code ready to copy and past on your blog or website. This is the result:

3. FV Code Highlighter
Frank Verhoeven released this great code higlither that transforms plain text in higlighted code in the same style of the Dreamweaver higligther. The result is very nice and professional:

4. Source Code Highlighter
This online tool allows you to highlight your C#, VB, ASPX, HTML, XML, JavaScript code for publishing on a web site or in a blog.It doesn't use CSS styles in output, but pure HTML FONT (size, color and font attributes) tag.


5. Highlight.js
Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It's very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.

Any suggestion? Please leave a comment!

Read More

10 Useful code snippets for web developers

In this post I want to suggest you 10 useful code snippets for web developers based on some frequetly asked questions I received in the past months for my readers. This collection include several CSS, PHP, HTML, Ajax and jQuery snippets. Take a look!

1. CSS Print Framework
Hartija is an universal Cascading Style Sheets Framework for web printing. To use this framework download the CSS file here and use this line of code into your web pages:

<link rel="stylesheet" href="print.css" type="text/css" media="print">

2. CSS @font-face
This snippet allows authors to specify online custom fonts to display text on their webpages without using images:

@font-face {
font-family: MyFontFamily;
src: url('http://');
}

3. HTML 5 CSS Reset

Richard Clark made a few adjustments to the original CSS reset released from Eric Meyers.

4. Unit PNG Fix

This snippet fixes the png 24 bit transparency with Internet Explorer 6.

5. Tab Bar with rounded corners

This code illustrates how to implement a simple tab bar with rounded corners:

6. PHP: Use isset() instead of strlen()
This snippet uses isset() instead strlen() to verify a PHP variable (in this example $username) is set and is at least six characters long. (via Smashing Magazine).

<?php

if (isset($username[5])) {
// Do something...
}

?>

7. PHP: Convert strings into clickable url
This snippet is very useful to convert a string in a clickable link. I used this snippet for several tutorials; for example take a look at this link Simple PHP Twitter Search ready to use in your web projects where I used this snippet to convet into a clickable link all textual links contained in a tweet.

<? php
function convertToURL($text) {
$text = preg_replace("/([a-zA-Z]+:\/\/[a-z0-9\_\.\-]+"."[a-z]{2,6}[a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href=\"$1\" target=\"_blank\">$1</a>", $text);
$text = preg_replace("/[^a-z]+[^:\/\/](www\."."[^\.]+[\w][\.|\/][a-zA-Z0-9\/\*\-\_\?\&\%\=\,\+\.]+)/"," <a href="\\" target="\">$1</a>", $text);
$text = preg_replace("/([\s|\,\>])([a-zA-Z][a-zA-Z0-9\_\.\-]*[a-z" . "A-Z]*\@[a-zA-Z][a-zA-Z0-9\_\.\-]*[a-zA-Z]{2,6})" . "([A-Za-z0-9\!\?\@\#\$\%\^\&\*\(\)\_\-\=\+]*)" . "([\s|\.|\,\<])/i", "$1<a href=\"mailto:$2$3\">$2</a>$4",
$text);
return $text;
}
?>

8. jQuery: Ajax call

This is the most simple way to implement an Ajax call using jQuery. Change formId and inputFieldId with the ID of the form and input field you have to submit:

<script type="text/javascript">
$(document).ready(function(){

$("form#formId").submit(function() {
inputField = $('#inputFieldId').attr('value');
$.ajax({

type: "POST",
url: "yourpage.php",
cache: false,
data: "inputField ="+ inputField,
success: function(html){
$("#ajax-results").html(html);
}

});
return false;
});

});
</script>

9. CSS Layouts Collections

This page contains a collection of over 300 grids and CSS layout ready to use in your projects. Take a look, it's very useful.

10. Simple versatile multilevel navigation Menu
Several months ago I found this simple code (HTML + CSS + JavaScript for jQuery) to implement a versatile multilevel navigation menu (please send me the original source if you find it!). I think it's the simpler and faster way to do that. The result is something like this:

The only thing you have to do is to create nested &ltul> lists into a main list with id="nav", in this way:

<ul id="nav">

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 2</a></li>

<li><a href="#">Link 3</a>

<ul>

<li><a href="#">Link 3.1</a></li>

<li><a href="#">Link 3.2</a></li>

<ul>

</li>

</ul>

...and use this basic CSS code (you have to modify it to customize the layout of this menu with the style of your site!):

#nav, #nav ul{

margin:0;

padding:0;

list-style-type:none;

list-style-position:outside;

position:relative;

line-height:26px;

}

#nav a:link,

#nav a:active,

#nav a:visited{

display:block;

color:#FFF;

text-decoration:none;

background:#444;

height:26px;

line-height:26px;

padding:0 6px;

margin-right:1px;

}

#nav a:hover{

background:#0066FF;

color:#FFF;

}

#nav li{

float:left;

position:relative;

}

#nav ul {

position:absolute;

width:12em;

top:26px;

display:none;

}

#nav li ul a{

width:12em;

float:left;

}

#nav ul ul{

width:12em;

top:auto;

}

#nav li ul ul {margin:0 0 0 13em;}

#nav li:hover ul ul,

#nav li:hover ul ul ul,

#nav li:hover ul ul ul ul{display:none;}

#nav li:hover ul,

#nav li li:hover ul,

#nav li li li:hover ul,

#nav li li li li:hover ul{display:block;}

...and this is the JavaScript code for jQuery you have to copy in the tag <head> of the pages that use this menu:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">

function showmenu(){

$("#nav li").hover(function(){

$(this).find('ul:first').css({visibility:"visible", display:"none"}).show();

}, function(){

$(this).find('ul:first').css({visibility:"hidden"});

});

}

$(document).ready(function(){

showmenu();

});

</script>

Read More

Woork's Follow Friday List - Issue 01

Welcome to Woork's Follow Friday List, Issue 01 (23 July 2009). Every week I propose a new list with 10 interesting Twitter users you have to follow! Any suggestion for the next #FollowFriday list? Please Follow me on Twitter!


Ayelet Noff
AKA Blonde 2.0. Lover of social media and help companies understand how to use it to get their message across. Blogger. Addicted to life, travel and caffeine. Twitter Profile | Website

Brian Cray
Internet marketing, User experience design, Web development, Social media, Nearby Tweets & PXtoEM creator, Author, Blogger, Web 2.0, SEO, PHP, jQuery, Apple fan. Twitter Profile | Website

Calvin Lee
Self-Proclaimed Media Ho, Designer Guy and Twitter Addict. In his spare time, Stunt Doubles for the Hulk and a really Nice Guy! Twitter Profile | Website

Collis Ta'eed
Hola, I am Collis, I write about startups at TheNetsetter, and run one called Envato. Twitter Profile | Website

Cristian Vasile
SEO, Tech Geek, Webdesign, CSS, #LoveHelvetica
Twitter Profile

Chris Brogan
President, New Marketing Labs, a social media agency and education company. Twitter Profile | Website

David Perel
I am a designer, blogger, manager, online show host and I love life.
Twitter Profile | Website

Graham Smith
Freelance Logo and Brand Identity designer. Focused on the minimal and typographic. Blogger and writer. 22+ years experience. LoveHelvetica. LoveDogs. Twitter Profile | Website

Mike Lane
Senior UX Designer near Minneapolis, MN with 14 years experience in creative Web and Graphic Design. Twitter Profile | Website

Perry Belcher
Former Airbrush Artist, Hot Dog Vendor, Jeweler, Tattoo Slinger, Bartender and All Around Trouble Maker. Twitter Profile | Website


Any suggestion for the next #FollowFriday list? Please Follow me on Twitter!

Read More

15 Awesome tutorials and resources for web developers

A new week is coming and in this post I want to suggest you some interesting tutorials and resources for web developers I bookmarked this week. If you want to suggest a link, please leave a comment.

1. InfoVis Toolkit
The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web. It supports multiple data representations: treemaps, radial layouts, hypertrees/graphs, spacetree-like layouts, and more.

2. Vaadin
Vaadin is a Java framework for building modern web applications that look great, perform well and make your user happy.

3. Flip!
Flip is a jQuery plugin for jquery that will flip HTML elements in four directions. It's really simple to implement and customize.

4. Uploadify
Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

5. Create a Twitter-Like "Load More" Widget
Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.

6. FullCalendar
FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

7. HTML5 drag and drop in Firefox 3.5
In this tutorial you can learn HTML 5 specification section on new drag-and-drop events, and Firefox 3.5 with an included implementation of those events.

8. Music Player with mouse gestures
This tutorial illustrates how to implement an amazing music player using mouse gestures & hotkeys in jQuery. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

9. jQuery Image Magnify
jQuery Image Magnify enables any image on the page to be magnified by a desired factor when clicked on, via a sleek zoom in/out effect. The enlarged image is centered on the user's screen until dismissed. It works on both images with and without explicit width/height attributes defined.

10. Creating a Keyboard with CSS and jQuery
Sometimes it's just fun to play around with the programming languages we know and see what we can create. It might be nice to create a little online keyboard with CSS, and then make it work with jQuery. The keyboard includes "action" keys (caps lock, shift, and delete) which dynamically changes the keyboard when clicked. This tutorial it'll show you how to build it.

11. Img Notes
Img Notes is an useful jQuery plug-in to add notes over images in a Flickr-like style. It's simple to implement and customize.

12. WriteMaps
WriteMaps is a free web-based tool that allows you to create, edit, and share sitemaps online. As a WriteMaps user, you and your team will be able to build and access your sitemaps from anywhere, without having to rely on proprietary desktop apps and static files.

13. Simple vibration effect for your form box with jQuery
This effect can be used to validate certain criteria in your form. Other than using highlighter to highlight the error area, we can use a more creativity approach by vibrating that particular input box to alert the user. This tutorial demonstrate a very easy way to understanding how vibration works on the web and how it can be used in your web design.

14. epiClock
epiClock is an extremely lightweight jQuery plugin which gives users the ability to easily create and manage any number of javascript powered clocks.

15. ThickBox
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Read More

10 Interesting lightweight jQuery plugins for web developers

In this post I want to suggest you ten interesting lightweight jQuery plugins for web developers. This list includes a lightbox, an HTML markup editor, some plugins to work with images, a tooltips creator and a PHP interface for jQuery.

1. ColorBox
ColorBox is a light-weight, customizable lightbox plugin for jQuery 1.3 (only 9KB). It supports photos, photo groups, slideshow, ajax, inline, and iframed content; appearance is completely controlled through CSS so users can restyle the box; behavior settings can be over-written without altering the ColorBox javascript file. ColorBox is completely unobtrusive, requires no changes to existing HTML, preloads background images to avoid flash of unstyled content on first use. It can preload upcoming images in a photo group.

2. markItUp!
markItUp! is is a JavaScript plugin built on the jQuery library (just 6.5 KB). It allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented.

3. jFlow
jFlow is a widget to make your content slides. One popular alternative that exists out there is coda-slider. jFlow is super lightweight because it is only 2KB minified.

4. JPolite
JPolite - jQuery POrtal Lite - is a lightweight front-end web portal framework based on jQuery (5 KB). The focus is easy content integration at the front-end, through an intuitive naming system and conventions plus simple and easy configuration. Developers can make use of various server side technologies and frameworks to generate content for the portal. Features: Flexible layout configurations, Module drag-drop (thanks to jQuery UI Simple UI controls (Tabs, accordion, ...), Sample RSS Reader. Take a look at the demo here.

5. vTip
vTip is designed to quickly provide very lightweight (706b js, 272b CSS, 270b image) tooltips to users of jQuery. The zip includes everything you need (including an example page), as well as jQuery for the examples to work. Using the jQuery framwork any element with a class of vtip will have it’s title attribute turned into a sleek, customizable tooltip without the klunk and loading time of a large tooltip script.

6. jQuery Cycle Plugin
The jQuery Cycle Plugin is a lightweight slideshow plugin. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. The plugin provides a method called cycle which is invoked on a container element. Each child element of the container becomes a "slide". Options control how and when the slides are transitioned.

7. Wilq32.RotateImage
Wilq32.RotateImage is a lightweight and very simple to use plugin to rotate images.

8. jqModal
jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a "Swiss Army Knife", and makes a great base as a general purpose windowing framework.

9. jQPie
The idea of jQPie is to provide a lightweight PHP interface to jQuery. The lightweight interface allows multiple ways to interact. jQPie is lightweight, supports XML, HTML and JSON, handlers
API is simple, while the handlers engine is PHP based the javascript library is usable by any language and includes a powerful autocomplete plugin, plans to provide other plugins for use and as examples.

10. jContext
jContext is an ultra-lightweight right click context menu for jQuery. How lightweight is jContext? It’s approximately 0.6kB when minified.

Do you have any suggestion? Please leave a comment. Thanks!

Read More

Freelance Web Designers List

I often receive several requests from my readers that ask to me to collaborate to their web projects but because I'm totally busy with my "real" work, this blog and the book I'm writing, I can't accept their offers. Then, every time, they ask to me to suggest them a friend of mine that can work on their project. So I think could be useful to start on this blog a list of web designers interested to collaborate in freelance projects.

If you are a freelance web designer, please leave a comment with your main information (name, short introduction about you, link to your website/portfolio). Please NO SPAM. Thanks!

People I suggest you

CreamScope
Creamscoop is a small company focused on web developing, formed by two guys who started getting into web technologies since a very young age.

Daniel Howells
I'm a freelance web designer and developer, currently working as the digital director at YCN based in Shoreditch, London. Blog

Grace Smith
A Freelance Web and Graphic Designer in love with web standards and social media. An unashamed Apple Fangirl. Postscript 5 | Blog | Gallery project

Osvaldas Valutis
My name is Osvaldas Valutis. I develop and design functional, creative, details and usability oriented websites as well as web applications by exposing the simplicity and the latest web standards as the main principles. Portfolio

Steve Mullen
I am a web designer and front end developer from Tulsa, Oklahoma. I enjoy making the web a better looking place. Personal Portfolio

Read More

Twitter API: How to create a stream of messages Monitter-like with PHP and jQuery

This tutorial illustrates a very simple way to work with the Twitter API in order to implement a search in the Twitter public timeline and display search results with an animated stream of messages (tweets) similar to Monitter. In this example I used PHP, jQuery and a very useful Twitter Search API for PHP based on the work of David Billingham and actually developed by Ryan Faerman. This implementation is very simple to customize and integrate on your project. The result is something linke this:

You can download the full code here and reuse it for free on your projects.




I suggest you to take also a look at these posts:

- Simple PHP Twitter Search ready to use in your web projects
- Super simple way to work with Twitter API (PHP + CSS)
- Send messages from a PHP page using Twitter API


1. A little introduction

This package contains the following files:

- index.php: page with the search form + search results
- search.php: PHP search
- twitterapi.php: Twitter Search API for PHP
- jquery/jquery-1.3.2.min.js: jQuery framework

How it works? After submission the search form calls an ajax request to the page search.php that returns search results into an array. Each element of the array (every single tweet) appears into the div twitter-results with a nice fade-in effect. I set a delay between each tweet equal 2 seconds (2000 ms).

I suggest you to take a look at Monitter, and download the full code to try this tutorial on your local host. Now, take a look at the code.


2. index.php: HTML code

HTML code is very simple. Copy the following code in the tag <body>:

<div class="twitter_container">
<form id="twittersearch" method="post" action="">
<input name="twitterq" type="text" id="twitterq" />
<button type="submit">Search</button>
</form>
<div id="twitter-results"></div>
</div>

...and add into the tag <head> of the page a link to jQuery:

<script type="text/javascript" src="jquery.js"></script>

The result is a simple search form:

3. search.php

Now copy and paste the following code into search.php:

<?php
include('search.php');
if($_POST['twitterq']){

$twitter_query = $_POST['twitterq'];
$search = new TwitterSearch($twitter_query);
$results = $search->results();

foreach($results as $result){

echo '<div class="twitter_status">';
echo '<img src="'.$result->profile_image_url.'" class="twitter_image">';
$text_n = toLink($result->text);
echo $text_n;
echo '<div class="twitter_small">';
echo '<strong>From:</strong> <a href="http://www.twitter.com/'.$result->from_user.'">'.$result->from_user.'</a>: ';
echo '<strong>at:</strong> '.$result->created_at;
echo '</div>';
echo '</div>';

}

}
?>

$result is the array that contains search results. To display all elements of the array (search results) I used this simple loop:

foreach($results as $result){
...
}

... and to get a specific attribute of the array I used this simple code:

$result->name_of_element

Take a look at this post for info about the search on Twitter.


4. index.php: JavaScript Code

Now take a look at the following JavaScript code that enables an ajax request for the search and display results into the page index.php with a fade in effect and a delay between each tweet equal to 2 seconds:

<script type="text/javascript">
$(document).ready(function(){
var twitterq = '';

function displayTweet(){
var i = 0;
var limit = $("#twitter-results > div").size();
var myInterval = window.setInterval(function () {
var element = $("#twitter-results div:last-child");
$("#twitter-results").prepend(element);
element.fadeIn("slow");
i++;
if(i==limit){

window.setTimeout(function () {
clearInterval(myInterval);
});

}
},2000);
}

$("form#twittersearch").submit(function() {
twitterq = $('#twitterq').attr('value');
$.ajax({

type: "POST",
url: "search.php",
cache: false,
data: "twitterq="+ twitterq,
success: function(html){
$("#twitter-results").html(html);
displayTweet();
}

});
return false;
});

});
</script>

This is a very basic implementation you can modify to get a real-time stream of messages for example calling a new ajax request (to search.php) every time the current array with the search results is totally displayed in the page.

That's all. If you have some suggestion please add a comment. Thanks!
You can download the full code of this tutorial here and reuse it on your projects.

Read More

10 Fresh tools and resources for web developers

In this post I want to suggest you some interesting tools and resources for web developers. This list includes a CSS framework to design sitemaps using HTML lists, some interesting JavaScript frameworks, some interesting jQuery plug-in, a PHP face detection script, a tutorial to work with the Twitter API and a tutorial about how to retrieve your Gmail emails using PHP.

1. SlickMap CSS, A Visual Sitemapping Tool for Web Developers
SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences. The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of sitemaps while at the same time allowing for the predevelopment of functional HTML navigation.

2. WaveMaker 5
WaveMaker gives you an easy and productive way to build Web 2.0 applications. Typical applications include a rapid prototyping and development, a form-driven database apps, a front end "face" for SOA architecture.

3. QuickFlip jQuery Plugin
QuickFlip is a jQuery plugin that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back.

4. Face detection in pure PHP
Maurice Svay released this interesting face detection script to detect automatically faces in photos with PHP.

5. 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. Using PHP.JS may speed up development for PHP developers who are increasingly confronted with client-side technology.

6. jQuery Blend
Blend is a jQuery based animation/effects, progressive enhancement plugin for CSS backgrounds (just 1.4KBs).

7. Twitter API: Simple Twitter Search using PHP
This post illustrates how to implement a simple Twitter search and display search results in a web page with a custom format.

8. Flapjax
Flapjax is a new JavaScript framework designed around the demands of modern, client-based Web applications. Its principal features include: Event-driven, reactive evaluation; An event-stream abstraction for communicating with web services; Interfaces to external web services.

9 Glow
Glow is a JavaScript library which aims to make working with JavaScript and the DOM easier. It tries to do this by abstracting common tasks, hiding cross-browser issues, and providing a set of user interface widgets.

10. Retrieve Your Gmail Emails Using PHP and IMAP
Grabbing emails from your Gmail account using PHP is probably easier than you think. Armed with PHP and its IMAP extension, you can retrieve emails from your Gmail account in no time! Take a look at this interesting post of David Walsh.

Read More