DEV Community: rcblake

Fantastic Forms with React Hook Forms

rcblake — Fri, 21 Jul 2023 10:37:53 +0000

With forms being a focal point of many applications, the ability to move swiftly in implementation is crucial as well as reusability and modular components. React Hook forms is here to cover those bases and more in the advancement in the space.

I'll start with why it's different and I'll give you a few stats as reference then I'll show you off some of the key basic features. I'll be using Formik as the leading comparison.

Like Formik, React Hook Form is a form builder library that aims to reduce the pain of creating forms with React. A big difference between the two is that React Hook Form is designed to make use of uncontrolled components to avoid unnecessary re-rendering caused by user inputs.

This makes for significantly less re-renders on the form as you aren't rendering on every keystroke. React Hook Form isolates input components from the rest, preventing the whole form to re-render for a single field change.

Other libraries, including Formik, rely on form updates to cascade changes to the inputs, and although it has some advantages in terms of flexibility, this has a huge cost on performance

Installation

npm install react-hook-form

API References

The useForm API: this is one of those functions which you will be calling first before you apply any handling logic to your existing forms. It takes some optional arguments like mode, defaultValues, shouldFocusError, etc.

const { register } = useForm({
  mode: 'onSubmit',
  reValidateMode: 'onChange',
  defaultValues: {},
  resolver: undefined,
  context: undefined,
  shouldFocusError: true,
  shouldUnregister: true,
})

As for its methods, take a look at how these are used:

register: allows you to register an input/select ref and apply validation rules into React Hook Form based on both HTML default and custom validations.

`<input name="test" ref={register} />

<input
  name="test"
  ref={
    register({
      required: true
    })
  }
/>

errors: it’s an object which contains form errors and error messages corresponding to each field.

const { errors } = useForm();

<input name="singleErrorInput" ref={register({ required: true })} />
{errors.singleErrorInput && "Your input is required"}

handleSubmit: it’s a function that will pass the form data when form validation is successful and can be invoked remotely as well.

const { register, handleSubmit } = useForm();
const onSubmit = (data, e) => console.log(data, e);
const onError = (errors, e) => console.log(errors, e);

<form onSubmit={handleSubmit(onSubmit, onError)}>
      <input name="firstName" ref={register} />
      <input name="lastName" ref={register} />
      <button type="submit">Submit</button>
 </form>

setError: allows you to manually set one or more errors.

const { setError, errors } = useForm();

<input 
  name="username"
  type="text"
  onChange={() => {
      setError("username", {
      type: "manual",
      message: "Dont Forget Your Username Should Be Cool!"
    });
  }}
  ref={register} />

  {errors.username && <p>{errors.username.message}</p>}

The Controller API: it’s a wrapper component that makes it easier to work with external components from other libraries and frameworks, specifically helpful Material UI.

<Controller
  control={control}
  name="test"
  render={(
    { onChange, onBlur, value, name, ref },
    { invalid, isTouched, isDirty }
  ) => (
    <Checkbox
      onBlur={onBlur}
      onChange={(e) => onChange(e.target.checked)}
      checked={value}
      inputRef={ref}
    />
  )}
/>

Validation: RHF in-line validation is quick and simple allowing for validation on data type, length, or even regex patterns

<input name="firstName" 
  ref={register({ required: true, maxLength: 20 })} />
<input name="lastName" 
  ref={register({ pattern: /^[A-Za-z]+$/i })} />
<input name="age" type="number" 
  ref={register({ min: 18, max: 99 })} />

Combining this simplicity into what can become very complication with MUI or any other design library, you can just insert the ref above into the TextField component of the library and you've got your instant front end validation with limited rendering and 0 dependencies.

And if you're used to using schema validation like Yup, its even easier to implement.

Toss is multi-error options (per field) and you've got amazing user forward forms.

Parallax Scrolling for Beginners

rcblake — Fri, 30 Jun 2023 19:38:07 +0000

What is it?
Parallax scrolling is the design concept to apply flat layers that move at different speeds to provide the illusion of depth. While not a new concept, the usage in web design has been growing as a way to make an app feel more interactive.

Where did it come from?
Date's back to the 1930 in early film. Specifically in animation to help provide depth. Here's a great example of how Disney used the concept in Bambi.

Easy to see why this would easily evolve into digital enviroments like video games and but and while very advanced versions are seen every day, so are simple version that apply to every day dev

Examples:
There are really simple ways to use parralax scrolling that you probably see dozens of times a day. Simple 2D scrolling effects can be an easy way to inject different content that stand out.

Simple

While the same principles and be layered and layered to create an immersive experience for the user.
From: isladjan

*Let's get started!
*

In this example, we just need some light HTML structure and that we'll be styling on top of.

   <div class="parallax">
      <div class="parallax-layer layer1">LAYER 1</div>
      <div class="parallax-layer layer2">LAYER 2</div>
      <div class="parallax-layer layer3">LAYER 3</div>
      <div class="parallax-layer layer4">LAYER 4</div>
      <div class="parallax-layer layer5">LAYER 5</div>
    </div>

From here, we'll work entirely in CSS. Note there are many things you can do within JS to add even further, but for this basic example, sticking to one language is helpful to see the pieces all in one place.

The first line is how you should start every first line of CSS. Remove the default margin from your app.

body {
  margin: 0;
}

Next, using the className from the HTML, we'll set our wrapper class the encompasses all of our layers.

.parallax {
  height: 100vh;
  overflow-x: hidden;
  perspective: .5px;
}

height: We're setting this to the maximum view height to adapt to the screen that it's on. we set to the maximum so you don't have a gap on top or bottom which would ruin the illusion.

overflow-x: is how you'd like to handle horizontal overflow of this element should it be larger than the screen. "hidden" will ensure we don't get a sideways scroll due to this element.
Learn more about other overflow-x choices here.

perspective: in this 2D example, we use 1 as we aren't adding additional depth but this number is more crucial once you get into 2.5D and 3D.
Play with perspective on a 3D element here.

Now comes the fun part of depth. We've all mapped x/y coordinates on a flat plane before. Any adjustment to position of an element is exactly that. But mapping z coordinates is what plays into the perspective.

If you've ever bring-to-front/send-to-back in many programs, you've adjusted the Z-index of the element. Z is the third coordinated in the 3D model. We'll be using the transform property to change the objects z-index of our elements.

.layer1 {
  transform: translateZ(0);
}
.layer2 {
  transform: translateZ(-.5px);
}
.layer3 {
  transform: translateZ(-2px);
}
.layer4 {
  transform: translateZ(-5px);
}
.layer5 {
  transform: translateZ(-7px);
}

We've now changed the Z coordinate RELATIVE to our wrapper class. Notice layer1 has 0 change. This is our static object and stays in place as you would normally have a fixed back-ground.

With each element I've gotten exponentially further away from layer1. Thing of how when looking down a hallway of a hotel. As you get further away the doors appear to be closer together, so to override that, you have to exponentially increase the distance to keep your objects staggered more evenly when looking via a 2D screen.

Adding some labels to our elements:

div {
  font-size: 50px;
  text-align: center;
}

Now we'll add some code that we'll want to adjust the settings of the wrapper but to just the specific layers drilling the classes.

.parallax-layer.layer1 {
  width: 100%;
  height: 100em;

  background-color: pink;
}

As mentioned, the first layer is base so establishing it's 100% width, and setting a height of 100rem.

Keeping the with 100% is helpful in this example but adjusting the height allows you to see how the layers transition. Try using 100vh!

For the rest, change everything!

top: changing the distance form the top of the page can help create a tunnel effect if you exponentially increase at each layer.

Or maybe you want a layer to just float independently and only be visible after a certain amount of scrolling, here's where you can do that easily.

width: notice that the width are all 100%. That is 100% relative to the wrapper, which is 100vw. So as you get further away from the base, 100% does actually get smaller.

Keeping 100% helps with the tunnel but maybe you want a rising horizon that spans the whole page, change that here and you don't have to worry about overflow as the wrapper hides the horizontal scroll already.

color is pretty self-explanatory here but tinker away with color and opacity even. Using like colors that vary slightly in shad can help create the illusion of distance as things lose vibrancy in the distance.

.parallax-layer.layer2 {
  top: 2rem;

  width: 100%;
  height: 110rem;

  background-color: olive;
}

.parallax-layer.layer3 {
  top: 10rem;

  width: 100%;
  height: 100rem;

  background-color: plum;
}

.parallax-layer.layer4 {
  top: 50rem;

  width: 100%;
  height: 100rem;

  background-color: yellow;
}

.parallax-layer.layer5 {
  top: 75rem;

  width: 100%;
  height: 100rem;

  background-color: lightBlue;
}

After examples:
https://speckyboy.com/css-javascript-parallax-scrolling/

To better understand 2.5D sometimes it can be helpful to learn more about 3d rendering.

https://codepen.io/ewahda/full/OwEGyV

Extremely helpful though advanced source:
https://blog.logrocket.com/create-parallax-scrolling-css/#scaling-design

Getting the Git

rcblake — Fri, 09 Jun 2023 18:48:46 +0000

Git has been developed back in 2005 and today is the most commonly used VCS that is used by almost all development teams that require to version and archive their source code. In today’s article, we are going to cover a few of the most common Git errors and discuss how you can potentially avoid or fix them.

fatal: not a git repository (or any of the parent directories)

This is one of the most common errors, especially for newcomers to Git. Let’s suppose that you want to run git status in a particular directory:

$ git status fatal: not a git repository (or any of the parent directories): .git

The error indicates that the command cannot be executed because the current directory is not a Git directory. Usually, there are two main reasons why you might be getting the error.

You either forgot to initialize the repository as a Git repository using git init
or you are probably in the wrong directory. You can check your current work directory using pwd. It’s quite common for people to forget to change the directory when cloning a Git repository.

fatal: refusing to merge unrelated histories
Another very common error after git pull or git merge is the one shown below:

fatal: refusing to merge unrelated histories

This usually can happen mainly for two reasons

The .git directory got corrupted. This hidden directory contains information relevant to your project that is being version controlled (for example, information about commits, remote repositories, etc.). If the directory is corrupted, git is unaware of the local history and thus the error will be reported when trying to push or pull to/from a remote repository.
You are trying to pull from a remote repository that already has commits while you have also created a new repository locally and added commits as well. In this case, the error will be reported since Git is unaware of how these two are related (they are pretty much interpreted as two distinct projects).

If this is the case, then you need to provide the --allow-unrelated-histories flag. For example,

$ git pull origin master --allow-unrelated-histories

There’s also a chance of getting this error when trying to rebase and requires different treatment.

$ git rebase origin/QA fatal: refusing to merge unrelated histories Error redoing merge game_text_edit_pt2_pt1_final_final_final

The process of combining commits to a new base commit is called rebasing. In other words, rebasing simply changes the base of the branch to a different commit so that it appears as if you have created the branch from that particular commit.

When git rebase fails with this error rebase does not get aborted but is still in progress. Instead, you can actually intervene manually.

$ git status interactive rebase in progress; onto game_text_edit Last command done (1 command done): pick pt2_pt1_final_final_final test merge commit

To solve the issue you first need to merge and commit, and finally force rebase to continue:

$ git merge --allow-unrelated ORIGINAL_BRANCH_THAT_WAS_MERGED --no-commit $ git commit -C ORIGINAL_MERGE_COMMIT $ git rebase --continue

fatal: Unable to create ‘.git/index.lock’: File exists

When a git process crashes in one of your Git repositories you may see the error shown below when you attempt to run a git command:

fatal: Unable to create '/path/to/.git/index.lock': File exists.

If no other git process is currently running, this probably means a git process crashed in this repository earlier.

If no other git process is running, you can quickly fix this by manually removing the file:

$ rm -f .git/index.lock

error: pathspec did not match any file(s) known to git

Usually, when you create a new branch using say the web UI of GitHub and go back to your local terminal to checkout to the branch using

$ git checkout mybranch

you may get this error

error: pathspec 'mybranch' did not match any file(s) known to git.

This usually means that your local repository is not up to date with the latest information for the remote Git repository. To fix the issue you simply need to fetch the information for the newly created branch:

$ git fetch
Now git checkout should work fine.

This is not an exhaustive list but

Flexing your Flex skills

rcblake — Fri, 19 May 2023 18:07:17 +0000

Getting started in CSS can feel extremely daunting with all of the options in colors and shapes and animations and events and, and, and....

Before you can get to all that cute stuff, it can be really helpful to at the most basic level get the shapes on the page that you're looking to create.

Flexbot is here to save your brain from all the math that can come with many of the templating options when building a new page. Introduced as part of CSS3 in 2017 this great Display option for getting started and comfortable with how pages are read in CSS.

There are three pieces of the Flexbot tool that make getting started extremely simple:

Flex Container: This is the parent container. Attributes you assign to this will change how the elements within this element are displayed.

Flex Item: The child element. Attributes assigned here will affect how the item displays within the rules of the container.

Flex Direction: This is a container attribute to set flow of the items. The two most common and helpful for getting started are Row and Column.

Starting with an empty page, let's block out the highest "items" on the page "container". At this stage I've got a mock of how I would like the site to look in the end in the example here.

Most web page directions at their highest level will be "column". Even here with all of the different elements, you can see that in it's most basic form, the parent elements are stacked on top of each other vertically. "Most Popular" is stacked on "All Products"

So immediately we know in CSS

.page {
display:flex;
flex-direction:column;
height: 100vh
width:100%
}

You'll still need to add sizing. As this is the full page and I don't want sideway scroll so I've added those. vh referring to viewport height.

Now that we have the container, let's start building the items. Using the example:

.mostPopular {
min-height:400px
flex-grow:0
flex-shrink:1
}
.allProducts {
max-height:1000px
flex-grow:0
flex-shrink:2
}

We can set the sizes but flex items will try to grow into a space so sizing is critical at this stage. The attributes I want to call out specifically are flex-grow and flex-shrink.
Setting to zero says you don't want that element to grow/shrink in the direction related to the parent, and the higher the number affects the priority of the element to grow/shrink. In the example, I don't want the elements to grow at all, but if they need to shrink they can, but I want .appProducts to shrink first before .mostPopular starts shrinking vertically.

You're all set with this first step and now you can move onto each of those elements as the containers, and the child elements as the items.

For each element you're looking to get on the page, ask yourself 3 questions:

What element should be the most top and the most left in the container.
Who are the siblings?
Should those siblings be in a column or a row?

I recommend starting from the highest level first but you can it can also be really helpful, when you are working with many small children, to think about their grouping as the basis and work your way up.

Happy Flexing!

I flipped when I saw these cards!

rcblake — Fri, 28 Apr 2023 07:39:58 +0000

Sometimes I just can't help myself when I see something shiny. I want to know all about it and that is no different in my new engineering life. Before I got started with my bootcamp I had some required learning to do before I can officially be admitted to the cohort.

While the required learning was already pretty solid, I couldn't help but start exploring how other sites function. The final piece of the prep work was to build my own site. I kept a few things and snippets I had found over the week that I found cool but most were WELL above my understanding at the time. That's when I stumbled on some awesome detail cards that reminded me of what you would see in a work training. Picture on the front, and on the click, the image flips around to provide detail on whatever the topic was.

I checked out the code and I understood it!...well...for the most part. There were definitely new words but after a little research I could stumble through the definitions on my own and just had to try it out.

I would love to say that it didn't take long but it took HOURS to get the first time. I wanted to make sure I actually understood the why of each line I was writing. The HTML was complicated and lots of layers of divs. Once I got a grasp of their function, I could move on to the text and then the CSS.

Check them out!

<div class="flipCard">
   <div class="flipCardInner">
       <div class="flipCardFront">
           <img id="sloth1" class="slothPics"
                              src="https://www.edgeofexistence.org/wp-content/uploads/2017/06/Bradypus-pygmaeus_2_Bryson-Voirin-1000x667.jpg"
alt="Pygmy Three-toed Sloth haning on a branch"
title="Pygmy three-toed sloth (Bradypus pygmaeus)">

        </div>
        <div class="flipCardBack">
           <h4>Pymy Three-toed Sloth</h4>
           <h5>(Bradypus pygmaeus)</h5>
            <p>
                Classified as critically endangered, pygmy
                three-toed sloths are native exclusively to 
                the island of Escudo de Veragua, off the
                Caribbean coast of Panama. The species is 
                notably smaller than other species of sloths.
            </p>
       </div>
   </div>
</div>

I broke this A LOT. Unintentionally mostly but a couple of times just to know why it needed all of this.

The card looks like one piece but it's three! Four if you count the div that holds it all together.

.flipCard encompasses everything related to that single card. If you were to cut out that space and flip it over within the page, you'd see through the paper to whatever is behind it. The parent div allows you to style that space too.

.flipCardFront is pretty self-explanitory. In my example it only has one child element but that's not a requirement. It will house anything that you'd like visible before any interaction with the card.

.flipCardBack is essentially the same as the front. This will be the parent for anything you'd like to see after the interaction and flip.

.flipCardInner is where the real magic is. The HTML is empty but the CSS is where you will see this important piece. Also notice that it's the parent for both of the previous divs. Imagine the front card and back card are in the center of a piece of paper. This div is what you'll attach your actual transitions to.

Now let's take a look at the CSS behind it.

.flipCard {
  background-color: transparent;  <-----This is that space 
  width: 400px;                        behind the card
  height: 275px;
  perspective: 500px;            <-----This handles the depth
  margin-inline: auto;                 of the card spin. The 
  padding-bottom: 35px;                lower the number, the 
  }                                    more intense that 3D 
                                       moment is. Play around!
.flipCardInner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;     <-----timing of the flip 
  transform-style: preserve-3D; <-----avoids front being both       
  -webkit-column-break-inside: avoid;                    sides
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flipCard:hover .flipCardInner {
  transform: rotateY(180deg);   <-----the actual flip name
}                                     :hover is the event here

.flipCardFront, .flipCardBack {
  position: absolute;
  width: 400px;
  height: 275px;
  -webkit-backface-visibility: hidden;<-keeps you from seeing 
  backface-visibility: hidden;          the backs of the cards
  margin: 0px;
  border-radius: 10px
}

.flipCardFront {
  background-color: #bbb;
  color: black;
}

.flipCardBack {
  background-color: #203f27;
  color: white;
  transform: rotateY(180deg);  <---counterintuitive, but needs 
 }                                 to be separate from the 
                                   above section

This was so fun to build and play with. I've called out the lines that are vital to performance but you should absolutely make every line your own and tinker with everything!

Check out my sample live!
https://rcblake.github.io/my-personal-website/

Maybe let's change it up?

rcblake — Fri, 28 Apr 2023 06:43:45 +0000

I'm usually not much into blogging or journaling but my friends are getting a little tired of me showing them my every little cool new thing that I learn in class or after going down a rabbit hole of nerdy dev things.

Ever since I started at my first startup in 2014, I've had a general curiosity and interest in Dev. Specifically in front-end development, even though I definitely didn't know what it was called back then. I was hired on the customer support team at a fintech startup that had just taken over the stock/finance section of AOL and they were woefully unprepared for the volume of tickets coming in. The site had smooth lines and colorful which was the antithesis of the original AOL site that was basically just a Windows 95 Excel spreadsheet slapped onto a page.

The AOL customers were LIVID!

I spent my days answering hundreds of tickets teaching people with lower computer experience that even though the design may be different, the function was the same. The new 300K users also put a lot of strain on the features so I was also acting QA as the lone person on that team couldn't handle the amount of work needed to decipher what was truly broken and what was just burdened by the traffic.

I fell in love with the problem solving. And while the code itself was still gibberish to me, I took advantage of any opportunity to listen to the engineers talk about the many changes coming to the site and how it was being done. Jump to 10 years later, and I've moved my way up through customer success at some of the largest names in tech but as a program manager, I got to do a lot more technical work and planning and it really reminded me how much I want to deeper into the magic of making these sites.

Now I've stepped away from my role, and am taking those first steps into my new career path!