DEV Community: Moazam Ali

DevLog - An intuitive admin dashboard for managing blogs.

Moazam Ali — Mon, 26 Jun 2023 08:38:29 +0000

What I built

I have built an admin dashboard using React with Material UI, Supabase and Refine. The purpose of this dashboard is to efficiently manage blogs.

Category Submission:

App Link: DevLog

App Link

Unfortunately, I haven't deployed the application online yet, so there is no app link available at the moment.

Screenshots

I will be adding screenshots of the admin dashboard soon to provide a visual representation of the interface and design.

Blog posts

Description

The project is an admin dashboard built using React, Material UI, and Refine. It allows users to manage blogs effectively, providing a user-friendly interface for various blog management tasks such as creating, editing, and deleting blog posts.

Link to Source Code

The source code for the project can be found on GitHub at the following repository: GitHub Repo

Permissive License

The project is licensed under the MIT License, which allows users to freely use, modify, and distribute the code, with the condition that the original license and copyright notice are included.

Background

I decided to build this admin dashboard to streamline the process of managing blogs. The inspiration behind it was to create a centralized platform where blog administrators can easily handle blog-related tasks, such as publishing new articles, updating existing content, and managing user comments.

How I built it

To build this project, I utilized React as the foundation for the frontend development. Material UI was used for creating a visually appealing and responsive user interface. Refine, a React library for building admin interfaces, was integrated to enhance the functionality of the dashboard. Throughout the development process, I gained new skills and knowledge in React, Material UI, and Refine, allowing me to create a robust and efficient admin dashboard.

Additional Resources/Info

Unfortunately, there are no additional resources or information available at the moment. However, feel free to explore the source code on GitHub and reach out if you have any specific questions or require assistance in understanding or utilizing the admin dashboard.

Regards
Moazam Ali

Default exports & Name exports

Moazam Ali — Sat, 11 Feb 2023 04:30:00 +0000

The export declaration lets you to export a specific part from JavaScript files which can be imported into other files using import declaration for reusing. The default prefix marks that function/class as an entry point (main function) in a file.

The export default prefix is a standard JavaScript Syntax(not specific to react). It lets you mark the main function in a file so that you can later import it from other files.

For example:
Exporting a Button component by Default export

export default Button

Exporting a Button component by Name export

export Button

You can use both(default & name) of them in the same file.
A file cannot have more than one default export but it can have as many named exports.
How you export your component tells you how to import it because if you try to import a default export the same way you do a named export, it will log an error.

Default export

Export syntax:

export default function Button() {...}

Import syntax:

import Button from ‘./button.js’

Name export

Export syntax:

export function Button() {...}

Import syntax:

import { Button } from ‘./button.js’

When you are importing a component with export default, you can put any name you want after import. For example, import Hello from ‘./button.js’ instead of import Button from ‘./button.js’. While in named imports, the name has to match on both sides.

Summary

Use default exports when you have one component in the file and use name exports when your file exports multiple components.
Also, components without names like export default () => {...} are discouraged because they make debugging harder.
To reduce the potential confusion between default and name exports, you can stick to only one style (default or named). For default export, each file will need to export only one component. While for name export, each file can export multiple components.

Wrapping up!

That's all for this article, hope you learned something. Thanks for reading, catch you later.

Let’s connect on LinkedIn.

You can also buy me a coffee that would help me grow as a frontend developer :)

Moazam AliFollow

Frontend Developer who is always passionate in discovering new stuff and building networks.

String.endsWith() in JavaScript

Moazam Ali — Tue, 10 Jan 2023 15:30:00 +0000

The String.prototype.endsWith() method is a string method in JavaScript that returns a Boolean value indicating whether a string ends with a specified search string. This method is case-sensitive, meaning that it will return true only if the search string exactly matches the end of the target string.

Syntax

string.endsWith(searchValue, start)

searchValue: A specified search string to be searched for at the end of the string.
start: The position within the string at which to begin searching for searchString. (Defaults to 0.)

It returns a boolean value, true if the searched string is found at the end of the given string; otherwise false if not found.

Here's an example of how to use the endsWith() method:

let str = 'Hello, world!';

console.log(str.endsWith('world!')); // Output: true
console.log(str.endsWith('World!')); // Output: false

In this example, we create a string called str and use the endsWith() method to search for the substring 'world!' at the end of it. Since the search string exactly matches the end of the string str, the endsWith() method returns true. However, if we search for the string 'World!', which is not an exact match, the endsWith() method returns false.

The endsWith() method also accepts an optional second argument, which is the length of the substring to be searched within the target string. This is useful if you want to search for a substring within a specific part of the target string.

Here's an example of using the optional second argument:

let str = 'Hello, world!';
console.log(str.endsWith('world!', 12)); // Output: true

In this example, we search for the substring 'world!' within the first 12 characters of the string str. Since the string 'world!' appears at the end of the first 12 characters of str, the endsWith() method returns true.

Wrapping up!

The endsWith() method is a convenient and easy way to search for substrings at the end of a string in JavaScript. It's often used in combination with other string methods, such as indexOf() and substr(), to perform more complex string operations.

That's all for this article, hope you learned something. Thanks for reading, catch you later.

You can also buy me a coffee that would help me grow as a frontend developer :)

Moazam AliFollow

Frontend Developer who is always passionate in discovering new stuff and building networks.

String.startsWith() in JavaScript

Moazam Ali — Tue, 03 Jan 2023 15:30:00 +0000

The String.prototype.startsWith() method is a string method in JavaScript that returns a Boolean value indicating whether a string starts with a specified search string. This method is case-sensitive, meaning that it will return true only if the search string exactly matches the beginning of the target string.

Syntax

string.startsWith(searchValue, start)

searchValue: A specified search string to be searched for at the beginning of the string.
start: The position within the string at which to begin searching for searchString. (Defaults to 0.)

It returns a boolean value, true if the searched string is found at the beginning of the given string; otherwise false if not found.

Here's an example of how to use the startsWith() method:

let str = 'Hello, world!';

console.log(str.startsWith('Hello')); // Output: true
console.log(str.startsWith('hello')); // Output: false

In this example, we create a string called str and use the startsWith() method to search for the substring 'Hello' at the beginning of the string. Since the search string exactly matches the beginning of the string, the startsWith() method returns true. However, if we search for the string 'hello', which is not an exact match, the startsWith() method returns false.

The startsWith() method also accepts an optional second argument, which is the index at which the search should start. This is useful if you want to search for a substring within a specific part of the target string.

Here's an example of using the optional second argument:

let str = 'Hello, world!';
console.log(str.startsWith('world', 6)); // Output: true

In this example, we search for the substring 'world' within the string str, starting at the index 6. Since the string 'world' appears at index 7, the startsWith() method returns true.

Wrapping up!

The startsWith() method is a convenient and easy way to check if a string starts with a specified substring in JavaScript. It's often used in combination with other string methods, such as indexOf() and substr(), to perform more complex string operations.

That's all for this article, hope you learned something. Thanks for reading, catch you later.

You can also buy me a coffee that would help me grow as a frontend developer :)

Moazam AliFollow

Frontend Developer who is always passionate in discovering new stuff and building networks.

String.includes() in JavaScript

Moazam Ali — Tue, 27 Dec 2022 15:30:00 +0000

The String.prototype.includes() method is a string method in JavaScript that returns a Boolean value indicating whether a string includes a specified search string. This method is case-sensitive, meaning that it will return true only if the search string exactly matches a substring of the target string.

Syntax

string.includes(searchValue, start)

searchValue: A specified search string to be searched for within a string.
start: The position within the string at which to begin searching for searchString. (Defaults to 0.)

It returns a boolean value, true if the searched string is found within the given string; otherwise false if not found.

Here's an example of how to use the includes() method:

let str = 'Hello, world!';

console.log(str.includes('Hello')); // Output: true
console.log(str.includes('hello')); // Output: false

In this example, we create a string called str and use the includes() method to search for the substring 'Hello' within it. Since the search string exactly matches the substring 'Hello', the includes() method returns true. However, if we search for the string 'hello', which is not an exact match, the includes() method returns false.

The includes() method also accepts an optional second argument, which is the index at which the search should start. This is useful if you want to search for a substring within a specific part of the target string.

Here's an example of using the optional second argument:

let str = 'Hello, world!';

console.log(str.includes('world', 6)); // Output: true

In this example, we search for the substring 'world' within the string str, starting at the index 6. Since the string 'world' appears at index 7, the includes() method returns true.

Wrapping up!

The includes() method is a convenient and easy way to search for substrings within a string in JavaScript. It's often used in combination with other string methods, such as indexOf() and substr(), to perform more complex string operations.

That's all for this article, hope you learned something. Thanks for reading, catch you later.

You can also buy me a coffee that would help me grow as a frontend developer :)

Moazam AliFollow

Frontend Developer who is always passionate in discovering new stuff and building networks.

Function Rest Parameters in JavaScript

Moazam Ali — Tue, 20 Dec 2022 15:30:00 +0000

Function rest parameters are a feature in JavaScript introduced in the ES6 version of JavaScript that allows a function to accept an indefinite number of arguments as an array. These arguments are stored in an array that can be accessed within the function.

Syntax

To create a function with a rest parameter, the parameter is declared with three dots (...) followed by the name of the parameter. For example:

function example(...args) {
  // Code goes here
}

When the function is called, any number of arguments can be passed to it. These arguments are stored in the args array, which can be accessed within the function like any other array.

Here's an example of a function that uses a rest parameter to find the sum of all the arguments passed to it:

function sum(...numbers) {
  let total = 0;
  for (let i = 0; i < numbers.length; i++) {
    total += numbers[i];
  }
  return total;
}

console.log(sum(1, 2, 3, 4)); // Output: 10
console.log(sum(5, 10, 15, 20)); // Output: 50

In this example, the sum() function accepts a rest parameter called numbers, which is used to store the arguments passed to the function. The numbers array is then looped through using a for loop, and the sum of all the elements is calculated and returned.

Rest parameters are useful when you want to write a function that can accept any number of arguments, but you don't know in advance how many arguments will be passed to the function. This allows you to write flexible and reusable code.

Note:
However, it's important to note that the rest parameter must be the last parameter in the function declaration. This is because the rest parameter collects all the remaining arguments into an array, and if there are any other parameters after the rest parameter, they will not be included in the array.

We can also use the rest parameters with the regular parameters. Here's an example of a function that uses a rest parameter and a regular parameter:

function example(first, ...args) {
  // Code goes here
}

In this example, the example() function accepts two arguments: a regular parameter called first and a rest parameter called args. The first parameter will contain the first argument passed to the function, and the args array will contain all the remaining arguments.

Rest Parameters vs Arguments

One key difference between rest parameters and the arguments object is that rest parameters are actually arrays, whereas the arguments object is not. This means that you can use array methods, such as map and forEach, on rest parameters, but not on the arguments object.

For example, you could write the sum function like this using the forEach method:

function sum(...numbers) {
  let total = 0;

  numbers.forEach(number => {
    total += number;
  });

  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 15

Wrapping up!

Rest parameters are a useful feature in JavaScript that can help you write more concise and elegant code when working with an unknown number of arguments in a function. They are a great alternative to the arguments object and can make your code more readable and maintainable.

That's all for this article, hope you learned something. Thanks for reading, catch you later.

You can also buy me a coffee that would help me grow as a frontend developer :)

Moazam AliFollow

Frontend Developer who is always passionate in discovering new stuff and building networks.

Default Parameters in JavaScript

Moazam Ali — Tue, 13 Dec 2022 15:30:00 +0000

In this article, you will be learning about Default Parameters in JavaScript with some examples.

Default parameters in JavaScript allow function parameters to be assigned default values if no value is passed to the function. This can be useful for setting a default behavior for a function or providing a fallback value in case the argument is undefined.

Syntax

In JavaScript, default parameters are set by providing an equal sign (=) followed by the default value for the parameter. For example, the following function has a default parameter x with a value of 10:

function myFunction(x = 10) {
  // function body
}

If a value is not passed to the function for the x parameter, the default value of 10 will be used.

Examples

Here are some examples of how default parameters can be used in JavaScript:

// default parameter for missing arguments
function addNumbers(x = 0, y = 0) {
  return x + y;
}

// x and y are 0, result is 0
console.log(addNumbers());

// x is 5, y is still 0, result is 5
console.log(addNumbers(5));

// x is 5, y is 10, result is 15
console.log(addNumbers(5, 10));

In the above example, the addNumbers function has default parameters for x and y set to 0. If no arguments are passed to the function, or if only one argument is passed, the default value will be used.

// default parameter for undefined values
function printName(firstName, lastName = "Smith") {
  console.log(`${firstName} ${lastName}`);
}

// prints "John Smith"
printName("John");

// prints "Jane Doe"
printName("Jane", "Doe");

In the above example, the printName function has a default parameter for lastName set to "Smith". If no value is passed to the function for the lastName parameter, the default value will be used.

Advantages

There are several advantages to using default parameters in JavaScript:

They provide a default behavior for a function, which can be useful if the function is often called with missing or undefined arguments.
They can simplify function calls by allowing you to omit arguments that you don't need to specify.
They can improve code readability by making it clear what values will be used if no arguments are passed to the function.
They can provide a fallback value for arguments that may be undefined, which can help prevent errors in your code.

Disadvantages

While default parameters can be useful in many cases, there are also some disadvantages to consider:

They can make it difficult to understand the expected arguments for a function, especially if the default values are complex or non-obvious.
They can make it harder to refactor code since changing the default value of a parameter can potentially affect multiple places in your code.
They can make it more difficult to write unit tests since you need to consider the default values as well as the values you pass to the function.

Wrapping up!

Overall, default parameters can be a useful tool in JavaScript, but it's important to use them carefully and consider their potential drawbacks.

That's all for this article, hope you learned something. Thanks for reading, catch you later.

You can also buy me a coffee that would help me grow as a frontend developer :)

Moazam AliFollow

Frontend Developer who is always passionate in discovering new stuff and building networks.

ES6 Symbol in JavaScript

Moazam Ali — Sat, 10 Dec 2022 15:30:00 +0000

ES6 Symbol in JavaScript is a new primitive data type introduced in the ECMAScript 6 specification. It is used to create unique, immutable values that can be used as property keys for objects.

Benefits of Symbols

One of the main benefits of using symbols is that it prevents property name collision. For instance, if you have a property with the same name in two different objects, the property value of the first object will be overwritten by the second object. But with symbols, you can avoid this problem by creating unique keys for each property.

Creating a Symbol

To create a symbol, you can use the Symbol() function. For example:

const mySymbol = Symbol();
console.log(typeof mySymbol) // symbol

You can also provide a description for the symbol as an argument to the Symbol() function. This description is optional and is used for debugging purposes. For example:

const mySymbol = Symbol('My description');
console.log(mySymbol) // Symbol(My description)

Accessing Symbol Description

Symbol description can be accessed with the .description property. For example,

const mySymbol = Symbol('My description');
console.log(mySymbol.description); // My description

Using as a Property Key

Once you have created a symbol, you can use it as a property key for an object. For instance:

const mySymbol = Symbol();
const user = {
  name: 'John Doe',
  [mySymbol]: 'Private data'
};

You can access the value of the symbol property using the square bracket notation []. For example:

console.log(user[mySymbol]); // 'Private data'

Symbols are Unique

It is important to note that symbols are unique and immutable. This means that if you create two symbols with the same description, they will not be equal. For instance:

const symbol1 = Symbol('My description');
const symbol2 = Symbol('My description');

console.log(symbol1 === symbol2); // false

Symbols are Immutable

In addition, you cannot modify the value of a symbol once it has been created. For example:

const mySymbol = Symbol();
mySymbol = 'New value'; // TypeError: Assignment to constant variable.

Encapsulating

Another advantage of symbols is that they are not enumerable. This means that when you use a for...in loop to iterate over the properties of an object, the symbol properties will not be included. This makes them ideal for storing private data in an object that you don't want to be accessible by external code. For example,

// creating a symbol
const mySymbol = Symbol();

// creating an object with some properties
const user = {
  name: 'John Doe',
  age: 29,
  [mySymbol]: 'Private data'
};

// for…in to loop through object properties
for (let x in user)
{
    console.log(user[x]);
}
// Output:
// John Doe
// 29

Conclusion

Symbols are a useful addition to the JavaScript language. They provide a way to create unique and immutable values that can be used as property keys for objects. This helps prevent property name collision and allows you to store private data in your objects

That's all for this article, hope you learned something. Thanks for reading, catch you later!

You can also buy me a coffee that would help me grow as a frontend developer :)

Moazam AliFollow

Frontend Developer who is always passionate in discovering new stuff and building networks.

UX Researcher Qualities

Moazam Ali — Sun, 04 Dec 2022 12:53:04 +0000

Empathy:
Able to understand someone else's feelings or thoughts in a situation.

Pragmatism:
Focused on reaching goals.

Collaboration:
Can work with a range of people, personalities, and work styles.

Quote by Dennis Ritchie

Moazam Ali — Sun, 27 Nov 2022 17:12:35 +0000

"The only way to learn a new programming language is by writing programs in it." - Dennis Ritchie

Responsibilities of an Entry-Level UX Designer

Moazam Ali — Mon, 21 Nov 2022 15:30:00 +0000

The job of an entry-level UX/UI designer is to improve the user interface and user experience for an application or website. This involves finding ways to improve usability while still meeting design requirements and ensuring the website or application functions as necessary.

1. User research
User research is about understanding the people who use your product.

2. Information architecture:
Information architecture, or IA for short, involves deciding how your product is organized and structured.

3. Wireframing:
A wireframe is a basic outline or sketch of a product or a screen, like an app or website.

4. Prototyping:
A prototype is an early model of a product that demonstrates its functionality.

5. Visual design:
Visual design focuses on how the product or technology looks.

6. Effective communication:
Effective communication as a UX designer means connecting with your colleagues through emails, meetings, presentations, and design software.

Moazam AliFollow

Frontend Developer who is always passionate in discovering new stuff and building networks.

Characteristics of User Experience (UX) Design

Moazam Ali — Mon, 14 Nov 2022 15:30:00 +0000

The strange thing about UX design is that you won't notice it when it's good. You will only notice it when it's bad.

1. Usable
If a product is usable, it means the design, structure, and purpose of the product are clear and easy to use.

2. Equitable
If a product is equitable, it means a design is helpful to people with diverse abilities and backgrounds.

3. Enjoyable
If a product is enjoyable, it means the design delights the user.

4. Useful
If a product is useful, that means it solves user problems.

Moazam AliFollow

Frontend Developer who is always passionate in discovering new stuff and building networks.