What’s the difference between modules and classes in es.next?

After a few minutes of typing out a reply, I figured I might as well post it here.

ES.next / ES-Harmony is the next version of JavaScript. The goal of this new version is to be a better language for writing complex applications and libraries. In my opinion this also comes with a lot more complexities in the language itself; time will tell.

TL;DR

In ES-Harmony, a module is a chunk of code that is loaded only when needed. A class is a way you structure/write your code.

Modules

A module is a self-contained script to be loaded when needed. This can be helpful if you’d only like to load some scripts if the user’s browser has certain features, such as geolocation.

Check out Modules and Module loaders documentation.

Using Modules Today

Today we can use modules with a variety of libraries such as RequireJS, curl.js, LABjs, and yepnopejs.

RequireJS and curl.js both use the Asynchronous Module Definition (AMD) API for their modules. AMD is based on the define() function that allows you to name your module, list any dependencies (which will also be asynchronously loaded), and fire off an instantiation function if needed.

LABjs and yepnopejs focus on file loading rather than modules — that means you manage the dependencies yourself. It also means your scripts don’t have to follow a specific pattern. Yepnope can also conditionally load CSS files.

Classes

Classes are one of the ways you can structure your code. In current JavaScript (ECMAScript 5), you’d probably use a function or an object literal (more on using classes in current JavaScript). For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// define a new type SkinnedMesh and a constructor for it
function SkinnedMesh(geometry, materials) {
  // call the superclass constructor
  THREE.Mesh.call(this, geometry, materials);

  // initialize instance properties
  this.identityMatrix = new THREE.Matrix4();
  this.bones = [];
  this.boneMatrices = [];
  ...
};

// inherit behavior from Mesh
SkinnedMesh.prototype = Object.create(THREE.Mesh.prototype);
SkinnedMesh.prototype.constructor = SkinnedMesh;

// define an overridden update() method
SkinnedMesh.prototype.update = function(camera) {
  ...
  // call base version of same method
  THREE.Mesh.prototype.update.call(this);
};

In ES-Harmony, you’d actually define a new class like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    public identityMatrix = new THREE.Matrix4();
    public bones = [];
    public boneMatrices = [];
    ...
  }

  update(camera) {
    ...
    super.update();
  }
}

Big changes, right? Read the latest classes documentation on the ECMAScript.org wiki.

One part of his presentation had a great point on the argument of mobile web applications instead of native applications. Watch this section of his presentation starting at 13:36:

Chrome Mobile Monthly: Responsive vs Separate Sites

Here is Luke’s post Brad was referencing: Two Months of Device Diversity. Thirty-three devices released in two months, 20 of which are ‘mobile’ devices. I bet testers get tired just thinking about that!

When we talk to executives about building out their user experience teams, the first question we’re asked is “who should be on the team?” To answer this question, we studied two types of UX teams: those that are successful at delivering great designs and those that struggle at it. We wanted to see what was different about each type of UX team’s make up.

This article has some great tidbits on how to foster a great UX team:

• Think of your team as more than just the individuals in your nuclear design team. The extended design team could include anyone who made decisions that inevitably affected the outcome of the design and the experience of the users.
• Focus on skills, not roles or job titles.
• Monitor the team to identify the individuals who could benefit from training.
• Teams are more successful when in the same location; they have a higher bandwidth communication path.

In the past month I’ve been evaluating static-site generators as a replacement for Jekyll/Octopress:

• First I tried Hyde (since my day-job involves lots of Python and Django) but noticed it was no longer in development.
• Then I found the New Hyde but there just wasn’t enough documentation for me to get anywhere.
• Next I tried plain vanilla Jekyll but found myself adding lots of plugins.
• Then I tried Jekyll Bootstrap but didn’t care for it’s non-plugin system, and that the author has already moved onto a new replacement project.
• Finally I settled back on Octopress, where I should have never left.

Creating the Provisioning Profile

1. Add device to the iOS Dev Center’s Devices section using it’s UDID
2. Create/modify the provisioning profile at Provisioning > Distribution tab
3. Select the specific devices for the Provisioning profile
4. Save the profile.
5. The profile will now have a status of ‘pending’
6. Click on Devices on the side and verify the device is being used in at least 1 profile
7. Go back to Provisioning > Distribution, the profile should be ready for download
8. In the actions column, click ‘Download’ and copy the file to [sencha project folder]/build/package/. It will have a file extension of *.mobileprovision.
9. Edit the packager.json file and make sure it has the config item below with the correct path to the provisioning file:

1
2
3
4
5
6

/**
 * @cfg {String} provisionProfile
 * This is only needed to specify a Provision Profile to be used
 * http://docs.sencha.com/touch/2-0/#!/guide/native_packaging
 */
 "provisionProfile":"build/package/JaxDisaster_Ad_Hoc_Provisioning_Profile.mobileprovision",

The provisioning profile should also be sent along with the Ad Hoc app you send to the beta tester.

Certificate

1. Now, go to Certificates > Distribution and download the certificate that coincides with your Provisioning Profile.
2. Click and drag that certificate onto the Xcode icon in the Doc (OS X only). Close the certificate window once it pops up.
3. Copy the cer file to [sencha project folder]/build/package/
4. Edit the packager.json file and make sure it has the config item below with the correct path to the certificate file:

1
2
3
4
5
6

/**
 * @cfg {String} certificatePath
 * This is the location of your certificate.
 * This is required when you are developing for Android or you are developing on Windows.
 */
"certificatePath":"build/package/ios_distribution.cer",

Build

1. In the terminal, at the project folder, type: sencha app build native
2. The native app will be in [sencha project folder]/build/package/
3. Zip the native app up, along with the mobileprovision file and deliver to your beta tester

Installing

Installing the app must be done on the computer the device syncs with.

1. Plug the device into the computer and open iTunes
2. Make sure the sync setting sync settings in the App tab are set to sync apps to that computer
3. Do a full device sync and backup
4. Right click on the device in the left sidebar and click ‘Transfer Purchases from [device name]’
5. Drag the mobileprovision and application file (unzipped) and drop on top of the iTunes icon in the dock
6. In the Apps tab, find the application in the list and make sure it’s checked.
7. Do a full sync and the application will transfer over

Links

• [UDID][UDID]
• [iOS App to find your UDID][ios]

[guide]: [UDID]:http://www.innerfence.com/howto/find-iphone-unique-device-identifier-udid [ios]:http://itunes.apple.com/app/ad-hoc-helper/id285691333?mt=8

What I want is a panel where the width takes all available space (for varying screen sizes) and the height fits to the content, in this case an image. That means I don’t want to set a fixed height or width. After all, the beauty of Sencha Touch is to build for all smartphones, which have a wide-range of resolutions and bit-depth.

Standard Ext.Img:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Ext.define('App.view.Main', {
    extend  : 'Ext.Panel',

    config  : {
        styleHtmlContent    : true,

        items : [
            {   //      National Weather Service Weather map
                xtype   : 'image',
                src     : 'http://www.srh.noaa.gov/images/fxc/jax/graphicast/image12.jpg',
                height  : 300
            }
        ]
    }
});

As you can see, the whole image doesn’t fit in the panel and Sencha isn’t going to scale it. Notice I had to set a height of 300, otherwise, the image wouldn’t show at all (unless you use the hbox or vbox or fit layout modes, which I’m not).

CSS to the Rescue… (almost)

CSS3 introduced the handy background-size property. cover will scale the image down to fit the element, and contain sill scale the image up to fill the element. Great. So I went back to the standard panel, added a CSS class, and put background-size to work.

1
2
3
4

{   //      National Weather Service Weather map
    xtype   : 'panel',
    cls     : 'my-image-class'
}

… except we still need to set a fixed height on the panel for the image to show.

(More on background-size at Mozilla’s Developer Network)

3rd Attempt

My biggest problem was having the height of the panel adjust to the image. I figured the best way to fix that was to put an <img> tag in the panel… old school style.

1
2
3
4

{   //      National Weather Service Weather map
    xtype   : 'panel',
    html    : '<img src="http://www.srh.noaa.gov/images/fxc/jax/graphicast/image12.jpg" />'
}

We’re getting there. The panel height is being driven by the content, but that image is just too dang big.

After a little big of searching, I saw Ethan Marcotte’s post on Fluid Images. All of his research settled on a idea from Richard Rutter:

1

img { max-width: 100%; }

Come on… seriously? That’s it? That won’t work. Way too simple. Where are the hacks, exceptions, or ‘works in nightly only’ disclaimers? It won’t even scale proportionally! Nope… it works. Of course IE has it’s issues, but we’re not deploying this app on Windows Phone 7, so it’s not a big deal.

Rounded Corners

You might have noticed that my panels have rounded corners. Initially my image corners were not being clipped properly by the parent’s rounded corners, even with overlflow:hidden. Turns out there is a WebKit bug for elements using position:relative (which Sencha Touch uses heavily) and border-radius content clipping.

Using border-radius: inherit doesn’t seem to do any good. The easiest fix is to give the image the same border-radius and set the parent container’s background:transparent to avoid any fringing.

And that’s how I wasted a day displaying one image.

Refinery CMS looks great on the surface. It has a decent selection of modules and a strong group of developers behind it. But its UI is too simple if you expect to use it for any type of content other than plain pages.

For example, once you install the Blog add-on, to add a blog post, you just add a regular page and set the ‘Parent page’ to ‘Blog’. First, that’s not a very intuitive method of adding a blog post—I’d expect to see ‘Add blog post’ or something similar. Secondly, when I have 200 pages and 1,000 blog posts, that tree will be a mess.

Locomotive CMS is nice as well; and if you’re lucky, the demo might be working. A brief look at their features shows they have custom content types—key for any flexible CMS. Finally a CMS with some beef to it! Now, lets hop on over to their blog and … it’s a Tumbler-powered blog. Really? A CMS site that’s not using the CMS? Yikes. Moving on…

Radiant CMS was probably the first mainstream Rails CMS. But just as the tagline says, it’s a CMS intended for smaller teams or smaller collections of data. By all accounts it looks like a great CMS, but I wouldn’t want to be locked into it if the site could grow.

Everything else looks to be half-finished projects or frameworks for rolling your own CMS as part of a custom application. This is a bit frustrating as I often have website projects that evolve over the years into custom applications. Without a solid ruby CMS to start with, I often start with a PHP CMS then try to decipher when the right time is to break away from the CMS and move into a custom rails app, rather than just adding on and incorporating the CMS into the larger project.

Oh well, the hunt continues.

Install Latest Version of Rails

1

sudo gem install rails

Install Specific Version of Rails

1

sudo gem install rails --version 3.0

Update Rails

1

sudo gem update rails

Rolling Back to Previous Version of Rails

1

sudo gem uninstall rails

You’ll then see something like this:

1
2
3
4
5
6
7

Select gem to uninstall:
 1. rails-3.0.0
 2. rails-3.0.5
 3. rails-3.0.11
 4. rails-3.1.1
 5. rails-3.2.1
 6. All versions

Type the number of the version you’d like to uninstall and hit enter, and away it goes.

RVM

If you need specific ruby/rails environments for various projects, then you should be using RVM and named gem sets.

1. January brought a new driveway for our house, which meant our longtime construction project was soon coming to a close.

2. We were also able to retrieve and scan all my wife’s medical files from Ohio for her original brain injury 13 years ago. This proved very helpful as the records showed the doctors then found the same brain abnormality our current doctors just found. Proof surgery was the right track.

3. February Laura and I started following the Paleo diet in hopes to clean our her system from all the ineffective anti-seizure drugs she’s been taking for the past few years. Surprisingly, this also decreased her seizures by 75%! Normally she would have a cluster of seizures every month, without fail. On the diet, clusters came every 2 to 4 months.

4. March launched ChefDave.org’s site membership using the Membrr / OpenGateway and Solspace’s User plugins. This is also the time when my love of ExpressionEngine started falling apart due to various issues.

5. Also in March I bought a road bike after I sheared off my pedal arm on my Raleigh hybrid. Though time in 2011 been scarce, I hope to get back into cycling soon.

6. April saw the final piece of COJ.net go live. This wrapped up a year-long conversion and redesign project of the 30,000 page site.

7. In May we finally finished the outside construction on our house, completing the addition of my wife’s workshop and my (albeit unplanned) office. This major project included demolishing the existing one car garage and replacing it with a 30x30 garage with AC, 220v and 3 phase power. It’s the dream workshop of almost any woodworker. Now we start the inside of the house and shop.

8. In June my garden was in full swing. The bell peppers and cucumbers were great producers, and my watermelon plants were full of blooms. I planted 11 watermelon plants total which meant about 66 square-feet of vines—but no watermelons actually came to fruition. I will try again, though, with only one or two plants this time.

9. June was also the last month my wife had any seizures. From July to November was the longest stretch of no meds and no seizures. All from dieting alone. This was great, but also added additional stress without knowing when a cluster of seizures could strike.

10. I converted rwbaker.com to WordPress using the Briefed WooTheme.

11. At the end of August Jacksonville Mayor’s new blog went live. It was a very rushed and fast-paced project and I even learned a few things.

12. September I rewrote the API for ChefDave.org, making it more flexible and removing a big bottleneck when requesting a lot of data. This also lays the groundwork for larger system-wide changes down the road.

13. In October my mother-in-law finished her battle with breast cancer.

14. November Laura had a right temporal lobectomy to hopefully put an end to her partial complex seizures. Every seizure wipes Laura’s long and short term memory—she doesn’t know who I am, doesn’t recognize our house, etc. Surgery took exactly 3 hours, and they were even able to reuse the incision from her first craniotomy. She was awake within one hour, and walking around in five. Two months post-op and no seizures so far.

15. I converted rwbaker.com to Octopress/Jekyll after my WordPress install was hacked and made a mess of my server. I love the static platform though, and it’s a great way to get started in Ruby and SASS.

16. For December, Christmas was in Ohio this year, which gave us a great opportunity to take up the truck and fill it full of lumber for Laura’s new shop. The holidays, quality family time, and October fresh in our minds gave us time to reflect on the year and where we are in life.

17. December marks 6 months my wife has continuously known me, the longest stretch in our 10 years together.

Hopefully 2012 will bring a lot of changes for Laura and I. Some big, some fun, and perhaps even a scary one or two. On the personal side of things, I want to branch out more with Node.js, Ruby on Rails and iOS development, and maybe even start a new side project.

GoDaddy sells domains for cheap, and in return, I look past their horrible control panel, cheap advertising campaigns, and ridiculous animal abuse. No more; I’ve finally moved my 16 domains to Namecheap. I suggest you do the same and move your domains a responsible company like Namecheap or Dreamhost (both affiliate links).

And to read more about SOPA, Jeffery Zeldman has written a great piece on SOPA and what it could mean for our industry.

can you figure out whether you’re working with an array or arguments list without the use of 3rd party code?

I was intrigued, because I didn’t know the answer.

Two ways (of many, I’m sure) to determine the type of JavaScript Object you’re working with is by using instaceof or Object.prototype.toString

instaceof

Instaceof will give you a boolean response. It’s useful to determine if you’re working with a specific kind of object.

1
2
3
4
5
6
7

function bob(one, two, three) {
	var x = arguments;
	var y = [];

	console.log ( x instanceof Array ); //false
	console.log ( y instanceof Array ); //true
};

Instanceof evaluates to true if the object inherits from the class’s prototype:

1
2

var p = new Person("Richard");
p instanceof Person //true

This evaluates to true since p inherits from Person.prototype. It’s worth noting that using the new keyword is imperative.

Arguments is not a valid instanceof object, so we can only use this to tell if we’re dealing with an Array or something else.

Object.prototype.toString

Calling this returns the type of object

1
2
3
4
5
6
7

function bob(one, two, three) {
	var x = arguments;
	var y = [];

	console.log( Object.prototype.toString.call( x ) ); //[object Arguments]
	console.log( Object.prototype.toString.call( y ) ); //[object Array]
};

You could then use indexOf or search to check for ‘Arguments’ or ‘Array’.

Without a doubt, there are other ways to do this in JavaScript. That’s what makes it fun—you’re never done learning.

History

This site has gone through a number of changes. Static files > Dreamweaver templates > Textpattern > Static > ExpressionEngine > Static > WordPress. In all that time, I never found a publishing system I cared for. Then, I found Jekyll.

Jekyll is a rails application that allows you to maintain your site in individual HTML or Markdown files and generates a static site. Mix that with Octopress and you have a find publishing system. One that fits quite well for me.

Changes

Soon I’ll be moving all my links over to Pinboard. They were once on Delicious, then Yahoo! goofed things up, so I tried posting links to this site. Though, it just didn’t fit. I’m not sure if I’ll move the Delicious links over, or just start fresh. Perhaps I’ll move just a few…

This site will now be mostly long-format posts and code snippets. Hopefully I keep that going.

The Standard Form Submit

Here is the basic form we’re working with:

1
2
3
4
5
6
7
8
9
10
11

<html><body>
<form name="submit_with_button" action="success.html">
	<fieldset>
		<legend>Submit form with button</legend>
		<label for="email">Email Address</label>
		<input type="text" id="email" name="email" />
		<input type="submit" value="Submit" />
		<p>Standard method with a submit button</p>
	</fieldset>
</form>
</body></html>

Submit with a JavaScript Function

In this example we call a JavaScript function from the link, and that function submits the form. This method is fine, but it’s generally bad form to put JavaScript functions in a link’s href.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html><body>
<form name="submit_with_js" action="success.html">
	<fieldset>
		<legend>Submit form with JavaScript</legend>
		<label for="email">Email Address</label>
		<input type="text" id="email" name="email_js" />
		<a id="submit_js" href="javascript: submitform()">Submit</a>
	</fieldset>
	<script>
		function submitform() {
			document.submit_with_js.submit();
		};
	</script>
</form>
</body></html>

Submit with jQuery

This method still depends on the action tag, but just triggers the submit() function. Use return false to stop the link being executed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html><body>
<form name="submit_with_jquery" action="success.html">
	<fieldset>
		<legend>Submit form with jQuery</legend>
		<label for="email">Email Address</label>
		<input type="text" id="email" name="email_jquery" />
		<a id="submit_jquery" href="#">Submit</a>
	</fieldset>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
		$('#submit_jquery').click(function(){
			$('form[name="submit_with_jquery"]').submit();
			return false;
		});
	</script>
</form>
</body></html>

Submit with jQuery AJAX

Using the jQuery post function here (a subset of $.ajax()), we submit the form asynchronously and return back any resulting data. In this example I’m returning back the success message in an alert. I’m also using javascript:void(0) in the submit link href rather than a #. This way, even if the link is executed, the URL isn’t modified and the page doesn’t jump.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<html><body>
<form name="submit_with_jquery_ajax" action="success.html">
	<fieldset>
		<legend>Submit form with jQuery AJAX</legend>
		<label for="email">Email Address</label>
		<input type="text" id="email" name="email_ajax" />
		<a id="submit_ajax" href="javascript:void(0)">Submit</a>
	</fieldset>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
		$('#submit_ajax').click(function(){
			//Grab action from the form if it's there
			if ( $('form[name="submit_with_jquery_ajax"]').attr('action') ) {
				myAction = $('form[name="submit_with_jquery_ajax"]').attr('action');
			} else {
				myAction = 'success.html';
			};
			$.post(myAction, function(data) {
				alert(data);
			});
			return false;
		});
	</script>
</form>
</body></html>

You can download all these examples from Github

This calendar theme is an imageless version of the jQuery UI Redmond calendar and uses the basic CSS documentation from the toolkit documentation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

/* Ajax Control Toolkit Calendar */

/*	The outer rectangular container that supplies the border around the calendar element. 
	Child Css classes: .ajax__calendar_header,.ajax__calendar_body,.ajax__calendar_footer. */
.ajax__calendar_container		{background-color:#fff; border:solid 1px #a6c9e2 !important;}

	/*	A container element that holds the next and previous arrows and the title of the current view. 
		Child Css classes: .ajax__calendar_prev, .ajax__calendar_title, .ajax__calendar_next. */
	.ajax__calendar_header		{background-color:#87b6d9; margin-bottom:5px;}

		/* 	An element that displays the arrow to view the previous set of data in the view(previous month/year/decade).
			Child Css classes: none. */
		.ajax__calendar_prev	{}

		/* 	An element that displays the title of the current view (month name, year, decade). 
			Child Css classes: none. */
		.ajax__calendar_title	{height:20px; color:#fff; line-height:1.7em;}
		.ajax__calendar_hover .ajax__calendar_title {color:#eee !important;}

		/* 	An element that displays the arrow to view the previous set of data in the view (previous month/year/decade). 
			Child Css classes: none. */
		.ajax__calendar_next	{}
		
		.ajax__calendar_prev,.ajax__calendar_next
								{background-color:#dce6f4; height:20px !important; color:#fff !important;}

	/*	A container element that holds the days, months, and years panes. Also provides a fixed rectangle with hidden overflow that is used for transitioning between views (next/previous month, or days/months/years).
		Child Css class: .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years. */
	.ajax__calendar_body		{}

		/* 	A container element that holds the layout for the days in a month. 
			Child Css classes: .ajax__calendar_dayname, .ajax__calendar_day */
		.ajax__calendar_days	{}
		.ajax__calendar_days table thead tr td
								{background-color:#fff; color:#000; font-weight:bold;}
		

			/* 	An element that displays the short name of the day of the week. 
				Child Css classes: none. */
			.ajax__calendar_dayname
								{border:0 !important;}

			/*	An element that displays the day of the month. 
				Child Css classes: none */
			.ajax__calendar_day	{border:1px solid #c5dbec !important; background:#eaf4fd; margin:1px !important; height:15px !important; width:16px !important;}

		/*  A container element that holds the layout for the months in a year. 
			Child Css classes: .ajax__calendar_month. */
		.ajax__calendar_months	{}

			/* 	An element that displays the month of the year. 
				Child Css classes: none */
			.ajax__calendar_month
								{}
								
			.ajax__calendar_month, .ajax__calendar_day {color:#2e6e9e; font-weight:bold; }

		/* 	A container element that holds the layout for the years in a decade. 
			Child Css classes: .ajax__calendar_year. */
		.ajax__calendar_years	{}

			/* 	An element that displays the year in a decade. 
				Child Css classes: none */
			.ajax__calendar_year{}

/*  A container element that holds the current date. 
	Child Css classes: .ajax__calendar_today. */
.ajax__calendar_footer			{border-top:1px solid #c5dbec !important; line-height:1.2em;}

	/* 	An element that displays the current date. 
		Child Css classes: none. */
	.ajax__calendar_today		{border:1px solid #c5dbec; background-color:#e1effb;}

/* 	This is applied to an element in the DOM above a day, month or year and is used to apply CSS attributes that show a hover state. 
	Child Css classes: .ajax__calendar_day, .ajax__calendar_month, .ajax__calendar_year */
.ajax__calendar_hover			{}
td.ajax__calendar_hover div		{background:#d2e6f5 !important; border:1px solid #79b7e7 !important;}

/* 	This is applied to an element in the DOM above a day, month or year and is used to apply CSS attributes that show the currently selected value. 
	Child Css classes: .ajax__calendar_day, .ajax__calendar_month, .ajax__calendar_year. */
.ajax__calendar_active			{}
td.ajax__calendar_active div	{background:#fbec88 !important; border:1px solid #fad42e !important;}


/* 	This is applied to an element in the DOM above a day or year that is outside of the current view (day not in the visible month, year not in the visible decade). 
	Child Css classes: .ajax__calendar_day, .ajax__calendar_year. */
.ajax__calendar_other			{}

.ajax__calendar_other .ajax__calendar_day
								{font-weight:normal !important; color:#bbb !important; border:1px solid #eee !important;}

.ajax__calendar_hover.ajax__calendar_other .ajax__calendar_day
								{background:#efefef !important; color:#aaa !important; border:1px solid #ddd !important;}

In the existing website, users can upload images of any-size and aspect-ratio, and then we resize the image in the Transformation. Our pager thumbnails need to be square; a string of mixed-size images doesn’t look quite right. But unfortunately Kentico doesn’t provide a way to crop images on the fly. Luckily, CSS can help.

Carousel HTML Wrapper

Here is the basic carousel wrapper with a blank UL pager to get things started:

1
2
3
4
5
6
7

<div class="grid_content featured carousel-wrapper">
     <div class="carousel">
          <!-- content repeater generating our slides. Uses the transformation below -->
     </div>
     <ul id="pager" class="plain"></ul>
     <div class="clear"></div>
</div>

CSS

Our pager is an unordered list with a link and a span. The link has the pagination action attached so it. The span has a fixed size of 50x50—this is desired size of our thumbnails. The thumbnail image is set as the background of the span, centered, then the span will crop off the rest of the image. We now have square thumbnails.

1
2
3
4
5
6

.carousel~#pager li                 {float:left !important; margin:0 20px 0 0; overflow:hidden; }
.carousel~#pager a                  {padding:3px; border:1px solid #ccc;}
.carousel~#pager a .thumbnail       {background-position:50% 50%; background-repeat:no-repeat;}
.carousel~#pager a,
.carousel~#pager a .thumbnail       {width:50px; height:50px; display:block;}
.carousel~#pager li.activeSlide a	{background:#fff;}

Kentico Transformations

The thumbnail() function is responsible for creating our ‘cropped’ thumbnail for the carousel pager. This is actually really simple—just grab the image use a maxSideSide of 50. The CSS above takes care of the ‘cropping’.

We’re using the BlogPostTeaser image object for testing, even though we only need the image URL. It turns out Kentico’s IfEmpty() function isn’t all that reliable, and often <%# IfEmpty ("BlogPostTeaser", "", GetFileURL("BlogPostTeaser")) %> will result in /getattachment/00000000-0000-0000-0000-000000000000/Post-Title.aspx (the URL of a non-existent image).

Kentico’s CMSAbstractTransformation.Eval() function returns an object, while CMSAbstractTransformation.GetFileURL() returns a string. Our function parameters must be declared accordingly and converted for comparison.

The carousel JavaScript generates the pagination HTML, so we’re just storing the thumbnail path in the summary so our JavaScript and pick it up when needed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<script runat="server">
    public static string videoTest(object BlogPostTeaser, string BlogPostTeaserURL, object BlogPostTeaserAltText, object BlogPostVideo)
    {
		...
    }

    public static string thumbnail(object BlogPostTeaser, string BlogPostTeaserURL)
    {
        //Check the image object to see if it's an actual image or not.
        //If no image, default to the 'standard' thumb.
        string teaser = Convert.ToString(BlogPostTeaser);
        if (teaser != "")
        {
            return BlogPostTeaserURL + "?height=50";

        }
        else
        {
            return "/App_Themes/coj/images/coj-thumb.png";
        }
    }
</script>

<div class="carouselTransformation">
    <%# videoTest(Eval("BlogPostTeaser"), GetFileUrl("BlogPostTeaser"), Eval("BlogPostVideo"), Eval("BlogPostVideo"))%>
    <div class="title">
        <a href="<%# GetDocumentUrl() %>">
            <%#Eval("BlogPostTitle")%>
        </a>
    </div>
    <div class="date">
        <%#GetDateTime("BlogPostDate", "MMMM dd, yyyy")%>
    </div>
    <div class="summary" thumbnail="<%# thumbnail(Eval("BlogPostTeaser"), GetFileUrl("BlogPostTeaser")) %>">
        <%# LimitLength(Eval("BlogPostSummary"),350,"...") %>
    </div>
</div>

Javascript

The carousel is built on the Cycle jQuery plugin. The pagination is generated by a callback function in the carousel function. In this function we grab the thumbnail URL and generate the pager LI and set the thumbnail as the background of the span. Our CSS above takes care of the rest.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

$(document).ready(function() {

    jQuery.dom = jQuery(document);

    var $carousel = jQuery.dom.find('.carousel');
    if ($carousel.length) {

          $carousel.cycle({
            fx: 'fade',
            speed: 300,
            timeout: 10000,
            pager: '#pager',
            pause: 1,
            cleartypeNoBg: true,

            // A callback function that creates a thumbnail to use as pager anchor
            pagerAnchorBuilder: function(idx, slide) {

				/* 	Find your image inside the individual slide.
					In this case, I generate a scaled image on the server and store the path in an attribute */
				var slideImg = jQuery(slide).children(".summary").attr('thumbnail');

				/*  If there is no image associated with the story, use a standard thumbnail
					This is also handled in our Kentico Transformation, so this is only a backup */
				if (slideImg == undefined) {
					slideImg = "/App_Themes/site/images/thumb.png";
				};

                /*	Our thumbnails are 50x50, but our image might not be square.
					Setting the image as the background lets the element crop the image */
                return '<li><a href="#"><span class="thumbnail" style="background-image:url('+ slideImg +');"></span></a></li>';
            }
        });
     });
});

** UPDATE ** The project is now live, so you can take a look at the thumbnails in action: Jacksonville’s Mayor’s new blog

Table taken from Douglas Crockford’s JavaScript: The Good Parts

Undefined

Undefined is the absence of a value, not an empty value.

JavaScript has two sets of equality operators: === and !==, and their evil twins == and !=. The good ones work the way you would expect. If the two operands are of the same type and have the same value, then === produces true and !== produces false. The evil twins do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values. The rules by which they do that are complicated and unmemorable.

Double Equals (==)

Double equals (==) will try to convert the 2nd half to the same type as the first half of the expression.

string == number will result in a comparison to string == string after the conversion.

Triple Equals (===)

Triple equals === is just a straight comparison, regardless of type.

Using === is not any quicker if the types are the same. If types are not the same, === will be quicker because it won’t try to do the conversion.

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.

1
2
3
4

#nav li a
{background:url(images/nav-sub-div.png) 0 0 repeat-x;}
#nav li:first-child a
{background-image:transparent;}

However, using the Adjacent Siblings Selector, you can streamline it:

1
2

#nav li + li a
{background:url(images/nav-sub-div.png) 0 0 repeat-x;}

The + selector applies the style to any LI that immediately follows an LI, which obviously rules out the first item. A simple solution, often overlooked.

Compatibility

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