DEV Community: Awais Abbas

Protecting Your JavaScript Code: The Principle of Least Exposure

Awais Abbas — Tue, 04 Jul 2023 03:17:54 +0000

When it comes to programming in JavaScript, it's vital to prioritize the protection of your code. A fundamental principle that plays a key role in ensuring code security and integrity is the Principle of Least Exposure. By adhering to this principle, developers aim to minimize the exposure of sensitive data and functionality, allowing access only to what is necessary. This approach effectively reduces the risk of vulnerabilities and shields applications from potential security breaches.

The Principle of Least Exposure encourages developers to adopt a "need-to-know" approach at its core. Instead of granting unrestricted access to variables, functions, or objects, access should be restricted to what is essential for intended functionality. This approach significantly reduces the potential attack surface, lowering the likelihood of unauthorized manipulation or data leaks.

To gain a better understanding of how the Principle of Least Exposure can be implemented in JavaScript, here are some practical examples:

Encapsulation and Data Hiding:

JavaScript offers various techniques for encapsulating data and concealing implementation details. One commonly used approach involves utilizing closures to create private variables and functions within an inaccessible scope. By encapsulating sensitive data within closures, direct access is prevented, ensuring that data can only be accessed through defined public interfaces.

Consider the following example:

function Counter() {
  let count = 0;  // private variable

  return {
    increment() {
      count++;
    },
    getCount() {
      return count;
    }
  };
}

const counter = Counter();
counter.increment();
console.log(counter.getCount());  // Output: 1
console.log(counter.count);        // Output: undefined (private variable)

In the above example, the count variable is concealed from direct access, and the increment and getCount functions serve as the only means to manipulate or retrieve the count value.

Restricting Access to Sensitive Operations:

Another crucial aspect of the Principle of Least Exposure involves limiting access to potentially harmful operations. For example, when dealing with network requests or manipulating the DOM, it's essential to grant access only to trusted entities.

Let's consider an example involving fetching data from a server:

function fetchData(url) {
  // Perform some validation or authorization checks before making the request

  return fetch(url)
    .then(response => response.json())
    .catch(error => console.error('An error occurred:', error));
}

In this scenario, it is recommended to conduct checks before making a network request to ensure that the user possesses the necessary permissions or that the URL originates from a trusted source. By diligently controlling access to such operations, the risk of unauthorized actions that could compromise your application's security is significantly reduced.

Utilizing Proper Access Control:

JavaScript frameworks and libraries often provide mechanisms for implementing access control. These mechanisms enable developers to define user roles or permissions and restrict access to specific functionality based on those roles.

Consider the following pseudocode, which demonstrates the concept of access control:

// Imagine some roles. In real world these will be coming from server or stored jwt.
const userRoles = ['admin', 'user'];

function deleteUser(userId, currentUserRole) {
  if (currentUserRole === 'admin') {
    // Delete the user
  } else {
    throw new Error('Access denied. Only administrators can delete users.');
  }
}

deleteUser('123', 'user');  // Throws an error

In this example, the deleteUser function verifies the user's role before executing the delete operation. If the user's role is not 'admin', an error is thrown, thereby preventing unauthorized access.

Collision Avoidance

Another important aspect related to the Principle of Least Exposure is collision avoidance. In JavaScript, collision avoidance refers to the practice of minimizing the likelihood of naming conflicts or collisions between variables, functions, or objects.

To avoid collisions, consider the following strategies:

Namespace Management:

JavaScript doesn't have built-in namespace support, but you can simulate namespaces using objects. By organizing your code within unique namespace objects, you can reduce the chances of naming conflicts with other code modules or libraries.

// Namespace example
const MyNamespace = {
  variable1: 10,
  variable2: 'Hello',
  function1: function() {
    // Code here
  },
  // Other properties and methods
};

By encapsulating your code within the MyNamespace object, you create a separate context where your variables and functions reside, reducing the risk of naming collisions.

Proper Variable Scope:

JavaScript has function-level scope and block-level scope with the introduction of the let and const keywords. It is good practice to limit the scope of variables to the smallest possible context where they are needed. This approach minimizes the chances of accidental variable overwriting or conflicts.

function calculate() {
  const result = 0;  // Local variable within the function

  // Other code

  return result;
}

const result = calculate();  // Global variable with a different name

In the example above, the result variable is locally scoped within the calculate function, preventing conflicts with other variables in the global scope.

Modularization and Bundling:

When working with larger JavaScript projects, modularization and bundling tools, such as Webpack or Browserify, can help avoid collisions. These tools enable you to split your code into smaller modules and bundle them together. By keeping related code within separate modules, you minimize the chances of naming conflicts and make your code more maintainable.

// Module 1
export function add(a, b) {
  return a + b;
}

// Module 2
export function subtract(a, b) {
  return a - b;
}

// Main file
import { add } from './module1';
import { subtract } from './module2';

console.log(add(5, 3));       // Output: 8
console.log(subtract(10, 2)); // Output: 8

Final words

Remember, prioritizing security is crucial in today's digital landscape. By following the Principle of Least Exposure, you not only protect your code from malicious attacks but also contribute to building a more robust and trustworthy software ecosystem. So, embrace this principle and ensure that your JavaScript code remains secure and resilient.

Choosing the Right CSS Naming Convention for Your Project

Awais Abbas — Mon, 03 Apr 2023 15:25:38 +0000

When it comes to naming CSS classes, there are several different conventions that developers use. In this post, I will discuss some of the conventions I use and others that are commonly used in the CSS community.

1- BEM (Block Element Modifier): BEM is a naming convention that helps developers write structured and organized CSS code. It divides UI elements into separate blocks, elements, and modifiers to create clear and maintainable class names. BEM is a popular convention that many developers prefer for its clear and structured naming scheme.

<div class="block">
  <div class="block__element">
    <div class="block__element--modifier"></div>
  </div>
</div>

.block { /* block styles */ }
.block__element { /* element styles */ }
.block__element--modifier { /* modifier styles */ }

In this example, the "block" class represents a standalone component, while the "block_element" class represents a part of that component. The "block_element--modifier" class is used to modify the appearance or behavior of the element.

2- SMACSS (Scalable and Modular Architecture for CSS): SMACSS is another naming convention that helps create scalable and maintainable CSS code. It categorizes CSS into five categories: base, layout, module, state, and theme. Each category has its own naming conventions, which can help to create clear and organized CSS code.

<div class="layout">
  <div class="module">
    <div class="state"></div>
  </div>
</div>

.layout { /* layout styles */ }
.module { /* module styles */ }
.state { /* state styles */ }

Here, the "layout" class represents the overall layout of the page, while the "module" class represents a specific UI component. The "state" class is used to represent different states that the component can be in, such as "active" or "disabled".

3- Atomic CSS: Atomic CSS is a naming convention that breaks CSS styles down into smaller, atomic classes that can be combined to create more complex styles. Each class represents a single property or attribute, such as "text-center" for center-aligning text or "bg-blue" for setting a blue background color. Atomic CSS can make it easier to create consistent and reusable styles, but it can also lead to a large number of classes in your HTML code.

<div class="text-center bg-blue p-2">
  <p class="text-white">Hello World!</p>
</div>

.text-center { text-align: center; }
.bg-blue { background-color: blue; }
.p-2 { padding: 2px; }
.text-white { color: white; }

In this one, each class represents a single property or attribute that can be combined to create more complex styles. The "text-center" class is used to center-align text, while the "bg-blue" class is used to set a blue background color. The "p-2" class sets a padding of 2 pixels, and the "text-white" class sets the text color to white.

4- OOCSS (Object-Oriented CSS): OOCSS is a naming convention that aims to create reusable, object-oriented CSS code. It's based on the idea of separating UI elements into separate objects, which can then be reused across different parts of the website. OOCSS encourages the use of abstract, reusable classes and avoids styling specific elements directly.

<div class="button">
  <span class="button__label">Click me</span>
</div>

.button { /* button styles */ }
.button__label { /* label styles */ }

Here, the "button" class represents a reusable UI component that can be used across different parts of the website. The "button__label" class represents a specific part of the component and can be reused across different instances of the component.

5- Utility Classes: Utility classes are classes that are designed to perform a specific task, such as setting the font size or changing the color of text. They are often used in conjunction with other naming conventions, such as BEM or Atomic CSS, to create reusable and consistent styles.

<div class="bg-blue text-white p-2">
  <p class="text-center">Hello World!</p>
</div>

.bg-blue { background-color: blue; }
.text-white { color: white; }
.p-2 { padding: 2px; }
.text-center { text-align: center; }

In this example, each class represents a specific utility, such as setting a blue background color or center-aligning text. These classes can be combined to create more complex styles, and can be reused across different parts of the website.

While each convention has its own advantages and disadvantages, the most important thing is to choose a convention that works best for you and your team's needs.

Creating Dynamic form in React

Awais Abbas — Fri, 17 Feb 2023 04:37:04 +0000

In a React app, you have a form with several input fields, and you want to allow users to dynamically add or remove fields on the form.

To implement this use case, you can create a state object in your React component that stores an array of input values.

function DynamicForm() {
  const [inputValues, setInputValues] = useState(['']);

  return (<></>)
}

When the user clicks a button to add a new field, you can update the state object to include a new empty value. Similarly, when the user clicks a button to remove a field, you can update the state object to remove the corresponding value.

  function handleAddField() {
    setInputValues([...inputValues, '']);
  }

  function handleRemoveField(index) {
    const newInputValues = [...inputValues];
    newInputValues.splice(index, 1);
    setInputValues(newInputValues);
  }

  function handleChangeField(index, value) {
    const newInputValues = [...inputValues];
    newInputValues[index] = value;
    setInputValues(newInputValues);
  }

  function handleSubmit(event) {
    event.preventDefault();
    // do something with inputValues
  }

To render the form fields dynamically, you can use the map() function to iterate over the array of input values and create a new input element for each value. You can also add a unique key to each input element to help React efficiently update the DOM when the state changes.

Here is how the component looks finally:

import React, { useState } from 'react';

function DynamicForm() {
  const [inputValues, setInputValues] = useState(['']);

  function handleAddField() {
    setInputValues([...inputValues, '']);
  }

  function handleRemoveField(index) {
    const newInputValues = [...inputValues];
    newInputValues.splice(index, 1);
    setInputValues(newInputValues);
  }

  function handleChangeField(index, value) {
    const newInputValues = [...inputValues];
    newInputValues[index] = value;
    setInputValues(newInputValues);
  }

  function handleSubmit(event) {
    event.preventDefault();
    // do something with inputValues
  }

  return (
    <form onSubmit={handleSubmit}>
      {inputValues.map((value, index) => (
        <div key={index}>
          <input
            type="text"
            value={value}
            onChange={(event) => handleChangeField(index, event.target.value)}
          />
          <button type="button" onClick={() => handleRemoveField(index)}>
            Remove
          </button>
        </div>
      ))}
      <button type="button" onClick={handleAddField}>
        Add Field
      </button>
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, the state object inputValues is an array of strings, each representing the value of an input field. The handleAddField() function adds a new empty string to the array, the handleRemoveField() function removes a string at a given index, and the handleChangeField() function updates a string at a given index.

The form fields are rendered dynamically using the map() function, with each input element having a unique key based on its index in the array. The handleSubmit() function is called when the user submits the form, and it can access the current inputValues array to do something with the user input.

With this solution, users can dynamically add or remove fields on a form in a React app, making it more flexible and user-friendly.

Converting JSX to downloadable pdf in react

Awais Abbas — Sat, 25 Jun 2022 08:45:00 +0000

A simple demonstration to convert JSX to PDF in react with the help of `Html2pdf.js` library.

Create React Project and install packages



npx create-react-app jsx-to-pdf-example
cd jsx-to-pdf-example
npm install html2pdf.js

App.js



import html2pdf from 'html2pdf.js/dist/html2pdf.min';
import './App.css';

function App() {
  const pdfJSX = () => {
    return (
      <>
        <h1>JSX to PDF Convert Example</h1>
        <h2>Hello React</h2> 
      </>
    )
  }

  const printHandler = () => {
    const printElement = pdfJSX();
    console.log(printElement);

    html2pdf().from(printElement).save();
  }

  return (
    <div className="App">
      <button onClick={printHandler}>Print</button>
    </div>
  );
}

export default App;

After clicking on print button here, you will notice that nothing is happening. Here is what console log would show you in dev tools of the browser.

So basically html2pdf.js package is expecting simple HTML and nothing is happening.

Lets convert JSX to HTML first using ReactDOMServer and then pass that to html2pdf function.

App.js



import ReactDOMServer from 'react-dom/server';
import html2pdf from 'html2pdf.js/dist/html2pdf.min';
import './App.css';

function App() {
  const pdfJSX = () => {
    return (
      <>
        <h1>JSX to PDF Convert Example</h1>
        <h2>Hello React</h2> 
      </>
    )
  }

  const printHandler = () => {
    const printElement = ReactDOMServer.renderToString(pdfJSX());
    // const printElement = pdfJSX();

    html2pdf().from(printElement).save();
  }

  return (
    <div className="App">
      <button onClick={printHandler}>Print</button>
    </div>
  );
}

export default App;

Final Demo

Bonus (Fix Warnings)
If you notice that there are some warnings on the terminal regarding the package and to fix them, I only found this solution.

Create .env.development file inside root directory (outside /src)
Add this line to the file: GENERATE_SOURCEMAP=false and warnings would be gone.

Library Reference:
https://www.npmjs.com/package/html2pdf.js/v/0.9.0
Peace ✌️

Create and publish your own npm package with example

Awais Abbas — Mon, 08 Mar 2021 14:59:14 +0000

Creating the package

Create a new folder for the package. you can do that by typing in the terminal:

mkdir my_first_package

Then go inside the folder with terminal and initialize your package.json file like this:

cd my_first_package
npm init

Fill in the required details about the package

You can skip some questions with Enter Key but try to provide the complete information.

Create a new file index.js in your directory and start writing your code.

In my case, I am creating a package to show console.log output in colors.

module.exports = function colorize(message, color) {
  switch (color) {
    case "red": {
      console.log("\x1b[31m%s\x1b[0m", `${message}`);
      break;
    }
    case "green": {
      console.log("\x1b[32m%s\x1b[0m", `${message}`);
      break;
    }
    case "blue": {
      console.log("\x1b[34m%s\x1b[0m", `${message}`);
      break;
    }
    case "black": {
      console.log("\x1b[30m%\x1b[1m%s\x1b[0m", `${message}`);
      break;
    }
    case "cyan": {
      console.log("\x1b[36m%s\x1b[0m", `${message}`);
      break;
    }
    default: {
      console.log(`${message}`);
    }
  }
};

Here is some information about the above code:

A function is created named colorize that gets the console message and color of your choice as a parameter.
In Node, colors references of text to command are written like \x1b[30m for black color etc.
There is a %s present in each console to reset the color back to normal for other log outputs. (\x1b[0m is being used to reset the color).

publishing the package

Name your package inside the package.json file.
Go to npmjs website and create an account.
Now, open up the terminal in your project's directory and write following commands:

npm login
npm publish

If you encounter an error after the publish command, change your package name to something unique as it already exists on NPM.

Now, lets test our package.

Install the package with:
npm install colorixer

and in index.js file, write:

const colorixer = require("colorixer");

colorixer("My first NPM package", "red");
colorixer("My first NPM package", "green");

Output:

And you are done..Thanks for reading :)

Starting with react-bootstrap

Awais Abbas — Sat, 17 Oct 2020 15:49:19 +0000

Hi folks! This is a simple guide for the ones facing trouble setting up react-bootstrap. I will walk you through the basic steps one-by-one with some examples. So, stick together and lets rock-n-roll :)

Creating a React Project

Installing react-app

"create-react-app" is an npm package that sets up the react project for you. Open the terminal and type:

npm install -g create-react-app yarn add create-react-app (If you use Yarn)

Tip : To check if "package is already installed on system", type:
npm list -g "package-name"

Lets create the project with "create-react-app". Open terminal and type:
npx create-react-app testing-project
OR
npm init react-app testing-project
OR
yarn create react-app testing-project

Then in terminal type:

cd testing-project npm start

"npm start" runs the project if it is successfully built.

Installing react-bootstrap

Open the project in the text-editor (VsCode in my case) and type in the terminal:
npm install react-bootstrap bootstrap

Tip : To open the terminal in VsCode, shortcut key is " ctrl + ~ "

Navigate to index.js" inside the /src folder and add the following line to import all styles from "bootstrap"

import 'bootstrap/dist/css/bootstrap.min.css';

All done😀. Lets test it out.

Simple Button Component

Go to the app.js file and import a bootstrap-react-component and the remaining code;
import {Button} from 'react-bootstrap'



import React from "react";
import { Button } from "react-bootstrap";

function App() {
  return (
    <div className="my-4">
      <Button variant="primary" className="mx-4">
        Primary Button
      </Button>
      <Button variant="secondary">Secondary button</Button>
    </div>
  );
}

export default App;

Run the project if its not running. Go to terminal and type :

npm start

Here is the ouput: Woaaaah🥳🥳🥳

my & mx are used for applying margins in bootstrap

variant is similar to bootstrap classes but its specifically used inside the bootstrap-react-components"

Tip : Another way of importing Component in react-bootstrap is this:

import Button from 'react-bootstrap/Button'

which is a bit complex as compared to like we imported earlier.We used Destructuring to grab the component which we wanted from whole library of react-bootstrap.Similarly this method can be used to import other components like in the another example below.

Another Example: Card Component



import React from "react";
import { CardGroup, Card, Container } from "react-bootstrap";

function App() {
  return (
    <>
      <Container className="mt-5">
        <CardGroup>
          <Card>
            <Card.Img
              variant="left"
              src="https://images.pexels.com/photos/3914753/pexels-photo-3914753.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
            />
            <Card.Body>
              <Card.Title>Card title</Card.Title>
              <Card.Text>
                This is a wider card with supporting text below as a natural
                lead-in to additional content. This content is a little bit
                longer.
              </Card.Text>
            </Card.Body>
            <Card.Footer>
              <small className="text-muted">Last updated 3 mins ago</small>
            </Card.Footer>
          </Card>
        </CardGroup>
      </Container>
    </>
  );
}

Lets break it down a bit :)

First we destructured the Components we wanted as CardGroup, Card, Container.

Container gives us the standard margins and some decrease in width.

Now Inside the Card component we can use all the available classes which are written with dot after the component to provide all the properties.

Following output is provided after running the script:

Conclusion

To see all the Component Examples like above...Visit the official React-bootstrap website
(https://react-bootstrap.github.io/)
✌️