DEV Community: Doaa Shafik

CSS PreProcessor

Doaa Shafik — Fri, 19 Feb 2021 21:06:55 +0000

What is CSS PreProcessor?

A CSS preprocessor is a language extension for CSS.
it adds some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. it helps keep large stylesheets well-organized and makes it easy to share designs within and across projects.

There are different types of CSS preprocessors, Stylus, SASS, LESS.
We will discuss SASS, LESS and make a comparison between them.

LESS VS SASS

LESS and Sass share a lot of similarities in syntax, including the following:

Mixins: "mix-in" properties from existing styles
Variables: Shared code between styles
Parametric mixins: Classes to which you can pass parameters, like functions
Nested Rules: Classes within classes, which cut down on repetitive code
Operations: arithmetic operations within CSS
Color functions: Edit your colors
Namespaces: Groups of styles that can be called by references
Scope: Make local changes to styles
JavaScript evaluation: JavaScript expressions evaluated in CSS

For More Info... check
Less Docs
SASS Docs

SASS

Installation
Depend on the operating system You use
Install/SASS

PROS

1- You are able to declare functions with Sass as regular functions


 @function invert($color, $amount: 100%) {
   $inverse: change-color($color, $hue: hue($color) + 180);
   @return mix($inverse, $color, $amount);
 }

2- Sass simplifies minifying CSS files by offering a one-line command that will output a minified version
sass input.scss:output.css --style compressed

3- Rather than being limited to editing the outputted CSS file in dev tools, with source maps you are able to manipulate the original .scss file
To enable source map
sass style.scss:style.css --sourcemap

CONS

1- To compile Sass, it needs either Ruby or libSass installed locally.

2- There is many unnecessary characters when using the SCSS syntax.

LESS

Installation

Less is written in JavaScript so you will need Node.
1- On Linux and Mac,
Then Install npm install -g less
To Compile it lessc styles.less styles.css

2- On Windows, you will need to install the NodeJS installer.
Then Install npm install less
To Compile it lessc styles.less styles.css

PROS

1- The LESS syntax is essentially the same as CSS with extensions for dynamic behavior such as variables, mixins, operations, and functions.


 @color: #4D926F;
 #footer {
   color: @color;
 }
 h2,
 h1 { 
   color: @color;
 }

2- Less has detailed and well-organized documentation

CONS

1- The '@' symbol is used with Less to declare variables.
However '@' already has meaning in CSS, as it is used to declare @media queries and @keyframes. This can result in some confusion when reading the code

2- Less currently has limited support of conditionals such as ternary operators

3- Less does not offer custom functions like SASS and instead requires the use of Mixins

Your Feedback Appreciated.

Formik vs React-hook-form Cases Part II

Doaa Shafik — Mon, 08 Feb 2021 13:25:46 +0000

Nested Arrays

react-hook-form handle it with useFieldArray.

formik handle array fields with FieldArray

Nested Array Validation

react-hook-form by default validate input inSubmit only.
To enable it on other events, you need custom changes.
see trigger.

formik by default validate input in all events.

Integrate with Material UI

react-hook-form we can integrate external controlled components like react-select with Controller

formik you can render external controlled component by itself. Look at example

Formik VS React Hook Form Part I

Doaa Shafik — Sun, 07 Feb 2021 10:29:56 +0000

Front End Engineers work a lot with forms and with the complexity of apps we need powered forms to help us managing the form state, form validation with nested levels, form verbosity.
Formik comes to solve all these problems.
Now we have a new library React Hook Form was released to compete.

Module Composition

Formik has nine dependencies

React Hook Form has no dependencies

How easy is it to solve complex form constructs?

For Complex Features "Nested array" or "nested objects"
Formik handles it perfectly with validation on different events like onblur - onchange.

react-hook-form handle it but the validation of nested fields with "onblur" or "onchange" needs some works.

For simplicity, I see formik win cause it handles more stuff behind without the need to add it by yourself.

Controlled & UnControlled Component

Formik support Only Controlled Component but React-hook-form support both of them.

Controlled Component

is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component.
Controlled Component with RHF
Controlled Component with Formik

Uncontrolled Component

is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it.

feature	uncontrolled	controlled
one-time value retrieval (e.g. on submit)	✅	✅
validating on submit	✅	✅
conditionally disabling submit button	❌	✅
several inputs for one piece of data	❌	✅
dynamic inputs	❌	✅

Re-Rendering

We want to avoid unnecessary re-render cycles as much as possible, as this could lead to major performance issues as an app grows.

Dependent Fields

With React Hook Form watch Function help you to watch specified inputs and return their values to determine what to render.

With Formik watching all fields enabled by default so you can remove or add fields depend on values prop.

Events

With React Hook Form Read Form Values inside events.

note: getValues() will not trigger re-renders or subscribe to input changes.

With Formik you can read form values with values prop.

Summarize

feature	formik	react-hook-form
Size	12.6kB	5.2kB
Weekly Downloads	1,314,511	638,419
Dependencies	9	0
Open Issues	498	6
React Native	✅	✅
TypeScript	✅	✅
Class components	✅	❌
Clear documentation	✅	✅
Yup integration	✅	✅

Compare Both with Examples, See Formik VS React Hook Form Part II