Category Archives: Development tools

Tools that will help you develop websites. Useful resources, websites, tutorials and news.

Graph scripts – part 1 – javascript

Today I will try to add more resources on the Javascript graphs utilities to create attractive and more intuitive data sets presentations( graphs ).

RGraph

HTML5 – graph library – yes HTML5 so IE users – change your browser, or use google frame. The library uses the latest CANVAS features and is fully documented on the site. It has a large variety of outputs:

Bar chart, Bi-polar chart, Donut chart, Funnel chart, Gantt chart, Horizontal Bar chart, LED grid, Line chart,Odometer, Pie chart, Progress bar, Pseudo radar chart, Scatter chart, Traditional radar chart.

RGraph

Bluff

Another script that is based on CANVAS, only that this time can use the excanvas from google, to support IE. Is a “translation” of a ruby graphing library named Gruff.

capture-2

The following two libraries use jQuery:

jQuery visualize plugin

Very simple to implement –  it gets it’s data from a table and even allows interactive data input.

capture-3

TufteGraph

It is different from other javascript charting libraries because:

- Configuration is by dynamic functions, allowing for really compact API (very few options)

- Non-core layout is done via CSS rather than code

It’s fully tested on Safari3 and Firefox3 only

capture-4

MooChart

Mootools based, it draws a bubble diagram using canvas, and can animate it. There is a nice demo on the script site.

capture-5

Canvas 3d graph

Exactly what it says –  bar graphing but in 3D.

capture-6

gRaphaël

Charting library based on Raphael. Cross browser interactive or static graphs.

capture-7

Do you know more?

Let me know.

We have an update, thanks to Kilian, who seems that created a new graph library for prototype users. It renders the graphs with Raphael, so  is cross-browser, and I must admit it looks pretty. Below is a screenshot:

capture-1

If you have your own libraries, or you  know others not specified here, you can submit it here.

I will update this post as many times as I’ll receive news from you.

Web development on a mac – tools that I use

It’s been a year and a half  since I moved on OsX.  Coming from the Linux world it wasn’t that hard  to get used to the new operating system. At that time I had some issues to make the perfect selection of softwares and tools I need for my work.

My expertise is PHP, JS  (MooTools),  HTML+CSS  and sometimes I  design –  though it’s been a while since I opened the Photoshop.

I will try to present what software I use  and I hope you will comment with your setups – maybe this will help some others to make their perfect setup.

Let’s start:

Filemanager(s): – Forklift :

capture-2

Why? Because it reminds me of Krusader, the perfect filemanager for me, even is not that good. It is capable of remote connection –  FTP/SSH that I fully need as I work on a remote server  almost all the time.

I like a lot the “buffer” that it makes between my remote folders (ftp or ssh) and my editor.  It has some nice features like quicklook, folders sync (I love this),  synchronous browsing.

What I would really need would be a diff plugin to help me make a diff between 2 folders/files selected.  But in the end I think it’s the best filemanager for OsX until now.

Browser(s):

capture-1

As my primary browser I use Safari.  Don’t get me wrong, I Like Firefox, but it still needs to get on a diet – it eats lots of RAM and it’s slower than Safari.  For developing I’m  usingMozilla for its Firebug extension.  For testing purposes I have installed Opera and Camino and  a windows machine that I control by using SynergyPlus (read below to find out about)

Editor(s):

capture-3

There is only one  - Textmate. It takes a while to get used with but after you did it’s addictive. At the moment is the best editor I’ve worked with. The code completion ,  snippets and bundles improve the productivity very much. Nothing more to say.

Communication:

Adium, Skype and Tweetie

Graphics:

Photoshop and Preview

Other tools:

For the server side when I cannot reach my remote server –  MAMP -

capture-4

Is just like LAMP, only for mac. It works nice and smooth and you don’t need much to do.

Sequel pro -

capture-5

The best mysql admin tool I’ve seen. It can connect to any mysql server using sockets, normal way or even ssh.

Screen grabbingxScope -

capture-6

A nifty tool that helps you with the screenshots, there are nice measurement tools, a loupe, a “screens” tool that gives you an exact space you have in the most popular browsers at a given resolution.

ImageOptim -

capture-8

A wrapper for useful tools that optimize images –  it keeps  the images at the same quality-  only it removes the extra information from it. I use it after I finalize a project on all the images in the site –  it can save you  a lot of bandwidth.

Terminal+Visor –  Terminal( command line interface ) +  a nice plugin that hides the window for you and let you call it in any space you are.

Reggy -

capture-10

A regex tester, very useful.

Growl –  the notification system

capture-11

Quicksilver -  needs more introduction?

capture-12

Versionapp – the most beautiful svn client ever

capture-13

SynergyPlus

capture-14

SynergyPlus is a some sort of virtual KVM which allows you to share a mouse and a keyboard between computers with different operating system.

So this is my setup – or better said the tools I use when I work. What about yours ?

CSS Typography – Text replacement techniques

Due the limited number of fonts available for web we need to make use of other techniques to make our design look the way we want.

Most of the time we simply cut the image from the psd file and place it in the html/css. But this has impact over the accessibility of the site and the compatibility with other browsers (for example text browsers or browsers with  images/CSS disabled)

Of course there are workarounds and fixes for this in orderto improve usability, but what do we do in case our page is dynamic?

In this case we can use text replacement techniques -  some of them presented below:

SIFR2

capture-1

SIFR2 is  updated with SIFR3  but deserves to be mentioned as it became SIFR3.  Read below.

SIFR3

capture-2

No need  to tell too much – it uses flash to replace the text in a webpage  with the font specified by the designer. The site presents all the required steps to setup the script.  For me as a non-flash user seems very complicated  and I think this is a huge drawback for this script – it also might discourage other people from using it.  The advantage? – Flash is supported by 99% of  today’s browsers.

There is a little online helper that is very handy in creating the needed files: sIFR Generator and a library for already generated fonts: sifrVault

Cufón

capture-3

Cufon takes a different approach using Javascript to apply some proprietary generated font files. The renderer creates a SVG canvas(non IE browsers) or a VML representation (IE browsers) altough  SVG seems to be slow in some browsers.

p+c dtr

capture-4

“P+C DTR allows you to take a vanilla standards-based (X)HTML web page and dynamically create images to replace and enhance page headings using only PHP + CSS.”

Some further stuff about it:

P+C DTR is based on Dynamic Text Replacement script  but allows you to integrate it in your site without any modification –  well… except the setup of the script.

An improvement of this script is done by João Makray , allowing you to have word-wraps.

Flir

capture-5

“Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (<h1><h2>, etc.) to <span> elements and everything in between!” . No more comments –  it’s self explanatory.

typeface.js

capture-6

An alternative for cufon.

Fontjazz

capture-8

Fontjazz takes a different approach, generating one file with images for each glimpse in a font –  you can select which ones –  and then using Javascript to manipulate the DOM of your page & adding the fonts in specified locations.

Kernest

capture-9

Kernest technically is not a font replacement technique but it makes use of @font-face –  which is supported by modern browsers –  and allows you to use a free font, or to “rent” one for a year.

Do you know others? Let me know :)

Change Phonegap project to reflect your app name

Phonegap is a nice framework for webdevelopers. It helps to build a native iPhone (and other devices) app using what you already know.

But the submission to Appstore  can be a pain due to some app reviewers that consider PhoneGap as “private api”.

The single way to avoid this is to change any reference to PhoneGap inside the code. It’s not simple but can save you a few weeks of waiting.

Steps to changing the app name:

( considering our app named “Myapp“)

1. copy the phonegap project to another folder – Myapp.

2. change PhoneGap_Prefix.pch file name to Myapp_Prefix.pch

3. Change PhoneGap.xcodeproj file name to Myapp.xcodeproj

4. Delete the build folder

5. Rightclick on Myapp.xcodeproj ->Show Package Contents

6. Open your_user.pbxuser with a texteditor(textmate ?) and do a search replace for all  PhoneGap to Myapp ( no matter if is alone or inside a string).

7. Open project.pbxproj with a texteditor and do a search replace for all PhoneGap to Myapp ( no matter if is alone or inside a string).

8. Open MainWindow.xib with a texteditor and do a search replace for all PhoneGap to Myapp ( no matter if is alone or inside a string).

9. Open Myapp.xcodeproj in Xcode.

10. Rename here, in Xcode using rightclick-> rename all the files in Classes folder that contains PhoneGap in name with Myapp ( for example PhoneGapDelegate.h to MyappDelegate.h )

11. File by file, in folder Classes, replace inside any PhoneGap string with Myapp

12. Do a Clean all.

13. Do a Build and Go ( and pray :) )

 

This should be all.

Textmate – check your JavaScript syntax

Following the previous post, we will see today how to check the syntax for JS.

In this case we will need a bundle wrote some time ago by Andrew Dupont here. (read the article , scroll down and download the bundle). 

Install the bundle.

In this moment you are almost good to go, as the bundle is set to run just as the previous PHP check syntax, when you save the file.

I say almost good to go, because there is an warning you get from ruby,  ”Insecure world writable dir”.
So open the Bundle Editor, find Javascript tools, click on the Quick Lint command and add a -W0 ( is a zero here ) after the ruby word, like this:

ruby -W0 “$TM_BUNDLE_SUPPORT/bin/quick_lint.rb”

capture-41
Close the Bundle Editor.

This is how it looks in action:
capture-31

That’s it.