development
ExtJS Designer Preview
by dgen on Oct.22, 2009, under development
From the depths of the Official ExtJS Blog, Aaron Conran has recently posted the first previews of the ExtJS Designer.
With features such as:
- Duplicating Components
- Transforming Components
- Undo/Redo
- Configuration Searching
- Auto Updating
- Screenshots
the interface is definately looking pretty slick! Checkout the screencast below, for a quick preview of as many features they were able to cram in
How to create a space ( ) using the DOM
by dgen on Sep.01, 2009, under development, javascript
This is a problem which stumped me when I first started to experiment with creating elements dynamically. A couple of simple methods I have found to work are:
document.createTextNode(String.fromCharCode(160))
or the Unicode equivalent:
document.createTextNode(‘\u00a0‘)
Hope this has been able to solve many a headache!
Fixed positioning for IE7
by dgen on Aug.19, 2009, under CSS, development
Let me begin by simply stating that it would be so much easier if everyone stuck to the standards and played nice!
With the release of IE7, came a semi-adherence to CSS standards and finally acknowledgement of fixed positioning. so why does it not work when I specify position:fixed; within my css? well, this is a problem that continues to annoy me but is easily overcome.
The problem lies within the doctype as specified by your HTML Page. Simply specify (the strict mode equivalent should also allow for fixed positioning):
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
and it should rectify the problem 
For further information on element position from a microsoft point of view, visit http://msdn.microsoft.com/en-us/library/ms533005%28VS.85%29.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Shortlist of the best development firefox extensions
by dgen on Aug.12, 2009, under development, firefox
Anytime I need to build up a new profile for myself, these extensions are always the first to install.
Web Developer
Author: Chris Pederick
This tool is a godsend. Its the little things like modifying stylesheets and HTML on the fly, viewing generated source (as opposed to what is initially delivered) and the highlighting absolute/relative elements. But these are just a small number of the wide variety of tools this toolbar provides. Fantastic work chris! looking forward to see what other contributions you make in the future.
http://chrispederick.com/work/web-developer/
Firebug
Developer: Parakey, Inc.
Now this is the tool i have been waiting years to use but just wasnt available! there was of course the javascript console provided by netscape navigater, but then all of a sudden a dry spell of nothing. Basically, this tool allows you to Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
http://www.getfirebug.com/
ColorZilla
Developer: Alex Sirota
Another very handy tool! This firefox extensions allows you to get a color reading from any point in your browser, quickly adjust this color and paste it into another program. Tools like this just make things a whole heaps easier! especially when you couple this with a tool like adobe kuler ().
http://www.colorzilla.com/
YSlow
Developer: Yahoo Inc.
YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites. this is a great finishing tool! fully recommend it
http://developer.yahoo.com/yslow/
FirePHP
Developer: Christopher Dom
Enables you to log to your Firebug Console using a simple PHP method call
http://www.firephp.org/
MeasureIt
Developer: Kevin A. Freitas
This tool draws out a ruler to get the pixel width and height of any elements on a page. Fantastic tool! Well done Kevin!
http://www.kevinfreitas.net/extensions/
FireFTP
Developer: Nighlight Productions
A Free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers
http://fireftp.mozdev.org/
NoScript
Developer: InformAction
Allow active content to run only from sites you trust, and protect yourself against XSS and Clickjacking attacks
http://noscript.net/
Greasemonkey
Developer: Arantius
Allows you to customize the way a webpage displays using small bits of JavaScript – provides a flexible framework for expansion – love your work arantius!
http://www.greasespot.net/
HTML Validator
Devloper: Marc Gueury
Adds HTML validation inside Firefox and Mozilla – fantastic development / finishing tool!
http://users.skynet.be/mgueury/mozilla/
Live HTTP Headers
Developer: Mozilla Development Team
View HTTP headers of a page and while browsing
http://livehttpheaders.mozdev.org/
ScreenGrab
Developer: Andy
It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard. Great for sending designs to management or clients!
http://www.screengrab.org/
Gspace
Developer: Fonlabs
Just in case you cant find a memory stick and your hard drive is full, this tool will allows you to use your Gmail Space (4.1 GB and growing) for file storage.
http://www.getgspace.com/
Dummy Lipsum Generator
Developer: Sogame
As the name suggests this tool generates dummy lipsum text – very useful for laying out fake content in your site!
http://sogame.awardspace.com/dummylipsum/
Online Web Development Tools
by dgen on Aug.11, 2009, under CSS, PHP, development, javascript
No doubt a lot of seasoned professionals out there are not going to see anything new on this list that they havent already used or even created themselves, but, for all those starting out it may be very useful. Please contribute if you have anything to add to the list which I may have overlooked.
Online Javascript Beautification
This script was intended to explore ugly javascripts, e.g compacted in one line, or just make scripts look more readable.
http://jsbeautifier.org/
CSS Formatter and Optimiser
This tool is based on csstidy 1.3dev. The service is available in 4 languages : English, Deutsch, French, Chinese. It provides different compression layouts; you can sort selectors, properties, regroup selectors, optimize shorthands, compress colors, compress font-weight, discard invalid properties and add timestamps. It also allows to create a custom template the system will use to format the code. Note that your code should be well-formed. This is not a validator which points out errors in your CSS code.
http://floele.flyspray.org/csstidy/css_optimiser.php?lang=en
PrettyPrinter
This tool is a source code beautifier (source code formatter), similar to indent. It knows PHP, Java, C++, C, Perl, JavaScript, and CSS.It is advisable to make a backup before you replace your code.
http://www.prettyprinter.de/
ImageOptimizer
The Image Optimizer lets you easily optimize your gifs, animated gifs, jpgs, and pngs, so they load as fast as possible on your site. Furthermore, you can easily convert from one image type to another.
http://tools.dynamicdrive.com/imageoptimizer/index.php
The Online Regular Expression Builder (aka RegExpr)
RegExr is a tool for learning, editing, and testing regular expressions
http://gskinner.com/RegExr/
HTML 2 DOM
These online script takes the pain away from having to manually write all the javascript needed to create HTML elements using the DOM Method.
http://www.html2dom.com/
http://muffinresearch.co.uk/code/javascript/DOMTool/
XML Sitemap Generator
Quickly generate a sitemap file based on the Sitemap XML protocol without you having to write it yourself.
http://www.xml-sitemaps.com/
CSS Sprite Generator
This tool allows you to upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and also generate the CSS for you. This simple technique can drastically reduce the number of HTTP requests your page requires, thus, improving performance.
http://spritegen.website-performance.org/
The Definitive Guide of Online ExtJS Resources
by dgen on Jul.29, 2009, under development, javascript
As I was learning how to use ExtJS effectively, I frustratingly scoured the net looking for resources and tutorials that would help me. Below are the fruits of my labour; Im sure there is more to add to the list, but this is what I have so far:
ExtJS: Official Website
API Documentation
The ultimate source of documentation for the ExtJS Library. A must have bookmark if your serious about using this framework in your own online applications.
http://extjs.com/deploy/dev/docs/
ExtJS: Beginner Tutorials
Get started quickly using a variety of Ext components and widgets. This is a great place for beginners to get up to speed with specific aspects of Ext.
http://extjs.com/learn/Tutorials
ExtJS: Samples & Demo’s
ExtJS’s showcase of sample applications and GUI components. Very useful as a starting point for learning usage, implementation and even interface ideas.
http://extjs.com/deploy/dev/examples/samples.html
Custom Google Search
Ext Forum Search:
http://www.google.com/coop/cse?cx=011693920879787039234%3Az7of1ufqccu
Ext Wiki Search:
http://www.google.com/coop/cse?cx=011693920879787039234%3Aemh8nsfrx7e
Saki’s Extensions, Plugins and Know-how
Jozef Sakalos (aka Saki) is a member of the ExtJS Support team and has his own repository of extjs info, samples, extensions and custom plugins.
http://extjs.eu/
MiamiCoder
This website has some useful beginner tutorials and sample code you can download.
http://www.miamicoder.com/default.aspx
Formbuilder
Frederic has done some fantastic work putting together a visual form builder for ExtJS. It is extremely handly and will shave many hours off the time needed to develop forms. Quality bookmark material!
http://tof2k.com/ext/formbuilder/
ExtJS Plugin Repository
This website features custom developed plugins that extend the core components provided by the framework.
http://extjs-ux.org/docs/
Layouts in ExtJS
Good explanation of the usage of layouts, regions and viewports
http://www.packtpub.com/article/layouts-in-ext-js
ExtJS Library: Background Research
ExtJS have compiled a handy list of external resources which provide a deeper understanding of the technologies that have went into the ExtJS library itself. No doubt, most of you out there will not be suprised by many on the list, but it does make for interesting reading.
http://extjs.com/learn/Manual:Resources
If you know of any others which I have missed, please let me know
