Dennis Plucinik's Web Design Blog http://www.dennisplucinik.com/blog Just another WordPress site Fri, 17 Feb 2012 02:35:41 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Learning Web Design: Basic CSS http://www.dennisplucinik.com/blog/2012/02/13/learning-web-design-basic-css/ http://www.dennisplucinik.com/blog/2012/02/13/learning-web-design-basic-css/#comments Tue, 14 Feb 2012 01:57:47 +0000 Dennis Plucinik http://www.dennisplucinik.com/blog/?p=1088 Continue reading →]]> CSS is the modern way to add style to an HTML web page. There are only a few fundamental concepts you need to grasp before getting started with CSS. In order of importance:

  1. How to connect CSS to HTML elements
  2. Specificity (order of importance)
  3. The box model

How to connect CSS to HTML elements

There are three ways to match a CSS rule to an HTML element. They are by tag, class, or id. Here is an example of each.

<div>this text will be blue</div>
<div class="mySpecialClass">this text will be green</div>
<div id="myUniqueId">this class will be red</div>


<style>
/* tag selector */
div {
  color: blue;
}

/* class selector */
div.mySpecialClass {
  color: green;
}

/* id selector */
div\#myUniqueId {
  color: red;
}
</style>

Using a tag, class, and id selector

The major point here is how you identify elements in CSS. A rule defined for "div" will apply that style to all divs. A rule defined with "." (period) will apply that rule to all HTML elements that include that value in their class attribute. The same is for "#" (pound) which applys to HTML elements with the corresponding id attribute.

One important thing to remember is id's are unique identifiers and so there can only be one per page. You may however, use the same class multiple times per page. Elements can also have multiple classes per element (e.g., <div class="first orange grid">>).

Chaining

A powerful feature of CSS is the ability to chain multiple selectors together. By doing this you can match different elements based on their hierarchical order in the HTML. For example, check out the following rules and how they are applied.

div div { color: red; }
div .someClass { color: red; }
div\#someID {color: red; }

Showing simple parent / child relationships

NOTICE the space between the selectors. This indicates that the latter selector is a child of the former. NOT including a space indicates that the selectors apply to the same element. For example, the following example shows a CSS rule that matches the given HTML snippet using a tag, class, AND id selector.

<div id="myOneAndOnly" class="headline">Hold me</div>



div\#myOneAndOnly.headline {
  color: red;
}

Chaining a tag, id, and class selector

Specificity

Now that you know how ids and classes work, you'll need to understand how the browser determines which rules are more important than others. This level of importance given to each selector is called "specificity". By "specificity" we mean literally "how specifically a CSS rule can target HTML elements." The easiest way to think about this is to consider how many elements a single selector will effect.

  • a tag selector will target every single tag (a LOT of elements)
  • a class selector will target only a subset of tags (quite a few less)
  • an id selector will only target one element per page (exactly one)

Let's start with the basic premise that that the lowest level of specificity is order of appearance. This means if we have multiple rules for the same element, only the last one will be applied.

<body>
<div class="things_I_love" id="NewYork" >This text will be red</div>
</body>


div { color: green; }
div { color: black; }
div { color: red; } /* <-- this rule wins because it's last */

Lowest specificity: order of appearance

Next up the specificity ladder are tags, then classes, then ids in order of increasing specificity. This means, if we take the previous example, and we want to make the text green, we just need to increase the specificity of that rule. We can do this by adding more selectors or by using a different selector with higher specificity.

<body>
<div class="things_I_love" id="NewYork">This text will be green</div>
</body>


body div { color: green; } /* <-- this rule wins */
div { color: black; }
div { color: red; }

Level 1 specificity = tag selectors

Calculating specificity

Another way to quickly figure out how your CSS is going to get parsed is to calculate a specificity score. Following the math in this graphic should cover you for about 99% of the time. Basically what we're doing is applying an order of magnitude multiplier to each of the three selectors. This is because for each of the three tiers: tag, class, & id, even using one selector from a higher tier will trump any number of lower tier selectors. For example, you could have 50 class selectors trying to set your text color to red, but if another rule uses even one id selector to set the color to blue, blue will win.

CSS Specificity Calculation Diagram / Infographic

CSS Specificity Calculation Diagram

More resources explaining specificity

If you're still stumped, here are some other resources to try and explain this concept differently (one example uses Star Wars characters to explain the ranking!). Also, you'll find that I drew a lot of inspiration from these posts, especially the one from css-tricks. My diagram is essentially a simplified version of theirs.

The Box Model

This diagram illustrates the relationship between the primary CSS properties of all HTML elements. It is important to understand this model since you will regularly need to calculate how much total space your elements can take up on the page. For instance, in the element illustrated below if the width was set to 300px, and padding, border, and width were all each 10px, the total width taken up by the element would be 360px (300 + (10 * 2) + (10 * 2) + (10 * 2)).

CSS Box Model Diagram

CSS Box Model Diagram

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. - W3C

Before beginning to code a website, we need visually break apart the design into rectangular sections. This process used to be done in the context of an HTML table since CSS support wasn't widespread among browsers at the time. Nowadays, we can think in the context of pure CSS based layouts. Ultimately this gives us more freedom over the layout while retaining the semantic value of the HTML document.

If we take this website, we can clearly see how the sections break down into rectangles. Each of the rectangles will follow the rules of the box model.

CSS Layout illustrating use of the box model

CSS Layout illustrating use of the box model

In the next post, I will explain how we use positioning and floats to bring structure to our markup.

In Conclusion

If you have managed to follow along until this point, congratulations! You have a good enough understanding of CSS to move on to bigger and better things. Yes I admit it hasn't been too sexy so far but trust me once we get to positioning, floats, and cross-browser quirks, things are really going to start heating up :)

Helpful Articles

20 Websites To Help You Learn and Master CSS
meyerweb.com

Related Books

]]> http://www.dennisplucinik.com/blog/2012/02/13/learning-web-design-basic-css/feed/ 0 Learning Web Design – Series Introduction http://www.dennisplucinik.com/blog/2012/02/02/learning-web-design-series-introduction/ http://www.dennisplucinik.com/blog/2012/02/02/learning-web-design-series-introduction/#comments Thu, 02 Feb 2012 20:00:04 +0000 Dennis Plucinik http://www.dennisplucinik.com/blog/?p=1061 Continue reading →]]> Starting January 27th I started teaching Web Design 1 at Parsons The New School for Design in New York City. I will be producing quite a bit of content in the next few months and I'll use this blog to expound on the in-class discussions.

You may follow along via the course website:
http://dennisplucinik.github.com/Parsons

You can access the syllabus, all the slides and additional resources as well.

Topics I Will Cover

Here is a short synopsis of the topics I'll be covering in the class in order of occurrence.

  • History of the web and HTML
  • Website fundamentals
  • HTML basics
  • CSS basics
  • JavaScript (i.e., jQuery) basics
  • HTML5
  • CSS3
  • Intermediate JavaScript
  • PHP & MySQL

Each week I assign a few articles to read and an activity (usually a tutorial or simple task related to the week's content). I also briefly recap the previous week's reading assignment at the beginning of each class. In addition to the in-class discussion I plan to write a more well thought out response of my own to each reading here on this blog. So to my friends who want to participate in this discussion outside of class, this is the appropriate venue. The class discussion will remain private although any of my students are welcome to engage with me here as well.

Hopefully my conversations here will help spark new ideas in class and vice versa. If you have any thoughts please let me know in the comments below.

Also, if you want real time updates when I post new articles, follow me on Twitter at @dennisplucinik.

Thanks for reading!

]]> http://www.dennisplucinik.com/blog/2012/02/02/learning-web-design-series-introduction/feed/ 0 Learn HTML5 Series Introduction http://www.dennisplucinik.com/blog/2012/02/01/learn-html5-series-introduction/ http://www.dennisplucinik.com/blog/2012/02/01/learn-html5-series-introduction/#comments Wed, 01 Feb 2012 13:52:42 +0000 Dennis Plucinik http://www.dennisplucinik.com/blog/?p=995 Continue reading →]]> I recently started a meetup group here in NYC called Learn HTML5 under the premise that there are "over 1 million Google searches each day by people asking what is HTML5?". The purpose of the meetup is to answer that question for you. I want to cover this topic via a series of articles under the same name "Learn HTML5".

What I want to do is start with the basics. I think the key to understanding HTML5 is to learn the new features and figure out which are relevant to you and your project. For the first part of this series I will be focusing on aspects of HTML5 relevant to developers and so, we will be looking at a lot of code. My goal is for you to deeply understand the significance of these new technologies and use your knowledge to help push the web forward.

This series will help you understand those two things - the components of HTML5 and which are relevant to you. I've broken down the sections for coders, designers, and managers as there are different implications for each group.

Content Strategy

The content for this series will be made available through several channels. The goal is to enable access to this content through as many channels as possible.

Each article will represent one chapter. Chapters will be consolidated into one of three different books based on group (i.e., coders, designers, and managers). Each month I will be presenting a meetup in New York City covering the latest article. Prior to each month's meetup, a full article will be available for download via Amazon, and iBookStore self-publishing. Each book will be available for download once I have presented all the topics. Members of the meetup will have access to the full SlideShare presentation as well as a free download of the final book for each group once we have completed all the presentations.

Here is the proposed content broken down by group:

Learn HTML5: For Coders

  • What is it?
  • Web Application Architecture
  • Building an Offline Capable Book Reading App
  • Creating QR Codes with Canvas
  • Creating a Location Based Mobile Web App
  • Embedding Video and Audio Using the VideoJS Library

Learn HTML5: For Designers

  • Designing Responsive Interfaces
  • Enhancing a WordPress Theme with HTML5
  • Replacing Sprites with CSS3

Learn HTML5: For Managers

  • Why it is Important for Businesses
  • Opportunities for Mobile Platforms
  • How to Interview an HTML5 Candidate
  • Implications on Content Strategy
  • SEO Implications and Text-Level Semantics
  • What the Future Holds

In Closing

That's about all I have to say for now. I know completing everything I've planned so far is a tremendous undertaking but I like a good challenge ;) The response I've gotten so far on the Meetup group has been very encouraging. If you haven't joined yet, you may do so here: http://www.meetup.com/Learn-HTML5/ and leave me some suggestions or feedback!

Also, If you'd like me to cover anything specific that's not listed, let me know, I'd like to build the content around what people want. You can even take a quick poll here: Which HTML5 Topics Would You Like to Know About?.

Until next time.

]]> http://www.dennisplucinik.com/blog/2012/02/01/learn-html5-series-introduction/feed/ 0 What is HTML5? http://www.dennisplucinik.com/blog/2012/01/27/what-is-html5/ http://www.dennisplucinik.com/blog/2012/01/27/what-is-html5/#comments Fri, 27 Jan 2012 18:49:38 +0000 Dennis Plucinik http://www.dennisplucinik.com/blog/?p=992 Continue reading →]]> In the last year I've seen an almost frantic rush of companies trying to find HTML5 developers, and subsequently a rush of developers scrambling to fill that demand. However, both sides seem unable to answer questions like, "What does HTML5 actually mean?", "Can I call myself an HTML5 developer?", "What do I look for when hiring an HTML5 developer?" The first question I always ask about the project is "Which components actually require HTML5?" From there we can begin to narrow down what we're looking for and eventually answer all the other questions. I ask this first because I frequently hear things like "It has to be optimized for iPad" which does NOT automatically mean you need HTML5. In many cases, the project may even just need a good JavaScript developer.

It's Not Just Version Five

Saying HTML5 is "the fifth revision of HTML" is misleading. Whereas previous versions of HTML primarily consisted of markup upgrades such as new semantic tags, or stricter syntax, this version encompasses much more.

Paving the Cow-Paths

The general theme behind HTML5's development effort has been to pay close attention to what developers are already doing when adding new features. This is why we have things like rounded corners built into the CSS3 spec, as well as the new <video> tag.

HTML5 is meant to take existing conventions, make them easier to implement, more performant, and native.

Combining Existing Technologies

With the publication of HTML 4 in 1997, the primary focus was on deprecating presentational tags (e.g., <font>) in favor of using CSS. At that point, HTML, CSS, and JavaScript played distinctly different roles and were referred to individually.

With HTML5, we have a perceived marriage of those three primary front-end technologies. In truth, they are still distinctly different but you can think of them as playing on the same team in the web-browser game.

Role Switching

Where one technology was previously used to do certain things, we now have native support built in. For example, CSS3 takes over some of the tasks previously managed by JavaScript like mouseover transitions, simple animations, rounded corners, drop shadows, & text-shadows. New semantic markup replaces the need to use CSS for marking up content by adding worthless class names. Role switching can be illustrated clearly in text-level semantics. For example, instead of writing:

<div class="header">

we now write:

<header>

There are a host of other new semantic tags including footer, section, article, aside, and more. The new <audio> and <video> tags have given us an option other than relying on 3rd party plugins for managing rich media. We can now augment our Flash video player implementations with the capability of operating on non-Flash supported devices such as iPhone and iPad.

HTML5 and Mobile Devices

Mobile devices have been the central topic of many HTML5 conversations and with good reason. One component of the HTML5 spec is device access. Which means some of the hardware on your mobile device can be accessed with JavaScript. This includes your device’s GPS, address book, calendar, and more.

HTML5 is heralding in an era of thin clients and mobile applications with APIs for building more native-like functionality such as local storage, application cache, and file APIs. This allows developers to design applications that remain functional even when there is no internet connection - much like a native app. Apple has even added helpers to WebKit (e.g., viewport size management) making the transition more seamless.

A Little More History

Before we get in over our head with all of the cool new features of HTML5, it’s worth it to have some understanding of how we got here.

HTML Version Timeline

Let’s go back to 1991. The first musings of HTML were published in a document titled “HTML Tags” by Tim Berners-Lee. Though he is considered by many to be the father of the internet (if not for the sake of that document alone), he indeed was standing on the shoulders of those who came before him.

Before HTML in 1991, there was SGML in 1974, and before that - GML in 1969. HTML was built on the concept of refining an existing technology that could almost do the job, but not quite. HTML5 is a continuation of this tradition.

Microformats

Remember I talked about “paving the cowpaths”? The way an HTML spec gets published involves a bit of “running before you can walk”. Since the process involves such a long period of revisions, browsers vendors incorporate proposed specs before they are actually accepted by the standards committees (i.e., the W3C). The spec authors (i.e., WHATWG) know this and so in order to usher these new features as smoothly as possible, they strongly consider what users are already doing when developing a new feature.

Microformats are an example of where existing behavior formed the foundation of new HTML5 specs. Microformats are an agreed upon convention for identifying common data types such as blog post elements including publish date, title, author name, etc. The goal is to create a more semantically rich document and microformats accomplish this (albeit in a round-about way) by adding class names to corresponding elements (e.g., <div class="hnews hentry item">). Microformats in HTML5 are called "text level semantics" which we discussed earlier with the header, footer, section, article, and aside tags.

What's Next?

As a general summary we could say HTML5 provides a new set of elements meant to give native support for existing technologies via more semantically rich documents.

It is comforting to know that there are more features coming with every new browser version. The biggest hurdle any new language faces is adoption. With HTML5 that means adoption by browser vendors of proposed new features. Each browser adopts a different number of new features with each new version getting us slowly closer to full adoption. It sounds slow and painful but it is nowhere near as bad as it was in the last decade for two reasons. First, all new browser versions that support HTML5 are using the same parsing engine. This eliminates cross-browser rendering variances. Second, mobile devices running a modern OS (e.g., Android and iOS) have modern browsers installed which support many new HTML5 features. Although this means that yes there is yet another device to support, those devices are all reasonably advanced (as opposed to say, developing for desktop browsers where some users still use IE6.)

What I have briefly tried to describe is where we are, how we got here, and where we are headed. I will continue to go into more detail with this series and hopefully cover at least all of the basic topics soon. if there is something specific you would like to hear about please let me know.

]]> http://www.dennisplucinik.com/blog/2012/01/27/what-is-html5/feed/ 0 2 Beginner Tips for Adobe Illustrator http://www.dennisplucinik.com/blog/2011/07/21/beginner-tips-for-adobe-illustrator/ http://www.dennisplucinik.com/blog/2011/07/21/beginner-tips-for-adobe-illustrator/#comments Thu, 21 Jul 2011 22:49:09 +0000 Dennis Plucinik http://www.dennisplucinik.com/blog/?p=964 Continue reading →]]> I've used Illustrator in the past but I don't honestly remember my way around the interface. So as per my usual routine, I will be recording my intro steps for you and future me.

Here are the first to things that tripped me up. Everything beyond this I'll probably resort to tutorials or just find on my own. Enjoy!

1.) How to change the canvas size

  1. From the menu bar click File > Document Setup
  2. In the Document Setup dialog menu, click the Edit Artboards button (Figure 1-1)

    Document Setup > Edit Artboards - Figure 1-1

  3. In the toolbar you can change your height and width settings (Figure 1-2)

    height and width settings - Figure 1-2

2.) How to draw a rounded corner button

  1. Draw a box with the rounded rectangle tool (Figure 2-1)

    Draw a box with the rounded rectangle tool - Figure 2-1

  2. To change the corner radius, repeat step 1 but before releasing the mouse button press the up or down key to marginally increase and decrease the radius respectively, or press the left or right key to fully decrease or increase the roundness respectively.1

Helpful Articles

1http://livedocs.adobe.com/en_US/Illustrator/13.0/help.html?content=WS714a382cdf7d304e7e07d0100196cbc5f-6261.html

Related Books

]]> http://www.dennisplucinik.com/blog/2011/07/21/beginner-tips-for-adobe-illustrator/feed/ 2 JavaScript Explained: Difference Between Logical OR “||” and Bitwise OR “|” http://www.dennisplucinik.com/blog/2011/05/28/javascript-explained-difference-between-logical-or-and-bitwise-or/ http://www.dennisplucinik.com/blog/2011/05/28/javascript-explained-difference-between-logical-or-and-bitwise-or/#comments Sat, 28 May 2011 19:19:36 +0000 Dennis Plucinik http://www.dennisplucinik.com/blog/?p=893 Continue reading →]]> I'm not ashamed to say today I got slammed on a JavaScript pop quiz presented to me by a curious coworker. It is the type of question you might see on a JavaScript-centric job interview conducted by someone who likes giving questions that trip you up : )

Here's the quiz:

var moo = 2;
moo = moo | 1;
alert(moo);

The question is: what is the value of moo in the alert?

If you answered 2, Congratulations! You are part of the majority of JavaScript developers who got this wrong (including myself, and yes I'm being presumptious). The tricky part is the single-pipe on line 2. Naively, I misunderstood it to mean "OR" which in my opinion is understandable since it actually does mean "OR". The problem is that there are two types of OR - Logical and Bitwise. The one presented in the test is the latter.

The official definition for a Bitwise OR is "Returns a one in each bit position for which the corresponding bits of either or both operands are ones." (Mozilla).

Maybe I'm alone here but that sounds like Greek to me.

Helpful Articles

Mozilla: https://developer.mozilla.org/en/javascript/reference/operators/bitwise_operators
http://www.eecs.umich.edu/~bartlett/jsops.html

Related Books

]]> http://www.dennisplucinik.com/blog/2011/05/28/javascript-explained-difference-between-logical-or-and-bitwise-or/feed/ 0 6 SEO Secrets That Can Get Your Website Banned From Google http://www.dennisplucinik.com/blog/2011/05/21/6-seo-secrets-that-can-get-your-website-banned-from-google/ http://www.dennisplucinik.com/blog/2011/05/21/6-seo-secrets-that-can-get-your-website-banned-from-google/#comments Sun, 22 May 2011 02:07:10 +0000 David Murton http://www.dennisplucinik.com/blog/?p=924 Continue reading →]]> Professional SEO services and website developers go to great lengths to ensure their clients have top notch websites that generate as much traffic as possible. Google is always on the lookout for pages that use dirty tricks to attract visitors. This post explores six of those tricks, from a different, more humorous perspective.

Ad click schemes

Click-bot programs are tools designed to scour a site from behind proxies and click on ads. Proxies are magical gateways in a cyber-sea of unicorn ponies and wizards that protect web sites from those evil spiders Google uses to destroy revenue and consume the souls of the virtuous. For those who require a more human touch in making money online, there are sites, or click rings, that advertise "AdSense click" revenue generation. Join a click ring today to Get Rich Quick.

Hosting malicious software

This includes spyware, trojans, adware, malicious Javascript code and so on. Web surfers tend to grow bored after a short time online. That is why they surf the web instead of staying on a single page for longer than a few seconds. The insightful webmaster learns how to cajole users into finding the best content - their content - via malware.

For those uninitiated in this art, it is highly recommended to avoid patching server vulnerabilities. Before long a friendly cyberspace wizard will find those vulnerabilities and, sans your humble request for help, take your online presence to the next level of enlightenment. Wizards typically operate from behind seven or more proxies, weaving their magic to direct unwary passersby to your site, increasing revenue as a result.

Paid links

Why build links in a way Googlebot considers natural when an unnatural approach maximizes cash flow? So-called natural link building, by hosting content others find valuable, takes forever to produce substantial results. The quickest way to earn money with link building is to pay for as many links as feasible, as fast as possible. Googlebot checks for rapid backlink accumulation, but there is little chance of ever being caught.

Stacking title tags

Create multiple title tags for each web page in a site. People and web browsers see only one title tag, so this is a completely safe practice, right? Googlebot is coded to search for this, but what is the likelihood of being caught? If you said slim to nil, you are not exactly right, but what is life without a little danger? Take a chance and experience the excitement.

Doorway pages

A quick Meta refresh never hurt anyone. This can be implemented with 301 or 302 redirection headers, directing a user agent to a specified page. Also called bridge, portal or gateway pages, doorway pages are a boon for business. Matt Cutts may disagree, but consider: Visitors searching for information about "sea turtles" end up on your page about climate change. Brilliant. Implement this strategy right away. It is good for business, and will have you snickering into the night.

Cloaking

Cloaking is the art and science of showing a search engine spider one page, but tactfully displaying another page to users. For instance, when the IP address of a requesting user corresponds to that of a spider, the web server returns a page about kittens. When a human user requests that same page, however, they see a page of pornography. Google has stated that cloaking is okay for certain purposes, like delivering a page based on a user's language and location, but that serving pages based on user agent data could be seen as deceptive.

In all seriousness, ad click schemes, malware, fast link building, stacked titles, doorway pages and deceptive cloaking should be avoided. Those practices are well-known to Google's search team, and Googlebot's code discovers these, and similar, underhanded tactics with ease.

About the author

David MurtonDavid Murton has been helping companies build and maintain their online relationships with customers since 2006. He is also a professional writer and blogger, with a particular interest in the open source Drupal platform. On a more personal note, David is an avid piano and accordion player, drawn especially to music of the classical and romantic periods.

]]> http://www.dennisplucinik.com/blog/2011/05/21/6-seo-secrets-that-can-get-your-website-banned-from-google/feed/ 10 Setting up an Amazon EC2 Server to Run TeamCity http://www.dennisplucinik.com/blog/2011/04/06/setting-up-an-amazon-ec2-server-to-run-teamcity/ http://www.dennisplucinik.com/blog/2011/04/06/setting-up-an-amazon-ec2-server-to-run-teamcity/#comments Thu, 07 Apr 2011 03:04:11 +0000 Dennis Plucinik http://www.dennisplucinik.com/blog/?p=734 Continue reading →]]> This post is a follow-up to my previous post - Intro to Continuous Integration with TeamCity. As I learned, TeamCity is best (for my project) when set up on an Amazon EC2 instance. Since we're using Git (via GitHub) for source control, TeamCity can listen to our GitHub repo and recognize when a commit has been made so it can run any appropriate build procedures.

This post makes the following assumptions:

In this post I will walk you through the following steps:

  1. Setting up an Amazon EC2 account
  2. Configuring and launching an instance
  3. Downloading and installing TeamCity on the instance
  4. Configuring TeamCity to communicate with GitHub*
  5. Saving the instance for later use

* These items will be covered in a later post.

Setting up an Amazon EC2 account

First, sign up for an account here: http://aws.amazon.com/ec2/

Once you have your account and billing in order, you should see Figure 1-1 when you log in. This is the main dashboard. You will spend most of your time with AWS working within this interface.

Figure 1-1 - Amazon EC2 Console Dashboard

Figure 1-1 - Amazon EC2 Console Dashboard

Configuring and launching an instance

From the Console Dashboard, click the "Launch Instance" button. A popup will appear that looks like Figure 2-1. If for some reason you don't see a "Getting Started" section with a "Launch Instance" button on the main dashboard, you can click the "Instances" link in the Navigation panel, then click the "Launch" button inside that screen. It should be to the top left of the main panel.

Figure 2-1 - Request Instances Wizard: Choose an AMI

Figure 2-1 - Request Instances Wizard: Choose an AMI

Click the "Select" button next to Basic 32-bit Amazon Linux AMI 2011.02.1 Basic. Figure 2-2 will appear.

Figure 2-1 - Request Instances Wizard: Instance Details

Figure 2-1 - Request Instances Wizard: Instance Details

From here I changed the Instance Type drop down to "Micro (t1.micro, 613MB)" just because I was testing and I believe the Micro instances are free. Leave all the other options set to default and click "Continue". You should now see Figure 2-3. (Update/Note: Micro instances are free for now, I'm not sure where I read this but they will eventually charge for using it. It may be a startup trial or something. Also, there is a specific reason why we're using a Micro instance which I will explain later. Also I've found out that our TeamCity system will require another larger instance for another reason which I will explain later.)

Figure 2-3 - Request Instance Wizard: Instance Details

Figure 2-3 - Request Instance Wizard: Instance Details

Leave all the defaults, click "Continue". See Figure 2-4.

Figure 2-4 - Request Instance Wizard: Instance Details

Figure 2-4 - Request Instance Wizard: Instance Details

I added "TeamCity Server" to the value of the first Name/Value pair. I'm not sure where this information is surfaced later but it seems fitting for now. Click "Continue". See Figure 2-5.

Figure 2-5 - Request Instance Wizard: Create Key Pair

Figure 2-5 - Request Instance Wizard: Create Key Pair

Here again, I don't know what the purpose of the name is / where it gets surfaced later / etc. I just followed the recommendation and set the name for my key pair to "TeamCityKey". Follow the rest of the instructions (you will download a .pem file for later use). Click "Continue" when it becomes available. See Figure 2-6.

Figure 2-6 - Request Instance Wizard: Configure Firewall

Figure 2-6 - Request Instance Wizard: Configure Firewall

By default, I believe SSH is added as a rule. If it is not, select it from the drop down and click "Add Rule". Also, select HTTP from the drop down and click "Add Rule". This restricts connections to those two types so our other services won't have a problem connecting. Use whatever Group Name and Description you want, or leave the defaults like me. Click "Continue". See Figure 2-7.

Figure 2-7 - Request Instance Wizard: Review

Figure 2-7 - Request Instance Wizard: Review

This is the final review before spinning up the new instance. If everything looks good, click "Launch". You should now see Figure 2-8.

Figure 2-8 - Launch Instance Wizard

Figure 2-8 - Launch Instance Wizard

You can either read about all the other AWS features, or just click "Close" like me. You should now see a table row with your instance info and a status of "running". See Figure 2-9.

Figure 2-9 - Instance running

Figure 2-9 - Instance running

Once the status switches from "pending" to "running", right click anywhere on the row, you will see a popup (Figure 2-10), click "Connect" and you will see Figure 2-11.

Figure 2-10 - Running instance option menu

Figure 2-10 - Running instance option menu

Figure 2-11 - Connect Help - Secure Shell (SSH)

Figure 2-11 - Connect Help - Secure Shell (SSH)

This part screwed me up. IMO these instructions are painful. It's stuff like this that bother me. In hindsight, now that I have done this I think "that was a stupid mistake" and probably have the same unhelpful mentality as people around me who just said "oh that's easy" when I asked for help. I fortunately do have at least one friend who took the time to talk me through it despite my bitching and moaning.

So here are the easy instructions - copy that line of code in the example, paste it into your SSH client (PuTTY, Terminal, etc.) and hit enter. If this doesn't work, read through those 4 instructions again, specifically step 3 regarding setting the file permissions. You might just have to run chmod 400 on it first. Another possible error (the one I encountered) was this message:

Please login as the ec2-user user rather than the root user

To remedy this, just change the "root@" part of your command line to "ec2-user@" like this:

ssh -i {YourKeyName}.pem ec2-user@ec2-xxx-xx-xx-xxx.compute-1.amazonaws.com

If this goes well, you should see a little EC2 ascii art, and a blank commmand line. You will likely find yourself in /home/ec2-user/.

FINALLY we can move onto the next step...

Downloading and installing TeamCity on the instance

Now that we have the EC2 instance up and running, we can move back to my previous post which elaborates on downloading and installation:
Intro to Continuous Integration with TeamCity: Downloading and installing TeamCity.

Please read make sure you understand the concepts described there before continuing.

Saving the instance for later use

One thing about Amazon EC2 is that whenever you stop an instance, you lose everything. This includes any downloads, installations, configurations, etc. In order to avoid losing all the effort you put into setting up this server you'll need to create an image.

To do this, right click on your instance name, and in the subsequent popup box click "Create Image (EBS AMI)". You should see Figure 3-1.

Figure 3-1 - Create Image

Figure 3-1 - Create Image

Type in an Image Name and Description and click "Create This Image". You should now see Figure 3-2.

Figure 3-2 - Create Image

Figure 3-2 - Create Image

Click "Close". Now if you click "AMIs" in the Navigation panel, you should see your new image processing. See Figure 3-3.

Figure 3-3 - Saved image

Figure 3-3 - Saved image

At this point the next step will be to set up one more EC2 instance for the TeamCity Build Agent to run on. To briefly elaborate, we will save an image of the larger instance, and instruct the micro instance to spin it up when a repo change is detected. I will absolutely document the process of configuring TeamCity to do just that in another post.

In closing

Hopefully this has provided you with some helpful info. If you've got any questions please drop them in the comments below. They're more likely to get answered there either by me or someone else as this is a fairly highly trafficked blog.

Thanks for reading!

Helpful Articles

http://www.dennisplucinik.com/blog/2011/03/25/intro-to-continuous-integration-with-teamcity

http://www.jadurham.com/codevault/amazon-cloud-aws/17-ec2-a-teamcity-youtrack-a-ssl.html
http://confluence.jetbrains.net/display/TCD6/Installing+and+Configu...uringtheTeamCityServer-installingWithTomcat
http://www.jetbrains.com/teamcity/features/amazon_ec2.html

Related Books

]]> http://www.dennisplucinik.com/blog/2011/04/06/setting-up-an-amazon-ec2-server-to-run-teamcity/feed/ 3 Intro to Continuous Integration with TeamCity http://www.dennisplucinik.com/blog/2011/04/06/intro-to-continuous-integration-with-teamcity/ http://www.dennisplucinik.com/blog/2011/04/06/intro-to-continuous-integration-with-teamcity/#comments Thu, 07 Apr 2011 03:04:02 +0000 Dennis Plucinik http://www.dennisplucinik.com/blog/?p=709 Continue reading →]]> In my most recent endeavor, I am redesigning the build process for a new project. I've decided to use Git for source control, TeamCity for CI (Continuous Integration), Amazon EC2 for hosting the CI server, and a MediaTemple Dedicated Virtual server for hosting the production and staging sites.

Though some people may have you believe setting this all up is easy, I can comfortably admit that in my experience it has not been. Hence, the blog posts which will serve to remind me how to get back into this mess should I ever accidentally find my way out.

What This Article Will Cover

  • What is TeamCity?
  • Where does it fit in?
  • Setting up TeamCity
  • Downloading and installing TeamCity on an Amazon EC2 instance
  • Configuring TeamCity

What is TeamCity?

TeamCity is "proprietary continuous-integration server by JetBrains with free professional edition" (Wikipedia). I'm not going to explain what CI is so if you don't know please ask Wikipedia. After having set up Git properly, I found that GitHub has has built in functionality to integrate with TeamCity. Considering my setup goals of having exactly that, my next logical step is to go check out TeamCity.

Honestly, I did not know if TeamCity was a downloadable program meant for local use, a web service, a program meant for server use, etc. Since we've got multiple people on our team, I'd like to keep the amount of local configuration for each member to a minimum. I'd also like to be able to administer this setup and make changes, on the fly without having to bother the other guys. Fortunately, after poking around a lot what I have found out is that TeamCity is capable of doing this. We will do it by installing it on an Amazon EC2 instance (but this is not the only way - you could use your own server.)

Where does it fit in?

Here is a diagram of my current project's software stack/architecture. It includes some of what we currently have implemented, as well as everything we'd like to eventually have. You can see where TeamCity fits into the system.

Figure 1-1 - Our application roadmap

Figure 1-1 - Our application roadmap

Basically TeamCity listens to your Git repository for changes. As soon as a push occurs on Git, TeamCity spins up (another) Amazon EC2 instance, then the TeamCity build agent starts up and fires off some Maven commands. These commands will sequentially kick off the following general functions:

  1. Validate and compile JavaScript
  2. Run unit tests on JavaScript and PHP
  3. Run integration tests in Selenium
  4. If everything passes, kick off a build into production

I will likely go into thorough detail on each of these steps in a future post since as with everything else, I tend to forget which process I went through.

Setting up TeamCity

Since TeamCity is an application you download, you'll need a machine to run it on. Either you can run it on your local machine, or set it up on a public web server like Amazon EC2 (which is what we're going to do). Read this post on Setting up an Amazon EC2 Server to Run TeamCity if you do not already have it set up.

Downloading and installing TeamCity on an Amazon EC2 instance

This is where I got stuck. Basically I didn't know how to download a file from the command line in Linux. I knew I could click a link from a browser and then execute the file that way. I just didn't have this one critical piece of information. In case you are in the same 0.01 percent of the population as I was, the solution is a command called "wget". I don't know why I never knew it. I just didn't (I even saw the Social Network.)

Now that I've forked over that embarrassing little nugget, let's just get to it already.

Type this into your command line:

wget http://download.jetbrains.com/teamcity/TeamCity-6.0.3.tar.gz

Provided you haven't navigated yourself into a restricted folder before you pressed Enter, this should work without issue.

To install the instance, next we need to unpack the download. Type this into your command line and press Enter:

tar -xvzf TeamCity-6.0.3.tar.gz

Note about the "-xvzf" (all lowercase) parameters:

  • x means "extract files from an archive". This is required because a .tar file is an archive.
  • v means "verbosely list files processed". It's not necessary but will give you a better understanding of what changes are being made.
  • z means "filter the archive through gzip". This is required because the .gz indicates this file has been compressed using gzip, and so needs to be decompressed using gzip.
  • f means "force-local" or "archive file is local even if it has a colon". I can only imagine this prevents some bad stuff from happening. Honestly though IDK.

If everything went as planned, you will have see a bunch of text flying by for a few seconds, and then you should see a quiet little command line. The unpacking process should have created a new folder on your machine called TeamCity. What we have now is an application installed which is only waiting to be started so we can access it from a web browser. To do just this, type the following into the command line and press Enter:

cd TeamCity
bin/teamcity-server.sh start

Unfortunately I ran into some very weird problems at this point (which have since been resolved) related to my webserver access configuration which apparently was preventing me from accessing my TeamCity web interface. I may update this post with that information if enough people tell me they have the same problem. I don't think my problem was a fluke considering everything (even the EC2 instance) was a fresh install. So in the spirit of moving on (sorry) I'm going to assume you did not run into the same problems as me here. If in fact you did not have problems, then you should be able to simply access your new TeamCity install by following the link provided by Amazon for your EC2 server + "/TeamCity" (See this post: Figure 2-11 - Connect Help - Secure Shell (SSH)). Please let me know in the comments if you get hung up here and I will be happy to dig up the details and elaborate.

Configuring TeamCity

Now that you have an EC2 instance running which you have installed and can access your TeamCity server, you will need to configure it to do the interesting stuff that we described above.

Since I believe this topic warrants it's own post, I have done just that. Please read: [link removed] ...I'm still working on this part.

In closing

Hopefully this has provided you with some helpful info. If you've got any questions please drop them in the comments below. They're more likely to get answered there either by me or someone else as this is a fairly highly trafficked blog.

Thanks for reading!

Helpful Articles

http://www.dennisplucinik.com/blog/2011/04/06/setting-up-an-amazon-ec2-server-to-run-teamcity/

http://www.modelmetrics.com/wp-content/uploads/2011/01/Teamcity-install.pdf
http://confluence.jetbrains.net/display/TCD65/Setting+Up+TeamCity+for+Amazon+EC2

//http://osherove.com/blog/2010/5/31/running-teamcity-from-amazon-ec2-cloud-based-scalable-build.html

Related Books

]]> http://www.dennisplucinik.com/blog/2011/04/06/intro-to-continuous-integration-with-teamcity/feed/ 9 “Pay Whatever and Download” jQuery Plugin http://www.dennisplucinik.com/blog/2011/04/03/jquery-pay-whatever-and-download/ http://www.dennisplucinik.com/blog/2011/04/03/jquery-pay-whatever-and-download/#comments Mon, 04 Apr 2011 03:06:36 +0000 Dennis Plucinik http://www.dennisplucinik.com/blog/?p=813 Continue reading →]]> Today I want to release my very first jQuery plugin. Actually I'm not going to post it officially to jQuery's plugin repo yet. I just want to get it out there small-time so I have a chance to tweak it a bit before going all spotlights and ammunition over on jQuery's site. With my recent return to blogging regularly, I have been thinking of different types of interesting content to create like PSDs, or ebooks, etc... content that will take a lot of time to produce. So I thought of this plugin for one simple reason: Creating content takes time, and for those readers who appreciate that content enough to flip me a buck for it, I say - why not do it in style?

Seriously though, I think this plugin presents a good model. It basically allows you to put your file download link behind one extra click while presenting a super simple form for the reader to optionally pop you a dollar via PayPal. (Having something like Amazon's one-click here would be so money... literally). Hopefully this doesn't piss off too many freeloaders. In any case you can plan on seeing it on every one of my posts that include a download going forward.

Code

This plugin is simply implemented by calling:

$(containerSelector).payWhateverAndDownload({
    fileURL: "http://www.yourdomain.com/whateverFileURL.zip",
    paypalID: "you@youremail.com"
});

Those are the only two properties the plugin needs to run. Everything else has a default however, you can override most things - see the "API" section below.

Screenshot

Figure 1-1 shows what it looks like using the defaults.

Figure 1-1 -

API

Here's my informal API just to highlight that I've abstracted a bunch of things you can override such as:

  • amount label (e.g., "pay any amount")
  • button color one
  • button color two
  • donation amount
  • currency (symbol)
  • PayPal currency code
  • file URL
  • button one text (e.g., "Pay whatever you want and download"
  • button two text (e.g., "Click to download")
  • PayPal ID

I've also coded in a bunch of CSS3 styles but you can override them by sending in a "stylesheet" property in the args object set to a blank space. It is visible but not pretty in IE.

Also, there are some callbacks you can insert into the args object for each important event such as:

  • after init
  • before init
  • first button clicked
  • download button clicked
  • donate button clicked

That about sums it up without going into any more detail about the plugin API. If you're really interested you can just read the code, it's pretty straightforward IMO. So without further ado, I give you a live example of this plugin in action.

Download the plugin!



]]> http://www.dennisplucinik.com/blog/2011/04/03/jquery-pay-whatever-and-download/feed/ 2