Monthly Archives: November 2018

Implementing Smooth Scrolling in React

By James Quick

Smooth Scrolling, dont know what it is? Well, instead of clicking on a button and being instantly taken to a different part of the (same) page, the user is navigated there via a scroll animation. It’s one of those subtle features on a site that makes an incredible difference in terms of aesthetics. I personally just implemented this on one of my personal sites because I love the look and feel it provides to the user.

That said, even though smooth scrolling might be subtle, it can be a bit tricky to implement yourself. Because of that, in this article, we are going to use the react-scroll package on NPM.

Using react-scroll

We’ll be building a simple app in this tutorial, but if you want a quick rundown of how react-scroll works:

Install react-scroll

npm i -S react-scroll

Import the react-scroll Package

import { Link, animateScroll as scroll } from "react-scroll";

Add the Link Component

The component will point to a certain area of your app.

<Link to="section1">

Let’s take a deeper dive and build a little React app with smooth scrolling.

Getting Started

For convenience, I’ve created a starter React project (using Create React App 2.0) that has a navbar at the top along with five different sections of content. The links in the navbar are just anchor tags at this point, but we will update them shortly to enable smooth scrolling. You can find the project at React With Smooth Scrolling . Notice, this link is for the “start” branch. The master includes all of the finished changes.

To clone the project, you can use the following command.

git clone https://github.com/jamesqquick/React-With-Smooth-Scrolling.git

If you look into the Src->Components directory, you’ll find a Navbar.js file that contains the navbar with nav items corresponding to 5 different sections.


Then, if you open up the App.js file in the Src directory, you’ll see where the Navbar is included along with the five actual sections.


Each section component takes in a title and subtitle. Since I’m just using dummy text in the different sections, I added that text to a DummyText.js file, imported it, and passed it into each Section component.


To run the app, you can use the following command.

npm start

This will start the app in development mode and automatically refresh the app when you save on of your files. You can view it in the browser at localhost:3000.

Installing and Configuring React-Scroll

Ok, now it’s time to install the react-scroll package and add that functionality. You can find information on the package on NPM.

To install the package, run the following command.

npm install react-scroll


Then, open the Navbar.js file back up and add an import for two named imports, “Link” and “animateScroll”. Notice that I’ve aliased “animatedScroll” to “scroll” for ease of use.

import { Link, animateScroll as scroll } from "react-scroll";

With all of our imports defined, we can now updated our nav items to use the “Link” component. This component takes several properties. You can read about all of them on the documentation page on NPM, but we will pay special attention to activeClass, to, spy, smooth, offset, and duraction.

  • activeClass – class applied when element is reached
  • to – target to scroll to
  • spy – make Link selected when scroll is at its targets position
  • smooth – animate the scrolling
  • offset – scroll additional px (like padding)
  • duration – time of the scroll animation, can be a number or a function

The “to” property is the most important part as it tells the component which element to scroll to. In this case, this will be each of our sections.

With the offset property, you can define an additional amount of scrolling to perform to get to each section.

Duration is pretty slelf-explanatory, and spy and active class we will come back to in a minute.

Here’s an example of the properties that we will use for each Link component. The only difference between them will be the “to” property as they each point to a different section.

<Link
    activeClass="active"
    to="section1"
    spy={true}
    smooth={true}
    offset={-70}
    duration= {500}
>

You’ll need to update each of the nav items accordingly. With these added, you should be able to go back to your browser (your app should have automatically restarted already) and see smooth scrolling in action!

Styling Active Links

The active class property allows us to define a class to apply to the Link component when it’s “to” element is active. A Link is considered active if it’s “to” element is in view near the top of the page. This can be triggered by clicking on the link itself or by scrolling down to the section manually. To prove this, I opened up the dev tools in Chrome and inspected the fifth link as shown below. When I clicked on that link or scrolled to the bottom of the page myself, notice that the “active” class is in fact applied.


To take advantage of this, we can create an active class and add an underline to the link. You can add this bit of css in the App.css file in the Src directory.

.nav-item > .active {
    border-bottom: 1px solid #333;
}

Now, if you go back to your browser and scroll around a bit, you should see the appropriate link is underlined.

Additional Functions

For one last bit of content, this package also provides some functions that can be called directly like “scrollToTop”, “scrollToBottom”, etc. as well as various events that you can handle. In reference these functions, typically, the application logo in a navbar will bring the user to the home page or the top of the current page. As a simple example of how to call one of these provided functions, I added a click handler to the navbar brand image to call scroll the user back to the top of the pagel like so.

scrollToTop = () => {
    scroll.scrollToTop(); 
};

Back in the browser, you should be able to scroll down on the page, click the logo in the navbar, and be taken back to the top of the page. If you’re curious, spend some time exploring the other functions and events that this package offers you!

Recap

As I said, smooth scrolling is one of those features that can add a lot aesthetic value to your application. As you can tell, with the react-scroll package, it’s pretty easy to implement, so it’s definitely worth the effort. If you have any additional questions or comments feel to comment below or find me on twitter, @JamesQQuick.

Source:: scotch.io

Get to Know Framer X: The React UI Creator

By Emmanuel Yusufu

In this post we will explore Framer X, the new shiny design tool and try to make sense of its benefits as well as its capabilities.

Prerequisites: This post assumes that you have basic knowledge of React.

What is Framer X?

Framer X is the latest and greatest version of Framer Studio, the prototyping tool.

Framer Studio when initially released, gave designers the ability to create realistic app prototype designs and animate very advanced interactions than other design apps at the time.

Framer X, the newest version of Framer introduces the in-built use of React components to allow designers get closer to high-fidelity prototyping.

Framer X also has all the features you need to draw everything from custom icons to intricate illustrations. You could fine-tune your designs with the advanced path editor, export anything from your canvas, and more.

Why use Framer X?

In most design tools, designs are mostly visual — a picture of a button, slider or toggle. The big difference Framer X makes is that designs can now be made more interactive. Interactions such as scrolling, clicking, moving and handling input are now possible, all thanks to React components.

Under the hood, Framer X is built on top of framer.js, an open source library that does the work of converting React code to interactive design components. The React components that can afford these interactions could be or could.

Framer designs can easily translate to React Components. Props and all.

Framer X is packed with advanced fearures. Lets highlight a few essential ones.

Frames

The Frame tool is used to create responsive layout in your design. Frames come with preset layouts for popular devices you can select to begin your design. Frames adapt when you resize. They can also be suprisingly used to create UI elements such as buttons and shapes if it is desired for them to be responsive to their environment.

Frames are intuitive. Any frame placed on top of another is automatically indicated as a child of the base layer to create clear hierachy. A Frame can be made by pressing F or from the plus icon on the left.

Stacks

Stacks in Framer X is an awesome layout tool that is useful for working with grids and lists. It works like an expression of Flexbox and CSS Grid technologies. It was made to automatically handle distribution and alignment in your designs. A Stack can be made by pressing S and then by making a selection on top of all the items that need to be placed within.

Components

In Framer X, Components are reusable items that you can visually compose into larger app screen interfaces. There are two types of components you should be aware of:

  1. Design components: These are static design elements you can reuse in designing a user interface.
  2. Code components: These are also design elements you can reuse in designing a UI but they are built with React and are interactive. Consider the interactive Youtube component demonstrated below.

Code components

Code components as we mentioned before are React components you build from scratch or install from the Framer X store that allow you create interactive UI design components.

There is a properties panel on Framer X for changinng the properties of selected design elements such as color, border-radius and so on. When you create an interactive design component with React code, you can specify custom controls that will appear in the properties panel when that interactive component is clicked. To create a new component, you can navigate to the Components panel and click the New Component button located at the bottom.

Select create from code then click Create and Editand you’ll be presented with a new .tsx file which is Typescript. Using Typescript with React can many benefits. More on that here.

The .tsx file will present a simple hello world component via your code editor. It is highly recommended to have VS Code and Prettier installed for Typescript auto-formatting and completion.

To open the full project folder container this file, go to file > open at the top of VS code and click the folder named container. This is the project folder for the code you will write. The component you created can ne found in a subfolder named code.

After creating a code component, its UI appears in the components panel and can be dragged to the canvas.

By default, the width and height of the component is passed to the code component through props.

import * as React from "react"; ​

  export class Example extends React.Component {
    render() {
      return (
        <div>
          {this.props.width} x {this.props.height}
        </div>
      );
    }
  }

Because the code determines the contents of code components, you cannot directly edit code component contents on the canvas. But if you require your code component to display something from another element in your canvas (such as an image), you can accomplish it in 2 ways:

  • Using props.children:

You can set up your react component to make use of react’s props.children API which when used, makes the children of the components to become settable by you.

 import * as React from "react"; ​
  interface Props {
    width: number;
    height: number;
  }

  export class Example extends React.Component<Props> {
    render() {
      return (
        <div style={{width: this.props.width, height: this.props.height}}>
          <h1>Hello</h1>
          {this.props.children}
        </div>
      );
    }
  }

Framer detects you are using the props.children property in your render method and automatically adds a connector to each instance of the component on your canvas (a purple dot on the right side, like the scroll tool). You can drag a connection from this connector to any Frame on the canvas and it will use it as its children to render.

  • importing components by their name from the canvas

You can easily import any named design component into your code and make use of them there. For instance if you have a component called Card:

import * as React from "react";
  import { Card } from "./canvas"; ​

  export class Test extends React.Component {
    render() {
      return <Card title="Koen"/>;
    }
  }

Customizing the Properties panel

As earlier mentioned, you can set what settigs show up on the properties panel of Framer X for modifying your interactive design component’s value. Remember that you cannot modify the contents of your components from FramerX but only from the code.

We can use propertyControls to allow customization of the user interface of your component, directly within our properties panel. We just need to add a static propertyControls method to your class with a descriptor.

import * as React from "react";
  import { PropertyControls, ControlType } from "framer";

  interface Props { text: string; }

  export class Example extends React.Component<props> {

    static defaultProps = { text: "Hello World!", };
    static propertyControls: PropertyControls = {
      text: { type: ControlType.String, title: "Text" },
    };

    render() {
      return <div>{this.props.text}</div>;
    }
  }

From Framer X, you can modify values such as:

  • Boolean
  • Number
  • String
  • Color
  • Image
  • File
  • Enum
  • SegmentedEnum
  • FusedNumber

I do not intend to rehash the documentation but how to go about this can be found in the documentation.

Conclusion

Framer X is a great tool to bridge the gap between designer and developer. Code components allow designers and developers to talk a common language. Instead of creating a design and then having a developer translate it to code, a lot of the core work is already done thanks to Framer X.

Give it a shot!

Source:: scotch.io

Get Started with Netlify: The Simplest Way to Deploy Your JavaScript Apps

By James Quick

If you follow articles, podcasts, etc. related to Web Development, you’ve probably at least heard of Netlify. I’ve heard about from multiple people and over and over again in my favorite podcast, Syntax (which you should definitely check out!). We’ll dive into the details in a sec, but in a nutshell:> Netlify is a hosting platform where you can “build, deploy, and manage modern web projects”

There’s lots of things that you can do with Netlify, so let’s go ahead and dive in! Key note, the Scotch Dashboard is hosted on Netlify!

Disclaimer: This is NOT a sponsored post. We at Scotch just really like Netlify.

Related Reading: Interested in deploying your first site to Netlify? Deploying Your First Gatsby Site to Netlify.

Feature Overview

Netlify’s features page does a great job at telling all of its features. The rundown is:

  • Hosting (free!)
  • Continuous Deployment from a Git Repo
  • Serverless Functions
  • Identity and Auth
  • Forms

All of these tools together along with your JavaScript single page app written in React, Vue, or Angular gives us much power in building fully featured apps.

Hosting

The easiest answer for what Netlify can do for you is host your web applications, specifically static sites. The benefit of static sites are better security, speed/performance, and scalability.

Netlify actually coined the term “JAM” Stack, which stands for JavaScript, APIs, and Markdown.

Netlify ♥️ Static Sites

Because your front-end is built independent of your back-end or any necessary APIs, there’s a strong decoupling between front-end and back-end. Additionally, because your app comprises solely of a few files, these files can easily be replicated across the world with a CDN. JAM stack is the new hotness, and Netlify is the place to be for hosting.

The free plan includes:

  • HTTPS certs
  • Custom domain name
  • Continuous deployment

Free HTTPS and Custom Domain

Most hosts out there have a free version, but Netlify’s version stands out with the HTTPS and custom domain name. With almost every other host I’ve seen, you need to get a paid plan for custom domain name support. Additionally, not only can you use a custom domain on Netlify for free, they also sell domains. This way, you can get your domain name from the same place you host your site. Not bad huh?!

In addition to the free tier, there are obviously paid ones as well with various different features enabled. Right now, I’m just using the free one with no need for a paid tier. If you’d like to compare the different tiers, you can look at their pricing page.

Continuous Deployment

Netlify is incredibly quick and easy to get started with deploying your website. In fact, the easiest way to do this is to set up continuous deployment using Github, Gitlab, or Bitbucket.

Push to GitHub. Netlify deploys. Simple and easy!

So, after making an initial connection between your site and your source code, to deploy the latest changes to your site, all you have to do is push those changes and…voila, your site is updated!

The most incredible part about this is that it legitimately took me less than 5 minutes to sign up for an account and deploy my first React application. I simply created a new website, connected it to a Github repo, waited a few seconds, and there it was! While this type of continuous deployment setup is not specific to Netlify (it’s actually fairly common), they’ve done it well and made it incredibly easy.

There are a few additional features of Continuous Deployment in Netlify.

First, deploys are atomic, meaning that the entire deploy goes successfully or not at all. Your site will never be left in an unhealthy state.

An awesome side effect of atomic deploy is that there is no downtime. Netlify will deploy your code alongside of your old code first. Then, when everything is ready, Netlify simple switches incoming traffic to your newly deployed site instead of the older version, hints the zero downtime.

Branch Deploys

Netlify will lock onto a main branch for production deploys. It can also deploy other branches and give you a URL to test those deploys.

For instance, if you had a staging branch, you could push to GitHub and Netlify would give you a place to test it!

Here’s branch deploy previews for Scotch dashboard. You can see them on the right and one failed.

Deploy Rollbacks

One more feature is the ability to rollback to a previous deploy. If you deploy new code and something goes wrong, simply choose and older deployment and redeploy that one. With Netlify, you can feel pretty safe with all of these options!

Locking Deploys

One last feature is the ability to “lock down a deploy”. This means you can stop your auto publishing (automatic deployments on code pushes) with a specific version. This ensures that subsequent checkins don’t override the version you wanted to keep. It might make sense to do this every once in a while so that you can continue to check in code but not actually deploy.

Netlify CLI

As with many other hosts, Netlify has a CLI package that can be downloaded from NPM.

After downloading this package globally, you can login to your Netlify account, view your sites, make deploys, etc. You can set up Continuous Deployment by connecting an existing repo or even make manual deploys. This is a great alternative to Continuous Deployment if that option doesn’t work for you for some reason.

For more information, check out the CLI Docs.

Serverless (Lambda) Functions

If you’re interested in a hands on tutorial for creating your first serverless function in Netlify, check out Build and Deploy Your First Serverless Function in Netlify.

When developing static sites, you don’t deal with a back-end directly. You might use a third party solution like Firebase for your backend, but in general, your front-end is very decoupled from whatever back-end services you are using. Because of this, there might be certain pieces of your back-end that you need to create yourself.

Netlify provides serverless functions (AWS Lambda Functions to be exact) to add additional back-end functionality for your application.

With Lambda Functions, you can do anything you need to… save something to a DB, validate data and post to another API, etc. A Lambda Function is more or less a Node endpoint that you can do anything you want with. The amazing thing is that with Netlify, you get 125,000 requests to your functions with the free version. I don’t know about you guys, but I won’t that for a long while 🙂

For more information, check out the Functions Docs.

Forms

With any website or app, the most common way to get information from a user is through a form. They fill out the form, and when they submit, that data goes to a backend somewhere that handles that information to add something to a DB, register a user, etc. Since, as mentioned above, your front-end is decoupled from your backend, you might not have a server to handle form submits.

Netlify provides Forms which allow you, the developer, to conveniently handle form submissions by creating a Lambda Function from above.

The only downside I can see here is that the limits on Form submissions is significantly lower than Function calls. You are only allowed 100 form submissions with the free tier of Netlify, and will automatically be updated to a paid tier if you go beyong that. To tackle this, I’ve got a form that submits directly to a Lambda Function that I created instead of using the built in Forms functionality. This way, I don’t have to worry as much about the limits.

To learn more, check out the Forms Docs.

Deploy Previews

When developing code, you might want to test it out “live” without overriding your existing website. In other words, you might want to test out that a new piece of functionality, hosted in Netlify vs. locally, works the way you expect without actually making a new deploy to your site.

Netlify gives you the ability to create Deploy Previews, which will create separate URLs from pushes to branches other than master. These previews are deployed live, but will not override your actual main site.

Deploy Previews provides an incredible way for you test yourself, or share a live URL with someone else so that they can. You can tell Netlify to do this for every branch that you create or select specific branches. A good example would be a Develop branch to test changes before merging them into master.

For more information, check out the Branches and Deploys section of the Continuous Deployment Docs.

Split Testing

The last feature I want to cover is Split Testing.

Split Testing allows you to deploy two different versions of your site so that you can track analytics on which one users enjoy more, leads to more clicks, more purchases, etc.

Netlify provides an easy way to do this. You can choose multiple different branches of your code along with a percentage. This percentage represents how often users should be directed to each version of your site. You would want to do this when trying out different versions of UI, placements of buttons and callouts, etc. While it is up to you to track the necessary analytics, Netlify gives you an easy way to split your traffic.

From the code point of you, you can dynamically retrieve which branch users are currently using as shown below. You can then use this information to track necessary analytics.

process.env.BRANCH

To learn more, check out the Split Testing Docs.

Recap

Netlify is an incredible platform, specifically for hosting static websites. With an incredible free tier, you get access to loads of functionality without having to spend a penny. If you want to see what all the hype is about, sign up for an account and check it out!

I would love to hear in the comments about the projects you guys are working on and how working with Netlify has been for you.

Feel free to comment below or reach out to me on twitter, @jamesQquick.

Source:: scotch.io

Human Redux By Henrik Joreteg

Ben Nadel reviews Human Redux by Henrik Joreteg. While the Redux-oriented content of the book was clearly explained, the real value-add for Ben was the emphasis on abstractions and simplicity; both of which helped him realize that it is was a mistake to not embrace the Angular context when considering state management in a Single Page Application (SPA)….

Source:: bennadel.com

A New Code Editor For The Web

By Tyler Warnock

It’s no secret that front-end configuration is way more complicated than it should be.

In this article, I’ll cover:

  • A new editor concept for web development
  • How it makes your workflow MUCH simpler for both content & code edits
  • How you can save a ton of time in your projects

Let’s get started ?

A new concept

In my team’s last project, we spent as much time setting up as we did coding, and that’s a shame.

So we decided to create an online code editor with a new concept:

Anything you build can be added to any website, with zero config.

You add these modular features (called “mods”) to your page by pasting 2 things into your HTML:

  1. A script tag in the head
  2. A
    element for each mod

The following page has 4 of these mods on it, and they all work automatically:

<html>
<head>
  <title>Anymod example</title>
  <!-- Script tag -->
  <script id="Anymod-script">
    (function (m,o,d,u,l,a,r,i,z,e) {
      u[m]={Project:o,rq:[],Opts:r,ready:function(j){u[m].rq.push(j)}};function j(s){return encodeURIComponent(btoa(s))};z=l.getElementById(m+'-'+a);r=u.location;
      e=[d+'/page/'+o+'/'+j(r.pathname)+'/'+j(r.host)+'?t='+Date.now(),d];e.map(function(w){i=l.createElement(a);i.defer=1;i.src=w;z.parentNode.insertBefore(i,z);});
    })('Anymod','8PP6M2','https://cdn.anymod.com/v2',window,document,'script',{});
  </script>
  <!-- /Script tag -->
</head>
<body>

  <!-- Side nav with button -->
  <div id="anymod-aklor"></div>

  <!-- Content section -->
  <div id="anymod-nbonb"></div>

  <!-- Dark contact form -->
  <div id="anymod-lmkrl"></div>

  <!-- Scroll magic panels -->
  <div id="anymod-nbrob"></div>

</body>
</html>

The easiest way to experience this is to download the above code as an HTML file and view it with your browser:
Download the HTML file

The first 2 mods are a side nav and a content section:

After that, a contact form that works automatically:

And finally, some scroll magic panels:

These are all open-source, along with hundreds more in the library.

They are meant to be fast starting points that you can add & extend however you want, then use them in any project with any tech stack.

Everything is focused on building instead of configuration.

Simpler content & code edits

Along with adding mods quickly to any page, we wanted the workflow to be great for 2 things:

  1. Developers making code edits
  2. Non-developers making content edits

The code editor has everything developers expect from a modern platform:

  • Live preview with refresh on save
  • Auto compilation for ES6, SCSS, JSX, Handlebars & more
  • React, Vue, Angular, and jQuery support
  • Built in styling for Bootstrap, Materialize, and Bulma
  • Great documentation & support

The content editor is available for editing text, images & more as a live, on-page modal with WYSIWYG editing. That means non-developers can navigate their own website and make edits themselves.

When logged into the editor and viewing your own site, a pencil appears on the right side of the screen. Clicking it allows a user to edit & publish content.

This means that you, your team, or your clients can make edits directly to the page’s content.

Again, this works on any tech stack, and anything on a page can be made editable.

Saving time on projects

The whole point of all of this is to create productive, happy developers. For us, that meant not wasting time on setup, and instead focusing on the code.

As a quick example, I’ll show how to add and customize a mod for a common use case: adding an informative section to a landing page.

Let’s say I want to communicate some product features in an interesting way. First, I’ll browse the library of mods and find one that I like:

Next, I’ll clone this from the library into my project, then customize the content & CSS with the online editor until I have what I want:

Finally, I’ll follow the instructions for copying it to my landing page:

And now it’s on my landing page and functional:

This probably saved me at least an hour of work, and maybe more. I also have a handy landing page element that I can clone and use on other projects too.

In addition to a better workflow, I’ve found that it’s much easier to build high-quality code when I focus on the code instead of on build tools.

At this point, a non-technical user could make content edits without my help, and I could even make edits to the code without re-deploying my website. There are lots of little time-saving features like this to make life easier.

Moving forward

We’re really excited that thousands of developers are already using this in their projects, and we plan to continue building and sharing open-source mods together as the community grows.

Give the new editor and workflow a try at https://anymod.com

Source:: scotch.io