DEV Community: Madhawa Awishka

bcrypt Explained: Safeguarding Passwords with Advanced Hashing

Madhawa Awishka — Tue, 13 Aug 2024 12:44:56 +0000

Introduction to Password Hashing

password hashing means turns your password(or any other piece of data) into a short strings of letters and/or numbers using an encryption algorithm.If a website is hacked, password hashing helps prevent cybercriminals from getting access to your passwords.Strong passwords are of the utmost importance. They protect your electronic accounts and devices from unauthorized access, keeping your sensitive personal information safe.

Introduction to bcrypt

Bcrypt is a lauded password-storing solution that uses complicated cryptographic algorithms, significantly reducing the chances of a hacker cracking your password.

How bcrypt works

Bcrypt runs a complex hashing process, during which a user’s password is transformed into a fixed-length thread of characters. It uses a one-way hash function, meaning that once the password is hashed, it cannot be reversed to its original form.nstead of simply hashing the given password, bcrypt adds a random piece of data, called salt, to create a unique hash that is almost impossible to break.

salt generation:when user creates a account or sets a password bcrypt generates a random salt (a random string of characters). The salt is then combined with the password.
Hashing:Bcrypt uses a configurable “work factor” sometimes called “rounds” or “cost factor ” to determine the number of iterations the algorithm will run. For example, if the cost factor is 10, the algorithm will iterate ²¹⁰ (1024) times.
Password + salt + hashing: The password and salt are then concatenated, and the combined string is passed through the hash function multiple times(determined by the “cost factor”). Each iteration processes the output of the previous iteration, making the process computationally expensive.
Storage: The hashed password is then stored in the database along with generated salt and “cost factor” that was used. The salt (initial random string of characters)and cost factor must be stored alongside the hashed password for authentication purposes as the process is repeated when the user logs into their account.

why use bcrypt

The purpose of using a salt in password hashing is to add uniqueness and randomness to each hashed password it makes it very difficult for hackers to reverse-engineer a password that has been hashed. However, not impossible.

Implementing bcrypt in Node.js

Setup and Installation

npm install bcrypt

2. Hashing a Password
Here’s a simple example of how to hash a password using bcrypt in Node.js:

const bcrypt = require('bcrypt');

const saltRounds = 10; // Number of salt rounds (cost factor)
const plainTextPassword = 'mySecretPassword';

bcrypt.hash(plainTextPassword, saltRounds, function(err, hash) {
    if (err) {
        console.error('Error hashing password:', err);
    } else {
        console.log('Hashed password:', hash);
    }
});

3. Verifying a Password
To verify a password, use the compare function

const bcrypt = require('bcrypt');

const plainTextPassword = 'mySecretPassword';
const hashedPassword = '$2b$10$TTA/FRNq9Z.tAIUfu2XgYOBk3L9r4JrN7x1vIrrrXoR4lPu1dPApW'; // Example hash

bcrypt.compare(plainTextPassword, hashedPassword, function(err, result) {
    if (err) {
        console.error('Error comparing passwords:', err);
    } else if (result) {
        console.log('Password matches!');
    } else {
        console.log('Password does not match.');
    }
});

Real-world Application

Many websites like e commerce platofrms,social-media platforms use bcrypt to securely store passowrds.content Management systems like WordPress and Drupal can integrate bcrypt through plugins or configurations to enhance the security of user accounts.

Community and Support

Stack Overflow

Reddits

Github discussions

Throughout this blog, we’ve explored the fundamental principles of password hashing and why bcrypt stands out as a reliable and secure option. We’ve seen how its adaptive nature and inclusion of a salt make it a robust choice for safeguarding passwords against modern threats. Given the rising number of data breaches and cyberattacks, securing user data is more important than ever. Implementing bcrypt in your projects can be a significant step toward protecting sensitive information and building trust with your users.

Happy Coding!

Dynamic Document Head Management Using React Helmet

Madhawa Awishka — Sat, 27 Jul 2024 18:32:48 +0000

React hemlet is a reusable react component that will manage all of the changes with the document head. This makes server-side rendering and React Helmet a dynamic duo for creating apps that are SEO and social media-friendly.
When developing a react application we all know managing the document head is going to be crucial especially when considering Search Engine Optimization (SEO) and the overall user experience. This is where React Helmet comes into play. React Helmet makes it easy to manage meta tags, titles, and other head elements vital for SEO and social media sharing. By using it, developers can ensure that their React application presents the correct information in the head, which can significantly affect how the content is ranked and displayed in search results.

Understanding the Document Head and the SEO

The document head also referred to as a head section of the HTML document is a pivotal area that holds meta tags, title tags, and links for stylesheets and scripts.These tags are not visible to users of the web pages but these elements are essential for search engines to understand the content of the web page which is directly affecting to the SEO.Installation and Configuration of React Helmet

Features

1.Supports all valid head tags: title, base, meta, link, script, noscript, and style tags.
2.Supports attributes for body, html and title tags.
3.Supports server-side rendering.
4.Nested components override duplicate head changes.
5.Duplicate head changes are preserved when specified in the same
6.component (support for tags like "apple-touch-icon").
7.Callback for tracking DOM changes.

Installation and Configuration of React Helmet

To get started with React Helmet, you'll need to install it in your React project. You can do this by running the following terminal command

npm install --save react-helmet

or if you prefer using yarn,

yarn add react-helmet

Once installed, you can import React Helmet into your React components. Here's a basic example of how to configure React Helmet in a component

import React from 'react';
import { Helmet } from 'react-helmet';

const HomePage = () => (
  <div>
    <Helmet>
      <title>Home Page - My React App</title>
      <meta name="description" content="Welcome to the home page of my React app" />
      {/* Additional head elements */}
    </Helmet>
    {/* Content of the home page */}
  </div>
);

In the above example, the Helmet component is used to set the title and meta description for the home page of the React app. This configuration ensures that when the home page is rendered, the document head will include these elements important for SEO and social media sharing.

React Helmet and Server-Side Rendering (SSR)

SSR is a technique designed to improve the performance and SEO of JavaScript-heavy apps, such as those developed using React. SSR generates the complete HTML for a page on the server before sending it to the client, allowing search engines to crawl the content more effectively.
React Helmet plays a vital role in SSR by allowing developers to manage head elements for each rendered page on the server. This ensures that when a search engine or social media crawler requests a page, it receives all the necessary meta tags and title tags that help index the content accurately.
React Helmet can be integrated into SSR workflows to manage the document head effectively. For instance, after rendering the React components on the server, React Helmet can collect all the head changes made by the components and include them in the server-generated HTML output.

SEO Friendliness and Limitations of React Helmet

React Helmet is a powerful tool for managing the head section of your React application, and it goes a long way in making your app SEO-friendly. By allowing you to dynamically set meta tags, such as meta name description content and other head elements, React Helmet helps ensure that search engines and social media platforms have the correct information to display your content effectively.
However, while it is excellent for managing the head, it could be a silver bullet for SEO. SEO encompasses many factors, including page performance, mobile-friendliness, backlinks, and high-quality content.
It helps with the on-page SEO aspect, but developers should know that a comprehensive SEO strategy involves much more than managing head tags.

Conclusion

In conclusion, It is an essential library for any React developer looking to improve the SEO and shareability of their applications. Developers can ensure that their applications are well-optimized for search engines and social media platforms.
Whether you're a React beginner familiar with advanced techniques or a senior software engineer, mastering React Helmet is a valuable skill in today's web development landscape.
Happy Coding!

Documentation:
https://www.npmjs.com/package/react-helmet#features
https://stackoverflow.com/questions/52690820/what-is-the-purpose-of-react-helmet

Mastering Tailwind CSS: A Comprehensive Guide for Beginners

Madhawa Awishka — Tue, 23 Jul 2024 10:11:43 +0000

What is Tailwind CSS?

Tailwind CSS is a highly customizable utility-first CSS framework that provides low-level utility classes to build designs directly in your markup. Tailwind has a really well-maintained, curated, and updated system of “sensible defaults” at its core. It’s really easy to make something look nice with minimal effort. That’s why it has that much popularity among developers.

Benifits of learing Tailwind css

Efficiency and Productavity
Flexibility and cutomization
Responsive Design
No specific Design Decisions
Learning modern CSS concepts.

How to mastering Tailwind?

Before you going to learn Tailwind you should have a proper idea about CSS styling. you should have a clear idea about CSS fundamentals such as selectors, properties, specificity, and the Box model.

if you search on the Internet surely you can see tons of videos or courses to learn tailwind css. I think it is not that much necessary. all you have to do is you should master the CSS first. after that, you can use the Search and Apply approach.

Search and Apply Approach
the solution is learning tailwind is just use the tailwind documentaion.it’s sound like bad approach but let me explain.tailwind is just css.

Like i said before if you know css you already know Tailwind css.All you need to do is go to the documentation and add styles as your wish.

as a example suppose like this.you want to add some left padding to your HTML element.just go to the doucement and search padding

As another example if you want to add text color to your element.hust search the text color in the search bar that will give you all the classes you want.

Link for the Tailwincs css documenataion:https://tailwindcss.com/

In conclusion, while Tailwind CSS offers a powerful and efficient way to style web applications using utility classes, it is essential to first master the foundational concepts of CSS. By having a solid understanding of CSS properties, selectors, and layout principles, developers can leverage Tailwind CSS more effectively to streamline their workflow and create consistent, responsive designs. Rather than replacing CSS knowledge, Tailwind CSS complements it, offering a pragmatic approach to the rapid development and maintenance of modern web interfaces. Therefore, invest time in honing your CSS skills — it will undoubtedly enhance your proficiency and creativity when using tools like Tailwind CSS in your projects.

Debug and find logical errors in the C program using dev c++ IDE

Madhawa Awishka — Sat, 20 Jul 2024 04:53:14 +0000

Debugging is the process of detecting and removing potential logical errors (bugs) in a computer program

Example

Write a c program to input marks earned for the exam and the marks earned for the homeworks to calculate and display the overall course score.Students can obtain 50% percent from their exam and 50% percent from their homeworks.
score1=exam score*(50/100)

score2=homework score*(50/100)

course score=exam score+homework score

This is the c program source code to the above question

/*This program calculates the overall score using given the points
 earned for the exam and homework*/

#include <stdio.h>

int main()

{

int examScore, homeworkScore;

float score1, score2, overallScore;

printf("Please enter the points earned for the exam : ");

scanf("%d", &examScore);

printf("Please enter the points earned for homework: ");

scanf("%d", &homeworkScore);

score1 = examScore * 50 / 100.0;

score2 = homeworkScore * 50 / 100.0;

overallScore = (score1 + score2) / 2;

printf( "Overall course score is %.2f", overallScore );

return 0;

}

Step 01:

open Dev c++ and write the above code

Step 02:

save and compile the program.

if your program does not have any errors and warnings excute the c program.Run your program with the following data set

The points earned for the exam:90

The points earned for the homework:60

if you have calculated your overall course score manually,the score should be 75.Here your expected output and program output is diffrent.it means,there is/are logical error/s in our C program.

Step 03:

Now, you can use the debugging option to find logical errors in the program.

Go To Tools →compiler option

Step 04:

Set breakpoint in C program
A breakpoint is a point in the program where you want the execution to stop temporarily so that you can examine the values of variables.

Start debugging

Click on Debug button, then your program will be executed up to line no. 8

Step04:

Add a watch on a variable

Then a pop up box will appear.You can give a name of a variable that you are going to add a watch.Let’s give “Examscore” variable as a first add watch.Then click “OK” button.Add watches on other variables and check their values. (homeworkScore,score1, score2, overallScore).

Step 05:

input values to the variables

Currently we are in line number 9.The program is executed up to line no. 8.To excute next C statement in the line number 10,click on the next line button(It is next to add watch button).

Then line number 10 will be excuted and you can see a output as “Please enter the points for the exam:”To excute the next line press “Next line” button again.Line number 10 will be excuted and now you can input the points for the exam as 90.Then press Enter button on your keyboard.

Like this you can input value for the homework score as 60.Now, you can see that the variable values of examScore and homeworkScore are changed to 90 and 60.

Step 06:

Observe outputs

When you excute line number 15 you can see score 1 as 45.

It means that this calculation is correct, and it takes 50% of exam marks.
There is no logical error in this calculation.

To execute next statement in line no. 16, click on Next line button again.
Then, line no. 16 will be executed and score2 value is calculated.
30 is stored inside score2 variable. It means that this calculation is correct, and it takes 50% of exam marks.There is no logical error in this calculation

To execute next statement in line no. 17, click on Next line button again.
Then, line no. 17 will be executed and overallScore value is calculated.
37.5 is stored in overallScore variable. You can see that this calculation is incorrect, and it doesn’t calculate overall score correctly.
So that, there can be a logical error in this calculation in line no. 17.

Step 07:

Fix logical errors

To fix the logical error, debugging process should be stopped using Stop Execution button.

When we observe the statement in line number 17

Overallscore=(score1+score2) / 2

Here, we don’t need to divide the addition of two scores by 2 since we need to take overall score out of 100.
That’s the error that we have done. Now, you can modify the statement as bellow.

Overallscore=(score1+score2)

Click on the line number of the relevant statement which includes the break point to remove it.

Compile and run the program and see whether the program works as expected. If you can’t get the expected output, there may be more logical errors.
Then you need to debug your program again to identify those logical errors.

Taliwind CSS VS Boostrap:which one should you choose?

Madhawa Awishka — Fri, 19 Jul 2024 17:49:26 +0000

In the ever-evolving world of front-end development, choosing the right CSS framework is crucial. This blog aims to compare Tailwind CSS and Bootstrap, two popular frameworks, to help you decide which one suits your needs better.

Background

Bootstrap, developed by Twitter, has been around since 2011 and is known for its pre-styled components. Tailwind CSS, introduced in 2017, takes a different approach with its utility-first methodology.

Customization and Flexibility

Bootstrap offers a range of pre-made components that help you quickly set up a consistent design. However, customizing these components often requires writing additional CSS, which can be cumbersome. Tailwind CSS, on the other hand, uses a utility-first approach without pre-made components. This makes it easier to build and customize your own components from scratch.

Performance

When it comes to performance, Bootstrap’s large file sizes can impact load times and overall performance. Tailwind CSS, being more modular, allows for a more optimized and efficient approach, as you only include the utilities you need.

Use Cases and Suitability

Bootstrap is ideal for rapid development and for developers who primarily focus on backend development. It allows you to quickly prototype and see how your backend changes affect the frontend using its pre-styled components. The consistent design across all projects is a significant advantage.

On the other hand, Tailwind CSS is perfect for customized web design and for those who focus on frontend or full-stack development. It offers the flexibility to change and tweak designs as much as needed, providing a unique look for each project.

Conclusion

In summary, if you need a framework that allows for quick development with a consistent design, Bootstrap is the way to go. If you prefer more control over your design and need highly customizable components, Tailwind CSS is the better choice. Both frameworks have their strengths and can significantly enhance your development process, depending on your project requirements and personal preferences.
Happy Coding!

DEV Community: Madhawa Awishka

bcrypt Explained: Safeguarding Passwords with Advanced Hashing

Introduction to Password Hashing

Introduction to bcrypt

How bcrypt works

why use bcrypt

Real-world Application

Further Reading and Resources

Community and Support

Dynamic Document Head Management Using React Helmet

Understanding the Document Head and the SEO

Features

Installation and Configuration of React Helmet

React Helmet and Server-Side Rendering (SSR)

SEO Friendliness and Limitations of React Helmet

Conclusion

Mastering Tailwind CSS: A Comprehensive Guide for Beginners

What is Tailwind CSS?

Benifits of learing Tailwind css

How to mastering Tailwind?

Link for the Tailwincs css documenataion:https://tailwindcss.com/

Debug and find logical errors in the C program using dev c++ IDE

Example

Taliwind CSS VS Boostrap:which one should you choose?

Background

Customization and Flexibility

Performance

Use Cases and Suitability

Conclusion