Ruby Static Blog Engine

A static site is an interesting idea. Fairly hassle free, handles high-traffic well, and a much lower chance of getting hacked. However, they’re a nightmare to manage if you want any sort of consistent look. But maybe not.

Jekyll (Github) is a Ruby project for generating and maintaining a static site or blog.

Octopress gives you templates and some fancy plugins that make the engine quite a bit more friendlier.  Now all of a sudden, a static blog is looking very doable.

Web Standards Curriculum

The Opera Web Standards Curriculum has been adopted as the official W3C Web Standards Curriculum. Whether you’re a teacher, student, or just filling holes in your knowledge-base, this free content has a lot of good information there.

What follows is a list of all the articles within the web standards curriculum, which will give you an essential grounding in HTML5, CSS, JavaScript, accessibility, and the other topics you need to be a modern web developer/designer. Reading them in order makes the most sense, but they are written to work individually, so you can dip in and out as it suits you, if you need to hone individual skills. Web Standards Curriculum

JavaScript Reserved Words

  • abstract
  • boolean
  • break
  • byte
  • case
  • catch
  • char
  • class
  • const
  • continue
  • debugger
  • default
  • delete
  • do
  • double
  • else
  • enum
  • export
  • extends
  • false
  • final
  • finally
  • float
  • for
  • function
  • goto
  • if
  • implements
  • import
  • in
  • instanceof
  • int
  • interface
  • long
  • native
  • new
  • null
  • package
  • private
  • protected
  • public
  • return
  • short
  • static
  • super
  • switch
  • synchronized
  • this
  • throw
  • throws
  • transient
  • true
  • try
  • typeof
  • var
  • volatile
  • void
  • while
  • with

Building Sprites for Easy CSS

We’re building an image sprite for 16x16 icons. Adjust numbers accordingly if using different-sized icons.

I’ve used sprites for a while now, though generally, they’re a pain to setup — especially the CSS positioning. Finally I wised up and figured out a perfect way to align the icons to easily reuse the same CSS positioning on all projects.

YouTube Embed With Start Time in ExpressionEngine

One of the ExpressionEngine projects I was working on needed an easy way to embed YouTube videos, and wanted a way to start the video at a specific time. The customer wanted it to be simple and didn’t want to fiddle about with code.

I built the template so the customer only needed to give me two pieces of information: Video URL (not embed code) and Video Start Time (in seconds, if not 0:00).

The link URL and the Embed URL aren’t quite the same, but they’re pretty close. Look at the difference:

Link URL: http://www.youtube.com/watch?v=HaQvBbzslJE Embed URL: http://www.youtube.com/v/HaQvBbzslJE&hl=en_US&fs=1&

Using the plugin Low Replace, we can parse through the Link URL to change watch?v= to v/. If there is a start time, then you can append it on the URL with start=####. Remember, the start time must be in seconds when embedding a video.

Below is the ExpressionEngine template code:

1
2
3
{if blog_video}
<object width="630" height="379" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="{exp:low_replace find=" /><param name="v" value="" /><param name="blog_video" value="" /><param name="exp:low_replace" value="" /><param name="038" value="" /><param name="hl" value="en_US&amp;fs=1&amp;{if" /><param name="blog_video_starttime" value="" /><param name="start" value="{blog_video_starttime}{/if}&quot;" /><param name="allowfullscreen" value="true" /><embed width="630" height="379" type="application/x-shockwave-flash" src="{exp:low_replace find=" allowFullScreen="true" allowscriptaccess="always" v="" blog_video="" exp:low_replace="" 038="" hl="en_US&amp;fs=1&amp;{if" blog_video_starttime="" start="{blog_video_starttime}{/if}&quot;" allowfullscreen="true" /></object>
{/if}

Yay for happy customers.

JavaScript Interview Questions

So I’ve been learnin’ me some mo’ JavaScript. I know the basics, and I know jQuery fairly well, but jQuery != JavaScript. I’m reading Douglas Crockford’s JavaScript: The Good Parts while listening to his Yahoo! videos on pretty-much the same content.

I just ran across a few posts on JavaScript interview questions; these are a good reminder of key parts of JS to pay attention to:

Open Source Book: Book of Speed

Stoyan Stefanov (@stoyanstefanov) is known as one of the ‘sultans of speed’. In December 2009 he wrote a 24-day series on page speed which turned into a book offer.  He’s now writing that book in true open-sourced fashion.

Stoyan’s work-in-progress book is available to read at Book of Speed. If you have anything to add or even edits, you can fork the project on Github and submit a pull request with your changes.

Note: Take a look at the Github project just to see how it’s structured. Chapter text is in the /src folder with a build script to generate the TOC. This could be made into a very nice book starter project for anyone.

Disable Pay-Wall

My wife is originally from Ohio and still likes to keep up with the happenings in her town. Recently, the Canton Repository and Massillon Independent erected a pay-wall similar to the New York Times. You get 20 free articles, then you must be a member for any additional articles. The problem is when you follow a link into the newspaper website, you get a large signup box that covers the screen, and closing it redirects you back to the homepage leaving you to hunt down your article again.

Below is a quick fix to stop that pesky box from coming up. Just set this as your user stylesheet in your favorite browser.

1
2
#fancybox-tmp, #fancybox-loading, #fancybox-overlay, #fancybox-wrap
{display:none !important;}