DEV Community: TANITOLUWA IFEGBESAN

StyleX - The new Game changer?

TANITOLUWA IFEGBESAN — Wed, 13 Dec 2023 05:50:37 +0000

Overview:

StyleX, the dynamic styling system empowering Facebook, WhatsApp, Instagram, and other Meta companies, is a revolutionary game-changer. Its distinctive approach involves employing styling at a component level, offering unparalleled flexibility.

The primary objective is to facilitate local styling, allowing each file to be individually styled without redundant code. This approach emphasizes making essential changes while preventing style conflicts through a rule that prioritizes the last defined style.

Installation and Setup:

Now, let's dive into the practical side. To install StyleX, execute the following command:

npm install --save @stylexjs/stylex

For development, tweak your babel.config.js file by incorporating the following code:

// babel.config.js
import styleXPlugin from '@stylexjs/babel-plugin';

const config = {
  plugins: [
    [
      styleXPlugin,
      {
        dev: true,
        test: false,
        unstable_moduleResolution: {
          type: 'commonJS',
          rootDir: __dirname,
        },
      },
    ],
  ],
};

export default config;

StyleX also provides plugins for Webpack, Rollup, and Next.js. In local development, install the dev runtime as a dev dependency:

npm install --save-dev @stylexjs/dev-runtime

Catch mistakes with ESLint using:

npm install --save-dev @stylexjs/eslint-plugin

Modify your .eslintrc.js file accordingly:

module.exports = {
  plugins: ["@stylexjs"],
  rules: {
    "@stylexjs/valid-styles": ["error", {...options}],
  },
};

Styling:

StyleX employs an expressive JavaScript API similar to working with inline styles in React DOM or styles in React Native.

Constraints:

As StyleX relies on ahead-of-time compilation, ensure that your styles are statically analyzable. Raw Style Objects should only contain plain object literals, string literals, number literals, array literals, null or undefined, constants, simple expressions, and built-in methods. Arrow functions are allowed for dynamic styles. Avoid function calls and values imported from other modules, except for CSS Variables created using StyleX from a .stylex.js file.

Creating styles with StyleX is straightforward. Utilize the stylex.create function, import the created constants, and apply them as attributes to your elements.

Example:

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  base: {
    fontSize: 16,
    lineHeight: 1.5,
    color: 'rgb(60,60,60)',
  },
  highlighted: {
    color: 'rebeccapurple',
  },
});

const MyComponent = () => {
  return (
    <div {...stylex.props(styles.base)} />
  );
};

This example showcases the fundamental usage of StyleX. Once you grasp this, the possibilities for customization are vast.

In conclusion, I appreciate the flexibility StyleX provides, and I look forward to incorporating it into my projects.

For more in-depth information on StyleX, refer to the official documentation: StyleX Documentation. Note that the examples provided were extracted from the documentation for enhanced learning and simplified comprehension.

Customizing Your Vite Project Template: Taking the Next Step

TANITOLUWA IFEGBESAN — Sun, 10 Dec 2023 07:33:00 +0000

In our previous blog post, we delved into the fundamental structure of a Vite project. In this installment, our focus shifts to the subsequent crucial phase—customizing the default template generated by Git when running npm create vite@latest to initialize a new project. If you haven't explored the project structure yet, you can refer to this guide for a detailed breakdown: Understanding the Vite Project Structure.

The nucleus of customization lies within the src folder. This directory serves as the canvas for crafting your project's basic architecture, housing your pages, components, functions, and more.

While the src folder is pivotal, it's not the sole arena for customization. There are various other files throughout your project that you can tailor to suit your specific needs. These customizations may extend to project-related configurations, integration of specific dependencies, testing setups, or even the integration of tools like Tailwind CSS.

Here are some key areas you might consider customizing:

1. Project Structure:

src: Define the structure of your application, and organize pages, components, and utility functions within this directory.
public: Customize assets that are directly served by your application.

2. Configuration Files:

vite.config.js: Tweak Vite's configuration to align with your project requirements.

3. Dependencies and Plugins:

package.json: Manage project dependencies, scripts, and configurations.
yarn.lock or package-lock.json: Ensure consistent dependencies across different environments.

4. Styling:

styles: Adjust global styles or explore preprocessor integrations.
tailwind.config.js: Configure Tailwind CSS if you choose to use it in your project.

5. Testing:

tests: Set up and customize your testing framework as per your testing requirements.

Next Steps: Building a Basic Web Application with React

Having laid the groundwork for customization, our next adventure involves getting our hands dirty and building a basic web application with React. Take advantage of the practical insights and step-by-step guidance that will follow in our next article.

Thank you for reading this article; stay tuned for the next where we dive into the hands-on process of bringing your customized Vite project to life. Your journey into web development is about to take a more exciting turn!

Understanding the Vite Project Structure

TANITOLUWA IFEGBESAN — Sat, 02 Dec 2023 23:15:06 +0000

In our previous blog post, we delved into installing React ASAP. As promised, our journey continues into the intricate details of React, spanning from the project structure to hooks, contexts, and ultimately, Redux. Our exploration begins today with an in-depth analysis of the folder structure within a Vite application.

Project Structure Overview:

my-app
├── node_modules
├── src
├── .eslintrc.cjs
├── index.html
├── README.md
├── package.json
└── vite.config.js

node_modules:
This directory houses the folders and files of installed dependencies. Notably, these files are omitted from version control (e.g., GitHub). The analogy here is akin to a recipe book; only the description of the required modules is shared, allowing seamless reproduction on other systems using npm install.
src:
The heart of the project resides in the src folder. It serves as the workspace where application structure and components are crafted, defining the core functionality of the application.
.eslintrc.cjs:
The presence of this file signifies the configuration of ESLint, a versatile and customizable linting tool. ESLint aids in maintaining code quality by identifying and reporting on patterns in JavaScript. It acts as a proactive measure, catching issues such as undeclared variables, variable redeclarations, constant value alterations, unnecessary parentheses, and syntactic errors.

4. `index.html`:

This file hosts the root element of our application. As the entry point, the application goes to this HTML document during runtime.

5. `README.md`:

In the tradition of conventional README files, this markdown document serves to provide a comprehensive description of the project. It facilitates understanding for fellow developers, offering insights into the application's purpose and functionality, thereby minimizing the effort required to comprehend the intricacies independently.

6. `package.json`:

Functioning as the recipe book for our project, package.json encapsulates essential information. It outlines core dependencies, project scripts, and project specifications, forming a comprehensive guide for the application's structure and behavior.

7. `vite.config.js`:

This configuration file plays a pivotal role in shaping the behavior of the Vite development environment. It allows for fine-tuning and customization, providing a tailored development experience to meet specific project requirements.

In subsequent blogs, we will delve deeper into each aspect of this structure, unraveling the intricacies of Vite applications and empowering developers with a profound understanding of each component. Stay tuned for an enlightening journey through React development intricacies.

Learn React ASAP...

TANITOLUWA IFEGBESAN — Sat, 25 Nov 2023 19:24:01 +0000

GETTING STARTED WITH REACT QUICKLY AND EASILY

This is a broad overview of getting started on react, it is designed to help you jump into the waters of react as soon as possible.

React is a great Libary for the creation of web applications - frontend, it involves breaking down web applications into reusable components, which makes web development smooth and easier unlike creating web applications with Valina js where if you want to use a component in several places you have created it several time.

React also allows state management - being able to manipulate states of components in an application be it text, styles, or even elements themselves.

Join me as I delve into the intricacies of React, unlocking its potential to elevate your web development experience Welcome to a world where innovation meets simplicity, and the possibilities are boundless. Let the React adventure begin!

1. Set Up Your Environment:

Install Node.js if you haven't already, as it's required for working with React.
Use npm to install create-react-app globally by running the following command in your terminal:
```
 npm install -g create-react-app
```

2. Create a New React App:

Once create-react-app is installed, you can create a new React app by running the following command in your terminal:
```
 npm create-react-app my-app
```
Replace "my-app" with the name you want for your app.
Or you can use vite which I recommend using this command:
```
 npm create vite@latest my-app
```

3. Understand the Project Structure:

The create-react-app command will generate a basic project structure for you, including the necessary files and folders to get started.
- It’s usually in this structure in its basic form when you use create-react-app:

my-app
├── node_modules
├── public
├── src
└── package.json

It’s usually in this structure in its basic form when you use Vite and notice it has more folders:

my-app
├── node_modules
├── public
├── src
├── .eslintrc.cjs
├── index.html
├── README.md
├── package.json
└── vite.config.js

NOTE: These are all directories I’ll go into more detail on them in my next article

4. Customize Your Template (Optional):

If you want to customize the default template, you can edit and reorganize the files in the project folder. Depending on your preferences, you can also add extra dependencies, such as UI component libraries or code formatting tools.

5. Start Developing:

Once your template is set up, you can develop your React application by editing the components, adding new features, and building your desired user interface.

Stay tuned for upcoming articles where each step will be explored in detail.

You can refer to the official React documentation at react for more detailed information.dev (https://react.dev) or other online resources such as the [reeCodeCamp article (https://www.freecodecamp.org/news/get-started-with-react-for-beginners/) and W3schools

DIVING DEEP INTO THE BLOCK CHAIN TECHNOLOGY(Part 1)

TANITOLUWA IFEGBESAN — Wed, 12 Oct 2022 14:12:01 +0000

INTRODUCTION TO BLOCK CHAIN TECHNOLOGY

Block chain is a decentralized system where a list of records called blocks that store data publicly and in a sequential order without the involvement of third parties like banks, the government and other financial intermediaries during the transaction between a sender and receiver (i.e the users maintain the data and have democratic authority to approve transactions , even if one node or data on a user computer gets corrupted, the other participants will be alerted immediately, and they can rectify it as soon as possible, due to the fact every user has the same copy of the ledger).

The transactions are encrypted using cryptography inorder to protect the privacy of users and prevent data from being compromised.

How does it work?
Block chain is the combination of three important technologies: peer-to-peer network, a digital ledger and cryptography.

Peer-to-peer network is the interconnection of a large group of individuals who act as authorities to reach a consensus on transactions, among other things.

A digital ledger is where all transactions are stored, it works like a spreadsheet containing all the numerous nodes in a network and has the history of all purchases made by each node.

Cryptographic keys are two types - private key and public keys, the public key is just like your email it is used as your id while the private key is like your password only to be known by you.

The first ever blockchain protocol was proposed by David Chaum in 1982, in his Computer Systems Established, Maintained, and Trusted by Mutually Suspicious Groups.but was first popularized by Satoshi Nakamoto in 2008 and ever since then blockchain has become the to ensure the privacy of users.

On the next Episode we’ll dive deeper into the technology discussing the layers of the architecture. Thanks for reading, till then BYE😉.