Archive

Posts Tagged ‘text’

HTML5 speech input

July 12th, 2013 No comments

Adding speech input to your webapp is much easier than it might first seem.
This is part of the proposed HTML5 enhancements to FORMS and is already implmented in some browsers.

Google Chrome (WebKit 534.24) added this in version 11 in April 2011.

XHTML compatible example:
<input type="text" x-webkit-speech="x-webkit-speech" speech="speech" value="" />

NOTE:
In this example, ‘x-webkit-speech’ is the proprietary attribute used by Google Chrome (WebKit). ‘speech’ is the expected HTML5 attribute when it is finalized.

REFERENCES:

Dynamic HTML style tag with JavaScript

December 5th, 2011 No comments

I recently got into some heavy refactoring of legacy code and in an effort to “fix” some JavaScript that was directly manipulating ‘style’ attributes on a DOM element and thus introducing maintenance and specificity issues I found that it would be “easier” to add a CSS class that I would write dynamically… leading to many headaches along the way and this bit of knowledge.

“For MSIE, you cannot simply write a ‘textNode’ into the DOM for HTML STYLE tags, you must use ‘cssText'”


function createClass(cls,txt){
var obj = document.createElement('style');
if(obj){
var head = document.getElementsByTagName('head')[0];
if(head){
obj.setAttribute('type','text/css');
obj.setAttribute('media','all');
var val = '.' + cls + '{' + txt + '}';
var nod = document.createTextNode(val);
if(obj.styleSheet){// MSIE
obj.styleSheet.cssText = nod.nodeValue;
} else {
obj.appendChild(nod);
}
head.appendChild(obj);
}
}

USAGE:

createClass('noshow','display:none;');

REFERENCES:

HTML5 INPUT placeholder text

November 14th, 2011 No comments

One of the great improvements for forms in HTML5 is the ability to display placeholder text in your INPUT fields. Traditionally, this has required developers to add a variety of JavaScript methods to dynamically update the field, now (for browsers that support it) you can use a simple attribute on your tag elements.

OLD:
<input type="text" value="Search" onfocus="if(this.value == 'Search'){this.value = '';}" onblur="if(this.value == ''){this.value = 'Search';}" />

NEW:
<input type="text" value="" placeholder="Search" />

REFERENCES:

Colored terminal window text on Ubuntu (Linux)

November 2nd, 2011 No comments

After a clean install, or simply access to a new machine, I often find it helpful to enable colored prompts in the terminal/command line environment.
For standard Ubuntu / Debian / Linux environments, this only requires you to remove a comment from a single line in a config file.

In /home/%USERID%/.bashrc you will find the following text, the last line simply needs to have the hash removed:

# uncomment for a colored prompt, if the terminal has the capability; turned
# off by default to not distract the user: the focus in a terminal window
# should be on the output of commands, not on the prompt
#force_color_prompt=yes

Open vi/vim or your editor of choice and remove it and you are done!

NOTE: If you are using Nautilus, you will not see this file as it is hidden, choose “View”, “Show Hidden Files” (CTRL-H) and it should appear.

Open Source Text Editors

August 8th, 2007 No comments

As an old UNIX developer, I spent a significant portion of my work experience using VI, as my development environment became more focused on Windows, I used Homesite for developing text formatted documents. I’ve found that the current offerings from Eclipse and other IDE’s are notoriously bad at displaying the source of many document types, particularly JSP, HTML, XML, JAVA, JS and CSS files; where you often want to see exactly how a document is structured. Additional spaces, tabs and carriage returns can cause display formatting issues and wasted bandwidth in many cases.

Many of my peers are fans of TextPad, but I’ve found Notepad++ to be quite up to the task:

  • it is available for Windows and LINUX
  • supports auto-formatting of many text file types
  • can ‘replace’ the default Source-HTML viewer in MSIE.

http://notepad-plus.sourceforge.net

Happy coding!

Categories: Work Tags: , , , , , , , ,