DEV Community: Jane49-cloud

fasting app

Jane49-cloud — Mon, 30 Mar 2026 20:10:57 +0000

I built this app to track fasting + hydration, would love your feedback 🙏
https://play.google.com/store/apps/details?id=com.jane.ndirangu.lifefast

Unlock Your Developer Potential: A Guide to the Best Chrome Extensions

Jane49-cloud — Tue, 05 Sep 2023 18:28:12 +0000

Are you a developer looking to streamline your workflow and enhance your productivity? In today's fast-paced digital world, having the right tools at your fingertips can make all the difference. Fortunately, the Google Chrome browser offers a vast ecosystem of extensions designed to empower developers and simplify their daily tasks. Whether you're a seasoned coder or just starting your journey in the world of web development, this blog is your gateway to discovering some of the best Chrome extensions that can supercharge your efficiency, debug with ease, and elevate your web development game. Join us on this exploration of essential browser extensions that can help you write cleaner code, debug more effectively, and stay on the cutting edge of web development trends. Your coding adventure begins here!

1. Web Developer

The "Web Developer" extension is an invaluable tool for every web developer. With its comprehensive set of features, it transforms your Chrome browser into a powerful web development environment. From inspecting elements, analyzing CSS styles, and debugging JavaScript to testing various screen sizes and checking for broken links, this extension does it all. Its user-friendly interface and quick access toolbar make it effortless to toggle various functionalities on and off, allowing you to focus precisely on what you need. Whether you're fine-tuning the responsiveness of your website, optimizing its performance, or troubleshooting issues, the "Web Developer" extension simplifies the process and helps you craft exceptional web experiences with ease. It's a must-have for any developer striving for pixel-perfect, flawless web development. download here

2. React Developer Tools

The "React Developer Tools" extension is an essential companion for web developers working with the React.js library. This extension provides a deep dive into the inner workings of your React applications, allowing you to inspect and manipulate the component hierarchy with precision. With the "React Developer Tools," you can easily track down state changes, props, and component lifecycles, helping you debug and optimize your React applications effectively. It empowers you to visualize the component tree, view the current state and props of each component, and even time-travel through component updates to understand how your UI evolves over time. Whether you're a seasoned React developer or just getting started, this extension is an indispensable asset for building, debugging, and fine-tuning React applications, ensuring you create responsive and performant user interfaces with confidence.download

3.Redux DevTools

The "Redux DevTools" extension is an indispensable tool for developers working with Redux, a popular state management library for JavaScript applications. This extension significantly simplifies the debugging and analysis of Redux-powered applications. With "Redux DevTools," you gain the ability to inspect the entire Redux store, track state changes, and even time-travel through actions, allowing you to understand how your application's state evolves.

This extension offers a clear and intuitive interface that visualizes your application's state, actions, and their effects, making it easier to identify and resolve issues. Additionally, you can adjust the state, dispatch custom actions, and replay actions to see their impact on your application in real-time. Whether you're building a small-scale application or a complex web app, "Redux DevTools" is an indispensable companion that streamlines the development and debugging process, helping you create robust and maintainable Redux-based applications with confidence.
download

4.Wappalyzer - Technology profiler

Wappalyzer is a powerful technology profiler and web browser extension that provides invaluable insights into the technologies used by websites. It allows web developers, designers, and digital marketers to quickly identify the underlying technologies that power a website. Whether you're curious about a site's content management system (CMS), e-commerce platform, web server, or even the specific JavaScript libraries it utilizes, Wappalyzer delivers this information with ease.

This extension simplifies the process of competitive analysis, enabling you to stay up-to-date with the latest trends in web technology and gain a competitive edge. It's a valuable resource for web professionals looking to better understand the digital landscape and make informed decisions about technology choices, optimizations, and strategies. With Wappalyzer, you can uncover the technological secrets behind your favorite websites and gain inspiration for your own projects, making it an indispensable tool for anyone involved in web development or digital marketing. download

How it works

Go to any website
Click the icon for a list of identified technologies
Click on a technology or category for more insights

5. ColorZilla

I used to see nice colors on other websites but could not quite get it right until I "met" ColorZilla 😂.
ColorZilla is a versatile browser extension commonly used by web designers and developers. This tool simplifies the process of identifying, copying, and analyzing colors on websites. With ColorZilla installed, users can easily pick colors from web pages, create color palettes, and even generate CSS code for the selected colors.

One of the standout features of ColorZilla is its "Eyedropper" tool, which allows you to precisely select any color on a web page and instantly obtain its hexadecimal or RGB value. This is particularly useful for matching colors or ensuring consistency in design projects. ColorZilla also offers a color history feature, making it easy to revisit previously selected colors.

Additionally, ColorZilla provides a gradient generator, CSS gradient editor, and other color manipulation tools, making it a valuable asset for web professionals working on everything from user interfaces to graphic design. Whether you're a seasoned designer or a beginner, ColorZilla simplifies the process of working with colors in web development and design, saving time and improving accuracy in your projects.download

7.JSON Viewer

JSON Viewer is a handy tool used by developers and anyone working with JSON (JavaScript Object Notation) data. JSON is a widely used data format for representing structured information, and JSON Viewer makes it much easier to read and understand JSON data, especially when dealing with complex or nested structures.

This browser extension or online tool takes JSON data, which can sometimes be challenging to interpret in its raw format, and presents it in a more human-readable and organized manner. It typically offers features such as syntax highlighting, collapsible and expandable nodes for nested objects and arrays, and proper indentation, making it much easier to navigate and comprehend JSON files.

JSON Viewer is particularly useful for web developers, data analysts, and anyone who needs to work with JSON data for APIs, configuration files, or data interchange. It helps ensure that JSON data is correctly formatted, making it an indispensable tool for debugging, troubleshooting, and gaining insights from JSON datasets. Whether you're examining a response from an API call or reviewing configuration files, JSON Viewer simplifies the process and enhances your productivity when working with JSON data. download

8.CSS Peeper

CSS Peeper is a browser extension designed for web designers and front-end developers. It provides a set of powerful tools to inspect, analyze, and extract CSS information from web pages. Here are some key features and benefits of CSS Peeper:

Style Inspection: CSS Peeper allows you to inspect the styles applied to specific elements on a webpage. You can hover over an element and see its CSS properties, values, and even the CSS selectors responsible for styling it.

Color Palette Extraction: One of its standout features is the ability to extract the color palette used on a webpage. This is incredibly useful for designers who want to identify and replicate the color scheme of a site.

CSS Measurement Tool: You can measure the dimensions (width, height, margins, padding, etc.) of any element on a page, helping with precise layout and spacing adjustments.

Layer Extraction: CSS Peeper lets you extract design assets like images and icons directly from a webpage. This can be handy for collecting resources for inspiration or your own projects.

SASS/LESS Support: If the webpage uses a preprocessor like SASS or LESS for its stylesheets, CSS Peeper can also show you the preprocessed CSS, making it easier to understand and work with.

Export Styles: You can export the CSS styles of a selected element or the entire webpage, saving you time when referencing or adapting styles for your projects.

Accessibility Checker: CSS Peeper includes an accessibility checker that helps you identify potential accessibility issues on a webpage, allowing you to make your designs more inclusive.

Cross-Browser Compatibility: It's available as a browser extension for multiple browsers, making it versatile for various development environments.

CSS Peeper simplifies the process of reverse engineering website designs, conducting competitive analysis, or gaining inspiration from other websites. It's a valuable tool for designers and developers who want to understand and replicate the styling and layout of web pages efficiently.
download

other extensions worth checking out include:

9. GitHub Extension

The GitHub extension enhances your experience on GitHub by providing features like code navigation, pull request reviews, and more. It integrates seamlessly with your GitHub workflow, making it easier to collaborate and manage your repositories.

10. Octotree

Octotree is a GitHub code tree extension that adds a code tree sidebar to GitHub repositories. This makes it easier to navigate and explore large codebases, especially when dealing with complex projects.
Download Here

11. LiveReload

LiveReload is a tool that automatically refreshes web pages as you make changes to your local code. It's ideal for front-end developers who want to see real-time updates without manually refreshing the browser.
Download Here

12. Vue.js Devtools

If you work with Vue.js, the Vue.js Devtools extension allows you to inspect Vue components, view their data, and debug Vue applications. It's an essential tool for Vue.js developers.
Download Here

13. AngularJS Batarang

For those working with AngularJS, the AngularJS Batarang extension provides tools for debugging and profiling AngularJS applications, helping you optimize your code and troubleshoot issues.

14. Postman

While primarily a standalone application, Postman also has a Chrome extension. It's incredibly useful for testing APIs and creating HTTP requests, making it a must-have for API developers.
Download Here

15. Web Developer Checklist

The Web Developer Checklist extension helps you follow best practices in web development by providing a checklist for web projects. It ensures that you don't miss any important steps during development and optimization.
Download Here

16. User-Agent Switcher

User-Agent Switcher allows you to quickly switch your user agent to test how your website or web application behaves on different devices and browsers. It's useful for cross-browser and cross-platform testing.
Download Here

These extensions cover a range of development needs, from version control and collaboration on GitHub to debugging and testing web applications. Depending on your specific development stack and tasks, you may find some of these extensions particularly helpful.

JAVASCRIPT NECESSITIES(things you need to emphasis on):

Jane49-cloud — Thu, 22 Dec 2022 12:26:20 +0000

1.Variables: Variables are used to store and manipulate data in JavaScript. You can create a variable using the var, let, or const keyword.

let x = 5;
console.log(x); // Output: 5

2.Data types: JavaScript has several data types, including numbers, strings, booleans, and objects.

let num = 5; // number
let str = 'Hello'; // string
let bool = true; // boolean
let obj = {key: 'value'}; // object

3.Arrays: Arrays are used to store lists of data in JavaScript. You can access and modify the elements of an array using their index.

let arr = [1, 2, 3, 4, 5];
console.log(arr[2]); // Output: 3
arr[2] = 10;
console.log(arr); // Output: [1, 2, 10, 4, 5]

4.Loops: Loops allow you to repeat a block of code multiple times. There are several types of loops in JavaScript, including for loops and while loops.

for (let i = 0; i < 5; i++) {
  console.log(i); // Output: 0 1 2 3 4
}

let j = 0;
while (j < 5) {
  console.log(j); // Output: 0 1 2 3 4
  j++;
}

5.Functions: Functions are blocks of code that can be called by their name. They can also accept arguments and return a value.

function add(x, y) {
  return x + y;
}

console.log(add(2, 3)); // Output: 5

6.Objects: Objects are collections of key-value pairs in JavaScript. You can access and modify the values of an object using its keys.

let obj = {
  key1: 'value1',
  key2: 'value2'
};

console.log(obj.key1); // Output: 'value1'
obj.key1 = 'new value';
console.log(obj.key1); // Output: 'new value'

7.Destructuring: Destructuring is a feature of JavaScript that allows you to extract values from arrays and objects into variables.

let arr = [1, 2, 3];
let [x, y, z] = arr;
console.log(x); // Output: 1
console.log(y); // Output: 2
console.log(z); // Output: 3

let obj = {key1: 'value1', key2: 'value2'};
let {key1, key2} = obj;
console.log(key1); // Output: 'value1'
console.log(key2); // Output: 'value2'

8.Spread operator: The spread operator allows you to spread the elements of an array or object into a new array or object.

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // Output: [1, 2, 3, 4, 5]

let obj1 = {key1:

9 Map method: The map method is a higher-order function that allows you to transform the elements of an array. It returns a new array with the transformed elements.

let arr = [1, 2, 3];
let newArr = arr.map(x => x * 2);
console.log(newArr); // Output: [2, 4, 6]

10.Set method: The Set object is a collection of unique values. You can use the add method to add values to a Set, and the has method to check if a value is in a Set.

let set = new Set();
set.add(1);
set.add(2);
set.add(3);

console.log(set.has(1)); // Output: true
console.log(set.has(4)); // Output: false

Where to impliment Password Encryption in node.js

Jane49-cloud — Mon, 14 Nov 2022 09:03:51 +0000

Security is one of the most essential features of any application.
We mainly impliment this through hashing password. Today I will focus on implimenting this in a MERN app.
The basic structure of a neat node application has the following basic folders and files

connection(database)

models (defines properties of models.)

conrollers (handlers of Crud operations)

routes(defines paths || Url mapping)

Encryption in controllers

Assuming you are already connected to the database and have created a users model, install bcrypt
npm i bcryptjs

# backend/controllers/users.js

const User = require('../models/user') //path to your user model
const bcrypt = require("bcryptjs")

const registerUser = async(req,res)=>{
const {name, email, password} = req.body

//first check if the user exists
 const userExists = await User.findOne({ email });
    if (userExists) {
      response.status(400);
      console.log("Email address already exists")
    }

  //Encrpt password before you save
    const salt = await bcrypt.genSalt(10);
    const hashedPassword = await bcrypt.hash(password, salt);
}

//create user 

try {
const user = await User.create({
        name,
        password: hashedPassword,
        email
    });
  res.json(user);
    console.log(user, "User created successfully...")

} catch (error) {
    console.log(error, `User not created...`)
};

module.exports = {
  registerUser,
};

import the registerUser controller and route your user register path and test your application. I used postman to register a user and got the following json response:

{
    "name": "Luke Graham",
    "email": "graham@gmail.com",
    "password": "$2a$10$rQrhLmwoEGaCMq9qR9cLaOvVBtA/FvoSSmt1tGj0gq7tFyscDS5jK",
    "photo": "https://i.ibb.co/4pDNDk1/avatar.png",
    "phone": "+245",
    "bio": "bio should be at most 250 characters",
    "_id": "6371eb2668c624ddb1bd72d9",
    "createdAt": "2022-11-14T07:15:50.078Z",
    "updatedAt": "2022-11-14T07:15:50.078Z",
    "__v": 0
}

The password was hashed successfully.
Do not give a maxLength to the password in the model because the hashed password gives a long string. Validate in the frontend.
The above method is valid. However, there are moreother controllers that require password.

*registerUser
loginUser
updatePassword
forgotPassword
*
for each of the above handlers you need to configure encryption.
Therefore it is easier to perfom the encription in the model file.
Use a schema.pre() function that changes the password before saving.
This is how it is implimented:

#backend/models/users.js

const mongoose = require("mongoose");
const bcrypt = require("bcryptjs");

const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: {
    type: String,
    required: true,
    unique: true,
    trim: true,
    match: [
      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
      "Please enter a valid email address",
    ],
  },
  password: {
    type: String,
    required: true,
    minLength: [6, "password must be at least 6 characters"],
  },
  photo: { type: String, required: true ,
    default: "https://i.ibb.co/4pDNDk1/avatar.png"}, // person avatar
    phone:{type:String, default: "+245"},
    bio:{
        type:String, 
        maxLength:[250, "bio must be at most 250 characters"],
        default: "bio should be at most 250 characters"
    }
},
{
    timestamps:true
}

);

//Encrypt password before saving to database

userSchema.pre("save", async function(next){
  if(!this.isModified("password")){
      return next()
  }
  const salt = await bcrypt.genSalt(10);
  const hashedPassword = await bcrypt.hash(this.password, salt);//this.passord (points to the password in this file)
  this.password = hashedPassword
next()
})


module.exports = mongoose.model("User", userSchema);

Just a few adjustments in the model and password is pashed before the schema is saved.
There are a few changes in the controller file

#backend/controller/user

const User = require('../models/user') //path to your user model

const registerUser = async(req,res)=>{
const {name, email, password} = req.body

//first check if the user exists
 const userExists = await User.findOne({ email });
    if (userExists) {
      response.status(400);
      console.log("Email address already exists")
    }
 //create user 
try {
const user = await User.create({
        name,
        password,
        email
    });
  res.json(user);
    console.log(user, "User created successfully...")

} catch (error) {
    console.log(error, `User not created...`)
};
module.exports = {
  registerUser,
};

route your application and test. My response:

{
    "name": "Mercy",
    "email": "mercy@gmail.com",
    "password": "$2a$10$iqzkaO1wTco.3z1KK8Ij9u9sy2DtLViRwL5lvgeHDcQ31wPfCo9jK",
    "photo": "https://i.ibb.co/4pDNDk1/avatar.png",
    "phone": "+245",
    "bio": "bio should be at most 250 characters",
    "_id": "6371fe23225d25b4e3e8220c",
    "createdAt": "2022-11-14T08:36:51.311Z",
    "updatedAt": "2022-11-14T08:36:51.311Z",
    "__v": 0
}

The password was successfully hashed. Hoping this helps understund encryption better and how to use it better.

Was this article helpful?
Need clarification?
Leave a comment

Some of the things you need to learn before getting started on Node

Jane49-cloud — Fri, 27 May 2022 03:30:58 +0000

Some of the things you need to learn before getting started on Node
There has been a lot of support and love shown out here when it comes to Node. It's quite powerful and very fast. It has a growing community and contribution. There especially node-module that has so many packages offered for free .Let's not forget how easy it is especially to developers with Es6 skills. React and Node are basically JavaScript. if you know this nuggets then you should have no trouble learning and working with them.
I will attach videos related to each nugget.
map () method
Probably the most used array method and very useful. Helps especially when it comes to destructuring.
to understand the method fully go to:
https://www.youtube.com/watch?v=80KX6aD9R7M&list=PLnHJACx3NwAfRUcuKaYhZ6T5NRIpzgNGJ
Interested in all nuggets?
https://www.youtube.com/watchv=80KX6aD9R7M&list=PLnHJACx3NwAfRUcuKaYhZ6T5NRIpzgNGJ
The above link has all nuggets you need to know and are quite easy and well explained.
Was this helpful?