Article Archives

Progressive Enhancement “Debate”

Nolan Lawson:

I had a slide in my talk that read:

In 2016, it’s okay to build a website that doesn’t work without JavaScript.

The condemnation was as swift as it was vocal.

Response by Jeremy Keith:

That framing makes it sound like it’s a binary choice: either the website works or it doesn’t. That’s not what I’m suggesting. I’m advocating that the core functionality of a website (which can be as simple as reading some text) should be available without JavaScript (because, let’s face it, that core functionality doesn’t require JavaScript).

Sounds like most people, Nolan and Jeremey included, agree that progressive enhancement doesn't have to put a website in position of "JavaScript is enabled and loaded, so it works, or not enabled or not loaded, so it doesn't work." It's more nuanced and happens on a feature-by-feature basis of a site.

That's easy middle ground to agree on. But I think this debate keeps popping up over and over is because "binary" is increasingly how things are done. Not fully loaded JavaScript = white page of nothing. Plenty of folks saying: yikes. Plenty of folks saying: meh.

Declarative Data Fetching with GraphQL

The following is a guest post by Nilan Marktanner from Graph.cool. I don't know about y'all but I've spent plenty of time in my career dealing with REST API's. It's a matter of always trying to figure out what URL to hit, what data to expect back, and how you can control that data. A quick glance at GraphQL makes it seem like it simplifies things both for the creators and consumers of the API. Let's let Nilan explain.

(more…)

Is jQuery Still Relevant?

It took a minute, but I believe we have arrived at Baby Bear on the jQuery conversation. Some choice quotes from the ensemble cast blog post:

Nathanael Anderson: The biggest negative for jQuery in this day and age is that browsers are a lot more standard in coverage and directly messing with the DOM is slow unless you can do everything at one time; and jQuery was not designed for large change groups.

Todd Motto: Final thing from me: let’s not aim to dissuade jQuery developers from using it – it’s amazing, extremely mature and powerful, and its place in “modern web” has shifted, that’s all. In 5 years we’ll all be doing it wrong again.

TJ VanToll: To me, jQuery remains the gold standard for a library with an elegant API design and comprehensive documentation. Although I may not use it in every app nowadays, I still find it the easiest way to interact with the DOM and add powerful widgets to my apps.

And coincidentally, in Nicholas C. Zakas's newsletter:

I ran into a former coworker shortly after leaving Yahoo as he was preparing to join a new company as a tech lead. During our conversation, he mentioned that his top priority would be to switch them over to YUI. The company was using jQuery, and he said he really didn't want to use it. I gently suggested that, perhaps, this wasn't really a battle he wanted to wage. He could certainly evaluate the overall architecture to see what improvements would be made, but going into a company and trying to get everyone to switch to your favorite library or framework is rarely a formula for success.

When I joined Box, I ran into a similar situation except that people seemed to assume that I would try to eliminate jQuery from the front-end. Time after time I was asked, "are you going to get rid of jQuery?" My response was always the same: "No, jQuery isn't going anywhere. However, I want to make sure its position in the architecture is well-defined."

Pledging allegiance to a particular technology or approach is fine so long as you don't become dogmatic about it.

SVG → Letterpress

I took a class at Bay View Printing Company, the local community letterpress shop I belong to, all about printing with polymer plates. The shop is absolutely full with wood and metal type, and all the accoutrements around that, but polymer plates are not that. You get them made! They can be anything! Sometimes it's fun to stick with the old school setting of type. I like doing that quite a bit. But I was interested in learning how to letterpress with designs I made in a modern way. Like, with SVG.

(more…)

Yarn

From the didn't see that coming news desk:

We're pleased to announce the open source release of Yarn, a collaboration with Exponent, Google, and Tilde. With Yarn, engineers still have access to the npm registry, but can install packages more quickly and manage dependencies consistently across machines or in secure offline environments.

Yarn is a new package manager that replaces some of what npm does... that you can install with npm.

So, it's faster. Dion Almaer:

Thanks to features such as its caching and parallelism approach you will be happy to see the dramatic speed up.

Yehuda Katz is a contributor, who says the open source setup of the project is one of its biggest assets:

... the Yarn project is set up as a community project, using a standard open source license, in its own GitHub organization, and set up to use the governance model that has worked effectively for Ember and Rust.

... I consider the technical details to be secondary to the way in which the project is set up to evolve.

Because of the clear benefits, neat features, and compatibility with the ubiquitous npm, I imagine usage of this will sweep the earth in short order. Here's a handy cheat sheet for the commands (e.g. npm install taco --save === yarn add taco).

What Yarn isn't is a total replacement of npm. It looks like npm is still the directory, storage, and where you publish and maintain packages.

Lots of ways to add an ID to the `body` element

The following is a guest post by Trishah Woolley. Over the years, Trishah has collected a ton of code snippets that do the job of adding IDs and classes based on some variable information, like the URL or data from WordPress. Each of these snippets were either collected from documentation or a similar online resource, or written by Trishah based on standard features of the language and API's involved.

(more…)

The Annoying Mobile Double-Tap Link Issue

We had a question come up the other day on ShopTalk about regular ol' anchor links on iOS, and some weird situation where you couldn't just tap them once to go to the link, it required tapping the link twice. I've experienced this myself and have been pretty confounded.

(more…)

How It Feels Reactions

Jose Aguinaga pinched a community nerve:

The JavaScript community is insane if it thinks anyone can keep up with this.

I heard a lot of Hilarious! So true! reactions. I heard a lot of Nope. This isn't what it's like. reactions, sprinkled with You don't have to use/start with every tool. and Both of these people (in this fake conversation) are kinda jerks.

Some Baby Bear reactions include Tim Kadlec and Addy Osmani. Sacha Greif wrote to me to point out that the results of his big survey indicate most JavaScript devs are pretty happy with the language and ecosystem.

Missed title opportunity: "How it feels to read 'How it feels to learn JavaScript in 2016'"

Cicada Principle and CSS

Charlotte Jackson uses this classic clever technique to pseudo randomize border-radius, making irregular circles for a photo grid.

A cicada is a rather grim looking little bug. You may have heard of them. There is a kind called the Periodical Cicada, which simultaneously emerge in masses every 7, 11, 13 or 17 years; they find a mate and then they die. It's not much of a life.

However, the interesting thing is that these numbers are all prime numbers.

Alex Walker dug into this back in 2011 and made some cool demos like randomized non-repeating backgrounds and infinite lego dude variations.

Here's a demo by yoksel combining the idea with blend modes:

See the Pen The Cicada Principle background + background-blend-mode by yoksel (@yoksel) on CodePen.

Normalize (CSS) No More.

Shaun Rashid:

... as I work with building responsive websites where the widening array of devices has changed the way that we design websites, I have fallen back to the age-old statement that answers the question of whether a website needs to look exactly the same in every browser. With the answer to that question, I have found that the reset/normalize stylesheet has become unnecessary.

I wonder how popular not using any sort of reset is already? As you look down the list of things that something like sanitize.css fixes, much of it is for browsers that I'd imagine a lot of people don't worry too much about anymore, what with the evergreen-ness of most desktop browsers these days. Then remove the opinionated stuff and the stuff with only minor cross-browser differences and there isn't much left.

I couldn't live without this though:

* {
  box-sizing: border-box;
}

The Easiest Way to Find a New Job

As a highly talented developer or designer, shouldn’t companies apply to you? On Hired the traditional process of finding a job is completely reversed. Hired expedites the job search process through an efficient system of:

  1. Companies competing for top talent with visibility into a candidate’s traction on Hired, driving rapid turnaround times from interview to final offer.
  2. Free personalized support to ensure your next job is your dream job. On Hired our Talent Advocates have your back, whether it’s negotiating compensation or preparing for interviews.
  3. Upfront salary, equity and bonus details in every interview request.

Try Hired Today

Responsive Image Breakpoints Generator

I'm guilty of using responsive images by taking a high res image and downsizing it a few times kinda randomly and using those as the srcset images. Basically the same "desktop", "tablet", "mobile" thinking I can also be guilty of with breakpoints.

Soooo what is the perfect way to do responsive images? Ideally we'd be sending the exact image that any device needs. If a device/browser/design combination requires an image to be 457px wide, in a perfect world, we'd send it a 457px wide image. But it's impractical (from a lot of perspectives: creation, storage, caching) to make "one image per possible pixel width".

There is a happy medium here. The Responsive Image Breakpoints Generator says:

Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best matchthe various user devices. They compromise on either the image dimensions or the number of images. It's time to solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.

It takes information like your breakpoints, your resolution needs, a reasonable change in file size between versions, and the image itself to create a all the images (and responsive images markup) you need to get to this happy medium.

Will we be flattening our HTML for CSS Grids?

I was watching Rachel Andrew talk about CSS Grid Layout yesterday at An Event Apart. Grid is amazing and the day will soon come where it's a dominant web layout tool of choice. That day isn't here yet though, as no stable browser is shipping the latest version of the spec (it's behind a flag at best).

The good news is that, as of just a few days ago, the spec is really stable and has entered "Candidate Recommendation" status. Since all browsers have been developing against the spec, it's likely that widespread non-prefixed ready-to-go support will drop in all stable browsers fairly soon.

The bad news is that it will probably do-so without subgrid support, a point that Rachel underscored well in her talk.

(more…)

A Redesign with CSS Shapes

CSS Shapes is like the perfect example for progressive enhancement these days. Kinda like border-radius was. Older browsers have square corners! Who cares! CSS Shapes allow you to wrap text irregularly - like along the path of a circle().

Eric Meyer uses it on a production page and shows how it works. Here's some code I snagged from the CSS on the site itself showing it only being applied on large screens with support:

@media only screen and (min-width: 720px) {

  @supports (shape-outside: circle()) {

    .single-page article .complex-content img.right {
      shape-outside: circle(150px at 170px 130px);
    }

  }

}

Jen Simmons has a bunch of great demos of this as well. Looks like shape-outside supports circle(), ellipse(), polygon(), and url() but not path() yet.

The SVG `path` Syntax: An Illustrated Guide

The <path></path> element in SVG is the ultimate drawing element. It can draw anything! I've heard that under the hood all the other drawing elements ultimately use path anyway. The path element takes a single attribute to describe what it draws: the d attribute. The value it has is a mini syntax all to itself. It can look pretty indecipherable. It's a ton of numbers and letters smashed together into a long string. Like anything computers, there is a reason to the rhyme. I'm no expert here, but I thought it would be fun to dig into.

(more…)

text-spinners

A clever idea for text-based spinners in CSS. You set the "keyframes" in the content, and cycle through them by moving the line of text to the left in the actual keyframes.

<button>Loading <span class="loading"></span></button>
.loading.bar2::after {
  content: "▁\A▂\A▃\A▄\A▅\A▆\A▇\A█";
  animation: spin8 2s steps(8) infinite alternate;
}
@keyframes spin8  { to { transform: translateY(-12.0em); } }

This is a whole repo of them by Max Beier. I've isolated one of them here:

See the Pen text-spinners by Chris Coyier (@chriscoyier) on CodePen.

Choreographer-js

A new animation library by Christine Cha:

A simple library to take care of complex CSS animations.

You define the animations through its JavaScript API and execute them via DOM events, then the animation is done through applying inline CSS.

Seems to me it's not so much for helping build complex CSS animations, but for doing animations through CSS that you can't otherwise do, because you can't get things like mouse or scroll position in CSS.

Template Literals

The Template Literal, introduced in ES6, is a new way to create a string. With it comes new features that allow us more control over dynamic strings in our programs. Gone will be the days of long string concatenation!

To create a template literal, instead of single quotes (') or double quotes (") quotes we use the backtick (`) character. This will produce a new string, and we can use it in any way we want.

(more…)

Loading Polyfills Only When Needed

We had this question on ShopTalk just the other day. We're so (rightfully) worried about web performance, it feels like we shouldn't be loading polyfills all the time, only when we detect they are needed. Philip Walton:

... too many people building websites today take a “lowest-common-denominator” approach. By that I mean they ship the same bundle of JavaScript to all users (regardless of browser capabilities), and the bundle they ship contains all code required to make the site work in the oldest browser they want to support.

While I understand that this approach is simple, it’s not respectful of your users, and it prioritizes your convenience over their experience.

In a slightly-surprising twist, his tactic is to:

  1. Cut the mustard for browsers that support everything needed
  2. If passes: kick off everything else
  3. If anything fails: load all polyfills then kick things off

The idea is to keep things simple, and not get yourself into a complicated state where you're trying to accommodate for the situation where "the browser can now be in 32 different states".

Things to Watch Out for When Working with CSS 3D

I've always loved 3D geometry. I began playing with CSS 3D transforms as soon as I noticed support in CSS was getting decent. But while it felt natural to use transforms to create 2D shapes and move/rotate them in 3D to create polyhedra, there were some things that tripped me up at first. I thought I might write about the things that surprised me and the challenges I encountered so that you might avoid the same.

(more…)

Dock Show & Tell

Someone wrote in asking about some icons in my Dock. I figured that might be a fun thing to share, and y'all can follow suit and share yours as well. I know "Docks" are a little Mac-centric, but feel free to share your most used apps on other platforms as well. I bet this changes quite a bit over the years, so it will be interesting to re-do this in years to come and see how it changes.

(more…)

Methods for Controlling Spacing in Web Typography

If you were developing sites in 2006, then you may have worked with a designer like me who was all up in your business about fonts not looking exactly the same in the browser as they did in mockups.

Then you may have tried explaining to me the pains of cross-browser compatibility and how different browsers render fonts differently from one another. In response, I likely would have sent you an image file that contains the content instead to make sure everything looked the same in all browsers. Yes, I was one of those designers.

Web fonts have come a very long way since then and we now have tools to tweak the way fonts render in browsers. Some have been around for quite a while. I remember my mind nearly bursting with excitement when I discovered FitText.js and Lettering.js way back when.

There are still plenty of situations today where adjusting fonts is needed to ensure the best legibility despite having all these fancy tools. We're going to cover a few of those in this post along with methods for how to deal with them.

(more…)

System Fonts in SVG

There was a time when the smart move in picking fonts for a website was to a font-family that was supported across as many platforms as possible. font-family: Tahoma; and whatnot. Or even better, a font stack that would fall back to as-similar-as possible stuff, like font-family: Tahoma, Verdana, Segoe, sans-serif;.

These days, an astonishing number of sites are using custom fonts. 60%!

No surprise, there is also a decent amount of pushback on custom fonts. They need to be downloaded, thus there are performance/bandwidth hits. There is loads of nuance on how you load them.

Also no surprise, there is some advocacy for the return to local fonts. Fast! Good enough! Let's look at that for a sec, then also look at using them within SVG.

(more…)

Accessible SVGs in High Contrast Mode

The following is a guest post by Eric Bailey. You know how people change settings sometimes to make it easier to use for them? For example, they bump up the default font size in their browser so it's easier for them to read. As web designers, we like to accommodate that. We consider it good accessibility. The same goes here. Some people on Windows enable "High Contrast Mode" to make their computer screen easier for them to work with. Will our important SVG files hold up to the change? Let Eric show you.

(more…)

Inky and Slinky

Inky is kinda like a preprocessor for HTML created by Zurb, specifically designed for responsive emails.

I'm sure a lot of us have hand-coded HTML emails (I do it regularly) and know that it's typically <table></table> soup. It's not even just the tables that are annoying, but the fact that there are so many of them nested to do even fairly simple things it's hard to keep straight.

Inky's appeal is pretty clear from the first demo in their docs:

(more…)

Reframe.js Notes

FitVids.js is still a perfectly workable mini plugin for making videos (or anything) responsive. You need it, or something like it, for sites that have things like YouTube or Vimeo videos, Instagram embeds, or really anything that's not responsive in the aspect-ratio sense. <img />/<video></video> resize their width/height in an aspect ratio friendly way, <iframe></iframe>/<canvas></canvas>/<object></object> do not.

Reframe.js is kind of a modernized version of FitVids.

(more…)

Web Animation Workshops

I’m thrilled to announce a brand new workshop series I’m starting with Val Head about web animation! We’ll be taking two-day workshop around to different cities starting this November, starting with Austin and New York. Whether you’re a beginner or you’ve been diving into animation already, this course won’t just get you started- you’ll leave with all the tools necessary to make subtle and beautiful web animations, and how to pick the right tools for the job.

Val and I both have been speaking and giving workshops around the world, and together we make a venn diagram of strength and knowledge about how to animate on the web. We’ll be covering everything from theory, to technique, to bug fixes and cross-browser stability. We both focus on accessibility and performance. You’ll learn how to make great animation decisions both from a design and technology perspective. We’ll cover working with SVG, CSS, and JavaScript technologies, both native and API. We’ll discuss complex animations, responsive animations, and UX animations, and go over when to use each. You won’t find this much web animation knowledge packed into one workshop anywhere else!

To make sure you get as much out of these workshops as possible we’re keeping the the class sizes small. Each workshop is limited to 40 participants and will include hands-on exercises to get you started.

From WordPress to Apple News, Instant Articles, and AMP

I managed to get CSS-Tricks publishing to Apple News (example link), Instant Articles (example link), and AMP (example link). The linked up article is a writeup of how that all works, starting with this self-hosted WordPress site.

Not a far cry from an RSS feed. It's the idea behind IndieWeb:

POSSE is an abbreviation for Publish (on your) Own Site, Syndicate Elsewhere.

POSSE is about staying in touch with current friends now, rather than the potential of staying in touch with friends in the future.

“OpenType Variations Fonts”

Over on the Typekit Blog, Tim Brown has written about an exciting development in the world of web fonts: an improvement to the OpenType font file specification.

This might not sound all that exciting at first, but “variable fonts” allows designers and developers to embed a single font file into a webpage and then interpolate the various widths and weights we need from a single file. That means smaller files, fewer requests, and more flexibility for designers. However, this format isn’t available to use in browsers yet. Instead, it shows that there’s a dedicated effort from Google, Microsoft, Apple and Adobe moving forward:

Imagine condensing or extending glyph widths ever so slightly, to accommodate narrow and wide viewports. Imagine raising your favorite font’s x-height just a touch at small sizes. Imagine sharpening or rounding your brand typeface in ways its type designer intended, for the purposes of art direction. Imagine shortening descenders imperceptibly so that headings can be set nice and tight without letters crashing into one another. Imagine this all happening live on the web, as a natural part of responsive design.

If you’re interested in learning more, we wrote about the call for a responsive font format which explains why it’s going to be so darn helpful in the future. John Hudson also wrote a long overview of the whole story, and the spec is here.

Sponsor: Divi 3.0

Divi 3.0 and the future of WYSIWYG has arrived. Test out Divi's new visual page builder for WordPress today and find out why it's the best and easiest way to build a beautiful website. Now you can build your website on your actual website.

Simply drag, drop edit and combine over 40 content elements to create just about any type of page you can imagine. Adjust fonts, colors, sizing and spacing and observe your changes instantly. The new front-end editor is super fast because it requires little to no traditional loading. Give it a try today.

Explaining CSS Levels

Rachel Andrews:

... it doesn’t make sense to draw a line at which all work is stopped on all parts of CSS in order to declare that CSS version finished. Therefore, after CSS2.1 all the things that had been part of the 2.1 specification were broken down into modules.

It's easy to joke "Maybe we'll get that in CSS17!", but that plays into the idea that CSS will be versioned (ala "ES6"), and those days area already over.

CSS3 sorta made sense. Tab Atkins said, of the split:

Some of our modules start out at level 3, if they extend something from CSS2.1.

But not all of them. Mostly, "CSS3" was just good marketing, like "HTML5" was. People really seemed to get it, but it's not good for the language itself. As Rachel says:

The problem with monolithic specifications is that in order to finish the spec, every component part also has to be finished.

None of us want web standards to move slower. So, we version each module, and kill the monolith:

There has never been a CSS4. There will never be a CSS4. CSS4 is not a thing that exists.

Using Dynamic Hashes in File Names with WordPress’ Enqueue Function

The following is a guest post by Pascal Klau, a self-described trainee web developer from Germany working with WordPress, Gulp, and more recently VueJS and Webpack.

During my journey of learning web technology, I stumbled upon the importance of file caching. It's a pretty important thing for web page performance. I also sometimes notice that when a file was changed, and you refreshed the page, the browser can still be using the old version (because of the cache). There is a solution!

(more…)

Transpiling ES6

While support for ES6 is always increasing, we can't always assume that users will be using a browser that supports all its features. So, in order to utilize ES6 features now and make sure we won't run into cross-browser compatibility issues, we need to transpile our code.

Let's look at two possible ways we can perform the task of transpiling our code. First, we will use npm scripts and Babel. For the second, we will look at using Gulp with Babel.

(more…)

Autoprefixing with CSS Variables

I'd call this a bonafide CSS trick, courtesy Lea Verou.

Don't miss the comments, in which Sérgio Gomes reminds us this might make it easier to change values in JavaScript, because you could skip worrying about prefixes there. Changing CSS variables in JavaScript is already rather appealing, as the changes will disperse throughout wherever they are used naturally.

And Andrea Giammarchi's trick, where you create a setup that behaves almost like a @mixin with default values:

* {
  --box-shadow:
    var(--box-shadow-x, 0)
    var(--box-shadow-y, 0)
    var(--box-shadow-blur) /* no default, required */
    var(--box-shadow-radius, 0)
    var(--box-shadow-color, black);
  box-shadow: var(--box-shadow, initial);
}

p {
  --box-shadow-blur: 8px;
}

p.special {
  --box-shadow: 10px 0 0 green;
}

Sponsor: Media Temple

CSS-Tricks is a WordPress site hosted on Media Temple. In fact, I think it's a poster child for a WordPress site. Meaning, it uses a slew of WordPress features that rather nicely support everything I want to do on this site. A blog! Forums! A Store! User management! Several unique taxonomies!

Media Temple has WordPress-specific hosting packages, and many other hosting packages ranging up through private virtual servers, dedicated servers, and even managed Amazon Web Services.

They know what they are doing over there, provide excellent support, and I recommend them for web hosting.

8-Digit Hex Codes?

Weird right? 4-digit hex codes too. They are a way put alpha transparency information into the hex format for colors. You might be seeing it more all the sudden if you use Chrome, because it dropped in 52, and the DevTools seem to be defaulting to showing alpha transparent colors in this format even if you set it originally using something else.

Firefox supports it too, for the record.

(more…)

My New Favorite ES6 Toy: Destructured Objects as Parameters

Like a lot of other developers, I’m working through my continued education learning what I can about ES6. One of the ways I’m doing this is to attend workshops by smart people. I went to Kyle Simpson’s ES6: The Good Parts course and found myself particularly interested in the practical applications of a piece of ES6 I had previously not noticed: Destructured Objects as Parameters.

(more…)

The Math of CSS locks

Florens Verschelde digs into the numbers behind the concept Tim Brown was talking about the other day.

When I tried wrapping my head around Tim’s implementation, and creating variants of it, I had a hard time figuring out what was going on exactly. I did a lot of back-of-the-envelope calculations, and I thought it would be useful to share a mathematical explanation.

Here's my layman's explanation:

  1. You can make a value (like font-size) flexible with viewport units.
  2. Using just viewport units, that value might be too flexible, resulting in values that are too small or too big.
  3. You can "lock" the upper and lower limits with @media queries.
  4. You still need a fancy calculation to calculate the "middle" values between the two "locks".
  5. The calculations can vary in complexity, especially when trying to use relative units and accommodate user font scaling.

The code ends up, in one particular example, like this:

@media (min-width: 320px) and (max-width: 959px) {
  h1 {
    font-size: calc( 1.5rem + 16 * (100vw - 320px) / (960 - 320) );
    /* For a negative slope, we have to invert the breakpoints */
    line-height: calc( 120% + 3.2 * (100vw - 960px) / (320 - 960) );
  }
}

Remember there is a PostCSS plugin.

Slicing SVG 9 Ways

Paul Lewis animated a 3D Card Flip. Straightforward enough there, but this needed a shadow element as well:

The shadow may need to move around or fade, so we need a solution that we can animate with transforms & opacity, since they can be handed off to the GPU. It will need to be separate to the element it’s shadowing, since we will likely want to fade and move it without affecting the other element.

He tried box-shadow and filter: blur(), but both aren't performant enough.

He tried an SVG element with a blur filter, but SVG alone can't do 9-slice scaling (necessary to keep the corners from scaling awkwardly).

The winner was using an SVG image but applying it to an element via border-image, which essentially 9-slice scaling.

CSS-Tricks Chronicle XXVIII

I was interviewed by Justin Crawford on the Mozilla Hacks blog about cross browser compatibility.

What motivates you to make the extra effort to build a cross-browser compatible site?

Money. People pay for websites that work for them. Here’s a little example: Just last week we were working on some drag-and-drop functionality in a new part of CodePen. Worked great in Chrome, didn’t work in either Firefox or Safari. Tim Holman, one of our front-end devs, had to spend a good part of a day implementing different fixes for both. Good thing we did that before launch, otherwise we surely would have turned some potential customers off.

\

(more…)

I Wanted to Type a Number

Zach Leatherman on the weirdnesses of numeric inputs. A new hero is born:

Luckily, the web standards people have recognized this mess and have standardized an appetizing alternative: the inputmode attribute. inputmode lets you directly specify which type of keyboard to use, independent of the type attribute value.

This new attribute isn't supported anywhere yet, though.

They've also create a new plugin to help normalized numeric input behavior.

Are icons content?

Edd Morgan writes in:

Obviously we all agree that the markup should contain only content, nothing ornamental. But what category do icons fall into? Are they not ornamental, therefore should not exist in the markup and be defined purely in CSS?

(more…)

(Survey) The State of JavaScript 2016

Preliminary results #1 interesting takeaways: 74% of people who haven't used React are interested in learning it, and 92% who do would use it again (topping both charts). Vue is a close second in "would use again". Of the lesser-known frameworks, Aurelia is the most-suggested.

Preliminary results #2 interesting takeaways: not many people have TypeScript (or Elm) but have large numbers of want-to-learn folks. CoffeeScript has decent have-used-before numbers and quite low would-use-again numbers. People tend to like JavaScript and like they way they currently write it.

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag