DEV Community: Tufail Shah

Chain some Math with Promises

Tufail Shah — Wed, 22 May 2024 07:40:07 +0000

This is a very simple and effective example on understanding promises, and how to pass in the arguments to it.

I keep on scribbling code on my handles, if you are interested give me a Follow:
Dev.to
LinkedIn
Css Battle
Code Sandbox

Input a number, double it, increase it by 10, and then multiply by 3.

Each operation should be in a separate Promise and then chained together.* */


double(value)
  .then(addTen)
  .then(multiplyByThree)
  .then((result) => {
    console.log(result);
  });

Expected output:
60

Write functions which return promise object and resolve those.

double return => x * 2
addTen return => x + 10
multiplyByThree => x * 3

Check the solution on JS Fiddle or

Down Below


const value = 5;

const double = (value) => new Promise((resolve) => resolve(value * 2));

const addTen = (value) => new Promise((resolve) => resolve(value + 10));

const multiplyByThree = (value) => new Promise((resolve) => resolve(value * 3));

double(value)
  .then(addTen)
  .then(multiplyByThree)
  .then((result) => {
    console.log(result);
  });

Choosing the Right API Protocol: GraphQL vs. REST vs. SOAP

Tufail Shah — Tue, 07 May 2024 06:16:37 +0000

In today's interconnected digital landscape, building robust APIs (Application Programming Interfaces) is essential for enabling communication between different software systems. When it comes to API protocols, developers are often faced with choices such as GraphQL, REST, and SOAP. Each protocol comes with its own set of advantages and trade-offs, making it crucial to understand their differences to choose the right one for your project. In this post, we'll explore and compare GraphQL, REST, and SOAP to help you make informed decisions.

GraphQL:

GraphQL is a query language for APIs and a runtime for executing those queries. It was developed by Facebook in 2012 and open-sourced in 2015. Here are some key characteristics of GraphQL:

Flexible Data Retrieval: With GraphQL, clients can request only the data they need using a single endpoint. This reduces over-fetching and under-fetching of data, making it efficient for mobile devices and minimizing bandwidth usage.
Strong Typing: GraphQL schemas define the structure of the data available in the API, enabling clients to understand the shape of the data they receive. This reduces the need for extensive documentation and improves communication between frontend and backend teams.
Real-time Updates: GraphQL subscriptions allow clients to subscribe to changes in data and receive real-time updates. This is particularly useful for applications requiring live data, such as messaging apps or collaborative tools.
Versionless API: Since clients specify the exact data they need, GraphQL APIs are inherently versionless. This eliminates the need for maintaining multiple versions of the API, simplifying the development process.

REST (Representational State Transfer):

REST is an architectural style for designing networked applications, commonly used for building APIs on the web. Here are some characteristics of REST:

Resource-Based: RESTful APIs are based on resources, each identified by a unique URL (Uniform Resource Locator). Clients interact with resources using standard HTTP methods such as GET, POST, PUT, and DELETE.
Stateless: REST is stateless, meaning each request from a client to the server must contain all the information necessary to understand and fulfill the request. This simplifies server implementation and enhances scalability.
Cacheability: RESTful responses can be cached to improve performance and reduce server load. Clients can specify caching directives in requests, and servers can include caching headers in responses to control caching behavior.
Uniform Interface: REST APIs provide a uniform interface for interacting with resources, making them easy to understand and use. This uniformity promotes the reuse of components and simplifies client-server communication.

SOAP (Simple Object Access Protocol):

SOAP is a protocol for exchanging structured information in the implementation of web services. It uses XML for message formatting and relies on HTTP, SMTP, or other transport protocols for message delivery. Here are some characteristics of SOAP:

Strict Specification: SOAP has a strict and well-defined specification, making it suitable for complex enterprise environments where interoperability and reliability are paramount.
Built-in Security: SOAP supports built-in security features such as encryption, authentication, and authorization. This makes it suitable for applications requiring high levels of security and compliance with regulatory standards.
Error Handling: SOAP provides comprehensive error handling capabilities, including standardized fault messages for reporting errors. This enhances the robustness and reliability of SOAP-based applications.
Complexity: SOAP messages are typically larger and more complex than those used in REST or GraphQL APIs. This can result in higher overhead and slower performance, especially in bandwidth-constrained environments.

Comparative Analysis:

Flexibility: GraphQL offers the most flexibility in data retrieval, allowing clients to request precisely the data they need. REST follows, providing a flexible resource-based approach, while SOAP is more rigid in its message structure.
Performance: GraphQL and REST are generally more lightweight and performant than SOAP, especially in scenarios with limited bandwidth or high latency. However, SOAP's built-in optimizations can make it suitable for certain enterprise applications.
Ease of Use: REST's simplicity and familiarity with HTTP make it easy to understand and use for developers. GraphQL requires a deeper understanding of its query language and schema definitions. SOAP's complexity can make it challenging to work with, especially for less experienced developers.
Interoperability: REST and GraphQL are widely supported and interoperable with various programming languages and platforms. SOAP's strict specification can sometimes lead to interoperability issues, particularly when integrating with non-SOAP systems.

In conclusion, choosing the right API protocol depends on various factors such as the specific requirements of your project, your team's expertise, and the nature of your application. GraphQL excels in scenarios requiring flexibility and real-time updates, while REST is well-suited for simpler, resource-based APIs. SOAP remains a viable option for enterprise applications requiring strong security and reliability. Ultimately, understanding the strengths and weaknesses of each protocol will enable you to make informed decisions when designing and implementing your APIs.

This post is part AI generated, reviewed by an actual Human :D with neurons rather than a neural network and brain mass the weight of an electron.

api #soap #rest #graphQl

Furthermore, please let me know what you think of my effort at trying to simplify something for your use and my views. I'll try and publish a code version of the above comparision in subsequent posts.

⚡️ React 19 Beta is Here! ⚡️ (But Should You Upgrade Now?)

Tufail Shah — Fri, 26 Apr 2024 07:03:05 +0000

Excited developers, the wait is over! The React 19 beta has arrived, bringing some interesting new features and improvements. However, before you rush to upgrade all your projects, let's dive into the key points:

What's New in React 19 Beta:
Concurrent Features Land! (partially):
This long-awaited update introduces features like useTransition and useDeferredValue for handling concurrent rendering scenarios. These can improve performance by prioritizing critical UI updates while background tasks continue. (Note: Concurrent features are still experimental in the beta)

Automatic Batching Improvements:
React 19 further optimizes state updates, automatically batching multiple changes into a single re-render for better performance.

DevTools Improvements:
The React DevTools get a refresh with a new Profiler API for more granular performance insights.

Improved Error Handling:
Strict mode is even stricter, catching potential issues earlier in development.

Should You Upgrade Now?
As with any beta release, it's important to weigh the potential benefits against the risks. Upgrading a large codebase might introduce unforeseen bugs. Here's what to consider:
New Project? - For new projects, React 19 could be a great choice, allowing you to leverage the latest features from the start.
Existing Project? - For existing projects, you might want to wait for the official release and community feedback before upgrading. Consider the stability needs of your project and the effort involved in upgrading.

Stay Curious!
React 19 beta is an exciting step forward although one wonders if Next and other frameworks have already sailed with the ship leaving React behind. Keep an eye on the official channels for further updates and best practices around upgrading.

Let me know in the comments what features you're most excited about in React 19 or you are happy with other frameworks(Like next, remix, grommet etc) and don't see value being added over those.

Deep Dive into Functional Programming in Javascript

Tufail Shah — Tue, 23 Apr 2024 12:22:31 +0000

javascript #functional #currying #memoization

Functional programming (FP) has gained significant traction in the world of software development, and JavaScript developers are increasingly turning to this paradigm to solve problems more efficiently and with fewer bugs. At its core, functional programming emphasizes the use of pure functions, immutability, and advanced techniques like currying, memoization, and monads to create cleaner, more predictable code.

In this blog post, we'll delve into each of these concepts to understand how they work and why they matter in JavaScript development. We'll explore pure functions for their side-effect-free nature, immutability for maintaining state predictability, currying for enhancing function reuse and composition, memoization for optimizing performance, and monads for handling side effects in a functional style.

Whether you're new to functional programming or looking to deepen your understanding of its application in JavaScript, this post will provide you with a solid foundation and practical examples to integrate these principles into your coding practices. Let's demystify these concepts and see how they can transform the way you write JavaScript code.

1. Pure Functions

A pure function is a function that, given the same input, will always return the same output and does not cause any observable side effects. This concept is crucial in functional programming because it allows developers to write more predictable and testable code.
Benefits of Using Pure Functions in JavaScript:

Predictability: Since pure functions do not depend on or modify the state of data outside their scope, they are much easier to reason about and debug.
Reusability: Pure functions can be reused across different parts of an application without concern for external context.
Testability: With no hidden state or side effects, pure functions are straightforward to test; inputs and outputs are all you need to consider.

Examples of Pure Functions in JavaScript:

Consider a simple function to calculate the area of a rectangle:

function rectangleArea(length, width) {
    return length * width;
}

This function is pure because it always returns the same result with the same arguments, and it does not modify any external state or produce side effects.
Common Pitfalls and How to Avoid Them:

While pure functions offer numerous benefits, developers might face challenges when trying to integrate them into applications that interact with databases, external services, or global state. Here are some tips to maintain purity:

Avoid side effects: Do not modify any external variables or objects within your function.
Handle state locally: If your function needs to access application state, consider passing the state as an argument and returning a new state without modifying the original.

By understanding and implementing pure functions, developers can take a significant step towards leveraging the full power of functional programming in JavaScript.

2. Immutability

Immutability refers to the principle of never changing data after it's been created. Instead of modifying an existing object, you create a new object with the desired changes. This is a cornerstone of functional programming as it helps prevent side effects and maintain the integrity of data throughout the application's lifecycle.
How JavaScript Handles Immutability:

JavaScript objects and arrays are mutable by default, which means care must be taken to enforce immutability when needed. However, there are several techniques and tools available to help:

Using const: While const doesn't make variables immutable, it prevents reassignment of the variable identifier to a new value, which is a step towards immutability.
Object.freeze(): This method can make an object immutable by preventing new properties from being added to it and existing properties from being modified.
Spread syntax for Arrays and Objects: Using the spread syntax can help create new arrays or objects while incorporating elements or properties from existing ones without modifying the originals.

Techniques for Ensuring Data Immutability in JavaScript:

Copy on Write: Always create a new object or array instead of modifying the existing one. For instance:

const original = { a: 1, b: 2 };
    const modified = { ...original, b: 3 }; // 'original' is not changed

Use Libraries: Libraries like Immutable.js provide persistent immutable data structures which are highly optimized and can simplify the enforcement of immutability.

Libraries That Help Enforce Immutability:

Immutable.js: Offers a range of data structures that are inherently immutable.
immer: Allows you to work with immutable state in a more convenient way by using a temporary draft state and applying changes to produce a new immutable state.

By integrating immutability into your JavaScript projects, you enhance data integrity, improve application performance (via reduced need for defensive copying), and increase the predictability of your code. It aligns perfectly with the principles of functional programming, leading to cleaner, more robust software.

3. Currying

Currying is a transformative technique in functional programming where a function with multiple arguments is converted into a sequence of functions, each taking a single argument. This approach not only makes your functions more modular but also enhances the reusability and composability of your code.
Practical Uses of Currying in JavaScript:

Currying allows for the creation of higher-order functions that can be customized and reused with different arguments at various points in your application. It's particularly useful for:

Event handling: Creating partially applied functions that are tailored for specific events but reuse a common handler logic.
API calls: Setting up functions with predefined arguments like API keys or user IDs that can be used repeatedly across different calls.

Step-by-Step Examples to Illustrate Currying:

Consider a simple function to add two numbers:


function add(a, b) {
    return a + b;
}

// Curried version of the add function
function curriedAdd(a) {
    return function(b) {
        return a + b;
    };
}

const addFive = curriedAdd(5);
console.log(addFive(3));  // Outputs: 8

This example shows how currying can turn a simple addition function into a more versatile and reusable function.
Currying vs. Partial Application:

While currying and partial application both involve breaking down functions into simpler, more specific functions, they are not the same:

Currying: Converts a function with multiple arguments into a sequence of nesting functions, each taking exactly one argument.

Partial Application: Involves creating a function with a smaller number of parameters by pre-filling some of the arguments.

Both techniques are valuable in functional programming and can be used to simplify complex function signatures and improve code modularity.

By leveraging currying, developers can enhance function reusability and composition, leading to clearer and more maintainable code in JavaScript projects.

4. Memoization

Memoization is an optimization technique used in functional programming to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again. It is particularly useful in JavaScript for optimizing performance in applications involving heavy computational tasks.
Why Memoization is Important in JavaScript:

Efficiency: Reduces the number of computations needed for repeated function calls with the same arguments.

Performance: Improves application responsiveness by caching results of time-consuming operations.

Scalability: Helps manage larger datasets or more complex algorithms by minimizing the computational overhead.

Implementing Memoization: Examples and Common Methods:

Here's a basic example of a memoized function in JavaScript:

function memoize(fn) {
    const cache = {};
    return function(...args) {
        const key = args.toString();
        if (!cache[key]) {
            cache[key] = fn.apply(this, args);
        }
        return cache[key];
    };
}

const factorial = memoize(function(x) {
    if (x === 0) {
        return 1;
    } else {
        return x * factorial(x - 1);
    }
});

console.log(factorial(5));  // Calculates and caches the result
console.log(factorial(5));  // Returns the cached result

This example demonstrates how memoization can cache the results of a factorial calculation, significantly reducing the computation time for repeated calls.
Benefits and Potential Drawbacks of Memoization:
Benefits:

Significantly reduces the processing time for repeated operations.
Improves application efficiency by avoiding redundant calculations.
Easy to implement with higher-order functions.

Drawbacks:

Increases memory usage due to caching.
Not suitable for functions with non-deterministic outputs or functions with side effects.

By understanding and implementing memoization, developers can optimize their JavaScript applications, making them faster and more efficient. However, it's important to consider the trade-offs in terms of additional memory usage and ensure that memoization is applied only where it provides clear benefits.

5. Monads

Monads are a type of abstract data type used in functional programming to handle side effects while maintaining pure functional principles. They encapsulate behavior and logic in a flexible, chainable structure, allowing for sequential operations while keeping functions pure.
Introduction to Monads and Their Significance in FP:

Monads provide a framework for dealing with side effects (like IO, state, exceptions, etc.) in a controlled manner, helping maintain functional purity and composability. In JavaScript, Promises are a familiar example of a monadic structure, managing asynchronous operations cleanly and efficiently.
Examples of Monads in JavaScript:

Promises: Handle asynchronous operations by encapsulating pending operations, success values, or errors, allowing for method chaining (like .then() and .catch()):


  new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data fetched"), 1000);
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

Maybe Monad: Helps deal with null or undefined errors by encapsulating a value that may or may not exist:


function Maybe(value) {
  this.value = value;
}

Maybe.prototype.bind = function(transform) {
  return this.value == null ? this : new Maybe(transform(this.value));
};

Maybe.prototype.toString = function() {
  return `Maybe(${this.value})`;
};


const result = new Maybe("Hello, world!").bind(value => value.toUpperCase());
console.log(result.toString()); // Outputs: Maybe(HELLO, WORLD!)

Monad Laws and Structure:

Monads must follow three core laws—identity, associativity, and unit—to ensure that they behave predictably:

Identity: Applying a function directly or passing it through the monad should yield the same result.
Associativity: The order in which operations are performed (chained) does not affect the result.
Unit: A value must be able to be lifted into a monad without altering its behavior.

Understanding these laws is crucial for implementing or utilizing monads effectively in functional programming.
How Monads Can Manage Side Effects and Maintain Functional Purity:

By encapsulating side effects, monads allow developers to keep the rest of their codebase pure and thus more understandable and maintainable. They make side effects predictable and manageable, crucial for larger applications where maintaining state consistency and error handling can become challenging.

By leveraging monads, developers can enhance the functionality of their JavaScript applications, ensuring that they handle side effects in a functional way that promotes code reliability and maintainability.

How These Concepts Interconnect

The concepts of pure functions, immutability, currying, memoization, and monads are not just individual elements but interconnected tools that enhance the robustness and maintainability of JavaScript applications. Here’s how they can work together to create a cohesive functional programming environment.
Building Functional Synergy:

Pure Functions and Immutability: Pure functions ensure that functions have no side effects and return the same output for the same inputs, which is complemented by immutability that prevents data from being changed unexpectedly. Together, they ensure a predictable and stable code base.

Currying and Memoization: Currying allows functions to be broken down into simpler, single-argument functions that are easier to manage and memoize. Memoization can then be applied to these curried functions to cache their results, optimizing the application’s performance by avoiding repeated calculations.

Monads and Pure Functions: Monads help manage side effects in a controlled manner, which allows pure functions to remain pure even when dealing with operations like I/O or state transitions. This encapsulation of side effects preserves the integrity of the functional architecture.

Example: A Small Functional Module:

Let’s consider a practical example where these concepts come together. Suppose we are building a simple user registration module:

// A pure function to validate user input
const validateInput = input => input.trim() !== '';

// A curried function for creating a user object
const createUser = name => ({ id: Date.now(), name });

// Memoizing the createUser function to avoid redundant operations
const memoizedCreateUser = memoize(createUser);

// A monad for handling potential null values in user input
const getUser = input => new Maybe(input).bind(validateInput);

// Example usage
const input = getUser('  John Doe  ');
const user = input.bind(memoizedCreateUser);

console.log(user.toString());  // Outputs user details or empty Maybe

In this example, validateInput is a pure function ensuring input validity. createUser is a curried and memoized function, optimized for performance, and getUser uses a monad to handle potential null values safely.

Conclusion:

Understanding and integrating these functional programming concepts can significantly enhance the quality and maintainability of JavaScript code. By using pure functions, immutability, currying, memoization, and monads in tandem, developers can build more reliable, efficient, and clean applications.

By embracing these interconnected principles, JavaScript developers can harness the full potential of functional programming to write better, more sustainable code.

Credits: Sourced from Post by Alex

Pure Components in React

Tufail Shah — Thu, 31 Dec 2020 12:10:06 +0000

Check my CodePen and follow me on Twitter, and encourage me to deliver more CSS, JS, HTML awesomeness, tips and tricks.

CSS Grid Layout (responsive)

Tufail Shah — Thu, 31 Dec 2020 11:53:23 +0000

In this post I'll be showing how we can use Css- GRID BOX to create web and mobile layout easily and efficiently.

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element’s children (which become Grid Items).
Try resizing the window to check for responsive effect.

Try resizing the window to check for responsive effect.
Check my Pen and give suggestion where and how we can achieve the required layout without pulling our hair.

Check my CodePen and follow me on Twitter, and encourage me to deliver more CSS, JS, HTML awesomeness, tips and tricks.

React vs Vue

Tufail Shah — Thu, 24 Sep 2020 17:48:34 +0000

Which is the the ONE?

I for one should know the answer but i don't.

I have used both Stack's and have worked on both as separate UI's.
Let's see what people think about these two lightweight giants.

Vue
React

Let's see some facts about the two

Difficult to seperate Vue and React.

Similarities:
Virtual DOM
Component Based Architecture
Props
Build Tools (Vue Cli and CRA react)
React Hooks and Vue Composition API
Dev Tools
Companion Frameworks (vue-router, vuex, react-router, react-redux)

I can't think of any ground breaking difference between the two. Although there are some difference but they don't seem to be anything like what AngularJS and Angular2 had.

Differences:
JSX vs Templates (Although we can incorporate JSX in Vue)
State Management vs Object Properties

React-native vs Vue native ( Not much idea)

And now if we look at GitHub stars and recent survey both seem to be performing great.

So which is better in your idea?

Which one you choose and why?

Are you planning to jump the ship from one to another?

Find me on:
Twitter: @tufailmsg
Github: https://github.com/ShahTufail

Git commit undo/revert

Tufail Shah — Thu, 24 Sep 2020 15:12:55 +0000

Yea We make mistakes, this is called being Human

Fix a wrong git commit

While starting, Git seemed very punishing, unapologetic, not afterthoughts, YOGO kind. But now as I started to get to know git a bit better and I understood that under this facade, somewhere deep-down there is a soft corner.

Enough of the drama, let's get to the point.

In this post I'll try to show how we can undo a git commit, using command line.

Suppose we made a wrong commit or extra files in commit or something which is not complete or development ready or simply something not meant to be pushed yet.
Now i want to go back. What to do? Should i run to the forests?

** Don't Panic **
First let's check what went wrong and what are the other commits which i need to consider before giving a PR.
How do you see the last commit?

git log or
git log --oneline

It will give us the list of commits made by you and other people working on the same repository.
Like this:

commit < last commit hash> Author: Tufail Shah <example@email.com> Date: Sun Sep 22 00:00:00 2020 +0000 {my commit message} ...

To test a specific commit (e.g.: {last commit hash}), that you think has the last working version, you can type the following:

git checkout {commit hash}

This will make the working repository match the state of this exact commit.

After you do this you’ll get the following output:

root@debian:/home/debian/test-project# git checkout 'commit hash' Note: checking out 'commit hash'. You are in 'detached HEAD' state. You can look around, make experimental changes and commit them, and you can discard any commits you make in this state without impacting any branches by performing another checkout.

After analyzing the specific commit, if you then decide to stay in that commit state, you can undo the last commit.

If you wish to undo/revert the last commit you can do the following, using the commit hash that you get from the git log command:

git revert 'commit hash' This command will create a new commit with the “Revert” word in the beginning of the message. After this, you’ll notice that you have the HEAD detached at the commit you tested before.

root@debian:/home/debian/test-project# git status HEAD detached at 45uik34f3

To fix this and attach back the HEAD to your working repository, you should checkout the branch you are working on:
git checkout {current branch}

You can also visit Atlassian for detailed info on git Atlassian Git

Summary

If you want to test the previous commit just do

git checkout 'test commit hash' then you can test that last working version of your project. If you want to revert the last commit just do
git revert 'unwanted commit hash' To fix the detached head do
git checkout 'current branch'.

You can also visit Atlassian for detailed info on git Atlassian Git undoing changes

Look me up on:

Twitter: @tufailmsg
GitHub: https://github.com/ShahTufail

Git revert svn coding

Git is awesome and terrible at the same time

Tufail Shah — Mon, 04 May 2020 16:30:42 +0000

Git is awesome, been using it for almost 3 years.
But whenever i run into complex git error's, i feel like I don't even recognize git commands altogether, madarian makes more sense than git then. But i never lost my work on git, sometimes it takes less time to code than fix git issues on the same code.
Anybody else who feels the same.