How to dynamically inspect and manipulate the content of your loaded page inside chrome browser

The next generation browsers, like Google Chrome, can offer an powerful feature (Chrome DevTools) that allows you to inspect, debug and manipulate any web page element that you browse.

Demonstration and results description

• Open any web page in your browser
• Open the Chrome DevTools console tab: Ctrl+Shift+J 
• In the console type the following code and press Enter

document.body.innerHTML="this is now your new page"
"this is now your new page"

• Your loaded page within the browser window should be replaced now with our custom string
• By running different JavaScript code you can change the behavior and content of your page

Now to start exploring this all what you need to know is basic JavaScript knowledge and some understanding of the HTML standard (a good reference can be found here HTML - Living Standard).

References

http://www.whatwg.org/specs/web-apps/current-work/multipage/
https://developers.google.com/chrome-developer-tools/
http://www.w3schools.com/js/js_htmldom_navigation.asp

Beautiful code formatter for JavaScript in Sublime

I needed recently to work with some JavaScript code to understand how bookmarklets work in Google Chrome. Unfortunately the js code was often not well formatted and difficult to read.

Problem

How to automatically reformat JavaScript code so it looks beautiful and is easy to read.

Solution

I recommend this online site if you don't need to have this functionality in your editor of choice: http://jsbeautifier.org/. To enable beautiful code formatting in Sublime you can:

• Install the CodeFormatter plugin in Sublime https://sublime.wbond.net/packages/CodeFormatter
• The plugin requires node.js that can be downloaded from here http://nodejs.org/#download
• The default node.js installation doesn't provide the js-beautify module so we need to install this with the help of npm (details instructions can be found here https://npmjs.org/package/js-beautify)

Testing

To test that the node.js and the necessary plugin is installed correctly you can run the node virtual machine and try to import the module:

 
$ node
> require("js-beautify")
{ [Function]
  js: [Function: js_beautify],
  css: [Function: css_beautify],
  html: [Function],
  js_beautify: [Function: js_beautify],
  css_beautify: [Function: css_beautify],
  html_beautify: [Function] }
>

To test that the plugin is installed successfully in in sublime you can:

• check sublime tree directory

 
 ... Sublime2\Data\Packages\CodeFormatter\
 

To trigger the formatting:

• Menu tools -> Command Palette (Cmd+Shift+P or Ctrl+Shift+P) and type `Format`.
• The default keyboard shortcat is  ["ctrl+alt+f"] or 
• If you want to run the command from the console

 
 view.run_command("code_formatter")
 

References

https://sublime.wbond.net/packages/CodeFormatter
http://nodejs.org/
https://npmjs.org/package/js-beautify
http://jsbeautifier.org/

For further info about node.js and the JavaScript virtual machine functionality

http://www.nodebeginner.org/#hello-world
http://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js

How to highlight source text on your blog

There are many time situation when you would like to publish a piece of code that should have a special formatting for the viewer.

This blog describe one of the possible solution base on the javascript library: SyntaxHighlighter

To integrate it with your blog follow the description there:

Adding a Syntax Highlighter to your Blogger blog

The list of brushes (javascript scripts) that you have to copy to your blog design template depends on your needs. If you want to use these 2 like 'plain' and 'bash' brushes you have to extend the list.

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>

<script language='javascript'>

The list of all brushes can be found at Bundled Brushes.

To convert the 'raw html' into the 'escaped' html code you can use this convert tool .

A basic example use in your blog post can look like this:

<pre class="brush:text; highlight: [1];">
<h2>This is an example.</h2>
</pre>