teleren/devto huggingface dataset:
Creating your own ExpressJS from scratch (Part 6) - Creating a body-parser middleware
Tags: javascript, node, programming, webdev
Published: 2023-10-09 17:01:10

I have not created tutorials for our Framework for a while, but It's time to return.

## Understanding and Creating a Custom Body-Parser Middleware

In this tutorial, we'll dive into the creation of a custom `body-parser` middleware for our web framework. Before we get into the code, let's understand why this middleware is essential.

---

## Why a Body-Parser Middleware?

The `body-parser` middleware is a crucial component in web applications as it allows us to transform incoming data streams from HTTP requests into accessible JavaScript objects. Understanding and creating a custom `body-parser` middleware is fundamental to handling incoming data effectively.

---

## Creating the Middleware

`src/body-parser.js`

```js
const BodyParser = async (req, res, next) => {
  // (1)
  let body = []

  for await (const chunk of req) {
    body.push(chunk)
  }

// (2)
  body = Buffer.concat(body).toString()

// (3)
  if (req.headers['content-type'] === 'application/json') {
    req.body = JSON.parse(body)
  }
  else if (req.headers['content-type'] === 'application/x-www-form-urlencoded') {
    let params = new URLSearchParams(body)
    let entries = params.entries();
    req.body = Object.fromEntries(entries)
  }

  next()
}

module.exports = BodyParser

```
**From the code sessions above**

We already know how to create middleware for our Framework, It has the same middleware definition. if you don't know, please take a look at the previous tutorials.

1 - We are reading and storing the Stream object from the request.

2 - Converting the Stream object to a String

3 - Depending on the `content-type` we have to convert the String to a Javascript Object.

---

## Using the Custom Middleware

Now we have to import our middleware and use it for all requests.

`index.js`

```js
const BodyParser = require('./src/body-parser')

app.useAll(BodyParser)

app.post('/body-parser', (req, res) => {
    res.send(`name: ${req.body.name}, age: ${req.body.age}`)
})

```

---

## Testing the Middleware

If you make a POST request to the endpoint `/body-parser` with a JSON body like this:

```js
{
    "name": "Wesley Miranda",
    "age": 28
}
```

You will receive the following response:

```yaml
name: Wesley Miranda, age: 28
```

---


You can see [here](https://github.com/wesleymreng7/web-framework-scratch) how the code is looking.

In the next tutorials, we are going to create the `cors` and `multer` middleware for our framework.

I hope you like it!

See you soon!
Hacktoberfest 2023
Tags: hactoberfest2023, hacktoberfest, hackthisfall, opensource
Published: 2023-10-09 16:44:15

Hi 👋 folks Hacktoberfest is going get ready to dive deep into the world of Open Source.This year marks the 10th anniversary of Hacktoberfest. It is for everyone, whether it's your first time or your tenth, it welcomes everyone with the same enthusiasm to contribute to open source!
Exploring the Open Source with dyPixa!
Tags: hacktoberfest23, dypixa, opensource, aiml
Published: 2023-10-09 16:38:28

Ever wondered how Hacktoberfest could be your gateway to the world of open source? 🤔

It's not just for newcomers; it's an opportunity to dive into real projects and make a significant impact.


Introducing dyPixa, a project I'm maintaining this October! 🎨✨

Researchers have discovered the profound impact of colors on our emotions. Inspired by this insight, dyPixa blends computer vision, machine learning, and natural language processing to craft captivating abstract images. 🌠

Indeed, dyPixa can dynamically translate your emotions into vibrant color shades! 🖼️📊 As a versatile tool, it can:

🌈 Create Stunning Color Palettes for various themes (web, posters, and more).
🖼️ Design Unique Wallpapers.
🔥 Generate Engaging Backgrounds for micro write-ups and much more.

The beauty of dyPixa is that it welcomes contributions from both newcomers and seasoned open-source enthusiasts. 😉

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy7cfa6ekfylhqak1ymo.jpg)

Interesting, ain't it!! Feel free to fork the project on ([GitHub](https://github.com/thedatatribune/dyPixa)) 📂 and start contributing. To know more, explore the open issues or peruse the documentation at [Official Website](https://thedatatribune.github.io/dyPixa/) 🌐

Embrace #Hacktoberfest10 with dyPixa! 🌍🌟

🍂 #Hacktoberfest #OpenSource #dyPixa #DigitalOcean #GitHub
Change the Date and Time Format in WordPress
Tags: wordpress, dateandtime, wordpressplugin, usermetapro
Published: 2023-10-09 16:36:32

Change the Date and Time Format in WordPress | WordPress Settings 

In this simple tutorial, learn how to change the date and time format on your WordPress website. Whether you want to display dates in a different style or adjust the time format, we'll show you how to do it step-by-step. No coding skills are required! Watch now and make your WordPress site's date and time look how you want.

 • How to Change the Date Format • WordPress Date Format • How To Change Date Format • WordPress Date Format Change

🌎 Get User Meta Pro from: https://wordpress.org/plugins/user-meta/
📧 For any query: support@user-meta.com

https://www.youtube.com/watch?v=v3R_YUk-aHM
Retrieve SSL Certificate Details with a Single API Call!
Tags: api, ssl, security, javascript
Published: 2023-10-09 16:31:38

Hey fellow developers,

Web security is a big deal. We all know how crucial it is to protect our users' data and maintain their trust. One key aspect of web security is ensuring that your websites have up-to-date and valid SSL/TLS certificates. That's why I wanted to share a tool I've been working on – an API that makes it super easy to check SSL certificate details for any domain or hostname.

## What's the Deal with SSL Certificates?

SSL certificates are like the lock and key for your website. They encrypt the data transferred between your server and your users' browsers, keeping sensitive information safe from prying eyes. But these certificates have an expiration date, and if they're not renewed, your website can become vulnerable.

## Introducing the SSL Certificate Checker API

I've built a simple API using Bun.js that allows you to quickly fetch SSL certificate details. Whether you're a developer, a sysadmin, or just someone who wants to keep an eye on their websites, this tool can be a real lifesaver.

## What Can You Do with It?

Here are some things you can do with the SSL Certificate Checker API:

- **Check Certificate Expiration:** You can easily find out when your SSL certificate is set to expire. No more last-minute scrambles to renew it!
- **Verify Domain SSL:** Wondering if a specific domain has a valid SSL certificate installed? This API can help you with that.

## How to Use It?

Using the API is straightforward. You can make requests to its endpoints with just a few lines of code. For example, in JavaScript:

```
const axios = require('axios');

const options = {
  method: 'GET',
  url: 'https://ssl-certificate-checker3.p.rapidapi.com/google.com',
  headers: {
    'X-RapidAPI-Key': 'YOUR_RAPIDAPI_KEY',
    'X-RapidAPI-Host': 'ssl-certificate-checker3.p.rapidapi.com'
  }
};

try {
	const response = await axios.request(options);
	console.log(response.data);
} catch (error) {
	console.error(error);
}
```
Replace '**YOUR_RAPIDAPI_KEY**' with your RapidAPI key and the domain you want to check. You'll get a JSON response with all the SSL certificate details.

## Give It a Try

Ensuring your website's security should be a top priority. That's why I wanted to share this API with you all. It's available on RapidAPI with a free plan. There's no pressure to upgrade – the free plan gives you enough to get started.

You can check it out here: SSL Certificate Checker API on RapidAPI.

In conclusion, the SSL Certificate Checker API is a handy tool for keeping your websites secure. I hope you find it as useful as I do. Happy coding, and stay secure!

**API:** https://rapidapi.com/zagfox/api/ssl-certificate-checker3/
First Pull Request in Hacktoberfest23
Tags: hacktoberfest23, html, opensource, beginners
Published: 2023-10-09 16:18:29

As I dive into the 2nd month of my open-source journey, it just so happens to also be the month of  [Hacktoberfest](https://hacktoberfest.com/)! This is my first time participating in Hacktoberfest and I wanted to share the process of my first [Hacktoberfest PR](https://github.com/X-Evolve/Python_Hunt/pull/29).

<h2>Looking for Issues</h2>
For my first contribution, I wanted to work on a small issue to start off, and gradually work my way up to more challenging issues. It was initially quite overwhelming to see all the different types of issues that were available, but using labels such as `label:hacktoberfest`, `label:"good first issue"`, and sorting by `Least Commented` helped greatly.

Through my search, I stumbled upon the [Python_Hunt](https://github.com/X-Evolve/Python_Hunt) repository, which is a web-based project that revolves around providing summarized notes on key topics on the Python programming language to help make learning Python easier for newcomers. The project currently uses `Django`, which is an open-source Python-based web framework that allows you to quickly develop secure and maintainable websites.

<h2>The Issue</h2>
The issue I decided to request to work on was to [create a webpage for "Tuples in Python"](https://github.com/X-Evolve/Python_Hunt/issues/10). 

<h2>Process</h2>
After getting approval, I forked the issue, created a new branch and prepared to setup my local system.
<h3>Setup</h3>
There was not much that I needed to setup, but since this was my first time working with this web framework, I needed to install Python and Django. After that, I needed to run a `python manage.py migrate` command to create database tables and a `python manage.py runserver` to start the server.

<h3>Implementing Changes</h3>
Essentially, this issue required me to create a `.html` page that described what a `Tuple` is in Python, and to provide some examples. I also needed to add in the correct routes so that users will be able to navigate to the newly created page. This was my first time using Django, so I needed to do a little bit of research to understand how routes worked on Django. To summarize, Django uses a function called `path()` which accepts two parameters: a `URL` (*the URL for the webpage*) and a `View` function (*will hold the logic to render the page*). Once the URL entered in the browser matches a URL described within `path()` it will then invoke the `View` function to render the page.

<h2>Learning Outcomes</h2>
Overall, submitting this PR was a great learning experience for me as I got to interact with the community and contribute to another open-source project. It was also interesting to work on a project that involved Django. Looking forward to contributing to other projects during Hacktoberfest!
What are your goals for the week of Oct 9? Is Hacktoberfest among them?
Tags: discuss
Published: 2023-10-09 16:17:42

## What are your goals for this week? Any Hacktober goals among them?

- Are you joining in HacktoberFest?
- What are you building? 
- What will be a good result by week's end?
- Are you attending any events this week? 
  * Any suggestions of events to attend?
- Did you meet your goals last week?

### Last Week's Goals

- [:white_check_mark:] Continue Job Search.
- [:white_check_mark:] Blog. 
- HacktoberFest
  * [:white_check_mark:] Submit 1 PR * Had three PRs accepted!
  * [:white_check_mark:] Pick up at least 2 issues 
- [:white_check_mark:] Code Challenges. Did CSS Battles. 
- [:x:]Project work. 
- Events
  * [:x:] Attend [Virtual Coffee(VC)](https://dev.to/virtualcoffee) Thursday
  * [:white_check_mark:] VC hacktoberFest Kickoff 
  * [:white_check_mark:] Digital Ocean Hackoberfest Kick Off 
  * [:white_check_mark:] PyGotham Friday and Sat. Road trip 
to see family and adopt some kittens. Watched some of the later Friday show and some of the early Saturday shows.
- [:white_check_mark:]Run a weekly Slack thread similar to this post. 
- [:x:] Build LEGO Sets Not sets just figs.



### This Week's Goals

Fall break here. Got a couple things planned with my son.

- Continue Job Search.
- Blog.
- HacktoberFest
  * Submit 1 PR Should meet the 4 PR requirement this week. Lets see how many I can get for the month. 
  * Pick up at least 1 JS issue 
  * Update my Open Sauced profile.
- Code Challenges
- Project work
- Events
  * ~~Attend Virtual Coffee(VC)Thursday~~ Eye Appointment 
  * VC CSS Battle Friday
- Run a weekly Slack thread similar to this post. 
- Build LEGO Sets.
- The Kickstarter My Singing Monster Game arrived. We're going to put it together and play. 


### Your Goals for the week


You've read my goals so I'll throw the questions back to you.


- What are you building? 
- What will be a good result by week's end?
- Are you attending any events this week? 
  * Any suggestions of events to attend?
- Did you meet your goals last week?



```html
-$JarvisScript git push
```
How to start programming in Elixir?
Tags: elixir, programming, beginners
Published: 2023-10-09 16:15:14

A common question among people who discover the existence of the [Elixir programming language, created by the Brazilian programmer José Valim](https://en.wikipedia.org/wiki/Elixir_(programming_language)), is: "What is the starting point for learning Elixir?" and "How should I prepare myself to land my first internship or job in the programming field?"

Getting started in the world of programming typically involves using a computer (desktop or laptop) to develop and test programs. Practice plays a fundamental role in solidifying the knowledge acquired through various resources such as books, blog articles, videos, podcasts, and others.

Currently, to start learning Elixir, you don't need to install anything on your computer. For instance, you can use a [Livebook](https://livebook.dev/) instance running on Fly.io or HuggingFace. And, of course, you can also [install Livebook on your computer](https://livebook.dev/#install).

After that, you just need to follow the [learning material of your choice](https://github.com/elixir-lang/elixir/wiki). I have some videos at [https://www.youtube.com/@elixiradolfont](https://www.youtube.com/@elixiradolfont).


And if you want to know how to prepare yourself to land your first internship or job in the programming field using Elixir, join [the Elixir World community on Telegram](https://t.me/elixir_world). Don't forget to respond to the CAPTCHA!
Two Sum Problem: A Straightforward Guide
Tags: developer, twosum, codinginterview, leetcode
Published: 2023-10-09 16:06:40

Are you just starting out on your coding interview journey? One classic problem you might come across is the Two Sum problem. In this post, I’ll break it down for you in a way that even new coders, like me, can grasp. 

**Problem Statement**

Given an array of integers and a target integer, your task is to return the indices of two numbers in the array that add up to the target.

Example:

Input: nums = [2, 7, 11, 15], target = 9
Output: [0, 1]
Explanation: nums[0] + nums[1] = 2 + 7 = 9
Note: you can return the indices in any order and there is only one answer.

Leet code will give you the input and output most of the time, but it's a good idea to make sure that you can note those pieces of information before you start coding interviews, they won't always be given.

The Intuitive (But Less Optimal) Approach

You might think, hmmm, I could use a nested loop to check every combination of two numbers. Although this would work, its time complexity would be O(n^2), which isn’t optimal.

The Efficient Approach: Enter Hashmaps!

Hashmaps (or objects in JavaScript) can work wonders here. They allow us to remember the numbers we’ve seen and retrieve them in constant time, leading to a solution with O(n) time complexity.

**Here’s the Plan:**

1. Traverse the list once.
2. For each number, calculate its complement(target-current 
   number).
3. Check if this complement exists in our hashmap.
4. If it doesn’t, store the current number with its index.
5. If it does, return the current index and the stored index from the hashmap.



Let’s Dive into the Code



![Hashmap solution to the two sum problem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtptqcvlh78abqwq3j14.png)






The code above implements our master plan, its a good thing we wrote it out so beautifully! We iterate through the array only once, making our solution efficient and elegant.


Wrap Up

By using hashmaps and understanding what the problem is asking, we’ve transformed the two-sum problem from a potentially not-so-beautiful and clean O(n^2) solution to a sleek O(n) one.

Remember, coding interviews are not just about getting the answer right every time. They are about being able to communicate well and show a clear understanding of data structures and their applications. 

Go forth and code!
Angular 17 ✨mapToCanActivate✨: Your Class Guards' Best Friend
Tags: angular, guard, programming, routing
Published: 2023-10-09 15:58:06

When you're updating your Angular app to version 16, you might notice that the `CanActivate` interface is now deprecated. If you're thinking about changing your class guards to functional ones (or injecting the class in a wrapper function like this: 
```
() => inject(MyGuard).canActivate()
```
here's the deal - Angular 17 will probably come with a handy function called `mapToCanActivate` that should let you stick with your class guards as they are. Let's check out this example:

```ts
@Injectable({providedIn: 'root'})
export class AdminGuard {
  canActivate() {
    return true;
  }
}

const route: Route = {
  path: 'admin',
  canActivate: mapToCanActivate([AdminGuard]),
};
```

The function accepts an array as an argument, allowing you to pass all your guards for a specific route without having to create a separate wrapper for each one.

It seems like you can delay the refactoring for a bit and concentrate on your business requirements! :slightly_smiling_face:

_source: https://next.angular.io/api/router/mapToCanActivate_
Validate HTML Form Inputs With Vanilla Js
Tags: html, webdev, javascript, tutorial
Published: 2023-10-09 15:47:32

Validating HTML forms can be a pain >.< 

You might be tempted to pull in an external form library, but the fact that you need to deal with a few input fields that require custom validation is probably not enough reason to pull in an external library.

Each external library introduces new dependencies and potential vulnerabilities. It comes with a learning curve and sometimes these form libraries do not really help a lot to tidy your code. On top you either need to customize the layout so much that you did not save anything at the end or you're stuck with their design... 

Vanilla JS and HTML offer some great tools already! 

Let me show you, how you can easily add custom validation to your HTML forms.

In our example, we have an HTML form that contains two password input fields:

```html
<form>
  <input id="password" type="password" placeholder="password" />
  <input id="confirmPassword" type="password" placeholder="confirm password" />
  <button type="submit">Sign up</button>
</form>
```

We can add basic validation with built in HTML attributes like `required` or `minlength`.:

```html
  <input id="password" type="password" placeholder="password" required  minlength="6" />
```

But what if we want to check, if the password and confirm password field match?

For this scenario, we need custom validation.

So let's explore how easy it is, to write a custom validation function:


```ts
function formSubmitHandler() {
  // grab inputs
  const passwordInput = document.getElementById("password");
  const confirmPasswordInput = document.getElementById("confirmPassword");

  // validation logic
  if (passwordInput.value !== confirmPasswordInput.value) {
    confirmPasswordInput.setCustomValidity("The passwords don't match!");
    confirmPasswordInput.reportValidity();
    return;
  }
  // handle valid inputs ...
}
```

First, we simply grab our inputs with `document.getElementById(...)`. Then we run our custom validation logic on the input values. If the validation fails, we set a custom validation error message on the input via the `setCustomValidity(...)` function and trigger the validation event with the `reportValidity()` function.

And that's all it takes. If necessary you can even translate your validation messages and structure your code as you need to. 

In simple use cases you don't need to add an external form library to handle validation for your form fields.

Take note though, that cross-browser support for these built in validation methods should be double checked.
CSS easiest way to change the checkbox,range, radio color
Published: 2023-10-09 15:42:45

---
title: CSS easiest way to change the checkbox,range, radio color
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-09-18 15:53 +0000
---

```
accent-color: red
```
this will change checkbox,radio,range color quickly.
C# - Functional Programming with LINQ
Tags: csharp, beginners, programming, tutorial
Published: 2023-10-09 15:30:00

Functional programming is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing state and mutable data. While C# is primarily an object-oriented language, you can apply functional programming concepts, such as immutability and pure functions, using LINQ and custom extension methods.

Here's an example of using functional programming concepts to transform a list of numbers:

```csharp
using System.Data;

public class Program
{
    public static void Main()
    {
        List<int> numbers = new List<int> { 1, 2, 3, 4, 5 };

        // Using LINQ and functional-style operations to transform the list
        var result = numbers
            .Where(n => n % 2 == 0)  // Filter even numbers
            .Select(n => n * 2)      // Double each number
            .ToList();

        Console.WriteLine(string.Join(", ", result)); // Output: 4, 8
    }
}
```

In this example:

- We use `Where` to filter even numbers.
- We use `Select` to double each number.
- The result is collected into a new list.

By chaining these LINQ methods, you can apply transformations to collections in a functional and declarative way, avoiding explicit loops and mutable variables. This approach can make your code more readable and maintainable.

While C# is primarily an object-oriented language, you can apply functional programming principles to specific parts of your code where it makes sense, such as data transformations using LINQ, to improve code clarity and maintainability.