Blogging tips: Including source code in your website

If you're a blogger that want to write source code, maybe you have some problems to include it into your blog due to the tags, escape chars, the highlighting and more problems.

Two common and great solutions are SyntaxHighlighter and Code Prettifier. Both give your source code the syntax highlighting (depending on the selected language), line numbers, a well done layout and a lot of colors.
The only "problem" that I can find with those utils is that both are javascript and css files that you must download and load in the body of your webpage and host in your server (although SyntaxHighligther offers a hosting service). The problem of adding external CSS files to your website is that if you don't have access to the server, such as in Blogger, you maybe will need to do some dirty workarounds like pasting the full CSS into the template (see how to include SyntaxHighlighter to Blogger).

1.   // Source code SyntaxHighlighter like
2. private static long convertMilliSecondsToDaysViaMoreExplanatoryMagicNumbers(final long numberMilliseconds)  
3. {  
4.    // 60 seconds in minute, 60 minutes in hour, 24 hours in day, and  
5.    // one thousand milliseconds in a second  
6.    return numberMilliseconds / (60 * 60 * 24 * 1000);  
7. }  

This is wonderful if you write a lot of lines of code, but what if you need to write only a few number of code lines? What if you don't want an overloaded layout? Does it worth the effort to download the files, host them (there are several files) and copy the entire CSS into your blogger's layout?

HTML gives you the <pre/> and <code/> tags, but them really only escape and change the font. The solution that I've found in devcha is to change the <pre/> style to have a backgrounded piece of code. It doesn't have colored keywords, but it's more readable.

<pre style="background-color:#eeeeee; border-color:rgb(153, 153, 153); border-style:dashed; border-width:1px; margin:0px; overflow:auto; padding:5px; width:95%;">

YOUR CODE GOES HERE

</pre>

Of course, set the <pre/> attributes as you like. Remember, that if you're inserting this in Blogger, you should write it in the HTML edition mode.
Continue reading »

Blogging tips: Subscribe to all comments RSS on Blogger

Blogger gives you the possibility to subscribe to the comments of a post with a single click behind the post.

Blogger link to subscribe to comments

But what about if you want to subscribe to all the comments of your blog instead of a single post? The solution is very simple, you only need to take the RSS XML feeds in this way:

http://BLOG_URL.blogspot.com/feeds/comments/default?orderby=published

Don't forget to replace BLOG_URL with your's Blogger blog! Once you have the RSS, you only have to copy it and add it to your favourite reader. You can also delete the ?orderby=published if you don't want your feed ordered by publish date.

Try to add The Munson's Apps comments RSS to your Reader: subscribe.
Continue reading »

Blogging tips: Open all external links in a new page

I posted some days ago about opening all links in your website in a new tab or window by default (old post here). The problem of that solution is that all internal links are opened in a new tab, even the "home" button. This is so disgusting for the users of your website.

Here there is a solution to open all external links in a new tab or window (if the target is a tab or a window depends on the browser). Include this lines into your website and the job is done:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery('a').each(function() {
    // Let's make external links open in a new window.
    var href = jQuery(this).attr('href');
    
    if (typeof href != 'undefined' && href != "" && (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) && href.indexOf(window.location.hostname) == -1) {
        jQuery(this).attr("target", "_blank");
    }
});
//]]>
</script>

If you are using blogger, you can include this by inserting it before the </body> tag (Dashboard -> Template -> Edit HTML, search the </body> with Ctrl+F and insert it before the tag closes. Remember to save always a backup of the HTML before change it) or inserting in a HTML/Javascript widget element.

With this feature, all links other than adSense and your domain, will open in a new tab (if you're using blogger, all links to other blogger sites won't be affected and will open with the default properties).


Source: Challenges that each developer faces every day
Continue reading »

Chrome extension favicon

Some of you have asked me how to include a favicon in the Chrome Extensions after reading the "how to insert a favicon in blogger".

Chrome Extension MTG Finder favicon

Well, this one is even easier, you only need to put in the chrome manifest file a reference to a 16x16 pixel icon. It doesn't matters if the real image is larger than 16x16 (it can be the same file that you're using in the 128 icon), you only need to insert the following line in the manifest.json file:

<-- start manifest.json -->
{  "name": "MTG Finder",  "version": "1.1.2",  "description": "Displays a popup with the cards found by several mtg websites matching the selected words in the current tab",  "icons": {  "128": "mtg_finder_icon.png",  "48": "mtg_finder_icon.png",  "16": "mtg_finder_icon.png"},
  "options_page": "options.html",  "homepage_url": "http://themunsonsapps.blogspot.com/",  "background_page": "background.html",
<-- more manifest stuff -->
}
<-- end manifest.json -->

Remember that the Chrome Extension will works fine without the bold line, but you won't see the favicon in the pages created by the extension such as the options page.
Continue reading »

Google's April fools day

As you know, april is the humor month. Google brings us two great samples of it: a job position as an autocompleter and a new gmail feature, gmail motion. 

Have a look at the gmail motion demo shown below

Google Motion

Continue reading »

MTG Finder 1.1.0

MTG Finder 1.1.0 includes some new features described bellow:

• Two new websites have been added to the search modes.
• Mtg.ru - This is a great russian website that supports cyrillic charset in the queries. Maybe you want to use this search mode because the popup displayed is smaller than others and is fast and light.
  The popup shows the card image, mana cost, types, rarity, expansion (including expansion card number) and artist.
  Use this search mode only with english or russian card names.
  
  

  

  Mtg.ru search

  
  
• Tapped Out - Tapped Out is a community that has several mtg tools such as a draft simulator, or a deck database. When you search in MTG Finder through this website, you will find the card image, card data and the more interesting feature: stats of the decks playing this card.
  Tapped out search mode allows only card names in english.
  
  

  

  Tapped Out search

  
  
• Context menu search is available. From this version, when you select words in chrome and do right click, a new MTG Finder context menu will be displayed.

  

  MTG Finder Context menu

  
  In this new menu, you will be able to choose one of the existing search modes to search the card in a new window or tab (the Chrome popup seems to be available only clicking it...).
  You can choose if the search is done in a new window or tab in the new option of the options menu. Warning: We've noticed that sometimes, when you use this new feature, the window/tab opens, but it shows only the footer. It's an error that we're trying to fix. If you reopen the window/tab with the context menu, it should display normally the second time.
  

  

  Options page with Tab/window choice

• A problem with non utf-8 charset has been fixed in the magiccards.info search. Before, when you searched for a selected word in a language with non-utf-8 (such as russian, japanese, chinese or korean), it used to redirect you to a "card not found" page. Now this has been fixed and you can perform searches of russian, japanese, chinese or korean card names with magiccards.info search.

You can download MTG Finder in the Chrome Webstore Site, and remember, if you liked it, score it with five stars!! :-)
Continue reading »