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 →
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 …
react-day-pickerreact-day-picker is a flexible date picker component for React. no external dependencies select days, ranges, whatever using CSS modifiers ready for localization, even with moment.js customizable style navigable via keyboard, ARIA support As with every other well-written React component you can easily include this in your own code to – for example – create a …