#CSSOff 2013: Markup Mayhem or Closed Design Disaster?

The CSSOff competion 2013 started today. And I got bitterly disappointed. And it seems I’m not the only one after I read the #cssof tweets. Some of the guys criticize mainly the design.

Me not. In my opinion it doesn’t matter if we find the design beautiful and eye candy. Everyone has different preferences. The design is some kind of poster and magazine style that has been (or is) trending recently. It looks close to a print product. This isn’t a problem because CSSOff is done to get challenged at a very high cutting edge level. Transferring this layout to the web keeping the document accessible and good structured, this is really a challenge and fun because we could try out all the new techstuff we usually can’t use in payed client projects.

I am disappointed because the sources of the competition are closed source and not accessible to everyone. And it may imply some legal problems, too (at least in some countries). One of the CSSOff rules is to build on open and standardized technologies like HTML, CSS and Javascript. But you need closed commercial software to work with the layout source: it’s a Photoshop file. Damn it! This is a problem.

PSD templates mostly suck, this too: The usage and layering in the PSD file contains all the “nice” stuff that is hated by developers, e.g. weak names for the layers (I can’t see if it uses layer groups as I don’t have Photoshop) and filter effects not rendered to raster graphics (at least as layer copy).

Dependence on closed commercial software: if you don’t own a copy of Photoshop you can’t access the PSD file format. The sources come with PNG as fallback but this is a joke. It is a flat image without any other informations. If you don’t have the correct version of Photoshop you could run into problems. If your PS version don’t support the right layer effects, you have a problem. If you use another software to open PSD files but that software lacks full PSD support, you simply can’t work with the sources. Check the difference between the fallback PNG (right) and the PSD file opened in Gimp (left):

CSSOff Closed Design Disaster

Other words needed what the problem is about?

The source archive don’t includes layout annotations and raw data: it only contains the PSD, the PNG fallback and a very small Readme file. The only useful information is about the used Google Webfonts. No annotations about used font sizes, weights and lineheights, no info about the grid, no raw/single/retina versions of the used images, no text file with the text blocks used in the layout, no info about used angles on rotations, nothing. Only the useless __MACOS meta folder so everyone can see that someone owns an Apple machine. Probably you really need Photoshop to get your hands on all this important facts. Some attenders filled the gap and provide info on used fonts, source images and texts.

The sources are not free (as in freedom): this is really a problem because the competition terms demand that all results have to be submitted under a Creative Commons CC-BY license. We would need also sources under a free license for that. Propably all images from the layout stay under copyrights and they are not released under a free license. There is no picture old enough that it could be under public domain. I don’t think that product images (barbie box, transformers bluray) are under CC-BY, same for the altered Abbey Road cover (barcode instead of cross-walk stripes) by the Beatles or the stock photographs. You only can get free usable results on free useable sources, and free as in freedom, not as in free beer. You can’t use everything that you can copy for free from web, at least not in a open competiton asking the attenders to illegaly claim other copyrights.

Probably there are some more critical issues with the layout resources but my points above are enough for now.

I wish everyone good luck with the competition. I would like to attend but I don’t have full access to the sources because I use Linux and don’t own a copy of Photoshop. This is sad because the layout is technically complex enough that it could have been a good play with all the nice cutting edge tech. But it is graphically not overcomplex, it could have been easily done with Inkscape and images really released under CC-BY.

Developers advent: Snow on the dev floors and 24 new web doors … ‘til Christmas

The blog is back, maybe without a bang but with some advent calendars for developers:

  • 24 Pull Requests is a little project to promote open source collaboration during december. The idea is basically “Send a pull request every day in december leading up to Christmas”, encouraging developers to give back to open source with little gifts of code throughout december.
  • 24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.
  • Performance Calendar: The speed geek’s favorite time of the year
  • Web Advent 2012: Join us each day as our wonderful authors provide presents of tips, tricks, & tidbits to usher in the new year.
  • Perl Advent Calendar 2012: twenty four merry days of Perl
  • Seit 2005 ist es gute Tradition jedes Jahr aufs neue, einen Webkrauts-Adventskalender mit interessanten Themen von CSS3 und SASS über Wireframes und Tools hin zu SEO, Barrierefreiheit und dem mobilen Web zu füllen.

Looks like we got some more advent calendars for web designers and developers last year, the PHPadvent (now webadvent) seems not to be ready this year.

Please contribute your suggestions if you know other calendars for developers.

One week ago Curiosity landed safe on Mars, later the NASA provided a video that pinned down the 7 minutes of terror to 2 minutes, showing how the Mohawk Guy and his colleagues went nuts after the successful landing. The video looks like Hollywood pays back it fees :)

NASA released a lot of materials about the landing, if you are a web developer then you may check out the interactive website “How do I land on Mars” about Curiosity’s descent. You can watch the animation playing it as a whole, or scrolling it manually down. Use Firebug to check out the web technology behind it.

Screenshot: NASA website about Curiosity decent to Mars

Top 15 from the 28th+29th week: Typography, Web Development, Tools, Semantic Web & Data

Last two weeks were full of great links and resources, here you are:


  • Linux Libertine is a community driven Open Fonts project, delivering alternative font families and styles to fonts like Times New Roman, Linux Libertine and its tools are released under GPL/OFL licenses. The fonts cover the codepages of Western Latin, Greek, Cyrillic, Hebrew, IPA and many more. Furthermore, typographical features such as ligatures, small capitals, different number styles, scientific symbols, etc. are implemented in this font. Linux Libertine thus contains more than 2000 characters.

Semantic Web & Data

  • The ESWC discusses the latest scientific results and technology innovations around semantic technologies, some of the ESWC 2012 video lectures and keynotes are available, around the topics Social Web, Linked Data, Machine Learning, Semantic Web in Use, Natural Language Processing and Information Retrieval.
  • The Data Hub is a community-run catalogue of useful sets of data on the Internet. You can collect links here to data from around the web for yourself and others to use, or search for data that others have collected. Depending on the type of data (and its conditions of use), the Data Hub may also be able to store a copy of the data or host it in a database, and provide some basic visualisation tools.

Social Web

Web Development

  • Jam is a package manager for JavaScript. It manages library dependencies and it supports automatically optimized custom builds of popular libraries.
  • Yeoman is a robust and opinionated client-side stack, comprised of tools and frameworks to support you to create web applications. It helps in scaffolding, compiling CoffeeScript & Compass, linting your scripts, image optimization, build processing, JS package management and unit testing. It isn’t released currently but you can enter your email to get notified if it gets available. Paul Irish spoke about it on Google’s IO 2012 conference.
  • On YouTube you can find all videos of the talks done at the EuroPython 2012 conference in Italy.
  • Motorola published Montage, a framework for building modern HTML5 web apps by providing modular components, real-time two-way data binding, CommonJS dependency management, and more.

Other Tools

  • If you need to convert files from one markup format into another, pandoc is your swiss-army knife. It can convert documents in markdown, reStructuredText, textile, HTML, DocBook, or LaTeX to HTML formats, Word processor formats (docx, odt), Epub, DocBook, TeX formats, PDF and Lightweight markup formats.
  • The goal of pdf.js is to create a general-purpose, web standards-based platform for parsing and rendering Portable Document Format (PDF) without native code assistance. It is community-driven and supported by Mozilla Labs.
  • Some of you read about Svbtle. There is a unofficial Wordpress theme to create the Svbtle feeling on administration/writing and viewing your blog. The theme misses the responsiveness of the original Svbtle layout but as the theme is open source, you can add it and push it back to the project owner.
  • Adobe published Brackets, an open source code editor for the web, written in JavaScript, HTML and CSS.

(Source: delicious.com)

Top 4 from the 26th+27th week: High Resolution Displays & Performance Optimization

(Source: delicious.com)

Javascript quality control: Install and use JSHint on Fedora Linux

I already pointed to JSHint in one of my Link Digest posts, last week I’ve testet it myself and I really like it. JSHint is a tool that helps you to write better Javascript! While it cannot detect if your program is correct, fast, has memory leaks or if you have used the right development patterns, it detects errors and potential problems in your code and it supports you to enforce coding conventions. The best: it is very easy to integrate it in your workflow process. Let’s see how to do that.

There are different ways to integrate it within popular text editors and JavaScript platforms, I prefer to use JSHint as command line tool because this is independent from the IDE and it integrates well with tools like make.

Install JSHint on Fedora 16

The CLI package for JSHint depends on the Node.js plattform, you can install it via the package manager. As Fedora itself do not provide any Node.js packages, you need to use the packages from the Node.js for Fedora and Enterprise Linux repository. JSHint can be installed using the node package manager (npm).

$ sudo yum localinstall --nogpgcheck http://nodejs.tchol.org/repocfg/fedora/nodejs-stable-release.noarch.rpm
$ sudo yum install nodejs-compat-symlinks npm
$ sudo npm install -g jshint

There are also options to install packages for Debian, Ubuntu, openSUSE, Arch Linux, free/openBSD, MS Windows and OSX.

Use JSHint on command line

You can use JSHint with multiple file and folder paths and wildcards, extending it with optional switches, e.g.:

$ jshint path path2 [options]
$ jshint _source/util/js/*.dev.js --show-non-errors
$ jshint _source/util/js/mylibrary.js --config=~/myconfs/jshint.conf

Just call jshint without any paramters to get available options.

As it seems not be possible to call JSLint with wildcards for recursive paths, you may use the find command under Linux:

$ find _source/util/js -name "*.dev.js" -exec jshint {} \;

Configure JSHint

If you use JSHint without any configuration, the CLI uses the default options that come with JSHint. There are several methods to apply your own configuration:

  • Manually: using the command line option, setting --config=/path/to/your/config.
  • Project’s Directory Tree: if the configuration file isn’t specified via the --config option, then jshint will attempt to locate .jshintrc starting in the present working directory, and it moves one level up the directory tree all the way up to the filesystem root. If a .jshintrc file is found, it stops immediately and uses that set of configuration.
  • Home Directory: save .jshintrc to your user’s $HOME directory.

I’ve made a configuration file for JSHint (fork it), using very conservative option values to be very strict:

6 from the 15th week: better Javascript, Responsive Webdesign, SCSS generator, Places & Networks

As every week I collect here the best resources I have bookmarked during the last week.

Javascript, Responsive Webdesign & CSS to SASS

  • Tim Kadlec writes in Media Query & Asset Downloading Results about his research results how images are downloaded when media queries are involved. This may important if you use media queries to provide responsive websites and web application, it simply doesn’t make any sense to fetch images that won’t be show in some devices.
  • Addy Osmani collected the sources of his talk Scalable JavaScript Design Patterns, a brief overview, his slides, examples and audience questions. It’s about writing Javascript, decoupled, module managed, task secure and framework agnostic. An interesting read and important for all frontend developers.
  • JSHint is a tool that helps you to write better Javascript, it detects errors and potential problems in your code and it supports to enforce coding conventions. JSHint is a fork of JSLint, the tool written and maintained by Douglas Crockford. It has integrations in various plattforms and systems.
  • Less and SASS/SCSS are well know CSS pre-processors. Least is a tool that helps you to transform old-fashioned CSS files into Less/SASS syntax. Unfortunately the tool is “only” a webservice, not a local script that could be inserted in your direct working process (e.g. merging CSS changes back to your CSS).

Places and Distributed Networks

  • openMarkers describes itself as a free and community-based Google Place for travelers. You can add/search accommodations, pubs, restaurant and more, rated on prices and by other travelers. The best ten results will show up on a map. It’s great that “all places are licensed under Creative Commons BY-SA 3.0 and the code are licensed under GPL3.” It integrates with Diaspora, too.
  • I found a list of Distributed Social Network projects on Wikipedia, so maybe you check them out to get your freedom back, it is always good to be vendor independent :) I will evaluate this list later in a special post. Check back regularly, or maybe subscribe to my RSS feed.

6 from the 13th week: Web Accessibilty, Consumption, SASS/SCSS, Semantic Web statistics, WebID & Fake services

  • Web Accessibility Best Practices: Doesn’t matter if you are a beginner or a pro in the webdev area, this list is a good help and eye opener if you want to make your web projects accessible to everyone. Guys, this is important!
  • Nie wieder Fleisch?: This not directly related to webdev but our consumption and eating behaviour is related to our life and the the lives of all humans and animals. This documentary was shown on Arte TV, now you can watch it for a few days on their website. It’s about meat consumption and worldwide problems related to it. The movie is dubbed in french and german.
  • A Standard Module Definition for Sass: a very short tutorial on developing own SASS/SCSS modules, nonetheless it is a good introduction.
  • Web Data Commons: More and more websites have started to embed structured data describing products, people, organizations, places, events into their HTML pages. The Web Data Commons project extracts this data from several billion web pages and provides the extracted data for download. Web Data Commons thus enables you to use the data without needing to crawl the Web yourself. If you don’t want to dig into the data you simply can enjoy the statistics.
  • WebID – A Guide For The Clueless: Sebastian Trüg wrote a nice introduction and tutorial on WebID, another identity provider and authentication method that is based on a certificate in your browser and a relation to the responding public key in a public profile of you. You can get a WebID really fast without deep technical knowledge.
  • April Fools Days services and startups: I do not actively participate on April Fools Day anymore but I always like all the crazy ideas for fake startups and joke web services released this days like Google Voice for Pets, or - my favorite - the 8-bit version of Google Maps. Just check the April 1st edition of The Museum of Modern Betas (MoMB) (sorry, there seems not to be a direct link to the 4/1/2012 archive). Any other funny ideas out there?

(Source: delicious.com)

8 from the 10th week: Mobile Development, Semantic Web, Web Design & Documentation

Today I start a new series of blog posts here: a digest of my links collected in the week before (or maybe weeks if I should be lazy). Here we go:

Mobile Development

  • With Adobe Shadow you can try out a new inspection and preview tool to test mobile fontends simultaneously on several devices. Sad that it is only for Windows und OSX.
  • by the way if you develop web applications for mobiles you may test jqMobi, a jQuery rewritten specialized on HTML5 apps with high performance.

Semantic Web

Web Design

Documentation tools

  • StyleDocco generates documentation and style guide documents from your stylesheets. It takes the comments from stylesheets and produces HTML documents that display your comments alongside your code, with any HTML snippets from the comments rendered using the processed stylesheets.
  • as we speak about source code documentation: ApiGen is the tool for creating professional API documentation from PHP source code, it has support for PHP 5.3 namespaces, packages, linking between documentation, cross referencing to PHP standard classes and general documentation, creation of highlighted source code and experimental support for PHP 5.4 traits, and you can integrate it in NetBeans.

Just watch my Link Digests (RSS) or follow me on Delicous.

"Every time you call a proprietary feature ‘CSS3,’ a kitten dies."

Any -webkit- feature that doesn’t exist in a specification is not CSS3. Yes, they are commonly evangelized as such, but they are not part of CSS at all. This distinction is not nitpicking. It’s important because it encourages certain vendors to circumvent the standards process.

Dear web designers and frontend developers, your “cutting edge” tech is sometimes not cutting edge, often it changes to the contrary and it sucks as much as the blink and marquee elements did.

Lea Verou wrote a wonderful article about web standards and proprietary vendor prefix features:

In our eagerness to use the new bling, we often forget how many people fought in the past decade to enable us to write code without forks and hacks and expect it to work interoperably. […] The proprietary features of today are no better than ActiveX and IE filters. Their only difference is better PR, as we haven’t faced the consequences yet.

Now, head over to List Apart and read Lea’s full article "Every Time You Call a Proprietary Feature ‘CSS3,’ a Kitten Dies."