Forem: Arafat

The Weird Side Of JavaScript

Arafat — Fri, 09 Feb 2024 08:30:19 +0000

JavaScript has its quirks. In this blog post, we’ll explore the weird side of JavaScript that may leave you scratching your head. These quirks are not necessarily bad or wrong but are intriguing.

🧭Table Of Contents

Arrays equal strings
Arrays are not equal
Numbers are sorted alphabetically
String is not a string
Null comparison
NaN is a number
Arrays and objects
Boolean maths
Conclusion

Arrays equal strings

var a = [0, 1, 2];
var b = [0, 1, 2];
var c = '0, 1, 2';

a == c // true
b == c // true
a == b // false

Arrays are not equal

['a', 'b'] !== ['a', 'b']    // true

['a', 'b'] != ['a', 'b']     // true

['a', 'b'] == ['a', 'b']     // false

Numbers are sorted alphabetically

[10, 9, 8, 3, 2, 1, 0].sort();

// [0, 1, 10, 2, 3, 8, 9];

String is not a string

typeof 'Arafat';             // "string"

'Arafat' instanceof String;  // false

Null comparison

0 > null                // false

0 < null                // false

0 >= null               // true

0 == null               // false

0 <= null               // true

typeof null             // "object"

null instanceof Object  // false

NaN is a number

typeof NaN       // 'Number'

123 === 123      // true

NaN === NaN      // false

Arrays and objects

[] + []     // ""

[] + {}     // "[object Object]"

{} + []     // 0

{} + {}     // NaN

Boolean maths

true + false           // 1

true + true == true    // false

Conclusion

Don't worry. It stops to get weird if you know why. 🙈

🎉Don't forget to save the post

Do Like 👍 & Share 🔄

Follow me for more amazing content related to Programming & Web Development 🚀

Credit: @thecodecrumbs🔥

Thanks for reading😊

Visit:
👨‍💻My Portfolio
🏞️My Fiverr
🌉My Github
🧙‍♂️My LinkedIn

Best Animation Libraries For React🎉

Arafat — Fri, 09 Jun 2023 18:57:50 +0000

Today, Web application user interfaces have many elements that make them appealing to users. Developers have had to find new ways of implementing UIs with animation and transitions to meet these modern requirements.

As a result, specialized libraries and tools have been developed to handle animation in web apps. In this article, I will discuss some best React animation libraries I have experience with to help you choose the best one for your project.

🧭Table Of Contents

1. React Spring
- Features Of React Spring
2. Framer Motion
- Features Of Framer Motion
3. TS Particles
- Features Of TS Particles
4. Green Sock
- Features Of Green Sock
5. Remotion
- Features Of Remotion
6. React Move
- Features Of React Move
7. React Awesome Reveal
- Features Of React Awesome Reveal
Conclusion

1. React Spring

React-spring is a spring-physics-based animation library that should cover most of your UI-related animation needs. It gives you flexible tools to confidently cast your ideas into moving interfaces.

React Spring has over 25,000 GitHub stars and 750k weekly NPM downloads.

Features Of React Spring

Smooth and fluid animations for React applications
Physics-based animations for natural and realistic effects
Fine-grained control over animation parameters
Supports complex animations involving multiple elements
Seamless integration with React
Cross-browser and cross-device compatibility

2. Framer Motion

Framer Motion 💘 (a personal favorite) A production-ready motion library for React. Utilize the power behind Framer, the best prototyping tool for teams. Proudly open source.

Framer Motion has over 18,000 GitHub stars and 2.2M weekly NPM downloads.

Features Of Framer Motion

Easy-to-use syntax for creating stunning animations
Supports a wide range of elements and UI components
Customizable options for fine-tuning animations
Gesture support for interactive interactions
Built-in SVG animation capabilities
Variant system for creating reusable animations

3. TS Particles

tsParticles - Easily create highly customizable particles, confetti, and fireworks animations and use them as animated backgrounds for your website. Ready-to-use components available for Reacts, Angular, Svelte, and Web Components.

TS Particles has over 5,500 GitHub stars and 54k weekly NPM downloads.

Features Of TS Particles

Stunning particle animations for visually captivating websites
Customizable configurations for size, shape, color, and behavior of particles
Interactive interactions with mouse and touch interactions
Performance optimization for smooth animations on all devices
Easy integration with vanilla JavaScript or popular frameworks like React and Vue

4. Green Sock

gsap- GreenSock Animation Platform (GSAP) animates anything
favaSritcan touch (CSS properties, SVG, React Canvas, Generic
objects, whatever) and solves countless browser inconsistencies, all with blazing speed.

Green Sock has over 16,400 GitHub stars and 400k weekly NPM downloads.

Features Of Green Sock

Versatile animations with tweens, timelines, and morphs
Cross-browser compatibility for consistent experiences
High performance with smooth animations and efficient resource utilization
Fine-grained control over animation parameters
Advanced SVG animation capabilities, including morphing and path animation
Scroll-driven animations for captivating effects
Vast plugin ecosystem for extending capabilities with physics-based animations, motion paths, and more.

5. Remotion

Remotion allows you to create videos and animation using familiar tools and languages like HTML, CSS, JavaScript, and TypeScript. So, you can learn about video creation without any knowledge. Instead, you can use your expertise in programming to create animation and videos using Remotion.

Remotion has more than 16,000 GitHub stars and 14k weekly NPM downloads.

Features Of Remotion

Browser-based video creation using React components
Powerful timeline editor for sequencing and animating components
Dynamic content generation with props for personalized and data-driven videos
Code-driven customization and manipulation with JavaScript
High-quality output in various formats and resolutions
Collaboration and version control support with Git integration
Seamless integration with existing React workflows and tooling

6. React Move

React Move allows developers to make attractive, data-driven animations. It is a lightweight library that has lifecycle events on transitions.

React Move has more than 6,500 GitHub stars and 90,00 weekly NPM downloads.

Features Of React Move

Declarative syntax for defining animations in React applications
Multiple animation types available (translate, scale, rotate, opacity)
Customizable transitions with control over timing, duration, and easing
Interpolation and interpolation functions for smooth transitions
SVG animation support for animating SVG elements and attributes
Seamless integration with React, leveraging its component-based architecture and state management.

7. React Awesome Reveal

React Awesome Reveal offers reveal animations by utilizing the Intersection Observer API to identify when elements are visible within the viewport. Emotion efficiently implements CSS animations for enhanced performance and hardware acceleration.

React Awesome Reveal has more than 873 GitHub stars and 10,000 weekly NPM downloads.

Features Of React Awesome Reveal

Scroll-triggered animations for captivating reveal effects
Variety of animation options: fades, slides, zooms, rotations, and more
Customization and control over animation properties
Sequential animations for cascading or staggered effects
Integration with Intersection Observer for efficient tracking of component visibility
Responsive and flexible, suitable for building dynamic websites
Simple implementation with an easy-to-use API

Conclusion

I discussed seven great React animation libraries with unique features in this article. I hope my article helped you choose the best React animation library for your project. Thank you for reading🥰.

Visit:
👨‍💻My Portfolio
🏞️My Fiverr
🌉My Github
🧙‍♂️My LinkedIn

My Journey To 3k+ Followers In 5 Months🥰

Arafat — Sun, 28 May 2023 14:00:01 +0000

Hey there, fellow developers! Today, I want to share my exhilarating journey on Dev.to, where I amassed over 3,000+ followers within five months. So buckle up and join me as I recount the ups, downs, and strategies that led to this unexpected accomplishment.

The Early Days: Testing the Waters

When I first dipped my toes into the Dev.to community, I had no idea what awaited me. With passion and a love for sharing knowledge, I began posting articles on various fascinating topics. My initial goal was to connect with like-minded individuals and spark insightful discussions.

Building a Strong Foundation: Consistency and Quality Content

One of the key factors behind my rapid follower growth was maintaining a consistent presence on the platform. I made it a point to publish new articles regularly, striving to balance quantity and quality. Consistency helped me establish credibility and gave followers something to look forward to.

However, publishing frequently is only enough if the content is up to par. So I dedicated ample time to research, ensuring that each piece I wrote was well-informed, accurate, and helpful to fellow developers. In addition, I delved into both beginner-friendly and advanced topics, catering to a wide range of audiences and interests.

Engaging with the Community: The Power of Interaction

Engagement played a pivotal role in my journey to 3k+ followers. I actively participated in discussions, commenting thoughtfully on other developers' articles and engaging in healthy debates. This interaction helped me forge connections, expand my network, and establish myself as a friendly, approachable community member.

Additionally, I made it a point to respond promptly to comments on my articles, sparking conversations and fostering a sense of community. Genuine engagement boosted my follower count and allowed me to learn from the diverse perspectives shared by my fellow developers.

Leveraging Social Media: Spreading the Word

Dev.to is an incredible platform, but it's equally important to tap into the power of social media to expand your reach. I leveraged platforms like Twitter, LinkedIn, and GitHub to share my articles, reaching a broader audience beyond the confines of Dev.to. Utilizing relevant hashtags, engaging with other developers, and participating in relevant communities proved invaluable in driving traffic back to my Dev.to profile.

Collaborations and Cross-Promotion: Strength in Numbers

Teaming up with other developers for collaborations and cross-promotion can be a game-changer. I contacted individuals with complementary skill sets or shared interests to create joint articles or host virtual events. Collaborations introduced me to new audiences, enabling me to tap into their follower base while offering them exposure to mine. Together, we amplified our impact and fostered a sense of camaraderie within the community.

Gratitude and Beyond:

I am grateful for the Dev.to the community, for embracing my ideas, and for joining me on this incredible journey. With your support, I experienced the personal and professional growth I am relishing.

Reaching 3,000+ followers in five months is not merely a numerical milestone; it symbolizes the connections we've built, the knowledge we've shared, and the collective success we've achieved. I am forever grateful for the invaluable opportunities Dev.to has provided, and I eagerly look forward to continuing this journey with all of you💪.

Visit:
👨‍💻My Portfolio
🏞️My Fiverr
🌉My Github
🧙‍♂️My LinkedIn

Flexbox "justify-content" visual representation🔥

Arafat — Sun, 28 May 2023 12:22:52 +0000

Checkout this beautiful CSS flexbox justify-content visual representation by Mads Brodt🤯

In case you have missed my CSS Flexbox illustration, click here

Do Like ❤️ & Share your feedback 🙌

Visit:
👨‍💻My Portfolio
🏞️My Fiverr
🌉My Github
🧙‍♂️My LinkedIn

Thanks for your support 💯

🎉Amazing "React Libraries" For Everyone

Arafat — Thu, 18 May 2023 19:56:38 +0000

In this article, we embark on an exhilarating journey through some of the best React libraries available today. We will explore a selection of libraries that have gained widespread acclaim within the React community, making them invaluable assets in the arsenal of any React developer.

🧭Table of contents

TanStack Query
DnD Kit
React Spring
Atropos
React Dropzone
React Tippy
React Select
Material UI
Swiper JS
React PDF
React Joyride
Conclusion

TanStack Query

TANStack Query is a JavaScript library for managing server state. It efficiently manages states across different components, allowing for a more scalable approach to building web applications.

DnD Kit

DND Kit is a React library for building complex drag-and-drop web applications. It provides a set of APIs for handling drag-and-drop interactions, making it easier to build custom drag-and-drop.

React Spring

React Spring is a library for creating animations and transitions in React app. It provides tools and APIs for animating elements on the web page, making it easier to build engaging user interfaces.

Atropos

Atropos is a lightweight, accessible, open-source JavaScript library that creates stunning, touch-friendly 3D parallax hover effects. Available for JavaScript, React, Vue.js, and Svelte.

React Dropzone

React Dropzone is a popular open-source library for creating file upload components in React applications. It provides an easy way to implement drag-and-drop file uploads and supports various customization options.

React Tippy

React Tippy is a well-known npm package that enables tooltips for React applications. Tooltips are tiny information boxes that pop up when the user hovers over or clicks on an item. They are typically used to offer extra context or explanations for UI elements, making the user experience more enjoyable and improving usability.

React Select

React Select is designed to replace the native HTML element, offering a more robust and customizable alternative. It provides various features and options for various use cases, including searching, filtering, multi-select, and asynchronous loading.

Material UI

Material UI is a popular React component library that provides a set of pre-built UI components. It is highly customizable, with a wide range of theming options and styles that can be easily modified.

Swiper JS

Swiper.js is a JS library for creating touch-based, mobile-friendly sliders and carousels for web apps. It provides many features and options for building highly customizable sliders.

React PDF

React PDF is a JS library for generating PDF documents in React apps. It provides a set of React components that can be used to create PDFs, making it easier to generate dynamic and data-driven PDF files.

React Joyride

React Joyride is a JS library for creating guided walkthroughs in React apps. It provides a set of components for creating step-by-step guides that help users understand the features of an app.

Conclusion

As the React ecosystem evolves, staying informed about the latest advancements and incorporating the correct libraries into your projects can significantly impact your development journey. So, dive in, experiment, and leverage the vast potential of React libraries to take your web development skills to new heights. Happy coding!

Visit:
👨‍💻My Portfolio
🏞️My Fiverr
🌉My Github
🧙‍♂️My LinkedIn

The Only "CSS Selectors" Tutorial You Will Ever Need🔥

Arafat — Tue, 16 May 2023 18:28:52 +0000

👉 Being a developer, I understand the significance of CSS selectors. That's why I've crafted a handy cheat sheet to assist you in swiftly finding the perfect selector for your upcoming project.

👉 This cheat sheet encompasses the most commonly utilized selectors, including class, ID, attribute, descendant, and pseudo-class selectors. Each selector is accompanied by illustrative examples, enabling easy comprehension and application.

👉 Whether you're a novice or an experienced developer, this cheat sheet will save you valuable time and streamline your coding process.

👉 Don't hesitate any longer! Explore my "Selectors in CSS" cheat sheet and witness the transformation of your web pages into stunning masterpieces! 💻🎉

Do Like ❤️ & Share your feedback 🙌

Visit:
👨‍💻My Portfolio
🏞️My Fiverr
🌉My Github
🧙‍♂️My LinkedIn

Thanks for your support 💯

Learn All 24 "CSS Viewport" Units💫

Arafat — Tue, 16 May 2023 16:16:31 +0000

You've probably heard of the different units used in CSS, but you may not have understood them all — or at least one. This is where I come in. In this post I'll explain all 24 CSS viewport units and their specific uses.

There are six different viewport units in CSS with three unique modifiers giving us 24 combinations. These viewport units can specify lengths as a proportion of the viewport size.

Main four viewport units

The central CSS viewport units are vw, vh, vmin, and vmax. Chances are you know these units as developers widely use them, so I will try to be as brief as possible when explaining them.

vw

vw stands for viewport width. It is a unit of measurement that refers to the width of the viewport, or the visible area of a web page. One vw is equal to 1% of the viewport width.

For example, if you have a div element with a width of 50vw, this means that the div will be 50% of the width of the viewport. If the viewport is 1000 pixels wide, the div will be 500 pixels wide.

Here's an example of how you can use vw in CSS:

.my-div {
  width: 50vw;
}

vh

In addition to vw, you can also use vh, which stands for viewport height, to specify sizes based on the height of the viewport. One vh is equal to 1% of the viewport height.

For example:

.my-div {
  height: 10vh;
}

If your viewport height is 300px then this will set the height of the element with the class "my-div" to 30px.

vmin and vmax

vmin stands for viewport minimum and vmax stands for viewport maximum. These are units of measurement that refer to the smaller or larger dimension of the viewport, respectively.

One vmin is equal to 1% of the smaller dimension of the viewport (either the width or the height, whichever is smaller). One vmax is equal to 1% of the larger dimension of the viewport (either the width or the height, whichever is larger).

For example, if you have a div element with a width of 50vmin, this means that the div will be 50% of the smaller dimension of the viewport. If the viewport is 1000 pixels wide and 600 pixels tall, the div will be 300 pixels wide (50% of the smaller dimension, which is the height).

Here's an example of how you can use vmin in CSS:

.my-div {
  width: 50vmin;
}

Similarly, you can use vmax to specify sizes based on the larger dimension of the viewport.

For example:

.my-div {
  width: 75vmax;
}

This will set the width of the element with the class "my-div" to 75% of the larger dimension of the viewport.

Two New Viewport Units in CSS

Apart from the above four units, CSS now defines two other viewport units: vi and vb. The main reason for this change is to make adopting different writing directions in the code easier. For example, your entire application changes direction from horizontal to vertical writing orientation. In that case, the idea of top/bottom or width/height doesn't necessarily mean the same. Because if you want to add padding top and bottom of your text, This will be seen as left and right padding in vertical writing systems rather than top and bottom padding. That's the reason CSS added vi and vb viewport units.

vi

vi stands for Viewport Inline, 1% of the viewport’s size in the inline direction. vi represents the inline direction of your document. A horizontal writing direction corresponds with the width of your viewport, and a vertical writing direction represents the height of your viewport. The easy way to remember the approach is that it is in the same direction as your text.

Here is an example:

.horizontal__direction {
  writing-mode: horizontal-tb;
  width: 30vi; /* Equals to 30vw */
}

.vertical__direction {
  writing-mode: vertical-lr;
  height: 30vi; /* Equals to 30vh */
}

vb

vb is the opposite of vi and stands for Viewport Block, 1% of the viewport’s size in the block direction. In a horizontal writing direction, vi will correspond with the viewport height, and in a vertical document, this will represent the width of your viewport. An easy to remember this unit is to remember that the block direction will always be the direction block elements (two divs) stack on top of one another.

Here is an example:

.horizontal__direction {
  writing-mode: horizontal-tb;
  height: 30vb; /* Equals to 30vh */
}

.vertical__direction {
  writing-mode: vertical-lr;
  width: 30vb; /* Equals to 30vw */
}

Viewport Unit Modifiers

Till now, I have explained the six main types of viewport units, but you can add three different modifiers to these units to make them behave differently when your viewport is resizable.

These modifiers are s, l, and d. To use a modifier, you have to put the modifier after the number and before the unit, eg 10svw, giving us a total of four combinations for each of the six viewport units. vh, svh, lvh, and dvh.

If you don't use a unit modifier, such as 10vw or 10vh, the browser automatically defaults to one of the three modifiers depending on the browser implementation.

`s` modifier

The s modifier stands for Small and represents the smallest possible viewport. For example, when you browse the web on your phone, you may notice that the header part, where the URL and menu option lies, disappears when you scroll down. This happens because your viewport technically changed size since the header is no longer taking up part of your viewport.
For example, setting an element to 100svh would take up 100% of the screen's height based on the screen's size when the header is shown. It does not matter if the header is visible or not. This unit will always base its size on what the viewport would be if the header is showing.

`l` modifier

The l modifier stands for Large and represents the largest possible viewport. You can think of l modifier as the opposite of the s modifier. In our mobile phone example this would be the size of the viewport when the header is NOT shown. For example, setting an element to 100lvh would take up 100% of the screen's height based on the screen's size when the header is not shown.

`d` modifier

The d modifier stands for Dynamic and represents the current viewport size, precisely like a mixer of the s and l modifiers. In our mobile phone example, this would always be the size of the current viewport, no matter if the header is showing or not. If our URL bar is showing, then the d modifier is the same size as the s modifier, and if the header is NOT showing, the d modifier is the same size as the l modifier.

Conclusion

You might find these 24 units confusing and a lot, but it is just six units with three relatively simple modifiers. And most of the time, you will always use the first four units that I have explained(vw, vh, vmin, vmax). And the rest of the units are still in the draft stage, which means they still need to be officially.

Visit:
👨‍💻My Portfolio
🏞️My Fiverr
🌉My Github
🧙‍♂️My LinkedIn

The Only CSS Flexbox Illustration You Will Ever Need

Arafat — Thu, 11 May 2023 21:16:26 +0000

I created this CSS flexbox visual representation🤯

Do Like ❤️ & Share your feedback 🙌

Visit:
👨‍💻My Portfolio
🏞️My Fiverr
🌉My Github
🧙‍♂️My LinkedIn

Thanks for your support 💯

Master "Generics" In Typescript🎉

Arafat — Thu, 11 May 2023 09:44:43 +0000

Generics in Typescript allows you to create a component that can work with different types. This lets users use these components with their specific type.

Before reading this article, please read my article about TS utility types as It will help you to understand this article better.

1. Generics with type
2. Generic functions
3. Generics with built-in functions
4. Inferring the types
5. Constraints on type arguments
6. Constraints in functions
7. Use as when necessary
8. Multiple generics
9. Defaults in type arguments
10. Class Types in Generics
Conclusion

1. Generics with type

The easiest way of using generics is with type. For example:

type MyData<Type> = {
  data: Type
}

type DataAsString =  MyData<string>;
// type DataAsString = {
//    data: string;
// }

Because we passed string as a type parameter, our data will be string type. Likewise, if we pass the number type, our data will be of number type. And that's the beauty of generics. You can work with any type.

type MyData<Type> = {
  data: Type
}

type DataAsString =  MyData<number>;
// type DataAsString = {
//    data: number;
// }

2. Generic functions

As you can pass arguments to a function, you can also pass type arguments to a function. For example:

const fetchData = <Type>(url: string): Promise<Type> => {
    return fetch(url)
}

fetchData<{name: string, age: number}>("/api/books")
  .then(res => {
      console.log(res)
      // res: {name: string, age: number}
  })

We passed {name: string, age: number} as a type argument to the fetchData function, And this type argument tells res what It is supposed to be because this is what's getting typed in Promise<Type>. So now the function fetchData has become a generic function. A generic function is just a normal function but includes a type argument.

If we want to pass another type, our res will replicate that same type.

const fetchData = <Type>(url: string): Promise<Type> => {
    return fetch(url)
}

fetchData<{id: number, email: string}>("/api/books")
  .then(res => {
      console.log(res)
      // res: {id: number, email: string}
  })

3. Generics with built-in functions

You can even use generics with built-in functions. For example, you can create a Set that stores only numbers by using the Set constructor with a type parameter:

const numberSet = new Set<number>();
numberSet.add(1);
numberSet.add(2);
numberSet.add(3);

Similarly, you can create a Map that maps strings to numbers by using the Map constructor with type parameters for the key and value types:

const stringToNumberMap = new Map<string, number>();
stringToNumberMap.set("one", 1);
stringToNumberMap.set("two", 2);
stringToNumberMap.set("three", 3);

4. Inferring the types

If your type argument looks similar to your runtime argument then you don't have to pass a generic type to your function. For example:

function identity<T>(arg: T): T {
  return arg;
}

const result1 = identity<number>(42); // const result1: number
const result2 = identity<string>("hello"); // const result2: string

While the above example looks correct, we can simplify it more:

function identity<T>(arg: T): T {
  return arg;
}

const result1 = identity(42); // const result1: number
const result2 = identity("hello"); // const result2: string

In this case, because we are not passing any type argument, then Typescript will look in the runtime argument to see If It can infer anything from it.
So the return type is inferred from the runtime argument type, and the function returns the same type as it receives.

5. Constraints on type arguments

In our following example, we wanted to be able to use the ReturnType utility type, but the compiler could not prove that every type was a function; it could be a string or number, and as we know, that ReturnType works only with functions, so it warns us that we can’t make this assumption.

type GetPromiseData<T> = Awaited<ReturnType<T>>
// Error: Type 'T' does not satisfy the constraint '(...args: any) => any'

type PromiseResult = GetPromiseData<
  () => Promise<{
    id: string
    email: string
  }>
>

So to make It clear to Tyepscript, We have to say that T is only a function, and we can do this by adding extends (...args: any) => any after the T:

type GetPromiseData<T extends (...args: any) => any> = Awaited<ReturnType<T>>

type PromiseResult = GetPromiseData<
  () => Promise<{
    id: string
    email: string
  }>
>

6. Constraints in functions

In our following example, we wanted to access the .address property of arg, but the compiler could not prove that every type has a .address property, so it warned us that we couldn’t make this assumption.

function myFunc<Type>(arg: Type): Type {
  console.log(arg.address); // Property 'address' does not exist on type 'Type'.
  return arg;
}

To fix this error, we can create an interface with address property in it and extend it with the Type argument:

interface IDetails {
  address: string;
}

function myFunc<Type extends IDetails>(arg: Type): Type {
  console.log(arg.address); // Now we know it has a .address property, so no more error
  return arg;
}

Because the generic function is now constrained, it will no longer work over all types:

myFunc(true);
// error: Argument of type 'boolean' is not assignable to parameter of type 'IDetails'.

Instead, we need to pass in values whose type has address property:

myFunc({ length: 10, address: "Something" });

7. Use `as` when necessary

Sometimes using as is the best thing you can do when using generics. For example:

const ObjectKeys = <T extends {}>(obj: T): Array<keyof T> => {
  return Object.keys(obj) // Error: Type 'string[]' is not assignable to type '(keyof T)[]'. 
}

const result = ObjectKeys({
  id: 6,
  email: "me@gmail.com"
})

Here we are getting an error because the Object.keys method returns an array of string values, and TypeScript cannot guarantee that the string values returned by Object.keys actually correspond to valid keys of the generic type T.

To fix this error, we can explicitly typecast the Object.keys result to an array of keyof T using the as keyword:

const ObjectKeys = <T extends {}>(obj: T) => {
  return Object.keys(obj) as Array<keyof T>
}

const result = ObjectKeys({
  id: 6,
  email: "me@gmail.com"
})

8. Multiple generics

Sometimes we have to use multiple generics to make sure that we are getting back a certain type. Consider the following example:

function getProperty<T>(obj: T, key: keyof T) {
  return obj[key];
}

let x = { a: 1, b: "b", c: true, d: 4 };

getProperty(x, "a"); // return type: string | number | boolean

While the above example is correct, the problem is that the return type is not explicit. Return type is an union consisting of 3 different types. To fix this problem, we can use multiple generic types:

function getProperty<T, Key extends keyof T>(obj: T, key: Key) {
  return obj[key];
}

let x = { a: 1, b: "b", c: true, d: 4 };

getProperty(x, "a"); // return type: number

In this example, we've added generic type parameter Key to represent the key type of the object T. So now we will get a specific return type only.

function getProperty<T, Key extends keyof T>(obj: T, key: Key) {
  return obj[key];
}

let x = { a: 1, b: "b", c: true, d: 4 };

getProperty(x, "c"); // return type: boolean

9. Defaults in type arguments

We can also use default types in generics. Consider the following example:

const makeSet = <T>() => {
  return new Set<T>()
}

const mySet = makeSet() // const mySet: Set<unknown>

Here we are getting unknown because we didn't pass any type argument to makeSet function. We can solve this problem by either passing a type argument like this, makeSet<number>() or by specifying a default type:

const makeSet = <T = number>() => {
  return new Set<T>()
}

const mySet = makeSet() // const mySet: Set<number>

10. Class Types in Generics

We can also refer to class types by their constructor functions. For example:

function create<Type>(c: { new (): Type }): Type {
  return new c();
}

Here's a breakdown of how the function works:

The create function is declared with a type parameter Type, representing the type the function will make.
The function takes a single argument c, an object representing a constructor function for the type Type. The argument has the type { new (): Type }, an object type specifying a constructor function that takes no arguments and returns a value of type Type.
The new keyword is used to create a new instance of the type Type inside the function by calling the constructor function passed as the argument c. The new keyword creates a further object of the type Type and returns it as the result of the function.
The function's return type is specified as Type, which ensures that the function returns an instance of the type specified by the type parameter.

Here's an example of how the create function can be used:

class MyClass {
  constructor(public value: string) {}
}

const instance = create(MyClass);
console.log(instance.value); // Output: undefined

This example defines a simple class, MyClass, with a single property value. We then call the create function, passing the MyClass constructor function as the argument. The create function creates a new instance of MyClass using the constructor function and returns it as an instance of type MyClass.

Conclusion

In conclusion, TypeScript's support for generics provides a powerful tool for writing type-safe and reusable code. By defining generic types and functions, you can create code that works with various types while maintaining strict type-checking.

To make the best use of generics in TypeScript, it's essential to understand how to define and use generic types, specify constraints on generic type parameters, and use type inference to reduce the need for explicit type annotations. Additionally, it's crucial to use generics to maintain good code readability and avoid unnecessary complexity.

When appropriately used, generics can significantly improve the quality and maintainability of your TypeScript code. By taking advantage of TypeScript's powerful type system and the flexibility of generic types, you can create highly reusable and expressive code while still maintaining the strong type safety that TypeScript provides.

Visit:
👨‍💻My Portfolio
🏞️My Fiverr
🌉My Github
🧙‍♂️My LinkedIn

🔥Hot CSS Tools For Everyone

Arafat — Tue, 09 May 2023 14:11:18 +0000

As a web developer, keeping up with the latest tools and technologies can be challenging. However, with CSS being a fundamental part of front-end web development, having access to the right CSS tools can make a significant difference in the productivity and creativity of a developer.

Whether you are a beginner or an experienced developer, there are always new and exciting CSS tools and libraries to explore that can help you streamline your workflow and create stunning designs.

In this article, we will look at some of the hottest CSS tools available to developers today, including frameworks, libraries, and utilities, to help you stay ahead of the curve and take your CSS skills to the next level.

🕔Table of contents

Neumorphism
Animista
Animated Background
Spin Kit
Flexplorer
Grid Generator
Layout Generator
Shaddows Brumm
Glassmorphism
Cubic-Bezier
Haikei
Conclusion

Neumorphism

Neumorphism.io is a website that showcases the neumorphism design trend, also known as soft UI or neo-skeuomorphism. It generates soft-UI CSS styles using shadows.

Animista

Animista is a website that provides a collection of CSS animations and animation presets that can be easily customized and applied to web elements.

Animated Background

Wweb.dev offers an Animated CSS Background Generator, which allows users to create and customize animated backgrounds for their web projects.

Spin Kit

Spin Kit is a collection of CSS loading animations created by Tobias Ahlin. It offers a range of simple, lightweight, and customizable spinners that can be easily integrated into web projects.

Flexplorer

Flexplorer is an online tool by web developer Bennett Feely that helps developers learn and experiment with CSS flexbox layouts. Flexbox lets you build flexible and responsive layouts quickly.

Grid Generator

CSS Grid Generator is a web-based tool that helps developers create complex grid layouts using CSS Grid. Grid layouts are a powerful way to create flexible and responsive designs for web pages.

Layout Generator

CSS Layout Generator is a web-based tool that allows developers to create and experiment with CSS layout styles. It provides a visual interface for designing and customizing layout components.

Shaddows Brumm

Shadows Brumm is a web-based tool for generating CSS box-shadow effects. It provides an easy-to-use interface that allows users to create complex and visually appealing box-shadow effects using a variety of parameters and options.

Glassmorphism

Glassmorphism is a design trend that uses transparent and blurred glass-like backgrounds to create a modern, sleek look for user interfaces. The Glassmorphism Generator is a web-based tool for creating Glassmorphism-inspired designs and graphics.

Cubic-Bezier

Cubic-Bezier is a web-based tool that allows users to create custom easing curves, animation and transition.

Haikei

Haikei is a web-based tool for creating customizable and scalable vector graphics for use in web design, illustrations, and other graphic design projects. The app allows users to create unique designs by combining and modifying various shapes, colors, and patterns.

Conclusion

In conclusion, CSS tools are essential for developers who want to create visually stunning and responsive websites. In addition, the proper set of tools can significantly improve productivity, allowing developers to save time and focus on more critical aspects of their projects.

I hope this article has provided valuable insights into some of the hottest CSS tools available today and will help you enhance your development skills and create exceptional user experiences for your audience. Remember to experiment and find what works best for you, as the right CSS tools can help you take your projects to the next level.

Visit:
👨‍💻My Portfolio
🏞️My Fiverr
🌉My Github
🧙‍♂️My LinkedIn

Learn "Zod" In 5 Minutes

Arafat — Fri, 28 Apr 2023 21:22:12 +0000

Goals of Zod

Validation library (Schema first)
First class typescript support (No need to write types twice)
Immutable (Functional programming)
Super small library (8kb)

Setup

npm i zod
import { z } from "zod";
Must have strict: true in tsconfig file

Basic Usage

// creating a schema
const UserSchema = z.object({
  username: z.string(),
});

// extract the inferred type
type User = z.infer<typeof UserSchema>;
// { username: string }

const user: User = {username: "Arafat"}

// parsing
UserSchema.parse(user); // => {username: "Arafat"}
UserSchema.parse(12); // => throws ZodError

// "safe" parsing (doesn't throw error if validation fails)
UserSchema.safeParse(user); 
// => { success: true; data: {username: "Arafat"} }

UserSchema.safeParse(12); 
// => { success: false; error: ZodError }

Basic Types

import { z } from "zod";

// primitive values
z.string();
z.number();
z.bigint();
z.boolean();
z.date();
z.symbol();

// empty types
z.undefined();
z.null();
z.void(); // accepts undefined

// catch-all types
// allows any value
z.any();
z.unknown();

// never type
// allows no values
z.never();

Validations

All types in Zod have an optional options parameter you can pass as the last param which defines things like error messages.

Also many types has validations you can chain onto the end of the type like optional

z.string().optional()
z.number().lt(5)
optional() - Makes field optional
nullable - Makes field also able to be null
nullish - Makes field able to be null or undefined

z.string().max(5);
z.string().min(5);
z.string().length(5);
z.string().email();
z.string().url();
z.string().uuid();
z.string().cuid();
z.string().regex(regex);
z.string().startsWith(string);
z.string().endsWith(string);
z.string().trim(); // trim whitespace
z.string().datetime(); // defaults to UTC, see below for options

z.number().gt(5);
z.number().gte(5); // alias .min(5)
z.number().lt(5);
z.number().lte(5); // alias .max(5)

z.number().int(); // value must be an integer

z.number().positive(); //     > 0
z.number().nonnegative(); //  >= 0
z.number().negative(); //     < 0
z.number().nonpositive(); //  <= 0

z.number().multipleOf(5); // Evenly divisible by 5. Alias .step(5)

z.number().finite(); // value must be finite, not Infinity or -Infinity

Default Values

Can take a value or function.
Only returns a default when input is undefined.

z.string().default("Arafat")
z.string().default(Math.random)

Literals

const one = z.literal("one");

// retrieve literal value
one.value; // "one"

// Currently there is no support for Date literals in Zod.

Enums

Zod Enums

const FishEnum = z.enum(["Salmon", "Tuna", "Trout"]);

type FishEnum = z.infer<typeof FishEnum>;
// 'Salmon' | 'Tuna' | 'Trout'

// Doesn't work without `as const` since it has to be read only
const VALUES = ["Salmon", "Tuna", "Trout"] as const;
const fishEnum = z.enum(VALUES);

fishEnum.enum.Salmon; // => autocompletes

TS Enums: (You should use Zod enums when possible)

enum Fruits {
  Apple,
  Banana,
}
const FruitEnum = z.nativeEnum(Fruits);

Objects

z.object({})

// all properties are required by default
const Dog = z.object({
  name: z.string(),
  age: z.number(),
});

// extract the inferred type like this
type Dog = z.infer<typeof Dog>;

// equivalent to:
type Dog = {
  name: string;
  age: number;
};

.shape.key - Gets schema of that key

Dog.shape.name; // => string schema
Dog.shape.age; // => number schema

.extend - Add new fields to schema

const DogWithBreed = Dog.extend({
  breed: z.string(),
});

.merge - Combine two object schemas

const BaseTeacher = z.object({ students: z.array(z.string()) });
const HasID = z.object({ id: z.string() });

const Teacher = BaseTeacher.merge(HasID);
type Teacher = z.infer<typeof Teacher>; // => { students: string[], id: string }

.pick/.omit/.partial - Same as TS

const Recipe = z.object({
  id: z.string(),
  name: z.string(),
  ingredients: z.array(z.string()),
});


// To only keep certain keys, use .pick
const JustTheName = Recipe.pick({ name: true });
type JustTheName = z.infer<typeof JustTheName>;
// => { name: string }


// To remove certain keys, use .omit
const NoIDRecipe = Recipe.omit({ id: true });
type NoIDRecipe = z.infer<typeof NoIDRecipe>;
// => { name: string, ingredients: string[] }


// To make every key optional, use .partial
type partialRecipe = Recipe.partial();
// { id?: string | undefined; name?: string | undefined; ingredients?: string[] | undefined }

.deepPartial - Same as partial but for nested objects

const user = z.object({
  username: z.string(),
  location: z.object({
    latitude: z.number(),
    longitude: z.number(),
  }),
  strings: z.array(z.object({ value: z.string() })),
});

const deepPartialUser = user.deepPartial();

/*
{
  username?: string | undefined,
  location?: {
    latitude?: number | undefined;
    longitude?: number | undefined;
  } | undefined,
  strings?: { value?: string}[]
}
*/

passThrough - Let through non-defined fields

const person = z.object({
  name: z.string(),
});

person.parse({
  name: "bob dylan",
  extraKey: 61,
});
// => { name: "bob dylan" }
// extraKey has been stripped


// Instead, if you want to pass through unknown keys, use .passthrough()
person.passthrough().parse({
  name: "bob dylan",
  extraKey: 61,
});
// => { name: "bob dylan", extraKey: 61 }

.strict - Fail for non-defined fields

const person = z
  .object({
    name: z.string(),
  })
  .strict();

person.parse({
  name: "bob dylan",
  extraKey: 61,
});
// => throws ZodError

Arrays

const stringArray = z.array(z.string()); - Array of strings

.element - Get schema of array element

stringArray.element; // => string schema

.nonempty - Ensure array has a value

const nonEmptyStrings = z.string().array().nonempty();
// the inferred type is now
// [string, ...string[]]

nonEmptyStrings.parse([]); // throws: "Array cannot be empty"
nonEmptyStrings.parse(["Ariana Grande"]); // passes

.min/.max/.length - Gurantee certail size

z.string().array().min(5); // must contain 5 or more items
z.string().array().max(5); // must contain 5 or fewer items
z.string().array().length(5); // must contain 5 items exactly

Records

Useful when you don't know the exact keys and only care about the values

z.record(z.number()) - Will gurantee that all the values are numbers

z.record(z.string(), z.object({ name: z.string() })) - Validates the keys match the pattern and values match the pattern. Good for things like stores, maps and caches.

Maps

Usually want to use this instead of key version of record

const stringNumberMap = z.map(z.string(), z.number());

type StringNumberMap = z.infer<typeof stringNumberMap>;
// type StringNumberMap = Map<string, number>

Sets

Works just like arrays (Only unique values are accepted in a set)

const numberSet = z.set(z.number());
type NumberSet = z.infer<typeof numberSet>;
// type NumberSet = Set<number>

Promises

Does validation in two steps:

Ensures object is promise
Hooks up .then listener to the promise to validate return type.

const numberPromise = z.promise(z.number());

numberPromise.parse("tuna");
// ZodError: Non-Promise type: string

numberPromise.parse(Promise.resolve("tuna"));
// => Promise<number>

const test = async () => {
  await numberPromise.parse(Promise.resolve("tuna"));
  // ZodError: Non-number type: string

  await numberPromise.parse(Promise.resolve(3.14));
  // => 3.14
};

Advanced Validation

.refine

const email = z.string().refine((val) => val.endsWith("@gmail.com"),
{message: "Email must end with @gmail.com"}
)

Also you can use the superRefine method to get low level on custom validation, but most likely won't need it.

Handling Errors

Errors are extremely detailed in Zod and not really human readable out of the box. To get around this you can either have custorm error messages for all your validations, or you can use a library like zod-validation-error which adds a simple fromZodError method to make error human readable.

import { fromZodError } from "zod-validation-error"

console.log(fromZodError(results.error))

Conclusion

There are many more concepts of Zod, and I can't explain all that stuff here. However, If you want to discover them, head to Zod's official documentation. They've explained everything perfectly there.

So, this was it, guys. I hope you guys will like this crash course. I've tried my best to pick all of the essential concepts of Zod and explain them. If you have any doubts or questions, then feel free to ask them in the comment section. I will answer as soon as I see it. See you all in my next article😊.

Visit:
👨‍💻My Portfolio
🏞️My Fiverr
🌉My Github
🧙‍♂️My LinkedIn

Top 10 Full-stack Projects For Beginners

Arafat — Sat, 22 Apr 2023 07:45:42 +0000

Are you a beginner looking for good full-stack project ideas to level your skills to the next level? Then look no further, as I will review some helpful and handy projects in this article. Building coding projects is a great way to have a fun and challenging experience that will help you improve your coding knowledge and understanding of web development.

This blog post will showcase the Top 10 Best full-stack Projects for Beginners. Each project on this list is simple and challenging enough to help you learn new concepts and techniques that will make your web development journey easier.

So let's dive in and start the project list.

1. E-commerce Website

Create a robust and user-friendly online store where customers can browse a wide range of products, add items to their cart, and securely checkout. The website will also provide features like order tracking, user profiles, and order history, making it a seamless shopping experience.

User registration and authentication
Product browsing and search functionality
Add-to-cart and checkout process with payment integration
Order management and tracking
User profile and order history

2. Social Media Platform

Build a dynamic social media platform that allows users to connect with friends, create and manage their profiles, share posts, and interact with other users through comments and likes. In addition, the forum will provide a personalized news feed and timeline, making it easy for users to stay connected and engaged with their social circle.

User registration and authentication
Profile creation and management
Friend requests and messaging functionality
Post-creation, editing, and deletion
News feed and timeline
Like, comment, and share functionality

3. Online Marketplace

Develop an online marketplace where users can buy and sell items securely and efficiently. The platform will offer features like item listings, search functionality, messaging between buyers and sellers, and payment integration, creating a safe and convenient online buying and selling experience.

User registration and authentication
Item listing and search functionality
Add-to-cart and checkout process with payment integration
User profiles and reviews/ratings
Messaging and communication between buyers and sellers
Order management and tracking

4. Task Management App

Build a comprehensive task management application that helps users create, assign, and track tasks, set deadlines, and collaborate with team members. In addition, the app will provide features such as notifications, task categorization, and progress tracking, making it a valuable tool for enhancing productivity and organization.

User registration and authentication
Task creation, assignment, and tracking
Deadline setting and reminders
Collaborative task management with team members
Task categorization and prioritization
Data visualization for task progress

5. Recipe App

Create a user-friendly recipe app allowing users to search and save recipes, create meal plans, and share recipes. In addition, the app will offer recipe categorization, ratings, and social sharing features, making it a go-to resource for discovering and organizing recipes.

User registration and authentication
Recipe search and filtering by ingredients or categories
Recipe saving and meal planning
Recipe creation, editing, and deletion
Reviews and ratings for recipes
Social sharing and commenting on recipes

6. Blogging Platform

Build a versatile blogging platform that empowers users to create and publish blog posts, manage content, and engage with readers through comments and likes. The forum will offer features such as blog post categorization, author profiles, and search functionality, making it a powerful content creation and dissemination tool.

User registration and authentication
Blog post creation, editing, and deletion
Blog post categorization and tagging
User profiles and author management
Commenting and liking on blog posts
Search functionality for blog posts

7. Job Board

Develop a comprehensive job board website that connects employers with job seekers in a user-friendly manner. The platform will provide features such as job posting, resume submission, and application tracking, making it a valuable resource for job seekers and employers.

Employer and job seeker registration and authentication
Job posting and search functionality
Resume submission and application tracking
Job alerts and notifications
Employer profiles and company information
Resume and job history management for job seekers

8. Fitness Tracker

Create a fitness tracker app that helps users log their workouts, track their progress, and set fitness goals. The app will provide features such as exercise tracking, data visualization, and goal setting, making it a valuable tool for monitoring and improving fitness levels.

User registration and authentication
Exercise logging and tracking
Data visualization for workout progress
Goal setting and tracking
Exercise categorization and tracking of different activities
Calendar integration for tracking workout schedules

9. Event Management App

Build an event management app that simplifies creating, managing, and attending events. The app will offer features such as event creation, RSVP functionality, and notifications, making it easy for users to plan and participate in events and stay organized.

User registration and authentication
Event creation, editing, and deletion
RSVP functionality and attendee management
Event invitations and notifications
Event details and location information
Calendar integration for tracking events

10. Weather App

Create a weather app that provides real-time weather data, weather forecasts, and location-based updates. In addition, the app will offer features such as weather alerts, data visualization, and search functionality, making it a reliable source of weather information for users on the go.

Real-time weather data display for different locations
Weather forecasts for multiple days
Location-based weather updates
Data visualization for weather information
Search functionality for different locations
Weather alerts and notifications

Conclusion

In conclusion, these full-stack projects offer an excellent opportunity for web developers to improve their coding skills. Whether you’re a beginner or an intermediate developer, these projects can challenge you and help you expand your knowledge of front-end and back-end.
So, choose a project that interests you, get ready to code, and enjoy the learning experience—building these projects independently rather than simply copying the others is best.

Visit:
👨‍💻My Portfolio
🏞️My Fiverr
🌉My Github

Forem: Arafat

The Weird Side Of JavaScript

🧭Table Of Contents

Arrays equal strings

Arrays are not equal

Numbers are sorted alphabetically

String is not a string

Null comparison

NaN is a number

Arrays and objects

Boolean maths

Conclusion

Best Animation Libraries For React🎉

🧭Table Of Contents

1. React Spring

Features Of React Spring

2. Framer Motion

Features Of Framer Motion

3. TS Particles

Features Of TS Particles

4. Green Sock

Features Of Green Sock

5. Remotion

Features Of Remotion

6. React Move

Features Of React Move

7. React Awesome Reveal

Features Of React Awesome Reveal

Conclusion

My Journey To 3k+ Followers In 5 Months🥰

The Early Days: Testing the Waters

Building a Strong Foundation: Consistency and Quality Content

Engaging with the Community: The Power of Interaction

Leveraging Social Media: Spreading the Word

Collaborations and Cross-Promotion: Strength in Numbers

Gratitude and Beyond:

Flexbox "justify-content" visual representation🔥

🎉Amazing "React Libraries" For Everyone

🧭Table of contents

TanStack Query

DnD Kit

React Spring

Atropos

React Dropzone

React Tippy

React Select

Material UI

Swiper JS

React PDF

React Joyride

Conclusion

The Only "CSS Selectors" Tutorial You Will Ever Need🔥

Learn All 24 "CSS Viewport" Units💫

Main four viewport units

vw

vh

vmin and vmax

Two New Viewport Units in CSS

vi

vb

Viewport Unit Modifiers

s modifier

l modifier

d modifier

Conclusion

The Only CSS Flexbox Illustration You Will Ever Need

Master "Generics" In Typescript🎉

Table of contents

1. Generics with type

2. Generic functions

3. Generics with built-in functions

4. Inferring the types

5. Constraints on type arguments

6. Constraints in functions

7. Use as when necessary

8. Multiple generics

9. Defaults in type arguments

10. Class Types in Generics

Conclusion

🔥Hot CSS Tools For Everyone

`s` modifier

`l` modifier

`d` modifier

7. Use `as` when necessary