We all from time to time have stared at a character to figure out if it's 1, l or i. Not to mention O, o and 0.
To help avoid these cases, and of course to make source code look better on screen, HTML-Kit Tools now comes with support for Bitstream Vera Sans Mono and Source Code Pro fonts. You can easily select one of these fonts in preferences, without having to install them on the system. Of course any fonts that you have on the system, such as Consolas, Lucida Console or any other, are still supported as well.
What if you could quickly swipe through a list of recent files and open the ones you want with a tap... from your smartphone or a tablet?
HTML-Kit Touchscreen Plugins is a brand new feature that experiments with this exact idea.
If nothing else, a touchscreen device can be a secondary monitor and another method of input. Instead of using up space on your primary display, you might offload color pickers, snippets, help windows and recent file lists to one or more smartphones or tablets.
You can play with the early preview of this feature by clicking Touchscreen Plugins icon in the latest TreeHouse build.
HTML-Kit Touchscreen plugins on iOS (iPod Touch)
HTML-Kit Touchscreen plugins on Android (Samsung Galaxy Tab)
HTML-Kit Touchscreen plugins on BlackBerry OS (BlackBerry Playbook)
Now when you go to the order page, you can pick a price that's affordable between $29 and $99 (limited time offer). Please be considerate when picking a price because this won't work if everyone picks the lowest price.
Making money was never the reason for creating HTML-Kit but as you know it takes resources and time to develop, support and keep things running. If you or your boss can afford it, you can help by registering for a little bit more.
Project window with sleek redesign (scroll down for more)
Project window has a sleek redesign that reduces clutter and blends in with the selected color theme.
Action Buttons that used to appear below each folder in project window now appear next to each folder. This frees up more space to view folders and files. The new Action Buttons appear as the mouse pointer hovers over folders.
New File dialog on project window now shows an option to create files using text from the Clipboard.
Officially supports running on the final released version (RTM) of Windows 8 desktop.
Updated the look of the Actions Bar, Channel tabs and New/Open/Save icons on the top left-hand side.
Document Label Color, which is configured in project windows and folders, now show up on the document tab and the bottom of the editor window.
Fixed an issue where the Image Picker window showed up on the wrong monitor, when Tools is not on the primary monitor of a multi-monitor configuration.
It's hard to beleive that I've tested HTML-Kit on virtually all desktop PC versions of Windows since Windows 95! That's Windows 95, NT 4, 98, ME, 2000, XP, 2003 (server), Vista, 2008 (server), Windows 7 and now Windows 8.
If you haven't seen HTML-Kit run on Windows 95, here's HTML-Kit 292 back then on an Intel 486:
HTML-Kit 292 looked essentially the same on Windows 98 and Windows ME. This is 292 running on Windows 2000:
And HTML-Kit 292 running on Windows XP:
Finally, moving up to HTML-Kit Tools running on Windows 7:
Thank you for sticking with HTML-Kit these many years!
HTML-Kit Tools has even more support for PHP than what you see in the default installation. As you know, PHP has a rich library of thousands of functions and support for them is available through optional HTML-Kit plugins.
Installing optional PHP plugins
So to get started, select "Tools > Plugin types > HTML plugins > Get plugins" from HTML-Kit Tools main menu and click "Browse A-Z" tab. The plugins page that opens up has a list of 100+ categories of PHP functions:
Once installed, you'll get a PHP Strings button on the Actions Bar (Channel 2) with a drop-down menu:
PHP function dialogs
Each item on the menu brings up a dialog (sometimes called a wizard) for constructing and inserting the selected function:
Drop-down menus are great for displaying a reasonable number of items but of course some PHP libraries have dozens of functions. hkPHPFunctions_Strings plugin alone has 80+ PHP string functions. To make it easier to browse them, you can dock the list as a side window.
If you click the "Strings" button (instead of opening the long menu) on "Actions Bar > Channel 2 > PHP" tab, you'll get a window like this:
You get function dialogs here as well, and the window itself can be auto hidden when not in use. If you install multiple PHP function categories, you'll be able to have all or some of them open as docked windows.
PHP function name reminder
If you forget the exact name of a PHP function, type the first few characters or even just the first letter of a function, and press Ctrl+Space to get a list of matches:
Reusing variable names
You may have already used selection matching feature to find PHP variables and other code. But did you know that you can also get a list of variables in the current document and quickly insert them by typing '$' + letter ($var for example) and pressing Ctrl+Shift+J :
List of variables and function names
When you're editing a large PHP file with many variables, classes and function names, it may be more useful to have a docked window that list them all. "View > Document information > Code Navigator" gets you exactly that. You can then simply click a variable name or a function name to quickly jump to it in the editor.
Keeping TO-DOs and other notes
Instead of writing down to-do items in a separate file or a piece of paper, you can keep quick notes in PHP files. These notes can then be viewed and referenced in "Code Comments" window ("View > Document information > Code Comments" menu option) each time you open a given PHP file.
If you ever need to go back to a previous version of a script, or just need to see what changes were made on a given date, open the script in question and select "File > Restore > Previous version" from the main menu. HTML-Kit Tools comes with easy-to-use file versioning feature that you can use to browse through previous versions of files.
ksPHPShorthandCtrlStructures is an excellent plugin written by Kay that makes great use of HTML-Kit Tools Shorthand feature. After installing ksPHPShorthandCtrlStructures, try this: type "switch" (without quotes) and press Ctrl+J shortcut. The areas highlighted in green are points in code that you can easily edit and jump to, using Tab and Shift+Tab keys.
I'll let you discover what happens but also try moving to the end of the last "case" and pressing Ctrl+J again!
So in the interest of not turning this blog post into a short novel, let me end the list of PHP-related features here. Please feel free to drop a note on the support forum if you have further questions or if I've failed to mention a feature that you've found useful.
Redesigned tabs and new color themes (scroll down for more)
Document tabs have been redesigned for a better looking editing environment with less distraction. The new tabs make most of available screen space and nicely blends in with the user interface color theme. Supports both light color themes and dark color themes, for the user interface and the colorizer style used by the editor.
A new dark color themed colorizer style compliments the light color themed colorizer style that comes as the default. To try out the dark colorizer style, click the down arrow on UI customization button and select "Colorizer style > Default dark color theme."
"UI Customization" button on the Actions Bar, in "Start > Customize" section, for easily changing color themes, colorizer styles, text size and language.
Initial support for opening and colorizing LESS files. LESS is a popular extension to CSS that implements variables, mixins, operators and functions on top of the current CSS standard.
I've gotten several reports from HTML-Kit users about Norton security software removing HTML-Kit setup files. In short, this is a false positive. But here's a long explanation of what's happening.
One of the relatively new trends in security software is a cloud-based file scoring/reputation system. If a program is not widely used, then it's assumed to have a high risk (even if there's no actual problem with the program).
The intention here is good -- warn people when they try to download a program that hasn't already been downloaded by a lot of other people.
The problem is that this hurts independent software developers.
HTML-Kit is a frequently updated program. Each time it's updated, its file signature looks new to security software and so they think that HTML-Kit has never been seen before or has a low reputation. Then they warn potential users that it's risky to download it. Again, this happens even when a program doesn't pose any security threat at all.
Of course a program's reputation won't go up until enough computers running a given security software report back to their individual cloud how many times a program has been downloaded, which creates somewhat of a chicken and egg problem.
Google Chrome's 'this file appears malicious' warnings are false and unfounded in too many cases. Similar problems exist with IE, and some anti-virus software. Their tests include two factors that have nothing to do with whether the code is malicious: packed executable, and low number of previous downloads.
"Symantec blocks a TexturePacker updates from being installed because they say it has a 'bad reputation'"
Well - it's a new update - which is why nobody was able to install it yet. And nobody will install it because Symantec tells people not to do so... Since nobody does install it the reputation is low - which causes Symantec to warn people about installing it...
HTML Tidy was the first (and the dearest to me!) third-party tool that was integrated in HTML-Kit. HTML-Kit may not even exist if it wasn't for the encouragement I got from Dave Raggett who wrote Tidy. HTML-Kit in turn was the first program to add a graphical interface to Tidy.
More recently, Markdown written by John Gruber was integrated in Tools. "File > New > HTML from plain text" menu option is one of the ways you can create Markdown documents. You can of course open *.md files, preview as HTML with a single key/click, and convert Markdown text to HTML as well.
LESS written by Alexis Sellier is another one of these excellent tools that helps improve web coding, especially if you write a lot of CSS. LESS adds support for variables, operations and functions to CSS. Check it out if you haven't already, and you'll soon be able to play with it in HTML-Kit Tools. And yes, support for LESS will go beyond syntax highlighting *.less files!
HTML-Kit has always been a native Windows application but I get many requests for a native Mac version. Unfortunately, there's no magical switch for converting a complex Windows app to a Mac app. Besides, I think software works best when they're designed from ground up for specific platforms.
So, if you'd like to see a web dev toolset with the work style of HTML-Kit, here's your chance. Since this wouldn't be a quick weekend project, I need to make sure that there's serious interest out there. Being an independent developer, like many of you out there, I'd also need to raise money to get this going.
If the total amount of donations doesn't reach the goal and the project doesn't get started, you can simply request an automatic refund within 60 days (maximum time allowed by PayPal).
For a donation of $20, or more, your name will be on the list of contributors (unless of course you request not to be mentioned), linked to from the app as a heartfelt thank-you for helping to get the Mac version started. Everyone making a donation of $20 or more will get a free single-user license to the first release (finished product).
$35 donation, or more, adds access to beta versions so you can help shape it in the early stages.
$45 donation, or more, adds a license to the current Windows app, in addition to the Mac app. This is still less than the cost of a single license for the current Windows version. May come in handy if you switch back and forth Windows and OS X, or if you're planning to move to one of these platforms in the future.
$100 donation, or more, adds a life-time free upgrades to all future releases of HTML-Kit, regardless of the platform.
$500 donation, or more, adds your name to the "About" dialog, prominently displayed on the front tab.
$1000 donation, or more, adds a "sponsored by" link on HTML-Kit website for 1 year, to your homepage or company website.
So let's get this app started! (and tell your friends)
Scan QR Code in your phone to preview the page in HTML-Kit Tools
Improved support for testing pages that use latest HTML5 and CSS3 features from within the Preview tab.
Ability to split the Preview window for testing pages in IE-mode and WebKit-mode at the same time. This side-by-side rendering of pages in IE and WebKit modes make it possible, with a single key press or a click, to test pages for majority of desktop and mobile browsers in use today, including Internet Explorer, Chrome, Safari, iOS, Android, BlackBerry, Windows Phone and WebOS.
So you want to test your pages in Android phones, Kindle Fires, iPads, iPhones and other connected devices? Now there's a QR Code on the Extended Preview window for easily linking up your device with HTML-Kit Tools.
From time to time I have to take off my programming hat (grudgingly) and put on fundraising hat.
As some of you may know, I've been developing various versions of HTML-Kit for over a decade. I enjoy coding. I love the community here and building tools that try to make web development a more enjoyable experience.
As is the case with most projects like this, it requires time and resources. Your registrations help fund it.
I need your help getting the word out about HTML-Kit Tools to your friends and co-workers. Maybe even nudge the boss to register a few copies of HTML-Kit :)
The actual color of HTML/CSS hex color code is displayed below each color code as a quick reference.
Switch on the Status Bar for quickly toggling Selecting Matching feature on and off.
Pressing Escape key clears out Selection Matching marks.
"Quick Picks" option on Save File As dialog makes it easier to save to previously used project folders. Also provides options for setting the file name to a commonly used file name such as index.html, style.css and script.js.
Save File As dialog responds to "File Type" selection by changing the file extension to the first extension listed for the selected file type.
Open/Save File dialogs show a compact version of "Line ending" and "Encoding" drop-down menu options, giving slightly more space to the file list.
On the setup program, translation author's name is made more visible on a line by itself when a language other than English is selected.
"preserve-entities" option is now enabled by default in HTML Tidy.
Select text to automatically reveal matches. Select a tag, attribute, class name, variable name or other text to quickly mark matches. To make it easier to spot these matches while scrolling through the document, marks stay active until the next selection. This feature can be toggled on and off using "Edit > Preferences > Editor > Misc > Mark text that match the selected text" option.
The Setup program can now be run in Italian, thanks to Italian translation contributed by Luca Detomi.
So you want to see where all FORM tags are or where a variable name is used? Simply select a tag, attribute, class name, variable name or any text, and watch how HTML-Kit Tools automatically marks matches. This feature can be toggled on and off under "Edit > Preferences > Editor."
Wondering if HTML-Kit Tools runs on Windows 8? I have a three letter answer.
Since the Consumer Preview of Windows 8 was released on Feb 29, 2012 I've been wanting to run HTML-Kit Tools on it. It was possible but required some tweaking at the time.
HTML-Kit Tools now runs on Windows 8 desktop. No tweaks necessary. Simply install it as usual and click the application icon on the Start screen.
I've had some reservations about how switching between Windows 8 Metro-style Start screen and Windows 8 desktop worked in the Developer Preview. Having used the Consumer Preview though, I'm pleasantly surprised how fluid it feels. Windows 8 Consumer Preview is a free download if you're curious, and runs through January, 15, 2013.
Want a quick way to type a tag, without typing all those less than and greater than characters? And without having to type the closing tag? Try Alt+Insert keyboard shortcut.
Here's a quick video demonstration of this feature:
In the simplest form, you can press Alt+Insert and type the name of a tag to insert that tag at the caret. No selection is necessary.
Press Alt+Insert, type "p" without quotes and press Enter to get the following. The caret is automatically placed in between opening and closing tags.
If you had selected some text before pressing Alt+Insert, the paragraph tag would have surrounded the text. Note that "|" represents where the caret would be placed.
How about with some attributes. Typing this:
would insert the following. As you see, you can manually type in attributes.
Alt+Insert provides even quicker ways to insert CLASS and ID -- two of the most commonly used attributes. After pressing Alt+Insert, type a tag name followed by "#" character (without quotes and no spaces). Now you can type the actual ID to quickly add an id="name" attribute. For example:
The same applies to the CLASS attribute, except the separator character is "." (period character). After pressing Alt+Insert, type a tag name followed by "." character (without quotes and no spaces). Now you can type a class name to quickly add a class="class name" attribute:
So you have a block of text that you want to replace and it has more than one line.
HTML-Kit Tools : Finding and replacing multi-line text in the current document
Let's start with the quick solution. If you're using HTML-Kit Tools, one of the options on "Edit > Replace" menu is a dialog for finding and replacing multi-line text. Simply paste or enter the text you're looking for and start replacing.
HTML-Kit Tools : Finding and replacing multi-line text in multiple files
Multi-line support is also in batch find and batch replace functions in HTML-Kit Tools:
Open a project from "File > Projects" menu
Inside the project window, select a folder where you'd like to start searching
Right click (the selected folder), and pick "Batch Actions > Find in Files" from the pop-up menu
You'll see a find field that allows for multiple lines
That's HTML-Kit Tools, which had the luxury of following HTML-Kit 292 and learning the few things along the way.
HTML-Kit 292 : Finding and replacing multi-line text in the current document
Finding (and replacing) mult-line text is a little tricky in HTML-Kit 292, but not impossible.
To find a block of text in the current document:
Click "..." next to the "Find what" field
Paste or enter multi-line text, and click OK
Click "Find Next" to start searching
That wasn't too bad, was it?
HTML-Kit 292 : Finding multi-line text in multiple files
Let's try searching for a block of text, with many lines, in multiple files and folders:
If you haven't already, install Ciaran's excellent cmBatchFind plugin. This adds batch search capability to HTML-Kit 292.
Select "Actions > Batch Actions > Find Text" from the main menu
As you see, the "Search Expression" field only accepts a single line of text. It is however possible to convert a block of text into a single-line regex expression and use that as the search expression. Or, you can use the following multi-line text to single-line regex converter:
HTML-Kit 292 : Replacing multi-line text in multiple files
The Search Expression generated above also works with cmBatchReplace plugin. However, the "Replace With" text has to be formatted to include new lines and escape "\" characters. Here's a converter for generating a single-line "Replace With" text:
If you've been using HTML-Kit since the early days and if you've posted questions, chances are, you've visited HTML-Kit newsgroups.
If you're using your web browser to read and post messages on HTML-Kit support forums, the forums interface has changed but you don't have to change anything.
If you're using a NNTP newsreader to read and post messages to HTML-Kit newsgroups, the newsgroup names have changed to htmlkit.editor.tools and htmlkit.editor.292. Also please make sure that you're using news.html-kit.com as the NNTP news server name. All other server names will stop working in the next 30 days.
And if you want the long version...
HTML-Kit newsgroups are where new releases are announced first. It's where discussion, and occasionally arguments, happen over new features and the direction of HTML-Kit. If you've been reading it long enough, I think you'd agree that it's one of the nicest newsgroups around. That's of course because of the friendly folks who answer questions and help out new comers.
Newsgroups require a separate program, generally outside of the browser, to read and post messages. As more and more services moved into the browser itself, including email, the popularity of newsgroups have declined as a way of getting help. Most websites, virtually all popular sites in fact, now use web-based forums for tech support instead of newsgroups. Again, the primary advantage is that anyone can access these forums through a regular browser without having to install special software.
In order to make HTML-Kit support easily accessible to everyone, HTML-Kit newsgroups have been accessible through a secondary web-browser based interface specially designed for this purpose. Unfortunately though, this in-house developed interface had not kept up with rest of the site.
Having said all that, I know that a lot of you still prefer to read HTML-Kit happenings through its newsgroups. So do I. And the newsgroups are staying.
To simplify things a bit though, and as a part of modernizing the web-based interface, the names of newsgroups have been changed (please see above for details).
If you're using HTML-Kit 292 and if it doesn't contain the latest HTML Tidy and HTML5 updates, you may get a new notification on "Help | Check for Updates" dialog.
This update notification applies to HTML-Kit 292 installers downloaded prior to 12-Jan-2012.
So what's in this update? The latest HTML Tidy for checking errors in HTML documents, initial support for HTML5, and improved internal preview window. You can read more about these updates here.
This update is recommended for all HTML-Kit 292 users as it brings improved error checking for HTML5 documents and also enables better support for previewing modern web pages. The setup program can be run on top of current installations of HTML-Kit 292.
If you spend a lot of time writing blog entries, news releases, how-to articles and other text-rich webpages, you may not always want to manually format text into HTML. HTML-Kit Tools can help streamline those cases with its support for styling text in Markdown format, which is a widely-used and human readable text format.
Let's jump in with a quick example of what your text might look like:
You can then preview what it looks like as a fully formatted HTML page:
Once you've completed entering text, it can be converted to valid HTML with a single-click:
Looks interesting? It's quite easy to go from text to preview to HTML. Here's how:
Select "File > New > HTML document from plain text" from HTML-Kit Tools main menu.
Type the text as you would normally as shown in the template.
To preview, simply press F12 or click "Preview" as usual.
When you're ready to convert the text to HTML, click "Open as HTML" link at the bottom of the editor window.
As you see, this feature makes it easy to write naturally and format text without using HTML tags. And then quickly convert it to well-formed HTML.
I'm a big fan of HTML Tidy. If you're new to HTML Tidy, it's a popular utility for checking HTML documents for common mistakes. It can also present an improved version of the markup, and help make older pages standards compliant. HTML Tidy was originally written by Dave Raggett and now being maintained by a quorum of developers.
HTML-Kit has continued its support for HTML Tidy, since being the first graphical user inteface for it, and have released HTML Tidy updates for both HTML-Kit Tools and HTML-Kit 292.
But what if you don't use HTML-Kit, or just need a quick way to check if a page has any errors without opening another application?
HTML Tidy Browser Extension for the Chrome browser fills in this gap by making it easy to check the current page for HTML coding errors. Once the extension is installed, all you have to do is go to the page in question and click the Tidy icon.
Easy to use: Simply click the drop-down icon to view what Tidy finds and suggests.
Fast: HTML Tidy is built into the extension and runs at the speed of your computer.
Self contained: HTML is checked locally, and doesn't go through an online HTML validation service.
Compare HTML: Displays the page source and the HTML suggested by HTML Tidy. A third view highlights any differences between the two.
Checks the final output: If your pages use server-side scripting, this extension can help test HTML as the browser sees it.
So the next time a new client ask you to check their old site for errors, you can simply open up the URL and run it through Tidy.
If you've been using HTML-Kit for a while, you know that HTML-Kit Tools is the latest version of HTML-Kit.
HTML-Kit 292 is the version before Tools, but a lot of people still use it as their primary HTML editor.
If you're using HTML-Kit 292, some of its plugins have been updated to include the following:
Latest HTML Tidy plugin with improved support for HTML 5.
Internal preview window with greater HTML 5 comparability.
HTML 5 doctypes on Document tab.
HTML Tidy now checks for new elements in the latest HTML specification, including article, audio, canvas, footer, header, nav, rp, rt, ruby, section and video. New attributes that are checked include custom data-* attributes, contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck, and the many form and event attributes introduced in HTML version 5.
Most of these new tags and attributes are also supported in the internal preview window for more easily testing HTML 5 pages.
These improvements were made by updating some of the core plugins that come with HTML-Kit 292. Please note that since this is not an update to HTML-Kit 292 main application itself, the "Help | Check for Updates" option won't show this as a version upgrade.
You can get HTML-Kit 292 with these updated core plugins from the download page.
If you're using HTML-Kit Tools, make sure that you have the latest update to get these features.
Improved support for checking HTML5 documents for errors. Supports new tags such as article, audio, canvas, footer, header, nav, rp, rt, ruby, section and video. Also checks for new attributes including custom data-* attributes, contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck, and the many form and event attributes introduced in HTML version 5. To check HTML 5 documents (and other versions of HTML/XHTML), press F9 or select "Tools > Tidy" from the main menu.
Redesigned full screen mode now makes more space available for editing and minimizes on screen distractions. To enter full screen mode, press F11 key or select "View > Full screen" from the main menu.
Newsfeed and update icons were moved to the left hand side of the menu bar for easily access.
Going as far back as the debut version, HTML-Kit had provided a built-in option for catching errors in HTML documents. This was made possible with the help of the excellent HTML Tidy utility written by Dave Raggett. In fact, HTML-Kit was the first program to provide a graphical user interface for HTML Tidy.
HTML Tidy is keeping up with the times by improving support for HTML5 and so is HTML-Kit Tools.
To check your HTML 5 documents, as well as older versions of HTML and XHTML documents, open them in HTML-Kit Tools and press F9 key. Alternatively, you can click the Tidy tab at the bottom of editor windows for a comparison (diff) of the original HTML code and the code suggested by HTML Tidy. Configuration and other options such as beautifying HTML are located on the main menu under "Tools > Tidy".
Improved HTML5 support checks for new elements in the latest HTML specification, including article, audio, canvas, footer, header, nav, rp, rt, ruby, section and video. New attributes that are checked include custom data-* attributes, contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck, and the many form and event attributes introduced in HTML version 5.
Want more screen space and less distraction for editing those long files?
Full screen mode (F11 key) now gives you a fuller full screen view, filling up your display including the area used by the Windows Taskbar. The previous versions of HTML-Kit Tools didn't use the Windows Taskbar area. Pressing F11 again switches the editor back to the default view.
Here's a screenshot of the default view:
This is what you'll get when you enter the full screen mode:
One of the first things you'll notice is how much more room there is to preview your images. Whether they're small *.gif files, *.ico favicons, alpha-blended *.png files or high resolution *.jpg pictures, your images come into focus in useful and eye pleasing views.
You can get a better look at an image by holding the mouse over its thumbnail.
View it with light, dark and patterned backgrounds
In cases where an image has to be tested against a light or a dark background, Image Picker will preview the current image with white and black backgrounds.
It can also preview the image against a checkered pattern when you hold the mouse over a thumbnail for a few seconds, so you could quickly check if an image has a transparent or alpha-blended background before inserting into a page.
Browse dozens, hundreds or thousands of images
If you have a large number of images in a single folder, Image Picker can scale up from browsing dozens of images to hundreds:
Or even thousands, by breaking up the number of displayed images into multiple tabs of manageable size:
Jumping to folders is easy too
When you go to the Image Picker after opening HTML-Kit Tools, it'll display a list of images in the current document folder.
You can easily go up the folder level with a single click. If you have a couple of sub folders within the images folder, looking inside them is also as easy as clicking the folder name.
Of course, changing into any other folder is also possible with the Look In option.
Small, large and labeled thumbnails
Depending on the type and average size of images you're previewing, you may want a smaller or a larger thumbnail size.
Click the thumbnail size icon to change thumbnails to small, large without file name or large with file name.
Here's the large thumbnail view without labels:
And large thumbnails with file name labels:
Insert IMG tags or customize it
The Image Picker inserts <img /> tags with automatically calculated width, height and alt attributes. The alt attribute can be customized to insert file size, image dimensions and file name, in any order.
Unusual placement, faster access
Wondering why the Image Picker icon is on the far corner of the main menu? This placement makes good use of wide screen displays by previewing images in one corner while freeing up the other corner of the screen to glance at the HTML page you're working on. Having the icon on the main menu, instead of the Actions Bar, means that you can quickly bring up the Image Picker regardless of the currently open tab. Or even if you've toggled off the Actions Bar (F11 key or "View > Actions Bar > View/Hide").
Upcoming HTML-Kit Tools updates will bring other ways to get to the Image Picker. Feel free to send your feedback if you have a particular preference.
Thank you TreeHouse!
As is the case with most new HTML-Kit features, Image Picker first appeared in HTML-Kit TreeHouse builds. These are test versions of HTML-Kit Tools that come before a general release. Special thanks go to everyone who played with early versions of the Image Picker and posted comments. Image Picker has smoother edges because of your feedback!
Hope you'll enjoy using the brand new Image Picker.
Did you know that you can edit in HTML-Kit and automatically preview on an iPad?
Starting with HTML-Kit Tools 20110917, you can test your pages on almost any smart phone, tablet or other device your visitors are likely to use to browse your site. Once you link one or more devices to HTML-Kit Tools, all of them automatically update and display the page you're working on. Easy breezy multi-device testing!
Don't believe it? This is a picture shared by Rene showing an iPad and an iPhone previewing the page in HTML-Kit Tools. Thank you Rene!
If you design web sites, it's very likely that you have to work with images. Lots of them. Even if you don't create or edit images, you'll at least have to preview and insert images.
The brand new image picker in HTML-Kit Tools... is there when you need it (single click), shows you big (and small) thumbnails, makes it easy to navigate image folders, and as described in one of the support forum posts, feels comfortable.
When I say "preview for all" I don't mean it as in people, although everyone is more than welcome to preview through HTML-Kit! I mean, preview in all PC/Mac browsers and other devices including smart phones and tablets.
If you want to skip reading the rest, scroll to the bottom for a demo video and a summary. If you're running HTML-Kit Tools 20110909+, you can try it for yourself by clicking the preview icon on the main menu bar.
Back in the early days of HTML-Kit, most everyone used Internet Explorer to browse the web. Mozilla was a close second. However, it wasn't until Firefox, a version of Mozilla, that IE had a strong challenger for its market share. Then came Chrome by Google and rapidly took the third place, closing in on Firefox. All these browsers were mainly running on PCs and Macs.
Enter mobile browsing
Browsing the web through mobile phones provided a limited, if not a painful, experience. That's until the introduction of the iPhone. iPhone, iPod and iPad made it much easier to browse the full web, and collectively iOS Safari became the number one browser on the mobile side. Android-based devices, BlackBerry, Windows Phone, WebOS and other mobile platforms are also competing in this space to provide better web browsing on the go.
What does this have to do with HTML-Kit?
That's a long way of saying that the websites you create today will be viewed in many different browsers and on a wide variety of devices to come. Even though the major browsers are more standards-compliant than ever, it's still important to test websites in multiple browsers to make sure that your visitors see the sites as you intended. Depending on your audience, it's also important to test in different form factors as well.
Editing in HTML-Kit and testing in multiple browsers
HTML-Kit already gives you many options for previewing pages. Most likely though, the internal preview tab (F12 key) is what's used most or at least what's used first. This works well in majority of cases. However, if you need to preview in more than one browser, the currently available options are not as convenient as pressing F12. And, there's a technical and practical limit as to how many different browser modes the preview tab could possibly support.
A brand new option for previewing in, well, all
To solve the not-so-unique problem of easily previewing in multiple browsers, and increasingly more and more devices, HTML-Kit Tools is introducing a brand new preview option. First, here's a quick demo:
The video, which was created during an eureka moment, focuses in on the cool effect of multiple devices updating with the press of a key (can you guess what operating systems and devices are shown?). Of course, you don't have to borrow as many devices as I did to make this video to actually make use of this feature. It simply gives you a new option for preview what you're editing in HTML-Kit Tools through almost any browser or device. By the way, if you're new to HTML-Kit and wondering why F12 is mentioned all over the place in this video, it's because F12 is the shortcut key for previewing inside HTML-Kit.
To get started, click the preview icon on the main menu bar at the top (in HTML-Kit Tools 20110909+).
You can preview in any external browser that's installed on your system, as easily as pressing F12 while editing pages.
One or more browsers assigned to HTML-Kit Tools will automatically refresh to show the latest changes you've made. You don't have to manually reload the page in each browser or open/close browser tabs.
On multi-monitor setups, you can edit on the primary monitor and use secondary monitor(s) for previewing through browsers of your choice.
In addition to previewing in browsers on your system, you can configure it to preview from Mac OS X, Linux or any operating system running on other computers.
Testing your pages on smart phones and tablets works just as conveniently -- pressing F12 in HTML-Kit refreshes browsers on other devices as well.
This feature is optional, even with all the goodness it brings. You can continue to use F12 the way you have, and turn on this feature if and when you want. It's also quite easy to toggle it off.
I'm trying out new icons for Edit, Preview, Output and Tidy tabs which are on the bottom of HTML-Kit Tools editor windows.
The new icons are much less colorful. They are grayscale, in fact. The goal is, though, to make tab icons less distracting while you're editing. Not that the current color icons (the top set of icons in the image) are all that distracting, but once you know the function of each tab the icon should blend into the background.
On a somewhat related note, Output and Tidy tabs may even disappear in upcoming updates when you open certain types of documents. For example, there's really no need for the Tidy tab when you're editing a *.txt file.
One of the great joys of developing HTML-Kit is getting to play with plugins. When I got the email notification of arrival of a new plugin yesterday, it did not matter that it was middle of the night. I had to go check it out pronto.
I've generally used a light colorizer style, partly because HTML-Kit defaults to a soft-white background. I must admit though that a dark editor background is easy to get used to, especially with a well-made colorizer style such as this one.
With Copenhagen Nights style:
So without further ado, here's how to get your hands on it:
Open HTML-Kit Tools and select "Tools > Install Plugins" from the main menu. Or click the plugin icon on the Action Bar.
Browse to "Colorizer Styles" section and select hlCopenhagenNightsStyle.
Click Install hlCopenhagenNightsStyle.
Once installed, open a HTML document and select "View > Colorizer > Styles > Copenhagen Nights Style" to see it in action.