A rather geeky/technical weblog, est. 2001, by Bramus
Since the average human finger pad is 10 to 14mm — and the average fingertip is 8mm to 10mm we can pretty easily define a range for what constitutes a “truly tappable UI:” A truly tappable UI is built with elements that are at minimum around 10mm, with the optimum touch element size around 13mm. …
Continue reading “Using science to make truly tappable user interfaces”
In CSS we have feature queries (@supports) available to create if–else-like structs. What if we could extend our means of using conditions in CSS? Roman Komarov provides us with a clever technique – which involves using CSS Custom Properties, calc(), and some binary logic – to implementing this type of conditions on a per CSS …
An in-depth book on ECMAScript 6, for JavaScript programmers. Extensive book written by Axel Rauschmayer (whom you might know from 2ality.com), available for free online. It’s also possible to purchase as an ebook-version (.epub et al) of the book. Exploring ES6 – Upgrade to the next version of JavaScript →
Object.assign() to quickly set multiple inline stylesSince an HTMLElement its CSSStyleDeclaration (viz. its style property) essentially is an Object, it’s perfectly possible to pass it as the target object into Object.assign() along with a few other objects. The result is that all keys from those extra objects will be merged as CSS properties along with their values on the currently applied …
Continue reading “Using Object.assign() to quickly set multiple inline styles”
listrWith listr one can define a set of tasks to run: const execa = require("execa"); const Listr = require("listr"); const tasks = new Listr([ { title: "Git", task: () => { return new Listr([ { title: "Checking git status", task: () => execa.stdout("git', ['status', '–porcelain"]).then(result => { if (result !== "") { throw new Error("Unclean …
react-dropzoneSimple HTML5 drag-drop zone to drop files on. import React from ‘react’; import Dropzone from ‘react-dropzone’; export default class DropzoneDemo extends React.Component { onDrop(acceptedFiles, rejectedFiles) { console.log("Accepted files: ", acceptedFiles); console.log("Rejected files: ", rejectedFiles); } render() { return ( <Dropzone accept="image/*" multiple={true} onDrop={this.onDrop}> <div>This dropzone accepts only images. Try dropping some here, or click to …
Date/Time Input Types are coming to Firefox, and I must say they look quite good too (as a reference: here’s how Chrome implemented this): The implementation also looks familiar, doesn’t it? 😉 The date/timepickers are currently locked behind a flag in Nightly. Change dom.forms.datetime in about:config if you want to try them out already. Date/Time …