teleren/devto huggingface dataset:
Fixed Window Counter: Under the Hood of express-rate-limit
Tags: javascript, node, express, systemdesign
Published: 2024-07-08 19:21:47

To ensure a single user or a client cannot overwhelm the system with too many requests in a short period of time, we use rate limiting. [express-rate-limit](https://www.npmjs.com/package/express-rate-limit) is popular among developers due to its ease of implementation and understanding. But how does it work under the hood? Let’s dive in.

There are a few popular algorithms used to implement rate limiters. express-rate-limiter uses the **Fixed Window Counter** Algorithm to manage rate limits.

The Fixed Window Rate Limiting algorithm splits time into fixed-size windows (e.g., one minute or one hour). It tracks the number of requests made by a client within a single window and rejects additional requests after the limit is reached. No further requests will be processed until the window resets.

For example, if the limit is set to five requests per minute, any additional requests after the fifth request will be rejected until the next window starts, restarting the request count to zero.



![Overview of the Fixed Window Rate Limiting algorithm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbzp1qafwt4ye6lhm3gz.jpg)


However, a notable drawback of this limiter is how it handles requests at the edges of the window, leading to a behavior known as the "burstiness problem."

In the algorithm, the request count resets at fixed intervals (e.g., every 1 minute). This approach can become problematic if a client makes many requests at the end of one window and then immediately at the beginning of the next, potentially overwhelming the server.


![ Drawbacks of the Fixed Window Rate Limiting algorithm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlhzmt1nwcfnirj13z0m.jpg)

In conclusion, while the Fixed Window Counter Algorithm is straightforward and easy to implement, it has limitations, particularly in handling requests near the edges of the window. Developers should be aware of the "burstiness problem" and consider alternative algorithms or additional strategies to mitigate this issue and ensure a more balanced rate limiting approach.
12 Free Figma Screens Hero Section Templates
Tags: webdev, ui, ux, figma
Published: 2024-07-08 19:34:59

Struggling to create a captivating hero section for your next project? Look no further than Peterdraw's generous offer of 12 FREE Figma hero section templates!

These templates are not only visually stunning, but also completely customizable, allowing you to tailor them perfectly to your brand identity. Whether you're working on a project in finance, marketing, education, sports, or any other industry, Peterdraw has a design to fit your needs.
![12 Free Figma Screens Hero](https://neattemplate.com/wp-content/uploads/2024/04/Heromaster-Free-collection-of-hero-section-Figma-1-1.png)
**Key Features:**

- 12 Free Hero Section Templates: A diverse selection to jumpstart your creative process.
- Effortless Customization: Easily edit colors, fonts, and layouts to match your brand.
- Free Google Fonts: Leverage a library of free fonts for a polished and professional look.
Stop wasting time on design from scratch! Download these FREE Figma hero section templates by Peterdraw today and elevate your designs to the next level. With these user-friendly templates, creating a captivating first impression for your website or application is a breeze.
[Download](https://www.figma.com/community/file/1220096573806184748)
Free Figma Brand Book Template 100+ Slides
Tags: webdev, ui, ux, figma
Published: 2024-07-11 15:39:00

Are you looking to create an amazing brand book for your company or are you a brand designer in the process of designing a brand book for one of your clients? Look no further! Brix Templates offers a free brand book kit Figma template that can save you hours in design time.

brand book kit features 100 slides that you can use as a starting point. It includes all the most used slides and sections that typically form part of brand books and brand identity guidelines. We are confident that it includes everything you need to create a comprehensive and professional brand book.
![Figma Brand Book Template 100](https://neattemplate.com/wp-content/uploads/2024/04/Brand-Book-Figma-Template-BRIX-Templates-Community-%E2%80%93-Figma-1-1.png)
### What's Included in Free Brand Book Figma Kit?

- 12 brand book covers
- 9 summary slides
- 7 divider slides
- 8 introduction slides
- 7 logo design slides
- 6 mark construction slides
- 8 horizontal logo slides
- 8 vertical logo slides
- 9 color logo slides
- 7 monocolor logo slides
- 7 background color slides
- 6 mobile app logo slides
- 5 logo grid slides
- 4 logo safe zone slides
- 6 logo unsafe slides
- 4 logo misuse slides
- 15 color palette slides
- 11 typography slides
- 5 photography slides
- 5 team members slides
- 7 brand voice slides

With free brand book Figma kit, you'll have everything you need to create a visually stunning and cohesive brand book. Don't waste time starting from scratch - download template today and get started on your brand book journey!
[Download](https://www.figma.com/community/file/1212818841503590050)
Website in your pocket. Turn your Android phone into a web server! 🚀
Tags: webdev, iot, android, tutorial
Published: 2024-07-08 19:45:55

Hosting a website is simple right? Let us do something cooler insted. How about hosting a website from your Android device? Do not worry, we need not root/jailbreak your phone.

## 🚀 Let's Get Started!

### Tools You'll Need:

1. **Termux:** [Termux](https://termux.dev/en/) is an Android terminal emulator for running a web server like Node.js http-server.
2. **Pinggy:** [Pinggy.io](https://pinggy.io) is a tool to obtain public URLs for accessing your server.

## Sneak Peek
Here's a sneak peek of a blog running on a $180 Android phone. Check out the screenshots below:


![Node.js http-server running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axmav7q2xvp7055ojs2c.png)


![Pinggy’s terminal interface showing live requests](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bed581yrkcljldc38dmr.png)



## Step 1: Install Termux
First, we need to install [Termux](https://termux.dev/en/). This app emulates a terminal and Linux environment on your Android device without rooting or additional setup. You can get Termux from [F-Droid](https://f-droid.org/en/packages/com.termux/) or download the APK directly from the [Termux website](https://termux.dev/en/).

## Step 2: Install Necessary Packages
Now, let's get the essential packages for our web server. Open Termux on your phone. Update and install the packages using these commands:

```
pkg update
pkg upgrade
pkg install openssh
pkg install nodejs-lts
```

Check the versions to ensure they installed correctly:

```
node --version
npm --version
```

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




## Step 3: Start the Server and Pinggy Tunnel
Create a sample HTML page:


```
echo "<h1>My awesome website!</h1>" > index.html

```

You can edit this page using nano or vim editors. Then, start the http-server:


```
npx http-server &

```


This command runs the server on port `8080` by default.


Now let's get a public URL with one [Pinggy](https://pinggy.io)  command. In a new Termux window tun the following.

```
ssh -p 443 -R0:localhost:8080 a.pinggy.io
```

You'll receive a public URL like `https://ranxyzxxxx.a.pinggy.online`. Share this URL with your friends and see live stats of visitors on the Pinggy terminal interface. 🎉


Hosting a website or blog from your Android device might sound impossible, but it's totally doable with the right tools! Using Termux and Pinggy, you can create and share your content with the world. So, why not give it a try? Unleash your creativity and bring your ideas to life on your personal web server! 🌟
Prefer utility types over model changes in TypeScript
Tags: typescript, javascript, webdev, programming
Published: 2024-07-08 19:49:39

Generally, in software, a model is an abstraction or a way to represent a system, process, or object in the real world. Modeling is the process of creating these abstractions to facilitate understanding, analysis, and design of system. 

TypeScript provides several utility types to facilitate common type transformations, these utilities are available globally and can be used to avoid changing the nature of a model definition. Some of these utilities aim developers to keep their models consistency and you must use them rather than creating a new model to represent the variants of an existing entity in your code base. 

- The Pick<T>

You may use a _Pick<Type>_ when you want to construct a "light version" of an existing model, for instance, you want to represent a summary of an user model:

```
interface User {
  firstName: string;
  lastName: string;
  age: number;
  dateOfBirth: string;
  primaryEmail: string;
  secondaryEmail: string;
}
 
type UserBasicInfo = Pick<User, "firstName" | "lastName">;
 
const userBasicInfo: UserBasicInfo = {
  firstName: "Jonas",
  lastName: "Resenes",
};
```

- The Omit

The _Omit<Type>_ is in the same "family" as the _Pick<Type>_, prefer _Omit_ over _Pick_ when you are composing a new type with a consider number of fields from an existing model. 

```
interface User {
  firstName: string;
  lastName: string;
  age: number;
  dateOfBirth: string;
  primaryEmail: string;
  secondaryEmail: string;
}
 
type UserPreview = Omit<User, "primaryEmail" | "secondaryEmail">;
 
const userPreview: UserPreview = {
  firstName: "Jonas",
  lastName: "Resenes",
  age: 36,
  dateOfBirth: "08/21/1987"
};
```
Kdash - a true opensource K8s micro IDE
Tags: productivity, beginners, kdash
Published: 2024-07-08 20:16:02

---
title: Kdash - a true opensource K8s micro IDE
published: true
tags:
  - productivity
  - beginners
  - KDash
---

KDash v0.2.0 - a true opensource K8s micro IDE
==============================================

[![Post cover image](https://res.cloudinary.com/daily-now/image/upload/s--IINXUhH6--/f_auto/v1719487096/posts/1DlKJGw4G)](https://res.cloudinary.com/daily-now/image/upload/s--IINXUhH6--/f_auto/v1719487096/posts/1DlKJGw4G)

KDash v0.2.0 (MacOs oriented electron app)
==========================================

although there are multiple CLI \ GUI ide's for Kubernetes , NONE yet remained open source for the long run, <https://medium.com/@seifeddinerajhi/explore-user-friendly-desktop-kubernetes-open-source-ides-5315516b0752>

KDash will remain opensourced till aliens come in touch ... promise ,

so star! , Fork! , share ! get your community involved , we wish to get your feedback and PRs

<https://github.com/target-ops/kdash/releases/tag/v0.2.0>
npm Overview and Key Concepts
Tags: webdev, javascript, programming, npm
Published: 2024-07-08 20:27:44

npm, short for Node Package Manager, is a package manager for JavaScript and the default package manager for the Node.js runtime environment. It helps developers manage dependencies in their projects and provides a vast registry of reusable code packages.
**Basically it is a configuration for npm**

## Key Features of npm

1. **Package Management:**

- Install, update, and uninstall packages (libraries or modules).
- Manage dependencies required for your project.

2. **Versioning:**

- Specify the version of a package to ensure compatibility and stability.

3. **Script Running:**

- Define and run custom scripts for various development tasks, such as 
 testing, building, and deploying, through the scripts section in 
 package.json. 
  
 - Custom script can be run using `npm run <script-name>`

4. **Dependency Management:**

- Automatically handle dependency conflicts and ensure that the correct 
 versions of dependencies are used.

- Different types of dependencies can be specified in the package.json 
 file, such as regular dependencies, devDependencies, peerDependencies, 
 and optionalDependencies.


## Package-lock.json

- It keeps the track of all the dependency's version in  hash form(SHA) <intergrity:"SHA format">

- The package-lock.json file ensures consistency across different environments by locking the exact versions of all installed dependencies. It helps avoid dependency conflicts and ensures that the correct versions of dependencies are used. Basically avoids version mis-match.


for eg your project is buid using react 18 and if the project is setup on any other pc with older version of react pre-installed let say react 17 then it will hampers the proper functioning of the code or your project , Here package-lock.json comes into role i.e when ever you deploy you project into any other environment it will instantly install the react 18 regardless of pre-installed react 17 

## package.json Code

```
{
  "name": "my-project", //app or project name
  "version": "1.0.0", // apps version 
  "description": "A sample project",
  "main": "index.js", 
  "scripts": {
    "start": "node index.js", // npm run start will run index.js
    "test": "echo \"Error: no test specified\" && exit 1", // use jest
    "build": "webpack --config webpack.config.js",
    "lint": "eslint .", //catches error
    "deploy": "npm run build && firebase deploy" //builds and deploy onto //firebase
  },
  "dependencies": {
    "express": "^4.17.1",
    "react" : "^18.0"
  },
  "devDependencies": {
    "eslint": "^7.11.0",
    "webpack": "^4.44.2"
  }
}

```
Automating Semantic Versioning with Github Actions and Branch Naming Conventions
Tags: github, githubactions, git
Published: 2024-07-08 20:37:47

---
title: Automating Semantic Versioning with Github Actions and Branch Naming Conventions
published: true
description: Achieving Consistent and Automated Versioning Across Your Projects with Github Actions
tags: github, githubactions, git
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxtst2qof4hvmy16n6ww.jpeg
# Use a ratio of 100:42 for best results.
# published_at: 2024-07-08 20:36 +0000
---
![git flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxtst2qof4hvmy16n6ww.jpeg)

[Read the full article on packagemain.tech](https://packagemain.tech/p/github-actions-semver)
ONLINE ASSIGNMENT HELP
Tags: online, assignment, onlineassignmnethelp, biologyassgnment
Published: 2024-07-08 20:47:12

Welcome to our Online Assignment help service! Our experts are here to assist you with your online homework and exams, providing support for <a href='https://assignmenthelppro.co.uk/'>professional assignment help</a> , helping you understand difficult topics, and preparing for dissertation help. Let us help you succeed in your studies!
JAMStackGR \#2-Git Your Build System Right vs. Deploying Fast
Tags: webdev, javascript, beginners
Published: 2024-07-08 21:00:25


Original: https://codingcat.dev/post/jamstackgr-2-git-your-build-system-right-vs-deploying-fast

{% youtube https://youtu.be/vhc0ws2cweA %}

[https://codingcat.dev/post/jamstackgr-2-git-your-build-system-right-vs-deploying-fast](https://codingcat.dev/post/jamstackgr-2-git-your-build-system-right-vs-deploying-fast)

![](https://media.codingcat.dev/image/upload/v1657636762/main-codingcatdev-photo/24c79182-dbf8-4d7d-b20f-4a369a52b8ed.jpg)

## JAMStack GR #2

This JAMStack was made from a lesson already posted, during the JAMStack GR Meeting we walked through how to attempt distribution using the Angular CLI (live demos are hard we had a couple of hiccups).[https://ajonp.com/lessons/angular-cli-deploying](https://ajonp.com/lessons/angular-cli-deploying)
பைத்தானுடன் எனது அறிமுகம்
Tags: python, kaniyam, jopy
Published: 2024-07-08 21:42:12

**08-07-2027**

வணக்கம் நண்பர்களே,

நான் எந்த விதமான கணினி துறை சார்ந்தவனும் கிடையாது. ஆனாலும் எனக்கு வலை தளங்கள் வடிவமைப்பில் ஓர் ஆர்வம் வெகு நாளாக இருந்தது. இணைய தளங்கள் வழியாக கொஞ்சம் கற்றுக் கொண்டேன்.இதன் மூலம் கணினி நிரல் மொழி பற்றிய அடிப்படை அறிவினை சிறிது கற்று அறிமுகம் ஆகிக் கொண்டேன்.

மேலும் தற்போது பங்குசந்தை வர்த்தகத்தில் ஈடுபட்டு வரும் நான் சில தானியங்கி செயல் முறைகளை உருவாக்க எண்ணம் கொண்டேன். அதற்கு பைத்தான் உதவும் என்பதையும் அறிந்து கொண்டேன். 

அதன் பின்பு பைத்தான் பயில்வது எப்படி என்பதை கற்க ஆரம்பித்தேன்.இந்த முயற்சியில் நான் அடைந்துள்ள இடம் தான் கணியம் அறக்கட்டளை. 

தமிழ் வழியில் தமிழர்களுக்காக எவ்வளவு பெரும் முயற்சியில்  தன்னார்வத்தோடு கணினி சார்ந்த அறிவை பரவலாக்க இத்தனை பேர் உழைத்துக் கொண்டிருக்கிறார்களா என்பதை அறிந்து வியக்கிறேன்.

என்னாலும் இன்னும் யார் வேண்டுமானாலும் கணினி அறிவை கற்க மேம்படுத்த இந்த கணியன் 100% உதவும் என்பதை நினைந்து பெருமையோடு மகிழ்கிறேன்.
 
வாழ்க தமிழ். 
வளர்க கணியம்.
Mastering Asynchronous Form Submissions in React: A Step-by-Step Guide
Tags: react, webdev, javascript
Published: 2024-07-09 14:59:34


Handling asynchronous operations in React can sometimes feel like navigating a maze. One common challenge is ensuring that form submissions only proceed when all validation checks have successfully completed.

In this post, we'll dive deep into a robust solution for managing asynchronous form submissions in React. We'll break down the process into clear steps, complete with code snippets to illustrate each stage.

**Understanding the Challenge**
Imagine a form with multiple fields, each requiring validation. You want to prevent the form from submitting if any fields are empty or contain invalid data.

**The Solution: A Step-by-Step Approach**
State Management:

We'll use state variables to manage the form data, validation errors, and submission status.


```js
const [sessionName, setSessionName] = useState('')
const [startDate, setStartDate] = useState('')
const [endDate, setEndDate] = useState('')
const [errors, setErrors] = useState({})
const [submit, setSubmit] = useState(false)
```


**Validation Logic:**
Implement validation checks for each field.

```js
const onSubmit = (evt) => {
  evt.preventDefault()
  setErrors({})
  setSubmit(true)

  if (!sessionName) {
    setErrors(prev => ({ ...prev, name: 'Session name is required' }))
  }
  if (!startDate) {
    setErrors(prev => ({ ...prev, start_date: 'Start date is required' }))
  }
  // ... more validation checks ...
}
```


**useEffect for Controlled Submission:**
We'll use the useEffect hook to conditionally execute the form submission logic.

```js
useEffect(() => {
  if (Object.keys(errors).length === 0 && submit) {
    // Proceed with form submission (e.g., call addSession())
  } else if (Object.keys(errors).length >= 1 && submit) {
    // Display error message
  }
  setSubmit(false) // Reset submit flag
}, [errors, submit])
```


**Conditional Rendering:**
Display error messages based on the errors state.

```js
<InputField
  label="Session Name"
  value={sessionName}
  onChange={setSessionName}
  error={errors.name}
/>
```


**Resetting the Flag:**

Ensure the submit flag is reset after processing.

```
setSubmit(false)

```

**Benefits:**

- Synchronization: Ensures form submission only after validation.

- Clean Separation: Separates form submission logic from error handling.

- Improved User Experience: Provides immediate feedback to the user.


By following these steps, you can confidently manage asynchronous form submissions in React. This approach promotes clean code, enhances user experience, and ensures data integrity.
JavaScript Fundamentals
Tags: javascript, learning, beginners, newbie
Published: 2024-07-08 22:13:52

Here are some of the basic fundamentals and concepts of JavaScript I have learned so far. 

1. Everything within JavaScript is a form of data type except for the common operators and symbols (+,%,!,etc.)
2. There are seven basic data types 

- Numbers
- Strings
- Booleans
- Objects
- Arrays
- Null
- Undefined

   I will do another post tomorrow going more in depth into the different data types but for now this is just a list of the seven basic type names. 

3. These data types are used and combined to make up Variables. Variables are declared with LET, CONST, or VAR.
 - LET allows for a variable to be declared and assigned, but also allows for the variables value to be re-assigned later on in case it needs an update.
 - CONST is used when we want to declare a variable and assign a permanent value to it. 
 - VAR is honestly rarely used since it can affect global scope.

4. Variables and their values are used to create expressions within JavaScript to create code blocks and functions. 

The use of Variables essentially allows for less cluttered code and condensed expressions. If we were to assign the value of the entire Alphabet ("a,b,c,d...") to the variable name fullAlphabet, we could then call on the variable instead of having to type the entire thing. 

Naming Variables: 
-use camel Case ( every word after the first is capitalized) Ex: joesVariable, testVariableName, willyWonka, oneTwoThreeFour, etc. 
-use underscores instead of spaces when naming Ex: joes_variable, one_two_three_four, you_also_dont_have_to_capitalize_in_this_format_but_you_can,
-Do not start Variable names with $ it can lead to conflicts with many JavaScript library names.


These are the first few basic steps of learning to write code. Tomorrow I will post going more in depth on the different data types and their applicable methods. I will also explain Interpolation and its use. 



“Do you wish me a good morning, or mean that it is a good morning whether I want it or not; or that you feel good this morning; or that it is a morning to be good on?” - Gandalf the Grey
Access Portal: My first Ruby Program!
Tags: ruby, beginners, webdev, programming
Published: 2024-07-08 22:21:13

This is my first Ruby program, EVER! Pretty much, you are greeted by a robot that needs your help to open doors to advance through the game. Player must decipher a code at every gate. So far, I have created two gates with intermittent activities. That took me the whole day, and it was a learning experience. Two gates doesn't sound like much but if you actually play the game all the way through and DON'T PEEK at the decoded passwords, well, it should take maybe 15 minutes to complete.


![Access Portal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfla1e35dfsfsn67dyxb.png)

I'm very excited I was able to get everything to work for the most part. As for doing it the right way? We'll get there LOL. Thanks for looking.