DEV Community: Maxine

Stop Struggling with Merging Branches and Use these Git Commands instead

Maxine — Mon, 07 Mar 2022 20:21:20 +0000

Stop Conflicting Merge Requests and Use These Commands instead ⤵️

-Xtheirs

Using the -Xtheirs flag when running git rebase or git pull, will favor the incoming changes from the branch you are rebasing/pulling from. Doing this means you accept any incoming changes from the branch you are rebasing/pulling off of. Say goodbye to going through to accept them all manually. Here is an example of how the command can be used:

git rebase -Xtheirs <branch you are rebasing/accepting changes>

git pull origin <branch you are rebasing/accepting changes> -Xtheirs

-Xours

Similarly using the -Xours flag when running git rebase or git pull, will favor the YOUR changes when rebasing with another branch. Doing this means you are accepting and keeping YOUR changes while pulling or rebasing from another branch. Here is an example of how the command can be used:

git rebase -Xours <branch you are rebasing/accepting changes>

git pull origin <branch you are rebasing/accepting changes> -Xours

Conclusion

I hope this tiny tutorial helps make the tedious process of merging branches can be a tad bit easier. Let me know what you think of these commands!🌟

Like my tutorials? Here’s some more!⤵️

Maxine — Sat, 26 Feb 2022 00:25:39 +0000

Here’s a list of articles I’ve written for various companies, Enjoy! 🌟

How to Update a DynamoDB Item using NodeJS with AWS Lambda and Amplify CLI

Maxine — Fri, 14 Jan 2022 20:32:16 +0000

Introduction
What is AWS Amplify?
Prerequisites & Installation
How to Write a NodeJS Function to Update a DynamoDB Item using AWS Lambda and Amplify CLI
Conclusion

Introduction 🎁

✨ Recently I've had the wonderful opportunity of working with AWS Amplify on a NextJS codebase. So, I thought I'd write an article about it. ✨

Amazon Web Services (AWS) provides viable cloud computing platforms and APIs, its popularity is high. The demand for AWS developers is increasing by the day, and just that may be the very reason you're here. For most first-time AWS developers understanding the AWS documentation can be a daunting task that takes patience and practice. Not to say it's not possible, especially with the help of our good friend Nader Dabit. Today we're going to hopefully speed up your production and discuss exactly how to create an update Lambda function using AWS Amplify in NodeJS.

What is AWS Amplify? ☁️

Amazon Web Services (AWS), is an offshoot of Amazon providing on-demand cloud computing platforms and APIs to pretty much anyone that can pay since you're charged on a metered pay-as-you-go basis. These cloud computing services bestow a variety of basic abstract technical infrastructure, distributed computing building blocks, and tools. One of these tools services is AWS Amplify. With Amplify, you can configure a web/mobile app backend and watch with continuous deployments through the CI/CD. Amplify has a subset of tools including Amplify Studio, Amplify Libraries, Amplify Hosting and more.

You may have chosen Amplify to configure an app backend with a guided CLI workflow. The Amplify Command Line Interface (CLI) is a toolchain used to configure/maintain an app backend from your local desktop. You can even configure cloud functionality using the CLI's interactive workflow and intuitive use cases such as auth, storage, API. AWS Amplify gives you the ability to test features locally and deploy multiple environments. All configured resources are available to customers as infrastructure-as-code templates permitting easy meshing with Amplify's CI/CD workflow.

With most applications, you'll eventually need to update some data. Today you're going to see exactly how you can update information in a DynamoDB table by creating a NodeJS lambda function with the AWS Amplify CLI.

Prerequisites & Installation 🚧

NodeJS installed on your local machine 💻
Some knowledge of NodeJS ✅
Have an AWS account 🔒
Some knowledge of AWS 🧠

How to Write a NodeJS Function to Update a DynamoDB Item using AWS Lambda and Amplify CLI 🛠️

This example will be assuming you're working with an established AWS Amplify NextJS project with your environment already configured.

1.To begin creating your update function, navigate to your amplify directory in your current project. This directory should have been created with you initiating your amplify project.

If you haven't yet done so, check out the npm packages AWS Amplify Package, aws-amplify/ui-react, and aws-sdk.

Once you've navigated to the amplify directory within your terminal, you can run the amplify command:

amplify add function

You should receive back a message asking:

? Select which capability you want to add: 
❯ Lambda function (serverless function) 
  Lambda layer (shared code & resource used across functions)

While you may want to use Lambda layers in the future, currently you are going to select the Lambda function (serverless function) option.

2.Next you will be taken through several questions that will ultimately write and configure the base of the function for you.

Enter the desire function name:

? Provide an AWS Lambda function name: <Function Name>

Chose NodeJS, since this is an article for NodeJS and such:

? Choose the runtime that you want to use: (Use arrow keys)
  .NET Core 3.1 
  Go 
  Java 
❯ NodeJS 
  Python

Next select Hello World:

Choose the function template that you want to use: (Use arrow keys)
  CRUD function for DynamoDB (Integration with API Gateway) 
❯ Hello World 
  Lambda trigger 
  Serverless ExpressJS function (Integration with API Gateway)

You should be presented with the option to configure advanced settings, and the answer to this is YES! So type "y":

Available advanced settings:
- Resource access permissions
- Scheduled recurring invocation
- Lambda layers configuration
- Environment variables configuration
- Secret values configuration

? Do you want to configure advanced settings? y

While the actual configured advanced settings are ultimately up to you as the developer, for this example, you'll only be configuring environment variables, so select "No" (n), until you arrive at the configure environment variables option and select "Yes" (y):

? Do you want to configure advanced settings? Yes
? Do you want to access other resources in this project from your Lambda function? No
? Do you want to invoke this function on a recurring schedule? No
? Do you want to enable Lambda layers for this function? No
? Do you want to configure environment variables for this function? Yes

When you select "Yes", you will be asked to name, and set the env variable. If you are updating a dynamoDB table, you would use the dynamoDB table name for the variable value:

? Enter the environment variable name: <YOUR_ENV_NAME>
? Enter the environment variable value: <your_env_var>

Once you've finished adding in the value, you'll be prompted to either add, update, or quit the environment variables selection. Feel free to select I'm done unless you have any more variables (tables) that are necessary:

? Select what you want to do with environment variables: (Use arrow keys)
  Add new environment variable 
  Update existing environment variables 
  Remove existing environment variables 
❯ I'm done

You should be prompted with one more question asking if you would like to add secret values, but for this example, you won't be needing that. Feel free to select "Yes" to edit the local function now, or head over to amplify/backend/function/ directory to see your newly made function.

3.Once you've navigated to your Amplify generated function’s folder in the function directory, you should see a src folder, with an index.js file inside, go ahead and open it up, you should see something similar to this:

/* Amplify Params - DO NOT EDIT
    ENV
    REGION
    YOUR_ENV_VARIABLE
Amplify Params - DO NOT EDIT */

exports.handler = async (event) => {
    // TODO implement
    const response = {
        statusCode: 200,
    //  Uncomment below to enable CORS requests
    //  headers: {
    //      "Access-Control-Allow-Origin": "*",
    //      "Access-Control-Allow-Headers": "*"
    //  }, 
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

🚩 Don't forget to add in permissions to preform dynamoDB actions, such as updating, in the custom-policies.json file.

First let's establish a connection to the DynamoDB, in the first few lines under the generated comment from Amplify Params, add in:

const AWS = require("aws-sdk");
const ddb = new AWS.DynamoDB.DocumentClient({ region: "your region" });

The first line is importing the npm package mentioned at the beginning of this article. The second line works with DynamoDB items by abstracting away DynamoDB Types and converting responses to native Javascript.

4.Now let's write that update function! Amplify provided you with some nice boilerplate, but you can trash it, for now, instead, you're going to write something similar to this:


const itemId = event.pathParameters.proxy; // This is assuming you're extracting the itemId you would like to update from a proxy under the resource. 
    console.log("event: ", event); // It's always a good idea to log the event so you can see what data you're working with and what is being passed through
    const body = JSON.parse(event.body); // Ideally you will be passing though the item data you would like to update through the event body.
    let response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Headers": "*",
            "Access-Control-Allow-Methods": "*",
            "Content-Type": "*/*",
            "Accept": "*/*",
        },
    }; // You may receive some CORS issues when initially testing your function, this is because before the request you specify fires, it is going to pass through the "OPTIONS" request, where you will need to pass through the headers above. You may even see this in your Cloud Watch logs.
    if (event.requestContext.httpMethod === "OPTIONS") {
        return response;
    } // Handle the "OPTIONS" method
    const whatYouWantToUpdate = body.whatYouWantToUpdate;
    let updateItemResponse = await updateItem(
        itemId,
        whatYouWantToUpdate
    );
    response.body = JSON.stringify(updateItemResponse);
    return response;
};
// Now lets actually make a call to the table and update the item!
function updateItem(itemId, newWhatYouWantToUpdate) {
    const params = {
        TableName: process.env.YOUR_ENV_VARIABLE_TABLE
,
// this is your DynamoDB Table 
        Key: {
            itemId: itemId,
//find the itemId in the table that you pull from the event 
        },
        UpdateExpression: "set whatYouWantToUpdate = :whatYouWantToUpdate",
        // This expression is what updates the item attribute 
ExpressionAttributeValues: {
            ":whatYouWantToUpdate": newWhatYouWantToUpdate,
//create an Expression Attribute Value to pass in the expression above
        },
        ReturnValues: "UPDATED_NEW",
// Return the newly updated values 
    };
    return ddb.update(params).promise();
// pass in the params above and fire the actual dynamoDB update method
}

If you read the comments, you should see an explanation for what each bit of code means, but in case you didn't here's what we're doing:

Get the Item Id
Create an initial response
Handle the "OPTIONS" httpMethod request
Extract the new value you'd like to update from the event body, and pass it in as an argument to the dynamoDB update function
Create your DynamoDB update function
Run the function and return your response

And, there you have it. Your update function is complete.🎉

5.It's always a good idea to run the amplify status command before pushing or publishing any of your new amplify code/functions, using the amplify commands amplify push or amplify publish. This allows you to check which functions were updated, as well as the api for that amplify project.

If you feel comfortable with the code, feel free to amplify push it up.

If you head over to Lambda within the AWS console, you should be able to see and test out your newly created function! 🎉

If you are interested in connecting the lambda function to your API, you can do so with the amplify update api command, and add in a new resource. Thus, ultimately allowing you to select your newly made function to execute on the path you create. Your function can be further inspected within the AWS console through API Gateway under your API.

Conclusion 📍

Congrats, you have officially created a NodeJS Update Lambda Function using the AWS Amplify CLI. This was something I struggled with when onboarding and understanding what is AWS Amplify, how does it work, and how to incorporate Lambda. Basically, me just being a noob. But, in hopes of helping someone else, I wrote this article. 😊

If this helped you in any way feel free to give me a 👍. Also if there is anything that can be improved upon to make this article more clear/correct, by all means, comment below! Thanks for reading! 💖

Feel Free to Check out these Extra Resources

How to Intergrate Chakra UI in Next.js 🧑‍🎨

Maxine — Sun, 12 Dec 2021 16:18:43 +0000

I would like to preface this article, by saying that I wrote this content for Creative Guru Designs. Creative Guru Designs has many great NextJs blogs/examples, along with many other frontend/SaaS resources!

Creating a user-interphase is never a simple task, but Chakra UI is a great UI library to get your Next.js application up and running fast, all while maintaining aesthetics. In this guide, you'll learn how to set up a simple Next.js app with Chakra UI.

Presequisites

✅ Standard knowledge of NextJS setup and usage
✅ Some experience with UI/UX Design

Create a NextJs Project

You can create a blank Next.js project by running:

npx create-next-app my-project
# or
yarn create next-app my-project

Create a NextJs Project Using Typescript

Alternatively, Next.js provides an integrated TypeScript, similar to an IDE. You can create a TypeScript project with create-next-app using the --ts, --typescript flag as shown below:

npx create-next-app@latest --ts
# or
yarn create next-app --typescript

🚨Please note that when adding Chakra UI to a TypeScript project, a minimum TypeScript version of 4.1.0 is required.

Once you've successfully created you're Typescript project, cd into the project directory and get started by creating an empty tsconfig.json file in the root folder:

touch tsconfig.json

Next.js will automatically configure this file with default values. It is also supported to provide your own tsconfig.json with custom compiler options. To provide a relative path to a tsconfig.json file, set a typescript.tsconfigPath prop inside your next.config.js file.

After creating your tsconfig.json file, run next, normally npm run dev/yarn dev and Next.js will direct you through the installation of the required packages to finish the application setup:

npm run dev

# You'll see instructions like these:
#
# Please install TypeScript, @types/react, and @types/node by running:
#
#         yarn add --dev typescript @types/react @types/node
#
# ...

Once all installations are successful and complete, you're ready to start converting files from .js to .tsx and coding in TypeScript!.

🚨A file named next-env.d.ts will be created in the root of your project. This file ensures Next.js types are picked up by the TypeScript compiler. You cannot remove it or edit it as it can change at any time.

Learn more about using Typescript with Node.js in their Docs.

Adding Chakra UI to your Next.js Application

To get started using Chakra UI, install the core Chakra UI package by running:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
# or
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

After installation, you'll need to add Chakra providers.

Adding in Chakra Providers

Chakra uses the ChakraProvider component, which then wraps your website with a context containing properties such as the Chakra theme, color mode functionality, CSS reset, global styles, and more.

In components/_app.js:

import { ChakraProvider, Heading } from "@chakra-ui/react"
import * as React from "react";
import { render } from "react-dom";
import "./styles.css";

function App() {
  return <Heading>Welcome to using Chakra + Next.Js</Heading>;
}

const rootElement = document.getElementById("root");
render(
  <ChakraProvider>
    <App />
  </ChakraProvider>,
  rootElement
);

If you are using Typescript, use the ChakraProvider component in components/_app.tsx like so:

import { ChakraProvider, Heading } from "@chakra-ui/react";
import * as React from "react";
import { render } from "react-dom";
import "./styles.css";

function App() {
  return <Heading>Welcome to Chakra + TypeScript</Heading>;
}

const rootElement = document.getElementById("root");
render(
  <ChakraProvider>
    <App />
  </ChakraProvider>,
  rootElement
);

If everything was imported successfully, once the component rerenders you should be greeted with your newly written heading.

Now that you're getting the hang of it, let's create a simple hero component! First create a Hero.js or Hero.tsx file. And inside try out the following example code:

import {
  Container,
  Stack,
  Flex,
  Box,
  Heading,
  Text,
  Image,
  Icon,
  useColorModeValue,
  UnorderedList,
  ListItem
} from "@chakra-ui/react";

export const Blob = (props) => {
  return (
    <Icon
      width={"100%"}
      viewBox="0 0 578 440"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M239.184 439.443c-55.13-5.419-110.241-21.365-151.074-58.767C42.307 338.722-7.478 282.729.938 221.217c8.433-61.644 78.896-91.048 126.871-130.712 34.337-28.388 70.198-51.348 112.004-66.78C282.34 8.024 325.382-3.369 370.518.904c54.019 5.115 112.774 10.886 150.881 49.482 39.916 40.427 49.421 100.753 53.385 157.402 4.13 59.015 11.255 128.44-30.444 170.44-41.383 41.683-111.6 19.106-169.213 30.663-46.68 9.364-88.56 35.21-135.943 30.551z"
        fill="currentColor"
      />
    </Icon>
  );
};

export default function Hero() {
  return (
    <Container maxW={"7xl"}>
      <Stack
        align={"center"}
        spacing={{ base: 8, md: 10 }}
        py={{ base: 20, md: 28 }}
        direction={{ base: "column", md: "row" }}
      >
        <Stack flex={1} spacing={{ base: 5, md: 10 }}>
          <Heading
            lineHeight={1.1}
            fontWeight={600}
            fontSize={{ base: "3xl", sm: "4xl", lg: "6xl" }}
          >
            <Text
              as={"span"}
              position={"relative"}
              _after={{
                content: "''",
                width: "full",
                height: "30%",
                position: "absolute",
                bottom: 1,
                left: 0,
                bg: "blue.400",
                zIndex: -1
              }}
            >
              Example Application
            </Text>
            <br />
            <Text as={"span"} color={"blue.400"}>
              Next.js + Chakra UI
            </Text>
          </Heading>
          <Flex justifyContent="center" textAlign="left">
            <UnorderedList>
              <ListItem>Uses Next.js/Typescript on Front-end.</ListItem>
              <ListItem>Uses ChakraUI for UI.</ListItem>
            </UnorderedList>
          </Flex>
        </Stack>
        <Flex
          flex={1}
          justify={"center"}
          align={"center"}
          position={"relative"}
          w={"full"}
        >
          <Blob
            w={"150%"}
            h={"150%"}
            position={"absolute"}
            top={"-20%"}
            left={0}
            zIndex={-1}
            color={useColorModeValue("blue.50", "blue.400")}
          />
          <Box
            position={"relative"}
            height={"300px"}
            rounded={"2xl"}
            boxShadow={"2xl"}
            width={"full"}
            overflow={"hidden"}
          >
            <Image
              alt={"Hero Image"}
              fit={"cover"}
              align={"center"}
              w={"100%"}
              h={"100%"}
              src={
                "https://media.istockphoto.com/photos/ink-blue-color-paint-pouring-in-water-isolated-on-white-background-picture-id902957562?k=20&m=902957562&s=612x612&w=0&h=y_Nu9PuNq9vhnQLBgjQ9jhuSW7y9vj62WP33D8d_Z9A="
              }
            />
          </Box>
        </Flex>
      </Stack>
    </Container>
  );
}

Once you've created your hero component, import it into your components/_app.js or components/_app.tsx file like so:

import { ChakraProvider, Heading } from "@chakra-ui/react";
import * as React from "react";
import { render } from "react-dom";
import "./styles.css";
import Hero from "./hero.tsx";

function App() {
  return (
    <div>
      <Hero />
    </div>
  );
}

const rootElement = document.getElementById("root");
render(
  <ChakraProvider>
    <App />
  </ChakraProvider>,
  rootElement
);

Once your application re-renders, your landing page should resemble the following:

Congratulations! You can now create awesome user interphases in half the time, all thanks to Chakra UI. 🎉

How to Seed Data Fast with the Faker Gem ⚡️🏃🏻💨

Maxine — Fri, 10 Sep 2021 18:38:59 +0000

Introduction
What is Faker?
Installation & Usage
Conclusion

Introduction

Chances are you're here because you saw the word combination Seed Data Fast, and I don't blame you! Creating a database is enough work itself, so coming up with custom seed data can become an unnecessary and time-consuming task. But all thanks to the Ruby Faker gem, seeding data can be done in a quick, easy, and fun way!

What is Faker?

Faker is a Ruby gem written by Jason Kohles. Like many of us, Jason got sick of spending time writing out seed data, so he made a gem to make all of our lives easier. Thanks, Jason! Faker comes with a handful of generators that allow you to generate fake data such as names, emails, phone numbers, addresses, Twitter posts, job titles, and more! There are also methods available to provide you with unique data.

Installation

This is a Ruby Gem and will only work for Ruby applications.

First, install the Ruby Faker Gem.

gem install faker

Once the gem has successfully installed, head over to the seeds.rb file, and require the gem at the top of the file.

require 'faker'

You're ready to go, all there's left to do is... Seed. That. Data.

In your seeds.rb file, go ahead and write a small script using the Faker gem.

# generate 10 users
10.each do
    username = Faker::Esport.player
    name = Faker::Name.unique.name
    profession = Faker::Job.title
    email = Faker::Internet.unique.email
    address = Faker::Address.full_address
    phone = Faker::PhoneNumber.unique.cell_phone
    User.create(username: username, name: name, email: email, profession: profession, address: address, phone: phone )
end

Once you've created a beautiful script containing all your lovely data, seed it! In your terminal run:

rails db:seed

You can check everything was seeded correctly by confirming your data is present within the rails console, or if you have your server up and running, you can check your routes.

Note: If no seed data shows up, see that you are meeting all validations in your model that may be prohibiting the data from being created in the first place.

There you have it! ✨Data✨

If you need to create data that there are not necessarily generators for, get creative with ones that already exist! As you can see in the example script provided above, there was no username generator, so the Esport generator with the .player method was used instead. Most of the generators provide multiple methods for various types of, as well as unique data.

Conclusion

Creating seed data can be a tedious task, but it doesn't have to be! The Faker gem is fantastic for fast, simple, and sometimes funny seed data.

If you have any alternative ways/gems to seed data, feel free to share them below! Happy Seeding! 🌱

How to Create a 3D Cube in ReactJS 🧊

Maxine — Thu, 19 Aug 2021 19:14:49 +0000

The demo repository for this post can be found here.

A Youtube video accompanying this post can be found here. 📺

Introduction
Installation & Setup
Code
Customization

Introduction

Have you ever seen a 3D object rendered on a web page? Of course, you have, and chances are it was made using Javascript. But creating 3D objects with pure JavaScript requires a large amount of code, and might now always work in React environments. Not to say it isn't possible! However, with the implementation of react-3d-cube , you can easily add the 3D cube animation into any of your React applications.

This tutorial was written to make you comfortable with react-3d-cube , but also to get you familiar with adjusting your code as needed.

Installation & Setup

Assuming you already have a React app made, install react-3d-cube.



npm i react-3d-cube

If it doesn't install on the first attempt, try adding on --legacy-peer-deps



npm i react-3d-cube --legacy-peer-deps

Then, create a new Cube folder, and inside add a Cube.js and Cube.css file.



mkdir Cube
cd Cube
touch Cube.js
touch Cube.css

Open up both of your new files.



open Cube.js
open Cube.css

Great job! Now it's time to fill those empty files with some code.

Code

Once you've opened up your Cube.js file, paste in the following template which can be found in the react-3d-cube documentation:



import * as React from 'react';
import './Cube.css'
import Cube from 'react-3d-cube';

class LogoCube extends React.Component {
  render() {
    return (
      <div>
        <center>
            <h1>react-3d-cube</h1>
            <h2>no children</h2>
            <div
            style={{
                width: 300,
                height: 300
            }}
            >
            <Cube size={300} index="front" />
            </div>
            <h2>set children</h2>
            <div
            style={{
                width: 300,
                height: 300
            }}
            >
            <Cube size={300} index="front">
                <div>front</div>
                <div>right</div>
                <div>back</div>
                <div>left</div>
                <div>top</div>
                <div>bottom</div>
            </Cube>
            </div>
        </center>
      </div>
    );
  }
}
export default LogoCube

Next, paste the following in your Cube.css file:



* { box-sizing: border-box; }

body { 
font-family: sans-serif;
margin: 10rem;
}

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 400px;
}

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}

.cube.show-front  { transform: translateZ(-100px) rotateY(   0deg); }
.cube.show-right  { transform: translateZ(-100px) rotateY( -90deg); }
.cube.show-back   { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-left   { transform: translateZ(-100px) rotateY(  90deg); }
.cube.show-top    { transform: translateZ(-100px) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-100px) rotateX(  90deg); }

.cube__face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.cube__face--front  { background: hsla(  0, 100%, 50%, 0.7); }
.cube__face--right  { background: hsla( 60, 100%, 50%, 0.7); }
.cube__face--back   { background: hsla(120, 100%, 50%, 0.7); }
.cube__face--left   { background: hsla(180, 100%, 50%, 0.7); }
.cube__face--top    { background: hsla(240, 100%, 50%, 0.7); }
.cube__face--bottom { background: hsla(300, 100%, 50%, 0.7); }

.cube__face--front  { transform: rotateY(  0deg) translateZ(100px); }
.cube__face--right  { transform: rotateY( 90deg) translateZ(100px); }
.cube__face--back   { transform: rotateY(180deg) translateZ(100px); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(100px); }
.cube__face--top    { transform: rotateX( 90deg) translateZ(100px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); }

label { margin-right: 10px; }

After you've finished writing these two files, import the LogoCube.css file into your LogoCube.js script:



import './LogoCube.css'

You can then import LogoCube.js into where you would like it to render in your application.

For this tutorial, I made a demo page that renders the cube(s) to a blank page. If you would like to test out your cube more before rendering it to the page, I suggest using react-router-dom to create a "test" path that connects to a Testing component.

If you start up your react-app and navigate where LogoCube.js is rendering, you will notice two cubes. This is because the template shows how Cube is rendering with or without children. Also feel free to flip around your cube by dragging around on the sides!

Customization

While your cubes look pretty cool, they still need some work. For starters, decided if you need two and if you don't, let's decide which one to delete. If you're looking for a plain cube with nothing on it, the first one with "no children" was made for you! However, if you want to add custom images, buttons, links, and more, you'll want to use the second cube with "set children".

For this tutorial we will be moving forward with the "set children" cube, as the "no children" is more self-explanatory

Your code should be shortened to:



import * as React from 'react';
import './Cube.css'
import Cube from 'react-3d-cube';

class LogoCube extends React.Component {
  render() {
    return (
      <div>
        <center>
            <h1>react-3d-cube</h1>
            <h2>set children</h2>
            <div
            style={{
                width: 300,
                height: 300
            }}
            >
            <Cube size={300} index="front">
                <div>front</div>
                <div>right</div>
                <div>back</div>
                <div>left</div>
                <div>top</div>
                <div>bottom</div>
            </Cube>
            </div>
        </center>
      </div>
    );
  }
}
export default LogoCube

If you see only the transparent cube rendering, you did it correctly!

It's time to start customizing your cube! Let's say you want to make a cube made of cat images, simply add in img tags as children elements to your cube side div:



class LogoCube extends React.Component {
  render() {
    return (
    <center>
            <div>
                <div
                    style={{
                        width: 300,
                        height: 300
                    }}
                >
                <Cube size={300} index="front">
                    <div >
                        <img style={{width: '280px', height: '300px'}} src="https://cdn.sanity.io/images/0vv8moc6/dvm360/0efdfab43ab36c3432ced2ceb2d52daae6a93c96-500x500.jpg"></img>
                    </div>
                    <div >
                        <img src="https://sitterforyourcritter.com/wp-content/uploads/2019/09/female-cat-1.jpg"></img>
                    </div>
                    <div >
                        <img src="https://pawsitivepotential.com/wp-content/uploads/2016/05/Tongue-Kitten-500x500_t.jpg"></img>
                    </div>
                    <div >
                        <img src="https://9ed48207422fa7fc5013-a6297eb5ec0f30e883355c8680f3b2d6.ssl.cf2.rackcdn.com/Hunter_wubba-9294%20(1)-20180803203739-20180803203910-500x500.jpg"></img>
                    </div>
                    <div >
                        <img src="https://www.guildinsurance.com.au/images/librariesprovider3/breed-images/500x500/cat_russian-blue-tica.jpg?sfvrsn=d16600b_2"></img>
                    </div>
                    <div >
                        <img src="https://www.catmospherecafe.com/assets/chiangmai-3ede22d062b60dde4a501695a2e0bfc7451f44d412ed68bd01cb6b44216270e4.jpg"></img>
                    </div>
                </Cube>
                </div>
            </div>
        </center>

That code would render this cat-image cube:

Wow, it's almost puuurfect! 🐱

If you watch the cube rotate, or do so yourself, you may notice some gaps in the images between the cube faces. While this could potentially create a cool effect if you were using all images with transparent backgrounds, right now it looks messy. Let's fill those gaps using some inline styling:



<Cube size={300} index="front">
                    <div style={{backgroundColor: 'black'}}>
                        <img style={{width: '280px', height: '300px'}} src="https://cdn.sanity.io/images/0vv8moc6/dvm360/0efdfab43ab36c3432ced2ceb2d52daae6a93c96-500x500.jpg"></img>
                    </div>
                    <div style={{backgroundColor: 'black'}}>
                        <img style={{width: '280px', height: '300px'}} src="https://sitterforyourcritter.com/wp-content/uploads/2019/09/female-cat-1.jpg"></img>
                    </div>
                    <div style={{backgroundColor: 'black'}}>
                        <img style={{width: '280px', height: '300px'}} src="https://pawsitivepotential.com/wp-content/uploads/2016/05/Tongue-Kitten-500x500_t.jpg"></img>
                    </div>
                    <div style={{backgroundColor: 'black'}}>
                    <img style={{width: '280px', height: '300px'}} src="https://9ed48207422fa7fc5013-a6297eb5ec0f30e883355c8680f3b2d6.ssl.cf2.rackcdn.com/Hunter_wubba-9294%20(1)-20180803203739-20180803203910-500x500.jpg"></img>
                    </div>
                    <div style={{backgroundColor: 'black'}}>
                    <img style={{width: '280px', height: '300px'}} src="https://www.guildinsurance.com.au/images/librariesprovider3/breed-images/500x500/cat_russian-blue-tica.jpg?sfvrsn=d16600b_2"></img>
                    </div>
                    <div style={{backgroundColor: 'black'}}>
                    <img style={{width: '280px', height: '300px'}} src="https://www.catmospherecafe.com/assets/chiangmai-3ede22d062b60dde4a501695a2e0bfc7451f44d412ed68bd01cb6b44216270e4.jpg"></img>
                    </div>
                </Cube>

The cube should now render like this:

🐾 Pawsitively Amazing! Okay, I'm done now.

That's pretty much all there is to creating a 3D cube in React. While this cube only displays images, you could add on buttons, links, and more. Be as creative as you want! I sincerely hope this article was helpful and would appreciate any feedback.

How to be an Environmentally Aware Software Engineer with Green Code & more ♻️

Maxine — Tue, 17 Aug 2021 19:21:14 +0000

Setting the Tone
Writing Green Code
Dispose your Old Tech Properly
Small Changes
Conclusion

Recently, while scrolling online, I was met with a video I haven't seen in quite a minute, and that clip was The Story of Stuff. If you never watched the animated short film, it gives an in-depth look at what happens to our... well, stuff! And after being reminded, yet again, of our failed civic duty as humans to take care of our planet, I decided it was time to talk about something a little more serious today: being green.

I want to preface this by saying that thinking about our impact on the world may feel overwhelming, to say the least. It can stir up feelings of worry, guilt, or even insecurity, and it is normal. If you do experience those feelings in any way, it means you care about what's happening. And despite what others may say, it's not too late to take action.

Setting the Tone

I want you to imagine you're a developer at a big tech company, or maybe you even are, and it's your first day heading into one of your new office spaces.

Upon walking through the entrance, you see what can only be described as an indoor forest. With walls covered in green and thousands of plants, you inhale a breath of fresh humid air and look around at the green sea that surrounds you. After finding a suitable palm tree to work under, you set your bag down and venture off to the complimentary cafe to grab yourself a coffee, in a recyclable, cardboard cup of course. While your morning drink dispenses, you read the Century Gothic typeface mission statement posted above the coffee station about how all their beans are "sustainably sourced".

I'm sure the last thing you're thinking is, "Wow, this company isn't environmentally friendly." How could you, when everything around you says otherwise? Well, maybe that's the point.

As Developers, we often assume our jobs are "green". Working with bits instead of paper, already makes us feel like we're doing our part. I mean, could you imagine if every file you ever made, you wrote with a pen instead? That's a lot of trees! But other than that, what else can make our jobs eco-friendly?

Writing Green Code

Green code is not often spoken about, but I swear it's a thing! When you think about green code, the words DRY, efficient, and reusable may come to mind. And, you're right to think so! While all those things do make up green code, eco-friendly code can be so much more. Here are several ways you can simultaneously improve code performance and make it green:

Factor in Environmental Costs
- There comes the argument that writing slow code and buying more servers costs a lot less than added development time. But, let's not forget the hidden costs produced by additional servers. The Datacenter electricity that a server uses in one year can be priced at or more than the server itself. Not to mention more expenses for racks, cooling, bandwidth, software, and the materials/manufacturing processes that go into assembling the server itself.
Develop Eco-Friendly Apps
- As silly as it sounds, from now on when you're developing apps consider how you can make the product more eco-friendly. If you're creating an e-commerce website, what are some ways you can lessen the environmental impact on the product itself? Or when creating a website for entertainment, maybe you can allow users to directly download tickets, versus printing them. There are many creative ways developers can do their part while decreasing environmental costs.
Code in the moment, not the future
- It may be true that if you wait to run your code on a future device, it will run faster than it runs today. But using the fastest mechanism you can find as your acceptable performance benchmarking system is not being a green developer. Instead, try running your script on a machine from several years ago that has a slower CPU, less memory, and a smaller hard drive. Now, with code that has acceptable performance running on outdated machines, you've significantly reduced your contribution to the growing landfill of hardware.
Be Memory Conscious
- Developers are fortunate enough to have easy access to large amounts of memory, and often forget that there are still many people using PCs with far less. While you may not think memory costs much, if not anything, what happens when need the machines that are barely capable of holding 1GB need to be replaced? And guess, where do those machines go?
DRY...DRYer
- Writing DRY code is one of the first things we learn, or should learn, as programmers. DRY (Don't Repeat Yourself) code allows for decreased production time, cleaner code, and a clear head. But far too often, after a developer feels they have written DRY enough code, that scripts are left in the corner to collect dust for weeks, months, even years. So, while that code might be DRY for the moment being, developers need to revisit old code and clean it up as new technology is released. DRYing up your already DRY code can speed up the performance, and ultimately make you a greener coder.

Dispose your Old Tech Properly

Slightly contradictory to the previous section, there comes a time where you must upgrade your device. But it's how you toss out your old device that determines whether you're a green engineer or not. So, what are the ways that you, and the people out there with their 2005 PC sitting on the curb, can finally get rid of old devices?

Donate
- Donating your device doesn't just help out the planet, but it also helps out someone in need. While you may no longer find the model of your touch screen phone sufficient, someone out there would be more than grateful to have one in the first place. DellReconnect is a partnership with Goodwill that accepts any brand of computer, and “just about anything that can be connected to a computer”. So, drop off any of your used devices at participating Goodwill locations around the country. Another organization you can donate to is, World Computer Exchange. The WCE has a mission to diminish the digital divide in developing countries, promoting the reuse of and proper recycling of electronics, providing them to communities around the world.
Recycle
- In some cases, a device might not even be sufficient enough to donate, but that doesn't mean it can't be recycled. The Sustainable Electronics Recycling International hosts a directory of facilities certified for electronic recycling. You can also do some research and see if any local charities offer electronic recycling. One example is the organization, Call2Recycle, which offers drop-off locations for recycling electronics all over the U.S.
Refurbishing Programs
- A more popular way of reusing tech, is through refurbishing programs. You may be familiar with the method already, but large companies, such as Apple, allow you to bring in your old products and may even buy them back from you based on their condition. Apple's giveback program offers up to $1,530 in gift-cards or in-store credit for qualifying products. Other companies that offer similar giveback programs include: Best Buy, Office Depot, Staples, and Sprint.

If you have any other eco-friendly methods for disposing of electronics, feel free to comment on them below!

Small Changes

Although it might not seem like much, the last thing you can do as a developer is make small changes that honestly have nothing to do with being a developer, but all to do with being a decent human.

Sustainable Shopping
- I cannot stress this enough. While ordering a product online for overnight delivery is extremely convenient, getting that package to you could have an environmental cost up to, if not more, than 15 tons of CO2 in the atmosphere. That's as much carbon as fifteen 40-year-old trees filter in one year. Let that sink in. Hopefully, next time you click the buy button online you consider, A.) Do I need this? and B.) Can I buy this locally?
Switch out those plastic bags for reusable ones.
- If you need a reminder of why you shouldn't use plastic bags check out The Great Pacific Garbage Patch. Also, consider if you even need a bag such as when you're buying one or two items.
Turn off lights and unused electronics.
- Anytime something is plugged in, it's using power. So that lamp that sits as decoration and rarely gets turned is probably better off unplugged.
If you're working from home great! If not, what are ways you can lessen the environmental impact on your daily commute?

These are just a few of the thousands of ways you can decrease your carbon footprint, if you're interested in even more ways, Columbia Climate School wrote a great article covering how to do so.

Conclusion

Being a green developer is still a choice, but let's hope one day it just becomes apart of who developers are. ❤️️

Resources

What are React Hooks? 🎣

Maxine — Wed, 28 Jul 2021 15:37:31 +0000

Introduction
What are Hooks?
useState
useEffect
Rules of Hooks
Building your own Hooks
Additional Hooks and API Reference
Conclusion

Introduction

React is a free and open-source front-end JavaScript library for UI components, maintained by Facebook and a group of individual developers. However it's used, React is only concerned with state management and rendering that state to the DOM, initially through React state and lifecycle methods.

But that all changed when React 16.8 was introduced, its new addition of Hooks allow the use of state and other React features without writing a class. Hooks were developed to solve a bunch of unconnected problems in React. Some of the problems (are not limited too) include:

What are Hooks?

Hooks are simply just functions that let you “hook into” React state and lifecycle features. Unlike lifecycle methods, Hooks don’t work inside classes. Which can make working with them super flexible, since they let you use lifecycle features in function components. While React provides a few built-in Hooks like useState, you can also create your own Hooks to reuse stateful behavior between components.

useState

This example was taken from and can be seen in the React Documentation for Hooks.

If you are familiar with React, then you may use to seeing state handled like so:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

But with React Hooks, that turns into this:

// This example renders a counter. When you click the button, it increments the value:
import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The first Hook we'll be examining, is the State Hook. useState is a Hook called inside a function component to add local state. Once added, React uses the Hook to preserve this state between re-renders by returning two things: the current state value and a function for updating it. This function can be called from anywhere, such as an event handler. If you familiar with React, compare it to this.setState in a class, without merging the old and updated state together.

"useState" only takes in one initial argument, which is only used during the first render. In the previous example, this argument is "0" because the counter starts from zero. Keep in mind that unlike this.state, the state here doesn’t have to be an object.

You can understand out how to declare multiple variables with the "useState" hook here.

useEffect

When coding with React, you may perform data fetching, subscriptions, or manually changing the DOM. The React developers like to call these “side effects” since they affect other components, and can’t be done while rendering.

The Effect Hook, useEffect, adds the ability to effect from, you guessed it, a function component. Similar to componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, "useEffect" is unified into a single API.

Going off the example before, after React updates the DOM, the component sets the document title:

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

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

By calling "useEffect", you’re telling React to run the “effect” function you created after pushing changes to the DOM. Effects are declared inside the component, so they have access to props and state. By default, React runs the effects after every render, starting with the first one. Effects can also optionally specify actions to take after by returning a function. Hooks let you organize side effects in a component by what ideas are related, rather than forcing a split based on lifecycle methods.

Unlike the lifecycle methods, componentDidMount or componentDidUpdate, effects scheduled with useEffect don’t block the browser from updating the screen. This cut back on processing time, since the majority of effects don’t need to happen synchronously, making your app feel more responsive. In a case where effects do need to occur synchronously(such as measuring the layout), there is a separate useLayoutEffect Hook with an API identical to useEffect. You can learn more about that in the Additional Hooks and API Reference section.

Rules of Hooks

Despite Hooks being Javascript functions, there are still several rules they must follow in order to maintain the black magic that gives them lifecycle features.

Only Call Hooks at the Top Level
- Always use Hooks at the top level of your React function, before any early returns. This means don’t call Hooks inside loops, conditions, or nested functions. This ensures that Hooks are called in the same order each time a component renders, which allows React to correctly preserve the state of Hooks between varying useState and useEffect calls.
Only Call Hooks from React Functions
- Don’t call Hooks from regular JavaScript functions. Try the following instead:
  - Call Hooks from custom Hooks
  - Call Hooks from React function components.

To make things easy, the React developers made this plugin that automatically enforces these rules. But, that doesn't mean you should skip over knowing proper Hook etiquette.

Building your own Hooks

What if you want to go beyond just the Effect Hook? Well, there's an answer for that, build your own! By building your own Hooks, you can extract component logic into reusable functions. You may be use to doing this in React through: render props and higher-order components. But with the addition of Hooks, you can solve many of the same problems without adding more components to the tree. No one likes cluttered code!

Think about how share logic between two JavaScript functions, you extract it into yet another function. And since components and Hooks are functions, this works for them too!

A custom Hook is a JavaScript function whose name starts with ”use” and has the ability to call other Hooks.

You can write custom Hooks that cover a variety of cases such as form handling, animation, timers, and much more. Don't be afraid to experiment with creating your own Hooks, because you might find yourself making a meaningful contribution to others down the line. React even provides documentation on how to contribute to the open source project.

For more information about building your own custom Hooks and some examples, see the React Documentation for creating custom Hooks.

As an additional resource, here is another recent blog post that further explains how to build your own Hooks, and supplies you with some great examples such as a "useFetch" custom hook. Check it out here!

Additional Hooks and API Reference

If you're interested in learning about the Hooks API reference, the React documentation provides a reader friendly explanation for the basic hooks:

You can also use additional Hooks which are either variants of the basic ones, or only needed for specific edge cases. While helpful, they are just additions, so don't worry about learning them right away. These Hooks include:

Conclusion

React is constantly changing, and programmers who are focused on developing products may not have the time to learn and use every new API released. Hooks are still fairly new, so while they may come in handy, there's no rush to adopt them into your every day practices, unless that's what your heart desires.

Hooks were made to work side-by-side with existing code, which allows you to adopt them gradually, meaning there is no rush to migrate to Hooks. Do not feel the need to do some “big rewrite”, especially for existing, complex class components. It's a bit of a learning curve to start “thinking in Hooks”. So practice using Hooks in your unimportant work first, and once you, and anyone you're working with, feel comfortable with them, give them a go!

Hooks were made in hopes to one day cover all existing use cases for classes, but don't worry because class components aren't going anywhere soon. If you don't believe me, I'll quote the React developers themselves,

"At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them. Instead, we are starting to use Hooks in the new code side by side with classes."

Hopefully this article has inspired you to hook into your full React potential, or maybe you decided to not bother learning and using yet another API. Either way, let me know your opinion about Hooks, and where you see them going in the future. ✨ Happy Hooking! ✨

What is LaTeX? 📄

Maxine — Tue, 20 Jul 2021 17:05:32 +0000

Introduction
What is LaTeX?
Why LaTeX?
Usage
Document Preambles
Adding a Title, Author, and Date
Adding a Comment
Adding Bold, Italics, and Underlining
Creating Lists
Conclusion

Introduction

Over the last few weeks I have been piecing together my portfolio, anxious to get it completed and sent out to employers. I actually felt like I was completely finished until someone asked the question, is your resume in latex?
And I stood there thinking...is my resume in what?

But, after a quick google search, latex turned into LaTeX, and I realized we were talking tech 😎. If you haven't caught on yet, my resume was definitely not in LaTeX. But it will be!

In this blog post, I am going to discuss LaTeX, it's usage, and how you can apply it to your own resume!

What is LaTeX?

LaTeX is a tool for creating professional-looking documents. Originally based off the WYSIWYM (What You See Is What You Mean) idea, it only focuses on the contents of your document, while the computer will take care of the rest. Instead of spacing out text on a page, or any other formating, used in Microsoft Word, LibreOffice Writer etc.*, users can enter plain text, letting LaTeX do all the work.

Why LaTeX?

LaTex isn't only used for resumes, but all over the world for scientific documents, books, and other various forms of publishing. It simultaneously creates organized typeset documents and allows users to focus on the more complicated parts of typesetting, which can included but is not limited to, inputting mathematics, creating tables of contents, referencing and creating bibliographies, and having a consistent layout across all sections. There are no fine lines when utilizing with Latex due to the huge number of open source packages available. These packages allow users to do more with LATEX, like adding footnotes, draw schematics, create tables, and more.

One reason why people use LaTeX is that it separates the document content from style. This means that we can change the documents appearance with ease after you have the written content. Additionally, you can create one document style which can be used similar to a template for other documents. This allows scientific journals to create templates for submissions. There are hundreds, if not thousands, of templates available online for everything!

Usage

To create a new LaTex project on your own computer, you'll first need to create a new .tex file. If you were making a template for your resume, your file name might be 'resume.tex'. If you are creating .tex files locally, you may need an outside extension to view your formatted file. For an alternative way to create .tex files, check out Overleaf, on online LaTex editor, where there are many templates already available.

Now that you have you .tex file ready to go, let's start formatting! To begin formatting, we're going to use a very basic example, that can be found here in the LaTeX Docs.

\documentclass{article}

\begin{document}

Testing out LaTeX! This is an example using no 
extra parameters or packages included.

\end{document}

When formatted, that will appear as:

Not too bad, right?

If you decide to use Overleaf, upon creating a blank project you'll be provided a basic preset template, that might look like:

Now, I know how exciting it must feel to have just unlocked the power to reduce document formatting time significantly. So, before we get too ahead of ourselves, let's take a step back and understand what going on "under the hood".

Document Preambles

In both of the examples you may have noticed the document begin with the begin{document} command. Everything in your .tex file before this point is called the preamble. In the preamble you can define which type of document you are writing, the language you are writing in, the packages you'd like to use, and more. The normal document preamble would look like so:

\documentclass[12pt, letterpaper]{article}
\usepackage[utf8]{inputenc}

Let's break this down.

documentclass[12pt, letterpaper]{article}

This defines the type of document. There are, comma separated, parameters included in the square brackets can be passed. So if you take a look in the example, the parameters set the font size to 12pt, as well as the paper size (letterpaper). You can use any font size, but if none is specified, a default size of 10pt will be used. Regarding paper size other possible parameter values include a4paper and legalpaper; you can research even more values if interested.

\usepackage[utf8]{inputenc}

This line is for encoding for the document. It can be left out or altered to another encoding, but utf-8 is usually what's recommended. Unless you specifically need another encoding, or if you are unsure about it, add this line to the preamble.

If you are using Overleaf chances are all of this will be provided for you. However, it's still a good idea to understand what and where the formatting is deriving from.

Adding a Title, Author, and Date

In many cases, you may want to add a title, author, and date to your project. Thankfully, it can be done in three easy lines in the preamble, NOT the main document body. These lines include:

\title{My Example}
\author{Maxine Meurer}
\date{July 2021}

After you have added and filled in these lines within your document, the information can now be printed on the document with the \maketitle command. This should be included in the body of the document, at the place you want the title to appear. With this code:

\documentclass{article}
\usepackage[utf8]{inputenc}

\title{My Example}
\author{Maxine Meurer}
\date{July 2021}

\begin{document}

\maketitle

You're on your way to creating your \LaTeX{} document!

\end{document}

You should receive a document that looks like this:

Beautiful, isn't it?

Adding a Comment

Now, we're getting pretty far into our LaTeX document already, so what if we need to make a quick comment to remind ourselves to add something later? To make a comment in LaTeX, just write a % symbol at the beginning of the line like so:

%Let's change the font size again later!

Adding Bold, Italics, and Underlining

Whether you are hand crafting a resume, or piecing together a scientific report, you may want to accentuate some information! In other editors we may be use to the good ol' 'command + b/i/u', but don't worry LaTeX has us covered.

Bold: Bold text in LaTeX is written with the \textbf{...} command.
Italics: Italicised text in LaTeX is written with the \textit{...} command.
Underline: Underlined text in LaTeX is written with the \underline{...} command.

So for the example:

Let's \textbf{bold} some text!
Let's \underline{underline} some text!
let's italicize \textbf{AND} bold \textbf{\textit{some text}

You would see a result of:

Creating Lists

Just as you want to accent your document, you may also want to list out important information. Lists are easy to create in LATEX. You can do so by utilizing different list environments. Environments are sections of our document that you want to present in a different way to the rest of the document. Environments start with a \begin{...} command and end with an \end{...} command. This should look a little familiar...

The two most commonly used types of lists are, ordered lists and unordered lists, each using a different environment.

Unordered Lists

You can create unordered list by using the itemize environment. Each entry must be preceded by the control sequence '\item', refer to the example:

\begin{itemize}
  \item Yay, my first list item.
  \item Lets get to work.
\end{itemize}

This will show as:

Ordered Lists

Ordered list are similar in syntax but instead use the enumerate environment, the same list above would look like:

\begin{enumerate}
  \item Yay, my first list item.
  \item Lets get to work.
\end{enumerate}

Appearing as:

Like unordered lists, each entry must begin with the '\item' command, automatically generating the number labelling the item. The enumerate labels uses sequential numbers starting at one.

Woah there, I didn't realize I was in the presence of a LaTeX pro.😎

Conclusion

So now that you can impress colleagues, employers, and most importantly yourself with your newly gained LaTeX skills, go ahead and put them to use! Utilizing LaTeX to create your own documents shows that you put the extra time and effort into presenting your knowledge on paper, or pdf since it is 2021 and all...

While this blog post covers the basics for creating a LaTeX doc, I highly recommend referring back to the Latex Documentation, which is what I used as the primary source for this blog post, to learn more ways to add to/spruce up your formatting, such as adding images, captions, and more!

How to Make an Open Source Github Contribution 👯‍♀️

Maxine — Wed, 14 Jul 2021 20:04:41 +0000

Introduction
How To
Conclusion

Introduction

In this post, we'll go over the basics of how to make your first Github contribution. If you would like to test out your skills, and make a test contribution, head over to Merge Me, an open source repository that allows you to practice making your first pull/merge requests. You'll find these same directions once you open up the index.html file. Let's get started!

How To

Fork and clone the repository to your local environment.
Start by making a pull request. This will keep all the files locally up-to-date with the remote repository, in the circumstance other developers you may be working with have made any new changes. To do this, start off by confirming you are in the main branch, and then in your command line type:

user@Users-MacBook_Air: git pull origin main

Running this command will pull all the files from the remote branch, updating your local branch to match any changes made. It's always a good idea to do this, especially when working with others as you don't know what changes could have been made since you last accessed the branch.

After you've confirmed everything is up-to-date, you're going to check out a new branch, this will be your staging area. If you're adding a new feature to any application, you want to preserve its original state, this avoids big bugs and annoyed developers down the line. To do this, in the command line type:

user@Users-MacBook_Air: git checkout -b (YOUR BRANCH NAME)

When naming your branch, it's good practice to name it after what you're doing/in relation to the changes being made. So, if you were to make a pull request to add a README.md file into a repo, you might name that branch 'readme-md'.
If you've done it correctly, you should have received the following message in your terminal:

switched to new branch '(YOUR BRANCH NAME)'

Once you are inside your newly created branch, you can finally add in your own code! So, contribute! Go! Be Free!
After you've made the most meaningful contributions of your life, you're going to want to save all those beautiful changes. Now we're going to do something that should hopefully feel a little familiar. In your terminal type:

user@Users-MacBook_Air: git add .

Followed by, you guessed it, 'git commit'. While you may not always make the most meaningful commit messages for your own code/repositories, (even though you should), you ALWAYS have to make meaningful commit messages when contributing to another developer's code or in your work place. Not only is it professional and coder common courtesy, it also gives an idea as to what was done with the code at that staging period. This helps decrease debugging time and everyone else will understand what the heck is going on inside the application.

user@Users-MacBook_Air: git commit -m "A MEANINGFUL COMMIT MESSAGE EXPLANING WHAT YOU ADDED"

WAIT! DON'T PUSH IT YET! (I had to add this in here for those of us who like to jump ahead sometimes) Now that I hopefully have everyone's attention, you never want to just push your contribution up to the main branch. This goes back the coder common courtesy and professionalism explained before. Not to mention, you may have some unhappy developers if you overwrote/added code that wasn't approved of first.

To avoid this, you'll instead push your changes to your newly created branch. This can be done by adjusting the good ol' 'git push' command to the following:

user@Users-MacBook_Air: git push origin (YOUR BRANCH NAME)

You should receive a message back in your terminal confirming that your code was pushed up to your newly created branch.

If you head on back over to the repository you're working on, you should see new notification that the repository was recently updated, along with your branch name. There should also be a button that says 'Compare & pull request'. Go ahead and click it.

You should be lead to a page that displays your commit message! You'll see an option to leave a message underneath your commit. If you are working with others, it is great coder common courtesy to leave a nice little message further detailing your commit and why you added it in the first place. Again, this avoids bugs and confusion later.

After you've left a message, you're going to create a pull request. You should see a 'Create pull request' button underneath the message box, give that a click. By doing this, you're putting a request to the repository owner that you would like to push your changes to the main branch of the repository. Doing so will also notify all the other developers working on this repository that a new push request has been made. You can even assign reviewers to be notified of your push request, which can be done under the 'reviewers' tab.
If everything went smoothly and you contributed something (somewhat) meaningful, your code will get pushed, merging with the main branch.

Congratulations, you just made your first contribution. Do a dance to celebrate.🎉

Conclusion

It doesn't seem so bad after all, does it? If you followed along with this post while making your first contribution, awesome job! If you haven't made yours yet, get on out there and do it! Try it out on the Merge Me, where you can collaborate with other developers like you!

I hope this blog post has helped you in your contribution journey, as much as I hope to see your contributions in Merge Me, happy coding! :)

How to add Redux Toolkit to a React-Redux application ⚛️

Maxine — Fri, 09 Jul 2021 21:09:58 +0000

Introduction
Installation
Create Redux Store
Create Slices
Add Reducers to Store
Performing Asynchronous Logic and Data Fetching
Conclusion

Over the last couple days I realized I wasn't alone in learning the wonders of Redux Toolkit. So for those of you that are in the same boat as me, get ready for some ducks!

Introduction

Redux Toolkit is package that was built on top of Redux an open-source JS library for managing application state. The package allows the user to avoid unnecessary boilerplate code, and supplies APIs that make applications DRYer and more maintainable. If you'd like to read more about Redux Toolkit and its features, I have another blog post available here.

Today we'll be focusing on how to implement Redux toolkit in a React-Redux application.

Installation

First and foremost, install the Redux Toolkit package in your React-Redux application:

npm install @reduxjs/toolkit react-redux

Create Redux Store

Create a file named src/redux/store.js. I choose to name the folder containing my store and slices "redux", in the documentation you will see it named "app", the convention is your choice. Inside the store.js file, import the configureStore() API from Redux Toolkit. You're simply just going to start by creating and exporting an empty Redux store:

// src/redux/store.js

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

By creating the Redux store, you are now able to observe the store from the Redux Devtools extension while developing.

After the store is created, you must make it available to your React components by putting a React-Redux Provider around your application in src/index.js. Import your newly created Redux store, put a Provider around your App, and pass the store as a prop:

// src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './redux/store' // import your store
import { Provider } from 'react-redux' // import the provider

ReactDOM.render(
  <Provider store={store}> // place provider around app, pass store as prop
    <App />
  </Provider>, 
  document.getElementById('root')
)

And there you have it, a beautifully set up Redux Store.

Create Slices

To create your first slice, we'll be adding a new file generally named after what you will be performing the actions on, or the action itself. For this example, let's say we are creating an app that allows a user to create posts. I would then create a file named src/redux/PostSlice.js. Within that file, you would then import the createSlice API from Redux Toolkit like so:

// src/redux/PostSlice.js

import { createSlice } from '@reduxjs/toolkit'

A slice requires a string name to identify the slice, an initial state value, and one or more reducer functions, defining how the state can be updated. After creating the slice, you can export the already generated Redux action creators and reducer function for the entire slice.

Redux requires that we write all state updates immutably, it does this by making copies of data and updating the copies. But, Redux Toolkit's createSlice and createReducer APIs use Immer ,a package that allows you to work with immutable state, allowing you to write "mutating" update logic that then becomes correct immutable updates. Right now you're probably use to your action creators looking something like this:

function addPost(text) {
  return {
    type: 'ADD_POST',
    payload: { text },
  }
}

But Redux Toolkit provides you a function called createAction, which generates an action creator that uses the given action type, and turns its argument into the payload field. It also accepts a "prepare callback" argument, allowing you to customize the returning payload field:

const addPost = createAction('ADD_POST')
addPost({ text: 'Hello World' })

Redux reducers search for specific action types to know how they should update their state. While you may be use to separately defining action type strings and action creator functions, the createAction function cuts some of the work out for you.

You should know that, createAction overrides the toString() method on the action creators it generates. This means that in some clauses, such providing keys to builder.addCase, or the createReducer object notation. the action creator itself can be used as the "action type" reference. Furthermore, the action type is defined as a type field on the action creator.

Here is a code snippet from Redux Toolkit Documentation:

const actionCreator = createAction('SOME_ACTION_TYPE')

console.log(actionCreator.toString())
// "SOME_ACTION_TYPE"

console.log(actionCreator.type)
// "SOME_ACTION_TYPE"

const reducer = createReducer({}, (builder) => {
  // actionCreator.toString() will automatically be called here
  // also, if you use TypeScript, the action type will be correctly inferred
  builder.addCase(actionCreator, (state, action) => {})

  // Or, you can reference the .type field:
  // if using TypeScript, the action type cannot be inferred that way
  builder.addCase(actionCreator.type, (state, action) => {})
})

Here's how our example PostSlice would look if we were to use the "ducks" file structure...

// src/redux/PostSlice.js

const CREATE_POST = 'CREATE_POST'

export function addPost(id, title) {
  return {
    type: CREATE_POST,
    payload: { id, title },
  }
}

const initialState = []

export default function postsReducer(state = initialState, action) {
  switch (action.type) {
    case CREATE_POST: {
      // Your code
      break
    }
    default:
      return state
  }
}

While this definitely simplifies things, you would still need to write actions and action creators manually. To make things even easier, Redux toolkit includes the a createSlice function that will automatically generate the action types/action creators for you, based on the names of the reducer functions provided.

Here's how our updated posts example would look with createSlice:

// src/redux/PostSlice.js

import { createSlice } from '@reduxjs/toolkit'

const postsSlice = createSlice({
  name: 'posts',
  initialState: [],
  reducers: {
    createPost(state, action) {}
  },
})

const { createPost } = postsSlice.actions
export const { createPost } = actions
export default PostSlice.reducer

Slices defined in this manner are similar in concept to the "Redux Ducks" pattern. However, there are a few things to beware of when importing and exporting slices.

Redux action types are not meant to be exclusive to a single slice.
- Looking at it abstractly, each slice reducer "owns" its own piece of the Redux state. But, it should be able for listen to any action type, updating its state accordingly. For example, many different slices may have a response to a "LOG OUT" action by clearing or resetting data back to initial state values. It's important to remember this as you design your state shape and create your slices.
JS modules can have "circular reference" problems if two modules try to import each other.
- This can result in imports being undefined, which will likely break the code that needs that import. Specifically in the case of "ducks" or slices, this can occur if slices defined in two different files both want to respond to actions defined in the other file. The solution to this is usually moving the shared/repeated code to a separate, common, file that both modules can import and use. In this case, you might define some common action types in a separate file using createAction, import those action creators into each slice file, and handle them using the extraReducers argument.

This was personally an issue I had when first using Redux Toolkit, and let's just say it was a very long 8 hours...

Add Reducers to Store

Once you created your slice, and read/signed the terms and conditions listed above, you can import your reducers in the store. Redux state is typically organized into "slices", defined by the reducers that are passed to combineReducers:

// src/redux/store.js

import { configureStore } from '@reduxjs/toolkit'
import postsReducer from './postSlice'

const rootReducer = combineReducers({
  posts: postsReducer
})

If you were to have more than one slice, it would look like this:

const rootReducer = combineReducers({
  users: usersReducer,
  posts: postsReducer
})

You can take away that the reducers...

"Own" a piece of state, including what the initial value is.
Define how that state is updated.
Define which specific actions result in state updates

Performing Asynchronous Logic and Data Fetching

You also may be asking how to import and use this in your actual components, which is where useDispatch, useSelector, connect, and mapDispatchToProps comes in play.

If you are looking to include async logic into your code, you will have to use middleware to enable async logic, unless you would like to write all that lovely code yourself.

Redux store alone doesn't know anything about async logic. It only knows how to synchronously dispatch actions, update the state by calling the root reducer function, and notify the UI that something has changed. So, any asynchronicity has to happen outside the store. If you are looking to implement this into your application, I would to look into this documentation and utilizing createAsyncThunk.

Conclusion

You have successfully transitioned over from vanilla Redux to Redux Toolkit! You probably have some cleaning up to do throughout your application, as your code has been greatly reduced. While this definitely does not cover the entirety of the package, it should at least get you started!

I sincerely hope this article has aided you in your transition from vanilla Redux to Redux Toolkit. I would appreciate any feedback you have, and feel free to share your applications using Redux Toolkit! Happy Coding!

Sources/ Supplemental Resources:

What is Redux Toolkit? 🔨

Maxine — Wed, 07 Jul 2021 15:34:57 +0000

Introduction
What's included inside Redux Toolkit?
RTK Query
What does RTK Query include?
Conclusion

Introduction

The Redux Toolkit package was developed to be the new standard way to write Redux code, handling three major concerns about Redux itself...

"Configuring a Redux store is too complicated"
"I have to add a lot of packages to get Redux to do anything useful"
"Redux requires too much boilerplate code"

These concerns were taken from and can be read further upon in the Redux ToolKit Documentation.

One important thing to take away is that Redux provides us with powerful data fetching and caching capability. This removes the need to create functions ourselves that would perform the same logic.

Using Redux Toolkit is not required when using Redux, however it is encouraged because it does make your code DRYer and more maintainable, while speeding up development. The package can be used at any skill level, and added at the beginning, in the middle, or at the end. I would encourage starting off your react/redux application with the redux toolkit package if you are planning to use it in the future, just to make things easier.

What's included inside Redux Toolkit?

Redux Toolkit includes the following APIs... These APIs were created to supply logic and avoid repetition.

configureStore()
- Wraps createStore to provide simplified configuration options and good defaults. It can automatically combine your slice reducers, adds whatever Redux middleware you supply, includes redux-thunk by default, and enables use of the Redux DevTools Extension.
createReducer()
- Lets you supply a lookup table of action types to case reducer functions, rather than writing switch statements. In addition, it automatically uses the immer library to let you write simpler immutable updates with normal mutative code, like state.todos[3].completed = true
createAction()
- Generates an action creator function for the given action type string. The function itself has toString() defined, so that it can be used in place of the type constant.
createSlice
- Accepts an object of reducer functions, a slice name, and an initial state value, and automatically generates a slice reducer with corresponding action creators and action types.
createAsyncThunk
- Accepts an action type string and a function that returns a promise, and generates a thunk that dispatches pending/fulfilled/rejected action types based on that promise.
createEntityAdapter
- Generates a set of reusable reducers and selectors to manage normalized data in the store.
createSelector
- Utility from the Reselect library, re-exported for ease of use.

RTK Query

The RTK Query is given as an optional addition to the Redux toolkit package. It was built to ease the work load for programmers, solving the use case of data fetching and caching. The RTK Query is a compact and powerful toolset used to define an API interface layer for your app.

The toolset is built on top of the Redux Toolkit, and uses Redux internally for its architecture. RTK query provides additional global store management capabilities. To further understand RTK query, it is recommended that you install the Redux DevTools browser extension. You can then examine and replay the behaviors of your requests and cache as they execute.

RTK Query is already included with Redux Toolkit package. You can simply add the code:

import { createApi } from '@reduxjs/toolkit/query'

/* React-specific entry point that automatically generates
   hooks corresponding to the defined endpoints */
import { createApi } from '@reduxjs/toolkit/query/react'

What does RTK Query include?

createApi()
- The core of RTK Query's functionality. It allows you to define a set of endpoints describe how to retrieve data from a series of endpoints, including configuration of how to fetch and transform that data. In most cases, you should use this once per app, with "one API slice per base URL" as a rule of thumb.
fetchBaseQuery()
- A small wrapper around fetch that aims to simplify requests. Intended as the recommended baseQuery to be used in createApi for the majority of users.
ApiProvider
- Can be used as a Provider if you do not already have a Redux store.
setupListeners()
- A utility used to enable refetchOnMount and refetchOnReconnect behaviors.

You can find more information about RTK query here in the Redux Toolkit documentation. But the main thing to take away from RTK query is that it...

DRYs up your code.
You avoid recreating logic, saving time and resources.
It can create cleaner and more efficient code.

Conclusion

Redux Toolkit comes with a lot of tools that save you lines of code, time, and headaches. But its purpose and benefits have raised controversy in the tech realm. For some user's, the package is very useful and fits all the points listed above. However, some find that it requires a lot of boilerplate code and just makes things more confusing. The only way to truly find out, is to use Redux Toolkit for yourself! There are many tutorials out there explaining how to create small or large applications utilizing the toolkit. It is unknown whether Redux Toolkit is just another fad of programming, or here to stay...but we might as use while it's hot!

DEV Community: Maxine

Stop Struggling with Merging Branches and Use these Git Commands instead

Stop Conflicting Merge Requests and Use These Commands instead ⤵️

-Xtheirs

-Xours

Conclusion

Like my tutorials? Here’s some more!⤵️

How to Update a DynamoDB Item using NodeJS with AWS Lambda and Amplify CLI

Table Of Contents

Introduction 🎁

What is AWS Amplify? ☁️

Prerequisites & Installation 🚧

How to Write a NodeJS Function to Update a DynamoDB Item using AWS Lambda and Amplify CLI 🛠️

Conclusion 📍

Feel Free to Check out these Extra Resources

How to Intergrate Chakra UI in Next.js 🧑‍🎨

Presequisites

Create a NextJs Project

Create a NextJs Project Using Typescript

Adding Chakra UI to your Next.js Application

Adding in Chakra Providers

How to Seed Data Fast with the Faker Gem ⚡️🏃🏻💨

Table Of Contents

Introduction

What is Faker?

Installation

Conclusion

How to Create a 3D Cube in ReactJS 🧊

The demo repository for this post can be found here.

A Youtube video accompanying this post can be found here. 📺

Table Of Contents

Introduction

Installation & Setup

Code

Customization

How to be an Environmentally Aware Software Engineer with Green Code & more ♻️

Table Of Contents

Setting the Tone

Writing Green Code

Dispose your Old Tech Properly

Small Changes

Conclusion

Resources

What are React Hooks? 🎣

Table Of Contents

Introduction

What are Hooks?

useState

useEffect

Rules of Hooks

Building your own Hooks

Additional Hooks and API Reference

Conclusion

What is LaTeX? 📄

Table Of Contents

Introduction

What is LaTeX?

Why LaTeX?

Usage

Document Preambles

Adding a Title, Author, and Date

Adding a Comment

Adding Bold, Italics, and Underlining

Creating Lists

Unordered Lists

Ordered Lists

Conclusion

How to Make an Open Source Github Contribution 👯‍♀️

Table Of Contents

Introduction

How To

Conclusion

How to add Redux Toolkit to a React-Redux application ⚛️

Table Of Contents

Introduction

Installation

Create Redux Store

Create Slices

Add Reducers to Store

Performing Asynchronous Logic and Data Fetching