Es Developed - Fresh Website and Graphic Design » javascript

Cheat Sheets For Web Designers

Shawn — Mon, 14 Sep 2009 11:03:42 +0000

Remember the mottoes you learned when you were a kid: “Winners don’t do drugs”, and “Cheaters never win”?

Well, a little cheating never hurt anyone… when it comes to using cheat sheets, that is.

TechPosters has a colossal collection of cheat sheets for just about every program, coding language or OS that uses code or keyboard shortcuts.

Since there’s such a huge list of cheat sheets, let’s look at some of the useful cheat sheets for web designers.

HTML

Note: If you’re looking for more resources for UTF-8 special entities, check out my earlier post, Most Used XHTML Character Entities.

CSS

CSS3 Quick Reference Guide
Core CSS Part 1 (by Molly E Holzschlag and published by DZone), Part 2, and Part 3
CSS Properties
CSS2 Cascading Style Sheets
CSS Shorthand Guide
CSS Shorthand Cheat Sheet by Example
CSS Property Index
CSS Cheat Sheet v2
CSS2 Quick Reference Guide
RGB Colour Codes

jQuery

There are a ton of other cheat sheets for javascript in general, as well as other frameworks like EXT JS, Prototype and an entire category for Mootools.

These can be found in the general Javascript Cheat Sheet category.

PHP

Plus Many, Many More

There are also tons of other web design cheat sheets for MySQL, ASP.NET, Flash, Silverlight, XML and more.

Another nice thing about the TechPosters site is that you can subscribe to RSS feeds for each category and know when new cheat sheets are added.

Do you use any great cheat sheets for web design that are not included here? Where do you get your cheat sheets from?

Share your thoughts in the comments.

View Processed Javascript in Firefox and Chrome – No Plugins Required

Shawn — Mon, 13 Apr 2009 11:00:25 +0000

Here are 2 quick tips for Firefox and Google Chrome users that let you view the processed source code generated by a javascript snippet. Neither tip requires any plugins.

Situation

You need to insert a link to a video, form, etc into your site using embed code provided by another website and the embed code is only javascript.

Problem

While many sites and online services are getting better at providing standards-compliant code to paste into your site, sometimes you have to make adjustments to their code so that your pages validate.

This is easy to fix if it’s plain, viewable source code. However, if the code is just javascript that writes the (X)HTML code to the page when run (or the javascript is encrypting the code), you can’t see what to fix.

If you add the javascript code to your page, open the page in your browser and View Source, you still only see the javascript as it appears before it’s processed. That doesn’t help at all.

Firefox Solution

The fastest way to view the code created by the javascript is to use Firefox’s View Selection Source instead:

Paste the provided javascript into an XHTML page
Open the page in Firefox
Select the portion of the webpage in the general area that contains the javascript with your mouse
Right-click and choose View Selection Source

You should now see the source code that the javascript code rendered.

Then, you can copy and paste the actual code from View Selection Source and make your changes.

Google Chrome Solution

I haven’t forgotten about Google Chrome Users. The above solution doesn’t work for Chrome because it doesn’t have a View Selection Source option. We have to go about it another way.

Depending on what the javascript is designed to do and how it goes about that, you may be able to simply save the page as a file on your drive and open it in your editor.

In my test, the original javascript appeared, but below it was the code the javascript generated. You’ll probably have to do more digging around in your code, but if you copied your javascript into an otherwise blank webpage, it won’t a big deal.

No Plugins Required

The beauty of the above tips is that you don’t have to have any plugins or extensions installed in your browser to make them work.

Other Browsers

Safari and Internet Explorer don’t seem to be able to view processed javascript code without the use of plugins. At least not that I know about.

Built-in jQuery Support in ExpressionEngine 2.0

Shawn — Mon, 19 Jan 2009 12:00:19 +0000

The good folks at EllisLab have just reported some good news about the progress of ExpressionEngine 2.0. It seems that ExpressionEngine 2.0 has just achieved feature freeze. This means no new features are likely to be added to EE 2.0 before its final release.

More interesting news is that a new addition that will be included in all versions of ExpressionEngine 2.0—built-in jQuery support.

Built-In jQuery Support

These questions get asked a lot: “How do you link to javascript in ExpressionEngine?” and “What is the best way to link to javascript in ExpressionEngine?”

Many wonder which way is best to link to external javascript files: link as an EE template file or link as an external, javascript file (.js) outside of a template?

With this latest news it looks like these questions won’t be much of an issue anymore (at least for those who use the jQuery library).

The ExpressionEngine jQuery module will be available in both Core and Licensed versions.

Leslie Camacho states in a recent post on the ExpressionEngine blog:

“The jQuery module will allow people to use jQuery and its plugins in their templates without worrying about the location of the jQuery files. This way developers have access to jQuery in a secure way from just about anywhere in EE’s template engine.”

CodeIgniter and jQuery

There was a previous post about the new jQuery abilities in EE 2.0. Since ExpressionEngine 2.0 is built on CodeIgniter, this is going to be great for creating javascript functions.

Example:

// Effect: fade a div into view
$this->javascript->fade_in("div");

// Event: set up a click to show a submenu
$this->javascript->click("#button",
    $this->javascript->hide(".submenu");
);

// Plugin: using a jQuery plugin
$this->jquery->tablesorter();

Code example from ExpressionEngine 2.0: fully CodeIgnited!

Personally, I’m excited to see the new EE, and the news of the addition of the built-in jQuery module just whets my appetite even more. I can’t wait to see how this is actually implemented.

Do you use jQuery as your javascript library of choice when working with ExpressionEngine? How do you think the added jQuery support will affect the way you code in ExpressionEngine and CodeIgniter? Tell us about it in our comments.

Javascript Templates in EE: Speeding Up Page Loads

Shawn — Fri, 10 Oct 2008 19:40:43 +0000

When serving up dynamic information, you want your pages to load as fast as possible. In ExpressionEngine (EE), not only pages, but also code such as CSS and javascript can be served using templates. But when should you use an EE javascript template? How does the use of a JavaScript template affect page load speed?

The choice whether or not to use javascript templates in EE can potentially have a huge effect on page load time in certain situations.

Javascript in EE Templates

In ExpressionEngine, you have 6 types of templates you can choose from. If you’re using a template to include javascript code in your pages, you’ll want to choose either JavaScript or Static.

If your javascript file is compressed with the whitespace removed (such as the minimized version of jQuery), EE will not process it properly unless you use the Static template type. Otherwise, you can just use the regular JavaScript template type.

Javascript as a Regular JS File

ExpressionEngine also allows you to just upload an external javascript file to the server and link to it just as you would any other file in HTML, PHP or what have you.

The downside is that you have to go outside of EE’s control panel and use FTP to load the file and then use FTP to edit it if need be later on. You won’t be able to make changes from within EE as you would if you were using a template.

Javascript Templates vs Static Files

First off, why would you want to use templates to display javascript in EE?

When putting javascript in a JavaScript template, you can use EE tags to pull in information from elsewhere in EE. This can be pretty handy at times; saving you from retyping extra info, or when information needs to change based on the page the javascript is being loaded. For these situations, using templates are great.

The catch with javascript in templates is that the code isn’t being cached. Each time a new page loads, EE treats the javascript template as a dynamic file and downloads it again; looking for EE tags it needs to process. Your browser doesn’t cache the javascript.

When dealing with larger javascript files—especially javascript frameworks, this can significantly increase your page load times.

Just linking from a page template to a regular old javascript file, on the other hand, means your browser can cache the file and then when a visitor goes to another page, wham-o, it’s already cached.

Speed Impact

I don’t have any benchmark tests for this, but from my personal experience, using javascript templates for serving multiple javascripts and/or large chunks of javascript code in EE can noticeably slow the loading of pages when compared to just linking to regular .js files. If you combine this with the time it takes to process the PHP and EE tags and the other templates for pages and pull in weblogs, this all adds up.

Recap

Using javascript templates in EE makes sense when:

You need/want to use variables in your javascript
Dealing with smaller javascript files
You want to manage/organize/edit your javascript files through EE’s control panel

Serving javascript files as just regular old .js files makes sense when:

You don’t need EE to parse anything in your javascript code
You’re using a javascript framework such as Prototype, jQuery or MooTools
You’re using several small javascript files
Your pages are loading slower than you’d like