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…)

“lives in a sort of purgatory”

Brad Frost:

A front-end designer ... lives in a sort of purgatory between worlds:

  • They understand UX principles and best practices, but may not spend their time conducting research, creating flows, and planning scenarios
  • They have a keen eye for aesthetics, but may not spend their time pouring over font pairings, comparing color palettes, or creating illustrations and icons.
  • They can write JavaScript, but may not spend their time writing application-level code, wiring up middleware, or debugging.
  • They understand the importance of backend development, but may not spend their time writing backend logic, spinning up servers, load testing, etc.

A front-end developer is aware.

“Write a script”

Jeremy Keith, on teaching people JavaScript for the first time:

A lot of that boils down to this pattern:

When (some event happens), then (take this action).

We brainstormed some examples of this e.g. "When the user submits a form, then show a modal dialogue with an acknowledgment." I then encouraged them to write a script …but I don't mean a script in the JavaScript sense; I mean a script in the screenwriting or theater sense. Line by line, write out each step that you want to accomplish. Once you've done that, translate each line of your English (or Portuguese) script into JavaScript.

Pseudo code. I'm a big fan.

Writing a code flow out in plain English works great for beginners, and in my experience remains useful forever. I find myself regularly writing pseudo code in Slack and in bug/idea tickets, although I've perhaps graduated from plain English to my own weird non-language:

IF (user_is_pro? AND has_zero_posts)
  OR (signed_up_less_than_three_days_ago) {
    // ajax for stuff
    // show thing
}

Optimizing GIFs for the Web

Ire Aderinokun describes a frustrating problem that we’ve probably all noticed at one point or another:

Recently, I’ve found that some of my articles that are GIF-heavy tend to get incredibly slow. The reason for this is that each frame in a GIF is stored as a GIF image, which uses a lossless compression algorithm. This means that, during compression, no information is lost in the image at all, which of course results in a larger file size.

To solve the performance problem of GIFs on the web, there are a couple of things we can do.

Switching to the <video> element seems to have the biggest impact on file size but there are other optimization tools if you have to stick with the GIF format.

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