Phil Haack’s Mini Math Challenge

Today Phil Haack posted a mini math challenge on twitter…

24a3e96dbc652aa721bed99dcea38b6d

This seemed like a good opportunity to launch js.Fiddle and hack out some code…

 

The answer... is 2520 ;)

Read More »

ASCII Font URL Encryption

I was looking at some source code the other day and found some 3D ASCII text.

It brought back memories of using UNIX and PINE for e-mail during my college days.

I decided to go on a hunt for the 3D ASCII font and found this site… http://patorjk.com/software/taag/

Once you find the font that you like…

then you can create a link to share with others, but I noticed something strange in the URL

http://patorjk.com/textart/msg1.php?font=Larry%203D.flf&hs=true&bg=%23FFFFFF&fc=%23000000&align=left&txt=Ryvwnu

Do you notice anything strange about the txt URL parameter? “Ryvwnu”… what is that? Well, it stands for “Elijah”

I put on my cracker hat and found that it was a simple character substitution algorithm. Take the letter you want “E” and add 13 characters to it “R”.

How is that for some advanced encryption ;)

Read More »

Book Review: 51 Tips, Tricks, and Recipes with jQuery & ASP.NET Controls

842d59697bf6bdc2afa9cc8a899e8e52I recently finished reading the 51 Tips, Tricks, and Recipes with jQuery & ASP.NET Controls eBook by Suprotim Agarwal. The eBook is $14.99 and it comes with a 14 day 100% money back guarantee. It can be ordered from the DotNetCurry website.

This eBook reminded me a lot of Cody Lindley’s jQuery Enlightenment in that it split it’s eBook into small bit size installments (known as recipes) that can be consumed either sequentially or on a individual basis. The recipes are organized into situations or problems that you might want to solve using jQuery. This eBook differs from jQuery Enlightenment in that it focuses on the interaction with ASP.NET WebForms, which has a unique rendering of its server controls.

Most of my web development history has been doing ASP.NET WebForms (and more recently ASP.NET MVC) so, I enjoyed reading this eBook. I could understand the situations, problems, and pain points that the eBook addressed. It was nice to see how jQuery can resolve these issues in an unobtrusive and cross-browser way while only requiring a small amount of code.

Each recipe is formatted in the same way…

  • A challenge that explains the situation, problem, or pain point being addressed
  • The solution displayed in the form of HTML and jQuery
  • An explanation of the code broken up in paragraphs, code snippets, and screen shots
  • A link to a live demonstration
  • A list of supported browsers for the above recipe
  • Useful links that are appropriate to further explain features from the code.

I would have written some of the code differently and I did find some performance concerns, but nothing major and when push comes to push and shove many micro-optimizations become moot in the big picture. Selector optimization and looping performance can help make your code become more efficient, but it is really DOM manipulation that will kill your performance in the end.

Updated: I have updated this post with a link to my detailed findings, suggestions, and opinions. You can find my comments here.

Despite these minor issues, I do recommend this eBook for any ASP.NET WebForms developer hoping to learn how jQuery could be integrated into their environment.    

Read More »

Mix10 Open Call Entry Voting Has Begun: My 4 jQuery Sessions

Mix10_Vote_blk_240_3 Mix 2010, a 3 day Microsoft conference for web designers and developers, recently opened up to all developers the opportunity to submit sessions that will be voted upon and possibly included in the conference line-up. 

Voting for these sessions begins today (January 5, 2010) and will close on January 15, 2010. At the end of the voting they will choose 10 sessions with the highest votes to be added to their conference. The winners of the selected proposals will be announced January 18, 2009.

You can view a comprehensive list of sessions or a filtered list of just my 4 jQuery sessions on the Mix10 website. There are 162 sessions and 92 speakers represented in the voting. You are able to vote for 5 sessions during your ballet submission. How do I know those stats… well, because I’m a geek and ran some jQuery in the FireBug console ;)

var uniqueSpeaker = [];
var speakerSelection = $('table tr td:nth-child(2) a');
speakerSelection.sort().each(function(i) {
var speaker = $(this).text();
speaker = speaker.replace(/^\s+|\s+$/g,"")
if (uniqueSpeaker[speaker] === undefined) {
uniqueSpeaker[speaker] = 1;
} else {
uniqueSpeaker[speaker] += 1;
}
});

var numberOfUniqueSpeakers = 0;
for(var key in uniqueSpeaker) {
console.log(key + ': ' + uniqueSpeaker[key] + ' sessions');
numberOfUniqueSpeakers++;
};

console.log('Number of Sessions: ' + speakerSelection.length);
console.log('Number of Unique Speakers: ' + numberOfUniqueSpeakers);

Note: If you actually wanted to run the above script you will need to jQueryify the Mix10 Open Call Entries webpage since it doesn’t have jQuery referenced. The jQueryify bookmarklet inject jQuery into a webpage that doesn’t already have it referenced.

Speaking of jQuery, the 4 session that I submitted to Mix10 are jQuery related…

6 Things Every jQuery Developer Must Know

An overview of several in-depth concepts that developers need to learn to bring their jQuery development to the next level.

We will review 6 things that you should know such as "What Is This?", "Am I Referencing the jQuery Object or a DOM Element", "Understanding Selectors", "Combine and Minify Your Scripts", "Different Ways of Storing Data", and "The Dos And Don'ts of Events".

Along the way, I'll share several helpful websites and tools to make your job as a jQuery developer easier.

How to Debug Your jQuery Code

In the past 10 years, more and more Web development has moved off the server and migrated to the browser, making a user's experience more responsive. Unfortunately, this transition hasn't always been pleasant for developers. The good news is that tooling Front-End debugging is much better.

We will examine some necessary tools for development such as FireBug and several other helpful tools. Our main focus will be on Debugging Selectors, Debugging Events, and Debugging Chains. During the session we'll review some common scenarios and how to debug them.

Custom jQuery Events and Selector Filters

jQuery has a wide variety of events and selectors that it already supports. Despite the rich functionality jQuery provides, you will eventually come to a spot where you need some event or selector that it doesn't support. The good news is that jQuery has made it easy to extend the library to support custom events and selectors.

In this session we are going to take a look at some of the existing events and selectors that jQuery makes available and then we will move on to show how we can extend jQuery to support our own custom needs.

Along the way, we will touch on what Event Driven Programming means and how custom jQuery events can make your code abide by the Open Closed Principle.

jQuery Test Driven Development

The concept of Unit Testing has been around for quite some time in the development world, but it's adoption in the JavaScript arena has been quite low.

In this session, we will examine a jQuery Unit Testing framework and a JavaScript Mocking framework to assist you in your Front-End Browser Unit Tests.

You can also use the discipline of Test Driven Development as you build out new jQuery and JavaScript functionality.

We will also examine how to integrate these Unit Tests into your Continuous Integration environment.

Of course I’d like for you to vote for one or more of my jQuery sessions above (click the Vote For Our Session Submission image above), but in addition I recommend you also look at the sessions by the following individuals…

image003

Read More »

Embedding HTML from jQuery AJAX Call Into Your Page

I got an interesting Twitter question the other day and thought I would blog about it to help anyone who has a similar situation.

Question

Hey buddy! How can I do a simple thing as loading a page into a div using Ajax and on the loaded page, execute a simple task as executing a javascript with an alert box?!? The page is loaded but the javascript just doesn't run! If I access the page direct directly, the alert pops out ok! --@montedesucata

 

Scenario 1

My initial thoughts were that he was trying to put an entire HTML document (pulled back from an AJAX call) inside another HTML document (the document that made the AJAX call). You can't do that because then you’d have two html elements, two head elements, two body elements, etc... in one document. So, my first example was to put the contents into an iFrame.

Note: You can also, strip out the body content of the returned full HTML document and inject that into your current document, but then you might not have the correct scripts or css files that were included in the head element (or wherever you put those).

<!DOCTYPE html>


<meta charset=utf-8 />
Load Full HTML Document via AJAX into iFrame






Load Full HTML Document via AJAX into iFrame







The contents of the FullTestHtmlWithAlert.html are below…


<!DOCTYPE html>


<meta charset=utf-8 />
Load Full HTML Document via AJAX into iFrame




Hello World From Full Html Document



The following is a screenshot of the results after clicking the Load button.

LoadFullHtmlDocumentViaAjaxIntoIframe

Feel free to Demo the above code below...

cooltext439924698

Scenario 2

The other scenario is that the HTML from the AJAX call is a partial document, meaning that it doesn’t include html, head, body, etc… tags and is just content that might be found in a body tag. This is a simpler case and the results can easily be injected into another DOM element in the document.

<!DOCTYPE html>


<meta charset=utf-8 />
Load Full HTML Document via AJAX into iFrame





Load Parital HTML Document via AJAX into Div






The contents of the PartialTestHtmlWithAlert.html are below…












1 2
a b

The following is a screenshot of the results after clicking the Load button.

LoadPartialHtmlDocumentViaAjaxIntoDiv

Feel free to Demo the above code below...

cooltext439924698

Read More »