Posted by K. Scott Allen on Oct 14, 2009 in
Dotnet |
View Original Article I’ve often felt that we treat relational databases as a hammer to use with every kind of nail, screw, bolt, rivet, metric nut, and wall anchor we encounter in software development. The modern relational databases is a marvelous piece of engineering, and we have centuries of collective experience in designing, optimizing, securing, and managing them, but they just aren’t the best fit for every scenario.
The last few months I’ve been keeping an eye on the growing No-SQL movement. I’d like to make room for the No-SQL conference (nosqleast – their motto is: select fun, profit from real_world where relational=false;), but I’ll just have to wait for a debrief from Matt P. Here are a couple great blog posts for background on the No-SQL thing:
I wanted to experiment with a document oriented database myself and chose MongoDB. From the FAQ:
MongoDB is an document-oriented DBMS. Think of it as a persistent object store. It is neither a relational database, nor even "table oriented" like Amazon SimpleDB or Google BigTable. If you have used object-relational mapping layers before in your programs, you will find the Mongo interface similar to use, but faster, more powerful, and less work to set up.
I chose MongoDB because it looked easy to setup and run with.
- Download and extract the binaries from MongoDB downloads.
- Create a c:\data\db directory (that’s the default storage location – you can override it)
- Run the MongoDB daemon – mongod.exe
To talk to MongoDB I used mongodb-csharp. You can either download the source as a zip file, or use a Git client like Git on Windows to clone the github repository. Sounds difficult, but Git is easy once you’ve adopted to the terminology, and as a bonus, it’s screaming fast. There is a Visual Studio solution included with the sources, so you can open it, build it, and out pops a MongoDB.Driver assembly.
Connecting to a database looks like this:
var mongo = new Mongo();
mongo.Connect();
var db = mongo.getDB("movieReviews");
I’m running MongoDB on the local machine and it’s listening on the default port with no special security settings. That simplifies the code, but also notice I can ask for a database (movieReviews), and if it doesn’t exist MongoDB will create the database for me. I don’t need to create tables or schemas or setup primary keys. It just works. I’m thinking document oriented databases are to relational databases what dynamic languages are to static languages.
The next step is to get/create a collection and start adding documents to it.
var movies = db.GetCollection("movies");
var movie = new Document();
movie["title"] = "Star Wars";
movie["releaseDate"] = DateTime.Now;
movies.Insert(movie);
A collection is somewhat analogous to a table in the RDBMS world, but instead of rows and columns a collection is a bunch of documents that internally are stored in a binary JSON format (BSON). The documents can contain anything – they are schemaless, but MongoDB understands how to index and query the documents.
var spec = new Document();
spec["title"] = "Star Wars";
var starWars = movies.FindOne(spec);
With a few more abstractions (and a little bit of LINQ), document oriented databases could be a huge hit in .NET. Although, they might be better aligned with a language that runs on the DLR…
Posted by Louis Lazaris on Oct 14, 2009 in
CSS,
Design & Graphics |
View Original Article 
One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share.
The interesting part of those statistics is that the numbers across IE6, IE7, and IE8 are very close, preventing a single Microsoft browser from dominating browser stats — contrary to what has been the trend in the past. Due to these unfortunate statistics, it is imperative that developers do thorough testing in all currently-used Internet Explorer browsers when working on websites for clients, and on personal projects that target a broader audience.
Thanks to the many available JavaScript libraries, JavaScript testing across different browsers has become as close to perfect as the current situation will allow. But this is not true in CSS development, particularly in relation to the three currently used versions of Internet Explorer.
This article will attempt to provide an exhaustive, easy-to-use reference for developers desiring to know the differences in CSS support for IE6, IE7 and IE8. This reference contains brief descriptions and compatibility for:
- Any item that is supported by one of the three browser versions, but not the other two
- Any item that is supported by two of the three browser versions, but not the other one
This article does not discuss:
- Any item that is not supported by any of the three browser versions
- Proprietary or vendor-specific CSS
Therefore, the focus is on differences in the three, not necessarily lack of support. The list is divided into five sections:
Selectors & Inheritance
Child Selectors
Example
body>p {
color: #fff;
}
Description
The child selector selects all elements that are immediate children of a specified parent element. In the example above, body is the parent, and p is the child.
Support
Bugs
In IE7, the child selector will not work if there is an HTML comment between the parent item and the child.
Chained Classes
Example
.class1.class2.class3 {
background: #fff;
}
Description
Chained classes are used when the same HTML element has multiple classes declared, like this:
<div class="class1 class2 class3">
<p>Content here.</p>
</div>
Support
Bugs
IE6 appears to support this property, because it matches the last class in the chain to an element having that class, however, it does not restrict the class to an element that has all the classes in the chain, like it should.
Attribute Selectors
Example
a[href] {
color: #0f0;
}
Description
This selector allows an element to be targeted only if it has the specified attribute. In the example above, all anchor tags that have href attributes would qualify, but not anchor tags that did not have href attributes.
Support
Adjacent Sibling Selectors
Example
h1+p {
color: #f00;
}
Description
This selector targets siblings that are adjacent to the specified element. The example above would target all paragraph tags that are siblings of, and come directly after, primary heading tags. For example:
<h1>heading</h1>
<p>Content here.</p>
<p>Content here.</p>
In the code above, the CSS styles specified would target only the first paragraph, because it is a sibling to the <h1> tag and is adjacent. The second paragraph is a sibling, but is not adjacent.
Support
Bugs
In IE7, the adjacent sibling selector will not work if there is an HTML comment between the siblings.
General Sibling Selectors
Example
h1~p {
color: #f00;
}
Description
This selector targets all siblings that appear after a specified element. Applying this selector to the HTML example given in the previous section will select both paragraph tags, however, if one of the paragraphs appeared before the heading, that paragraph would not be targeted.
Support
Pseudo-Classes and Pseudo-Elements
Descendant Selector After :hover Pseudo-Class
Example
a:hover span {
color: #0f0;
}
Description
An element can be targeted with a selector after a :hover pseudo class, similar to how any descendant selector works. The above example would change the font color inside all <span> elements inside of anchor elements while the anchor is hovered over.
Support
Chained Pseudo-Classes
Example
a:first-child:hover {
color: #0f0;
}
Description
Pseudo-classes can be chained to narrow element selection. The above example would target every anchor tag that is the first child of its parent and apply a hover class to it.
Support
:hover on Non-Anchor Elements
Example
div:hover {
color: #f00;
}
Description
The :hover pseudo-class can apply a hover, or rollover state, to any element, not just anchor tags.
Support
:first-child Pseudo-Class
Example
div li:first-child {
background: blue;
}
Description
This pseudo-class targets each specified element that is the first child of its parent.
Support
Bugs
In IE7, the first-child pseudo-class will not work if an HTML comment appears before the targeted first child element.
:focus Pseudo-Class
Example
a:focus {
border: solid 1px red;
}
Description
This pseudo-class targets any element that has keyboard focus.
Support
:before and :after Pseudo-Elements
Example
#box:before {
content: "This text is before the box";
}
#box:after {
content: "This text is after the box";
}
Description
This pseudo-element places generated content before or after the specified element, used in conjunction with the content property.
Support
Property Support
Virtual Dimensions Determined by Position
Example
#box {
position: absolute;
top: 0;
right: 100px;
left: 0;
bottom: 200px;
background: blue;
}
Description
Specifying top, right, bottom, and left values for an absolutely positioned element will give the element “virtual” dimensions (width and height), even if width and height are not specified.
Support
Min-Height & Min-Width
Example
#box {
min-height: 500px;
min-width: 300px;
}
Description
These properties specify minimum values for either height or width, allowing a box to be larger, but not smaller, than the specified minimum values. They can be used together or individually.
Support
Max-Height & Max-Width
Example
#box {
max-height: 500px;
max-width: 300px;
}
Description
These properties specify maximum values for either height or width, allowing a box to be smaller, but not larger, than the specified minimum values. They can be used together or individually.
Support
Transparent Border Color
Example
#box {
border: solid 1px transparent;
}
Description
A transparent border color allows a border to occupy the same space as would be occupied if the border was visible, or opaque.
Support
Fixed-Position Elements
Example
#box {
position: fixed;
}
Description
This value for the position property allows an element to be positioned absolutely relative to the viewport.
Support
Fixed-Position Background Relative to Viewport
Example
#box {
background-image: url(images/bg.jpg);
background-position: 0 0;
background-attachment: fixed;
}
Description
A fixed value for the background-attachment property allows a background image to be positioned absolutely relative to the viewport.
Support
Bugs
IE6 incorrectly fixes the background image in relation to the containing parent of the element that has the background set, therefore this value only works in IE6 when its used on the root element.
Property Value “inherit”
Example
#box {
display: inherit;
}
Description
Applying the value inherit to a property allows an element to inherit the computed value for that property from its containing element.
Support
Bugs
IE6 and IE7 do not support the value inherit except when applied to the direction and visibility properties.
Border Spacing on Table Cells
Example
table td {
border-spacing: 3px;
}
Description
This property sets the spacing between the borders of adjacent table cells.
Support
Rendering of Empty Cells in Tables
Example
table {
empty-cells: show;
}
Description
This property, which only applies to elements that have their display property set to table-cell, allows empty cells to be rendered with their borders and backgrounds, or else hidden.
Support
Vertical Position of a Table Caption
Example
table {
caption-side: bottom;
}
Description
This property allows a table caption to appear at the bottom of a table, instead at the top, which is the default.
Support
Clipping Regions
Example
#box {
rect(20px, 300px, 200px, 100px)
}
Description
This property specifies an area of a box that is visible, making the rest “clipped”, or invisible.
Support
Bugs
Interestingly, this property works in IE7 if the deprecated comma-less syntax is used (i.e. whitespace between the clipping values instead of commas).
Orphaned and Widowed Text in Printed Pages
Example
p {
orphans: 4;
}
p {
widows: 4;
}
Description
The orphans property specifies the minimum number of lines to display at the bottom of a printed page. The widows property specifies the minimum number of lines to display at the top of a printed page.
Support
Page Breaks Inside Boxes
Example
#box {
page-break-inside: avoid;
}
Description
This property specifies whether a page break should occur inside of a specified element or not.
Support
Outline Properties
Example
#box {
outline: solid 1px red;
}
Description
outline is the shorthand property that encompasses outline-style, outline-width, and outline-color. This property is preferable to the border property since it does not affect document flow, thus better aiding debugging of layout issues.
Support
Alternative Values for the Display Property
Example
#box {
display: inline-block;
}
Description
The display property is usually set to block, inline, or none. Alternative values include:
inline-blockinline-tablelist-itemrun-intabletable-captiontable-celltable-columntable-column-grouptable-footer-grouptable-header-grouptable-rowtable-row-group
Support
Handling of Collapsible Whitespace
Example
p {
white-space: pre-line;
}
div {
white-space: pre-wrap;
}
Description
The pre-line value for the white-space property specifies that multiple whitespace elements collapse into a single space, while allowing explicitly set line breaks. The pre-wrap value for the white-space property specifies that multiple whitespace elements do not collapse into a single space, while allowing explicitly set line breaks.
Support
Other Miscellaneous Techniques
Media Types for @import
Example
@import url("styles.css") screen;
Description
A media type for an imported style sheet is declared after the location of the style sheet, as in the example above. In this example, the media type is "screen".
Support
Bugs
Although IE6 and IE7 support @import, they fail when a media type is specified, causing the entire @import rule to be ignored.
Incrementing of Counter Values
Example
h2 {
counter-increment: headers;
}
h2:before {
content: counter(headers) ". ";
}
Description
This CSS technique allows auto-incrementing numbers to appear before specified elements, and is used in conjunction with the before pseudo-element.
Support
Quote Characters for Generated Content
Example
q {
quotes: "'" "'";
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
Description
Specifies the quote characters to use for generated content applied to the q (quotation) tag.
Support
Significant Bugs and Incompatibilities
Following is a brief description of various bugs that occur in IE6 and IE7 that are not described or alluded to above. This list does not include items that lack support in all three browsers.
IE6 Bugs
- Doesn't support styling of the
<abbr> element
- Doesn't support classes and IDs that begin with a hyphen or underscore
<select> elements always appear at the top of the stack, unaffected by z-index values:hover pseudo-class values are ignored if anchor pseudo-classes are not in the correct order (:link, :visited, :hover)- An
!important declaration on a property is overridden by a 2nd declaration of the same property in the same rule set that doesn't use !important
height behaves like min-heightwidth behaves like min-width- Left and right margins are doubled on floated elements that touch their parents' side edges
- Dotted borders appear identical to dashed borders
line-through value for text-decoration property appears higher on the text than on other browsers- List items for an ordered list that have a layout will not increment their numbers, leaving all list items preceded by the number "1"
- List items don't support all possible values for
list-style-type
- List items with a specified
list-style-image will not display the image if they are floated
- Offers only partial support for
@font-face
- Some selectors will wrongly match comments and the doctype declaration
- If an ID selector combined with a class selector is unmatched, the same ID selector combined with different class selectors will also be treated as unmatched
IE7 Bugs
- List items for an ordered list that have a layout will not increment their numbers, leaving all list items preceded by the number "1"
- List items don't support all possible values for
list-style-type
- List items with a specified
list-style-image will not display the image if they are floated
- Offers only partial support for
@font-face
- Some selectors will wrongly match comments and the doctype declaration
Some IE bugs not mentioned here occur only under particular circumstances, and are not specific to one particular CSS property or value. See the references below for some of those additional issues.
Further Resources
About the Author
Louis Lazaris is a writer and freelance Web Developer based in Toronto, Canada. He has 9 years of experience in the web development industry and posts web design articles and tutorials on his blog, Impressive Webs. You can follow Louis on Twitter or contact him using this form.
© Louis Lazaris for Smashing Magazine, 2009. |
Permalink |
36 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, internet explorer
Tags: internet explorer
Posted by Guest Posting on Oct 14, 2009 in
Ajax,
Design & Graphics |
View Original Article 
by Obaid ur Rehman
For Web design projects, you may find yourself sometimes scrounging around for a simple yet useful image gallery and slideshow. But imagine having a huge collection of AJAX, JavaScript, Lightbox, CSS and Flash-based image galleries at your fingertips. Hopefully, this post will do the trick and provide all the resources you might need.
Free Slideshows And Lightboxes Scripts
Polaroid Gallery v.1.01
Polaroid Gallery is a free open-source Flash gallery developed by Christopher Einarsrud.
Active Slideshow Pro
Create dazzling multimedia presentations, slideshows and banners with Active Slideshow Pro. This extension builds on the success of Active Slideshow and gives you new spectacular effects and optimal control over your slides, texts, transitions and sounds.
PicLens Slideshow
Take your favourite images full-screen. This template is based on PicLens and combines the power of PicLens and Media RSS technology to give you an easy way to add immersive multimedia slideshows to your own website. The exported Piclens gallery can also easily be used as a complete Web page.
Plogger
Plogger is the next generation in open-source photo gallery systems. A Web application not bloated with superfluous features or complicated configuration settings. Plogger is a simple yet powerful tool, everything you need to share your images with the world.
Shadowbox
Shadowbox is an online media viewer application that supports all of the Web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable.
PhatFusion Slideshow
Transition between images.
Galleriffic
Galleriffic was inspired by Mike Alsup’s Cycle plug-in, but with performance in mind for delivering a high volume of photos.
NoobSlide
Fancybox
FancyBox is a tool for displaying images, HTML content and multimedia in a Mac-style Lightbox that floats over top the Web page.
Auto Generating Gallery
If you are creating a fairly small gallery, hand-coding a grid of thumbnails will probably do. But for larger galleries or doing a lot of adding, editing and swapping of photos, you will probably want a better solution. And that solution is: an automatically generating photo gallery!
Dynamic Image Gallery and Slideshow
Barack Slideshow
Pretty much everyone has seen Barack Obama’s website by now, which is clearly one of the most attractive ones done by a presidential candidate. Not only is it an example of state-of-the-art design, but it’s also nice to navigate and interact with.
jQuery Multimedia Portfolio
This plug-in for jQuery automatically detects the extension of each media file and applies the right player.
(E)2 Photo Gallery
(E)2 Photo Gallery is a open-source gallery built with MooTools JavaScript Library in a compact, modular and object-oriented framework. Tell the (E)2 Photo Gallery what folder your images are stored in, and it will automatically load them using PHP.
Flickrshow
Flickrshow is a lightweight, cross-browser JavaScript slideshow, giving you an easy way to display Flickr images on your website.
ProtoFlow
ProtoFlow is a coverflow effect written in JavaScript. It uses Prototype and Scriptaculous to do the bulk of the work, and it uses Reflection.js to do all of the image reflection stuff.
Flip 3D Flash Slideshow
A very nice Flash-based template. Each image that flips to the next casts a subtle reflection on the ground. The size of the images can be easily adjusted by editing the template files. And adding a background image is a piece of cake.
Imago
Imago is an AJAX image gallery focused on simplicity and ease of use. It’s in plain JavaScript and builds on the mature AJAX library MooTools. No server-side scripting is required! Neither is Flash. Whether your photos are on Flickr, SmugMug or your own server, Imago can show them.
Thumbnoo
PictoBrowser
A free Web application that displays Flickr and Picasa images on websites and blogs.
jQuery Gallery
Here is an image gallery with smooth transitions, thumbnails and pretty reflections.
PostcardViewer
PostcardViewer is a free customizable Flash image viewer. The interface looks like a set of postcards shuffled on a table.
Spry
Spry is a JavaScript-based framework that enables the rapid development of AJAX-powered Web pages. Not a JavaScript guru? No problem. Spry is designed to feel like an extension of HTML and CSS, so anyone with basic Web production skills can create a next-generation Web experience by adding the power of AJAX.
3D Curve Photo Gallery
PhotoViewer
Moopix
Slideshowpro
Lightbox Photo Gallery and Slideshow for Picasa
This template uses the excellent Lightbox JavaScript by Lakesh Dakar.
Vista photo gallery
Vista Photo Gallery is a photo album builder that allows you to create and publish rich, interactive photo galleries for your website.
UvumiTools Gallery Plugin
The UvumiTools Gallery allows you to display fancy photo galleries on your website without requiring you to be a master programmer, thanks to the powerful MooTools JavaScript framework. Just include a couple JavaScript and CSS files.
Parallax Gallery
TiltViewer
TiltViewer is a free customizable 3-D Flash image viewing application.
jQuery plugin – Easy Image or Content Slider
Lightview
DevKick Galleria
Galleria is a JavaScript image gallery written in jQuery. It loads images one by one from an unordered list and displays thumbnails when each image is loaded. It can create thumbnails, scaled or unscaled, centered and cropped, inside a fixed thumbnail box defined by CSS.
FrogJS Javascript Gallery
FrogJS is a simple unobtrusive JavaScript gallery. It’s not a replacement for other thumbnail galleries such as Lightbox JS, but is a different way of showcasing galleries. It is best for page-by-page galleries, such as photo stories.
jQuery virtual tour
Featured Content Slider
Flashnifties
Flash image gallery, video gallery, MP3 music player, updatable Flash website with advanced navigation… all in one!
JQuery flickrGallery
prettyPhoto
prettyPhoto is a jQuery-based Lightbox clone. It supports not only images but video, Flash, YouTube and iFrames. It’s a full-blown media Lightbox.
Flash Page Flip Photo Gallery template for Picasa
(al)
