You Can Help Write the jQuery Mobile Cookbook with Appendto and Oreilly

Do you use jQuery mobile? Interested in helping with the jQuery Mobile Cookbook?

Appendto and Oreilly publishing have teamed up to create the jQuery Mobile Cookbook, and you’re invited to help write part of the book!

Become a member of a growing web developer community and participate in something great! This is your chance to become a published author and contributor to something monumental. You will not only become a published author, you’ll also be given the chance to work with other jQuery experts and help the jQuery community, and may even learn a thing or two along the way.

Sign up at Help the jQuery Mobile Cookbook! site.

Appendto is located in Evergreen, CO. The company has a self proclaimed dedication to jQuery and continuously contributes to the jQuery project. Some of the contributors to the jQuery project include, Mike HostetlerScott GonzálezDoug Neiner, and Ralph Whitbeck.

Besides contributing their time and effort to various aspects of the jQuery project the Appendto group does consulting in the discipline of HTML5, JavaScript, Remote Staff Augmentation, and of course, Custom Development.

They’ve also, I think recently, started a Development Learning Center. Topics include a basic introduction to JavaScript, selectors in jQuery, jQuery Methods, DOM manipulation, and jQuery Events.

If you’re interested in free online training, I also recommend the following…

  1. P2PU.org
  2. Codecademy
  3. Mozilla Developer Network

 

 

Prevent Your CSS and Javascript Documents From Caching

So we’ve all fallen victim to the dreaded cache! Caching can be a great thing, however, it can also be problematic. How many times have you told a friend or co-worker to “check out” the updates you just made to your site and they fail to see the changes because they didn’t refresh their browser. You’ve been cached!

The problem with caching is even worse when the person you tell to check out the webpage is your boss or client! The last thing you want to do is provide them with an explanation of the changes, send them the update, and later find out they didn’t see the changes because they didn’t refresh their web browser.

How can we prevent CSS caching?

There is a really easy trick you can add to your code that will help with caching of CSS and Javascript files. Adding a timestamp to your CSS and Javascript code will keep your documents from being cached.

Use this caching technique for more than your CSS file. You can also use the same technique to keep other types of files from caching. For instance, we can change the path of a .js file to keep the document from caching.

Change your src path from js/scripts.js to js/scripts.js?lastModified=02/15/12

<script> src='js/srcipts.js' </script>
<script> src='js/srcipts.js?lastModified=02/15/12' </script>

Similarly, you want to write your CSS code the same way.

<link> href='css/style.css' </link>
<link> href='css/style.css?lastModified=02/15/12' </link>

Free XML Sitemap Generator

The best way to keep Google and other search engines up-to-date on your sites content is to include an XML Sitemap on you website. There are several types of sitemaps, but the most common is the XML format. Sitemaps help explain the pages on your website that search engines might not otherwise find. An XML Sitemap is a listing of all of your websites pages that you’ve included on your website. In order to keep a good ranking with the search engines you should create and submit an XML Sitemap to google and all of the other major search engines. This will ensure that all of your pages will be included for crawling by search engines. Otherwise, the search engines might not find all of your pages.

Many third parties offer XML SItemap generators, but I’ve found that not too many work properly or are not well supported. I started using a Free Online Sitemap Generator when I first started building websites and have recently purchased the Unlimited Sitemap Generator from XML-Sitemaps.com. They offer several XML-Sitemap formats, including an, Unlimited Sitemap Generator, a Standalone Sitemap Generator, a PHP Sitemap Generator, and an XML Sitemap Generator.

The Unlimited Sitemap Generator can be set up in about 5 to 10 minutes, even if your a novice. Once set up you can choose from several formats for your XML Sitemap. The types include a text Sitemap, a ROR Sitemap, an XML Sitemap, and an HTML Sitemap for your human visitors!

With the Unlimited Sitemap Generator you can also create an Images Sitemap, Video Sitemap, News Sitemap, and Mobile Sitemap. It will also automatically send an update to the major search engines, like, Google, Yahoo, Ask, Moreover, and Live and will also update Ping-O-Matic with your latest site links. Allthough, I would still recommend submitting your XML Sitemap through Google Webmaster Tools.

Guidelines for Sitemaps

  • A Sitemap must contain less than 50,000 URLs and cannot be larger than 50MB (uncompressed). To solve for a sitemap that is larger than 50MB, split your Sitemap into multiple Sitemaps.
  • If you have more than one Sitemap, you can list them in a Sitemap index file. A Sitemap index file is basically an XML Sitemap of your XML Sitemaps.
  • Keep the same syntax for all URLs. For instance, don’t use http://example.com if you specify your site location as http://www.example.com/. Your list of URL’s should be the same as what your site location uses.
  • Your  URLs should not include session IDs.
  • Make sure your Sitemap specifies the following XML namespace: xmlns="http://www.sitemaps.org/schemas/sitemap/0.9".
  • Use UTF8-encoding for your Sitemap.
  • you don’t need to submit a separate Sitemap if your site is accessible on both the www and non-www versions of your domain.

CSS3 Selectors and How to Use Them

This article will help you learn about CSS selectors. The use of CSS selectors is not only a great way to stand out from the everyday web designer, but will simplify your code and minimize the use of jQuery and javascript.

Let’s start with listing all the different types of selectors, from CSS level 1 to CSS level 3.

Pattern Description Type Level
* any element Universal Selector CSS2
alpha an element of type alpha Type Selector CSS1
alpha[foo] an alpha element with a “foo” attribute Attribute Selector CSS2
alpha[foo="bar"] an alpha element whose “foo” attribute value is exactly equal to “bar” Attribute Selector CSS2
alpha[foo~="bar"] an alpha element whose “foo” attribute value is a list of whitespace-separated values, one of which is exactly equal to “bar” Attribute Selector CSS2
alpha[foo^="bar"] an alpha element whose “foo” attribute value begins exactly with the string “bar” Attribute Selector CSS3
alpha[foo$="bar"] an alpha element whose “foo” attribute value ends exactly with the string “bar” Attribute Selector CSS3
alpha[foo*="bar"] an alpha element whose “foo” attribute value contains the substring “bar” Attribute Selector CSS3
alpha[foo|="en"] an alpha element whose “foo” attribute has a hyphen-separated list of values beginning (from the left) with “en” Attribute Selector CSS2
alpha:root an alpha element, at the root of the document Structural pseudo-classes CSS3
alpha:nth-child(n) an alpha element, at the n-th child of its parent Structural pseudo-classes CSS3
alpha:nth-last-child(n) an alpha element, the n-th child of its parent, counting from the last one Structural pseudo-classes CSS3
alpha:nth-of-type(n) an alpha element, the n-th sibling of its type Structural pseudo-classes CSS3
alpha:nth-last-of-type(n) an alpha element, the n-th sibling of its type, counting from the last one Structural pseudo-classes CSS3
alpha:first-child an alpha element, first child of its parent Structural pseudo-classes CSS2
alpha:last-child an alpha element, last child of its parent Structural pseudo-classes CSS3
alpha:first-of-type an alpha element, first sibling of its type Structural pseudo-classes CSS3
alpha:last-of-type an alpha element, last sibling of its type Structural pseudo-classes CSS3
alpha:only-child an alpha element, only child of its parent Structural pseudo-classes CSS3
alpha:only-of-type an alpha element, only sibling of its type Structural pseudo-classes CSS3
alpha:empty an alpha element that has no children (including text nodes) Structural pseudo-classes CSS3
alpha:link an alpha element being the source anchor of a hyperlink of which the target is not yet visited Dynamic pseudo-classes CSS1
alpha:visited an alpha element being the source anchor of a hyperlink of which the target has already been visited Dynamic pseudo-classes CSS1
alpha:active, alpha:hover, alpha:focus an alpha element during certain user actions User action pseudo-classes CSS1 & CSS2
alpha:target an alpha element being the target of the referring URI Target pseudo-class CSS3
alpha:lang(fr) an element of type alpha in language “fr” (the document language specifies how language is determined) :lang() pseudo-class CSS2
alpha:enabled, alpha:disabled a user interface element alpha which is enabled or disabled UI element states pseudo-classes CSS3
alpha:checked a user interface element alpha which is checked (for instance a radio-button or checkbox) UI element states pseudo-classes CSS3
alpha::first-line the first formatted line of an alpha element ::first-line pseudo-element CSS1
alpha::first-letter the first formatted letter of an alpha element ::first-letter pseudo-element CSS1
alpha::before generated content before an alpha element ::before pseudo-element CSS2
alpha::after generated content after an alpha element ::after pseudo-element CSS2
alpha.warning an alpha element whose class is “warning” (the document language specifies how class is determined). Class selectors CSS1
alpha#omega an alpha element with ID equal to “omega” ID selectors CSS1
alpha:not(s) an alpha element that does not match simple selector s Negation pseudo-class CSS3
alpha omega an omega element descendant of an alpha element Descendant combinator CSS1
alpha > omega an omega element child of an alpha element Child combinator CSS2
alpha + omega an omega element immediately preceded by an alpha element Adjacent sibling combinator CSS2
alpha ~ omega an omega element preceded by an alpha element General sibling combinator CSS3

There are several types of CSS selectors, let’s try to define them.

Universal Selector - The universal selector ( * ) selects any element type of a qualified name. It  is common among several languages to use an * as an universal type selector.

*[hreflang|=en]

Type Selector - Represents an instance of the element type in the document tree.

p

Attribute Selector – Used to select an element based on the elements attribute.

a[href="http://www.somedomain.com/"]

Structural pseudo-classes – Permits the selection based on extra information that lies in the document tree but cannot be represented by other simple selectors or combinators.

There are several types of pseudo-classes.

:root - Represents the root element in the document.

:nth-child() - Select a child element of a parent element. In order to to style every other row of a table you could write tr:nth-child(odd) or tr:nth-child(even).

:nth-last-child() - Select an element that has siblings after it in the DOM.

tr:nth-last-child(odd)

:nth-of-type() - Select an element that has siblings with the same expanded element name after it in the document tree.

body > h2:nth-of-type(n+2):nth-last-of-type(n+2)

The preceding code shows the selection of all h2 children of a body except the first and last.

:first-child - Select an element that is the first child of another element.

div > p:first-child

:last-child - Select an element that is the last child of another element.

ol > li:last-child

:first-of-type - Select an element that is the first sibling of its type in the list of children of its parent element.

dl dt:first-of-type

:last-of-type - Select an element that is the last sibling of its type in the list of children of its parent element.

tr > td:last-of-type

:only-child - Select an element that has a parent element and whose parent element has no other element children.

:only-of-type - Select an element that has a parent element and whose parent element has no other element children with the same expanded element name.

:empty  - Represents an element that has no children at all.

An example of :empty would be <p></p>

Dynamic pseudo-classes

:link and :visited  - Applies to links that have not yet been visited and have been visited, respectively.

:hover  - Applies to links or elements when a mouse or other input device “hovers” over a link or element.

:active  - Applied when a user clicks a link, but does has not released the click.

:focus – This can be used for when a control (input box) has focus.

Target pseudo-class

:target - The best way to explain this is with an example.

http://example.com/html/top.html#section_2

This URL has an anchor attached to it – #section_2. The #section_2 is referred to as a fragment identifier. You could add something like *:target { color : red } to apply the color red to the element that is referenced by the fragment identifier. And by using the * you are applying the color red to all anchors.

Language pseudo-class

:lang is used to denote the type of language a particular section of a page or entire page is written in. For example you could add html:lang(en) to let everyone know you page is written in English.

Element States pseudo-classes

:enabled and :disabled is used for controls like check boxes and radio buttons. It’s possible to have an enabled state and disabled state for each control on the page.

:checked is similar to :enabled and :disabled. For instance, if a radio button is selected or a check box checked the control is in the enabled state.

::first-line pseudo-element

The ::first-line pseudo-element describes the contents of the first formatted line of an element. For instance, p::first-line { color: red } would change the text color of the first line to red.

::first-letter pseudo-element

Similarly to ::first-line pseudo-element is the ::first-letter pseudo-element. For instance, p::first-letter { color: red } would change the text color of the first letter in the paragraph to red.

::before and ::after pseudo-elements

The ::before and ::after pseudo-elements specify the location of content before and after an element’s document tree content. For instance, the following rule p.note:before { content: “Note: ” } inserts the string “Note: ” before the content of every P element whose “class” attribute has the value “note”:

Class Selectors

Selecting an element with a particular class can be accomplished in a couple ways. div.value and div[class~=value] have the same meaning. However, the convention is to just use .value as it is much simpiler to write and remember.

With Class Selectors it’s also possible to link classes. If you want to apply several classes to a single element you could use the following syntax.

p.pastoral.marine { color: green }

This rule matches when class=”pastoral blue aqua marine” but does not match for class=”psatoral blue”.

 ID Selectors

It is quite possible to set attributes to a type ID. If you declare ID’s in your code you must be certain to declare ID’s unique. The following ID selector represents an h1 element whose ID-typed attribute has the value “chapter1″:

h1#chapter1

The negation pseudo-class

:not(X) is an element that is not represented by its argument. The following selector matches all button elements in an HTML document that are not disabled.

button:not([DISABLED])

Descendant combinator

While building your site you may want selectors to describe an element that is the descendant of another element in the document tree. For example, an em element that is contained within an H1 element.

h1 em

 Child Combinators

A child combinator describes a childhood relationship between two elements. The following selector represents a p element that is child of body:

body > p

Adjacent sibling combinator

The adjacent sibling combinator is made of the “plus sign” (+) character that separates two sequences of simple selectors. The following selector represents a p element immediately following a math element:

math + p

General sibling combinator

The general sibling combinator is made of the “tilde” ( ) character that separates two sequences of simple selectors.

h1 ~ pre

Hopefully, this article has helped you better understand CSS selectors and how and where to use them in your code. This article was based on the W3C Selectors Level 3 recommendation, published on 29 September 2011.

 

Learning about git, node, and heroku, via Peer 2 Peer University

I’ve been engaging in a new social media site called Peer 2 Peer Univerity or P2PU. The object of the University is to help individuals learn various topics and at their own pace. There are several topics to choose from, some are technical and some are not.

I’ve been given the opportunity to pilot a new class which was created by John Britton. The class is a primer for node.js.

Task 1 – Set up your project

In the first task, you are challenged to set up a project to use with git. Downloading and installing git was easy, but I did find it a bit challenging using the command line console that git is based on. I’ve only ever used a command line editor to find my IP Address or ping a site. This was moderately challenging.

Here is the result of the first task.

learning git

Nailed it!

Task 2 – Setup Heroku

Setup Heroku and integrate with git. Heroku is an application platform running in a cloud. Heroku is all about building and deploying web applications making it easy for developers to focus on the design and build steps and removes the headache of managing servers and everything else. Heroku uses git to publish to the cloud and makes setting up an account and installing Heroku very easy.

Heroku uses teminology called stacks. A stack is the environment that Heroku is based on, there are 3 stacks to choose from.

  • Aspen
  • Bamboo
  • Cedar

We use Cedar for a couple reasons. It’s the most recent stack offering new features over the other stacks. I imagine we use the Cedar Stack since we will deal with node.js in the next couple tasks.

Perform the following… $heroku create –stack cedar …to set your Heroku stack and then generate a new SSH public key. I’m not totally sure, but I think I’ve created a “portal” for my web app to be updated to Heroku via ssh and controlled by git on my local machine. This is similar to ftp in that it will automatically update the Heroku cloud – I assume when I push it out with a certain command. I assume that will be taught in the next lesson!

more to come…

 

 

Domain Name System

Domain names, websites, ip addresses, DNS, IPv4, and IPv6, what does it all mean?

All of the above has something to do with the Internet and it’s Domain Name System. The Domain Name System (DNS) is a pretty complicated system, but isn’t too complicated when viewed from a high level.

The internet would be lost without some sort of naming system. This system is a lot like how the US mail works or how the phone system works. Each house has an address, each phone has a phone number and each computer has an IP Address. When you send a letter in the mail or make a phone call the letter or call gets routed just like when you type a domain name into a web browser.

As you type a domain name, like columbus-ohio-web-designer.com, you are directed via the Domain Name System. The Domain Name System uses IP Addresses, which are a string of numbers. All computers have an IP Address much like how all phones have a phone number. For example, an IP Address includes a series of numbers, 192.0.34.65.

When you type the domain name into the browser and press enter, the domain name gets translated into the IP address, which is often referred to as “Resolving the domain name”. The system works because IP Addresses and domain names are unique. It’s for this reason the internet Domain Name System is such a great system. The system would fail without the uniqueness of the IP Addresses.

The original system (IPv4) is based on dot-decimal-notation (192.0.34.65) and was created in 1981.The new system is based on 4 groups of hexidecimal digits separated by colons (2001:0db8:85a3:0000:0000:8a2e:0370:7334) and was created in 1999. The IPv4 dot-decimal-notation supports 4.3×109 or just over 4 billion addresses and IPv6 supports 3.4×1038 or just over 340 undecillion addresses.

So, even with the addition of millions of phones, notepads, and other devices, we should be able to manage with IPv6 for several years!

Thanks for another great challenge P2PU.org!

 

text editor of choice is notepad++

I’ve used many text editors over the years and recently found one that I think I’ll stick with. In the past I’ve used Aptana, Eclipse, MS Visual Studio, MS Expression Web and probably a few I can’t think of the top of my mind.

However, I’ve been using Notepadd++ for about a year and haven’t strayed this entire year. I don’t plan on leaving it in the foreseeable future either! It’s extremely light weight and never crashes.

However, it does have some drawbacks. It doesn’t have a great intellisense system and I can’t debug my .js files. But even with the drawbacks it’s in my design arsenal.

If you haven’t tried it yet, check out Notepad++

Peer 2 Peer University the open education project

Peer to Peer University is an open education project. I recently joined and hope to gain a lot from my peers. The idea is simple. Learn from you peers on all sorts of topics.

I joined P2PU to learn more on the topic of Human Computer Interaction and javascript. I’m a UX Web Application Designer at J.P. Morgan Chase in Columbus, Ohio and have been creating websites for about 3 years. I’ve taught myself pretty much everything I know about web design by reading books and following tutorials online. My first experiences with javascript were copying code straight from DynamicDrive and have more recently been coding my own scripts.

I primarily use HTML (HTML5), CSS (CSS3), javascript, jQuery, PHP, XML, and Photoshop. I’d like to learn more about javascript and jQuery. I would also like learning more about interaction design, UX Design, and usability.

I graduated from Franklin University with a B.S. in Management Information Sciences and was recently accepted into Depaul University’s Graduate Program for Human Computer Interaction. I should start sometime in 2012.

I hope to meet a lot of people at P2PU! And I hope you enjoy my site!