teleren/devto huggingface dataset:
List of 39 HTTP status codes and their meaning
Tags: webdev, javascript, beginners, programming
Published: 2021-12-14 11:51:49

Each Status-Code is described below, including a description of which method(s) it can follow and any metainformation required in the response.

Table of contents
Informational 1xx

Successful 2xx

Redirection 3xx

Client Error 4xx

Server Error 5xx

[See the complete list](https://www.dsabyte.com/posts/blog/List-of-39-HTTP-status-codes-and-their-meaning/61b77cd8f92b6c70db770a73)
Set Expiry Time (TTL) for LocalStorage With Javascript
Published: 2021-12-14 11:50:31

1.Storing Items with Expiry Time:
Let’s create a function that allows you to set a key in localStorage, and store the expiry time along with it:
{% jsfiddle https://jsfiddle.net/sababg/mty5fu1r/3/ %}

```js
 function setWithExpiry(key, value, ttl)
 {
	const now = new Date()
	// `item` is an object which contains the original value
	// as well as the time when it's supposed to expire
	const item = {
		value: value,
		expiry: now.getTime() + ttl,
	}	localStorage.setItem(key, JSON.stringify(item))
}```


2.Getting Items from Storage:
We can verify the expiry time while retrieving items from the store:


`function getWithExpiry (key) {

	const itemStr = localStorage.getItem(key)
	// if the item doesn't exist, return null
	if (!itemStr) {
		return null
	}
	const item = JSON.parse(itemStr)
	const now = new Date()
	// compare the expiry time of the item with the current time
	if (now.getTime() > item.expiry) {
		// If the item is expired, delete the item from storage
		// and return null
		localStorage.removeItem(key)
		return null
	}


	return item.value
}`

---
Top 5 VS code extensions for beginners 🚀
Tags: webdev, vscode, beginners
Published: 2021-12-14 11:42:59

 Hello Guys, Today in this article I am writing about **Top 5 VS code extensions** for beginners. 
 So, let's start.... 


 **1.Prettier** :- 
               Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

**Installation** 
`Prettier - Code formatter`

**2.Bracket Pair Colorizer :-** 
               This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use. 

**Installation** 
`ext install CoenraadS.bracket-pair-colorizer`

**3.Jellyfish Theme :-**
             Jellyfish is a dark theme and free Vs code theme, it make you editor neat and colorful. It is downloaded by 30,611 developers.

**Installation** 
`ext install PawelBorkar.jellyfish`


**4.Live Server** :- 
           Live server gives you launch a development local Server with live reload feature for static & dynamic pages.

**Installation**
`ext install ritwickdey.LiveServer`

**5.Live Share :-**
           Live Share enables you to quickly collaborate with a friend, classmate, or professor on the same code without the need to sync code or to configure the same development tools, settings, or environment.

**Installation** 
`ext install MS-vsliveshare.vsliveshare-pack`

Thanks for reading....
Upgrading Azure CLI
Tags: azure, cloud, cli
Published: 2021-12-14 11:36:38

If you use Azure CLI then you need to keep upgrading it as and when new versions arrive. 

Check the latest version by running `az version` then match it with the documentation. If it is older then you should update it by running 

```bash
az upgrade
```

To make it an automatic one you can also configure your Azure CLI by 

```bash
az config set auto-upgrade.enable=yes
```
Insta Aero
Tags: instagram, instaero, instagramaero, descargaraeroinsta
Published: 2021-12-14 11:16:02

InstAero es una aplicación para móviles con sistema operativo android. Es una modificación de Instagram con la que puedes hacer más funciones que son el Instagram oficial. Este Instagram Aero no se encuentra en la tienda de aplicaciones de Google, Play Store. Pero puedes conseguirlo de forma segura en el siguiente enlace, [Descargar Aeroinsta](https://descargarappgratis.com/insta-aero/).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98tvvgkxqkcyqey10n7s.jpg)
**Características de Instagram Aero**
La aplicación Insta Aero tiene muchísimas funciones, por eso es mejor que la app original. A continuación, enumero las características que tiene la aplicación:

- Diferentes idiomas disponibles, entre ellos el español.
- Posibilidad de añadir comentarios desde la pantalla de inicio.
- Bloqueo de la aplicación con huella o patrón.
- Ocultar: escribiendo, leódo, visto...
- Descargar fotos y vídeos.
- Compartir la url de vídeos y fotos.
- Poder copiar cualquier texto dentro de la aplicación.
Creating An Automated Personal Finances Dashboard With AWS - Part 1 (Vision)
Tags: aws, python, lambda, api
Published: 2021-12-14 11:09:34

I like keeping track of things.

In fact, I like keeping track of things so much that I joined a bank that gave me in depth analytics and insights into my spendings and savings ([UP Bank](https://up.com.au/)).

Up is a pretty new bank here in Australia and they've managed to create a really cool banking platform with a nifty app. Perhaps my biggest gripe though is that there is no desktop application, and their insights and analytics aren't very customizable and there aren't any out of the box 3rd party integrations.

I had caught the UP bug and I wanted even deeper insight into my finances, I wanted to be able to piece together correlations and look at long term trends.

And then UP released their API, an answer to my prayer. The seed was planted and it was time to get to work.

Within days I had built a python script that downloaded my entire transaction history to a csv file, I would then import that CSV into Quicksight manually. This was amazing, the rush was unreal, but after I had to repeatedly perform the manual steps over and over I knew this wouldn't work long term, it was crying out to be automated.

### Why do I want an automated financial dashboard?

1. To gain insight into current financial state
2. To deep dive historical data and identify correlations
3. To forecast future financial state and identify trends

### How am I going to do this?

Good question, right now I actually don't know what the end product will look like.

Instead I've chosen to identify an MVP (minimum viable product) and to try to replicate my original workflow as close as possible, but substituting manual tasks for automated ones. This way I get the most value in the quickest way. After I've delivered v0.1 I can then look at the next jump that will provide the most value from the least amount of effort.

![v0.1 Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvdhp9ovr7w9qrpy371h.png)

Let's expand on a few core decisions that have been made:
1. AWS - My cloud provider of choice
2. Lambda - Severless makes the most sense when lifting and shifting python scripts
3. S3 - This also most closely represents the current workflow, perfect for an MVP
4. Cloudformation - Baking everything into a cloudformation script will allow us to easily grow the solution without having to worry about cleaning up leftover or misconfigured resources in AWS

### Next steps
Stay tuned for the next part which will cover creating and configuring the Provision User lambda function!
Hacking MS SQL
Tags: security
Published: 2021-12-13 10:48:04

Hacking MS SQL is a very useful skill to learn. Especially in this recent world of computers everyone uses MS SQL (or MariaDB) and with that comes the concern of how to protect ourselves. 

Why do we use SQL anyway? 

Many web apps interact with a database and are CRUD applications (create, read, update, delete data). SQL databases can be used with [Python](https://python-commandments.org/python-mysql-tutorial/), PHP and other programming languages. Besides SQL injection, there can be other vulnerabilities.

SQL database hacking (injection) is the art of making database vulnerable for data thefts. However, in this article we are interested not in the database, but in running system commands :smile:

### Brute force

First you must already know the password which you may obtain through brute force with [hydra](https://sectools.org/tool/hydra/). 

You can use a list of usernames and a list of passwords to brute force mssql server.

```bash
hydra -L /root/Desktop/user.txt –P /root/Desktop/pass.txt 192.168.1.128 mssql
```

Change the ip to the MS SQL server ip address. The username and password list should exist. You can find such lists on the internet, like *rockyou.txt*

You can also use medusa, xhydra, nmap or metasploit for this. These tools can also be used on [linux](https://bsdnerds.org/what-is-linux-shell/) for brute forcing other services. After getting the password, what's next?

You could explore the data. But chances are you are not interested in the data, but in gaining system access.

![hack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3l99su2bpbnxx78orb0k.jpeg)

### Browsing file system

MS SQL servers can have the command *xp_cmdshell* enabled. This lets you run commands through its command prompt. 

```bash
sqsh -S MACHINE_IP -U sa -P "your_password"
1> xp_cmdshell 'whoami'
2> go

  output
```

One command you can do is `type filename`. This lets you read  files from the file system. You can use `dir` to list al files and folders. There may be interesting files in the users home folder!

From there on, you can try starting a reverse shell (with nc.exe) or try other things.

To learn more about web hacking, you may like [this course](https://www.udemy.com/course/ethical-hacking-web-app-hacking/)
New Blog 新博客
Published: 2021-12-14 10:59:10

This is a my new blog. It is mainly about CS, but sometimes I will cover other things I found interesting, like history/politics/science etc.

这是我的新博客。 我大部分时候会更新和计算机科学相关的内容，但是有的时候也会覆盖一些跟历史，政治或者其他科技类我觉得感兴趣的话题。

Now some tests I want to run.

# Embed a youtube video

<iframe width="1258" height="753" src="https://www.youtube.com/embed/nx5g5bwtUuA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# Write some code?

##### C++

```cpp
#include <iostream>
int main() {
    std::cout << "Hello world" << std::end;
}
```

##### Python

```python
print("hello world")
```
How to upgrade Tailwind 2 to Tailwind 3
Tags: tailwindcss, tutorial, webdev
Published: 2021-12-14 10:51:41

In package.json file, verify your current installed tailwind version. Find tailwind's complete upgrade guide, including all minor changes [here](https://tailwindcss.com/docs/upgrade-guide#).

This tutorial has as starting point:
- Tailwind 2.2.16

---

1. [Upgrade tailwind](#1-upgrade-tailwind)
2. [Upgrade typography package](#2-upgrade-typography-package)
3. [Upgrade forms package](#3-upgrade-forms-package)
4. [Upgrade autoprefixer package](#4-upgrade-autoprefixer-package)
5. [Upgrade postcss package](#5-upgrade-postcss-package)
6. [Remove aspect-ratio package](#6-remove-aspectratio-package)
7. [Replace purge option with content](#7-replace-purge-option-with-content)
8. [Remove dark mode config](#8-remove-dark-mode-config)

---

## 1. Upgrade tailwind

```bash
yarn upgrade tailwindcss --latest
```

---

## 2. Upgrade typography package

```bash
yarn upgrade @tailwindcss/typography --latest
```

---

## 3. Upgrade forms package

```bash
yarn upgrade @tailwindcss/forms --latest
```

---

## 4. Upgrade autoprefixer package

```bash
yarn upgrade autoprefixer --latest
```

---


## 5. Upgrade postcss package

```bash
yarn upgrade postcss --latest
```

---

## 6. Remove aspect-ratio package

Tailwind 3 comes with [native aspect-ratio](https://www.youtube.com/watch?v=mSC6GwizOag&t=3s) (7:42). This implies that the package.json can be slimmed down by removing the aspect ratio package if you had it installed.

```bash
yarn remove @tailwindcss/aspect-ratio
```

In the tailwind.config.js file, remove aspect-ratio from the plugins.
```js
require('@tailwindcss/aspect-ratio'),
```

- Search your codebase for the usage of [legacy aspect ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio#usage). 
- Replace with the [new aspect ratio](https://tailwindcss.com/docs/aspect-ratio) attributes.

---

## 7. Replace purge option with content

If after compiling the CSS, you see the warning message:
`The "purge"/"content" options have changed in Tailwind CSS v3.0.`

Replace the `purge` option in tailwind.config.js with `content` as mentioned [here](https://tailwindcss.com/docs/upgrade-guide#configure-content-sources).

```js
// old
module.exports = {
  purge: [...]
  ...
}

//new
module.exports = {
  content: [...]
  ...
}
```

---

## 8. Remove dark mode config


In the tailwind.config.js file, remove the dark mode setting if it's value is set to false.
```js
// old
module.exports = {
  darkMode: false,
  ...
}

//new
module.exports = {
  ...
}
```
Day 63 of 100 Days of Code & Scrum: The Open Graph Protocol and next-seo
Tags: 100daysofcode, beginners, javascript, productivity
Published: 2021-12-14 10:44:45

Hello there, everyone!

Like every Tuesday, I had to go to my physical therapy session, so I could not code as much.

However, I still made some progress with my [company website](https://www.rammina.com)'s `<meta>` tags. I learned about **OpenGraph**, which is essential for improving page SEO. Another thing I used was the `next-seo` package to make it a lot easier to manage `<meta>` on a page-by-page basis. I highly recommend anyone using Next.js to utilize that library, as it gives a lot of quality of life improvements.

Anyway, let's move on to my daily report!

## Yesterday

I deployed and fixed production bugs on my [web development blog](https://www.rammina.com/blog). I also enhanced some styling, and I was fairly pleased with everything so far.

## Today

Here are the things I learned and worked on today:

### Company Website

- learned about **OpenGraph** and the Twitter equivalent.
- used `next-seo` package to manage `<meta>`.
- added different preview images for different parts of the website.

### Scrum

- I did some practice flashcards for Scrum.
- reviewed some of the things I've learned before.

Thank you for reading! I wish you the best.

![Rammina Thank You Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9ayfxxxaz2g2hfcqbsk.png)

### Resources/Recommended Readings

- [The Open Graph Protocol](https://ogp.me/)
- [next-seo | GitHub](https://github.com/garmeeh/next-seo)
- [The 2020 Scrum Guide](https://scrumguides.org/scrum-guide.html)
- [Mikhail Lapshin's Scrum Quizzes](https://mlapshin.com/index.php/scrum-quizzes/)

### DISCLAIMER

**This is not a guide**, it is just me sharing my experiences and learnings. This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!

<hr />

### Other Media

Feel free to reach out to me in other media!

<span><a target="_blank" href="https://www.rammina.com/"><img src="https://res.cloudinary.com/rammina/image/upload/v1638444046/rammina-button-128_x9ginu.png" alt="Rammina Logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://twitter.com/RamminaR"><img src="https://res.cloudinary.com/rammina/image/upload/v1636792959/twitter-logo_laoyfu_pdbagm.png" alt="Twitter logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://github.com/Rammina"><img src="https://res.cloudinary.com/rammina/image/upload/v1636795051/GitHub-Emblem2_epcp8r.png" alt="Github logo" width="128" height="50"/></a></span>
Java Practice on Holidays
Tags: beginners, programming, java
Published: 2021-12-14 10:25:32

Today,i finally decided to be productive atleast and practice on java basics

> i think this is the start of my java journey? or roadmap.

Right now im following Programiz Java Excercises

[java-programming/examples](https://www.programiz.com/java-programming/examples)

i do these exercise by not looking at the actual code thats not a flex cause i need more practice writing good variable name

# 01 
**Java Program to Print an Integer (Entered by the User)**

````import java.util.Scanner;
public class RandomPractice {
	public static void main(String[] args) {		

     Scanner scan = new Scanner(System.in);

  System.out.println("Enter a number : ");
  int number = scan.nextInt();

// Concatenates String and Number entered by user 
// Prints the number you entered 
// These " " are used to separate variables in one line 
  System.out.println("You entered" + " " +number);`

INPUT  : 10 
OUTPUT : You entered 10
Advantages Of Selecting AngularJS In Web Application Development
Tags: angular, webdev, webapp, webapplication
Published: 2021-12-14 10:06:01

<p>AngularJS is an open-source framework by Google that helps developers write and test the code. It is a Model View Controller (MVC) architecture that combines HTML codes with application modules. It is beneficial in building rich web applications.</p>
<p>The advantages of AngularJS in&nbsp;<strong>web app development&nbsp;</strong>are as follows.&nbsp;</p>
<ul>
<li><strong>AngularJS offers a simple architecture</strong></li>
</ul>
<p>It is one of the simplest platforms that offer simple design architectures. It comprises several components and requirements that are suitable for managing heavy applications.&nbsp;</p>
<ul>
<li><strong>AngularJS offers a declarative user interface</strong></li>
</ul>
<p>On this platform, HTML defines app UI. It makes the development process much simpler. HTML code strengthens an interface developing in JS.&nbsp;</p>
<ul>
<li><strong>AngularJS offers an improved design architecture</strong></li>
</ul>
<p>Some applications have more than 60 components. With the help of this platform, even a newly joined developer can work on such heavy apps without any trouble.&nbsp;</p>
<ul>
<li><strong>Provides a lesser timeline</strong></li>
</ul>
<p>It offers a lesser timeline which reduces the application coding time. You can build a simple app rapidly by adding a few attributes to the HTML code.&nbsp;</p>
<ul>
<li><strong>Enhances server performance</strong></li>
</ul>
<p>It enhances server performance by bringing down the burden from server CPUs. It only delivers static files and responds to API calls, thus reducing the overall traffic.&nbsp;</p>
<ul>
<li aria-level="1"><strong>Can reuse codes on this platform</strong></li>
</ul>
<p>You can reuse the code that a developer has written previously any number of times. Imagine the time, this feature saves and makes the&nbsp;<strong><a href="https://www.webomindapps.com/web-application-development-company.html">web app development</a>&nbsp;</strong>process quicker.&nbsp;</p>
<p>Some more advantages of AngularJS are two-way data binding, convenient testing, parallel development, and an MVC software design platform.</p>
React useState, useEffect and pass undefined state
Tags: react
Published: 2021-12-14 10:00:05

Hi,

I have problem with with my code. I have functional component

`
const MyComponent = () => {
    const [selectedProfile, setSelectedProfile] = useState<ProfileInRoom|null>(null);
    
        useEffect(() => {
          console.log('selectedProfile', selectedProfile); // output is proper 1
            const receiveRoomChatMsg = (_uri: string, msg: PrivateUserMessage) => {
            console.log(selectedProfile); // HERE IS PROBLEM: output is undefined
                }
            };
    
            ws = MyWebsocket.getInstance();
            ws.subscribe(`chatRoom/channel/${roomName}`, receiveRoomChatMsg);
    
            return () => {
                ws.unsubscribe(`privateRoomChat/channel/${roomName}`);
            };
        }, [selectedProfile]);
        

        return (<div onClick={() => setSelectedProfile(1)} >This is my component</div>);
}`

Can somebody say me why value of selectedProfile variable is undefined in function receiveRoomChatMessage?
Satha - A localStorage wrapper
Tags: javascript, localstorage, store
Published: 2021-12-14 09:58:28

Satha. An easy to use localStorage wrapper this post serves as an introduction to Satha.

## Prerequisite

Install it from npm using

```
// npm
npm i @satha/core

// pnpm
pnpm add @satha/core
```

## Create a local storage store

Here we will create a store to keep a numeric value let's call it "numberSave"

```ts
import { useStorage } from '@satha/core';

const numberSave = useStorage('number-save', 1);
``` 

This will create a localStorage entry

```json
// localStorage name "satha-store-default"

{
"number-save": 1
}
```

useStorage comes with get method which can be used to get value.

```ts
// get value
const number = numberSave.get();

console.log(number);
``` 

It also has a set method which takes a callback function as the only parameter. Callback will have a state which can be altered and returned.

```ts
// set value
numberSave.set((state) => state + 1);
``` 



## Sub link hack

If you are using sub links e.g. github pages then there is a possibility of local storage conflict. Add following code before initializing "useStorage"

```ts

import {
  createLocalStorage,
} from '@satha/core';

// use unique name for each site
createLocalStorage('satha-store-001', { defaultStorage: true });

// after this useStorage can be used
```

## Digging deeper

That's it for creating a simple localStorage entry. 

want to dig deeper ? 

Checkout Satha homepage for adavnced usage

https://satha.netlify.app/
How to get early access of thirdWeb.com
Tags: blockchain, web3, nfts
Published: 2021-12-14 09:32:45

On 13 Dec 2021, thirdweb launches its on platform to make it possible and incredibly to build web3 applications.

thirdweb will enable you to build web3 projects such as NFT's, marketplaces, tokens, and more awesome projects in few clicks.

You can also integrate web3 features into your app using SDK's, widgets, and interfaces.


![thirdweb features](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcrgd8cag914afz6m16j.JPG)

## To get early access of thirdweb, follow below steps:

**Step-1:** Go to this link https://thirdweb.com/early

![Early access to thirdweb](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gh3ia0g13z59s1gqe5yi.JPG)

**Step-2:** Before clicking `connect wallet` button, make sure you have **Metamask wallet** and **Polygon Network** added in your wallet. (P.S. you can connect any wallet, to be safe you can use Mumbai(testnet) network)

Here how you can get your [Metamask wallet](https://metamask.io/) and to add Polygon network, add below details by clicking ADD NETWORK button in Metamask.

> Network Name: Polygon Mainnet
> New RPC URL: https://polygon-rpc.com
> ChainID: 137
> Symbol: MATIC
> Block Explorer URL: https://polygonscan.com/

**Step-3:** Now you can click `connect wallet` button

**Step-4:** After connecting your wallet, you can select polygon network from drop down.

**Step-5:** Successfully message shall appear as below image shown

![thirdweb](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxf1itzs9vkseaxhwywz.JPG)

Now you have minted Free early access NFT 😉, enjoy!

## To view your thirdweb early access NFT

Go to your OpenSea account, if you don't have create one by connecting your Metamask wallet.

After creating, go to your profile section and click the HIDDEN TAB, you can view there.

By clciking bottom 3 dots on that NFT, click unhide.

Here's how Early access membership NFT looks: [_click here_](https://opensea.io/assets/matic/0xa9e893cc12026a2f6bd826fdb295eac9c18a7e88/0)

Hurray! Welcome to Web3.

If you have any questions let me know in the comment section. Happy to help here :)