Category Archives: Development tools

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

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.

Textmate – php syntax check

A nice “hidden” feature that Textmate has is to check the syntax of the php files you are writing and display a popup with the result.

How to do this?

Open Bundle Editor, search for the PHP bundle, scroll down until you find the Validate syntax command.

Edit the Save setting to Current File.

Now, depending on how you want it, you can alter the Activation setting or not. I set it  the same as saving the file, so each time I save the file, it makes me the syntax check.

capture-11

Close the Bundle Editor.

From now on each time you save a syntax check will be done and a popup will show you the result

The result

capture-21

That’s all.