Basic HTML/CSS editor

Looking for a free HTML/CSS editor for casual use. Main use: edit some pages with a few divs, some styles, tables etc, nothing too fancy.  I don’t do enough to warrant a full fledged commercial application like DreamWeaver. But because I don’t do enough, I also need any assistance I can get from an application.

Main things I am looking for:

1. can highlight text and apply an HTML tag to it from a toolbar where tags are nicely grouped and have easily recognizable icons
2. can hover over any tag in document source, or any word in document preview, and see the corresponding CSS for that tag with hierarchy of sources (multiple CSS selectors can work together on same tag) and current source
3. can extract inline (styles, some attributes) and embedded CSS to linked
4. easy way to push to external browser and to refresh already open browser preview
5. can work directly on HTML source if required
6. can tidy up the source and make it nice to read (indent, remove blank lines, etc)
7. auto-completion of html tags, attributes and values, and css selectors, attributes and values
8. can convert text to XML-compliant (special characters to XML entities)
9. lightweight (easy to install, small footprint, fast to start)

First tried “free html IDE and editors”, on Windows XP. The N* is number of stars (larger # is better):

• bluegriffon: 4*, does nice job of 1 and some of 2, but not hierarchy part and rather buggy (deleted CSS several times, etc);
• coffeecup: 3.5*, nicer than bluegriffon in some respects (seems less buggy), but in other aspects it is opposite so difficult, but overall seems BlueGriffon more powerful on #2
• bluefish: 3*, does item 1 nicely, but 90% of commands on tools menu did not work (like rewrap etc), and does not do 2 or 6 (or 7 IIRC), and seemed to interfere with previewing in other tools; seems buggy (I think on Linux it is probably great!)
• html-kit 292: 2*, no CSS support worth mentioning
• aptana: too big (250 megs installed!) and external tools required (like GIT!), way overkill in terms of tool suite and dependencies
• amaya: not tried since no update in two years
• kompozer: not tried since no update in a year
• seamonkey composer: have to download the whole suite of seamonker browser / email client / etc, not nice

Those seem to be the main contenders (there are a couple other nice ones on Linux like Quanta Plus). Decided to attack from different angle: best CSS free editor:

• codelobster: 5*; but no application/UI help, only link to w3c docs (albeit very detailed info about HMTL and cSS and context help works great for that)
• topstyle: limitations of free version too severe (2500 chars, for instance), and not documented
• stylizer: 4*, but not free; perhaps some features continue to work after 14 days, but site not clear about it, don’t like this (don’t want to risk finding out that can’t use after 14 days because critical feature disabled).
• style master: 4*, same problem as stylizer
• simple css: no hierarchy, can’t import (extract) from HTML doc
• ts webeditor: CSS is secondary
• netbeans: 3*, very big and slow to start, but (***) very powerful
• firebug: can edit but not save the CSS
• notepad++: favorite “quick, generic” viewer for XML and text and C++ but does not do code completion of CSS etc, would be good only for someone who does HTML & CSS day in and day out.
• cqstyle: no html assist

So far, based on robustness and support for HTML (code assist) and CSS (same, as well as hierarchy), it’s between BlueGriffon and CodeLobster free: the latter being stronger as a CSS coding tool and more robust, but the former having more visual aid to determine what impact of values of various attributes will have on appearance and layout.

When Average is Adequate

An inspiring post by Brandon Keepers, and a few good comments. Must keep in mind since  I definitely fit the software “craftsman” type, love to refactor and make the design clearer, more robust, more maintainable, more self-documenting.

Testing Web Pages on Multiple IE Versions

Found out that you can’t reliably install multiple versions of Microsoft Internet Explorer on Windows. This makes testing of a web page for correct display in IE 6, 7 and 8 somewhat difficult. Here are some options:

• Internet Explorer Collection: recommended by people on CSS-Discuss mailing list (highly recommend that list!). Seems like the most robust of the easy options.
• Multiple IE: installer that installs some versions of IE standalone, but has problems.
• Virtual Machines: Have one VM per version of IE you want. Lots of overhead, except if VM images already available. Impossible? Microsoft makes VirtualPC images of XP SP3 available for free with time-expiry of 3 months for several versions of IE. Most robust of all methods.
• Online sites such as IE NetRenderer: they show a snapshot of the URL you give them (so your page must be on the ‘net). IE NetRenderer worked best but it seemed to cache the IE 8 rendering.

While on the topic of testing:

• Other browsers to test with on Windows: Opera, Safari (Mac, but has a Windows port — this page from thesitewizard.com’s Chris Heng, has good info).
• W3schools has a CSS validator, and The Free Country discusses various types of free HTML, CSS etc validators. The pages by Mako has good explanations on CSS-based layouts, instead of table-based layout in HTML, comparing float vs fixed vs relative vs absolute positioning in CSS.

I have finally worked out the CSS necessary for the layout of my Python Pubsub website. Major lesson (this was my first real hands-on contact with CSS) is that using position:fixed is usually not a good idea (because of IE) and in many cases not necessary (there are usually other ways of achieving comparable effect).

JavaScript tutorials, scripts, answers etc from About.com

About.com: JavaScript has some nice articles, tutorials, tricks etc for javascript development.

There are similar sections of About.com website for C++/C#, Java and Ruby (sadly, nothing about Python!), and a host of computing and technology topics.

VOIP automation via Skype’s COM API

Shafqat Ahmed posted a MS PowerShell script on his blog that shows how to use Skype to automate phone calls. I was intrigued since I was looking for a free scripting API to use VOIP for automating some phone calls. Turns out there is nothing specific to PowerShell in there: the script uses Skype’s COM API, described on the Skype website. Hence, this API should be usable from any programming language that supports COM, such as C++, C#, Python (via pywin32), VB, Java (via for instance Jacob and many more. An example of using this API from Python is on the CodeSnippets page.

Note that there is also Skype4Py, a Python API to Skype, uses ctypes (which for Python 2.5 and highetr comes with Python — before that, ctypes module available separately) . Similarly, Skype4Java. Both are contributtions from community, whereas Skype4COM is by Skype itself.

Open Source Flash

Open Source Flash has many resources to do Flash development using open source tools. Has tutorials too, links to red5, haXe and swfmill, etc. Seems actively maintained.

Import Google Notebooks to a WordPress Blog

After Google decided to close its Notebook web service to new users and stop its development, I decided to look for an alternative venue for my note taking. I looked at many of the alternatives suggested on many pages (such as 17 Noteworthy Alternatives To Google Notebook), but none of them did what I wanted. I eventually settled on WordPress, which I already had a blog on. I couldn’t find any way of importing my Notebook postings to WordPress for the longest time, until in November 2009 I realized that I could do it quite easily with a little bit of scripting. I created a project site for it on Google Code.

Web Dev Reference from W3School

Excellent CSS, Javascript, HTML, XML reference with examples that can be modified online and see immediate result!  Very impressive.

StyleShout.com provides some free website CSS-based templates. Some look really good and might make it easier to design website for projects.

Balsamiq Mockups free for Open Source

Balsamiq Mockups For Desktop is free for open source projects! Looks a lot like Microsoft Sketchflow, don’t know how it compares but looks very good. Looks easier than Visio’s UI stencils (which I find to be a pain to use).

 

 

 

SDK’s for building apps on mobile platforms

Appcelerator Codestrong – SDK has a “mobile” and a “desktop” variant. The mobile one may go commercial in the future but it seems that it may stay open-source. Includes Titanium API and Getting Started Guides. Based on HTML + Javascript, the tools translate these into an Objective-C program that gets built and can be submitted to Apple for inclusion in iTunes store. Currently only Android and iPhone supported but others (Windows ME, Symbian etc) once these two versions are stable.

PhoneGap – Similar (currently supports more OS like Blackberry etc), but no plan to commercialize. Seems like excellent documentation. Based on HTML + Java.

Rhodes - Similar to PhoneGap, but based on HTML + Ruby. Documentation not as extensive, and seems to focus on using Rhodes with RhoSync, that latter being very expensive (several thousand $).

My first choice would be PhoneGap, followed by Appcelerator and third choice would be Rhodes. Don’t know yet if there are other free, open-source SDK worth looking at.