DEV Community: Brianna Skinner

GitHub vs GitLab

Brianna Skinner — Mon, 16 Nov 2020 19:15:42 +0000

This blog will review the similarities and differences between GitHub and GitLab.

What is Git?

Git aims to manage software development projects and files. Files are maintained using a Git repository, which is an environment where Git is initialized to track all changes made to files in your project. It will also build a history over time. You'll know if the project is initialized because there will be a .git/ in the directory. Git repositories are also a way for developers to store, share, test, and collaborate on open source web projects.

The Basics of GitLab and GitHub

GitLab

GitLab provides the and shared goals of a Git repository, but focuses on being a DevOps platform that includes CI/CD toolchain. If there is a CI/CD tool that you are already comfortable with you can use that. Additionally, they do allow third-party CI/CD.

GitHub

Similar to GitLab, GitHub is a place for hosting Git repositories. They offer public and unlimited private repositories. However, it uses 3 party software to provide access to tools like CI/CD or GitHub Actions.

Key Differences

When choosing between GitLab and Github, it is good to consider the following:

Security

In GitHub, other users have access to the source code. This is helpful for open source projects. When collaborating with a team, you can grant them read or write access. However, GitLab allows you to restrict others to just viewing any tracked issues.

CI/CID

GitLab CI and GitHub Actions are the built-in CI/CID tools in each. GitLab has automated processes that support the continuous integration of projects. When using GitHub Actions, you'll need to do just a little extra work of writing tasks that will be automated integration.

Tracking Issues

Both GitLab and GitHub provide dynamic issue trackers. You can get automatic feedback, assign team members to issues, and use third-party widgets to display issue reports.

Community

Currently, GitHub has the largest community between the two. Wikipedia is reporting,

As of January 2020, GitHub reports having over 40 million users and more than 190 million repositories (including at least 28 million public repositories), making it the largest host of source code in the world.

With such large numbers and history, you'll find that more programmers will know how to GitHub, helping to shorten your learning curve in finding code solutions.

Conclusion

In conclusion, GitHub focuses on maintaining repositories and providing a platform for developers to network. However, it may require a little more work and integration of third-party tools to get the results you're looking for. That is where GitLab has the advantage because it is built to address having a continuously integrated repository during the program life cycle phases.

I hope you enjoyed this blog.

React-Spring Into

Brianna Skinner — Mon, 09 Nov 2020 13:48:16 +0000

Intro

This blog will be an introduction to a react styling tool, react-spring. It adds pizzas through spring-physics based animations on the webpage. React-Spring is an animation library for moving interfaces. It is set apart from other tools because it both declarative and imperative. Paul Henschel in, Hooks in react-spring, a tutorial describes react-spring as render-props driven. They continue to explain that,

Render props are expressive, explicit, and usually very easy to use. But since it is internally steered imperatively, supporting hooks was just a matter of a couple of lines added to its core.

If you have ever used React Motion or Animated, some compare this as a middle ground between the two. Another feature of react-spring is that it can be integrated with other tools. Since the tool is state based, it uses hooks and can be used with state managers, such as redux. React-spring can also be integrated with react-native, react-native-web and more.

5 Basic hooks

There are currently 5 hooks in react-spring, each is listed and briefly explained below. More can be read in their documentation.

useSpring
- turns any data into animated data, with a single line
useSprings
- animates data within a list/li>
useTrail
- multiple springs with a single dataset, one spring follows or trails behind the other
useTransition
- for mount/unmount transitions (lists where items are added/removed/updated)
useChain
- to queue or chain multiple animations together

Prerequisites

Before we go any further, this article assumes the following:

Node.js ≥v6 is installed on your machine
npm is installed on your machine
You have a basic understanding of React.js
You have a basic understanding of React hooks

Installation

To begin, first you’ll need to set up your react application. I will be using create react app.

npx create-react-app my-react-spring

Next cd into the directory and install react-spring.

npm install react-spring

Set up

First you’ll import animated and the hook you'll want to use. For this tutorial, we'll use useSpring.

import {useSpring, animated} from 'react-spring'

There are two ways you can use react-spring hooks, overwriting or updating existing prop.

Overwriting Props

const props = useSpring({
    opacity: toggle ? true : false,
    marginTop: toggle ? 0 : -500
})

Updating Props

const [props, set, stop] = useSpring(() => ({opacity: 1}))
    // Update spring with new props
    set({opacity: toggle ? true : false})
    // Stop animation
    stop()

Using the overwriting props method, now it is time to make your animation.

import React, { useState } from 'react';
import { useSpring, animated } from 'react-spring';

const App = () => {
  const animation = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 }
  });

  const colorAnimation = useSpring({
    from: { color: 'blue' },
    to: { color: `rgb(255,0,0)` }
  });

  const multiAnimation = useSpring({
    from: { opacity: 0, color: 'red' },
    to: [
        { opacity: 1, color: '#ffaaee' },
        { opacity: 1, color: 'red' },
        { opacity: .5, color: '#008000' },
        { opacity: .8, color: 'black' }
    ]
  });
  return (
    <div>
      <animated.h1 style={animation}>Hello World</animated.h1>
      <animated.h1 style={colorAnimation}>Hello World</animated.h1>
      <animated.h1 style={multiAnimation}>Hello World</animated.h1>
    </div>
  )
};

export default App;

Conclusion

This example may not be the most glamours, but I hope it helps the concept. Here links to more tutorials on Digital Ocean, Medium, and LogRocket.

Intro Guide to GraphQL

Brianna Skinner — Wed, 04 Nov 2020 12:44:30 +0000

This blog will provide a brief explanation of GraphQL.

What is GraphQL?

GraphQL is a query language designed for APIs. When a query is sent to a API, you'll be able to grab exactly what you are looking for. This reduces the need for multiple endpoints in API routes, over and under fetching data. Another plus is that the returns are highly customizable. This is referred to as declarative data fetching.

Example of REST API vs GraphQL

REST API

REST_API_URL/customers/13

GraphQL

Breaking Down GraphQL

GraphQL is made up of Schema, Queries and Mutations, and Resolvers. This will define how you want to create, store, and retrieve data.

Schema

The Schema sets up the layout of how the data will be stored and resolved when it is being fetched through queries, or changed with mutations. Below is an example from the GraphQl documentation. The provided link also shows more types of schemas you can design to best fit your needs.

var MyAppSchema = new GraphQLSchema({
  query: MyAppQueryRootType
  mutation: MyAppMutationRootType
});

Queries and Mutations

Queries are used to fetch the data and mutations will be to modify data. When fetching or manipulating data, you can even get specifics by passing in arguments to the query string. Shown in the example below.

query{
   customers(id: "13") {
      name
      email
      number
   }
}
mutation {
  createCustomer(input: {
    name: "Jane Doe",
  }) {
    id
  }
}

Resolvers

Resolvers are functions that describe how queries should be handled and responded to. Below is a hard coded example of a resolver, but it can also be an api request for data.

const RootQuery = new GraphQLObjectType({
  name: 'RootQueryType',
  fields: {
    launches: {
      type: new GraphQLList(LaunchType),
      resolve(parent, args) {
        // can be an api request for data
        return [{
            flight_number: 1,
            flight_name: 'Mocha',
            flight_boolean: false,
            rocket: {
              id: 1,
              name: 'BRIBRI',
              boolean: true,
            },
          }]
      }
    }

Conclusion

The flexibility of GraphQL one of the reasons it can be integrated with other tools such as Mongo and Postgres to handle queries server side. GraphQL can even be used on client side data collection using tools such as Apollo.

I hope you enjoyed this brief example of using GraphQL.

Overview of Web Accessibility

Brianna Skinner — Mon, 26 Oct 2020 14:42:55 +0000

What is Web Accessibility?

Web accessibility is designing tools, web sites and applications used through the world wide web to be accessible by anyone regardless of their abilities and/or disabilities. Making web content with high accessibility is not only inclusive, but profitable to businesses because it expands the range and audience reached. There are many guidelines out there that provide recommendations for accessibility, but the legally binding guide is the Web Content Accessibility Guidelines (WCAG).

Web Content Accessibility Guidelines (WCAG)

Wikipedia explains that,

"The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet."

WCAG mainly focuses on people with disabilities, but their recommendations create an overall better user experience for all users. The WAI has published multiple guides since 1999 when their first version, 1.0, was released. The most recent version is 2018's 2.1. When choosing a version, going with the most recent increases inclusivity. However, legally, the United States doesn't have a formal law mandating website accessibility. Nonetheless, version 2.0 was adopted into the United States Section 508 of the Rehabilitation Act of 1973 for Federal agencies. The US General Services Administration's Section 508 website summarizes it as

"Under Section 508, agencies must give disabled employees and members of the public access to information comparable to the access available to others. The rule updated and reorganized the Section 508 Standards and Section 255 Guidelines in response to market trends and innovations in technology. The refresh also harmonized these requirements with other guidelines and standards both in the U.S. and abroad, including standards issued by the European Commission, and with the World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG 2.0), a globally recognized voluntary consensus standard for web content and ICT."

Whichever newest version chosen for WGAC compliance, both 2.0 and 2.1 have four principals.

Four Principles of Accessibility

Web content must be perceivable, operable, understandable, and robust. Each principal has a set of testable guidelines provided by WCAG which can be found here.

Perceivable

Web cannot cannot be invisible to all user senses

Operable

Users must be able to navigate and operate components

Understandable
- All users should be able to understand the content
Robust

Web content should be available to all user's technologies

Conclusion

I hope you enjoyed this overview of web accessibility. If you'd like to know more about being in compliance, check out WCAG's Techniques and Failures for Web Content Accessibility Guidelines 2.0

Introduction to React Hooks

Brianna Skinner — Tue, 20 Oct 2020 13:55:00 +0000

This blog will be a brief introduction to React Hooks. Examples will include useState and useEffect Hooks. More hooks can be found with React's Hooks API Reference here.

Functional vs Class Components

Typically when using state in Reactjs, you’ll need to create a class component and store the code in a state object. Using Hooks, you are able to create state in a regular Javascript functional component. Another benefit is that functions initialized in the hook will retain their scope without binding it inside of the class constructor. These features are beneficial because it allows for cleaner and less chucky code.

Below is a comparison between a React feature created with a functional component and a class component.

Functional Component with Hooks

import React, { useState } from 'react';

export default function Example() {
  //declare a state
  const [action, setAction] = useState(['blog']);

  const handleClick = () => {
    if(action === 'blog'){
      setAction('run');
    } else if (action === 'run'){
      setAction('blog');
    }
  }
  return (
    <div>
      <p>Todo: {action}</p>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}

Class Component

import React, { Component } from 'react';

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      action: 'blog',
    }
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    if(action === 'blog'){
      this.setState({action: 'run'});
    } else if (action === 'run'){
      this.setState({ action: 'blog' });
    }
  }
  render() {
    const action = this.state.action;
    return (
      <div>
        <p>Todo: {action}</p>
        <button onClick={this.handleClick}>
          Click me
        </button>
      </div>
    );
  }
}

LifeCycle

To run code during major React lifecycle events, such as ComponentDidMount, you can call the Hook useEffect. React explains, "Unlike componentDidMount and componentDidUpdate, the function passed to useEffect fires after layout and paint, during a deferred event." If necessary, adding the array literal as a argument in useEffect specifies that useEffect should only be called when he Example Component loads. This can prevent as side effect where useEffect is infinitely being called.

import React, { useState, useEffect } from 'react';

export default function Example() {
  //declare a state
  const [action, setAction] = useState([]);

  //API Request
  const someAsyncFunction = async () => {
    try {
      const result = await someApiResult();
      setAction(result);
    } catch (error) {
      //do somethings with the error
    }
  }

  useEffect(()=>{
    someAsyncFunction();
  }, []); // can be called with or without the array literal

  return (
    <div>
      <ul>
        ToDo:
        <li>{action}</li>
      </ul>
    </div>
  );
}

Rules of React Hooks

The React documentation outlines a few rules to ensure best practice for your application.

Use functional components
It is okay to use multiple State and Effect Hooks in a single component, just outline your Hooks in the order in which they should be called.
This is why Hooks must be called on the top level of our components.
Hooks should not be used inside of loops, conditions, or nested functions

Conclusion

I hope you enjoyed this brief introduction. You could always read more on React Hooks documentation.