Going back to your roots

JARVUC — Fri, 13 Nov 2020 02:52:42 +0000

Let's get started!

It's 2020 and you just lost your job due to the pandemic. You had your hopes up to find a new job but nothings coming. You start doubting yourself and asking what's wrong.

Guess what, You are not the problem! We are in crisis and we have our own ways to deal with it.

The majority of us is loved developing using frameworks, like React, Angular, etc right? ( I don't want to speak for everyone but personally I love using frameworks!)

Here's My Story

One casual and random day, my girlfriend found this awesome online course and she said, "Hey, what if you focus on honing your skills?" and she sent me the link.
I enrolled with CS50's Web Programming with Python and JavaScript and try to learn and improve my skills.

While taking the early part of the course, (I just started hehe). I realized that there's still so much to learn in HTML, CSS, and Javascript! So much to review about and hey, I started using SASS!

Took time to understand deeper on bootstrap and how to write cleaner code and minimal lines!

Things I Learned (So far!)

1. How to use Grid and FlexBox properly

Some people would say, "It's easy!" or "What a basic!". Okay and this is not for you, I guess.

There's this layout that you really want to follow.
Ask yourself:

one-dimensional ~ row OR columns?

multi-dimensional ~ row AND columns?

Once you figured that out, everything comes smoothly.
and also, you can use both FlexBox and Grid and even nest them if you want to!

2. Selecting Selectors in CSS!

There are 5 categories to select that element you want to modify!

Simple Selectors

These are the class, id, or element name! It is the common selector that everyone use to style, the element.

* { }  //Universal Selector 
div { } //element name 
.class { } //class 
#id { } //id

Combinator Selectors

This is a way to make use of the relationship between the selectors. There are 4 combinators you can utilize in css.

General Sibling Selector (~)
child selector (>)
adjacent sibling selector (+)
descendant selector (space)

General Sibling Selector ( ~ )

If you want to select the sibling element of one certain element, you can use this selector.

Example:

div ~ p {}

This will select the p tag as long as it's a sibbling of the div tag.
Take note that this will not select the div tag's children.

Child Selector ( > )

Do you want to select the child element of a certain element? You can use the child selector!

Example:

div > h1 {}

This will select the h1 that's a child of the div. That's pretty straightforward.

Adjacent Sibling Selector ( + )

To understand this, we first need to know the meaning of adjacent. Adjacent means "next to or adjoining something else."

With that, using the adjacent sibling selector will find the sibbling element that's immediately following.

To understand better here's an example:

div + p {}

The CSS snippets will find the p that's immediately following or next to div. They must have the same parent.

Descendant Selector

This selector will find the descendant of a specified element.

Example:

div span h1 {}

The snippet will find and select all the h1 inside the span inside the div.

Pseudo-Classes

A pseudo-class is added to a selector that specified a state of the element. A common example is :hover. When a mouse pointer hovers on a element, a certain style will be applied.

Example

button:hover {
 color: red;
}

The button's color will change to red when a mouse hovers it.

Pseudo-Elements

A pseudo-element is used to style a specific part(s) of an element.
For starters, it can be used to style the first letter or line of an element, or if you want to add content before or after an element.

a::before {
 content: "check this out";
}

<a href="#"> Coding Tips! </a>

The content "check this out" will be added before the "Coding Tips!" How fun is that!

If you want to style the first letter? you can do something like this:

h1::first-letter{
 color: red;
}

This will change the first letter of the h1 to the color red.

Attribute Selectors

There's a nice way to select a specific element with a specific attribute, and yes it is possible!

Example:

button[type="submit"] {}

This will select the button with an attribute type="submit"

3. Sass: Syntactically Awesome Style Sheets

Sass made my css style very "sassy",

What is SASS?

Well, according to sass-lang.com, It is the most stable, and powerful grade css extension language in the world.

It's very fun and easy to use! You can install it using node and viola! You can play around and use it in your projects. There many ways to utilize sass.

You can check their site and documentation to learn!

SO FAR ...

before advancing,

Make sure you are familiars with your roots, and other get to know the basic language, tools and etc... This will make your life as a coder much easier, and you will understand advance tools and technologies like a cakewalk.

That's all and what do you want to know next? I'm open for a conversation of you guys want to discuss or add your "roots" before advancing to the next level.

Should we ditch Redux for Context Hook?

JARVUC — Wed, 18 Dec 2019 09:37:05 +0000

Is context gonna end Redux's career?

With the React Hooks, problems are being solve! To use the hooks, we need to develop our app using functional components. We don't need to install additional package just to handle global states.

Example of functional component

function app(){
 return ()
}

But is the Context hook enough to bury the Redux for good in the near future?

What would be the advantage of Redux and Context?

It would be awesome if we could discuss it here. Opinions are welcome!

I prefer Reducer hook over State hook, here's why

JARVUC — Wed, 18 Dec 2019 02:34:54 +0000

I've been using State for most of my projects, even created a reusable State method. The State Hook is one of the few basic react hooks that both new react developers (including myself) and veterans uses.

Let's have recap

If you're not familiar with what I'm talking about, here's what the State hook looks like in code.


import React from 'react'

export default () => {
  const [state, setState] = React.useState('')
  return ()
}

Recently, I bumped into Reducer Hook while exploring the wonders of react. It is an alternative for the State Hook. If you're familiar with redux, it is the inspiration for the Reducer Hook.

What is the Reducer Hook?

The Reducer hook accepts a (state, action) and returns a new state paired with a dispatch.

Here's how it goes:

//the initial state to be passed into the Reducer
const initialState = ''

//The reducer function
function reducer(state, action){
  switch(action.type){
    case 'SAY_HELLO':
     return 'HELLO'
    case 'SAY_HI':
     return 'HI'
    default:
     return 'default'
  }
}

//main app
export default app(){
  const [state, dispatch] = React.useReducer(reducer, initialState)
}

I'm getting off topic, this post is about the reasons why Reducer hook over State hook.

WHY I LOVE THE REDUCER HOOK

The Reducer hook can manage complex state shapes like objects or arrays.


const [state, dispatch] = useReducer(reducer, {
  users: [
    {
      name: 'Naruto',
      village: 'leaf',
    }
  ]

})

Plus all the logic is in one reducer.

It's pure function! So it doesn't depends on react.
This hook can be easily managed and to organize, and looks soooooooo damn good, well at least in my opinion
It's easier to test. As I said earlier, It is a pure function. This means this hook doesn't depend on react.

Well I'm not suppose to give my opinion, but give the Reducer Hook a try.

But don't worry State hooks, there's no reason to ditch you and I still appreciate you being here.

DEV Community: JARVUC

Going back to your roots

Let's get started!

Here's My Story

Things I Learned (So far!)

1. How to use Grid and FlexBox properly

2. Selecting Selectors in CSS!

Simple Selectors

Combinator Selectors

General Sibling Selector ( ~ )

Child Selector ( > )

Adjacent Sibling Selector ( + )

Descendant Selector

Pseudo-Classes

Pseudo-Elements

Attribute Selectors

3. Sass: Syntactically Awesome Style Sheets

What is SASS?

SO FAR ...

before advancing,

Should we ditch Redux for Context Hook?

Is context gonna end Redux's career?

I prefer Reducer hook over State hook, here's why

Let's have recap

What is the Reducer Hook?

WHY I LOVE THE REDUCER HOOK

Well I'm not suppose to give my opinion, but give the Reducer Hook a try.