Tag: Web

Preparing Your App For iOS 12 NotificationsPreparing Your App For iOS 12 Notifications Kaya Thomas 2018-09-05T13:30:35+02:00 2018-09-06T11:42:22+00:00 In 2016, Apple announced a new extension that will allow developers to better customize their push and local notifications called the UNNotificationContentExtension. The extension gets triggered when a user long presses or 3D touches on a notification whenever it is delivered to the phone or from the lock/home screen. In the content extension, developers can use a view controller to structure the UI of their notification, but there was no user interaction enabled within the view controller — until now. With the r...

You can build your online, operational workloads atop MongoDB and still respond to events in real time by kicking off Amazon Kinesis stream processing actions, using MongoDB Stitch Triggers. Let’s look at an example scenario in which a stream of data is being generated as a result of actions users take on a website. We’ll durably store the data and simultaneously feed a Kinesis process to do streaming analytics on something like cart abandonment, product recommendations, or even credit card fraud detection. We’ll do this by setting up a Stitch Trigger. When relevant data updates are made in MongoDB, the trigger will use a Stitch Function to call out to AWS Kinesis, as you can see in this architecture diagram: What you’ll need to follow along: An Atlas instance If you don’t already have a...

Previously on the Scotch Code Challenge, we have solved challenges involving String, Object and Array Manipulation with functional programming patterns. How about we touch up the script in ES6! This week on the Code Challenge we will convert ES5 code to even better and shorter code using ES6 Syntax. ES6 is an update of JavaScrpt which shipped with tons of amazing features to make write JavaScript painless and bug-free! Previously we all used ES5, pretty decent but more prone to leaks and more arduous to write. The Challenge In this challenge, we are required to re-write simple ES5 code to ES6. This challenge focuses on the most common ES6 features utilized. Including: Arrow Functions Enhanced Object Literals Template Literals Destructuring Spread Operation. Five challenges are listed in th...

In this post, we are going to create an Create React App application, then add configuration to debug it in Visual Studio Code. Watch on YouTube TLDR - For an Create React App application, install the Debugger for Chrome extension, create a debug configuration in VS Code, and then run in debug mode. Learn VS Code If you're interested in learning more about VS Code, you definitely want to check out the upcoming Learn VS Code course. Creating a Starter Project To be able to test an Create React App application, you need an Create React App application :) I'll provide the basic steps, but for more reference on how to get started look at the Create React App page. First, you'll need to install the Create React App. npm install -g create-react-app After that finishes, you'll need to actu...

Take A New Look At CSS ShapesTake A New Look At CSS Shapes Rachel Andrew 2018-09-04T13:30:57+02:00 2018-09-04T11:38:45+00:00 CSS Shapes Level 1 has been available in Chrome and Safari for a number of years, however, this week it ships in a production version of Firefox with the release of Firefox 62 — along with a very nice addition to the Firefox DevTools to help us work with Shapes. In this article, I’ll take a look at some of the things you can do with CSS Shapes. Perhaps it’s time to consider adding some curves to your designs? What Are CSS Shapes? The CSS Shapes specification Level 1 defines three new properties: shape-outside shape-image-threshold shap...

One of React's latest features is the Context API. Up until now, Context within React has been somewhat experimental, but still used in quite a few popular libraries, like Redux and React Router. There are plenty of ways to avoid using Context, but sometimes it can be really useful. One really good use case for Context is keeping track of authentication. In fact, React's official documentation for the Context API mentions it can be used for authentication. Context is designed to share data that can be considered "global" for a tree of React components, such as the current authenticated user, theme, or preferred language. The examples in their documentation are helpful, but they don't actually include an example of sharing the authenticated user. I'll show you here how one way to use the ...

I've been waiting to write this post for a very very very long time. Work on this v8 site started in February of this year. This is version 8 in the 4.5 years we've been in existence. Rebuilding Scotch has always been a fun project for me. Getting to try all the latest and greatest toys in a site. Aside from trying new toys though, here's the main reasons I decided to start another new site: Site speed was slow for international users Since our servers live in New York, we saw site loading speeds of 5-10 seconds. For international users however, they were seeing a 20+ second load time. Unacceptable! Finding content was difficult We now have over 400+ guest authors. We were often publishing these amazing articles and then seeing them get buried down the feed. On top of that, our site searc...