Tag: Web

Everything You Need To Know About Transactional Email But Didn’t Know To AskEverything You Need To Know About Transactional Email But Didn’t Know To Ask Garrett Dimon 2018-06-27T12:30:49+02:00 2018-07-10T16:18:00+00:00 Any application with user-authentication can’t exist without email, yet, email doesn’t always get the attention it deserves. With modern email service providers, it’s easier than ever to create a first-class transactional email experience for your users, but, for most of us, the challenge lies in the fact that you don’t know what you don’t know. We’re going to dive into an end-to-end analysis of everything you need to bring your transactional ema...

Have you seen these in your console? Cannot read property ‘getHostNode’ of null ? TypeError: Cannot read property ‘_currentElement’ of null ? If you maintain a React application, you know that this class of error messages can be among the most frustrating and difficult to resolve. Typical symptoms include stack traces that thread through dark regions of the React internals, devoid of hope or references to even a single line of your own code: TypeError: Cannot read property 'getHostNode' of null ? at getHostNode(~/react/lib/ReactReconciler.js:64:0) at getHostNode(~/react/lib/ReactCompositeComponent.js:383:0) ? at getHostNode(~/react/lib/ReactReconciler.js:64:0) at getHostNode(~/react/lib/ReactChildReconciler.js:114:0)? at updateChildren(~/react/lib/ReactMultiChild.js:215:0) at _...

Downshift is a library that helps you build simple, flexible, WAI-ARIA compliant enhanced input React components. Its major use case is for building autocomplete components but it can also be used to build dropdown components. In this post, we’ll walk through some common use cases solved with Downshift. Prerequisites To follow this tutorial, you need Node and NPM installed on your machine. A basic understanding of React will help you get the most out of this tutorial. If you don’t have Node.js installed, go to the Node website and install the recommended version for your operating system. Setting up the application We’ll make use of Create React App to create a simple React app with no build configuration. If you don’t have Create React App installed, run npm i create-react-app in your ter...

Visual Studio Code has an amazing amount of functionality built in, including support for debugging applications. Although the functionality is there, it took me several tries to figure out how to get things configured to debug Node applications. It became even more tricky when using Nodemon, so I figured it was worth it to share the various configurations I've learned. This article will not dive deep into inspecting variables, call stack, etc. but will focus more on the actual configurations. If you are looking for an article more focused on applied debuggging concepts, check out Debugging JavaScript in Chrome and Visual Studio Code. Watch on YouTube TLDR - Debugging Node in Visual Studio Code Download Debugger for Chrome extension Create Debug configuration from one of the 4 below Launc...

What Newsletters Should Designers And Developers Be Subscribing To?What Newsletters Should Designers And Developers Be Subscribing To? Ricky Onsman 2018-06-25T14:00:48+02:00 2018-07-10T16:18:00+00:00 We put out the call on Twitter and Facebook: “What email newsletters are you following these days?” The task of compiling your (many, many) responses has fallen to me. I should disclose that I have a vested interest in that I currently edit a bi-weekly email newsletter for a conference organizer, UX Australia. In fact, over the years, I’ve edited dozens of email newsletters — some more successful than others. Anyway, for the purpose of this article, we need to ma...

If you’ve done any work with the JavaScript onerror event before, you’ve probably come across the following: "Script error." “Script error” is what browsers send to the onerror callback when an error originates from a JavaScript file served from a different origin (different domain, port, or protocol). It’s painful because, even though there’s an error occurring, you don’t know what the error is, nor from which code it’s originating. And that’s the whole purpose of window.onerror — getting insight into uncaught errors in your application. The cause: cross-origin scripts To better understand what’s going on, consider the following example HTML document, hypothetically served from http://example.com/test: <!doctype html> <html> <head> <title>example.com/test</tit...

Serverless architectures are becoming increasingly popular, and with good reason. In my experience, container-based orchestration frameworks have a steep learning curve and are overkill for most consumer-facing companies. With FaaS architectures, like AWS Lambda and Azure Functions, in theory the only devops you need is bundling and uploading your app. This article will walk you through setting up a Google Cloud Function in Node.js that connects to MongoDB. However, one major limitation of stateless functions is the need to establish a separate database connection every time the stateless function runs, which incurs a major performance penalty. Unfortunately, I haven't been able to figure out how to reuse a database connection in Google Cloud Functions, the trick that works for IBM Cloud,...

Tried the code challenge #11? In that, we delved into solving basic array problems using array methods such as map(), reduce(), filter() etc. You can find the awesome entries in the comment section of the post as well on Twitter using the hashtag #scotchchallenge. Also, you see some other fantastic submissions for the challenge if you check out the Scotch Slack Group as well as this Spectrum thread for the challenge. The Challenge Functional programming is a style in writing programs which utilizes functions and function evaluations to carry out computations. In this challenge, we were tasked with solving problems by manipulating given arrays in a base codepen. This challenge will be solved using native array methods to manipulate the given array. Methods are properties of a given data ty...