DEV Community: fazuelinton

Chakra checkbox and react-hook-form

fazuelinton — Wed, 26 Apr 2023 22:54:39 +0000

My goal was to create a list of checkboxes with fixed values i.e. Nuts, Gluten, Dairy, etc.

After fetching the data and wiring it up with react-hook-form here's what I did:

import the required packages from libs



import { Controller } from 'react-hook-form';
import {
  Checkbox, 
  CheckboxGroup, 
  CheckboxProps, 
  FormControl, 
  forwardRef 
} from '@chakra-ui/react';

create a new component `CheckboxCustom`



...

type CheckboxCustomProps = CheckboxProps & { control: any; name: string; children: ReactNode };

const CheckboxCustom = forwardRef<CheckboxCustomProps, 'input'>(({ children, ...rest }, ref) => {
  rest.control;
  return (
    <Controller
      name={rest.name}
      control={rest.control}
      render={({ field: { value } }) => (
        <Checkbox ref={ref} isChecked={value} {...rest}>
          {children}
        </Checkbox>
      )}
    />
  );
});

use the custom component to render the checkboxes



<FormControl>
  <CheckboxGroup>
    <SimpleGrid columns={5}>
      <CheckboxCustom control={control} {...register('noNuts')}> Nuts
      </CheckboxCustom>
      <CheckboxCustom control={control} {...register('noGluten')}> Gluten
      </CheckboxCustom>

      ...

    </SimpleGrid>
  </CheckboxGroup>
</FormControl>

Beginners: Practicing is the most important outcome

fazuelinton — Wed, 06 Oct 2021 16:17:49 +0000

The life of a newbie programmer can be very frustrating sometimes. Getting stuck and not being able to see results early on can often make people give up.
Here's a word of hope from a fellow newbie programmer.

I was reading Giannis: The Improbable Rise of an NBA MVP, a book about Giannis Antetokounmpo's rise from poverty in Athens, Greece to super-stardom in America. As an NBA fan the whole book is amazing.

As a self-taught developer myself, one thing got me:

Giannis and his brother Thanasis bring up a video they saw on YouTube - which I didn't find -, where three men had to cut down a tree. The book mentions:

"The first man was swinging his axe hard at the tree. But after a few hours, he stopped. The second man whacked the tree for four hours, six hours, then stopped. The third man kept chopping at the tree, nonstop, refusing to quit.
The other two men were amazed that he kept at it for hours on end, but when they came closer to him, they realized the man had on a blindfold. He hadn't wanted to see his results, because if he had seen his results, he'd get discouraged. Instead, working blindfolded fostered the mentality that every time he took a swing, he believed the tree would fall."

After two years of learning how to code, being in my thirties and alternating between other responsibilities, I feel like having to chop down a whole forest almost every day. Sadly, I barely see sophisticated results such as beautiful interactive webpages or complex APIs. It can be very frustrating some days. Stare at the screen contemplating how little I did in terms of working functionalities.

If the feelings of the former paragraph resonate on you, young developer - regardless of your age -, stay strong. Things will click at some point. If they don't, it's fine too. The majority of sophisticated application will be built by a team of full time developers. You can still be an average programmer and find good paying jobs that will put you in touch with more experienced people. These people will most definitely contribute to your personal development.

There are many messages you can take from the book's quote. Analogies are usually good to simplify and talk about very complex situations - like learning difficult topics such as programming.

A few take aways to me are:

Don't put too much attention on the results of your studies. The quality of the working software you are producing while practicing doesn't matter much at this point of your journey
Make sure you are investing solid hours into practicing the right thing. Look up for fundamentals and put them into practice. Don't try to chop down all and every tree of the forest. Aim a single technology first
When you're practicing make sure that's the only thing you're doing. Four or five sessions of 25 to 50 minutes, no outside world interruptions. Every day
Stay strong

PS: Motivational blogs tend to make some people's eyes roll. It is not easy at all. The journey of becoming a developer is way harder then following a 4 bullet points magic list. Still, the excerpt from Giannis' book really touched me this morning. It connected deep with my experience. This blog is almost like talking to myself to be honest. It's been worthwhile already. I hope it gives you a slight boost as well. Don't give up!

Cover photo by Michael Benz on Unsplash

Simple text blinking animation using styled-components

fazuelinton — Sun, 09 Aug 2020 20:04:48 +0000

tl;dr

import React from 'react';
import styled, { keyframes } from 'styled-components'

function blinkingEffect() {
  return keyframes`
    50% {
      opacity: 0;
    }
  `;
}

const AnimatedComponent = styled.div`
  animation: ${blinkingEffect} 1s linear infinite;
`
const App = () => {
  return (
    <AnimatedComponent>_</AnimatedComponent>
  )
}

Issue

My app is pretty simple and I created it for learning purposes.
The user must enter a binary value and the app converts the value into a decimal number. You can try it here: https://jovial-wilson-a92dc1.netlify.app/

After adding the main functionalities I wanted to use CSS to animate the output field.
The output field must show a blinking underscore character until the user types a valid binary value

Solution

I first added styled-components to the project:

yarn add styled-components

Then I imported styled-components' styled and keyframes into my App:

import styled, { keyframes } from 'styled-components'

For keyframes to work with styled-components, I created a function outside of my App:

function blinkingEffect() {
  return keyframes`
    50% {
      opacity: 0;
    }
  `;
}

You can name the function whatever. Remembering that keyframes is a CSS concept. Keyframes controls the intermediate steps in a CSS animation.

Our animation is defined after as a styled component and it references our keyframes function blinkingEffect declared before:

const AnimatedComponent = styled.div`
  animation: ${blinkingEffect} 1s linear infinite;
`

Lastly, I created our react App which returns the AnimatedComponent and some text - that will blink according to the implementation:

const App = () => {
  return (
    <AnimatedComponent>_</AnimatedComponent>
  )
}

Conclusion

This is a pretty simple app and animation for learning purposes. I googled text-blink animation and didn't find the solution exactly, so I created this post. I hope it helps you too!

The code posted here isn't functional since you have to configure your app using create-react-app or something similar.

You can find the convert binary to decimal app code here: https://github.com/veller/app-ideas-Bin2Dec

Here's another source that helped me to get to the solution: https://github.com/styled-components/styled-components/issues/14