gpu.js – GPU Accelerated JavaScript

Amazing:

gpu.js is a JavaScript library for GPGPU (General purpose computing on GPUs) in the browser. gpu.js will automatically compile specially written JavaScript functions into shader language and run them on the GPU using the WebGL API. In case WebGL is not available, the functions will still run in regular JavaScript.

Only a subset of legal JavaScript syntax – mainly calcuations stuff – will run on the GPU.

const gpu = new GPU();

// Create the GPU accelerated function from a kernel
// function that computes a single element in the
// 512 x 512 matrix (2D array). The kernel function
// is run in a parallel manner in the GPU resulting
// in very fast computations! (...sometimes)
const matMult = gpu.createKernel(function(a, b) {
    var sum = 0;
    for (var i = 0; i < 512; i++) {
        sum += a[this.thread.y][i] * b[i][this.thread.x];
    }
    return sum;
}).setDimensions([512, 512]);

// Perform matrix multiplication on 2 matrices of size 512 x 512
const c = matMult(a, b);

When running the benchmark, my GPU runs things about 4.5 times faster.

gpu.js – GPU Accelerated JavaScript →

Elsewhere , , , Leave a comment

What do Variable Fonts mean for Web Developers?

Variable Fonts are still in active development […] in this article I’ll focus on what they mean for web developers, and how you can try them out today ahead of time.

Next to changes to font-weight (which will allow increments of 1), you also have fine control over a variable font its variations – see image above. One can tweak ‘m via the upcoming font-variation-settings CSS Property:

p {
  font-variation-settings: 
    'cntr' 99.9998, 
    'grad' 176, 
    'opsz' 13.999, 
    'srfr' 34.998, 
    'wdth' 803.999, 
    'wght' 175.98, 
    'xhgt' 999.988;
}

As mentioned in the post, variable fonts in CSS will land in production no earlier than mid-2018. Nonetheless it’s worth following already.

What do Variable Fonts mean for Web Developers? →

Elsewhere , , Leave a comment

Behind the front-end experience of Stripe’s ”Connect”

Great writeup by Benjamin De Cock on the work he and his colleagues did to creating unique landing pages that tell a story for our major products

For this release, we designed Connect’s landing page to reflect its intricate, cutting-edge capabilities while keeping things light and simple on the surface.

In this blog post, we’ll describe how we used several next-generation web technologies to bring Connect to life, and walk through some of the finer technical details (and excitement!) on our front-end journey.

Covered technologies are CSS Grid Layout, 3D with CSS, prefers-reduced-motion, Web Animations API, and the Intersection Observer.

Stripe Engineering Blog – Connect: behind the front-end experience →

Elsewhere , , Leave a comment

Hive’s best practices for JavaScript projects

Hive, a UK based technology design studio, have shared their set of best practices for developing JavaScript-based projects.

While developing a new project is like rolling on a green field for you, maintaining it is a potential dark twisted nightmare for someone else. Here’s a list of guidelines we’ve found, written and gathered that (we think) works really well with most JavaScript projects here at hive.

Always interesting to take a peek at other companies their internals. Not only do they cover things such as code style; their list goes further: API Design and a Git usage strategy for example are also covered.

wearehive/project-guidelines

Elsewhere , , Leave a comment

D3 in Depth: Rendering Geographic Information

D3 in Depth has dedicated a chapter to rendering geographic information.

D3’s approach differs to so called raster methods such as Leaflet and Google Maps. Typically D3 requests vector geographic information in the form of GeoJSON and renders this to SVG or Canvas in the browser.

D3 in Depth: Rendering Geographic Information →

Elsewhere , , , , Leave a comment

CSS Variables and Reduced Motion

Great usage of CSS Variables CSS Custom Properties in combination with calc() by Steve Gardner to cater for users who have prefers-reduced-motion set to reduce:

By setting --duration to 0 it basically behaves like a binary condition for a CSS calculation. Simple and effective 🙂

(Personally I’d set it to either 0 or 1 – and not 0.5. That way the math is kept easy and it becomes a true binary toggle)

⁉️ Not sure what prefers-reduced-motion is? Check out CSS-Tricks’ Introduction to the Reduced Motion Media Query to get up to speed.

Elsewhere , Leave a comment

Theming with CSS Custom Properties (CSS Variables)

Stephanie Liu has replicated the native Slack theming capabilities in the browser using CSS Variables CSS Custom Properties. The essence of the demo is actually quite simple: define the variables on the :root level, and use ‘m where needed.

:root {
  --column-bg: #ae0001;
  --menu-bg-hover: #680001;
  --active-item: #D3A625;
  --active-item-text: #680001;
  --hover-item: #BE0002;
  --text-color: #FFFFFF;
  --active-presence: #00FFBA;
  --mention-badge: #DE4C0D;
}
.sidebar {
  background: var(--column-bg, #ae0001);
}

Here’s a full working demo:

See the Pen Slack Theming with CSS Custom Properties by Stephanie (@ramenhog) on CodePen.

Theming with CSS Custom Properties →
Slack Theming with CSS Custom Properties →

Elsewhere , , , Leave a comment

Uber Visualization Nights: deck.gl

During the first “Uber Visualization Night” on June 20, 2017, Nicolas Belmonte from Uber’s Data Visualization team gave a nice introduction to the aforementioned deck.gl:

Elsewhere , , , , Leave a comment

Every Solar Eclipse Happening in your Lifetime

The Washington Post has created a nice article on the upcoming solar eclipse that will cross the United States

On Aug. 21, a total solar eclipse will be visible from the contiguous United States. It’ll be the first to traverse coast to coast in nearly a century. There will be 69 total solar eclipses visible from somewhere on the planet in the next 100 years, but only a few will be visible from North America. See how many total solar eclipses are left in your lifetime

The article also contains some a very neat visualisation of all upcoming eclipses across the glove.

Here’s every total solar eclipse happening in your lifetime →

Sidenote: VOX have created a nice piece on why a total solar eclipse, like the upcoming one, is such a big deal:

Elsewhere , , , Leave a comment

Shipping ES2015/ES6 Modules to Browsers

Good workflow fleshed out by Sam Thorogood on using ES2015/ES6 modules with browsers that support, whilst also keeping older browsers (that don’t support it) happy.

The modules

Let’s take these 2 simple modules for example:

// main.js
import {x} from ./foo.js
x().then(y => log(y));
// foo.js
export async function x() {
  let y = await fetch('...');
  y = await y.json();
  return y;
}

Shipping your code to browsers that do support ES6 Modules

  1. Include your main.js script as a module
    <script type="module" src="main.js"></script>
  2. There is no step 2

Shipping your code to browsers that don’t support ES6 Modules (and thus don’t support ES6)

  1. Use tools – like Rollup – to combine all your ES6 modules into one single file
  2. Transpile the generated module from ES6 to ES5
  3. Include the transpiled script as you’d normally do, but with a nomodule attribute so that the browsers that do support ES6 modules don’t load it (*)
    <script nomodule src="compiled.js"></script>

As both methods exclude each other, use ‘m both and you’re good to go 🙂

(*) As also detailed in Jake Archibald’s great introduction to ECMAScript modules (which you should read) there’s one nasty issue though: Safari 10.1 & Mobile Safari 10.3 don’t support the nomodule attribute. Luckily there’s a workaround to fixing this.

Elsewhere , , Leave a comment