Dojo… Get It On! ( Learning Dojo ) – Cody Lindley

March 5th, 2010
No comments

http://www.sitepen.com/blog/2010/03/05/learning-dojo/

 

Check out this blog and get up to speed in a organized fashion.

 

Fantastic post!

alan.huffman Dojo, JavaScript, Web Development

Web Dev : Must haves for WCF 4.0 REST Services & ASP.NET MVC Rc2

March 1st, 2010
No comments

Do your self the favor of learning WCF even if you don’t use it – b/c MVC & WCF are using lots of the same components.

This blog series is amazing: http://blogs.msdn.com/endpoint/archive/2010/01/06/introducing-wcf-webhttp-services-in-net-4.aspx

> Especially (IMHO) this blog on ROUTES: (used in MVC & WCF 4.0) : http://blogs.msdn.com/endpoint/archive/2010/01/25/using-routes-to-compose-wcf-webhttp-services.aspx

 

Beyond that, if you are using ASP.NET MVC RC2… well you need a book, and Jeffrey Palermo has been writing one that you can help him edit on : GIT

> http://github.com/jeffreypalermo/mvc2inaction

 

Learn, Build, Reap.

alan.huffman Uncategorized

.NET is HOT – iPAD announced… Mono answers

January 29th, 2010
No comments

Write for the masses or for hotness…

http://www.infoq.com/news/2010/01/MonoTouch-iPad

alan.huffman .NET, New Devices ,

Dojo Resources (updated) – How to solve issues & build w/ dojo.

January 27th, 2010
No comments

Though dojo is an amazing javascript framework, it’s complexity is mirrored by its various documentation sources. Erick Fleming and I have been working with dojo and some of the more recent additions. This is what we’re using:

 

1. docs.dojocampus.org : Main documentation

This is where the main documentation for dojo can be found, search is good but must be dead on – use google :site docs.dojocampus.org if you don’t know exactly what you are looking for.

  1. There is also a doc-staging.dojocampus.org that has some more recent information – use cautiously.

2. redesign.dojotoolkit.org/ : redesign of the api.dojotoolkit.org

We don’t use the existing api.dojotoolkit.org site very much. The redesign site is better.

> But you may need to switch to OLDER versions (drop down)

image

 

3. Check for bugs at http://trac.dojotoolkit.org/

You can find up to date & tracked bugs, status, etc.. on this site. Very helpful when you are having *strange* issues.

> Also be careful if you are using a CDN, sometimes the patches have not made their way to the CDN’s and you need to use the latest build (e.g. a local copy)

 

4. Check out tests at http://archive.dojotoolkit.org/

Here are were you can find tests of the various widgets in action – helpful for seeing what works, how it works etc…

This is an amazing site / amazing test suite… check it out just for fun (if nothing else).

Directory:

Eye popping, cool D.O.H. = Dojo Objective Harness (WOW these guys are bad asses)

image

alan.huffman Dojo, HTML, JavaScript, Web Development ,

MIME-Types [content-types] :: Cheat Sheet for REST

January 19th, 2010
No comments

http://en.wikipedia.org/wiki/Internet_media_type

 

  • Type x: Non-standard files[10]
    • application/x-dvi: Digital Video files in DVI format
    • application/x-httpd-php: PHP files
    • application/x-httpd-php-source: PHP source files
    • application/x-latex: LaTeX files
    • application/x-shockwave-flash: Adobe Flash files; Documented in Adobe TechNote tn_4151 and Adobe TechNote tn_16509
    • application/x-stuffit: StuffIt archive files
    • application/x-rar-compressed: RAR archive files
    • application/x-tar: Tarball files
  • Type x-pkcs: PKCS standard files
    • application/x-pkcs12: p12 files
    • application/x-pkcs12: pfx files
    • application/x-pkcs7-certificates: p7b files
    • application/x-pkcs7-certificates: spc files
    • application/x-pkcs7-certreqresp: p7r files
    • application/x-pkcs7-mime: p7c files
    • application/x-pkcs7-mime: p7m files
    • application/x-pkcs7-signature: p7s files

alan.huffman Uncategorized

HTTP Codes for Rest [ CHEAT SHEET ]

January 19th, 2010
No comments

image

1xx - Informational

2xx - Successful

3xx - Redirection

4xx - Client Error

5xx - Server Error

alan.huffman Uncategorized

Symbolic Links [ MKLINK ] in Windows :: A “Must Have” tool!

January 19th, 2010
No comments

If you have ever used linux and currently use windows, you probably miss the ability to create symbolic links, hard links, etc.. between 2 directories or files.

The idea being that where a file is logically located should be independent of where it is physically located.

Example, let’s say you have some JavaScript or HTML files located in one project that you want to share with another. DRY (don’t repeat yourself) forces you to the realization that you do NOT want to COPY / PASTE. So you could just put the files in one directory and LINK to it from the other.

Read about it: This is the best article I found.

http://www.howtogeek.com/howto/windows-vista/using-symlinks-in-windows-vista/

 

Here is the technical bit:

http://technet.microsoft.com/en-us/library/cc753194%28WS.10%29.aspx

 

Mklink

Updated: April 25, 2007

Creates a symbolic link.

For examples of how to use this command, see Examples.

Syntax

Copy Code

mklink [[/d] | [/h] | [/j]] <Link> <Target>

Parameters


Parameter

Description

/d

Creates a directory symbolic link. By default, mklink creates a file symbolic link.

/h

Creates a hard link instead of a symbolic link.

/j

Creates a Directory Junction.

<Link>

Specifies the name of the symbolic link that is being created.

<Target>

Specifies the path (relative or absolute) that the new symbolic link refers to.

/?

Displays help at the command prompt.

Examples

To create a symbolic link named MyDocs from the root directory to the \Users\User1\Documents directory, type:

Copy Code

mklink /d \MyDocs \Users\User1\Documents

alan.huffman Uncategorized

The CSS Visual Formatting Model

January 8th, 2010
No comments

All of this (and prev blogs posts) information comes from 1 awesome source that I recommend you buy. CSS Mastery (Advanced Web Standards Solutions)

Get the cheet sheet! http://www.milkaddict.com/wp-content/uploads/2009/11/css-cheat-sheet-v2.png

 

Box Model: [LINK WC3 ]

All elements are rectangles with characteristics ( offset, margin, border, padding, width, height ) See firebug for an example:

image

  • Margins are transparent (not seen), used to control spacing
  • Border adds a line around the item
  • Padding creates a gap around the item.

    IE Boxing Model (ugh)

    IE uses a non-standard boxing model. (IE < version 7) (quirks mode). Width property is considered equal to the SUM of the widths of: content, padding & borders. Standard boxing model indicates width is the width of the element. So for IE v6 & earlier, if you specify a width and then padding & border – the item’s width is reduced to accommodate the added widths of the padding / border.

Solution: Don’t specify padding/border width along with content width. Want to know more? Go here:

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

image

 

Margin Collapsing:

This blog gives a nice summary. http://www.milkaddict.com/css-margin-collapsing/ The idea is that the box model will have items above collapse the margins of items below. Elements contained within other elements will have their margins collapse before the outer margins do.

Whose margins collapse:

  1. Inner elements collapse first (empty elements collapse in on themselves) – their margins fold.
  2. Elements lower down on the page
  3. Elements higher on the page

Block Level elements (block boxes) versus inline elements (inline boxes)

 

Block Level Elements are elements that are displayed as blockes or boxes of content:

  • p
  • h1
  • h2
  • div

Inline Elements are items that are displayed on one line (inline) such as:

  • a
  • strong
  • span

The differences between these types is the DISPLAY property.

  • display=block
  • display=inline-block
  • display=none /*no box at all*/

        Positioning

      3 different types of positioning in HTML:

    1. normal flow (default) – based on position in HTML, left to right
    2. floats
    3. and absolute positioning

          Normal Positioning

        Inline Boxes = normal flow dictates left to right horizontal stacking

      Block Boxes = normal flow dictates top down vertical stacking

       

      from: http://www.mattryall.net/image/css-normal-flow.png

      image

       

      Relative Positioning

      Allows the element to be positioned relative to its normal position. The element will continue to occupy the the original space (with or without the offset) – the implication can be overlap.

       

      Absolute Positioning

      Positioning is in relation to the nearest positioned ancestor (the tag in which it is nested).

      Stacking (who is on top) can be controlled based on a z-index value. Higher the z-index, high up the box appears (more in front).

      There is a bug in IE 5.5 & 6 when absolute position is set in relation to a relatively positioned element that DID NOT have dimensions set (IE just sets absolute in relation to canvas) – so set the dimensions.

      Absolute positioned items are not considered part of the normal flow. They will not affect the layout of relative or normal flow positioned elements.

      Fixed Positioning ( A subcategory of absolute )

      The fixed element block is set relative to the viewport (window) and thus the element will always stay in the viewable window. (not supported by IE6 and below, IE7 partially supports it… There are workarounds [ugh])

       

      Float Positioning

      This is a complex and very important topic that you need to understand. That said, after reading it, I’ll refer you to some other sources as I don’t want to recreate what they have.

      This site covers FLOAT & CLEAR: http://www.positioniseverything.net/easyclearing.html

      I also recommend a framework that Erick Flemming and I are using on our project. The guy who wrote it is German, so you know it’s good ;-), YAML – Yet Another Multicolumn Layout.

       

      YAML: Bulletproof & Flexible Layouts Made Simple

      image http://www.yaml.de/en/home.html 

      "Yet Another Multicolumn Layout" (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

      He even has a solid YAML BUILDER. http://builder.yaml.de/

      image

      alan.huffman CSS, HTML, Web Development , ,

      CSS Basics : What You Need To Know

      January 7th, 2010
      No comments

      Depending on your preference, you either love or hate CSS. Either way you better know it. Let’s cover some basics.

      Cascading refers to the nature of the selection. Styles are applied using the following prioritization:

      • User styles flagged as !important
      • Author styles flagged as !important
      • Author styles
      • User styles
      • Styles applied by the browser/user agent

      Calculating Specificity

      Given that elements are often select by more than one selector, the applied style is the more specific of the two. Specificity is calculated based on the following rules (note calculation is NOT base 10).

        There are 4 levels of constituent levels: a, b, c and d.

       

      • If the style is an inline style, a = 1
      • b = total # of ID selectors
      • c = the number of class, pseudo-class & attribute selectors
      • d = the number of type selectors & pseudo-element selectors
        Few quick examples:
        Style Specificity Value Specificity
        Style="color:red;” 1,0,0,0 Highest
          #foo #bar {}
        		 0,2,0,0  
        #foo .bar {} 0,1,1,0  
        a#foo{} 0,1,0,1  
        p.foo .bar{} 0,0,2,1  
        p.bar{} 0,0,1,1  
        div a{} 0,0,0,2  
        a {} 0,0,0,1 Lowest

       

      CSS Inherited Styles:

      Styles are inherited by more general rules when not specified for an element by a more specific selector. Remember that the browser applied styles to specific elements – so they (h1,h2,…) will often not inherit values if a style did not specifically target them.

      **Note: Any style applied to a specific element will override any inherited style.

      Common Selectors

      Classes versus ID’s

      html:

      <a id=”Name” …

      <a class=”Name” …

      css:

      .Name = class “Name”

      #Name = id “Name”

       

      Pseudo-classes

      css:

      /* make all unvisited links blue */

      a:link{color:blue;}

      /* visited links green */

      a:visited{color:green;}

      /* makes links  red when hovered or activated, focus for keyboards */

      a:hover, a:focus, a:active, {color:red;}

      /* makes table rows red when hovered over */

      tr:hover{background-color: red;}

      /* makes input elements yellow when focus is applied */

      input: focus {background-color:yellow;}

      ** Note: :link and :visited are LINK psuedo-classes and can only be applied to “<a “.

      ** Note: :hover, :active, and :focus are DYNAMIC psudo-classes and can be applied almost everywhere (though IE6 & IE7 are quirky).

       

       

      Universal Selector

      Apply styling to everything on a page.

      /* remove all padding & margins */

      *{

      padding: 0;

      margin: 0;

      }

       

      Advanced Selectors

      Supported by most modern browsers (not IE6). If a browser doesn’t support a rule/feature, the whole rule is ignored. Child selector is supported in IE7 (unless there are comments between the parent & child)

      1. child: #nav>li
      2. sibling: h2 + p
      3. attribute: acronym[title]

      CHILD: #nav>li

      css

      /* list items that are nested in the #nav ID will have this rule applied */

      #nav>li{

      background: url(folder.png no-repeat left top;

      padding-left: 20px;

      }

      html

      <ul id=”nav”>

      <li> A <!—will be applied –> </li>

      <li> B <!—will be applied –>

            <ul>

                <li> C <!—will not be applied –> </li>

                <li> D <!—will not be applied –> </li>

            </ul>

      </li>

      </ul>

       

      SIBLING: h2 + p

      h2 + p would look for a paragraph that follows an h2.

      <h2> Hey! </h2>

      <p> This is what that selector would apply to </p>

       

      ATTRIBUTE: acronym[title]

      When you hover over an element with a title attribute most browsers will display a tooltip.

      acronym[title]: hover, acronym[title]:focus{ cursor: help; }

      <p> A < acronym title=”DataBase Admin”>DBA</acronym> is not a fun job </p> :-)

      alan.huffman CSS, HTML, Web Development ,

      MicroFormats : HTML & CSS

      January 6th, 2010
      No comments

      Due to the lack of HTML elements, several HTML / CSS Microformats have been adopted w/ many draft formats in play. They have an official ORG HOME: http://microformats.org/  :: about (http://microformats.org/about)

      1. hCalendar for dates, calendars & events
      2. hCard for people and organizations
      3. XFN for relationships between people
      4. hProduct for product descriptions (draft)
      5. hReview for product and event reviews (draft)
      6. … (many more)
        Check out the wikipedia article on them: http://en.wikipedia.org/wiki/Microformat

      alan.huffman CSS, HTML, Web Development , , ,