Author Archives: Bramus!

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 …

Continue reading “Mailtrap.io – Fake SMTP testing server”

Read Post →

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

Continue reading “Using science to make truly tappable user interfaces”

Read Post →

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 …

Continue reading “Conditions for CSS Calculations”

Read Post →

Using Object.assign() to quickly set multiple inline styles

Since 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”

Read Post →

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 …

Continue reading “Run a Terminal task list with listr“

Read Post →

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 …

Continue reading “react-dropzone“

Read Post →