Adding code snippets to the TagsReminder

March 3, 2014 by HTML-Kit Support
Play Video    
 
 
 

This video shows how to customize the TagsReminder in HTML-Kit Tools, so that you could have your own code snippets pop up when you type the "<" key.

 
 
 

Preview in landscape mode as you edit

February 22, 2014 by HTML-Kit Support
Play Video    
 
 

Duplicate view (split view)

February 3, 2014 by HTML-Kit Support
Play Video    
 
 
 

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.

 
 
 

Find and replace in open documents

December 26, 2013 by HTML-Kit Support
View 1 more image    
 

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).

 

Holiday Special!

December 21, 2013 by HTML-Kit Support
 

For a limited time, you can get the full version of HTML-Kit Tools (the latest version of HTML-Kit) for only $19.00! ($40 USD off regular price)

Merry Christmas, Happy Holidays and Happy Coding!

Update: 2013 Christmas special is over but you can still pick a low price when you register HTML-Kit.

 

HTML-Kit Tools update - 20131106

November 21, 2013 by HTML-Kit Support
 

HTML-Kit Tools update 20131106 is now available to all registered users.

  • 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.
 

Thank you TreeHouse!

 
 
 

Resolution Picker and Preview Rulers

November 20, 2013 by HTML-Kit Support
Play Video    
 
 
 

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.

If you don't see these new icons, make sure that you have the latest version of HTML-Kit Tools.

 
 
 

Screen capture utility

August 8, 2013 by HTML-Kit Support
 

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:

  1. Move your mouse to where you'd like to start the rectangular selection or the top-left corner.
  2. 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.

 
 
 

30 builds in 30 days

August 29, 2013 by HTML-Kit Support
 

Status: completed on 06-Sep-2013

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

  • Day 3: Build 20130723 posted on 10-Aug-2013 -- CoffeeScript and PowerShell colorizers

  • Day 2: Build 20130722 posted on 9-Aug-2013 -- YAML colorizer, easily create HTML-Kit slideshows

  • Day 1: Build 20130721 posted on 8-Aug-2013 -- Screen Capture utility

The crazy goal

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).

-- Chami, "famous last words," 8-Aug-2013

 
 
 

Unlimited educational and business licenses

July 18, 2013 by HTML-Kit Support
 

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.

For details, please visit the HTML-Kit registration page

 
 
 

Beautify CSS with a single click

July 17, 2013 by HTML-Kit Support
Play Video    
 

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.

 
 
 

HTML-Kit Tools update - 20130615

July 9, 2013 by HTML-Kit Support
View 1 more image    
 

HTML-Kit Tools update 20130615 is now available to all registered users.

View CSS rgb() / rgba() colors as you edit

 

Highlight matching tags

 
  • 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.
  • Initial support for colorizing Haxe files (*.hx).
  • Initial support for colorizing Objective C/C++ files (.m;.mm).
  • W3C Markup Validation plugin was updated to workaround changes on W3C service.
 

Thank you TreeHouse!

 
 
 

HTML-Kit Tools update - 20121101

November 8, 2012 by HTML-Kit Support
View 4 more images    
 

HTML-Kit Tools update 20121101 is now available to all registered users.

 
  • Read source code more easily with new font options -- Source Code Pro and DejaVu Sans Mono. Makes similar looking characters, such as 1, l, i, | and O, o, 0, more legible.
  • 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)

 

Document tabs with consistent tab sizes

 
 

Thank you TreeHouse!

 
 
 

More legible fonts (and good looking too)

September 25, 2012 by HTML-Kit Support
 
 

This feature was delivered in HTML-Kit Tools update 20121101. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

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).

 

Faster coding with Zen Coding

September 24, 2012 by HTML-Kit Support
 

This feature was delivered in HTML-Kit Tools update 20121101. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

I'm happy to announce that Zen Coding is now supported in HTML-Kit Tools!

Zen Coding, which is now called Emmet, is a popular choice for high speed coding written by Sergey Chikuyonok.

Imagine typing a CSS selector-like expression and expanding it to HTML code. So instead of typing all of this code:

<h1></h1>
<div id="content">
<ul id="mylinks">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</div>

you can type the following line and press Ctrl+E to quickly generate the HTML:

h1+div#content>ul#mylinks>li*3>a[href]{Link $}

That particular expression was used to demonstrate the power of Emmet expressions. If you're new to Emmet, try typing a tag name like DIV:

div

and pressing Ctrl+E to expand it to:

<div>|</div>

Now try this:

ul>li*5

Ctrl+E expands it to the following unordered list with 5 items:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Looks fun and useful? You can read more about the syntax of Emmet expressions here.

Thank you Sergey, for your efforts on Emmet.

 

Touchscreen Plugins

September 12, 2012 by HTML-Kit Support
View 2 more images    
 

This feature was delivered in HTML-Kit Tools update 20121101. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

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)

 
 
 
 

Pick your price when registering

August 23, 2012 by HTML-Kit Support
 

Thinking about registering HTML-Kit for the full version of HTML-Kit Tools but the full price is a bit much?

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.

 
 
 

HTML-Kit Tools update - 20120815

August 23, 2012 by HTML-Kit Support
View 5 more images    
 

HTML-Kit Tools update 20120815 is now available to all registered users.

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.

Action Buttons appear next to the folder

 
 

Updated look of the Actions Bar

 
 

Create new files from Clipboard content

 
 

Official support for running on Windows 8 desktop

 
 

Image Picker window

 
 

Thank you TreeHouse!

 
 
 

Running on Windows 8

August 17, 2012 by HTML-Kit Support
View 4 more images    
 

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.

Now that the final version of Windows 8 has been released to manufactoring (RTM), I'm happy to share this screenshot of HTML-Kit Tools running on the final version of Windows 8 desktop:

 
 

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!

 
 
 

PHP coding tips

August 16, 2012 by HTML-Kit Support
View 9 more images    
 

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:

 

Install the plugins you're most likely to use. In this example, we'll install hkPHPFunctions_Strings plugin.

PHP menus on Actions Bar

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.

 
 
 

Project window with matching colors

August 12, 2012 by HTML-Kit Support
View 1 more image    
 

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!

 

Project window in old style

 
 
 
 

HTML-Kit Tools update - 20120801

August 3, 2012 by HTML-Kit Support
View 3 more images    
 

HTML-Kit Tools update 20120801 is now available to all registered users.

 

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.
  • Many other user interface tweaks.

Thank you TreeHouse!

 

Purple and black color theme, with Dutch translation by Gerard

 

Pink and white color theme, with German translation by Martin

 

Green and white color theme, with Italian translation by Luca

 
 
 
 

Have a Tools tip?

July 26, 2012 by HTML-Kit Support
 

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.

 

HTML-Kit Tools update - 20120716

July 20, 2012 by HTML-Kit Support
View 1 more image    
 

HTML-Kit Tools update 20120716 is now available to all registered users.

 

New footer

 
 

Preview while editing

 
 
  • 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.
  • Brand new status bar and document tab area.
  • An icon on the menu bar for quickly switching to the full screen editing mode.
  • Ctrl+W keyboard shortcut for closing documents, in addition to the default shortcut Ctrl+F4.
  • Speed improvements related to scrolling large documents.

Thank you TreeHouse!

 
 
 

This file has a bad reputation?

July 19, 2012 by HTML-Kit Support
 

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).

You may have seen this in action if you've seen a warning like "WS.Reputation.1" (Symantec/Norton Security software), "this file isn't commonly downloaded" (IE SmartScreen Filter), or "this file appears malicious" (Chrome).

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.

As Steven Kelly says in his blog:

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.

A quote from Andreas Löw's blog entry "WS.Reputation.1 or How Symantec ruins independent developers" on 23-Jun-2012:

"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...
 

LESS (not less!) is coming to Tools

June 27, 2012 by HTML-Kit Support
 

This feature was delivered in HTML-Kit Tools update 20120815. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

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!

 

So you want HTML-Kit on Mac?

June 15, 2012 by HTML-Kit Support
 

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.

In short, the goal is to raise $3000.00 USD with small donations starting at $20.

Make a Donation to the Project

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)

Make a Donation to the Project

 
 
 

HTML-Kit Tools update - 20120605

June 14, 2012 by HTML-Kit Support
View 1 more image    
 

HTML-Kit Tools update 20120605 is now available to all registered users.

 

IE and WebKit split preview

 
 

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.
  • QR Code on Extended Preview window makes it easier to link up phones and tablets to HTML-Kit Tools preview.
  • Support for running on Windows 8 desktop. Tested on Release Preview.
  • "Skip optional setup dialogs" option for speeding up setup by using default values for Program Folder, Start Menu Folder, and Additional Tasks.
  • W3C CSS Validation Service helper on "Actions Bar > Tools" tab and "Tools > Extra" menu updated to support CSS3 validation.
  • The old image picker was removed in favor of the new image picker.
 
 
 

QR Code for previewing in devices

June 13, 2012 by HTML-Kit Support
 
 

Fundraising hat on - 25% off registrations

May 10, 2012 by HTML-Kit Support
 

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 :)

http://www.htmlkit.com/register/ (check out the discounts)

 

I'll now put my programming hat back on, keep adding cool features and listening to your feedback.

– Chami

(originally posted on HTML-Kit forum)

 
 
 

HTML-Kit Tools update - 20120416

May 9, 2012 by HTML-Kit Support
 
 

HTML-Kit Tools update 20120416 is now available to all registered users.

 
  • 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.
 
 
 

View colors as you type

May 3, 2012 by HTML-Kit Support
 
 

This feature was delivered in HTML-Kit Tools update 20120416. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

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.

 
 
 

HTML-Kit Tools update - 20120405

April 10, 2012 by HTML-Kit Support
Play Video    
 

HTML-Kit Tools update 20120405 is now available to all registered users.

  • 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.
  • Ability to run in Windows 8 Desktop (Consumer Preview).
 

Here's a quick demo of how selection matching works:

 

HTML-Kit icon on Windows 8 start screen for running HTML-Kit Tools in Windows 8 Desktop:

 
 
 
 

Save time with automatic matching of selected text

April 8, 2012 by HTML-Kit Support
Play Video    
 

This feature was delivered in HTML-Kit Tools update 20120405. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

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."

Check out the video to see how this works.

 
 
 

Running Tools on Windows 8

March 9, 2012 by HTML-Kit Support
 
Play Video    
 

This feature was delivered in HTML-Kit Tools update 20120405. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

 

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.

 
 
 

HTML-Kit 292 Tip of the Day

February 22, 2012 by HTML-Kit Support
 
View 1 more image    
 

Did you know that you can get a tip on how to use a particular feature, plugin or other aspect of HTML-Kit 292, every day?

 

Here's a tip you won't see there: select "Help > Check for Updates" from HTML-Kit 292 main menu to get your daily tip.

 
 
 
 

HTML-Kit Tools update - 20120202

February 7, 2012 by HTML-Kit Support
Play Video    
 

HTML-Kit Tools update 20120202 is now available to all registered users.

  • Alt+Insert keyboard shortcut for quickly inserting tags, wrapping the selected text with a tag, and easily including CLASS and ID attributes.
  • Saving files takes less time, even when file versioning feature is enabled.
  • FTP speed optimizations help with opening and saving remote files faster.
  • ISO-8859-2 character encoding for supporting Central European languages.

Here's a quick demo of Alt+Insert feature:

 
 
 

Alt+Insert for quickly wrapping selected text

February 6, 2012 by HTML-Kit Support
Play Video    
 

This feature was delivered in HTML-Kit Tools update 20120202. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

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:

span.label

Becomes:

<span class="label">|</span>

Want to add more than one class name? Try:

span.label.info

to get:

<span class="label info">|</span>

Can you guess what this would turn in to?

button.xlarge.active tabindex="2"
 
 
 

HTML-Kit Updates mailing list

February 4, 2012 by HTML-Kit Support
 

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.

Google Groups
Subscribe to HTML-Kit Updates
Email:
Visit this group
 
 
 

How to find and replace multi-line text

January 27, 2012 by HTML-Kit Support
 

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:

  1. Open a project from "File > Projects" menu
  2. Inside the project window, select a folder where you'd like to start searching
  3. Right click (the selected folder), and pick "Batch Actions > Find in Files" from the pop-up menu
  4. 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:

  1. Press Ctrl+F
  2. Click "..." next to the "Find what" field
  3. Paste or enter multi-line text, and click OK
  4. 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:

  1. If you haven't already, install Ciaran's excellent cmBatchFind plugin. This adds batch search capability to HTML-Kit 292.
  2. 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:

Multi-line text to find:

When working with the cmBatchFind plugin:

  1. Copy the single-line regular expression you've generated for the find text, and paste it in "Search Expression" field.
  2. Add "r" (without quotes) to "Options" field.
  3. 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:

Multi-line text to replace with:

When working with the cmBatchReplace plugin:

  1. Copy the single-line regular expression you've generated for the find text, and paste it in "Search Expression" field.
  2. Copy the single-line replace text you've generated, and paste it in "Replace With" field.
  3. Add "r" (without quotes) to "Options" field.
  4. Finally, click "Start" to begin batch replace.
 

HTML-Kit newsgroups are moving

January 19, 2012 by HTML-Kit Support
 

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've been using the web-based interface to view HTML-Kit support forums, you can keep reading the forums through the browser as usual.

See you on the forums.

 

HTML-Kit 292 Check-for-Updates notification

January 13, 2012 by HTML-Kit Support
 

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.

Download HTML-Kit 292 with 12-Jan-2012 updates

If you're using HTML-Kit Tools, these updates are already in the recent versions of HTML-Kit Tools.

 

Convert text to HTML with Markdown

January 12, 2012 by HTML-Kit Support
View 2 more images    
 

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.

This feature was delivered in HTML-Kit Tools update 20110721. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

 

HTML Tidy in your browser

January 10, 2012 by HTML-Kit Support
 

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.

 

HTML Tidy, HTML5 and Preview updates for HTML-Kit 292

January 3, 2012 by HTML-Kit Support
 

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.

 

HTML-Kit Tools update - 20111216

December 22, 2011 by HTML-Kit Support
 

HTML-Kit Tools update 20111216 is now available to all registered users.

  • 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.
 

Tidying HTML5

December 20, 2011 by HTML-Kit Support
 
 

This feature was delivered in HTML-Kit Tools update 20111216. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

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.

 

Full screen editing with F11

December 18, 2011 by HTML-Kit Support
 
View 2 more images    
 

This feature was delivered in HTML-Kit Tools update 20111216. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

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:

 
 

Instant contextual search

December 8, 2011 by HTML-Kit Support
 
Play Video    
 

This feature was delivered in HTML-Kit Tools update 20111209. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

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.

Sometimes it's easier to show than tell:

 

 

Image Picker 2.0

October 3, 2011 by HTML-Kit Support
 
View 11 more images    
 

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.

 

Preview in iPad

September 22, 2011 by HTML-Kit Support
 
 

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!

 

Building a Better Image Picker

September 19, 2011 by HTML-Kit Support
 
 

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.

 

Changing of the Splash Screen

September 12, 2011 by HTML-Kit Support
 
 

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.

 

Preview for all

September 7, 2011 by HTML-Kit Support
 
Play Video    
 

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.
 

New icons on Edit Preview tabs

September 2, 2011 by HTML-Kit Support
 
 

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.

 

How to submit Colorizer Styles

September 1, 2011 by HTML-Kit Support
 
 

A question that popped up, since the posting of ? , was how to submit colorizer styles to HTML-Kit Tools plugins page.

So if you've designed a cool colorizer style, or a warm colorizer style depending on your choice of color tones, here's how to share it:

  1. Select "View > Colorizer > Styles > Edit Colorizer Styles" from the main menu.
  2. Select the name of your Colorizer Style from the list.
  3. Change to the "HTML-Kit Plugins > Colorizer Styles" tab, and
  4. Click "Upload Plugin" to submit your Colorizer Style to the plugins page.
 

Copenhagen Nights

August 31, 2011 by HTML-Kit Support
 
View 1 more image    
 

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.

It did not disappoint.

Introducing Copenhagen Nights Style -- a dark color scheme written by Henrik J. Larsen for HTML-Kit Tools syntax highlighter.

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:

  1. Open HTML-Kit Tools and select "Tools > Install Plugins" from the main menu. Or click the plugin icon on the Action Bar.
  2. Browse to "Colorizer Styles" section and select hlCopenhagenNightsStyle.
  3. Click Install hlCopenhagenNightsStyle.
  4. Once installed, open a HTML document and select "View > Colorizer > Styles > Copenhagen Nights Style" to see it in action.