Add a Number to Two Variables At Once

You can initialize two variables to the same value at once:

var foo = bar = 10;

But there is no similarly easy mechanism to add, say, 5 to both foo and bar at the same time. Of course, it's simple enough to just do:

foo += 5; // foo is now 15
bar += 5; // bar is now 15

But that's two operations. (more…)

Annotation is Now a Web Standard

This sure is exciting news: the various groups that make up the W3C have agreed upon a set of rules by which we’ll be able to annotate, highlight and make comments to a webpage without the need of a third party script or framework.

Dan Whaley describes why this could be a big deal:

The W3C standards are a key milestone towards a future in which all pages could support rich layers of conversation without requiring any action by their publishers—because that capability can be built into the browser itself and be available as a native feature, just like like web search. The shared vision is that conversations will be able happen anywhere on the Web, or even on documents in native apps, and inline instead of below-the fold, in a federated, standards-based way.

Responsive Images in WordPress with Cloudinary, Part 2

In Part 1 of this series, I provided some background on responsive images, describing how you can add srcset and sizes attributes to an img element to serve appropriately sized image files to users of a website based on the size and capabilities of their browser and device. I also shared how WordPress used its native image resizing functionality to implement srcset and sizes automatically and how you can use an external image service like Cloudinary to extend the native implementation that WordPress provides.

(more…)

Google Analytics Data Studio

I've said a number of times in the past:

I wish I could just check a checkbox and make certain Google Analytics data public.

I get that analytics can be a very private thing for some sites. I think there are just as many sites where that data just doesn't need to be private. Not only would it be interesting, but insight might be gleaned from having more eyeballs on the data, and it could contribute to a wider data set of analytic trends.

Anyway, there is no such checkbox. (more…)

HTML APIs: What They Are And How To Design A Good One

Lea Verou writes about the design of HTML APIs and how we might write better documentation for web designers. An HTML API is term for a JavaScript library that is configured and controlled through HTML rather than through JavaScript. For example <div data-open-modal="#modal"></div> might tell a library that this element is in charge of opening a modal. There is no configuration or initting other than loading the library itself.

My favorite part of this piece is where Lea confronts what might generally be seen as a simple plug-n-play JavaScript library:

Even this tiny snippet of code requires people to understand object literals, arrays, variables, strings, how to get a reference to a DOM element, events, when the DOM is ready and much more. Things that seem trivial to programmers can be an uphill battle to HTML authors with no JavaScript knowledge

By giving folks an HTML API we can avoid potential headache.

...remember that many of these people do not speak any programming language, not just JavaScript. Do not talk about models, views, controllers or other software engineering concepts in text that you expect them to read and understand. All you will achieve is confusing them and turning them away.

Lea's made a collection of libraries that have HTML APIs.

An Animated Intro to RxJS

You might have heard of RxJS, or ReactiveX, or reactive programming, or even just functional programming before. These are terms that are becoming more and more prominent when talking about the latest-and-greatest front-end technologies. And if you're anything like me, you were completely bewildered when you first tried learning about it.

(more…)

Individual CSS Transform Functions

Dan Wilson documents a classic annoyance with transforms:

button {
  transform: translateY(-150%);
}
button:hover {
  /* will (perhaps unintentionally) override the original translate */
  transform: scale(.8);
}

The native (and WET) solution is list the original transform again:

button:hover {
  transform: translateY(-150%) scale(.8);
}

Dan's trick is to use custom properties instead. Set them all on the element right up front, then re-set them the :hover state:

:root {
  --tx: 150%;
  --scale: 1;
}
button {
  transform: 
    translateY(var(--tx))
    scale(var(--scale));
}
button:hover {
  --scale: 0.8;
}

Cascading custom properties FTW.

​The Best Tech Jobs in the World

Over 6,000 companies use Hired to find their next team member and with transparency into each company, you're empowered to make the right decision about what opportunities you'd like to pursue. Say goodbye to pushy recruiters trying to sell you on roles you don't actually want. Life's too short to waste time with companies that are a bad fit, or to find out after months of interviewing that the offer is no good. Try Hired and let companies apply to you.

The best part: it's always free.

Fluid Typography

Using viewport units and calc(), we can have font-size (and other properties) adjust their size based on the size of the screen. So rather than always being the same size, or jumping from one size to the next at media queries, the size can be fluid.

(more…)

Do responsive sites have to be so tall on mobile?

Kevin Vigneault:

I don't believe that the overall page length itself is inherently problematic. I have noticed though that in many responsive designs, purposeful groupings of content are easy to spot on larger screens, but get muddled when things start to stack on mobile screens.

This is probably mostly a problem on "content" sites in which you smash things down into the ol' tube of content. I don't mind the tube, but I think Kevin is doing some smart thinking here. There are plenty of different patterns that can happen while tubizing, and it's probably not thought about enough.

This site is particularly guilty. A quick document.documentElement.offsetHeight test showed 14749px, more than double the height of an example Kevin pointed out that was a bit excessive.

GitFTP-Deploy

Let's set the scene. Say you are a web freelancer and are almost finished with a client's new website. Over the years, you have learned the hard way not to edit the files directly over FTP. It's too easy to make breaking changes with no record of what changed and who did what. Nowadays you are using Git to manage the version of the files. Let's cover that, and also the last mile: deploying only the files known to be changed to the server.

HTTP/2 – A Real-World Performance Test and Analysis

Perhaps you've heard of HTTP/2? It's not just an idea, it's a real technology and slowly but surely, hosting companies and CDN services have been releasing it to their servers. Much has been said about the benefits of using HTTP/2 instead of HTTP1.x, but the proof the the pudding is in the eating.

Today we're going to perform a few real-world tests, perform some timings and see what results we can extract out of all this.

(more…)

#153: Getting Started with CSS Grid

It feels like CSS Grid has been coming for a long time now, but it just now seems to be reaching a point where folks are talking more and more about it and that it's becoming something we should learning. I started reading a few posts and playing around with the syntax the past couple of weeks, but asked my fellow CSS-Trickster Miriam Suzanne to grok through it with me on a video hangout.

(more…)

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