To manipulate HTMLCollections successfully, one must be able to correctly identify and select the kind of object that one is working with. Depending on the command used on an HTMLCollection a DOM element or jQuery object may be returned. The kind of commands that can be used on such returned elements or objects depends on the nature of that element or object. jQuery methods can only be used on jQuery objects not DOM elements.
Select and Create HTMLCollection
For example to select and create an HTMLCollection from all paragraph elements in an HTML document:
JavaScript
document.getElementsByTagName("p")
jQuery
$('p')
Access HTMLCollection and Get Item as DOM Element
To return the first element (in the above case paragraph) in an HTMLCollection as a DOM element use one of the following:
JavaScript
document.getElementsByTagName("p")[0]
document.getElementsByTagName("p").item(0)
jQuery
$('p')[0]
$('p').get(0)
Note the above jQuery commands return the first element as a DOM element. DOM elements cannot be modified with jQuery methods. For jQuery methods to work they need to operate on jQuery objects. So something such as $('p')[0].text() will not return the expected result. Use $('p')[0].textContent instead.
Retrieve Item from HTMLCollections as jQuery Object
To return the first element as a jQuery object use one of the following:
$('p').eq(0)
$('p:eq(0)')
Since it returns a jQuery object the command $('p').eq(0).text() should work.
Resources
Wednesday, May 27, 2015
Thursday, May 21, 2015
Pangrams for Faster Typing
Typing Test Pangrams
A pangram is a phrase or sentence that contains all 26 letters of the alphabet.
"The quick brown fox jumps over the lazy dog" is probably the best known pangram. It is commonly used as an example in typing lessons to get one used to touch typing. But there are other pangrams one could also practice typing out. Using a variety of pangrams may efficiently help increase muscle memory with varied letter combinations and patterns. Therefore typing pangrams is an effective way to improve touch typing speed.
Here are a few pangrams to use for typing practice:
Five jumping wizards hex bolty quick.
Pack my box with five dozen liquor jugs.
The jay, pig, fox, zebra and my wolves quack!
A wizard’s job is to vex chumps quickly in fog.
Amazingly few discotheques provide jukeboxes.
Watch “Jeopardy!”, Alex Trebek’s fun TV quiz game.
While making deep excavations we found quaint bronze jewelry.
A quart jar of oil mixed with zinc oxide makes a very bright paint.
The job requires extra pluck and zeal from every young wage earner.
The jukebox music puzzled a gentle visitor from a quaint valley town.
The public was amazed to view the quickness and dexterity of the juggler.
Pangram Typing Tips
Make sure you are in a comfortable position.
First learn them one at a time getting comfortable typing each one out over and over on its own then start adding and alternating the ones you have mastered in combination.
Practice typing for accuracy first then start typing with a view to accelerating speed.
Learn to tap the keys lightly and string common letter combinations together.
Practice typing drills with these pangrams for a week or two and see your touch typing speed improve!
A pangram is a phrase or sentence that contains all 26 letters of the alphabet.
"The quick brown fox jumps over the lazy dog" is probably the best known pangram. It is commonly used as an example in typing lessons to get one used to touch typing. But there are other pangrams one could also practice typing out. Using a variety of pangrams may efficiently help increase muscle memory with varied letter combinations and patterns. Therefore typing pangrams is an effective way to improve touch typing speed.
Here are a few pangrams to use for typing practice:
Five jumping wizards hex bolty quick.
Pack my box with five dozen liquor jugs.
The jay, pig, fox, zebra and my wolves quack!
A wizard’s job is to vex chumps quickly in fog.
Amazingly few discotheques provide jukeboxes.
Watch “Jeopardy!”, Alex Trebek’s fun TV quiz game.
While making deep excavations we found quaint bronze jewelry.
A quart jar of oil mixed with zinc oxide makes a very bright paint.
The job requires extra pluck and zeal from every young wage earner.
The jukebox music puzzled a gentle visitor from a quaint valley town.
The public was amazed to view the quickness and dexterity of the juggler.
Pangram Typing Tips
Make sure you are in a comfortable position.
First learn them one at a time getting comfortable typing each one out over and over on its own then start adding and alternating the ones you have mastered in combination.
Practice typing for accuracy first then start typing with a view to accelerating speed.
Learn to tap the keys lightly and string common letter combinations together.
Practice typing drills with these pangrams for a week or two and see your touch typing speed improve!
Tuesday, May 19, 2015
Non-Breaking Space Keyboard Shortcut
Non-Breaking Space HotKey
To insert a non-breaking space also called a hard space or fixed space:
In Microsoft Office or LibreOffice type
CTRL + SHIFT + SPACE
In Windows and Notepad
Hold ALT then type 0160
In HTML use
or  
To insert a non-breaking space also called a hard space or fixed space:
In Microsoft Office or LibreOffice type
CTRL + SHIFT + SPACE
In Windows and Notepad
Hold ALT then type 0160
In HTML use
or  
Sunday, May 10, 2015
Customize Sublime Text 3 Context Menu in Windows 7
Edit Context Menu in Sublime Text 3
To change the right-click context menu in Sublime Text 3 and add extra commands one will need to create Context.sublime-menu file with the following general format similar to JSON:
[
{ "caption": "-", "id": "separator" },
{ "command": "new", "caption": "New" },
{ "command": "open", "caption": "Open" },
{ "caption": "-" }
]
Example: Add the Use Selection for Find and Use Selection for Replace to the Right-click Context Menu
To determine the commands associated with the Use Selection for Find and Use Selection for Replace instructions, first find the hotkeys for the Use Selection for Find and Use Selection for Replace instructions. In the top menubar under Find one sees the hotkeys for Use Selection for Find (Ctrl+E) and Use Selection for Replace (Ctrl+Shift+E).
Open the Default(Windows).sublime-keymap file (Preferences - Key Bindings - Default) and search for Ctrl+E and Ctrl+Shift+E to find associated commands.
One will find that the commands associated with Ctrl+E (Use Selection for Find) and Ctrl+Shift+E (Use Selection for Replace) are "slurp_find_string" and "slurp_replace_string".
Once the commands are known create a file called Context.sublime-menu in Sublime Text 3's Data\Packages\User directory containing the following:
[
{ "caption": "-" },
{ "command": "slurp_find_string", "caption": "Use Selection for Find" },
{ "command": "slurp_replace_string", "caption": "Use Selection for Replace" },
{ "caption": "-", "id": "end" }
]
Save the file. Opening the right-click context menu should now show the options Use Selection for Find and Use Selection for Replace
To change the right-click context menu in Sublime Text 3 and add extra commands one will need to create Context.sublime-menu file with the following general format similar to JSON:
[
{ "caption": "-", "id": "separator" },
{ "command": "new", "caption": "New" },
{ "command": "open", "caption": "Open" },
{ "caption": "-" }
]
Example: Add the Use Selection for Find and Use Selection for Replace to the Right-click Context Menu
To determine the commands associated with the Use Selection for Find and Use Selection for Replace instructions, first find the hotkeys for the Use Selection for Find and Use Selection for Replace instructions. In the top menubar under Find one sees the hotkeys for Use Selection for Find (Ctrl+E) and Use Selection for Replace (Ctrl+Shift+E).
Open the Default(Windows).sublime-keymap file (Preferences - Key Bindings - Default) and search for Ctrl+E and Ctrl+Shift+E to find associated commands.
One will find that the commands associated with Ctrl+E (Use Selection for Find) and Ctrl+Shift+E (Use Selection for Replace) are "slurp_find_string" and "slurp_replace_string".
Once the commands are known create a file called Context.sublime-menu in Sublime Text 3's Data\Packages\User directory containing the following:
[
{ "caption": "-" },
{ "command": "slurp_find_string", "caption": "Use Selection for Find" },
{ "command": "slurp_replace_string", "caption": "Use Selection for Replace" },
{ "caption": "-", "id": "end" }
]
Save the file. Opening the right-click context menu should now show the options Use Selection for Find and Use Selection for Replace
Install SublimeLinter in Sublime Text 3 in Windows 7
SublimeLinter is a framework plugin for Sublime Text that allows for the use of various linters to find errors in code. This is why SublimeLinter is a very handy plugin to install despite a somewhat convoluted installation process.
To use recent versions of SublimeLinter one will need to install SublimeLinter and the SublimeLinter interface add-ons for the specific linters you wish to use, preferably through Package Control, and also install or have on hand the linters themselves.
For example to check HTML in Sublime Text one may wish to install HTML Tidy. To do so download through Package Control or through their website and install/extract the following:
1. SublimeLinter
2. SublimeLinter-HTML-Tidy
3. HTML Tidy
Adding Linter Path to SublimeLinter in Sublime Text 3 in Windows 7
To make sure SublimeLinter can access HTML Tidy, the location path to tidy.exe needs to be added to the SublimeLinter.sublime-settings file. In Sublime Text right-click on the screen to bring up the right-click context menu and then select SublimeLinter - Open User Settings to open the SublimeLinter.sublime-settings file. Find the portion that looks like the following:
"paths": {
"linux": [],
"osx": [],
"windows": []
},
If using Windows, insert the location of the HTML Tidy folder. For example if tidy.exe and its accompanying files were extracted and then moved to a folder called HTML Tidy in C:\Program Files one would change alter the above to look like
"paths": {
"linux": [],
"osx": [],
"windows": [
"C:\\Program Files\\HTML Tidy"
]
},
Notice the double backslashes. The extra slashes are used for coding escape. Save the file then exit Sublime Text. Restart. SublimeLinter should be working. Try it out by right-clicking to bring up the right-click context menu access to SublimeLinter. Verify it is working by typing out some incomplete code and running SublimeLinter. It should display the mistakes.
Links:
To use recent versions of SublimeLinter one will need to install SublimeLinter and the SublimeLinter interface add-ons for the specific linters you wish to use, preferably through Package Control, and also install or have on hand the linters themselves.
For example to check HTML in Sublime Text one may wish to install HTML Tidy. To do so download through Package Control or through their website and install/extract the following:
1. SublimeLinter
2. SublimeLinter-HTML-Tidy
3. HTML Tidy
Adding Linter Path to SublimeLinter in Sublime Text 3 in Windows 7
To make sure SublimeLinter can access HTML Tidy, the location path to tidy.exe needs to be added to the SublimeLinter.sublime-settings file. In Sublime Text right-click on the screen to bring up the right-click context menu and then select SublimeLinter - Open User Settings to open the SublimeLinter.sublime-settings file. Find the portion that looks like the following:
"paths": {
"linux": [],
"osx": [],
"windows": []
},
If using Windows, insert the location of the HTML Tidy folder. For example if tidy.exe and its accompanying files were extracted and then moved to a folder called HTML Tidy in C:\Program Files one would change alter the above to look like
"paths": {
"linux": [],
"osx": [],
"windows": [
"C:\\Program Files\\HTML Tidy"
]
},
Notice the double backslashes. The extra slashes are used for coding escape. Save the file then exit Sublime Text. Restart. SublimeLinter should be working. Try it out by right-clicking to bring up the right-click context menu access to SublimeLinter. Verify it is working by typing out some incomplete code and running SublimeLinter. It should display the mistakes.
Links:
Notepad++ Sublime Text Differences
Notepad++ vs. Sublime Text
Notepad ++ and Sublime Text are two popular text editors for coding. Both are feature-rich text editor programs . While not all features are available in both some of the features missing in one and found in the other in the default installed setup can be activated via preferences or added on with plugins but the implementation may differ in quality. After a short time evaluating these programs here is an overview of how they compare.
Notepad++ Pros
Discussion
The differences between Notepad++ and Sublime Text are smaller than I anticipated but those small differences can be significant in terms of efficiency.
In general Sublime Text comes across as more polished. Its find and replace feature is more powerful. Notepad++'s find and replace is frustratingly close to being good enough as an alternative but falls short and that short gap in features and ease of use creates a chasm in terms of productivity.
The ability to use multiple cursors is touted as an advantage for Sublime Text but Notepad++ also has a less developed but serviceable version of the feature although it is not activated by default.
The third-party validation tools can be a little complicated to setup for Sublime Text but when running are easier to work with than Notepad++'s.
Notepad ++ and Sublime Text are two popular text editors for coding. Both are feature-rich text editor programs . While not all features are available in both some of the features missing in one and found in the other in the default installed setup can be activated via preferences or added on with plugins but the implementation may differ in quality. After a short time evaluating these programs here is an overview of how they compare.
Notepad++ Pros
- Free
- Folding based on tags
- Matching tag highlighting
- Replaces inside multiple files without opening them
- Close More command
- Multiple line find and replace inside multiple files cannot be done without adding \r\n per line manually
- Single line text area entry for find and replace
- Find and replace multiple lines in multiple files
- Multiple selections with find feature
- Works similarly on different operating systems
- Find and replace in multiple files preview
- Intuitive auto-complete
- Opens all files during replace in multiple files operation
Discussion
The differences between Notepad++ and Sublime Text are smaller than I anticipated but those small differences can be significant in terms of efficiency.
In general Sublime Text comes across as more polished. Its find and replace feature is more powerful. Notepad++'s find and replace is frustratingly close to being good enough as an alternative but falls short and that short gap in features and ease of use creates a chasm in terms of productivity.
The ability to use multiple cursors is touted as an advantage for Sublime Text but Notepad++ also has a less developed but serviceable version of the feature although it is not activated by default.
The third-party validation tools can be a little complicated to setup for Sublime Text but when running are easier to work with than Notepad++'s.
Subscribe to:
Posts (Atom)