Spot the web RSS 2.0
# Saturday, January 05, 2008

There are numerous spots that are good for page breaks made especially for printing:

  • Between page sections (h2 or h3 tags, depending on your site format)
  • Between the end of an article and subsequent comments / trackbacks
  • Between longs blocks of content


Luckily, using page breaks in CSS is quite easy.

The CSS Code

  1. @media all  
  2. {   
  3.     .page-break { display:none; }   
  4. }   
  5.   
  6. @media print  
  7. {   
  8.     .page-break { display:blockpage-break-before:always; }   
  9. }  

The XHTML Code

  1. <DIV class=page-break></DIV>  

The Usage

  1. <H1>Page Title</H1>  
  2. <!-- content block -->  
  3. <!-- content block -->  
  4. <DIV class=page-break></DIV>  
  5. <!-- content block -->  
  6. <!-- content block -->  
  7. <DIV class=page-break></DIV>  
  8. <!-- content block -->  
  9. <!-- content -->  

		
Saturday, January 05, 2008 11:52:19 AM (Jerusalem Standard Time, UTC+02:00)  #    Comments [0] - Trackback
CSS | Web 2.0
# Friday, January 04, 2008

YAML (Yet Another Multicolumn Layout)

YAML (Yet Another Multicolumn Layout)

Dirk Jesse’s extensive (X)HTML/CSS Framework offers the whole bunch of default-templates for a number of simple or more complex web-projects. YAML is based on web standards and supports every modern web browser. All Internet Explorer’s major rendering bugs are countered. YAML fully supports all IE versions from 5.x/Win to 7.0.

Apart from a number of standard-conform layouts the framework also offers a debugging stylesheet, print stylesheet as well as various robust tools for web-development in YAML. All CSS components of the framework as well as the various layout methods are thoroughly documented in both English and German, supplemented by numerous examples.

YAML Builder

You can also use a YAML Builder to develop your layout visually - in your web-browser. You can choose a Doctype, basic layout elements (#header, #footer, …), the number of content columns as well as preferred column order and set the layout and column widths. You can also drag & drop and nest both sub-templates and dummy content, display and output the complete code (XTHML markup and CSS) and switch between draft mode and preview of the finished layout.

Blueprint

Blueprint

Blueprint

The Blueprint CSS framework, created by Norwegian tech student Olav Frihagen Bjørkøy, is a very promising foundation for developing typographic grids using CSS. The framework offers an easily customizable grid, sensible typography, a typographic baseline and a stylesheet for printing. It also uses relative font-sizes, provides a CSS reset and is supposed to be cleaned of code bloats. The latter isn’t always true.

Besides, you can also use the Blueprint Grid CSS Generator to generate more flexible versions of Blueprint’s templates. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint CSS Framework - a new “to-become-standard” in grid-based design approach.

Yahoo! UI Library CSS Foundation

Yahoo! UI Library presents a set of CSS frameworks: the core YUI CSS foundation includes the Reset CSS, Base CSS, Fonts CSS, and Grids CSS packages.

While Reset CSS removes and neutralizes the inconsistent default styling of HTML elements, Base CSS applies a consistent style foundation for common HTML elements across A-grade browsers.

Fonts CSS offers cross-browser typographical normalization and control; the framework provides consistent font sizing and line-height, supports user-driven font-size adjustment in the browser, including cross-browser consistency for adjusted sizes and works in both Quirks Mode and Standards Mode.

Grids CSS delivers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. The framework supports easy customization of the width for fixed-width layouts; it also supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number. YUI also offers The YUI Grids Builder — a simple interface for Grids customization.

You should be aware that these frameworks are often criticized for bloating the code with non-semantic markup and generating too many unnecessary classes, IDs and div-containers in CSS. Yahoo! UI Library also provides a detailed documentation with numerous examples, tutorials, cheat sheets, templates and tools.

Friday, January 04, 2008 11:49:10 AM (Jerusalem Standard Time, UTC+02:00)  #    Comments [0] - Trackback
CSS | Design | Site Reviews
# Wednesday, January 02, 2008

In 2007 I've worked with NUnitForms. It contains all major controls testers and you can easily create your own ones for e.g. a Data Grid or a 3rd party control. I had to create one for Janus GridEx and it wasn't really that hard.

A little reflection went a long way :) Lately, the whole project was at a standstill for some time but now it seems it's revitalizing nicely with new people on board. So if you haven't yet go take look. This is just one open source GUI testing platform and I'm sure there are others... I haven't checked them out though.

Now to the big question: Is it worth it?  It depends...

I'm not a hardcore TDD practitioner but I like having repeatable unit tests. But having automated GUI unit tests is in my opinion a waste of time.

Why? It simply isn't worth spending time writing them. You should have enough code coverage with non GUI tests to find any bugs long before hitting the GUI. You might want to be tempted to unit test control positions or visibility or some other property... don't bother.

You'll spend your time better if you write more non GUI unit tests and check your GUI by hand (eye).

So what are they useful for? Well... I've used them for acceptance and integration testing with great success.

Integration Tests...

... test how different parts of your application work together. These kinds of GUI tests proved to be VERY useful and they are worth investing time in. They have a great ROI (return on investment) once they're written. For example we had a large workflow based application that was completely async in nature. It had a windows forms client that could be deployed on multiple computers, all those clients connected to a single server that hosted a few webservices for data modifications, retrieval and some other stuff.

The whole app was also connected to Sharepoint server,  Exchange Server, SQL Server, used InfoPath and a 3rd party software to export data from and into it. With one single GUI integration test we could easily see if everything worked together as it should. We mocked the InfoPath and 3rd party software but everything else ran great.

The point of using GUI tests here is to see how and if your whole application works with all parts integrated together from GUI interaction to Exchange connectivity. Even the best non GUI integration tests simply don't do that.

Acceptance Tests...

... test if your software is up to some specs usually defined by the business process. They're in essence a black box test. You don't care what goes on inside the software you just want to see if the output is correct for a certain input. In workflow based processes this can be very useful since you know what the input and output parameters are for your workflow.

For example you start the workflow in your app via NUnitForms, pressing "move in workflow" buttons until the workflow end and then check if the output parameters have the correct values. You can check for various different GUI parameters in this test along the way but as I said above don't go overboard. I usually just check for visibility of certain panels or grids... simple things like that.

When I first started with GUI testing I thought it was a really big waste of time. And to tell you the truth if you don't draw the line somewhere it is. I even had a moment when I thought it was a good idea to test everything only with GUI tests. That was so far over line I couldn't even see it anymore. Luckily that moment passed pretty fast. Don't make the same mistake. If used wisely automated GUI tests are a big benefit.

Wednesday, January 02, 2008 11:39:05 AM (Jerusalem Standard Time, UTC+02:00)  #    Comments [0] - Trackback
Programming | Visual Studio
Navigation
Archive
<January 2008>
SunMonTueWedThuFriSat
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789
About the author/Disclaimer

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

© Copyright 2010
Guy Levin
Sign In
Statistics
Total Posts: 63
This Year: 0
This Month: 0
This Week: 0
Comments: 14
Themes
All Content © 2010, Guy Levin