teleren/devto huggingface dataset:
Want free learning resource at one place? Check this website.
Tags: free, website, tools, tips
Published: 2022-04-30 14:55:47

---
title: Want free learning resource at one place? Check this website.
published: true
date: 2022-04-10 14:23:00 UTC
tags: #free #website #tools #tips
canonical_url: https://shiva.hashnode.dev/want-free-learning-resource-at-one-place-check-this-website
---

## [freelearninglist.org](https://freelearninglist.org/)

In pandemic, lots of websites made their learning and certifications free but many people when got to know about it from different sources, free duration was already passed. Well, if you ever wondered where to get the free resource list about podcasts, e-books, courses, certifications at one place. No need to worry. Here comes [freelearninglist.org](https://freelearninglist.org/)

![Screenshot_1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1649583653406/bad7ZCm0L.jpg)

The best free edu-things on the internet, carefully organized and ranked in order of awesomeness. _YouTube channels, podcasts, e-books, courses, certifications, free courses and more_ are all included. _The school of thought international, a 501c3 nonprofit organization_ that provides creative commons critical thinking materials, is _providing this as a free service_.

![Screenshot_5.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1649600316449/VqCZnL3FBO.jpg)

Most of the users are getting benefit from these countries. Because many people don't know about it.
Get started with Vite Firebase Tailwindcss fast🔥🔥🔥
Tags: vite, react, firebase
Published: 2022-04-10 13:58:55

We all know how boring and tedious it is to create new projects from scratch. It is time consuming, and it is just a lot of repetitive boiler plate code.

That is why I created the ultimate starter template for Vite. Some features include:

- **Crypto Js -** for encryption 🔒
- **Tailwindcss -** for styling 💅
- **Typescript -** for more reliable code 🔐
- **Firebase -** for Baas 💾
- **React Snap and React Helmet -** for SEO 🔍
- **React Use -** for useful premade react hooks 🪝
- **React transition group -** for smooth animations 📺
- **React icons -** for icons 💖

## Some quality of life improvements include

A preconfigured file in the  utils/firebase.ts already configured with the environment variables and the env. So it is just copy and paste your firebase credentials into the .env file.

./utils/firebase.ts
```
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getPerformance } from "firebase/performance";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIRE_API_KEY,
  authDomain: import.meta.env.VITE_FIRE_AUTH_DOM,
  projectId: import.meta.env.VITE_FIRE_PRJ_ID,
  storageBucket: import.meta.env.VITE_FIRE_STG_BKT,
  messagingSenderId: import.meta.env.VITE_FIRE_MSG_ID,
  appId: import.meta.env.VITE_FIRE_APP_ID,
  measurementId: import.meta.env.VITE_FIRE_MESG_ID,
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
//type the auth and firestore functions
const auth = getAuth();
const firestore = getFirestore(app);
const performance = getPerformance(app);
const storage = getStorage(app);

export { analytics, auth, firestore, performance, storage };
```

##Routing
is preconfigured and already done in the App.tsx file and main.tsx

##Encryption
functions encrypt and decrypt are already made in ./utils/encryption.ts

##SEO
the main.tsx file is already configured with the appropriate code react snap needs to run

##Production
scripts on production already have a prod script so you can ship your app with SEO and performance

##Installing the template
```
git clone https://github.com/NeoPrint3D/vite-starter-kit

cd vite-starter-kit

#use anyone of these commands to install dependencies

pnpm install 
yarn install
npm install 

#start the project

pnpm dev
```


![Picture of the starter kit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ip239lfj5j0hx31qrby4.png)

Thanks for reading any question just email me np3d.dev@gmail.com


And please star the GitHub repo:
https://github.com/NeoPrint3D/vite-starter-kit
How to decrypt MD5 hashes ?
Tags: md5, hash, decrypt, tutorial
Published: 2022-04-10 13:55:29

The MD5 hashing algorithm (message-digest algorithm) is a one-way cryptographic function that receives any length message as input and returns a fixed-length digest value that may be used to authenticate the original message.

The MD5 hash function was created with the intention of being used as a safe cryptographic hash method for digital signature authentication. However, MD5 is no longer recommended for use other than verifying data integrity and detecting inadvertent data damage.

Therefore, MD5 hashes can't be decrypted using a function but a large database with encrypted strings is required. There are numerous md5 decrypt tools available online. Here's a step-by-step tutorial using [allinone.tools](https://allinone.tools/) website:

## How to decrypt MD5 hashes with allinone.tools?
1. Open your web browser, and go to [allinone.tools](https://allinone.tools/encryption/md5-decrypt)
2. Paste the MD5 hash you want to decrypt in the input.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfbdlho7nbvke4re0ce1.png)
 
3. Click the MD5 decrypt button, allinone.tools will compare this hash with the hashes available in its large database and find the string which corresponds.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjge6467ldexmvhmi9ao.png)
 

(!) The MD5 decrypt tool can't decrypt any hash since it doesn't use a decrypt function.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/if9d0pn3xhcbr5zh839f.png)
 

## Contact
Email: contact@allinone.tools
Twitter: [@allinonetools](https://twitter.com/AllinoneTools)
What are the Best Practices of taking Online Coaching Classes?
Tags: javascript, quiz, money, beginners
Published: 2022-04-10 13:47:52

**[Online coaching classes](https://www.edulete.in/)** are a great way to learn new skills. They are the best way to learn things that you don't have time for, or for when you need feedback on your work.
The best practices of taking online coaching classes are that you should be willing to put in the necessary time and effort in order to get the most out of them. You also should not compare yourself with other students, but instead focus on your own progress and success.
Conclusion: Students Should Consider Preparing Using Online Education Platforms Which Offer Unique Learning Solutions!

In a world where students are more interested in playing games than doing homework, it is no surprise that teachers and parents are looking for ways to make learning more fun. One of the most popular methods is through **[quiz-based games](https://edulete.blogspot.com/2022/04/the-ultimate-list-of-fun-quiz-games.html)**. These games have been shown to increase engagement and retention, but do they really improve learning? The psychology of learning is a broad topic that includes many different aspects of the human mind. In the past, psychologists were only interested in how people learn about their environment and their behaviour. Nowadays, we know that people also learn from each other, and this is called social learning.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93taiv47z5buk2dnmx6m.jpeg)
use `console.time()` and `console.timeEnd()` to measure the time taken to execute a piece of code, in JS
Tags: javascript, tutorial, beginners, computerscience
Published: 2022-04-10 13:16:14


```javascript
console.time('time')
console.log('Hello World')
console.timeEnd('time')
// Hello World
// time: 7.991ms
```

Here in JavaScript we are having cool method called as `console.time` and `console.timeEnd` which is used to measure the time taken to execute a piece of code.

<!-- list the process to use it. -->
1. start with writing the code in **`console.time('time')`**, here are **"time"** is the name of the variable which we will use to store the time taken to execute the code
1. Start writing your **complex** code in **`console.log('Hello World')`**
2. Now I'll end the code with **`console.timeEnd('time')`** and we will get the time taken to execute the code

> **Note:** `console.time` and `console.timeEnd()` must have same **"string"** name, which is **`time`** here.


> It is really handy when you are learning **Algorithums** and you want to measure the time taken to execute the code.

# Let's try it out.

```javascript
let nums = [];
// it's empty array.
for (let i = 0; i < 1000000; i++) {
    // making a loop over 1 million times; and pushing it.
    nums.push(Math.floor(Math.random() * 1000000));
}
// sorting the arrray
nums.sort(function (a, b) { return a - b });
```


### Solving by Linear Search Algo:
```javascript
let LinearSearch = function (nums, target) {
    console.time("linear")
    for (let i = 0; i < nums.length; i++) {
        if (nums[i] === target) {
            console.timeEnd("linear")
            return i;
        }
    }
    console.timeEnd("linear")
    return -1;
}
// find million and 1
LinearSearch(nums, 1000001);
console.log(LinearSearch(nums, 1000001));
// linear: 10.044ms
// -1
```

### Example with Binary Search Algo:
```javascript
// Make a function of binary search
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let target = 5;


let BinarySearch = function (nums, target) {
    console.time("binary")
    let start = 0;
    let end = nums.length - 1;
    while (start <= end) {
        let mid = Math.floor((start + end) / 2);
        if (nums[mid] === target) {
            console.timeEnd("binary")
            return mid;
        }
        else if (nums[mid] < target) {
            start = mid + 1;
        }
        else {
            end = mid - 1;
        }
    }
    console.timeEnd("binary")
    return -1;
}
console.log(BinarySearch(nums, 1000001))
// binary: 0.129ms
// -1
```
## See it's become so handy far a beginner to understand the concept of time taken by a function.



## 🫂 Thanks for reading.

### If you have any questions, please feel free to contact me; comment on the post below or reach on me on

### Twitter : [`@Abhayprajapati_`](https://twitter.com/Abhayprajapati)

### Github : [`@theabhayprajapati`](https://github.com/theabhayprajapati)
How top and translate work together to centre a div
Tags: css
Published: 2022-04-10 13:13:29

I've known for a long time that centring an absolutely positioned div requires writing:
```css
top: 50%;
left: 50%;
translate(-50%, -50%);
```
but until this week I never considered *how* it works. I found out by accident and it's so obvious once you know. It's just that percentages confuse things and make it not obvious when you don't know.

## An absolutely positioned div
If you absolutely position a div with `position: absolute;` then it will be positioned relative to its nearest relatively positioned parent. And that position will be the top left. Which is `top: 0;` and `left: 0;`.

If you want to move it down then `top: 10px;` will move it down by 10px. And `top: -10px;` will move it up by 10px.

## Moving the div by 50%
`top: 50%;` will move it down, since it's a positive number. And the 50% refers to the size of its relatively positioned parent. Let's say that parent is 200px tall. Then 50% = 100px. So it's moving the div down by 100px.

## Why isn't it centred?
Logically, moving a div down by half its parent's height would centre it vertically. But it's not. It's a bit too far down. The answer lies in the position it started in.

It started at the top. By which I mean that the top of the div was at the top of its parent. However much we move it down, it'll position it based on the top of the div.

So `top: 50%;` positions the *top* of the div 50% of the way down its parent.

## How does transform: translate move it up?
We know that to vertically centre the div `transform: translateY(-50%);` works. But how?

The answer lies in what 50% is a percentage of.

Unlike with top, which was a percentage of the parent, translate is a percentage of the div itself. That 50% is moving it up by half the height of itself. Say the div is 50px tall, 50% will move it up 25px.

Remember how `top: 50%;` positioned the top of the div halfway down its parent? If we think about it, what we want to do to vertically centre it is to move it up by half its height, so the mid-point of the div is aligned with the mid-point of the parent.

Which is exactly what `transform: translateY(-50%);` is doing.

It's obvious once you understand what those percentages are a percentage of. And easier to see, the taller your absolutely positioned div is.

## What about horizontal centring?
It's exactly the same. The div starts off at `left: 0;`: the left edge of the div is at 0px across on its parent.

`left: 50%;` moves it so its left edge is 50% of the way across.
`transform: translateX(-50%);` moves it back by 50% of the its width.

## Always ask what is it a percentage of
This is true in life as well as in CSS.
Render HTML tag in Next JS or React JS
Tags: javascript, react, nextjs
Published: 2022-04-10 13:05:15

If we use WYSIWYG Editor in our content usually it will be save as HTML in Database.

render HTML tag in React / Next JS very simply with 'dangerouslySetInnerHTML'

Example:

```
const content = `<b>Test Content</b>`;

<p dangerouslySetInnerHTML={{ __html: content }}></p>
```
How to write shorter code using python in Leetcode
Published: 2022-04-10 12:55:28

# How to get index in a for loop in Python?
Naive: use a variable
```
count = 0
for i in range(5):
//  some code using count index
    count += 1
```

Smart: use enumerate function:
```
for idx, val in enumerate(ints):
    print(idx, val)
```
# How to get unique key from value in dictionary?

// my_dict.items() look like this:
// [("a", 1), ("b", 2), ("c", 3)]

my_dict ={"a": 1, "b": 2, "c": 3}

```
def get_key(val):
    for key, value in my_dict.items():
        if val == value:
            return key

    return "no match"
```

my_dict = {"a": 1, "b": 2, "c": 3}
print(get_key(1))
print(get_key(2))

# List Comprehension

Syntax:
```
newlist = [expression for item in iterable if condition == True]
```

fruits = ["apple", "banana", "cherry", "kiwi", "mango"]
newlist = [x for x in fruits if x != "apple"]
print(newlist)
`output: ['banana', 'cherry', 'kiwi', 'mango']`
( HTML Tip ⚡ ) - Specify Fallback Image if Actual Image not found
Tags: javascript, webdev, programming, html
Published: 2022-04-10 12:42:38

Use onerror event When you need to specify a backup image in case if the actual image is not found or not available on the server for any reason.

```
<img src="image.gif" 
onerror="this.onerror = null ; this.src = 'imagenotfound.gif' ">

```

Note - The reason we have the "this.onerror=null" in the function is that the browser will be stuck in an endless loop if the onerror image itself generates an error.



### Resources - 

1. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
Azure Architectural Components
Tags: azure
Published: 2022-04-10 12:37:33

The Core Azure architectural components for cloud computing includes Azure regions, region pairs, availability zones, resources, resource groups, Azure resource manager, subscriptions and management groups.

**Regions**
![Azure Regions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/urbvcj3w4d31h3178ik5.png)
 
. They are made up of one or more datacentres in close proximity
. There are over 60 regions available to choose 
. Azure offers the best possible high availability performance and security

**Region Pairs**
![Region pairs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/170eesrlt9y1py6tjcn5.png)

. It consists of two regions within the same geographic
. Each Azure region within a pair is physically located at least 300 miles apart
. Continuous updates are performed to minimise downtime

**Availability Zones**
![Availability zones](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0grx5nvtfbd0q79ve0d.png)

. Availability zones are physically separate locations within each Azure regions
. Each zones is equipped with its own power, cooling systems and networking
. Data is being shared in 3 different availability zones
. Provides protection against downtime due to datacentre failures

**Resources**

. Includes component such as virtual machines, storage accounts, virtual networks, application services, functions, etc
. They are available to build cloud solutions

**Resource Group**
![Azure resource manager overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7elnixq6bqic97edgsx.png)
 
                                    
. Is a container that manage resources in a single unit
. Resources can exist in only one resource group
. Multiple resource group can be utilized

**Azure Resource Manager**

. Is the deployment and management service for Azure
. Provides a management layer that enables one to create, update and delete resources

**Subscriptions**

. Provides authorized access to Azure accounts
. Separate billing reports and invoices are generated for each subscription

**Management groups**

![Azure management groups](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yx8nocz68zbd23xvsroa.png)
 
. Manage your subscriptions
. Management groups can include multiple azure subscriptions
.10,000 management groups can be supported in a single directory
Open Source Adventures: Episode 35: Better Data Sources for Russian Losses App
Tags: javascript, svelte, d3
Published: 2022-04-10 12:32:13

The visualization so far depends on three things:

* how many tanks Russia had
* what were the losses so far
* what will be the losses in the future

There's no perfect answer to the questions about past and future losses, but we should know Russian starting situation at least.

At least we should have some answer for the first question, as IISS publishes their annual book with the best information we have. Following numbers are from IISS Military Balance 2022.

### Tanks

Russian army had 2927 tanks in active service and 10200 in storage.

Russian marines had additional 330 tanks.

Russian airborne forces had additional 160 tanks.

### Armored Vehicles

What's a "MBT" is the only thing everyone can agree on, everything else has more vague categorization.

According to Military Balance 2022, Russian army had the following categories of armored vehicles:

* 1700 RECCE (1000 in storage)
* 5180 IFV (8500 in storage)
* 6050 APC (6000 in storage)

Russian marines had additional 1260 IFVs, and 400 APCs.

Russian airborne forces had additional 130 IFVs, 822 APC, and 1351 ABCV.

Rosgvardia had additional 1650 IFV/APC.

### Artillery

We have categorization issues here as well. Let's just add towed, self-propelled, and MRL artillery together. By that count Russian army had 4894 artillery pieces.

Russian marines had additional 405 artillery.

Russian airborne forces had additional 600 artillery.

Rosgvardia had additional 20 artillery.

### Totals

* Tanks: 3417 in service, 10200 in storage
* Armored vehicles: 18543 in service, 15500 in storage
* Artillery: 5919 in service

These numbers are higher than numbers commonly quoted by the media, as the commonly quoted figures are army only, and these also include marines and airborne units, which are also involved in the war.

### Losses so far

From latest Ukrainian data. For artillery I'm adding artillery and MRL columns.

* 722 tanks (21% of active service)
* 1911 armored vehicles (10% of active service)
* 450 artillery pieces (8% of active service)

### Story so far

I updated the app with more recent data, and using IISS tanks estimate as the baseline. Due to much higher number of tanks in the recent estimate and less intense recent fighting, that moves the default estimate from 10 October 2022 to 27 November 2022.

[All the code is on GitHub](https://github.com/taw/open-source-adventures).

I deployed this on GitHub Pages, [you can see it here](https://taw.github.io/open-source-adventures/episode-35/).

### Coming next

In the next episode, I'll try to extend the app to include armored vehicles and artillery losses.
Jest test vs it
Tags: testing
Published: 2022-04-10 12:09:51

When working on Jest test cases, you might come across two different approaches, as you can see below.

```js
test('if this function succeeds', () => {
  expect(1).toBeTruthy();
});

it('should test if this function succeeds', () => {
  expect(1).toBeTruthy();
});
```

As you can see, the above tests are pretty much the same function. However, the naming is different.

## The difference between test and it in Jest

Basically, `it` is an alias for `test`, so they are functionally the same.

So, what makes it different?

This alias is created to make your tests more readable from a test output point of view.

It can really help make your tests more readable from a readability point of view.

Imagine the second test to use the `test` function.

```js
test('should test if this function succeeds', () => {
  expect(1).toBeTruthy();
});
```

This immediately sounds a bit off, right?

And these outputs definitely show up weird in your test result, so try to make them look as much like English sentences as possible.

## Which one wins?

This totally depends on the use case.

I personally use `it` more for render checks. It often makes more sense.

- "it should have a button."
- "it should navigate to x."

However, it's totally up to you which one makes more sense for specific use-cases.

Which one do you prefer?

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)