GuruStop.NET

Hey folks, I just removed the default WordPress search widget and a new one using the HTML 5 input search type, a bunch of CSS 3 (and fall back for older browsers like older versions of IE), and a little bit of JavaScript. It’s still based on the same background image used in this blog theme though.

Since some of you might be interested, here is the code that I use to implement it, instead of you trying to hack it with different browser developer tools!
Not the exact code though, but a version that is heavily commented for your convenience

You can skim quick over the the simple HTML, spend some time with the CSS bits (most work is done here), and have a look at the bonus JavaScript, see the result without the context of the blog itself, and if you feel excited, click the "+" icon on the right to start editing it yourself to come with better implementation or fix a bug.!

If you like this post, you may want to share the post or comment below encouraging me to write more similar posts, maybe also check what offers are available by bog partners, or, follow me on twitter (@Meligy).

Recently I started working on some interesting HTML 5, CSS 3 and JavaScript bits (involving jQuery and jQuery UI). I have worked with all of them before, but not as extensively. Most of my work is some reusable stuff that I can develop generic demos out of (from scratch, unrelated to the custom stuff required here), however, the size of each made me always lazy to take the opportunity to share some nice stuff with you via GuruStop.

I decided to encourage myself to stop laziness by sharing a very small part, then hopefully follow with the real interesting stuff.  Today we look at a simple String.Format() function, similar to the one available in .NET / C#, meaning it uses {0}, {1}, etc… as placeholders.

Look at the code, click the “HTML” tab for the sample HTML used for this one(just a div with an ID), and “Result” for trying it out yourself.  You can also click the “+” button at the right and edit it if you like to!

Note that this one is intended for simple scenarios only. If you need complex / flexible templates, use some templates library like JsRender or knouckOutJS templates.

While I was doing some timezone stuff (that will likely have its own post), I came across some gotachas browser around working with date and time in JavaScript (blame the browsers, not JS itself):

1. There are very nice ISO standards to model date and time, their support is flaky, especially in, yes, IE. So, if you want to use them, you need a library that parses your standard and deal with it nicely (yes, there are some).
2. If you try to format dates with dd/mm/yyy instead of mm/dd/yyyy (the American standard), browsers will will play messy, Some methods will simply invert the values (They will think the day 30 is June, maybe as 30-12-12=6, and some methods may fail to parse getting you NaNs and "Invalid Date"s getting values of fields and trying to convert to string). They’re not broken in consistent way I think.
   The important note is that setting language preferences in browsers to "not" include English (US) does not change this.
3. The "toString()" implementation of date objects in browsers is not exactly the same. For example, IE might try saying "UTC+1100 2010" at the end for EAST with daylight saving on, while Chrome will say "AUS Eastern Daylight Time".

Well, let me just share this email with you… *

This is a PowerPoint Presentation (and extraction of the contents) I made as per a couple of friends’ request (@EmadAshi and @AmrEldib) to show how OAuth works along with Twitter and how easy it is to cache OAuth credentials.

As I was doing related work for TweetToEmail. I felt a PowerPoint presentation will be even better than a blog post for this one, but here you get the two.

The Presentation

The Contents

Application Registration

• A Twitter user creates a Twitter Application
  • If the application is web based, it needs to provide a URL. “Localhost” is not accepted as a domain for this URL
• A Twitter Application gets two pieces of information
• Consumer Key
• Consumer Secret
• A Twitter Application will use these in all coming requests.

Initializing The Process

• User comes to the application and it decides to authenticate against Twitter
• Application makes a request using Consumer Key and Secret to obtain “Oauth Request Token”, which consists of two parts
  • Token
  • Token Secret
• Application makes authentication URL including the “Oauth Request Token” parameter, and optionally a “Call-back URL” (if different than default URL in first step)