DEV Community: Robert Carsten

100 Lessons, 100 Days: Day 3

Robert Carsten — Wed, 12 Aug 2020 14:39:17 +0000

Day 3

What's that saying about 'the best laid plans of mice and men'? No sooner had I started this project then I caught some kind version of a cold (definitely not the one making the news) which prevented me from getting anything working Friday. Come this week and my neighborhood has been suffering blackouts which also prevent any work from occurring.

So once I was able to finely get my cursor blinking on my IDE all I could code up was a simple Sign-up page. But instead of feeling like a failure for making one of the most common features of the internet, I decided I could be satisfied with the practice of coding up yet another sign-up page. I did want to look into using React-Hook-Form, for my form management. And after exploring it I did find their implementation of controlled forms to be compelling.

Lesson:

If Formik is your only experience with controlling forms in react, you owe it to yourself to check out react-hook-form. Using RHF's powerful useForm() hook gives you access to the main controller, error handling, submission for the form and so much more.

`import {useForm} from 'react-hook-form';

const [register,handleSubmit,errors] = useForm()
const onSubmit =  (formData)=>{     
    console.log(formdata.name)
}
<form onSubmit={handleSubmit(onSubmit)}>
    <div className='input-container'>
        <input name='name' id='name' ref={register}  
           required/>
        <label htmlFor='name'> Enter Name</label>
    </div>
</form>

By passing the register as a ref to the input that is all you need to hand control of the input over to RHF. No need for an onChange attribute or even any chunk of state to hold the data from the input.

Once you submit the form RHF will pass any data held by any input as an object to the custom function you passed to their handleSubmit function. Coming from a history of crafting my forms by hand the handleSubmit function only is a compelling reason to switch. It even obviously gives you the option to pull any field out of the form data, of course this can be replicated using react state management but this is much simpler.

I also want to flex my CSS muscles a little and wanted to work on a fancy little floating label for my form. If we take a step back and think about how to achieve an effect similar to

So we have a div with a label and input inside, simple enough. So lets start with the container by giving it a position:relative;. Moving to the label is where the secret sauce lies. We give it a position absolute, set its position to overlap with the actual label and then a transition for later

label{
    position:absolute;
    top:10%;
    left:15%; 
    transition: tranform 0.3s ease-out;
}

The final step (or what I like to call the secret secret sauce) is leveraging CSS valid and focus pseudo-selectors and the sibling selector (+). To achieve the effect all we really need is to transform the scale and translateY of the label and lower it's opacity.

input:valid + label,
input:focus + label {
    transform: translateY(-30%), scale(0.7);
    opacity: 0.8;
    transition: transform 0.3s ease-out, opacity 0.3s                  ease;
}

And that is all the coded needed for a little fancy effect for your Form.

So as simple as today's project was overcoming the multiple real life challenges just reminds me the journey to mastering can only be taken one step at a time

100 Lessons 100 Days: Day 2

Robert Carsten — Fri, 07 Aug 2020 07:00:46 +0000

Soothing Bubbles

Before I even get into the the what I actually learned about today I have to mention that my ideas for today's project started out as something wildly different. A simply app where you would click on the screen to place a particle emitter that would spray for a few seconds. Somewhere between the beginning and the end my wife caught a glimpse of the project, which was little more than pretty bubbles floating about and she became entranced by the way they danced across the screen. So I chucked my original idea in the bin and made an agile, dynamic paradigm shift(and perhaps several other buzzwords).

Lesson: Particles.js

I have made many animations in my career, from silky smooth transitions to the pulsing neon button that I swear sounded like a good idea at the time. However I have never really dipped my toe into more advanced animation on the net that the big names frameworks could provide. Wanting to start out small I turned to Particle.js to tackle first, or more specifically react-particle-js for ease of integration with the Next.js framework I had already built out.

I found the basics farely straight forward. Start with the install

npm install react-particle-js || yarn add react-particle-js

Then once imported we can use the Particle component and customize it with the params attribute to customize it.

import Particles from "react-particle-js"
const Bubble=()=>{
   return( 
     <Particles
        params={{
          background: {
            color: {
              value: '#0d47a1',
            },
          },
          particles: {
            number: {
              value: 150,
              density: {
                enable: true,
                value_area: 1200,
              },
            },
            color: {
              value: ['#E58F65', '#baf2e9', '#bad7f2', '#925e78', '#706993'],
            },
            size: {
              value: `${size}`,
              random: true,
              anim: {
                enable: true,
                speed: 5.2,
                size_min: 0.01,
              },
            },
            shape: {
              type: 'circle',
              stroke: {
                width: `${strokeSize}`,
                color: '#3fb7FF',
              },
            },
            links: {
              enable: false,
            },
          },
        }}
      />

I was surprised by the minute amount of code to get such an impressive effect. The final product uses some real basic state management to control the size of the particle and the stroke around it, which offers some pretty cool effects (my favorite is particle size of 2 and stroke size of 500)

After digging around at some the of the examples of what others have created with Particles, I know it will be a tech I revisit several times in this series.

That is all for today. You can find 100 Lessons, 100 Days at it's current home hosted by the great people at Vercel. Never Stop Coding!!!

100 lessons,100 days: Day 1

Robert Carsten — Thu, 06 Aug 2020 06:04:53 +0000

100 lessons, 100 days

Day 1

Much like countless developers before me I stared at those little green github squares that are so intrinsically linked to our self-worth as productive creators. I was facing that ever looming spectre that haunts us all "What should I work on next?"

I had a slew of little ideas that would make a fun toy application to play, but mulling them over in my head just didn't tickle that creative part of my brain. I had been recently finished a ton of research into a handful of technologies that I wanted to learn before the end of the year, so I knew whatever I picked would need to be something chunky that would covr everything.

I finally arrived on the, I won't call it a brilliant, idea that I will task myself with learning one new thing about web-development and I would do it by creating a new website every day. I needed to lay down some solid groundrules of course, nothing to restrictive

The Rules

The challenge lasts 100 days, so 100 lessons learned, and hopefully 100 websites created

Challenge runs Mon-Fri

I create a blog post describing what I learned that day

And that is it, Challenge accepted.

Lesson 1: Introduction to Next.js!

I have been hearing buzz about Next.js for sometime now, and coming from a background of pure React I was pretty interested in the features it boasted right out of the box. Today I created the 100 Lessons homepage today and just dipped my toes into the the basics of Next.js, and WOW it is a delight to work with. I love their filestructure based routing. It makes creating a SPA with client-side rendering.

I'm excited to dive deeper into Next.js and the other tech on my list.
That's all for my day 1 review, Never Stop Coding!!