React + Dataviz

There is a natural connection between Data Visualization (dataviz) and SVG. SVG is a graphics format based on geometry and geometry is exactly what is needed to visually display data in compelling and accurate ways.

SVG has got the "visualization" part, but SVG is more declarative than programmatic. To write code that digests data and turns it into SVG visualizations, that's well suited for JavaScript. Typically, that means D3.js ("Data-Driven Documents"), which is great at pairing data and SVG.

You know what else is good at dealing with data? React.

(more…)

“The Notch” and CSS

Apple's iPhone X has a screen that covers the entire face of the phone, save for a "notch" to make space for a camera and other various components. The result is some awkward situations for screen design, like constraining websites to a "safe area" and having white bars on the edges. It's not much of a trick to remove it though, a background-color on the body will do. Or, expand the website the whole area (notch be damned), you can add viewport-fit=cover to your meta viewport tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/> 

(more…)

Design Tooling is Still Figuring Itself Out

It probably always will be, to be fair.

At the moment, there are all kinds of things that design software is struggling to address. The term "screen design" is common, referring to the fact that many of us are designing very specifically for screens, not print or any other application and screens have challenges unique to them. We have different workflows these days than in the past. We have different collaboration needs. We have different technological and economic needs.

Let's take a peak at all this weirdness.

(more…)

Design Resource Sites

Sometimes when you're designing something, you need little helping hands. Perhaps a nice stock photo. Perhaps a happy little color palette. Perhaps a bleep or bloop sound. Perhaps the perfect icon.

There are tons and tons of sites that do those things. There are fewer sites that curate these design resource sites into manageable, high-quality groups. So allow me to abstract that yet another step and provide a selected list of those types of sites.

(more…)

unicode-range

The unicode-range property in CSS is used by the @font-face to define the characters that are supported by the font face.

@font-face {
  font-family: 'MyWebFont'; /* Define the custom font name */
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff'); /* Define where the font can be downloaded */
  unicode-range: U+00-FF; /* Define the available characters */
}

(more…)

So You Want To Be a Senior Developer?

Let me start with a classic caveat: I cannot bestow upon you the title of senior developer. I have no special insight into how companies these days are hiring and promoting people to senior developer roles.

What I can tell you is what qualities I think would make for a heck of a senior developer. I can tell you how I think about the distinction between senior developers and those who aren't quite there yet. Should I, one day, be in charge of a legion of developers where it was my call what level they were at, this is what I would think about.

(more…)

Working with Schemas in WordPress

I polled a group of WordPress developers about schemas the other day and was surprised by the results. Even though almost all of them had heard of schemas and were aware of the potential benefits they provide, very few of them were actually using them on a project.

If you're unfamiliar with schemas, they are HTML attributes that help search engines understand the content structure and know how to display it correctly in search engine results. We've all worked on projects where SEO was a big ol' concern, so schemas can be a key deliverable to help optimize and delivering search performance.

We're going to dig into the concept of schemas a little more in this post and then walk through a real-life application of how to use them in a WordPress environment.

(more…)

Best Way to Programmatically Zoom a Web Application

Website accessibility has always been important, but nowadays, when we have clear standards and regulations from governments in most countries, it's become even more crucial to support those standards and make our projects as accessible as they can be.

The W3C recommendation provides 3 level of conformance: A, AA and AAA. To be at the AA level, among other requirements, we have to provide a way to increase the site's font size:

1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)

Let's look at solutions for this and try to find the best one we can.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag