Deploying ES2015+ Code in Production Today

Philip Walton suggests making two copies of your production JavaScript. Easy enough to do with a Babel-based build process.

<!-- Browsers with ES module support load this file. -->
<script type="module" src="main.js"></script>

<!-- Older browsers load this file (and module-supporting -->
<!-- browsers know *not* to load this file). -->
<script nomodule src="main-legacy.js"></script>

He put together a demo project for it all and you're looking at 50% file size savings. I would think there would be other speed improvements as well, by using modern JavaScript methods directly.

The Key to Building Large JavaScript Apps: The Modlet Workflow

You're a developer working on a "large JavaScript application" and you've noticed some issues on your project. New team members struggle to find where everything is located. Debugging issues is difficult when you have to load the entire app to test one component. There aren't clean API boundaries between your components, so their implementation details bleed one into the next. Updating your dependencies seems like a scary task, so your app doesn't take advantage of the latest upgrades available to you.

One of the key realizations we made at Bitovi was that "the secret to building large apps is to never build large apps." When you break your app into smaller components, you can more easily test them and assemble them into your larger app. We follow what we call the "modlet" workflow, which promotes building each of your components as their own mini apps, with their own demos, documentation, and tests.

(more…)

Chrome to force .dev domains to HTTPS via preloaded HSTS

Mattias Geniar:

A lot of (web) developers use a local .dev TLD for their own development. ... In those cases, if you browse to http://site.dev, you'll be redirect[ed] to https://site.dev, the HTTPS variant.

That means your local development machine needs to;

  • Be able to serve HTTPs
  • Have self-signed certificates in place to handle that
  • Have that self-signed certificate added to your local trust store (you can't dismiss self-signed certificates with HSTS, they need to be 'trusted' by your computer)

This is probably generally A Good Thing™, but it is a little obnoxious to be forced into it on Chrome. They knew exactly what they were doing when they snatched up the .dev TLD. Isn't HSTS based on the entire domain though, not just the TLD?

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

A Rube Goldberg Machine

Ada Rose Edwards takes a look at some of the newer browser APIs and how they fit together:

These new APIs are powerful individually but also they complement each other beautifully, CSS custom properties being the common thread which goes through them all as it is a low level change to CSS.

The post itself is a showcase to them.

Speaking of new browser APIs, that was a whole subject on ShopTalk a few weeks back.

Basic grid layout with fallbacks using feature queries

I often see a lot of questions from folks asking about fallbacks in CSS Grid and how we can design for browsers that just don’t support these new-fangled techniques yet. But from now on I'll be sending them this post by HJ Chen. It digs into how we can use @supports and how we ought to ensure that our layouts don't break in any browser.

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

​Deliver exceptional customer experiences in your product

Pendo delivers the only complete platform for Product Teams that helps companies create great products. The Pendo Product Experience Platform enables Product Teams to understand product usage, collect user feedback, measure NPS, assist users in their apps and promote new features in product - all without requiring any engineering resources. This unique combination of capabilities is all built on a common infrastructure of product data and results in improved customer satisfaction, reduced churn, and increased revenue.

Pendo is the proven choice of innovative product leaders at Salesforce, Proofpoint, Optimizely, Citrix, BMC and many more leading companies.

Request a demo of Pendo today.

(more…)

Is there any value in people who cannot write JavaScript?

Mandy Michael:

If all you do in your job is write JS, that is fantastic and you are awesome, just like all the people that write CSS or have a focus in a particular area like accessibility, SVG, animation etc.

What I am very concerned about is that many still don’t see value in being skilled in CSS & HTML. This attitude is something I just don’t understand. All of us working together provide value in our industry.

+1 on all Mandy's points.

I suspect HTML and CSS skill will swing back higher in desirability a bit as design trends swing toward more complicated looks. More interesting layouts being one of those things. I tend to find those developers who only dabble in HTML/CSS fall over quickly when it comes to from-scratch work that involves layout. There is a lot of gray area here too. For example, I write Ruby code, but I fall over quickly when it comes to even moderately complex things.

I also suspect this conversation is rooted in the fact that HTML, CSS, and JavaScript are so intertwined, it tickles some people the wrong way to see other people stop at the first two.

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

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