Peter Slagter

"Vulnerability is the core of shame and fear and our struggle for worthiness, but it appears that it's also the birthplaceof joy, of creativity,of belonging, of love." - http://www.ted.com/talks/brene_brown_on_vulnerability.html?awesm=on.ted.com_o8di

In this first installment of my column, I’ll discuss inline form validation for mobile user interfaces and provide some guidelines for its use.

In this age, the only source of competitive advantage is the one that can survive technology-fueled disruption: an obsession with customer experience.

With increasing market competition, the ability to differentiate yourself in a way that is not easily replicated becomes more difficult. Designing both the product and service experience together is a key strategy in differentiating your organization.

There are wonderful times for us web-designers. CSS3 has finally arrived and it’s here to stay. With an equal high support among all modern browsers we have great possibilities right at our fingertips. css3files.com is not only here to guide you through the often dense jungle of the CSS3 syntax, but it also wants you to encourage to use CSS3 right now! Don’t care about the old Internet Explorers, a website hasn’t to look the same in every browser.

The goal here is a background image on a website that covers the entire browser window at all times.

"Onze website maakt gebruik van cookies. Met cookies wordt de website persoonlijker en gebruiksvriendelijker. Lees meer over cookies."

A collection of patterns and modules for responsive designs.

The GeoNames geographical database covers all countries and contains over eight million placenames that are available for download free of charge.

Using media queries based on em units is another way of embracing the flexibility and unpredictability of the web. It puts the user in control of the experience, and allows the content to dictate the layout.

On the net, you're constantly exposed to the best that is available in the digital medium. The best in blogs, the best in podcasts, the best in software, coding, and digital design. And if you live your life in the net, as more and more people do, then you are not only aware of these ultimates, but you and your efforts stand side-by-side with them.

Detector is a simple, PHP- and JavaScript-based browser- and feature-detection library that can adapt to new devices & browsers on its own without the need to pull from a central database of browser information.

A three dimensional and space efficient menu concept.

Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest. It's not magic, but almost.

Speaker, author and CEO Jared Spool chats to Tom May about how to research your users and make your sites and apps intuitive

Build for modern browsers. Test your work in those and make sure the experience for an up to date browsers is as you want it. Then look at the problems you have, alongside your policy in terms of what you are delivering to older browsers, and see what you need to fix those issues.

An important part of our job is staying up to date. Technologies don’t really change that fast — HTML5 and CSS3 take a long time to be specified and implemented. But the ideas surrounding these technologies and the things we can do with them are constantly evolving, and hundreds of blog posts and articles are published every day. There’s no way you can read all of those but you’ll still have to keep up to date. Here are some tips on doing that while still having some time left to work.

Interactive data visualizations are an exciting way to engage and inform large audiences. They enable users to focus on interesting parts and details, to customize the content and even the graphical form, and to explore large amounts of data. At their best, they facilitate a playful experience that is way more engaging than static infographics or videos. Here are several ideas and concepts of interaction design for data visualizations, using 11 examples from the web.

One of her points for engineers was not to say “no” so quickly. That one stuck with me for a while and swam around in my head. My first reaction was, “but you don’t understand why we say no!” And a million other defensive thoughts soon joined in the party. She is right, of course. We do say “no” very quickly, not just to designs, but to everything. That led me into thinking about the psychology of software engineers and what makes us the way we are.

A Cookie Consent demo site

But the browser you’re using could be limiting that potential. So please read on, so you can learn how to drastically improve your experience on the Web.

How Many Test Users in a Usability Study? Summary: The answer is 5, except when it's not. Most arguments for using more test participants are wrong, but some tests should be bigger and some smaller.

Just include energize.js before any of your code that deals with click events (including any libraries and frameworks). The reason is that energize.js fires simulated click events and also needs to suppress the "ghost click", the real click event that is fired later. This is done via stopPropagation, which stops the the event from firing for other handlers listening for the click event. Since handlers fire in the order they were added, energize.js needs to add its own click handler first.

This is the Git reference site. This is meant to be a quick reference for learning and remembering the most important and commonly used Git commands. The commands are organized into sections of the type of operation you may be trying to do, and will present the common options and commands needed to accomplish these common tasks.

On building a device library.

With an elegant  user-interface that doesn't hurt the look and feel of your site, Cookie Control is a mechanism for obtaining a user's explicit consent for the use of cookies on their computer. It takes just minutes to configure and add Cookie Control to your website.

To get started with building a responsive site, having a strong toolkit can make a world of difference. Here Denise Jacobs and Peter Gasston round up 50 great tools to aid the process of making your sites responsive

The topic of mobile operating system fragmentation comes up often: how long do different versions of operating systems have to be supported, what are the implications many of OS versions and devices for mobile development teams? So I pulled together some data points that hopefully illustrate what's going on.

Create QR Codes with our QR Code Generator for URLs, Tweets, foursquare Check-ins, iPhone App Store Downloads, Android Market Downloads, Google Analytics Campaigns, Coremetrics Campaigns, and more. Download a QR Code in PNG, EPS, or SVG formats.

Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.

Below are some links to screen reader demos, research and resources that I’ve collated and am currently making my way through. Although screen readers are only one of many types of assistive technology, for developers they are the most important to understand as are most directly affected by how we write HTML, CSS and Javascript. The more javascript we include in our web pages the more we need to understand them and be using them for testing.

Welcome to the internal GitHub styleguide. This is where you should look if you're interested in how to write code for GitHub. We have a living CSS styleguide, JavaScript styleguide and some recommendations on how to write Ruby code.

This is a linux command line reference for common operations.

Here’s a bit of backstory on why I began hunting for icons, and a few thoughts about icon design in general. If you don’t care about that, skip to the roundup.

Rainbow is a code syntax highlighting library written in Javascript.

Interessant overzicht van (eigenschappen en ontwikkeling van) competenties en talenten.

As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness.

Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts.

If your Web site targets browsers that include earlier versions of Internet Explorer, you want to know the level of CSS compliance for those versions. This article provides an at-a-glance look at CSS compliance across recent versions of Internet Explorer, including support in Internet Explorer 9.

Developers creating JavaScript applications these days usually use a combination of patterns like MVC/MV*, modules, widgets and plugins for their architecture.Whilst this works great for apps that are built at a smaller-scale, what happens when your project starts to grow? In this talk, I present an effective set of design patterns for small, medium and large-scale JavaScript applications. You’ll learn how to separate concerns, keep your application logic decoupled, build modules that can exist on their own or be dropped into other projects and scale your applications to minimize any breakage in the user experience.

Automated lossy JPEG optimization

For these widgets and structures, this document describes the keyboard interaction and identifies the relevant WAI-ARIA roles, states, and properties.

The technical concept behind mobile first.

We have over 400++ high quality free psd files collected from all over the web!

This page lists a number of lawsuits and settlements which relate directly to web accessibility. Each case is listed with its plaintiff(s), defendant(s), the year in which it occured, and an URL at which you can find out more details.

Subtle Patterns is a collection of 101 high quality design patterns for you to use freely. New patterns added weekly. A project by Atle Mo.

Various web design resources sorted by subject, eg. accessibility, usability, javascript, and so on.

A big ol' goody bag filled with CSS animations for WebKit, Firefox and beyond.

Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Mustache templates are compatible with Handlebars, so you can take a Mustache template, import it into Handlebars, and start taking advantage of the extra Handlebars features.

Due to the CSS3 property box-shadow its a breeze to add a shadow to almost any HTML element. For months now the various creative possibilities archived by this property (reaching from handy to absurd) are being discussed and presented on multiple sites (e.g.: peterkroener.de, dev.opera.com, viget.com). In my opinion far too less attention is being spent at the optional fourth parameter spread Let’s change that.

This morning I awakened with a question in my twitter stream from @deebeefunky. He was frustrated by the fact that when he sets a blur on box-shadow, it shows on two sides of the box. He wants it to show on only one side. Of course, that got me thinking. I did come up with one solution—it won’t work in every situation—but it may work in yours.

Recently I spoke at the Highland Fling Conference in Edinburgh and, as part of my presentation on Choosing the right Content Management System, I had a bit of a rant about the use of WYSIWYG editors in Content Management Systems. I think these things are responsible for not only a lot of badly formatted content, but also for holding back the development of better ways of allowing non-technical users to deliver content.

I think we're all pretty well convinced that our sites can look different across browsers. Sometimes, though, our team or our clients don't totally understand that. Lemme take a stab at convincing them that each browser gets an experience that is customized to that browsers's capabilities.

There seems to be a growing sentiment that interaction designers, visual designers and UI designers need to know how to write code.

It's really easy to simplify things and make bold assertions like "designers should code". As constantly happens, it's more complicated than that. I will reject that assertion, and I'll propose what isn't really a proposal, but an acknowledgment of what's already done for the best projects out there.

Yesterday John Gruber wrote about the upped pixel density in the upcoming iPhone (960x640 instead of 480x320), and why Apple did this. He also wondered what the consequences for web developers would be.

Lately, I have been thinking a lot about responsive web design, mobile design in general and the argument over web applications vs native apps. Here’s my take.

“The Way is shaped by use, but then the shape is lost.” Our sites are accessed by an increasing array of devices and browsers, and our users deserve a quality experience no matter how large (or small) their display. Are our designs ready? Explore sites that think beyond the desktop and have successfully adapted to their users’ habits. Ethan will also discuss how bring an extra level of craftsmanship to our page layouts, and revisit popular CSS techniques in this ever-changing environment.

With this blog post I’d like to show you a couple of ways how to implement a simple JavaScript exception notifiers.

Today we're going to discuss an effective set of patterns for large-scale JavaScript application architecture. The material is based on my talk of the same name, last presented at LondonJS and inspired by previous work by Nicholas Zakas.

The Mediator is a behavioral design pattern in which objects, instead of communicating directly with each other, communicate only through a central message passing object (the Mediator). The Mediator pattern facilitates both loose couple and high cohesion.