DEV Community: alguerocode

javascript validation library - volder

alguerocode — Thu, 31 Mar 2022 12:39:54 +0000

Overview of My Submission

Submission Category: javascript oss library

Link to Code on GitHub https://github.com/devSupporters/volder

Additional Resources (documentation and api):

https://volder.vercel.app/

Introduction

this is my best project, i share it to you to see my my work.
I hope this project will help you.

My Deepgram Use-Case

javascript Object validation and schema builder and parsing

Dive into Details

volder is powerful Object schema validation, it lets you describe your data using a simple and readable schema and transform a value to match the requirements, it has custom error messages, custom types and nested schemas.

Conclusion

pls support me

how to validate data in javascript

alguerocode — Sat, 12 Mar 2022 13:57:03 +0000

the complete blog in hashnode

the link: https://alguerocode.hashnode.dev/how-to-validate-data-in-javascript

New React.js Hook - useLayoutEffect

alguerocode — Sat, 12 Mar 2022 13:55:10 +0000

Hello | السلام عليكم Hi folks, in this blog we will cover useLayoutEffect React Hook. Hope you like it.

the complete blog in hashnode

the link: https://alguerocode.hashnode.dev/new-reactjs-hook-uselayouteffect

How Node.js work in simple way

alguerocode — Sat, 05 Mar 2022 07:27:37 +0000

hi folks, in this blog we will teach basic understanding of how Node.js work under the hood. hope you like it.

the complete article is in hashnode.

this is atricle link: https://alguerocode.hashnode.dev/

building Node.js video streaming in 5 minutes

alguerocode — Thu, 03 Mar 2022 10:37:51 +0000

hi folks, in this blog we will build a Node.js video streaming application in like 10 minutes.

prerequisite

install Node.js in your computer

what is streaming

Streams are collections of data — just like arrays or strings. The difference is that streams might not be available all at once, and they don’t have to fit in memory. This makes streams really powerful when working with large amounts of data, or data that’s coming from an external source one chunk at a time.

setup [ 1 ] - Geting started

1 - create folder and name it vido-streaming
2 - initialize npm in your project npm init -y
3 - install this packages

dependencies.

#### npm install express

development dependencies.

npm install -D nodemon

add this script to your `package.json` file.

"start": "nodemon index.js"

setup [2] - setup Node.js server

1 - create index.js file in your project root.
2 - add this code below

const express = require("express");

const app = express(); // setup express application
const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log("SERVER STARTED AT PORT: " + PORT);
});

this code starting web server using express framework and listening to port: 3000.

setup [3] - serving html page

now we want to serve an html page with video element to the Frontend.

1 - create public folder in your project root.
2 - create index.html file in created folder (public) and add this html code.


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home | Video Streaming</title>
  </head>
  <body>
    <video 
    controls 
    src="/video" 
    id="video-stream" 
    poster="/poster.jpeg" 
    width="700"
    >
    </video>
  </body>
</html>

controls : Specifies that video controls should be displayed (such as a play/pause button etc).
src : Specifies the URL of the video file.
poster: Specifies an image to be shown while the video is downloading, or until the user hits the play button.

serving html file

we need to send the html page to the users. add this code below in index.js file.

app.get("/", (req, res) => {
try {
    res.sendFile(__dirname + "/public/index.html");
} catch (err) {
    res.status(500).send("internal server error occurred")
}
});

what that code does, is listening to get request in base URL of the application, when it get the response will be send file by using sendFile and first parameter is html file path.

note: __dirname is the root path of the current directory.

Serving Poster Image - setup [4]

poster is image will be shown until the video is downloading or user click the video.
note : you need to any image you want in public directory that you make.
see the code below

app.get("/:file_name", (req, res) => {
    try {
        res.sendFile(__dirname + req.params.file_name);
    } catch (err) {
        res.status(500).send("internal server error occurred");
    }
});

Streaming video - setup[5] and Final

import required node.js modules

when streaming the video we need to import two Node.js build-in library in the top of file.

const  fs = require("fs");
const  path = require("path");

fs : file system module allows you to work with the file system on your computer. To include the File System module.

path: allows you to interact with file paths easily. The path module has many useful properties and methods to access and manipulate paths in the file system.

setup video API function

add this code before Serving Poster Image function, because nodejs will go throw the express middlewares and if the requested url is /video it will be match the Serving Poster Image middlewaree not the video middleware.
note : you need to add random video in public file.

app.get("/video", (req, res) => {
// indicates the part of a document that the server should return
// on this measure in bytes for example: range = 0-6 bytes.
const  range = req.headers.range;
if (!range) res.status(400).send("Range must be provided");

const  videoPath = path.join(__dirname, "public", "video.mp4");
// extract video size by using statSyn()
const  videoSize = fs.statSync(videoPath).size;
// 10 powered by 6 equal 1000000bytes = 1mb
const  chunkSize = 10 ** 6; 

// calculating video where to start and where to end.
const  start = Number(range.replace(/\D/g, ""));
const  end = Math.min(start + chunkSize, videoSize - 1);
const  contentLength = end - start + 1;

// setup video headers
const  headers = {
"Content-Range":  `bytes ${start}-${end}/${videoSize}`,
"Accept-Ranges":  "bytes",
"Content-Length":  contentLength,
"Content-Type":  "video/mp4",
};

res.writeHead(206, headers);
// creating readStream (stdin).
const  videoStream = fs.createReadStream(videoPath, { start, end });

// create live stream pipe line
videoStream.pipe(res);
});

and then run `npm run start`. to see your work.

what is pipe() in streaming

Streams make for quite a handy abstraction, and there's a lot you can do with them - as an example, stream.pipe(), the method used to take a readable stream and connect it to a writeable stream. the writable stream is user we request him the data buffers.

project source code: https://github.com/alguerocode/video-streaming
follow me in github: alguerocode

thank you for reading.

All you need to master javascript

alguerocode — Tue, 01 Mar 2022 02:48:09 +0000

MasterJS website will show your learning path

adding a star to the repository is really help me.

hello everyone this is my new project to help peopole learning javascript

what is masterJS

All-In-One, free resources and collections related to javascript. we provide useful links to help you learn JavaScript, web development and other related stuff along with some of the best resources available online.

link to github: devSupporters/masterJS

javascript data validator (volder)

alguerocode — Sun, 27 Feb 2022 17:01:09 +0000

Overview of My Submission

I have been working in schema builder and data validator package name volder

what is volder

Submission Category:

javascript package

Link to Code on GitHub

github link: https://github.com/devSupporters/volder

Additional Resources / Info

this project by alguerocode

link: https://github.com/alguerocode/js-volder

easy way to validate data in javascript

alguerocode — Sat, 12 Feb 2022 13:57:01 +0000

introduction

we build project and websites , sometimes encounter problems that need solve, but what if we come out with problem of how we validate data in correct way, this is major question and what the data structure you want to validate!, like you want validate and email and password you want to add specific rules to keep users Entering emails correctly,but that too tough or you are not expert in validating strings or regex or anythings like that.

how to solve ?

developers like to use validation library to solve there problems and focus in there business, so this point help me to start building volder validation library helping people to describe data in good structure and well design.

what is volder

volder is javascript npm package, it's powerful Object schema validation, it lets you describe your data using a simple and readable schema and transform a value to match the requirements, it has custom error messages, custom types and nested schemas.

let's take an example

in this example we use volder package for user login validation, first thing install volder package
npm install --save volder

volder package has

Volder constructor to describe and structure your multiple data.
SingleVolder function it's used for describe single data.
volder support other types like Email or CreditCard.

this code shows you how to describe your data for user validation

import { Volder, Email } from 'volder';


const userSchema = new Volder({
    username: {
        type: [String, 'username must be in string'],
        alphanumeric: [true, 'username should only contain letters and numbers'],
        minLength: [4, 'username at least 4 characters'],
        maxLength: [16, 'username at most 16 characters'],
        required: [true, 'username is required'],
        trim: true
    },
    email: {
        type: [String ,'email must be in string'],
        pattern: [Email, 'not valid email'],
        maxLength: [150, 'email be at most 150 characters'],
        required: [ true,'email is required'],
        trim: true
    },
    password: {
        type: [String , 'password must be in string'],
        minLength:[8, 'password should be at least 8 characters'],
        maxLength: [30, 'password should be at most 30 characters'],
        required: [ true, 'password is required'],
        matches: ["^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]$", 'password must contain numbers and letters']

    }
})

const { valid, errors, value } = userSchema.validate(input);

see more example: https://github.com/alguerocode/js-volder

how to help me

there a variety of ways to help me for example install volder and use it in your project, contributing to volder repository or just add a ⭐ star ⭐ to volder repository and i will thank you very much.

thank for reading

how to validate data in javascript

alguerocode — Thu, 10 Feb 2022 19:11:06 +0000

introduction

how to solve ?

what is volder

let's take an example

in this example we use volder package for user login validation, first thing install volder package
npm install --save volder

volder package has

Volder constructor to describe and structure your multiple data.
SingleVolder function it's used for describe single data.
volder support other types like Email or CreditCard.

this code shows you how to describe your data for user validation

import { Volder, Email } from 'volder';


const userSchema = new Volder({
    username: {
        type: [String, 'username must be in string'],
        alphanumeric: [true, 'username should only contain letters and numbers'],
        minLength: [4, 'username at least 4 characters'],
        maxLength: [16, 'username at most 16 characters'],
        required: [true, 'username is required'],
        trim: true
    },
    email: {
        type: [String ,'email must be in string'],
        pattern: [Email, 'not valid email'],
        maxLength: [150, 'email be at most 150 characters'],
        required: [ true,'email is required'],
        trim: true
    },
    password: {
        type: [String , 'password must be in string'],
        minLength:[8, 'password should be at least 8 characters'],
        maxLength: [30, 'password should be at most 30 characters'],
        required: [ true, 'password is required'],
        matches: ["^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]$", 'password must contain numbers and letters']

    }
})

const { valid, errors, value } = userSchema.validate(input);

see more example: https://github.com/alguerocode/js-volder

how to help me

thank for reading

postman clone

alguerocode — Thu, 10 Feb 2022 01:19:17 +0000

postman-clone

clone postman using reactjs and bootstrap and only json data transformations postman clone repository

before we starting, support me by adding a star to the volder repository

library used

React
Bootstrap
nodejs(for test)

Clone the project

  git clone https://github.com/alguerocode/postman-clone.git

Go to the project directory

  cd postman-clone

Install dependencies

  npm install

Start the server

  npm run start

How to find new maintainers for your open source project

alguerocode — Wed, 09 Feb 2022 19:21:45 +0000

This open source software helps you build a healthy team of co-maintainers so that no project gets left behind.

before we starting, support me by adding a star to the volder repository

Table of Content

The problem of unmaintained open source projects
The load of seemingly unmaintained projects
Building Adoptoposs
How you can help
Looking for maintainers? Give Adoptoposs a try!

If there's one thing you can say about open source software (OSS), it's that it quietly yet inarguably runs our world. Most of the internet is built on open source software, and, these days, millions of developers build and maintain hundreds of thousands of open source packages in more than 250 programming languages. If that's not enough, enterprise companies continue to grow their investments in open source in 2020.

The more open source software permeates our everyday life, the more important it becomes to keep all these projects secure, compatible, and well-maintained.

As we will see, this is not as easy as it sounds, especially if a great amount of open source is built by volunteers. To address the problem of open source maintenance, I built Adoptoposs.org, an app (open source of course!) that helps you find co-maintainers and keep open source projects and their maintainers healthy.

The problem of unmaintained open source projects

Many developers contribute to open source at work, whether it's a massive project like Kubernetes or an open source product like Ansible.

However, the maintenance of a great amount of OSS projects is done by volunteers in their spare time. Many projects grow out of a personal side-project into popular and widely used libraries. With a lot of attraction, more issues and pull requests are opened by the community. A maintainer's growing responsibility is now to orchestrate incoming requests and changes and steer the whole project.

There are loads of stories about the challenges and struggles of OSS maintainers. They talk about emotionally exhausting community management and the great effort that has to be put into triaging of issues and pull requests. When hearing these stories of (mostly voluntary) efforts, it's no surprise that maintainers sometimes feel overwhelmed by the amount of work and walk away from their projects.

The reasons for dedicating less time to or even leaving an open source project are many and varied. Maintainers leave their company or lose interest. Changes in their personal lives give them less time to take care of the project, or they stop their activities in the open source scene entirely because of burnout or illness. In the worst case, they have passed away.

In all these cases, projects are left behind, often with no one but the original author having administration rights or access to the publishing accounts. Of course, you can fork and publish a project under a new name. But ultimately, that leads to confusion about the state of the project and whether it can and should still be considered a stable piece of software.

The load of seemingly unmaintained projects

Over the last couple of years doing web development, I often found myself in situations where long-used libraries were no longer compatible with the latest version of a framework or programming language. It turned out that the original maintainers had lost access to the project after leaving their company or just could not dedicate enough time. It was always hard to contact anyone who could help with merging bug fixes and releasing a new version.

Building Adoptoposs

After I found that, on GitHub alone, there were more than 36,000 issues asking "Is this project abandoned?", I thought about how to tackle this problem. More than 15,000 of these were open issues. So, lots of projects need help with their maintenance.

I was lucky that I was between jobs at the beginning of this year and had a lot of time to think about the problem and how I could help contribute to the health of open source projects and their maintainers. So I just started working on something.

First, I thought it might be nice to have a dashboard that rates OSS projects by whether they needed help with their maintenance. When I had a prototype running after a couple of days' work, I found that it kind of worked but did not really overcome the problem of getting into contact with the maintainer. And when a maintainer was hard to reach when I needed support, it would already be too late.

So, I reconsidered the actual goal. Because maintainers know first when they need help, they should be able to make their project visible to potential co-maintainers and ask for it. Likewise, people who considered becoming a co-maintainer should be able to find interesting projects and contact the maintainer.

With these goals written down, I started building Adoptoposs in February 2020. I must say it went faster than I expected. As a tech stack, I chose Elixir and gave Phoenix LiveView a try, primarily because I wanted to learn more about it but also because I planned to publish Adoptoposs as open source from the beginning. This stack seemed perfect in terms of productivity and the resources I would have to spend on maintaining and hosting the app.

Two months later, after I had learned a lot about Elixir, HTML, CSS, and user experience design, Adoptoposs went live on March 30. Since then, it has already found itself its first co-maintainer—by using Adoptoposs, of course!

How you can help

The philosophy of Adoptoposs is that each and every open source project of considerable popularity should have a team of co-maintainers to avoid sliding into neglect. Multiple people should have full access to the project and all related services—like package registries, hosting accounts, and third-party services—to ensure ongoing maintenance even as maintainers come and go.

For your popular open source projects, I encourage you to build a team of co-maintainers to remove the single point of failure. There are great ways to do this while building trust.

Your co-maintainers do not necessarily need to work on the project every day. They might only be an in-case-of-emergency contact, but at least they will be able to be there. This process often means giving new maintainers access when former maintainers want to step down. You can follow examples like the core-dev program for Python or look at project guides like the one at Homebrew for ideas and direction.

Looking for maintainers? Give Adoptoposs a try!

If you don't have co-maintainers for your open source project in mind yet, consider submitting your project to Adoptoposs.org. Adoptoposs will list your project and also notify developers interested in the programming languages you use.

Keep in mind to document important details about your project to make it easier for people to help you. Start seeking out help early on and build a team of co-maintainers to keep your open source projects and yourself healthy.

If you are considering becoming a co-maintainer, you can explore projects that need help and contact the maintainers. You can be pretty certain that your help is needed, and it is a great way to level up your expertise or simply have some fun with code.

And of course, if you find any issues with Adoptoposs or have suggestions on how to improve it, please let us know in our GitHub repository.

support me by adding a star to volder repository

🌟new schema builder and data validation library🌟

alguerocode — Wed, 09 Feb 2022 17:07:48 +0000

last day alguerocode publish new schema builder and data validation, it's very useful for user login validation. it's volder.

visit volder.vercel.app to see more

example

import { Volder, Email } from 'volder';


const userSchema = new Volder({
    username: {
        type: [String, 'username must be in string'],
        alphanumeric: [true, 'username should only contain letters and numbers'],
        minLength: [4, 'username at least 4 characters'],
        maxLength: [16, 'username at most 16 characters'],
        required: [true, 'username is required'],
        trim: true
    },
    email: {
        type: [String ,'email must be in string'],
        pattern: [Email, 'not valid email'],
        maxLength: [150, 'email be at most 150 characters'],
        required: [ true,'email is required'],
        trim: true
    },
    password: {
        type: [String , 'password must be in string'],
        minLength:[8, 'password should be at least 8 characters'],
        maxLength: [30, 'password should be at most 30 characters'],
        required: [ true, 'password is required'],
        matches: ["^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]$", 'password must contain numbers and letters']

    }
})

const { valid, errors, value } = userSchema.validate(input);

DEV Community: alguerocode

javascript validation library - volder

Overview of My Submission

Submission Category: javascript oss library

Link to Code on GitHub https://github.com/devSupporters/volder

Additional Resources (documentation and api):

Introduction

My Deepgram Use-Case

Dive into Details

Conclusion

how to validate data in javascript

the complete blog in hashnode

New React.js Hook - useLayoutEffect

the complete blog in hashnode

How Node.js work in simple way

the complete article is in hashnode.

building Node.js video streaming in 5 minutes

prerequisite

what is streaming

setup [ 1 ] - Geting started

development dependencies.

add this script to your package.json file.

setup [2] - setup Node.js server

setup [3] - serving html page

serving html file

Serving Poster Image - setup [4]

Streaming video - setup[5] and Final

import required node.js modules

setup video API function

and then run npm run start. to see your work.

what is pipe() in streaming

All you need to master javascript

MasterJS website will show your learning path

what is masterJS

javascript data validator (volder)

Overview of My Submission

what is volder

Submission Category:

Link to Code on GitHub

Additional Resources / Info

easy way to validate data in javascript

introduction

how to solve ?

what is volder

let's take an example

how to help me

how to validate data in javascript

introduction

how to solve ?

what is volder

let's take an example

how to help me

postman clone

postman-clone

clone postman using reactjs and bootstrap and only json data transformations postman clone repository

library used

Clone the project

Go to the project directory

Install dependencies

Start the server

How to find new maintainers for your open source project

Table of Content

The problem of unmaintained open source projects

The load of seemingly unmaintained projects

Building Adoptoposs

How you can help

Looking for maintainers? Give Adoptoposs a try!

🌟new schema builder and data validation library🌟

example

add this script to your `package.json` file.

and then run `npm run start`. to see your work.