teleren/devto huggingface dataset:
3 Full Stack Web Development Project Ideas For Final Year Project & Resume
Tags: webdev, beginners, javascript, tutorial
Published: 2022-01-02 07:24:32

Many students ask me about **web development project ideas** for their college or resume. Even most of my friends are confused what projects they should make. 

Well after reading this article I hope you will have no doubt about it. And after adding these projects in your resume, you will get job offers like me. 

## Web Development Project Ideas

Students think that they should make something extraordinary. That they loose their time about thinking their **extraordinary project**. But this is wrong. 

You should make a common project but add something unique feature in it that other students don't do. I will share the features with you. 

## E-commerce Project

**E-commerce website** is a common project. You can make a e-commerce website and add some extra feature that others don't. 

You can add premium membership feature in the e-commerce website. Like if they purchase a premium membership plan they will get 15% off and fastest delivery. 

You also can add refer and earn system or affiliate marketing system. Where people can refer a product with a refer link. And if someone purchase from the link, the man will get 10% commision of the product. 

Adding these features are not very difficult. You can add this features in any backend language or framework like php, laravel, node etc. 

## 3 Level Blog

**Blogs** are also very common project. But most people make 2 level blogs like admin panel where he can write post and front user where users can read post. 

But you have to make blog like medium. Here will be a writer panel, admin panel and a frontend. Writer will register and write post from writer panel. The post will be submitted to the admin for review. The admin will review the post and approve it. After that the post will be published in frontend. 

You can also make a e-learning site like udemy with this same idea. 

## Clone Websites

Well this idea is only for your resume. Make clone of a famous web application. You can make clone of Netflix, YouTube, Hotstar. Clone of social media's like Facebook, Instagram is quite difficult. 

I will share more **project ideas** in future with you. If you have any **project ideas** you also can share in comment box. 

I also share project ideas in my Instagram handle. If I worth, can I get a follow from you in [my Instagram](https://www.instagram.com/skshoyeb_devstack/). Hope these project ideas will help in choosing projects for resume and college.
108 Card Game
Tags: python, gamedev, github, codenewbie
Published: 2022-01-02 05:58:39

This is my first finished python project. I started learning **Python** from **Codecademy's Computer Science career path** and for my portfolio final project, I was tasked to create a basic terminal game. 

I decided to recreate an old _Mongolian_ game that I used to play with my cousins while we spent our days in the countryside. The rules are pretty simple once you get used to it due to the similarities to UNO, a more familiar game to most. 

I would love feedback and comments about the game. Even if you don't really have feedback, but want to let me know if you enjoyed the game or not, I would love to know if people played it.

It is called 108 (or **зуун найм**) and I hope you enjoy!

Thanks to a helpful commenter, I found out I can share my code through replit to allow you guys to try playing it. 

https://replit.com/@lunargravity/CardGame108?v=1
If you wanted to check out the [github](https://github.com/lunargravity/CardGame108) anyways, here is the other link.


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwd8vxk331iupebk8hrq.JPG)
Generic list of dev features required to bootstrap a great frontend project
Tags: tutorial, webdev, programming, javascript
Published: 2022-01-02 07:04:14

Bootstrapping a new project from scratch or creating a generic boilerplate code is not an easy task when seen from a long time duration standpoint. The perspective and requirements might change rapidly if not analyzed minutely. I am listing here few of the implementations that I have included in many of my official and pet-projects:

### CSS implementations
  There are a variety of solutions available for adding stylings to your project including the new way of CSS-in-JS. But each has their own pros and cons. They must chosen based on the type of project. I will include more elaboration on my next post but in short, as an example, the requirements of a website is very different from that of a WebApp or a hybrid mobile application.

  In websites, the metrics like TTFB, FCP, CLS etc plays a vital role ([source](https://web.dev/metrics/)) in not only in enhancing the user experience but also is a big contributor towards the terms like SEO, marketing expenditure, churn rate and ultimately in overall revenue. So, JS executions might take a lot of time to reflect the styles when compared to CSS counterparts. We might not benefit from CSS-in-JS solutions here unless it is extracted as separate stylesheet using some plugins like [MiniCssExtractPlugin](https://webpack.js.org/plugins/mini-css-extract-plugin/).

  The same metrics are important for WebApp as well but no web-crawler is going to penalize your SEO value or others. But once your app warms up, you need to have reactive performance and a great frame rate, silky smooth navigations etc similar to a native app.

##### CSS Modules
This brings in best of both worlds and could be very subjective. But I am happy that I do not have to spend effort in thinking of a long class name based on BEM, SMACSS etc.
 
### JS implementations
##### A global loader for all API/Ajax calls
It should be initialized as a singleton and a counter should be provisioned in such a way that when no of pending calls is zero, it is hidden. In other cases it should be visible

##### Common Modals / Drawer widgets

### Project configuration
##### Linters
- Code linting
- Commit message linting like [commitizen](https://www.npmjs.com/package/commitizen)

##### In case of multi-package project usage of tools
like:
- [lerna](https://npmjs.com/package/lerna)
- [rush](https://rushjs.io/)

##### Managing environment configs using
- [dotenv](https://www.npmjs.com/package/dotenv)

##### [Compiling a Node.js module into a single file](https://www.npmjs.com/package/@vercel/ncc)
This is not a mandatory process, but for some cases this can help avoid the `npm` modules installation step by converting all the `node_modules` dependencies into a single JS file.

##### Project automation packages
- [Scripty](https://www.npmjs.com/package/scripty)
- [Husky](https://www.npmjs.com/package/husky)
Points to remember about inheritance
Published: 2022-01-02 06:54:12

## Override

### Explicit override

When contract inherits from multiple parents, and overrides the same name functions, we need to explicitly override it.

```solidity
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.6.0 <0.9.0;

contract Base1
{
    function foo() virtual public {}
}

contract Base2
{
    function foo() virtual public {}
}

contract Inherited is Base1, Base2
{
    // Derives from multiple bases defining foo(), so we must explicitly
    // override it
    function foo() public override(Base1, Base2) {}
}
```

### State variable override external function

If parameter and return types match getter function of variable.

- Only functions, modifiers can be overrided.

```solidity
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.6.0 <0.9.0;

contract A
{
    function f() external view virtual returns(uint) { return 5; }
}

contract B is A
{
    uint public override f;
}
```

---

## Constructor

There’s two ways for child contract to specify arguments of parent constructor.

### Directly specify in inheritance list

```solidity
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.7.0 <0.9.0;

contract Base {
    uint x;
    constructor(uint _x) { x = _x; }
}

// Either directly specify in the inheritance list...
contract Derived1 is Base(7) {
    constructor() {}
}
```

### Through modifier form

```solidity
// or through a "modifier" of the derived constructor.
contract Derived2 is Base {
    constructor(uint _y) Base(_y * _y) {}
}
```

---

## Super

In multiple inheritance, parent contracts are searched from right to left

So, super calls the right-most contract.

Additionally, inheritance must be ordered from most base-like to most derived.

```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.10;

contract A {
    function foo() public pure virtual returns (string memory) {
        return "A";
    }
}
// Contracts inherit other contracts by using the keyword 'is'.
contract B is A {
    // Override A.foo()
    function foo() public pure virtual override returns (string memory) {
        return "B";
    }
}
contract C is A {
    // Override A.foo()
    function foo() public pure virtual override returns (string memory) {
        return "C";
    }
}
contract D is B, C {
    // D.foo() returns "C"
    // since C is the right most parent contract with function foo()
    function foo() public pure override(B, C) returns (string memory) {
        return super.foo();
    }
}
contract E is C, B {
    // E.foo() returns "B"
    // since B is the right most parent contract with function foo()
    function foo() public pure override(C, B) returns (string memory) {
        return super.foo();
    }
}
```
Introduction to Kubernetes
Tags: kubernetes, containers, orchestration, beginners
Published: 2022-01-02 06:31:52

The rise of microservices caused an increased usage of container technology. Containers are the best option to host microservices as they can host small independent services on each container. With microservices, the applications which used to be monolith are now shifted to microservices generating hundreds and thousands of containers. Managing these containers in several different environments manually or with self-made scripts is a cumbersome task. Hence there should be a solution to mitigate this issue.

###What is Kubernetes?
It is an open-source container orchestration tool developed by Google. It has been developed to address the above-discussed issue by providing an easy way or a tool to manage the growing population of containers.

###Features of Kubernetes
- High availability and Less down time
- Disaster recovery and self healing capabilities
- Scalability (Horizontal)
- Load balancing
- Rolling update and rollback
- Resource monitoring and logging

###Kubernetes Basic Architecture

![Kubernetes Architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anfkdqae1c69936thoy1.jpg)
- The master node runs the Kubernetes processes, necessary to run and manage clusters properly
- Worker nodes are the places where actual work happens
- **API Server:** Entry point to K8s cluster
- **Controller Manager:** Keeps track of what is happening in the cluster
- **Scheduler:** Responsible for scheduling containers on different worker nodes based on the workload and available resources in each node. It decides on which worker node the next container should be scheduled on.
- **etcd:** Holds data as key-value pairs. This holds the current state of the Kubernetes cluster. Also contains all the configuration data and status data of each container in the worker nodes AKA snapshots.

###Pods in K8s

- In K8s you only work with pods
- **Pod:** This is the smallest unit you could find in Kubernetes and works as a wrapper to a container
- Each node can have multiple pods
- Each pod can have multiple containers
- Usually, one pod is used for a one application
- Each pod has its own IP address.
- Pods communicate with each other using internal IP addresses
- Pod gets a new IP address when created
- To get a static IP address to a pod *Service* can be used 
- Service has main two features,
  * Permanent IP address
  * Load Balancing 

Wanna know more?👇

###Useful Resources
- [K8s Docs](https://kubernetes.io/docs/concepts/overview/what-is-kubernetes/)
- [Wiki](https://en.wikipedia.org/wiki/Kubernetes)
0mq - The little bundle of messaging joy
Published: 2022-01-02 06:27:39

---
title: 0mq - The little bundle of messaging joy
published: true
description: 
---
0mq (https://github.com/zeromq/zeromq.js) - "A thing of beauty is a joy forever". Or maybe one could go like "Small is Beautiful".

Nothing more joyful than re-looking at something you thought was perhaps too small and finding that it just rocks!!! A perfect way to start off the year!

I was looking for micro-designs where I could send out millions of messages and have a set of consumers process them. No message should ever get lost. Plus not having to rely on anything where *zookeeper* too comes into the picture :)

There were a few criteria that I had in mind:

1. If the consumer is not available the producer should wait.
2. If the consumer takes more time to process the messages than the time it takes for the producer to produce them, then the producer should queue and wait, sending them in a way that the consumer is able to process them.
3. The producer should be able to exit after producing the messages and the consumer should be able to process them.
4. Either the producer or consumer can re-start without losing any messages.

0mq was able to achieve all of the above. Here is a quick and dirty producer and consumer code for you to check out. It is in JavaScript and you will need 'nodejs' to execute it.

The code here is for the push/pull model. 0mq also supports other models such as pub/sub and request/reply models.

*producer.js*
```
const zmq = require("zeromq")

async function run() {
  const sock = new zmq.Push

  await sock.bind("tcp://127.0.0.1:3000")
  console.log("Producer bound to port 3000")
  let ctr = 0
  let limit = 1000 * 1000
  while (true) {
    await sock.send("do task."+ctr)
    ctr++
    if (ctr % 10000 === 1) console.log(ctr)
    if (ctr > limit) break
  }
  await sock.send("end")
  ctr++
  console.log('sent',ctr)
}

run()
```

*consumer.js*
```
const zmq = require("zeromq")

async function run() {
  const sock = new zmq.Pull

  sock.connect("tcp://127.0.0.1:3000")
  console.log("Worker connected to port 3000")
  let ctr = 0
  for await (const [msg] of sock) {
    ctr++
    const msg1 = msg.toString()
    
    if (ctr % 1000 === 1) {
      console.log("%d - message: %s", ctr, msg1)
      await new Promise(resolve => setTimeout(resolve, 100))
    }
    if (msg1 === 'end') break
  }
  console.log('processed = ', ctr)
}

run()
```

As for installation, you don't need any server. 0mq is basically a wrapper over the OS socket libraries. For *nodejs* all that you need is this one command.
```
$ npm install zeromq@6.0.0-beta.6
```
Hats off to the 0mq folks and the brilliant thought and engineering behind this small bundle of messaging joy!

At 1 million small messages, the test may be simplistic, but the initial results show a lot of promise.
CryptoPals Crypto Challenges Using Rust: Implement repeating-key XOR
Tags: rust, programming, cryptography
Published: 2022-01-02 06:26:25

This is [Challenge 5](https://cryptopals.com/sets/1/challenges/5) of [Cryptopals](https://cryptopals.com) challenges implemented in Rust language.

## Context 💡
Another very easy challenge. We're given an English text -
`Burning 'em, if you ain't quick and nimble
I go crazy when I hear a cymbal`
and the key `ICE`. Note that the text contains a newline char too.

We just have to repeat the key chars to make it's length equal to given message/text & XOR repeated key with it. The final result should be hex-encoded. So,

```
Burning 'em.....cymbal ^ ICEICEICE...ICE = 0b3637272a2.....282f
```

## Code 🕶
Like previous challenges we'll convert the texts to bytes to perform XOR operation byte-by-byte. And convert the resulted XOR bytes to hex using `hex` crate:

```rust
pub fn repeated_key_xor(message: &str, key: &str) -> String {
    let key_seq: String = key.chars().cycle().take(message.len()).collect::<String>();

    let key_bytes = key_seq.as_bytes();
    let msg_bytes = message.as_bytes();

    let xor_bytes: Vec<u8> = msg_bytes
        .iter()
        .zip(key_bytes.iter())
        .map(|(&b1, &b2)| b1 ^ b2)
        .collect();

    hex::encode(xor_bytes)
}
```
This was it for this challenge.

See code on [Github](https://github.com/theNvN/cryptopals-crypto-challenges/blob/master/src/set_1_basics/c5_repeating_key_xor.rs)


Find me on:
Twitter - [@heyNvN](https://twitter.com/heyNvN)

[naveeen.com](https://naveeen.com)
Basic Git cheat sheet (yet another)
Tags: github, webdev, tutorial, git
Published: 2022-01-02 04:53:18

## Yet another Git cheat sheet.
**This sheet only contains the basics of git like committing, viewing, cloning, removing, etc**
Well to guys who gonna comment down, look at this duuuude...posting another cheat sheet, just move on bro.
Anyways I hope you'll like this cheat sheet <3

## Creating Snapshots 
**Initializing a Repository**
`Initializing - git init`

**Staging Changes/Files**
`Stages a single file - git add file1.js `
`Stages multiple files - git add file1.js file2.js`
`Stages with a pattern - git add *.js`
`Stages the current directory and all its content - git add .`

**Unstaging Changes/Files**
`Copies the last version from repo - git restore --staged file.js`

**Viewing Status**
`Full status - git status`
`Short status - git status -s`

**Viewing the staged/unstaged changes**
`Shows unstaged changes - git diff`
`Shows staged changes - git diff --staged`

**Skipping the staging area**
`git commit -am “Message”`

**Removing files**
`Removes from working directory and staging area - git rm file1.js`
`Removes from staging area only - git rm --cached file1.js`

**Renaming or moving files**
`git mv file1.js file1.txt (first old name, new name)`

## Browsing History

**Viewing history**
`Full history - git log `
`Full history from oldest to newest - git log --reverse`
`Shows the list of last modified files - git log --stat`
`Shows the actual changes - git log --patch`

**Viewing the history of a file**
`Shows the commits that touched file.txt - git log file.txt`
`Shows statistics (the number of changes) for file.txt - git log --stat file.txt`

**Filtering history**
`Show last 3 changes - git log -3`
`Filter by author - git log --author="Gourav"`
`Filter by date - git log --before="2022-01-20"`
`Filter by files modified (commit in which there are changes in file.txt) - git log file.txt`
`Show Commits with “Fixed” in their message - git log --grep=“Fixed”`

## Branching & Merging

**Managing branches**
`Creates a new branch called alpha - git branch alpha`
`Switching branch to alpha - git switch alpha`
`Deleting branch alpha - git branch -d alpha`

**Merging**
`Merges the alpha branch into the current branch - git merge alpha`
`Aborting merge - git merge --abort`

**Viewing the merged branches**
`Shows the merged branches - git branch --merged `
`Shows the unmerged branches - git branch --no-merged `

If you think there's something wrong or I missed related to these types, please comment below. Thanks.
_Hope you found this helpful <3_
[Day 1] Making a DApp
Tags: 100daysofcode, blockchain
Published: 2022-01-02 03:27:53

Hey everyone, I hope the start of 2022 has been great for all of you! This year I decided that I would complete my first 100 days of code challenge. My objective of this is stated in my previous post if you were curious definitely go check it out!

## What did I do? 

- Researched blockchain and blockchain technologies
- Followed tutorial for blockchain development found [here]("https://www.youtube.com/watch?v=VH9Q2lf2mNo&t=7s")
- Blogged about my experience

## What did I learn?

- Learned that Solidity is the main programming language used to create smart contracts on Ethereum 
- Learned how to setup and run a local blockchain network
- Learned the basics of writing a smart contracts
- [Github Repo]("https://github.com/ChaseStruse/EthMarketplace")

## Any Side Notes? 

- Ethereum and DApps really seem to be incredibly powerful, obviously only working on this for a day I don't have a ton of knowledge but the limited things I have done I have found to be extremely fun and I could feel the power. 

- I used to think Web3.0 and DApps were just a fad but now that I have gotten some development experience and have learned more about the blockchain I feel like I was completely wrong, this will more than likely be the future of the web. 

- Solidity has weird syntax
Top 5 Most Popular Backend Framework for 2022
Tags: laravel, django, ruby, javascript
Published: 2022-01-02 04:27:49

**Top 5 Most Popular Backend Framework for 2022**

In this blog i am going to tell you Top 5 Most Popular Backend Framework for 2022. So Lets start this article:-
1. Laravel
2. Express.js
3. Django
4. Ruby on Rails
5. Flask

You can read the whole blog here👇
[Click Here](https://codexashish.blogspot.com/2022/01/top-5-most-popular-backend-framework.html) to see this post in detailed.

_Thankyou_
3 Tricks on VS Code
Tags: vscode, vscodesettings, vscodekeybindings
Published: 2022-01-02 04:21:48

---
title: 3 Tricks on VS Code
published: true
description: New settings and keybindings
tags: vscode, vscodesettings, vscodekeybindings
---

I've been using the first one since the last update.

The options are very minimal, but really helpful !! let me know how do you feel using them.

## Enabling bracket pair colorization

```json
"editor.bracketPairColorization.enabled": true,
```

![bracket pair colorization](https://marcosrjjunior.com/_next/image?url=%2Fimages%2Fposts%2F3-tricks-on-vscode%2Fpair-colorization.png&w=1080&q=100)

## Enabling Auto complete your sentence

```json
"editor.suggest.preview": true,
```
![auto complete sentence](https://marcosrjjunior.com/_next/image?url=%2Fimages%2Fposts%2F3-tricks-on-vscode%2Fautocomplete.png&w=1080&q=100)

## Sorting code

```json
{
    "key": "shift+alt+s",
    "command": "editor.action.sortLinesAscending"
}
```

## Running multiple actions using macros

Because this is still not native feature, I'm using the macros extension.

```json
{
    "key": "shift+alt+f",
    "command": "macros.fixDocumentAndSort",
    "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly && !inCompositeEditor"
}
```

```json
"macros": {
    "eslintFixAndFormatDocument": [
        "eslint.executeAutofix",
        "editor.action.formatDocument"
    ],
},
```

In this binding, vscode is performing two actions

- formatting the document
- fixing eslint issues.
Upload file using Fetch and calc the progress using readable streams not work as expected (Browser)
Tags: discuss, help
Published: 2022-01-02 04:18:42

I am trying to upload a file using fetch streams, I need can calculate the upload progress.

But on the server I receive an corrupt file of 0 bytes, I really don't know how to use the ReadableStreams feature, that is a really new feature.

Client (Browser)

```js
const fileReadble = (reader) => new ReadableStream({
  start(controller) {
     return pump()
      function pump() {
        return reader.read().then(({ done, value }) => {
          if (done) {
              controller.close()
              return
          }
        
          controller.enqueue(value)
          return pump()
        })
      }
  }

const uploadVideo = async (file) => {
    const fileReader = file.stream().getReader()
    const response = await fetch('http://localhost:3005', { 
      method: 'POST',   
      body: fileReadble(fileReader),
    })
  
    if (!response.ok) {
      console.error(`unexpected response ${response.statusText}`)
      return
    }
}
}) 
```

Server (Node)

```js
import http from 'node:http'
import { createWriteStream } from 'node:fs'

http
  .createServer((req) => {
    if (req.method !== 'POST') return
    req.pipe(createWriteStream('./video.mp4'))
  })
  .listen(3005)
```


Note: I am using tus-js-client on the server to upload videos to vimeo, this is for security reasons and others related to tus-client, I need to send the file using Fetch API.