Mailtrap.io – Fake SMTP testing server

var transport = nodemailer.createTransport({ host: ‘mailtrap.io’, port: 2525, auth: { user: ‘your-mailtrap-inbox-username’, pass: ‘your-mailtrap-inbox-pass’ } }); transport.sendMail({ … }); Mailtrap is a fake SMTP server for development teams to test, view and share emails sent from the development and staging environments without spamming real customers. Now this is great for testing: use mailtrap’s SMTP server …

Using science to make truly tappable user interfaces

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

Conditions for CSS Calculations

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 …

Run a Terminal task list with listr

With 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-dropzone

Simple 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 coming to Firefox

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 …