ജീവിതം

28 April 2023

പോയകാല വസന്തങ്ങളെയും
വരുവാനുള്ള ശിശിരങ്ങളെയും
ഞാനോർക്കാറില്ല.
ഈ നിമിഷത്തിന്റെ
ആഴപ്പരപ്പുകളിൽ സ്വയമറിയാൻ
ശ്രമിക്കുന്നതിലുപരി
വേറെന്താണീ ജീവിതം.

നീ

25 April 2023

എഴുതിയതേറയും നിന്നെക്കുറിച്ചായിരുന്നു
വേദനിച്ചതേറയും നിന്നെക്കുറിച്ച്
തന്നെയായിരുന്നു.

Buri farm

31 March 2023

In the early morning, my brother and me went to visit a local farm. Here are the few snaps from there.

Food festival in Bahrain

18 March 2023

In the evening I went Bahrin food festival with my Brother and family. The vide was good, food and music are awesome.

Directory Objects in PL/SQL

2 March 2023

This view describes all directories accessible to the user.

SELECT * FROM ALL_DIRECTORIES;

This view describes all directories specified for the entire database.

SELECT * FROM DBA_DIRECTORIES;

To view all the tables details, look here.

References

Oracle Doc

What is CSS Modules?

2 March 2023

In CSS modules, CSS class names and animation names are scoped locally by default. In React you can use the file naming conversion as [file name].module.css. This let the React and Webpack know that you are using CSS Modules.

Importing the CSS in the file.

import nameyoulike from './name.modules.css';

Calling the style in the file.

<button className={styles.button} />
References

Styled Components Doc

What is Styled Components?

2 March 2023

Styled-components is a CSS-in-JS library that enables you to write regular CSS and attach it to JavaScript components. With styled-components, you can use the CSS you’re already familiar with instead of having to learn a new styling structure.

Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components.

References

Styled Components Doc

Difference between React and ReactDOM

25 February 2023

React and ReactDOM are two distinct libraries that are commonly used together in the development of web applications with React.

React is a JavaScript library focused on building user interfaces. It follows a declarative approach, where developers define what the UI should look like based on the current state of the application. React then efficiently updates and renders components as the state changes. Its design emphasizes flexibility and efficiency, making it a popular choice for developing both web and mobile applications.

ReactDOM, on the other hand, serves as a bridge between React and the DOM (Document Object Model). The DOM is a hierarchical structure representing the HTML content of a web page. ReactDOM provides a set of methods that enable React components to be rendered and updated within the DOM. It ensures that the user interface is synchronized with the underlying HTML structure.

In summary, React is a library for building user interfaces, while ReactDOM handles the interaction with the DOM, rendering React components onto the web page. Although they are often used together, they serve different purposes and can function independently of each other.

Conditional Rendering

22 February 2023

Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operators.

&& operator

{ isYes && <A />}

? : operator

isYes ? Yes() : No()
  • In React, you control branching logic with JavaScript.
  • You can return a JSX expression conditionally with an if statement.
  • You can conditionally save some JSX to a variable and then include it inside other JSX by - using the curly braces.
  • In JSX, {cond ? <A /> : <B />} means “if cond, render <A />, otherwise <B />.
  • In JSX, {cond && <A />} means “if cond, render <A />, otherwise nothing”.
  • The shortcuts are common, but you don’t have to use them if you prefer plain if.
References

React Doc