17 Apr

Animating SVG with CSS

There isn't just one way to animate SVG. There is the <animate> tag that goes right into the SVG code. There are libraries that help with it like Snap.svg or SVG.js. We're going to look at another way: using inline SVG (SVG code right inside HTML) and animating the part right through CSS.

I played with this personally recently as my Alma mater Wufoo was looking to freshen up the advertising graphic we're running here. My latest design around …

Animating SVG with CSS is a post from CSS-Tricks

17 Apr

Learning to focus()

Thanks to good fortune, I have a functional pair of eyes. When it comes to traversing web pages, this is something of a boon since shifting my focus from one part of the page to another requires nothing more than semi-consciously contracting my extraocular muscles and rotating my eyeballs a fraction of their circumference.

Though my visual — and, therefore, cognitive — focus could now be said to have changed, the user interface itself does not know my attention has turned. At least, not until I begin to physically interact with the newly scrutinized region. To put it another way, rotating my eyeballs is an unrecorded event.

Herein lies a very common but frequently unaddressed accessibility issue: If I’m not using my eyes (and my mouse hand to point), how do I ‘focus’ on something in order to then interact with it? The answer, as I’m sure you know, is via programmatic focus. It’s not as simple as just incorporating ‘focusable’ elements into our designs, however. Sometimes it is not the user but the interface on the user’s behalf that must move focus between different areas. This requires deliberate focus management on the part of the developer.

For accessibility, managing focus is essential in many of even the simplest JavaScript-driven interactive widgets, but correct usage is almost impossible to test for with automated QA tools. That’s why I want to take you through a couple of simple examples today.

ScrollTop Animation

In this example, I invite you to imagine you have ‘enhanced’ a same-page navigation link so that, instead of jumping abruptly to the link’s target fragment (#section1, let’s say), you are ushered gently to this destination via a JavaScript scrollTop animation. The important thing to note regarding accessibility when using this technique is the necessity to override the default function of the <a> element.

[code language="javascript"] event.preventDefault(); [/code]

By doing this you are telling the browser to avoid, at all costs, doing anything standard, expected or interoperable. You are telling the link not to link. In fact, the only way to make certain the link actually takes the user correctly to the page fragment is to turn JavaScript off. Well, then.

By simply linking to a page fragment — as one would with JavaScript off — the browser essentially focuses this fragment. This is where screen reader output and keyboard interaction is now based. By animating the scrollTop, no such focusing action takes place, meaning screen reader output and keyboard interaction continues from the area of the page that is no longer in view. This is no good.

Continue reading %Learning to focus()%

17 Apr

Interview: Tom Oram and Rob Allen

In our second interview, we talk to Tom Oram, who works for a small development firm in Wales and Rob Allen, from Nineteen Feet.

These two developers have a solid wealth of PHP experience and knowledge and have helped me refine my ideas and approaches on many occasions. With that, we’ll start with Tom.

Tom Oram
What lead you to PHP?

A job. I was offered a job using a language I knew nothing about called PHP. It was PHP version 3 at the time, so much less advanced than it is now. Since then, I’ve been using PHP almost every day of my working life.

What have been the things about PHP that bit you?

In previous versions I’ve had various things which have caused confusion and frustration, most notably references and object copying in PHP 4.

However in PHP 5 I don’t really have anything that really catches me out. There are, however, things which I think could be improved or added to make the language easier and more consistent to use.

What have been the highlights or redeeming features

I guess the best thing about PHP is the speed in which you can get going. You can have an idea and very quickly try it out while at the same time it’s very well suited to larger and more complex projects as well.

What are the compelling PHP features for you?

For me I love interfaces and the fact that static typing is becoming more and more possible while still allowing dynamic typing.

What do you want to see added to the language? Type hinting for scalar parameter types Type hinting of return values Nested classes
Why PHP over Ruby, Python, Go, etc?

Honestly I think they all have their own pros and cons. In many ways I think the other languages are designed better and are more consistent.

However if you’re used to programming in a statically typed language (especially Java) then PHP might seem easier to relate to than Python or Ruby.

Do you see yourself moving to another language in the future?

I use other languages all the time, and if a job is better suited to another language I will use that. However for web-based projects I always reach for PHP first, I currently have no intention of changing that.

Do you have a custom framework/setup?

Continue reading %Interview: Tom Oram and Rob Allen%

17 Apr

Highly Customizable Tagging System jQuery Plugin

Advertise here via BSA

TaggingJS is a jQuery plugin to create an highly customizable front-end tag system. It is less than 3 kb and support major browsers in the world. It is licensed under MIT License. There are several ways to customize the default behavior of taggingJS: 1. Use a JavaScript custom_options object to customize the global taggingJS behavior. [...]Sponsors

Professional Web Icons for Your Websites and Applications

17 Apr

Vis.js – Dynamic Browser Based Visualization Library

Advertise here via BSA

Vis.js is a dynamic, browser based visualization library. The library is designed to be easy to use, handle large amounts of dynamic data, and enable manipulation of the data. The library consists of the following components: DataSet and DataView. A flexible key/value based data set. Add, update, and remove items. Subscribe on changes in the [...]Sponsors

Professional Web Icons for Your Websites and Applications

16 Apr

12 Little-Known CSS Facts

CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never knew about.

In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file some of these away for later use.

The color Property Isn’t Just for Text

Let’s start with the easier stuff. The color property is used extensively by every CSS developer. Some of you not as experienced with CSS may not realize, however, that it doesn’t define only the color of the text.

Take a look at the demo below:

See the Pen CtwFG by SitePoint (@SitePoint) on CodePen.

Notice in the CSS, only one color property is used, on the body element, setting it to yellow. As you can see, everything on the page is yellow, including:

The alt text displayed on a missing image The border on the list element The bullet (or marker) on the unordered list The number marker on the ordered list The hr element

Interestingly, the hr element, by default does not inherit the value of the color property, but I had to force it to do so by using border-color: inherit. This is kind of odd behaviour to me.

All of this is verified by the spec:

This property describes the foreground color of an element’s text content. In addition it is used to provide a potential indirect value … for any other properties that accept color values.

I can’t think of anything else that would qualify as ‘foreground’, but if you do, let us know in the comments.

Continue reading %12 Little-Known CSS Facts%

16 Apr

Getting Started with PHP Underscore

If you’ve ever used the Backbone framework for JavaScript, you’ll already be familiar with Underscore. Indeed, it’s become incredibly useful for JavaScript developers in general. But did you know that it’s been ported to PHP?

In this article I’ll take a look at Underscore, what it can do, and provide some examples of where it might be useful.

What is Underscore?

Underscore describes itself as a “utility belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery’s tux, and Backbone.js’s suspenders.”

Most notably, Underscore provides a bunch of utilities for working with collections and arrays, some for working with objects, basic templating functionality and a number of other useful functions.

The functions which operate on collections and arrays can be particularly useful when dealing with JSON, which makes it great for handling responses from web services.

Continue reading %Getting Started with PHP Underscore%