hello.js

var please = require('share');
console.log('thank you');

Friday, 24 May, 2019 UTC

Implementing a Scroll Based Animation with JavaScript

Implementing a Scroll Based Animation with JavaScript

There is a kind of animations that has not stopped increasing its presence in the most modern and original websites: the animations based on the scroll event of Javascript. This trend literally exploded when the parallax effects appeared, and since then ... more


Tuesday, 21 May, 2019 UTC

Animated Page Transitions in Gatsby Websites

Animated Page Transitions in Gatsby Websites

GatsbyJS is a React-based static site generator powered by GraphQL. It makes it possible for you to code and develop your site, while Gatsby transforms it into a directory with a single HTML file with all your static assets. On it’s own Gatsby is fast ... more


Monday, 20 May, 2019 UTC

Build an Ionic 4 App with User Login and Registration

Build an Ionic 4 App with User Login and Registration

Ionic allows you to develop Progressive Web Applications (PWAs) and hybrid mobile apps. PWAs are web applications that run in a browser and allow for offline capabilities via service workers. They can be installed on desktops and mobile devices, just ... more


Wednesday, 15 May, 2019 UTC

React Starter: Using Create React App to Make React Applications

React Starter: Using Create React App to Make React Applications

Usually when you create a React application, you’ll be creating a single page app (SPA). In order to make setting up single page apps easier, a CLI tool called create-react-app was made. https://scotch.io/embed/vimeo/336412467 The CLI tool makes it quick ... more


Friday, 10 May, 2019 UTC

10 React Challenges (Beginner): Show an Alert Based on an Input

10 React Challenges (Beginner): Show an Alert Based on an Input

Events make the core of interactivity in JavaScript, from listening to form inputs, scroll events to button clicks. The knowledge of handling events in JavaScript is essential. CodePen Final : https://codesandbox.io/s/n15z4oq24l CodePen Starter : https://codesandbox.io/s/5wz2onjn4 ... more


Friday, 10 May, 2019 UTC

10 React Challenges (Beginner): Use React State to Update the DOM

10 React Challenges (Beginner): Use React State to Update the DOM

A common theme in modern front-end JavaScript libraries/frameworks is that they can help you manage the data in your applications. Once you update something, React can immediately update the UI. React uses a concept called state to keep data and update ... more


Friday, 10 May, 2019 UTC

10 React Challenges (Beginner): Loop Over and Display Data with JSX

10 React Challenges (Beginner): Loop Over and Display Data with JSX

Data comes in all shapes and sizes. In JavaScript, an array is how we hold sets of data. For the majority of our site content, we use an array of objects. Looping through and showing data from an array is an essential skill. In this React challenge, ... more


Friday, 10 May, 2019 UTC

10 React Challenges (Beginner): Display Simple Data with JSX

10 React Challenges (Beginner): Display Simple Data with JSX

One of the building blocks of React is the ability to use HTML elements when developing components. JSX allows us to write simple markup in HTML. JSX is often looked at as a difficult thing to learn in React, but it's worth looking into since JSX is ... more


Friday, 10 May, 2019 UTC

10 React Challenges (Beginner): Adding Calculator

10 React Challenges (Beginner): Adding Calculator

Storing data in a front-end application and reusing the stored data throughout the application or app component, is an essential piece of modern front-end applications. CodePen Final : https://codesandbox.io/s/64800qwkw3 CodePen Starter : https://codesandbox.io/s/q8nxoyqn49 ... more


Thursday, 9 May, 2019 UTC

New ECMAScript Modules in Node v12

New ECMAScript Modules in Node v12

If you’re familiar with popular JavaScript frontend frameworks like React, Angular, etc, then the concept of ECMAScript won’t be entirely new to you. ES Modules have the import and export syntax we see often in frontend frameworks. Node uses CommonJS ... more


Tuesday, 7 May, 2019 UTC

10 Awesome Things from MS Build Day 1

10 Awesome Things from MS Build Day 1

Microsoft Build is packed with gazillion announcements, fun activities, people and it's so much to fit into one article. I won't be doing justice to the event by trying to fit everything that happened today in one article but I am just going to try and ... more


Tuesday, 30 April, 2019 UTC

Build a Slack App in 10 Minutes with MongoDB Stitch

Build a Slack App in 10 Minutes with MongoDB Stitch

Slack is not only the fastest growing startup in history, but it's also an app by the same name and one of the most popular communication tools in use today. We use it extensively at MongoDB to foster efficient communications between teams and across ... more


Tuesday, 30 April, 2019 UTC

Quick and Simple Search Filter Using Vanilla JavaScript

Quick and Simple Search Filter Using Vanilla JavaScript

When building Single Page Applications a feature I frequently find myself adding is a simple search filter. Nothing too in depth, I'll just want a text field to be able to quickly filter over items to find specific ones. I'm going to share what I do, ... more


Monday, 29 April, 2019 UTC

create-react-app v3, What's new?

create-react-app v3, What's new?

When you're looking to setup your React developer environment, create-react-app is one of the go to ways to go about it. This package allows you to do so with minimal configuration as it creates most of the boilerplate code needed to get you up and running. ... more


Saturday, 27 April, 2019 UTC

Use Artificial Intelligence to Suggest 1-5 Star Ratings

Use Artificial Intelligence to Suggest 1-5 Star Ratings

A handful of products rely on reviews and star-ratings for product feedback. When customers are impressed or dissatisfied about our product, they come back to where it was purchased looking for a way to leave feedback. Apps and e-commerce products are ... more


Wednesday, 24 April, 2019 UTC

An Introduction To Storybook: Organize How You Build JS Components

An Introduction To Storybook: Organize How You Build JS Components

What is Storybook? Storybook is an open source tool for developing UI components in isolation and it integrates pretty well with most front end frameworks including React, Vue, and Angular and a host of other frameworks. It makes building stunning UIs ... more


Tuesday, 23 April, 2019 UTC

Add Authentication and Personalization to VuePress

Add Authentication and Personalization to VuePress

There are several advantages to using a static site generator such as VuePress. With VuePress, you can focus on writing content using markdown, and the VuePress application generates static HTML files. VuePress also turns your content into a single-page ... more


Monday, 22 April, 2019 UTC

React Starter: The Ways to Use React

React Starter: The Ways to Use React

Before we can jump into learning more about the specifics of React, it's important to talk about all the ways we can use React. This will give us a good mental overview to see how React can be added to any project. In a nutshell, it comes down to the ... more


Wednesday, 17 April, 2019 UTC

Wrap a Vanilla JavaScript Package for Use in React

Wrap a Vanilla JavaScript Package for Use in React

Complex web projects often require the use of 3rd party widgets. But what if you're using a framework while a widget is only available in pure JavaScript? To use a JavaScript widget in your project, the best approach would be to create a framework specific ... more


Tuesday, 16 April, 2019 UTC

Getting started with visual testing in 5 minutes

Getting started with visual testing in 5 minutes

There are tons of tools out there that help you make sure your app is functioning perfectly, but how do you catch bugs that are purely visual? In the example above, the button still works, and the text is actually still there, but the link somehow changed ... more


Tuesday, 16 April, 2019 UTC

Quickly Build Product Galleries for eCommerce Sites

Quickly Build Product Galleries for eCommerce Sites

When making online purchases, most shoppers make their purchasing decisions based on the use of rich-media. Being able to view the product from different angles is known to increase conversions. In fact according to Forbes, “64% of customers are more ... more


Friday, 12 April, 2019 UTC

Netlify Dev - The Power of Netlify on Your Local Computer

Netlify Dev - The Power of Netlify on Your Local Computer

Netlify is never short on new and exciting features. At JAMstack Conf in New York City, they lived up to the hype again. Netlify announced Netlify Dev, allowing you to " run [ our ] entire platform on your laptop ". Let's see it in action. ... more


Wednesday, 10 April, 2019 UTC

The Best React Extension for VS Code

The Best React Extension for VS Code

When working with React, there's lots of code that gets repeated over and over....and over and over again. Eventually, you start to think, " there's got to be a better way ". Don't worry, there is! In this article we will look at the ES7 React/Redux/GraphQL/React ... more


Saturday, 6 April, 2019 UTC

The Ultimate Guide to JavaScript Algorithms: Range Sum

The Ultimate Guide to JavaScript Algorithms: Range Sum

Sometimes, while performing mathematical calculations, there comes the need to sum up a range of numbers. Some programming languages make this easy by implementing helper functions that enable one achieve such tasks simply via a function call. Not JavaScript! ... more


Thursday, 4 April, 2019 UTC

Validating a Login Form With React

Validating a Login Form With React

For almost every form that you create, you will want some sort of validation. In React, working with and validating forms can be a bit verbose, so in this article we are going to use a package called Formik to help us out! TLDR Create a React project ... more


Wednesday, 3 April, 2019 UTC

Building a Custom Sitemap for Your Gatsby.js Site

Building a Custom Sitemap for Your Gatsby.js Site

Building static sites with React.js using Gatsby.js seem to be more and more a topic of debate when you require an easy to deploy setup, blazing fast speed and smooth developer experience. Gatsby has been consistently growing, and I am super glad to ... more


Tuesday, 2 April, 2019 UTC

The 10 Things We Built on Twitch in March

The 10 Things We Built on Twitch in March

This year feels like it's on moving too fast! March is done and it was an eventful month for us here at Scotch. We've gotten the following done: Scotch home page redesign launched Job board launched React Starter (2019 Edition) launched Twitch streams ... more


Wednesday, 27 March, 2019 UTC

JavaScript Glossary: String lastIndexOf()

JavaScript Glossary: String lastIndexOf()

Basics The lastIndexOf() method returns the last position within a String object which an element can be found. The search starts from the last position of the String object. The method will return -1 if the specified parameter cannot be found. "hello ... more


Wednesday, 27 March, 2019 UTC

JavaScript Glossary: String startsWith()

JavaScript Glossary: String startsWith()

Basics The startsWith method takes a string parameter and checks if the calling string starts with the value provided. It returns a Boolean value, true if the string starts with the provided value and false if not. It is case sensitive meaning the case ... more


Wednesday, 27 March, 2019 UTC

JavaScript Glossary: String toLowerCase()

JavaScript Glossary: String toLowerCase()

Basics The toLowerCase() String method converts a string object to lower case. The return value of the method is the value of the calling string in lower case. "yeaH Yeah YEAH yaaaaS".toLowerCase(); //"yeah yeah yeah yaaaas" https://scotch.io/embed/gist/722fee9a63a17bc590ef482763ebcaf2 ... more