Ideas for improving GitHub's Gist

Lets list and acknowledge some of the work that has already started happening around GitHub's Gist when it comes to using it for embedding code snippets in blogs:

• Loading the Gist through an iFrame to shorten page load times.
  • A nice side effect is the ability to get around any non-working Blogger templates like the Dynamic Template that was recently released but doesn't work with an embedded Gist (remark date: Nov. 14th 2011).

New Ideas:

1. Tell the script to provide line numbers.
   • I haven't experimented with it yet, but this looks like a promising solution: http://got-ravings.blogspot.com/2010/06/line-numbers-in-embedded-gists.html
   • And another one: http://www.whyhat.com/2012/01/line-numbers-on-embedded-gists/
2. Allow a line-start/offset and line-end/length attribute for the embedded script so that users can have one large file and then simply talk about the chunks in sections. This will remove the need to break up the original large Gist into multiple individual Gists.
3. Tell the script the array or range of line numbers to highlight.
   • The following Gist will look for a div with the id of "foo" and place the script's formatted content in there. It is an actual example of the code running on this blog page to perform basic highlighting:

Until all this happens, Syntax Highlighter will remain # 1!

Embedding Videos in Joomla 1.7

1. Log in as the administrator
2. Hover over the Extensions drop-down and click on Extension Manager
3. In the Install from URL section, paste the URL pointing to a zip file for the AllVideos Joomla plugin.
   
   • http://joomlaworks.googlecode.com/files/plg_jw_allvideos-v4.0_j1.5-1.7.zip
4. Once you see a notification on screen for a successful installation, click on the Manage tab
5. Locate the row that lists the AllVideos plugin and click on the red status icon in order to toggle it to enabled.
6. Hover over the Extensions drop-down and click on Plugin Manager
7. Locate the row that lists the AllVideos plugin and click on the title of the plugin itself.
8. Configure the plugin based on your needs.

Adding SWFs to your blogger posts

1) Find a location to host your swf files.
For example, you can log into Google Sites and host your content by uploading the swf files as attachments:
http://sites.google.com/site/yourUsernameGoesHere/system/app/pages/admin/attachments

2) Make sure to upload the following swf files in addition to your main swf file.

2.1) spark_4.0.0.14159.swf
2.2) textLayout_1.0.0.595.swf
2.3) rpc_4.0.0.14159.swf
2.4) sparkskins_4.0.0.14159.swf
2.5) framework_4.0.0.14159.swf
2.6) playerProductInstall.swf
2.7) osmf_flex.4.0.0.13495.swf

These are dependencies without which you will face various errors when trying to run your main swf file.

a) Error: Error #2030: End of file was encountered.
at flash.net::URLStream/readBytes()
at flash.net::URLLoader/onComplete()

b) Error #2048: Security sandbox violation: http://...-s-sites.googlegroups.com/site/usernam/blah.swf?attachauth=...&attredirects=0 cannot load data from http://sites.google.com/site/username/some_missing_dependency.swf

3) Afterwards, get the link to your swf and to embed it in your blog as outlined here.

4) After embedding the SWFs in your blog, you may feel that your posts load significantly slower that they did before. You can remedy this situation and speed-up the load times if you place a div tag around your embedded tags and have the default mode set to be collapsed. This will give your readers the option of expanding the content and causing the flash player to load the swf files on demand.

Here's an example of all the code that I had to put into this post.

<style type="text/css">
  .commenthidden {display:none}
  .commentshown {display:inline}
</style>
<script type="text/Javascript">
  function togglecomments (postid)
  {
    var whichpost = document.getElementById(postid);
    if (whichpost.className=="commentshown")
    {
      whichpost.className="commenthidden";
    }
    else
    {
      whichpost.className="commentshown";
    }
  }
</script>

<a href="javascript:togglecomments('1')">Expand/Collapse Example</a>
<div class="commenthidden" id="1">

<embed src="http://sites.google.com/site/pulkitsinghal/Bounds1.swf" quality="high" bgcolor="#869ca7" width="650" height="100" name="Main" align="middle" play="true" loop="false" quality="high" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>

</div>

To get the following to work as I described above: Expand/Collapse Example