Forem: Ishrat

The rise and fall of MySpace

Ishrat — Tue, 27 Feb 2024 19:46:12 +0000

MySpace, a social networking site, dominated the mid-to-late 2000s, with 75 million monthly active users.

Once valued at $12 billion, it declined rapidly after Facebook's popularity in 2008.

Here's exactly what went wrong 👇

Back in the mid-to-late 2000s, MySpace was the most popular social network, with 75 million monthly users.

It was popular in the early 2000s, but no one seems to remember it today.

What went wrong with MySpace, the Facebook of the 2000s that dominated the social media space?

The rise of MySpace

In 2003, a lot of university students were using Facebook (a social network).

@myspacetom and @Chris_DeWolfe saw the potential in social networking and decided to develop their own social platform called MySpace, inspired by the popular features of Friendster.

They were working at this company called eUniverse, doing internet marketing stuff at the time.

It only took them 10 days to make the first version of MySpace, and it was ready to launch.
Throughout the process, Brad Greenspan, CEO of eUniverse, supported the project with a team of programmers and other resources.

Initially, MySpace users were eUniverse employees, and the company ran contests to encourage sign-ups.
MySpace quickly gained users and competed with Friendster for popularity.

They used eUniverse's huge email list of 20 million subscribers to spread the word about MySpace.

In just a month, MySpace had 1M people sign up. And wait for it—within 9 months, they hit 5 million subs.
It seemed like Myspace had the perfect business strategy going on at that time.

A challenge to Friendster

One reason MySpace became big was because it came out in 2003, when social media was just taking off.
Before MySpace, there was Friendster, but it had issues, and people started losing interest.

MySpace stepped in, letting users do cool things with their pages and adding features people wanted.
It became a hub for creative people and set the stage for how brands and users connect today, kind of like influencers.

Strategic moves

The success of MySpace was also due to meticulous planning.

Collaborating with tech experts for software architecture was just one part.
Opting for ColdFusion server hosting over Friendster's Java server pages was a key move.

It's not always about the numbers; it's about making the right choices that helped MySpace overtake Friendster.
So, back in February 2005, Chris and Mark Zuckerberg from Facebook had a chat about buying it.

The $75 million offer from Zuck seemed way too high to Chris for what they were getting.

So, the deal never happened.

News Corporation acquired MySpace

In July 2005, Rupert Murdoch's News Corporation (a large media company) bought MySpace from eUniverse for $580 million.

In the first year alone, MySpace tripled its initial purchase value, making it a sweet deal.

In 2006, MySpace expanded to the UK, China, and others.

They hit 100 million MySpace signups in August 2006.

MySpace also joined the OpenSocial Alliance, which Google leads, in November 2007.

It works with sites like LinkedIn and hi5 to set standards for social network software developers.

Downfall begins

MySpace was at its peak in 2007 and valued at $12 billion, but things changed abruptly on April 19, 2008, when Facebook stole the crown and surpassed MySpace.

MySpace began to decline and started losing memberships after that, whereas Facebook continued to thrive.

The problem was that there was not much of a comparison between MySpace and Facebook; Facebook was clearly the better product.

This was mostly because MySpace fell behind as Facebook improved, making it easier for people to use.
Third-party developers helped Facebook make apps and games. MySpace, on the other hand, failed because it was slow to adopt new technologies.

Adversity post-acquisition

After MySpace was acquired, the goals and priorities of the platform shifted & there was a greater emphasis on generating more revenue.
It was impossible to avoid the annoying ads that were all over MySpace.

These ads sent people to sketchy websites and got them to sign up for credit cards and other services.

News Corporation tried to reach its unrealistic financial goals by adding different parts that could make money without giving them much thought or planning.

This resulted in poor management of developer resources.
Users who were once popular on MySpace started to leave the site for other platforms because it failed to prioritize community needs & was no longer user-friendly.

Even though MySpace has tried many times to change its image, it has not been able to regain its former popularity.

Time Inc. acquisition of MySpace

In 2011, News Corp. sold MySpace to Time Inc. for an undisclosed sum, speculated to be $35 million.

The platform still exists today, with a primary focus on music, but it is much smaller than it once was.

MySpace faced a setback in 2019 when it had to apologize for losing 12 years of content during a server migration.

While MySpace is no longer popular and inactive, the website still exists but has shifted its focus.
It now features content related to music artists, actors, TV shows, and movies, functioning more like an entertainment website.

It went downhill when it switched from being a social network to an entertainment hub.
People initially hopped on for socializing, & instead of improving that, they changed the very reason people joined in the first place.

The articles available on the site are sourced from the music magazine Spin, and no new articles have been published on MySpace since Mar 2022.
MySpace is kind of hanging in there, but it's not what it used to be.

The platform is a bit of a mess – broken images, tracks that don't play – looks like they're not really keeping up.

Plus, there is no dedicated app for MySpace on iPhone or Android.
You can still access it on your phone's browser, but the vibe's just not there anymore, you know?

Wrap up

That's all for now!

If you enjoy reading similar stories, follow me (@ishratumar) and Muhammad Umar on Twitter/X for a daily dose of insightful content.

Learn TypeScript from experts

Ishrat — Thu, 31 Aug 2023 17:21:42 +0000

Are you ready to ride the TypeScript wave all the way to mastery? Let me introduce you to a fantastic resource: Zero to Mastery's TypeScript Bootcamp. It is like a journey where you will effortlessly master TypeScript coding!

So here's how it works:

You will learn everything from the ground up, whether you are completely new to this or have some prior experience.
First-hand experience working on real-world projects. Your skills will advance, but you'll also unlock your creative potential.
Join the popular Zero to Mastery community. It is a place where mentors and students may help one another and grow together.

Sound exciting? You bet! Grab your spot at the TypeScript Bootcamp here: TypeScript Bootcamp

This is for you if:

You're a developer ready to rule the world of coding with the language that is expanding most rapidly.
Practical knowledge excites you, especially if it leads to actual employment chances.
You are ready for some practical, real-world coding action because you are tired of those hazy tutorials.
Don't let this incredible coding opportunity pass you by! Your love for coding is waiting!

Django Bootcamp: The only resource you need

Ishrat — Fri, 11 Aug 2023 08:38:47 +0000

Zero to Mastery offers a variety of programming courses to help you in breaking into the world of technology.

The ZTM platform is really helpful in my experience. It offers a better user experience and is more reasonably priced than other platforms.

Although it is a relatively new platform, they are constantly updating it with new courses.

They recently launched their brand new Django Bootcamp, which has been in development since last year.

Have you ever used Django before? It is an open-source Python web framework that makes it easy to develop scalable and reliable web applications.

Thus, Django's slogan is "the web framework for perfectionists with deadlines ”.

With this Bootcamp, you'll have the opportunity to work on some amazing projects, and if you know ZTM, you know that they believe in learning by doing, as well as a storyline featuring Bruno.

In case you don't know, Bruno is a fictional character in several ZMT courses to give students the feeling that they are really working at an organization.

You can learn Django from the ground up by creating some great projects. Become a Django Developer and land a job by learning everything from the basics to the most advanced techniques!

Here's the link to join the course 👉 Django Bootcamp: Zero to Mastery

Know that the link provided above is an affiliate link :))

Thank you for taking the time to read! Follow @ishratumar for more content.

Firebase vs. Supabase: which one should I select?

Ishrat — Tue, 08 Aug 2023 11:44:13 +0000

Firebase and Supabase are well-known BaaS (backend as a service) platforms. These platforms provide pre-built backend infrastructure and services and revolutionize web and mobile app development.

Here, we shall compare these two and learn more about them.

Firebase

Firebasewas first released in 2011, and Google acquired it in 2014. Firebase is very popular because of its simplicity. It offers products in three phases: Build, Release, and Engage. Every stage corresponds to a distinct phase of development. For each of these phases, Firebase has developed unique products. Google Cloud supports Firebase projects, allowing your application to scale to billions of users.

Firebase provides authentication, storage, Firebase ML, a real-time database, hosting, and cloud messaging services.

It supports some extensions you can use to automate development tasks. Some of them are Deleting user data, Image resizing, triggering emails, and translating text.

It also provides easy integrations for popular platforms like Google Analytics, Slack, Google Ads, Firebase Performance Monitoring, Remote Configuration, and more.

The main reasons one can use Firebase are:

Developer experience

It's well-documented and easy to use, and the team has an outstanding culture of listening to developer feedback.

Cost

The second is the minimization of cost. Firebase is free for small experimental projects and scales up linearly based on user growth and design choices.

It also provides unlimited users and 1 GB of data for free.
In Firebase, it costs a small amount, something like $0.18 per GB. In Firebase, you also pay for reads and writes to the database, which typically accounts for most of your monthly expenses.

Maximization of time

It allows you to create the most value in the shortest amount of time.

Firebase Extensions

Firebase Extensions are designed to boost productivity and give your applications extra capabilities without requiring you to research, write, or debug code. Using Firebase Extensions, you can offer setup options for your extension that are unique to your needs.

Supabase

Supabase is open source, self-hosted, and can be connected to an internal Postgres database. The table-like structure of Postgres makes it a good tool for storing structured and related data. Interestingly enough, we can import an existing spreadsheet into a project and use it as our Postgres database. Supabase originally had its infrastructure on Digital Ocean but migrated over to AWS.

Supabase was built in 2019. It is an alternative to Firebase. It's open-source, free software, and a complete backend for Mobile apps and websites.

Supabase provides services like edge functions, storage, authentication, and real-time database.

The main reasons one can use Supabase are:

Developer experience

It can be a great pick because of its sizeable open-source community, comprehensive documentation, and ease of use.

Cost

It provides 10K users and 500 MB of Data for free.

It costs around $25 per month for 8GB. With Supabase, you get unlimited API requests and network traffic to your database, which is a fantastic offer, as typically, you have to pay for CPUs to handle this traffic, which can be very expensive at scale. If you require more than 8 GB on Supabase, you can upgrade to the pay-as-you-go plan for an additional 12 cents per month per GB. This is a great deal that is significantly less expensive than what any of the major cloud providers have to offer.

Maximization of time

It is meant to make it easy for developers to quickly set up their backend. "Build in a weekend, scale to millions" is the motto of Supabase.

Import/Export Data

You can import and export large datasets to and from the PostgreSQL database using Supabase. That could be a plus.

Difference between the two

Here are some key differences between the two, a comparison of the two technologies, and a discussion of situations in which Supabase ought to be used rather than Firebase.
Scalability and Security: After going over every aspect, we can say that both offer scalability. Supabase uses PostgreSQL's flexibility and scalability for complex data structures, and Firebase excels in real-time data synchronization and high concurrency.

Both platforms take security very seriously and provide tools to aid in maintaining the safety of your applications.

Export Data: Supabase comes with built-in data import and export features to and from the PostgreSQL database. But Firebase requires custom solutions or third-party apps.

Open Source: Because Supabase is open source, developers may change and customize it as desired for greater flexibility. Firebase is a closed source and provides less room for customization.

Real-time feature: Both Firebase and Supabase provide real-time database update features.

Cost: Both provide a limited free tier and a pay-as-you-go pricing model. As an open-source solution, Supabase offers a managed hosting service in addition to self-hosting, which gives users greater control over infrastructure costs.

Database: Firebase supports NoSQL databases. Supabase, on the other hand, uses PostgreSQL for its robust relational database. NoSQL might come in handy when you want to create data quickly and have a flexible range of data types. A relational database may be beneficial when data is connected, rigid, and required to be constant at all times.

Your choice of BaaS platform should solely be based on the project you will be working on. Before selecting one, carefully consider your needs, as both platforms have benefits and limitations.

You can consider the following points: If you're searching for a fully managed solution with serverless capabilities, real-time updates, a NoSQL database, and a Google Services connection, Firebase might be a better choice. Yet, Supabase is a fantastic option if you want relational databases, data integrity, open-source software flexibility, and infrastructure control and want to host your website yourself.

Conclusion

That's all for now. I really hope you found it helpful and learned something valuable from it to select a better fit for your project. Please clap it, leave a comment, and share it with others if you like it.
If you want to get my stories delivered right to your inbox, follow @ishratumar for more. If you have any questions, message me on Twitter. I'll see you shortly.

Happy learning :))

Learn CSS Grids with illustrations

Ishrat — Sat, 15 Jul 2023 11:56:00 +0000

Mastering CSS Grid with illustrations

What is the grid in CSS?

If we compare CSS Grid to any previous web layout system, it is a two-dimensional grid-based layout system that completely changes how we create user
interfaces. We've been using CSS to design the layout of our web pages, but it hasn't always worked out well.
In the early days, we used tables and later floats, positioning, and inline blocks, which were necessary workarounds for layouts lacking in some key aspects.

The CSS Grid is the first CSS module built expressly to address the layout issues we’ve all been
playing with. Flexbox is also a popular one-dimensional layout tool. These two tools work well together.

Designing web pages without floats or positioning is made easy with grids. It can have items placed on it vertically, horizontally, or both at once. You can arrange
items however you want, even stacked.

Grid terminology

Before learning the properties of Grid, it is important to comprehend the terminologies
used in Grid. If you have a solid grasp of these concepts, mastering Grid will go a lot easier for you.

Let's jump right in.

Grid container

The grid container is the parent element in a grid layout with one or more child elements.

Example:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

In the above example, the div with class grid-container is the parent element, and the divs with class grid-item are the child elements.

Grid item

A grid item is an element that is an immediate descendant of the grid container.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

The Grid items (contents) are distributed along the main axis and cross axes. You can build a website layout by modifying the components and using
different grid properties.

Grid Architecture

Illustration ↝

Grid lines

Grid elements are composed of grid lines, which are horizontal and vertical. If your grid has three rows and three columns,
it will have four column lines and four row lines, including the one final line.

Illustration ↝

Grid cell

A single unit within a grid layout is referred to as a grid cell. It is the intersection of a row and a column in the grid. Each cell can contain content
or other elements.

In the illustration below, each square(item) in the grid represents a cell.

Illustration ↝

Gaps

In a grid layout, the gap is used to indicate the size of the gutter or space between columns and rows. It determines the gap between adjacent grid tracks.

Gap properties:

column-gap - sets the gap between columns.
row-gap - sets the gap between rows.
gap - It's a shorthand. You can use it to set the column-gap and row-gap in a single line.

Example:

.grid-container {
  display: grid;
  gap: 20px;
}

Illustration ↝

Grid tracks

The space between two grid lines is referred to as a track. A row track is a space between two row lines, and a column track is a space between two column lines. These tracks are created when we give a size to our grid.
See the illustration below to better understand:

Illustration↝

Grid Area

The grid area consists of several grid cells. It allows items to span a specified number of rows and columns within a grid layout.

12 row X 12 column layout

Illustration ↝

Grid Properties

In terms of grid properties, there are two types. As following:

Parent Properties(Grid Container)
Children Properties(Grid Items)

Grid container properties

display

When the display property of an HTML element is set to grid or inline-grid, the element becomes a container for a grid.
The grid creates a block-level container that enables flexible and grid-like layouts by placing items in both columns and rows.

Example:

.grid-container {
  display: grid;
}

Output ↝

The inline-grid container, on the other hand, creates an inline-level container that enables items to be positioned horizontally,
making it suitable for inline layouts.

Example:

.grid-container {
  display: inline-grid;
}

Output ↝

Have you noticed the text before and after?

Those are two span elements that I added before and after the containers. So you can better understand the concept of block-level
and inline-level grid containers.

Rows and Columns

Rows and columns are made up of grid lines. Properties you can use to define rows and columns in a grid:

grid-template-columns - determines both the width and the number of columns in a grid. You can use several length units,
including px, em, %, min-content, max-content, fr, and auto, to measure that.

Use auto if you want columns to have the same width or an element to take all the available space. The fr is basically a fraction; it is a grid-only unit.
The keywords min-content and max-content denote the minimum and maximum sizes, respectively, that the content can occupy.

You have two options for setting column widths: either individually for each column or collectively for all columns using the repeat() function.

Illustration ↝

There will be precision in the pixel measurements. Any space available will be filled with the keyword auto.

Graphic↝

There will be no difference in size between the boxes as they are measured in fractions (1fr).

grid-template-rows - determines the height and the number of rows in a grid. The height and number of rows can also be specified using different length units.

You have two options for setting rows height: either individually for each row or collectively for all rows using the repeat() function.

Illustration ↝

The height of each row is specified separately 👆.

Illustration ↝

The height of each row using repeat() function 👆.

Here's an example code to create a grid with 3 columns and 3 rows using different sizing units.

.grid-container {
  display: grid;
  grid-template-columns: 7em 200px 20%;
  grid-template-rows: 100px 80px auto;
}

Justify items

Using the justify-items property, you can position the grid items inside the grid container along the main axis (x-axis). It may include one of the
following four values:

justify-items: start | end | center | stretch;

justify-items: start;

justify-items: end;

justify-items: center;

justify-items: stretch;

Align Items

Using the align-items property, you can position the grid items inside the grid container along the cross-axis (y-axis). It may include one of the
following four values:

align-items: start | end | center | stretch;

align-items: start;

align-items: end;

align-items: center;

align-items: stretch;

Justify content

Using the justify-content property, you can position the grid(all items) inside the grid container along the main-axis (x-axis).
It may include one of the following seven values:

justify-content: start;

justify-content: end;

justify-content: center;

justify-content: stretch;

justify-content: space-around;

Note: There is an equal amount of space between each grid item, with half-size spaces at the ends.

justify-content: space-between;

Grid items are separated with equal space between them.

justify-content: space-evenly;

Grid items are separated with even space between grid items also at ends.

Align Content

Using the align-content property, you can position the grid(all items) inside the grid container along the cross-axis (y-axis). It may include one
of the following seven values:

align-content: start;

align-content: end;

align-content: center;

align-content: stretch;

align-content: space-around;

align-content: space-between;

align-content: space-evenly;

CSS Grid items properties

The grid items are contained in a grid container. First, let's take a look at the grid rows and column start and end points. To better understand the concept,
look at the illustration below.

Illustration ↝

column-start & column-end

The grid-column & grid-row properties

The grid-column property determines which column(s) an item should appear on. The grid-row property determines which row(s) an item should be placed on.
The grid-column is shorthand for grid-column-start and grid-column-end properties.

Example:

grid-column-start : 2;
grid-column-end : 4;

/* shorthand */
grid-column : 2 / 4;

The grid-row is shorthand for grid-row-start and grid-row-end properties.

Example:

grid-row-start : 2;
grid-row-end : 4;

/* shorthand */
grid-row : 2 / 4;

The grid-column example:

Here's an example of a grid container with six items(divs):

HTML

<div class="grid-container">
  <div class="grid-item1">Item 1</div>
  <div class="grid-item2">Item 2</div>
  <div class="grid-item3">Item 3</div>
  <div class="grid-item4">Item 4</div>
  <div class="grid-item5">Item 5</div>
  <div class="grid-item6">Item 6</div>
</div>

CSS:

Syntax: grid-column: start-line / end-line;

.grid-item1 {
  grid-column: 1 / 3;
}

.grid-item2 {
  grid-column: 3 / 5;
}

.grid-item3 {
  grid-column: 1 / 4;
}
.grid-item4 {
  grid-column: 4;
}
.grid-item5 {
  grid-column: 1;
}
.grid-item6 {
  grid-column: 2 / 5;
}

This example uses the grid-column property to style 6 items in a grid layout.

The .grid-item1 takes up two columns, extending from the first to the third. The .grid-item2 takes up two columns and extends from the third to the fifth.

The .grid-item3 occupies three columns, extending from the first to the fourth. Only the fourth column is occupied by the .grid-item4.

The .grid-item5 takes up one column from the first column to the second column, while the .grid-item6 takes up three columns, spanning from the second
column to the fifth column.

With the help of these grid-column values specify each item's position and width within the grid structure, so you can arrange elements precisely and flexibly.

Illustration↝

The grid-row example

Here's an example of a grid container with six items(divs):

HTML

<div class="grid-container">
  <div class="grid-item1">Item 1</div>
  <div class="grid-item2">Item 2</div>
  <div class="grid-item3">Item 3</div>
  <div class="grid-item4">Item 4</div>
  <div class="grid-item5">Item 5</div>
  <div class="grid-item6">Item 6</div>
</div>

CSS:

Syntax : grid-row: start-line / end-line;

.grid-item1 {
  grid-row: 1 / 3;
}

.grid-item2 {
  grid-row: 3 / 5;
}

.grid-item3 {
  grid-row: 1 / 4;
}
.grid-item4 {
  grid-row: 4;
}
.grid-item5 {
  grid-row: 1 / 2;
}
.grid-item6 {
  grid-row: 2 / 5;
}

This example uses the grid-row property to style 6 items in a grid layout.

The .grid-item1 takes up two rows, extending from the first to the third. The .grid-item2 also takes up two rows and extends from the third to the fifth.

The .grid-item3 occupies three rows, extending from the first to the fourth. The .grid-item4 takes one row.

The .grid-item5 takes up one row from the first row, while the .grid-item6 takes up three rows, spanning from the second row to the fifth row.

With the help of these grid-row values, you can specify each item's position and height within the grid layout, so you can arrange elements precisely
and flexibly.

Illustration ↝

You can also do this using the span keyword, which is the same thing but easier to read and understand.

So, what span does, specify the number of columns/rows each item should span/expand.

Here is an example of how you can use span in items.grid-item1 and .grid-item2 mentioned above:

.grid-item1 {
  grid-row: 1 / span 2;
  grid-column: 1 / span 2;
}

.grid-item2 {
  grid-row: 3 / span 2;
  grid-column: 3 / span 2;
}

Grid area

The grid-row and grid-column are excellent properties, but grid-area is even greater. The grid-area property is the shorthand for four values it
requires:

grid-row-start
grid-column-start
grid-row-end
grid-column-end

If you want .item1 to span over 2 rows and 2 columns. You can give it the grid-area with the starting line of row 1(1), the starting line of column 1(1),
the ending line of row 2(3), and the ending line of column 2(3). You can also use negative values.

Syntax: grid-area: row-start / column-start / row-end / column-end;
CSS

.grid-item:nth-child(1) {
  grid-area: 1 / 1 / 3 / 3;
}

Here's the illustration:

To define these values, you may also use the span keyword. Here is an example of how to use span to create the same layout:

.grid-item:nth-child(1) {
  grid-area: 1 / 1 / span 2 / span 2;
  }

The grid-area property can also be used to give names to grid items. It is more useful when you dealing with more complex layouts. Though to work with this
first you must set up grid-template-areas. Once finished, you must include the names from the parent class inside the children(items) classes.

To begin with, define the grid-template-areas inside of your grid(parent) container like this:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
  height: 100vh;
}

Now, use the grid-area to specify the names used in the grid container inside the item classes as follows:

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

Output ↝

Responsive Grids

Media Queries

Having a responsive website is way more important than it was before.

"Mobile devices, excluding tablets, contributed 58.33% of all website traffic worldwide in the first quarter of 2023." - Tiago Bianchi

You cannot simply take the risk of missing an audience this large that browses on their smartphones.

You can use media queries to make the example above responsive. Before that, take a look at how it looks in responsive mode before
applying any media queries:

Illustration ↝

Before Applying Media Queries👆

Notice that it has the exact same layout as the desktop version. However, it does not look good. In order to make it look better on
mobile mode, we need these items to stack on top of one another. To do this, we may use media queries.

Here's how to use media queries to accomplish that:

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "header"
    "sidebar"
    "main"
    "footer";
  gap: 10px;
  height: 100vh;
}

.
.
.

@media (min-width: 50em) {
  .grid-container {
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
  }
}

You may notice, we only updated only one .grid-container class in the responsive design code and added media queries for the desktop
version. When grid-template-columns: 1fr is set, the header, sidebar, main content area, and footer will stack vertically on mobile
devices.

Result ↝

After Applying Media Queries 👆

Minmax() Function

The minmax()function helps you set the minimum and maximum grid
track sizes. Using this method, you can give grid objects a minimum width and let them expand to a maximum width if there is
extra space.

For example:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

The auto-fit keyword allows the columns to adjust and fill available space while respecting their minimum and maximum sizes. On the other
hand, the auto-fill keyword ensures that the grid is always filled by adding empty tracks to fill in additional
space. Both auto-fill and auto-fit are used in conjunction with the repeat() function in CSS Grid.

In addition, there is another sizing function called fit-content(). The fit-content() function in CSS Grid makes that grid tracks or items never go smaller than the minimum (min-content) size or bigger than the maximum(max-content) size based on the content. You can make your designs more responsive and flexible by using fit-content() to create dynamic, flexible grid layouts.

.grid-container {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr;
}

Change elements order

CSS Grid Layout allows you to position elements anywhere within the grid, regardless of their order in the HTML code. This functionality
is especially helpful when designing alternate layouts for various screen sizes. By combining media queries and CSS Grid Layout, which
provides a powerful toolkit for precise designs, you can easily achieve precise designs that meet your needs.

For example:

.grid-item1 { grid-area: 1 / 2 / 1 / 3; }
.grid-item2 { grid-area: 1 / 4 / 1 / 3; }
.grid-item3 { grid-area: 1 / 1 / 2 / 2; }

Output ↝

The justify-self property

Using the justify-self property, you can position an item inside the grid container along the main axis(x-axis). It may include
one of the following four values:

justify-self: start | end | center | stretch;

Illustration ↝

The align-self property

Using the align-self property, you can position an item inside the grid container along the cross-axis(y-axis). It may include one
of the following four values:

align-self: start | end | center | stretch;

Illustration ↝

Shorthand Properties

Shorthand properties in CSS allow you to declare and set a number of related properties in one line. It will
reduce the code you write and make your stylesheet smaller. Shorthand properties are usually used for properties with multiple values.

gap / grid-gap: Determine the space between tracks and grid items. The gap is a shorthand property for setting both row and column gaps, while grid-gap specifically sets the gap between grid items.
grid-template: Define the structure of the grid by specifying rows, columns, and areas. It is shorthand for grid-template-rows,
grid-template-columns, and grid-template-areas properties.
place-content: It is shorthand for align-content and justify-content properties.
place-items: Set the alignment and positioning of individual grid items within the grid. It is shorthand for align-items and justify-items properties.
place-self: Control the alignment and positioning of a single grid item within its grid cell. It is shorthand for align-self and justify-self properties.
repeat(): Specify a pattern of repeating grid track sizes within the grid-template-columns or grid-template-rows properties.

Resources

Interested in learning more? These are some of the best CSS Grid resources:

A Complete Guide to CSS Grid - CSS Tricks
CSS Grid- WEB.DEV
CSS Grid Layout - MDN
CSS Grid Cheatsheet
Grid by Example by Rachel Andrew
Free course - LEARN CSS GRID WITH WES BOS
Learn CSS Grid by playing game - Grid Garden
CSS Grid Generator
- Ebook - Master Flexbox and Grid

I'm open to writing opportunities. If you'd like me to write for you, you may email me at ishratumar18@gmail.com, or send me a direct message on Twitter.

=> Read it on Medium

Conclusion

That's pretty much it. I really hope it gives you a better understanding of CSS Grids.

GitHub repositories for interview questions

Ishrat — Sat, 15 Jul 2023 11:37:05 +0000

As we all know, interviews play an essential role in the hiring process. I can imagine how you would feel if you had the required skills for the job but didn't get hired because you couldn't perform well in the interview. It is possible that you did not prepare properly for it.

If you only focus on the topics you think are important, they might not be as significant as you think. The best way to increase your chances of success is to follow some great resources that others are also using.

Here is a list of GitHub repositories with thousands of stars and clones to help you prepare for interviews. The GitHub repositories mentioned in this blog post will greatly help you prepare for interviews.

With that said, let's get started!

1. Awesome interview questions

This is an excellent compilation of interview questions. Almost every language is covered here, including Golang, GraphQL, CSS, Django, Java, JavaScript, and more.

🔗https://github.com/DopplerHQ/awesome-interview-questions

2. The algorithms

Having trouble finding algorithms and data structures in the language of your choice? Check out this collection. More than 20 different languages are used to implement all algorithms and data structures. Here you will find proper comments and accessible, relatively easy code in the language of your choice.
🔗 https://github.com/TheAlgorithms

3. System designer primer

Nowadays, businesses not only solve problems but also think about system design issues. For system design, many of them conduct separate interviews. You can use this repository to get prepared for system design interview questions.
🔗 https://github.com/donnemartin/system-design-primer

4. Tech interview handbook

For busy software developers, here is a list of 100 selected coding interview preparation resources. The guide has helped more than 500,000 individuals. Alongside algorithmic questions, it includes other awesome stuff required for interview preparation.
🔗 https://github.com/yangshun/tech-interview-handbook

5. Coding interview university

This is a well-rounded course of study for those who want to become software engineers. Please know that this study guide is for software engineering only, not front-end or full-stack development.
🔗https://github.com/jwasham/coding-interview-university

6. Reactjs interview questions

This is a list of the top 500 ReactJS Interview Questions & Answers. Here you will find questions from the basics to the advanced level. Topics covered in this repository include React Router, React Internationalization, React Testing, React Redux, React Native, React-supported libraries, and more.
🔗 https://github.com/sudheerj/reactjs-interview-questions

7. Vuejs interview questions

This is a list of 300 important VueJS Interview Questions And Answers that you need to know before appearing in an interview.
🔗 https://github.com/sudheerj/vuejs-interview-questions

Angular interview questions

Similar to the repository for Vuejs mentioned above, this repository has 300 Angular Interview Questions and Answers. If you're preparing for an Angular interview, take a look at it.
🔗 https://github.com/sudheerj/angular-interview-questions

8. Nodejs basics

This repository contains a list of Node.js Basics( v18.x ). This is a great resource for Node.js that you should check out.
🔗 https://github.com/learning-zone/nodejs-basics

9. Javascript questions

This is an awesome repository for JavaScript. Consists of a long list of advanced JavaScript interview questions and answers. This repository is for you if you want to test your understanding of JavaScript, brush up on what you know, or get ready for your coding interview!

🔗 https://github.com/lydiahallie/javascript-questions

I'm open to writing opportunities. If you'd like me to write for you, you may email me at ishratumar18@gmail.com, or send me a direct message on Twitter.

Wrap up

That's it for now. Thank you for reading. I genuinely hope that these resources will be helpful to you, and I wish you success in your interview.
If you found it useful, please like, share, and follow @ishratumar for more interesting posts.

6 best animation libraries for your next project

Ishrat — Fri, 05 May 2023 10:44:29 +0000

Animation libraries are pre-written CSS and JavaScript code libraries used to add animations and transitions to web pages.
It is simpler to add animations to your web pages without having to start from scratch because they offer a wide variety of pre-built animations, easing functions, and other features.

1. Animate.css

Animate.css is a popular CSS animation library that provides a wide range of cross-browser CSS classes for applying animations to elements.
It is easy to use and requires minimal setup, you can simply add a class to an element to make it animate.
Learn more here: https://animate.style/

2. Magic.css

With this CSS animation library, you can create animations and transitions easily and quickly.
It offers a huge selection of pre-built animations and easing functions.
Learn more here: https://www.minimamente.com/project/magic/

3. Anime.js

This is a JavaScript animation library that provides a wide range of animation and easing functions. Additionally, it supports complex animations and can be used to make animations based on user interactions.
Learn more here: https://animejs.com/

4. Three.js

You can make intricate 3D animations and visualizations using this JavaScript 3D animation library. It allows you to use lighting, shading, and texture mapping while producing animations.
Learn more here: https://threejs.org/

5. Mo.js

mo.js is an open-source JavaScript animation library that allows developers to create complex, high-performance animations and interactive effects using a simple, easy-to-use API. It makes use of a modular architecture and has a number of ready-made animation modules, including tweening, physics-based motion, and morphing.
It also contains a powerful timeline feature that allows developers to create complex animations with multiple layers and timing effects. Mo.js can be used to create animations for web pages, mobile apps, and other interactive applications.
Learn more here: https://mojs.github.io/

6. LottieFiles

LottieFiles is a website and toolset that allows designers and developers to create and share vector animations. The animations are created using the open-source software Adobe After Effects. They can be exported as JSON files, and the Lottie library makes it easy to import and play them on any platform. This library is compatible with many different frameworks and platforms, including React Native, iOS, Android, and the web.
Learn more here: https://lottiefiles.com/

Wrap up

Animation libraries are a great way to add visual flair and interactivity to your web and mobile projects. So, what are you waiting for? Start experimenting with animation libraries and see how they can bring your projects to life.
That’s all for now. Thank you so much for reading!
If you’re interested in learning more about web development stuff, be sure to follow @ishratumar for more information and updates.

How to create an image gallery using Tailwind CSS

Ishrat — Fri, 05 May 2023 10:36:29 +0000

If you're just getting started or know nothing about Tailwind CSS, this is for you. After reading this and following along, you will understand how Tailwind CSS works. You will learn how to design stunning applications without writing plain CSS code.

Here we go! If you're ready, let's get started!

If you have never used Tailwind CSS before, your first question may be, "What is Tailwind CSS, and why do we use it?"

So let's get the basics out of the way: Tailwind CSS is a framework that offers a collection of pre defined classes that let you create fully customized designs without ever leaving your HTML.

Even though Tailwind CSS default classes can be very useful, you can also customize them to meet your unique requirements. You can do this by modifying the default configuration file.

Using the @apply directive or using the new utility classes made with the @layer directive, you can also make your own unique classes.

Installation

To continue working on it, you need to set up Tailwind CSS on your computer. Do not worry, I will show you how to do that; it is really simple. You can install Tailwind CSS using npm, yarn, or any other package manager.

To install with npm, copy and paste the following command into your terminal and press the Enter key:

npm install -D tailwindcss

To install with yarn, run the following command:

yarn add tailwindcss

It will install Tailwind CSS in your project's root directory.

After that, copy and paste the following code into your terminal and press Enter again.

npx tailwindcss init

This will generate a tailwind.config.jsfile that you can find in the root directory of your project.

Configuration

Add the code below to your tailwind.config.js file to configure the paths to all of your template files.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Importing CSS

Add the following code tailwind directives to your main CSS file.

@import 'tailwindcss/base'; 
@import 'tailwindcss/components'; 
@import 'tailwindcss/utilities';

Initiate the building process

Execute the CLI tool to scan your template files for classes and construct your CSS.

npx tailwindcss -i ./src/input.css -o ./dist/output.css - watch

Use Tailwind in your HTML

Tailwind CSS provides a lot of utility classes that can be used to apply styles to your HTML elements.

For example:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
   <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-8 px-16 m-10 rounded-full">
   Click me
   </button>
</body>
</html>

The text-white class sets the text color to white, the font-bold class sets the font weight to bold, the py-8 and px-16 classes set the padding to 8 and 16 respectively, the m-10 class adds a margin of 10, and the rounded-full class adds rounded corners to the button. The hover:bg-blue-700 class changes the background color to a darker blue on hover.

See the result of the code above in the example button below.
What you will see in the browser:

- -

Tailwind CSS Image Gallery

Let's use Tailwind CSS to build a simple photo gallery application. Here is the code to create a simple six-image photo gallery: 3 in the first row and 3 in the second row. You can easily modify the code to include extra rows and images and create your very own unique and beautiful image gallery. I also added a small hover animation to make it more interactive.

HTML

At first, Tailwind CSS may seem intimidating, but as you get more comfortable with it, you'll find that it makes your life 10x faster than writing in plain CSS.
Also, if CSS is your area of expertise, picking up Tailwind CSS will be a piece of cake for you. For this reason, you should learn CSS before using its frameworks, such as Tailwind CSS or Bootstrap. Learn the language first, then explore its frameworks - this rule applies to all languages, not only CSS.
The code below is not rocket science; it is just simple HTML and Tailwind CSS classes used in the code below to style your HTML components. Add this code to your index.html file by copying and pasting.
When you use Tailwind CSS in your projects, your HTML will look like this:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Image Gallery</title>
 <link rel="stylesheet" href="style.css">
 </head>
 <body class="bg-gray-100 h-screen">
 <div class="container mx-auto px-4">
 <div class="grid grid-cols-3 gap-4 mt-10">
 <div class="bg-cover" 
 style="background-image: url(image.png)">
 </div>
 <div class="bg-cover" 
 style="background-image: url(image.png)">
 </div>
 <div class="bg-cover" 
 style="background-image: url(image.png)">
 </div>
 <div class="bg-cover" 
 style="background-image: url(image.png)">
 </div>
 <div class="bg-cover" 
 style="background-image: url(image.png)">
 </div>
 <div class="bg-cover" 
 style="background-image: url(image.png)">
 </div>
 </div>
 </div>
 </body>
</html>

Let's learn what each class does. In this example, the grid class creates a grid with three columns, the gap-4 class specifies a gap of four units between each column, and the container class sets a maximum width for the container and centers it horizontally. The bg-cover class sets the background image to cover the entire element, and the bg-gray-100 class sets the background color to light gray. The height of the body is set to full-screen height using the h-screen class.

CSS

You need to import Tailwind CSS into the CSS file first if you're using the CodePen editor. On a local machine, all you have to do is install and configure it using the methods mentioned above, and you're good to go. Just copy the code, paste it into the appropriate files, and run the application.

@import url('https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css');
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Animations */
@keyframes fadeIn {
 0% { opacity: 0; }
 100% { opacity: 1; }
}
@keyframes slideIn {
 0% { transform: translateY(50px); opacity: 0; }
 100% { transform: translateY(0); opacity: 1; }
}
.bg-gray-100 {
 background-color: #f7fafc;
}
.h-screen {
 height: 100vh;
}
.container {
 width: 100%;
 padding-right: 1rem;
 padding-left: 1rem;
 margin-right: auto;
 margin-left: auto;
}
.mt-10 {
 margin-top: 2.5rem;
}
.grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 grid-gap: 1rem;
 justify-items: center;
}
.grid-cols-3 {
 grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gap-4 {
 gap: 1rem;
}
.bg-cover {
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center center;
 height: 200px;
 width: 100%;
 cursor: pointer;
}
.bg-cover:hover {
 transform: scale(1.05);
 transition: transform 0.3s ease-in-out;
}

What you will get

CodePen: https://codepen.io/ishratUmar18/pen/rNZWxZZ
- -

Wrap up

That's all for today! With these steps, you will understand how to use Tailwind CSS in your projects. You can learn more about Tailwind CSS and its features from the Official Documentation. Don’t forget to mention me on Twitter when you build your beautiful image gallery using Tailwind CSS. Also, follow me for more content and subscribe to my newsletter to read the posts directly in your email. This way, you don’t have to open a browser to read.

Happy building :)

15 Awesome CSS Properties You Need to Know 🎯

Ishrat — Mon, 24 Apr 2023 17:17:25 +0000

Let’s learn some of the best CSS tips and tricks to boost your workflow and design. These CSS properties will help any developer build a project quickly and efficiently.
I have included the CodePen link at the end of the article, where you can find all these examples in action.

With that said, let’s get started.🤩

1. CSS :in-range and :out-of-range pseudo-classes

These pseudo-classes are used to style inputs within and outside specified range limits.

(a) :in-range
The input> element is in-range if its current value is between the bounds of the min and max attributes.

This pseudo-class makes it easy to determine whether a field’s current value is acceptable.

(b) :out-of-range
The input> element is out-of-range if its current value is outside the bounds of the min and max attributes.

It gives the user a visual indication if a field value exceeds its range.

CSS Code:

/* in-range */
input:in-range{
background-color: rgba(0, 255, 0, 0.25);
}
/* out-of-range */
input:out-of-range{
background-color: rgba(255, 0, 0, 0.25);
}

Output:

You should know that these pseudo-classes only apply to elements with a range restriction. Without this limitation, the element could not be in-range or out-of-range. Read more here.

2. grayscale( ) function

You can use the value 100% to convert images from color to black and white. When you set this value to 0%, your image will remain the same.

Using a value of 100% will convert your image to black and white. This means that there will be no color in the photograph.
You can use values between 0 and 100% to create a variety of different effects.

CSS Code:

.grayscale-image{
filter: grayscale(100%);
}

Output:

Image before and after applying the grayscale( ) function.

3. Glass Effect

You can add the Glass Effect to your next project using a few lines of code. Yes, it really is that easy. Glass effects are beautiful and add elegance to your design.

Glass.CSS is the most popular glassmorphism generator, where you can create CSS Glass Effects for your project for free. All you need to do is adjust some settings according to your needs and copy-paste the CSS code into your project.

CSS Code:

.glass-effect{
   -webkit-backdrop-filter: blur(6.2px);
   backdrop-filter: blur(6.2px);
   background: rgba(255, 255, 255, 0.4);
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.24); 
}

Result:

4. Use the following CSS code to style text

These are some very basic text styling tips that everyone should know. However, there are many other advanced options available as well.

CSS Code:

p{
  font-family: Helvetica, Arial, sans-serif;
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow: 2px 2px 2px pink, 1px 1px 2px pink;
  text-align: center;
  font-weight: normal;
  line-height: 1.6;
  letter-spacing: 2px;
}

5. CSS clamp( ) function

The CSS clamp( ) function restricts a value to a range between two upper and lower bounds. There must be a preferred value, a minimum value, and a maximum value.

Clamp( ) comes in handy when font sizes change depending on the viewport.

CSS Code:

p{
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

Want to learn more about the clamp function? Check out the explanation on the MDN web docs.

6. Center a div

The most important task for a developer is centering a div. There are so many other options for centering a div. In this example, we used CSS flexbox to center a div horizontally and vertically.

CSS Code:

div{
  display: flex;
  justify-content: center;
  align-items: center;
}

7. Gradual CSS Linear Gradient

To create a Gradual CSS Linear Gradient, simply use the CSS code below.

CSS Code:

div {
    background: linear-gradient(35deg, #CCFFFF, #FFCCCC, rgb(204, 204, 255));
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin: 50px auto;
  }

Result:

8. CSS Shake Effect

This "shake" animation effect shakes an input field when a user enters invalid input. It is simple but elegant. For instance, the input field will shake if a user enters numbers in a text field instead of letters.

HTML Code:

<input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/>

CSS Code:

input:invalid{
      animation: shake 0.2s ease-in-out 0s 2;
      box-shadow: 0 0 0.4em red;
}
  @keyframes shake {
      0% { margin-left: 0rem; }
      25% { margin-left: 0.5rem; }
      75% { margin-left: -0.5rem; }
      100% { margin-left: 0rem; }
}

Result:

9. Text Overflow

You can use this property to truncate overflowing text. It can be clipped and displayed with an ellipsis (...) or with a custom string.

CSS Code:

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  width: 200px;
 }
div.text {
  white-space: nowrap; 
  width: 200px; 
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000000;
}  
div.text:hover {
  overflow: visible;
}

10. 'column-count' Property

It specifies the number of columns into which an element should be divided.

CSS Code:

p{
column-count: 2;
}

Result

11. CSS Animations

Animation changes an element’s style gradually. It can only be used if keyframes are specified first. A keyframe describes how an animated element appears at a specific point in an animation sequence.

CSS Code:

div{
  width: 200px;
  height: 200px;
  background-color: blue;
  animation-name: square;
  animation-duration: 8s;
}
@keyframes square{
  from {background-color: blue;}
  to {background-color: black;}
}

12. Shadow Effects

Using CSS, you can add effects both to text and elements. Define properties as text-shadow and box-shadow. Use text-shadow to add shadow to text and box-shadow to add shadow to elements.

(i) text-shadow: It gives the text a shadow.

h1{
  color: blue;
  text-shadow: 2px 2px 4px #000000;
}

Result:

(ii) box-shadow: It is used to give the elements a shadow effect. The actual div in the example below is purple, and the box shadow is sky-blue and is set 10 pixels to the right and bottom.

div{
  width: 200px;
  height: 200px;
  padding: 15px;
  background-color: purple;
  box-shadow: 10px 10px skyblue;
}

Result:

13. CSS Clipping

Using the clip-path property, you can only show a portion of an element while concealing the rest.

CSS Code:

.bg{
  height: 100%;
  width: 100%;
  background-color: rgba(199, 62, 133, 0.9);
  clip-path: polygon(100% 0, 100% 0, 100% 51%, 0 100%, 0 90%, 0 52%, 0 51%);
  position: absolute;
}

Result:

Clippy-CSS **clip-path **maker is a quick and easy way to create complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset) or an SVG source.

14. CSS background-blend-mode Property

This property describes how the background color and image (or two images) should blend.

A list of blend modes corresponding to each background image makes up the value. Blending mode specifies how background layers blend (color or picture).

You can make stunning backgrounds with the background-blend-mode property.

CSS Code:

div{
   width: 600px;
   height: 400px;
   background-repeat: no-repeat, repeat;
   background-position: center;
   background-image: url("flower.png"), url("background-image.png");
   background-blend-mode: color;
}

Result:

There are some other options available as well. Check this out on W3Schools if you want to learn more about this property.

15. Hue Rotate Animation

Hue-rotate animation can be added to websites’ hero sections and buttons. For example, the hero section of a weather forecasting website will look amazing with this.

CSS Code

button {
  background: linear-gradient(35deg, #8C52FF, #C669FF);
  animation: hue-rotate 3s linear infinite alternate;
}
@keyframes hue-rotate {
  to {
    filter: hue-rotate(85deg);
 }
}

Result

Finally

Thanks for reading! If you enjoyed it, please like it, comment below, and follow me, @ishratumar for more.

You can also follow me on Twitter for helpful tech-related tips and tricks.

And maybe you will love my CodePen and GitHub, where I have already shared some great web development-related tips and cheat sheets.

That’s all for this article; I hope it was helpful. :)

Happy learning ❣

8 most popular React state management libraries

Ishrat — Thu, 06 Apr 2023 10:14:17 +0000

List of 8 super useful React State Management Libraries - Learn which one you should use

What is React State Management?

React components have built-in objects called states. A React state is similar to a JavaScript data structure. Components use the state to store reusable assets. It is possible for the state of a component to change frequently, which requires the component to be re-rendered whenever the state changes.
When it comes to managing React states, it is not as straightforward as using simple React hooks like useState or useReducer.

There are a large number of states, and there are also a large number of state management libraries available, and this number is expanding every day. Therefore, the best approach is to select the one that best meets your needs and get to know them all in case anything better emerges.

List of some most popular RSM libraries

1. Redux

Before choosing any library, you should know what kind of problem you are having. Don’t use it just because someone told you about it. Before using it, do your homework. Not all apps need Redux. You should use Redux when managing states locally becomes messy. Using Redux requires you to learn more concepts and write more code.

See the illustration below to understand how Redux works:

Some of the advantages of Redux are its community support, server-side rendering, easy debugging, and state persistence. You can use Redux with React or any other library. Including dependencies, it weighs only 2 KB.

Dan Abramov, one of the redux developers, states:

I would like to amend this: don’t use Redux until you have problems with vanilla React.

Link :https://redux.js.org/

2. Redux Toolkit

When developing redux apps, the Redux Toolkit is recommended. It makes your code much better. Redux Toolkit incorporates our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.

Install:

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

Link: http://https//:redux-toolkit.js.org/

3. Rematch

Rematch is Redux's best practice. Switch statements, thunks, action types, and action creators have been removed.

As a replacement for Redux, Rematch has many great features.

Rematch eliminates boilerplate, is lightweight (less than 2 KB), needs no configuration, and supports TypeScript and React devtools.

Additionally, it supports React Native, enforces best practices, has hot reloading, adds reducers dynamically, allows you to set up multiple stores, is expandable with plugins, and is simple to use.

Link: https://rematchjs.org/

4. Recoil

Recoil is an open-source React state management library developed by Facebook. It’s more similar to React. Throughout the application, states are passed through atoms and selectors. This reduces unnecessary re-rendering and increases performance. Recoil is an advanced approach to React state management.

See the illustration below to understand how Recoil works:

Link: https://recoiljs.org/

5. Hookstate

Small most concise, fast state management library that is based on React hook.

Features:

Flexible API
Easy to learn
Incredibly Fast
Better performance
Supports TypeScript
Extensible with Plugins

Link: https://hookstate.js.org/

6. Jotai

Jotai is a minimalist yet flexible library to manage a simple React global state.

In comparison to Recoil, Jotai has many features. From what I have learned about Recoil and Jotai, if you choose one library from these two, choose Jotai. Recoil has issues with memory leaks. Recoil’s performance is superior to Jotai’s, has less boilerplate and a smaller core API, etc.

Some of the main features of Jotai:

TypeScript focused
No extra re-render
No actions
No stores
No reducers
No dispatchers

If you want to learn more, read this article and watch free course for more detailed information.

Link: https://jotai.org/

7. Zustand

There is probably no doubt that Redux is the most popular library for managing global states. Nevertheless, libraries like Zustand manage global states more pragmatically and straightforwardly.

Features:

Scalable and fast
It does not require a boilerplate
Compared to Redux, it is less complicated
A smaller number of lines of code
Developers have responded positively

For more information read this Article Managing React state with Zustand

Link: https://docs.pmnd.rs/zustand/getting-started/introduction

8. MobX

It is a simple and straightforward state management library that applies reactive functional programming. The library is lightweight, has minimal code to write, and has no boilerplate. It provides architectural freedom and effortless, optimal rendering.

See the illustration below to better understand the concept of MobX.

Link: https://mobx.js.org

Wrap Up

Thank you so much for reading. If you found it helpful, kindly let me know by clapping, sharing, and leaving a comment.

Follow me if you’re interested in reading more, and don’t forget to subscribe to my newsletter to receive the stories in your inbox.

Enjoy your time. Happy learning :))

Find me on: Medium | Twitter | GitHub | Hashnode | DEV.to

Master full-stack development

Ishrat — Sat, 11 Mar 2023 21:26:32 +0000

There are many options available for those wanting to learn full-stack development, making it difficult to decide which course to take. For your convenience, I have reduced the list to the top 5 suggestions, all of which cover a wide range of fundamental web development skills.

At the end of the day, the course you select will depend on your requirements and learning preferences. Any of these top suggestions, however, will provide you with well-rounded knowledge and prepare you for a rewarding career in full-stack web development.

1. The Odin Project

The Odin Project offers free web development courses online. During the program, students will learn the skills they need to become full-stack web developers. Project-based learning is an exclusive feature of the Odin Project. Through the course, students work on real-world projects to develop practical skills and build a portfolio of work they can showcase to potential employers.

It teaches you the following technologies:

HTML
CSS
JavaScript
Git
databases
Ruby/Ruby on Rails
Node.js

➤Link: https://www.theodinproject.com/

2. Free Full Stack Open Course

Anyone interested in learning full-stack web development should check out Free Full Stack Open Course, an excellent free resource. This course has something to offer everyone, whether you're a beginner or a professional.

It teaches you the following technologies:

React and Redux
Node.js
MongoDB
GraphQL
TypeScript

➤ Link: https://fullstackopen.com/en/

3. Full-stack Developer

Become a Full-stack developer by building 8 advanced full-stack web applications.

For those who want to:

Practice Front-end libraries and build complete applications.
Become a Full-stack developer.
Building websites with real-life practices.

➤ Link: https://devchallenges.io/paths/full-stack-developer

4. Full-Stack Engineer by Codecademy

As a full-stack developer, you need to learn many technologies. It's very accurate to say that a full-stack developer is a master of many trades and a jack of all trades who can complete a project from beginning to end. By following this well-curated career path, you can develop the specialized skills and portfolio necessary to begin your career as a Full-Stack Engineer.

Consists of JavaScript, Node.JS, SQL, Express.JS, React, TDD, and other technologies
Create projects, write live code, and prepare for interviews.
Obtain a professional certification in 4–8 months after completing.

➤Link: https://join.codecademy.com/learn/paths/full-stack-engineer-career-path/

5. Complete Web Developer Bootcamp by Udemy

This course is also highly regarded in the industry and comprehensively covers the important skills needed for full-stack development. Despite the fact that it is a paid course, you can purchase it during a sale at a reduced price. While you will have to pay for the course, the knowledge and skills you acquire will undoubtedly be valuable and well worth the investment. I highly recommend this course if you prefer to learn through tutorials and practical exercises.

What you'll learn:

Make 16 web development projects for your portfolio so that you can apply for junior developer jobs.
Discover the latest technologies, such as Javascript, React, Node, and even Web3.
You will be able to create ANY website after completing the course.
Learn professional developer best practices.

➤Link: https://www.udemy.com/course/the-complete-web-development-bootcamp/

Wrap Up

For now, that is all! Good luck with your full-stack development journey, and I hope you succeed. I really hope you find it helpful; if so, don't forget to like and share it with others. Follow me @ishratumar for more. If you have any questions, ask me on Twitter.

Happy learning!

Next.js vs. React: Which is the Best for Your Project

Ishrat — Sun, 26 Feb 2023 11:39:16 +0000

In this story, we are going to talk about React.js and Next.js to find out which one we should use in our projects to get the most benefit.

The purpose of this story is not to compare Next with React. Instead, it is meant to help you understand both so that you can decide whether or not to use Next in your projects.

Let’s first take a deeper look at React.js and Next.js separately.

So, let's get started!

React.js

React is a JavaScript library that is used to create user interfaces with the help of UI components. Components are small, independent, and reusable pieces of code that make a large application easy to manage. It is a free and open-source front-end JavaScript library that is maintained by Meta.

ReactJS is more popular than any other front-end development library; you should learn it if you want to be a front-end developer. There are many opportunities for developers who are proficient in ReactJS because of the rising demand for ReactJS developers.

I've written a story explaining ReactJS and its fundamental concepts to give beginners a quick overview.

Check it out here.

Next.js

Next.js is a JavaScript framework that is built by Vercel, Facebook, and Google and is based on Node.js and Babel.

This may seem strange since many React websites are built on Next.js. React websites are typically built on Next.js to simplify server-side rendering since Next.js offers all the functionality you need to create a website that works right out of the box. Next.js has comprehensive documentation. I believe that documentation is one of the reasons it has become more popular.

ReactJS vs NEXT.js

Let's take a look at two of them and then decide which one to use:

Workflow

Because React is a library, you need to create your own workflow. Next is essentially a workflow that became a framework because of its usefulness. Next is built on React and is intended to make development simpler and faster. In a React project, Next is often preferred because of its speed.

Performance

Next.js supports automatic server-side rendering. Websites built with Next.js are very fast because of the server-side rendering. React would require another library for server-side rendering since it only supports client-side rendering.

Check out the article below I wrote on React State Management Libraries: What is React State Management

Beginners Friendly

Next.js is a great option for developers who are just getting started with React.

It's saving developers the time and effort of setting up and customizing their toolset. With this, you don’t have to build applications from scratch. You can use the pre-built templates for different application categories or create your own from scratch.

To begin, simply enter the command npx create-next-app@latest into the terminal.

Note: This create-next-app only creates the front end of your application.

SEO (Search Engine Optimization)

Websites built with Next.js are search engine-optimized. Search Engine Optimization (SEO) improves your website’s ranking on Google. It is more likely that a website built with Next.js will rank on Google than one built with React.

Community Support

Even though there are very few tutorials and support resources available for Next, it is true that the community and project members are very active in open-source projects. So, Next can almost compete with React when it comes to suppsupporting## No Next.js without React
You cannot use Next.js without React.js, just as you cannot use React without JavaScript.

Conclusion

If you need to utilize a lot of APIs for some functionality, then Next.js is the right choice for you. In the case of simple static websites, React would be sufficient.

Hopefully, this will help you understand Next.js and help you decide whether or not to use it.

For more useful content, follow me and share this with your friends and audience.

Happy learning!

You can also find me on Twitter, GitHub, Hashnode, and DEV.to.

Forem: Ishrat

The rise and fall of MySpace

The rise of MySpace

A challenge to Friendster

Strategic moves

News Corporation acquired MySpace

Downfall begins

Adversity post-acquisition

Time Inc. acquisition of MySpace

Wrap up

Learn TypeScript from experts

Django Bootcamp: The only resource you need

Firebase vs. Supabase: which one should I select?

Firebase

Developer experience

Cost

Maximization of time

Firebase Extensions

Supabase

Developer experience

Cost

Maximization of time

Import/Export Data

Difference between the two

Conclusion

Learn CSS Grids with illustrations

Mastering CSS Grid with illustrations

Table of contents:

What is the grid in CSS?

Grid terminology

Grid container

Grid item

Grid Architecture

Grid lines

Grid cell

Gaps

Grid tracks

Grid Area

Grid Properties

Grid container properties

display

Rows and Columns

Justify items

Align Items

Justify content

Align Content

CSS Grid items properties

column-start & column-end

The grid-column & grid-row properties

The grid-column example:

The grid-row example

Grid area

Responsive Grids

Media Queries

Minmax() Function

Change elements order

The justify-self property

The align-self property

Shorthand Properties

Resources

Conclusion

GitHub repositories for interview questions

1. Awesome interview questions

2. The algorithms

3. System designer primer

4. Tech interview handbook

5. Coding interview university

6. Reactjs interview questions

7. Vuejs interview questions

Angular interview questions

8. Nodejs basics

9. Javascript questions

Wrap up

6 best animation libraries for your next project

1. Animate.css

2. Magic.css

3. Anime.js

4. Three.js

5. Mo.js

6. LottieFiles