I'm pleased to announce the general availability of HTML-Kit Tools update 2015.03.20.
Tools has gone through many internal optimizations since the last general release, making this a fast and smooth build. The new Change Log has the full list of additions and fixes, with over 20 images and a couple of videos to show and tell. Selecting "Help > Check for Updates" from the main menu in HTML-Kit works just as well.
If you haven't registered HTML-Kit yet, pick a price, or better still, ask your boss to get a low-cost site license that covers everyone at your business!
None of this would be possible and definitely wouldn't be as much fun, without the friends of HTML-Kit. New test builds will be posted on the support forum, once the dust settles, if you'd like to send your feedback on the next round of updates.
As a fan of shiny bits and a early adopter, I had to check out Windows 10 for myself as soon as the technical preview was available for download. While I like the metro/tile interface, I rarely get to use tile apps since most of my time is spent in the desktop. Windows 10 is making the desktop feel loved again, with the ability to run tile apps right in the desktop.
And of course HTML-Kit Tools made a apprerance, within minutes, in the freshly installed Windows. The current build of Tools runs without modification. So if you were curious, yes, you can run HTML-Kit Tools in Windows Technical Preview, build 9841 as of this writing.
Windows 10 Tour in just 8 Minutes by Scott Hanselman
So you know that HTML-Kit Tools keeps getting updated but unless you keep an eye on the support forums it may not always be easy to discover new features. The newly redesigned HTML-Kit Tools Change Log hopes to change this.
If you haven't seen it already, check it out on the HTML-Kit site or by selecting "Help > Check for Updates" menu option in HTML-Kit. Oh, and don't forget to try the instant search!
Did you know that you can run HTML-Kit 292 on Linux?
This is possible with the help of the Wine project and this video contains step-by-step instructions on how to install Wine, install HTML-Kit 292 and run HTML-Kit 292 on Linux (Ubuntu 14.04 in this particular case).
Please note that these instructions only applies to HTML-Kit version 292. Some of the newer APIs required to run the latest version of HTML-Kit, HTML-Kit Tools, are not yet present in Wine.
HTML-Kit is one of the longest running HTML editors for Windows that's still getting feature updates. It's also one of the oldest independently developed HTML editors with a 15+ year history.
I keep it going because I love software development and the web development space presents many new exciting challenges. But also, and maybe even more so, because I like the community around it and hope both free and relatively low-cost versions help people enjoy coding. We all benefit from having our software come from many vibrant creative pools, from open source to indie to large companies.
So I've said independent a few times. Well, that's another way of saying that HTML-Kit doesn't have a company with deep pockets. I need your help to make it better. You can help by registering HTML-Kit, making a donation or simply spreading the word.
While I have the fund-raising hat on, I'd also like to start another development marathon. Last year's marathon resulted in 30 builds in 30 days with many more additions.
If we can raise at least $800 USD, I'll start another marathon. If you or your company adds $200+, you'll be mentioned as a marathon sponsor (with your permission of course).
Ever wanted to view and edit two distant parts of the same document?
"Duplicate Document View" (sometimes called the "Split View") can help.
You can get to this feature from the "View > Window > Duplicate Document View" main menu option in HTML-Kit Tools. It's also accessible from the document tab, as shown in the video.
Check out the video for how to make full use of this feature.
HTML-Kit Tools has had the ability to find and replace in multiple documents for a long time. To be able to use this feature though, you first had do set up a project through "File > Projects" and add files and folder targets.
Sometimes you simply need to find in all open documents, without having to set anything up. So starting with HTML-Kit Tools update 20131106 you can do just that.
Find in open documents
To find something in all open documents, press Ctrl+F ("Edit > Find" menu option), enter what you'd like to find and click "Find in Open Documents."
In addition to plain text and regular expression search, this feature supports all other "Search As" types as well, including searching inside HTML attributes, CSS comments, JavaScript blocks and more.
Replace in open documents
To replace something in all open documents, press Ctrl+H ("Edit > Replace" menu option), enter your find and replace text or regular expression, and click "Replace in Open Documents."
The Version History feature ("File > Restore > Restore previous version" menu option) is used to save a copy of each document before updating with replaced text, so you can go back to the previous version if you need to.
If you don't see these options in your HTML-Kit, please make sure that you have the latest version ("Help > Check for Updates" menu option).
Search in all open documents. To use this feature, press Ctrl+F, enter some text to find and click "Find in Open Documents." Supports searching as plain text, regex and various attributes.
Replace in all open documents. To use this feature, press Ctrl+H, fill in the fields and click "Replace in Open Documents."
Create multiple selections in the editor, and change text in those selections all at once. Hold the Ctrl key down and double click some text ("Edit > Select > Create multiple selections"). Repeat to make more selections. Type some text to update all selections at once. To insert a single piece of text at multiple locations at the same time, hold the Ctrl key down, left-click each target location and then type the text. Press Escape to return to single-selection mode.
Easily change preview resolution, to test how your pages look in various screen sizes found in smart phones, tablets and other devices. Especially useful for testing responsive design. To use this feature, open a HTML document, press F12 and click preview monitor icon on the bottom. Dimensions are automatically applied as you move mouse pointer over the presets.
Rulers for adjusting the size of preview window and for taking approximate measurements. To use this feature, open a HTML document, press F12 and hover over the rulers. Pixel markers at 10th, 50th and 100th increments can be used as guides when resizing. The adjusted size of the preview is displayed on the Status Bar, next to line and column numbers.
Redesigned User Interface Theme picker makes it easier to try out color themes, colorizer styles and font settings in real-time, without having to go through preferences dialog. To use this feature, open a document and click the UI Theme icon on the menu bar (near "Help" menu).
Thin large font for a more comfortable viewing of code on high resolution monitors. To find the font setting most suitable for your display, open a document and click User Interface Theme icon on the menu bar (near the "Help" menu). Then hover over a font to view the current document in that font.
View file content without explicitly opening files in project windows. To use this feature, open a project window and single-click on a local file. Each file you click on, or select using Up/Down arrow keys, will open for a quick look. To temporarily disable this feature, hold the Shift key down while clicking files. To keep it disabled, use the "Edit > Preferences > Projects > Provide a quick look when selecting files" option.
Quickly create multiple documents using the "File > New > New multiple files" main menu option. This feature can be used, for example, to create index.html, style.css and script.js files in one pass instead of creating them separately.
Option for inserting place-holder images of any size and color for testing page layouts. To generate an image, press Ctrl+Enter and select "Create place-holder image."
Image Picker now supports inserting images as data URIs ("data:image/png;base64"). To use this feature, hold the Shift key down while selecting an image from the Image Picker (invoked from the top right-hand corner of the menu bar). For browser compatibility reasons, only images smaller than 64K can be made data URIs.
Screen Capture Utility for taking screenshots of work in progress, for example, to get feedback from users and clients. To use this feature, click the camera icon on the top right-hand corner of the menu bar and select "Capture Selected Area (Ctrl+PrintScreen)." Select the area to capture and double click (or press Enter) to save.
Screen Capture Utility can also be used for creating slide shows to demo your pages and apps, or even to create demos of HTML-Kit Tools itself. To get started, use the "Start capturing for slide show" option on Screen Capture Utility menu. The slide shows can be exported as simple HTML as well as fully functional reveal.js slides.
Document tabs now use a more noticeable flag icon to indicate modified status. Previously, a "*" was used as the indicator. The color of modified flag can be customized under "Edit > Preferences > Appearance > Misc > Modified indicator color."
Actions Bar can be toggled on and off, using the new icon next to newsfeed icon on the menu bar.
New Line Ending Picker. This redesigned picker appears when clicking line ending mode label (Windows, UNIX or Mac Classic) on the Status Bar, and temporarily turns on line ending character display in the editor.
When character encoding indicator is enabled ("Edit > Preferences > Files > Show file encoding on the Status Bar"), clicking that label on the Status Bar brings up a new Character Encoding Picker. The current encoding is displayed in a bold font.
Project label color on document tabs changed from a rectangle to the project window icon (displayed in label color).
"Help > Check for Updates" and "Tools > Install Plugins" windows now have a consistent look on various versions of Windows.
User Interface theme, application window size/location, and language settings are remembered between general releases as well as TreeHouse builds. This takes effect for updates installed over this update.
Remembers the last used profile between sessions. When a profile is selected from "Kit > Profile" menu, that profile remains active during restarts until a new profile is selected. To reset to the default profile, select "Kit > Profile > Default" from the main menu. If a profile is specified on the command line, that profile is used instead of the last used profile.
Experimental support for beautifying HTML. To use this feature, open a plain HTML file (not a PHP or other type of file with non-HTML code), and click "Beautify HTML" option on the bottom. Checking HTML markup for errors is highly recommended, using a tool such as HTML Tidy (F9), before and after beautifying.
Reduce the size of HTML files by removing extra whitespace and comments. To use this feature, open a plain HTML file and click "Minify HTML" option on the bottom.
Check for typos and common erros in CSS. To use this feature, open a *.css file and click "Validate CSS" option on the bottom. To validate a portion of CSS, select a block of CSS before invoking this option.
Reduce the size of *.css files by minifying CSS. To use this feature, open a *.css file and click "Minify CSS" option on the bottom. The minified CSS opens in a new editor window with the *.min.css extension, ready to be saved.
Beautify JavaScript. To use this feature, open a JavaScript file and click "Beautify JavaScript" option on the bottom. Select a block of JavaScript code before invoking this option to beautify portion of JavaScript.
Check the quality of JavaScript code using the popular JSLint tool written by Douglas Crockford. To use this feature, open a *.js file and click "Validate JavaScript" option on the bottom.
Reduce the size of *.js files by minimizing JavaScript. To use this feature, open a JavaScript file and click "Minify JavaScript" option on the bottom. The minified version opens in a *.min.js editor window, ready to be saved.
Option for converting plain text and text with Markdown formatting to HTML. To use this feature, select some text, press Ctrl+Enter and invoke "Convert selected Markdown text to HTML." For examples of Markdown text, select "File > New > HTML document from plain text" from the main menu.
Option for converting LESS style files to CSS. To use this feature, open a LESS style sheet (*.less) and click "Convert to CSS" on the bottom.
Ctrl+Enter option for converting selected LESS styles to CSS. To see this in action, type some LESS code (such as ".one { font-weight:bold; .two { color:blue; } }" without quotes), select it and press Ctrl+Enter.
Option for converting CoffeeScript files to JavaScript. To use this feature, open a *.coffee file and click "Convert to JavaScript" on the bottom. Also supports converting only the selected block of CoffeeScript code to JavaScript.
Ctrl+Enter option for converting selected CoffeeScript code to JavaScript. To try this feature, type some CoffeeScript code (such as "a = (b) -> b * b" without quotes), select it and press Ctrl+Enter.
Initial support for colorizing CoffeeScript files (*.coffee).
Initial support for colorizing YAML files (*.yaml).
Initial support for colorizing Diff files (*.diff).
Initial support for colorizing PowerShell files (*.ps1).
Faster startup. These speed optimizations should be noticeable after the initial installation of updates.
Speed improvements related to opening documents and split preview (Ctrl+F12).
Smoother rendering of line numbers.
"Select Next Attribute (Ctrl+])" and "Select Previous Attribute (Ctrl+[)" options on "Edit" menu for navigating markup.
Improved F4 keyboard shortcut, which can be used to toggle between the current editor window and the project window.
Updated Opera browser options on "View > Preview" menu to support the latest versions of Opera.
HTML Tidy tab is no longr displayed for non-HTML files.
Do you know how your pages look in various screen resolutions?
Now it's easier than ever to test pages in different screen resolutions using Preview Rulers and the Resolution Picker. Check out the video to see how to adjust rulers and to select pre-defined resolutions as you preview.
This feature is currently available in TreeHouse build 20130721,
and will soon be released to all registered users of HTML-Kit Tools. You can keep an eye out for it using "Help > Check for Updates" menu option.
The Screen Capture utility, located on the far side of the menu bar, makes it easier to select a portion of the screen and save as a PNG image.
You could use it to, for example, show a portion of a page to a customer before it's ready to be published on the web, by switching to the Preview tab and using the Screen Capture utility to save a specific area. This will certainly come in handy for creating screenshots of HTML-Kit, for documenting certain features, testing and attaching in emailed questions.
Saving a portion of the screen
"Selected Area" button can be used to select and save a portion of the screen. After clicking this option:
Move your mouse to where you'd like to start the rectangular selection or the top-left corner.
Click and hold the left mouse button, and move to the end of the selection or the bottom-right corner.
Once you have the area selected, you can move and resize the selection for a better fit. It'll show you the width and height of the selection, where it starts (top-left corner) and the width to height ratio.
To save the selected area to a *.png image file, press Enter or double click. The file name suggested in the Save As dialog includes the size of the area.
Shortcuts
To toggle between thin and thick selection frame and text, press the "T" key.
To make your selection a square, press the "1" key. This changes the selection box ratio to 1:1. Then press the "W" key to change width of the selection to match its height. Pressing "H" matches height to the width.
To use 4:3 ratio, press the "3" key. Then use "W" and/or "H" keys to adjust width and/or height to match 4:3 ratio.
Pressing the "9" key changes ratio to 16:9, which is also the default.
Enter key brings up Save As dialog for saving selected area of the screen.
Escape key cancales the current selection, if you'd like to start over.
Saving the full screen
"Full Screen" option takes a screenshot of the full screen and prompts to save it. The suggested file name in the Save As dialog includes width and height of the screen.
Note that the build number doesn't reflect build date in this case. If you speak Dutch, Gerard has been kindly updating the Dutch translation for each build.
Day 30: Build 20130819 posted on 06-Sep-2013 --
Replace in all open documents. To try this feature, press Ctrl+H, fill in the fields and click "Replace in Open Documents."
Day 29: Build 20130818 posted on 05-Sep-2013 --
Find in all open documents. To try this feature, press Ctrl+F, enter some text to find and click "Find in Open Documents." Supports searching as plain text, regex and various attributes.
Day 28: Build 20130817 posted on 04-Sep-2013 --
Ctrl+Enter option for converting selected LESS code to CSS. To try this feature, type some LESS code (such as ".one { font-weight:bold; .two { color:blue; } }" without quotes), select it and press Ctrl+Enter.
Ctrl+Enter option for converting selected CoffeeScript code to JavaScript. To try this feature, type some CoffeeScript (such as "a = (b) -> b * b" without quotes), select it and press Ctrl+Enter.
Day 27: Build 20130816 posted on 03-Sep-2013 --
Option for converting CoffeeScript to JavaScript. Also supports converting selected CoffeeScript block to JavaScript. To try this feature, open a *.coffee file and click "Convert to JavaScript" on the bottom.
Day 26: Build 20130815 posted on 02-Sep-2013 --
Option for converting LESS to CSS. To use this option, open a *.less style sheet and click "Convert to CSS" on the bottom.
Day 25: Build 20130814 posted on 01-Sep-2013 --
Option for compressing HTML by removing extra whitespace, comments, etc. To try this feature, open a *.html file and click compress on the bottom.
Day 24: Build 20130813 posted on 31-Aug-2013 --
Check CSS for typos and common errors. To use this feature, open a *.css file and click "Validate CSS" option on the bottom. Also supports validating only the selected CSS.
Day 23: Build 20130812 posted on 30-Aug-2013 --
Check the quality of JavaScript code using popular JSLint tool written by Douglas Crockford. To use this feature, open a *.js file and click "Validate JavaScript" on the bottom.
Day 22: Build 20130811 posted on 29-Aug-2013 --
Reworked preview resolution picker on "Preview" tab to make it easier to find and try out various options. Preview window's current resolution is highlighted. Speed optimizations.
Day 21: Build 20130810 posted on 28-Aug-2013 --
List of common screen/device resolutions that can be applied to the preview window. To try this feature, open an HTML document, click Preview and click "width x height" label on the bottom. Dimensions are automatically applied as you move the mouse pointer.
UI theme, application size/location, and language settings are remembered between TreeHouse builds and updates. This applies to future
builds installed over this one (20130810).
Hide and show the Actions Bar using icon next to the "Help" menu.
Day 20: Build 20130809 posted on 27-Aug-2013 --
Both width and height of the preview window can now be changed to test how your pages look in various screen sizes. Pixel markers at 10th, 50th and 100th increments can be used as guides when resizing. The adjusted size of the preview is displayed on the status bar next to line and column numbers.
Day 19: Build 20130808 posted on 26-Aug-2013 --
Ability to convert the selected text, optionally with Markdown formatting, to HTML. To try this feature, enter some text, press Ctrl+Enter and select "Convert selected Markdown text to HTML." For some examples of Markdown text, select "File > New > HTML document from plain text."
Day 18: Build 20130807 posted on 25-Aug-2013 --
The icon for toggling full-screen mode (next to the Kit menu on the right-hand side of the menu bar) now displays a drop-down with more options. F11 key still takes you in and out of full-screen mode. Option for changing the color of modified indicator on document tabs under "Edit > Preferences > Appearance > General > Modified indicator color"
Day 17: Build 20130806 posted on 24-Aug-2013 --
"File > New > New multiple files" menu option for easily creating multiple files.
When you start a new page or a site, you often have to create more than a single *.html file. With this option, you can enter a list of files you want to create (index.html, style.css and script.js for example) and open them with proper colorizing. The new documents have the entered file names as well (not untitled...) for quickly saving using Ctrl+S.
Day 16: Build 20130805 posted on 23-Aug-2013 --
Create multiple selections and change text in those selections all at once. Hold the Ctrl key down and double click some text. Repeat two or more times. Now when you type, text in all selections will change at the same time. Pressing Escape returns to single-selection mode.
Day 15: Build 20130804 posted on 22-Aug-2013 --
Quickly change the width of preview area to test how your pages fit in various screen sizes found in smart phones, tablets and other devices. Especially useful when testing responsive design. To try this feature, open a HTML document, press F12 and move the right-hand edge of the preview window.
Day 14: Build 20130803 posted on 21-Aug-2013 --
Experimental support for beautifying HTML. To try this feature, open a HTML file (not a PHP or other type of file that also contain HTML) and click Beautify HTML option on the bottom. Check HTML markup before and after, using a tools such as HTML Tidy (F9).
Day 13: Build 20130802 posted on 20-Aug-2013 --
Reduce the size of CSS with a single click. To use this feature, open a .css file and click Minify CSS option on the bottom. The minified CSS will open in a new window with the *.min.css extension. The "" used to indicate modified status has been removed in favor of new flag icon.
Day 12: Build 20130801 posted on 19-Aug-2013 --
Image Picker](http://www.htmlkit.com/blog/image-picker-2011-10/) now supports inserting images as data URIs. To use this feature, hold the Shift key down while selecting an image.
Day 11: Build 20130731 posted on 18-Aug-2013 --
Improved the way document tabs display the "modified" status. In addition to the new flag icon, the modified indicators turn red when the mouse is over document tabs. Quick Look feature can be temporarily disabled by holding the Shift key down while clicking files in project windows.
Day 10: Build 20130730 posted on 17-Aug-2013 --
Quickly insert place-holder images of any size and color for testing page layouts. For example, type "50x50-red" without quotes and press Ctrl+Enter.
Day 9: Build 20130729 posted on 16-Aug-2013 --
Speed improvements related to opening documents and split-preview (Ctrl+F12).
Day 8: Build 20130728 posted on 15-Aug-2013 --
Quickly view file content without explicitly opening each file. To use this feature, open a project window and single-click on a local file. That file and other files you click on (or select using Up/Down arrow keys) will open for a quick look and automatically close when not in use.
Day 7: Build 20130727 posted on 14-Aug-2013 --
Option for Minifying JavaScript using UglifyJS2 plugin. Minified version opens in a *.min.js editor window.
Day 6: Build 20130726 posted on 13-Aug-2013 --
Option for Beautifying JavaScript. Improvements and fixes related to Screen Capture utility.
Day 5: Build 20130725 posted on 12-Aug-2013 --
Updated HTML-Kit Slides data format, which can now be exported to HTML as ready-to-deploy presentations on websites.
Ctrl+PrintScreen shortcut for invoking Screen Capture utility.
Day 4: Build 20130724 posted on 11-Aug-2013 -- Diff colorizer, Ctrl+] and Ctrl+[ shortcuts for selecting markup
I, your humble HTML-Kit programmer, have a summer goal. I want to try and post a new build/update of HTML-Kit Tools every day for the next 30 days.
Of course it's not humanly possible (no I'm not a robot, Bill!) to release amazing new features every 24 hours so don't expect that.
Most builds will have incremental improvements, mixed in with experiments supporting new and popular web technologies. These will be posted and discussed on the TreeHouse forum/newsgroup. You'll be able to download test builds from your User Assistant page (downloads require a registration).
I need your help, as in pressure, to stay on this goal! Nudge me if it's 11 PM in Florida and no sign of build-of-the-day. But also please reward this Pavlov's Dog for sleepless nights of coding by posting your feedback on the forum or social network of your choice (HTML-Kit is on these).
If you're a business or an organization with multiple developers, now you can purchase multi-seat licenses at a discount. There's even an option for purchasing unlimited-seat licenses for educational and business use.
This is in addition to the already flexible single-user registration prices available to you as an independent developer.
This feature is currently available in TreeHouse build 20130701,
and will soon be released to all registered users of HTML-Kit Tools. You can keep an eye out for it using "Help > Check for Updates" menu option.
If you're working with not so tidy CSS files, you can now get them to look great with a single click.
Simply open a *.css file and click Beautify CSS link on the bottom. You can reformat specific CSS blocks by selecting them before using this feature. As shown in the video, even minified CSS can be made readable.
When editing HTML documents full of DIV and other nested tags, automatic highlighting of matching tags added in this release makes it easier to see where blocks start and end. Simply place the caret inside a tag to see its opening or closing tag.
Hovering the mouse pointer over a tag also highlights opening and closing tags. This option can be used when you want to find blocks without moving the caret from your edit point.
Ctrl+M now supports jumping to the matching tag when the caret is inside a tag. It can still be used to jump to the matching brace when the caret is at a {} [] () character.
Marks made by Go to Matching Tag command (Ctrl+M) can be cleared by pressing the ESCape key.
Ctrl+Shift+M can be used to select between matching tags as well as matching braces. Placing the caret inside a tag selects between tags. Placing the caret inside of a brace selects the inner block (excludes braces). Placing the caret outside of a brace selects the outter block (includes braces).
Added F6 ("Tools > Repeat Last Plugin Action") for repeating the last plugin action. Currently supports actions related to inserting text. For example, select some text and press Ctrl+P followed by Ctrl+B to add STRONG tags around the selected text. From now on, F6 can be used to repeat that action on other selected text.
View CSS colors in rgb() and rgba() formats as you edit. This works similar to the way #0F0 and #00FF00 hex colors are highlighted. Colors such as rgb(0,255,0), rgb(0%,100%,0%), rgba(0,255,0, .2) and rgba(0%,100%,0%, .2) are underlined with the specified color for quick reference. Alpha value in rgba() colors is calculated against a white background, which may not match the background of the editor where color codes are displayed.
Richhint popup shows rgb() and rgba() colors at the caret. Color preview doesn't include alpha value.
"View > Editor > Refresh" for refreshing the current document view. This mainly affects the colorizer view. Double clicking the document tab also refreshes the colorizer view of the current document, in addition to bringing caret line into focus.
Caret line, which highlights the background of the current line, stays visible even when the editor doesn't have focus.
Supports running on new Windows 8.1 Preview, in addition to Windows 8.0.
"Preferences > Projects > Show project name of the current document in application title" option can be used to show the project name associated with the current document.
Support for Emmet coding (previously called Zen Coding). To test this feature, type h1+div#content>ul#mylinks>li3>a[href]{Link $} and press Ctrl+E. Can also be used to expand individual tags as well: type ul>li5 and press Ctrl+E.
Touchscreen Plugins for using your smartphones and tablets to access HTML-Kit Tools plugins.
Ctrl+Enter keyboard shortcut now offers multiple options, including the previous >br /< shortcut and Emmet/Zen Coding expansion.
Incremental Search dialog (Ctrl+F) now has an option to toggle Case Sensitive matching.
Dutch, German and Italian translations written by Gerard, Martin and Luca, have been updated to the latest releases in the setup.
Improved document tabs so that they stay the same size while switching, reducing the chances of accidentally clicking the next tab.
Comparison of coding fonts in HTML-Kit Tools
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)
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.
Bitstream Vera Sans Mono font was originally designed by Jim Lyles at Bitstream.
Source Code Pro is a brand new font designed by Paul Hunt and the type team at Adobe.
Here's to seeing your code in a whole different way (well, slightly more legible way at least).
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.
HTML-Kit Tools started initial support for Windows 8 when it reached Developer Preview milestone and has been officially supporting Windows 8 since Consumer Preview.
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!
If you're a PHP developer, you may appreciate many features that are built into HTML-Kit Tools. Features like PHP colorizers in light and dark color themes, selection matching for quickly finding variables, full screen editing for viewing more of your PHP code in a clutter-free display, instant search, brace highlighting, code folding, and many more.
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:
Docked windows
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.
File versioning
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.
Shorthand
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.
Starting with the next HTML-Kit Tools update, the project window will blend in with your favorite color theme. Here's a preview of what the new project window looks like:
Project window in new style
The good looking icons you see on the project toolbar were licensed from IcoMoon!
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.
Would you like to see a Tip of the Day page or a list of great tips about using HTML-Kit Tools? If we all add a tip or two it won't be difficult to create a helpful resource everyone can learn from.
Landscape Preview window that previews the current document as you edit. To enable this feature, press Ctrl+F12 or click "Active Preview" button on the status bar.
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.
If you've run into this problem while trying to install HTML-Kit, or want to double check the program before installing, you can run a third-party scan of HTML-Kit. As always, please feel free to contact me or post on the forum if you have any further questions or concerns.
I'll end this post with quotes from other software developers running into this issue.
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...
I see a lot of exciting things happening in HTML5/CSS/JavaScript space, and I want to make it easier to take advantage of them in HTML-Kit Tools.
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!
A quick update (10-Jul-2012): There's only been one donation totaling $45.00 (which is refunded, not having met the fundraising goal). It's unfortunate but at least I've tried :)
I'm pretty bad at designing websites, but not too bad at creating tools for web developers. If this is your first visit, hi, my name is Chami. I've run a so called "one man shop" developing and supporting HTML-Kit editor for over a decade. If you've never heard of this software, here are some online and offline references.
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.
Easily run the current page being previewed through WebKit/Chrome-based Inspector. This makes it possible to access debugging and profiling tools right from the Preview tab. These Inspector tools include JavaScript console, HTML elements view, CSS properties, missing resource checker, page load timeline and more.
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.
So you don't remember the exact colors of all those RGB hex color codes in your CSS and HTML files? No worries. Simply open a file with HTML color codes to see the colors appear below each color code.
When you type a color code, its color appears below the code and automatically changes as you change red, green and blue values.
To get a better view of the color, simply hover your mouse pointer over a color code.
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.
<p>|</p>
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.
<p>selected text</p>|
How about with some attributes. Typing this:
a href="about.html"
would insert the following. As you see, you can manually type in attributes.
<a href="about.html">|</a>
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:
div#menubar
becomes:
<div id="menubar">|</div>
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:
There are many ways to stay in the loop but if you prefer to get an email or a RSS notification when there's an HTML-Kit update, now you can.
There's now a Google Groups announcements-only mailing list that covers:
HTML-Kit Tools updates
HTML-Kit TreeHouse build notices
HTML-Kit 292 updates
And other HTML-Kit related announcements
This is a low traffic mailing list, and email sent through this list will have "[html-kit]" in the subject line to make it easier for you to filter or label it.
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:
Press Ctrl+F
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:
Copy the single-line regular expression you've generated for the find text, and paste it in "Search Expression" field.
Add "r" (without quotes) to "Options" field.
Finally, click "Start" to begin batch search.
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.
In short:
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:
You can already find as you type, using incremental search feature in HTML-Kit Tools.
This latest update makes it possible to instantly find STYLEs, IDs, JavaScript events, CLASSes and more, while skipping rest of the document. All within the familiar Ctrl+F dialog.
Today I'm excited to announce the new Image Picker for HTML-Kit Tools. It's a brand new design that makes it easier to get to your images, even if you have lots of them in multiple folders.
Open Image Picker with a single click on the menu bar
So if you're using HTML-Kit Tools 20111001 or later and haven't seen the new Image Picker yet, click the picture icon on the top right hand corner.
Hover for a bigger preview
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.
If you're working in CSS, JavaScript or other scripting language, you can customize the inserted code. For example, to the CSS format url(image.png)
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.
What's there to say about a splash screen? Not much really. It's elevator music for software. Something to look at until you get to start using the program.
On the other hand, HTML-Kit's splash screen hasn't changed since HTML-Kit 292. Not significantly anyway, HTML-Kit Tools simply added "Tools" to the graphic.
The new splash screen is bigger and looks more proportional on high resolution screens than the original. It also tries to keep busy-information to a minimum.
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.
Early days
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.
In short:
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.
Default style:
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.
