GoogleDoctype

Google Doctype. Written by web developers, for web developers.





What do you want to learn today?

Read HOWTO articles on



 Web security

 DOM manipulation

 CSS and style

 Tips and tricks

 Search friendly development and SEO



Dive into DOM objects, including



 document

 window

 history

 location

 navigator

 screen

 and other historical curiosities



Style your pages with CSS



 CSS properties

 pseudo-classes and pseudo-elements

 at-rules

 colors

 ...and more on the way



Make your site search friendly



 Use the right meta tags

 Prevent content from being crawled/appearing in search results



Do you need help with an HTML element? We have an HTML reference from to .





Web security

 Introduction to Cross-Site Scripting Vulnerabilities.

 Everything you ever wanted to know about cross-site scripting (XSS) attacks

 HOWTO filter user input in tag attributes

 HOWTO filter user input in regular body text

 HOWTO filter user input in JavaScript event handlers

 HOWTO filter user input in HTTP headers

 HOWTO filter user input in JavaScript context

 HOWTO filter user input in style elements and attributes

 HOWTO filter user input in URL attributes

 HOWTO protect against cross-domain data disclosure attacks

 HOWTO protect against E4X injection attacks

 Compartmentalizing applications within the same domain

 UTF-7: the case of the missing charset

 Malformed UTF-8: Who said "hello%EE" can't be dangerous

 HOWTO protect against malicious images and other non-HTML content

 HOWTO serve untrusted files as downloads



Flash specific Security



 Introduction to Flash security

 Flash cross-domain policy files

 Flash cross-domain policy attacks

 Flash getURL XSS attacks

 Flash clickTAG XSS attacks

 Flash TextField XSS attacks

 Flash loadMovie XSS attacks

 Flash asFunction XSS attacks

 Flash URL parameter attacks

 HOWTO secure your Flash applications





DOM manipulation

 Introducing DOMHelper

 HOWTO deal with DOM nodes (goog.dom.NodeType, goog.dom.getNextElementNode,

goog.dom.isNodeLike)

 HOWTO deal with page coordinates (goog.math.Coordinates)

 HOWTO add, edit, remove, and toggle class names (goog.dom.classes)

 HOWTO quickly create multiple DOM nodes (goog.dom.createDom)

 HOWTO find DOM nodes that match a filter (goog.dom.findNodes)

 HOWTO detect when the user changes the text size (goog.dom.FontSizeMonitor)

 HOWTO get the document element of a frame or iframe

(goog.dom.getFrameContentDocument)

 HOWTO find the nearest element to a node (goog.dom.getNextElementNode)

 HOWTO determine if one node is before or after another node

 HOWTO determine if one node contains another (goog.dom.contains)

 HOWTO find the owner document of a DOM node (goog.dom.getOwnerDocument)

 HOWTO calculate how far the page has scrolled (goog.dom.getPageScroll)

 HOWTO find the parent window of a document (goog.dom.getWindow)

 HOWTO set multiple properties on an element (goog.dom.setProperties)

 HOWTO set the text content of an element (goog.dom.setTextContent)

 HOWTO find the size of the viewport (goog.dom.getViewportSize)

 HOWTO detect when the user resizes the browser window (goog.dom.ViewportSizeMonitor)





CSS and style

 HOWTO determine the document's compatibility mode

 HOWTO detect if an element is located within the visible viewport

 HOWTO find the viewport (goog.style.getClientViewportElement)

 HOWTO calculate the current style of an element (goog.style.getStyle_)

 Computed style vs. cascaded style

 HOWTO calculate the bounding rectangle of an element (goog.style.getBounds)

 HOWTO calculate the size of an element (goog.style.getSize)

 HOWTO dynamically set 'display: inline-block' for an element (goog.style.setInlineBlock)

 HOWTO dynamically add CSS styles to a page (goog.style.installStyles)

 HOWTO set an element's opacity (goog.style.setOpacity)

 HOWTO calculate the position of an element on the page (goog.style.getPageOffset)

 HOWTO set an element to preformatted text wrap (goog.style.setPreWrap)

 HOWTO calculate the distance between two elements (goog.style.getRelativePosition)

 HOWTO set the background of an element to a transparent image

(goog.style.setTransparentBackgroundImage)





Miscellaneous tips and tricks

 HOWTO determine the browser name and version number

 HOWTO detect whether the user has Flash installed (goog.userAgent.flash)

 HOWTO filter elements by both tag and class name

 HOWTO determine if a JavaScript variable is undefined

 HOWTO slice an array that's not really an Array (goog.array.slice)

 HOWTO splice an array that's not really an Array (goog.array.splice)





Search friendly development and SEO

 HOWTO use the right metatags for search engines

 HOWTO prevent your content from being crawled or appearing in search results





CSS and style

 HOWTO determine the document's compatibility mode

 HOWTO detect if an element is located within the visible viewport

 HOWTO find the viewport (goog.style.getClientViewportElement)

 HOWTO calculate the current style of an element (goog.style.getStyle_)

 Computed style vs. cascaded style

 HOWTO calculate the bounding rectangle of an element (goog.style.getBounds)

 HOWTO calculate the size of an element (goog.style.getSize)

 HOWTO dynamically set 'display: inline-block' for an element (goog.style.setInlineBlock)

 HOWTO dynamically add CSS styles to a page (goog.style.installStyles)

 HOWTO set an element's opacity (goog.style.setOpacity)

 HOWTO calculate the position of an element on the page (goog.style.getPageOffset)

 HOWTO set an element to preformatted text wrap (goog.style.setPreWrap)

 HOWTO calculate the distance between two elements (goog.style.getRelativePosition)

 HOWTO set the background of an element to a transparent image

(goog.style.setTransparentBackgroundImage)

 HOWTO replicate the functionality of min-width in IE6