teleren/devto huggingface dataset:
List of most needed 'npm' packages when building MERN apps
Published: 2022-06-17 16:51:32

Hi, this is a list of the most of the libraries you're going to be using when building MERN stack application.

***BACK-END***

[expressjs](www.npmjs.com/package/express):- node.js framework
[mongoose](www.npmjs.com/package/mongoose):- Mongoose provides a straight-forward, schema-based solution to model your application data.
[jsonwebtoken](www.npmjs.com/package/jsonwebtoken):- A compact URL-safe means of representing claims to be transferred between two parties
[dotenv](www.npmjs.com/package/dotenv) :-  Loads environment variables from .env file. 
[cookie-parser](www.npmjs.com/package/cookie-parser):- Parse Cookie header and populate req.cookies with an object keyed by the cookie names.
[bcrypt](www.npm.com/bcrypt):- A library to help you hash passwords.
[cors](www.npmjs.com/package/cors):-  Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins
[multer](www.npmjs.com/package/multer):- Multer is a node.js middleware for handling multipart/form-data , which is primarily used for uploading files.
[nodemon](www.npmjs.com/package/nodemon):- nodemon is a tool that helps develop Node.js based applications by automatically restarting the node application when file changes

***FRONT-END***

[tailwindcss](www.npmjs.com/package/tailwindcss):- CSS framework
[autoprefixer](www.npmjs.com/package/autoprefixer):- Parse CSS and add vendor prefixes to CSS rules
[postcss](www.npmjs.com/package/postcss):- Transform CSS with the power of JavaScript.
[styled-components](www.npmjs.com/package/styled-components) :- Mix of javascript and css to style your app.
[axios](www.npmjs.com/package/axios):- Promise based HTTP client for the browser and node.js.
[react-router-dom](www.npmjs.com/package/react-router-dom):- DOM bindings for React Router.
[redux](www.npmjs.com/package/@reduxjs/toolkit):- For state management. 

_please add the one that you think i forget to include in the above list_
How to represent below data in valid json Format?
Tags: json
Published: 2022-06-17 16:43:38

Represent below data in valid json Format?

DataSplitRanges = (
    (0, 500),
    (500, 1000),
    (1000, 2000),
    (2000, 5000),
    (5000, 7000),
    (7000, 8500),
    (8500, 10000)
);

Thanks!
Useful .new domains for productivity
Tags: programming, productivity, domains
Published: 2022-06-17 16:38:38

Here are just a few of the `.new` domains I use frequently that might help you get to places quicker.

[repo.new](https://repo.new) - New Github repository
[csb.new](https://csb.new) - New Codesandbox
[figma.new](https://figma.new) - New Figma design
[docs.new](https://docs.new) - New Google doc
[sheets.new](https://sheets.new) - New Google sheet
[meet.new](https://meet.new) - New Google meeting

Checkout out the full list of `.new` domains @ https://whats.new

If you don't want to touch that pesky mouse 🐭 most browsers will let you focus the search bar with `Control+L` / `CMD+L`.
Data Analysis With Microsoft Excel: People Analytics.
Tags: tutorial, discuss, datascience, analytics
Published: 2022-06-17 16:37:55

_Hey!
Another project here! This was done using one of my favorite tools for Data Analysis, Microsoft  Excel! I still feel there’s nothing you can’t do with Excel, it’s literally one of the most powerful tools out there._

                    *****


In this project, data cleaning, exploration and visualization was done using only Microsoft excel.
Analysis was done to provide an end of the year summary of the company’s employment structure based on department, performance score, and current status.

**Data structure**: This dataset originates from the HR department of the company. The dataset contains records of employees ranging from name, gender, marital status, salary, country, state, department, recruitment source, performance score, etc.

**Data cleaning and preparation:**
The data cleaning and preparation phase was done to ensure the dataset is free from errors, outliers and duplicates.
Here is a picture of the dataset prior to cleaning:

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

  Some of the steps taken to clean the data include:


1. Removal of duplicates


2. The marital status column and gender column were edited to aid better understanding of the values in the rows. The find and replace function in Microsoft excel was used to replace the M and F in the gender column to male and female.


The marital status column was also edited; 0, 1, 2, 3, 4 was replaced with single, married, divorced and separated, respectively.

Here is a picture showing how the find and replace function was used to replace the values in the marital status column.

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



3.An additional column was also created, Employees count column. It was necessary to create this column as it would be pivotal in all the analysis carried out.
Here is a picture of the dataset after the data cleaning process.

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




**Analysis and insights:**

Analysis was done using pivot table and charts.
Slicers were also added for easy access to various niche of the dashboard.

_The dashboard provides answers to the following :_

1.Employees count by gender
2.Employees count by department 
3.Employees count by performance score
4.Employees count by current status.

Here is a picture of the dashboard:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r40tbcmucq4hhxajqmvm.jpeg)

Thank you for reading!
Rotate String
Tags: leetcode, dsa, theabbie
Published: 2022-06-17 16:30:35

Given two strings `s` and `goal`, return `true` _if and only if_ `s` _can become_ `goal` _after some number of **shifts** on_ `s`.

A **shift** on `s` consists of moving the leftmost character of `s` to the rightmost position.

*   For example, if `s = "abcde"`, then it will be `"bcdea"` after one shift.

**Example 1:**

**Input:** s = "abcde", goal = "cdeab"
**Output:** true

**Example 2:**

**Input:** s = "abcde", goal = "abced"
**Output:** false

**Constraints:**

*   `1 <= s.length, goal.length <= 100`
*   `s` and `goal` consist of lowercase English letters.

**SOLUTION:**

    class Solution:
        def rotateString(self, s: str, goal: str) -> bool:
            if len(goal) == len(s) and goal in s + s:
                return True
            return False
Browser Sync - 在不同裝置的瀏覽器上同步網頁
Published: 2022-06-17 16:22:53

- 訂閱patreon即可看到更多文章 https://www.patreon.com/wade3c
- Youtube頻道 https://www.youtube.com/c/增廣建文

---

它的設計初衷是可以幫助開發者查看網頁在不同裝置上的使用情況

這裡我們可以把它用來同步顯示html的內容，像是投影片或教學文章等等

由於他支援scroll的同步，理論上連PDF等文字檔案類型也能同步

除了CLI指另外他也能搭配grunt/ gulp做使用

## Install

```other
npm install browser-sync
```

## CLI

只要一行就可以serve目前目錄下的所有html

```xml
npx browser-sync start --server
```

執行後會給你目前運作的URL

```plaintext
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.108.1:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Serving files from: ./
```

當然port想要的話可以自訂，更多的參數設定可以參考

> [https://browsersync.io/docs/command-line](https://browsersync.io/docs/command-line)

### UI

會提供目前所有的sync狀況還有相關設定，甚至可以一次控制全部裝置

![image.png](https://res.craft.do/user/full/71bea674-0503-893e-0a7a-91e236797ff9/doc/FF93D0A5-FADA-420A-BBB3-A425DEADC175/7f81adb0-d865-4661-b99e-55c498e92d15)

## Reference

[Browsersync - Time-saving synchronised browser testing](https://browsersync.io/)
Understanding Scope In JavaScript
Tags: javascript, beginners
Published: 2022-06-16 19:28:58

**What is scope in JavaScript?**
  Every variable within JavaScript has a scope. The scope of the variable governs the variables accessibility. The accessibility of the variable is where you are able to access the variable within the JavaScript you are working with.

**Different types of scope**
        **Global Scope**
             Global scope occurs when a variable is accessible from anywhere within the file. When a variable is declared outside of any function the variable will be accessible globally.
The three ways to declare a variable (var, let, const) will all act the same when declared globally.

`let name = "foo"
//name variable can be accessed
function whatsName(){
//name variable can be accessed
}`
        **Function Scope**
             Functions all have Function Scope. Function scope means variables declared within a function are accessible only within the function. Just as with Global Scope the three ways to declare a variable (var, let, const) will all act the same when declared globally.

`function functionScope() {
  let = "variable";   // Function Scope
}`
        **Block Scope**
             Block Scope denies access to variables declared within an {} block from outside. This wasn't established until 2015. Block Scope is only possible with const and let. Var allows variables to be accessed from outside the {} block.


`{
  let variable = 2;
}
// variable can not be accessed here
{
  var variable = 2;
}
// variable can be accessed here`


**Why do you need to understand scope?**
      Understanding the scope of each variable declared within a JavaScript file lets the author of the code to be more agile and accurate. Scope can cause headaches and hang-ups. Not having a solid understanding of scope costs time. Hopefully, this blog post adds to your understanding of Scope.

source(s): [W3 Schools](https://www.w3schools.com/js/js_scope.asp)
N-Repeated Element in Size 2N Array
Tags: leetcode, dsa, theabbie
Published: 2022-06-17 16:00:42

You are given an integer array `nums` with the following properties:

*   `nums.length == 2 * n`.
*   `nums` contains `n + 1` **unique** elements.
*   Exactly one element of `nums` is repeated `n` times.

Return _the element that is repeated_ `n` _times_.

**Example 1:**

**Input:** nums = \[1,2,3,3\]
**Output:** 3

**Example 2:**

**Input:** nums = \[2,1,2,5,3,2\]
**Output:** 2

**Example 3:**

**Input:** nums = \[5,1,5,2,5,3,5,4\]
**Output:** 5

**Constraints:**

*   `2 <= n <= 5000`
*   `nums.length == 2 * n`
*   `0 <= nums[i] <= 104`
*   `nums` contains `n + 1` **unique** elements and one of them is repeated exactly `n` times.

**SOLUTION:**

    class Solution:
        def repeatedNTimes(self, nums: List[int]) -> int:
            n = len(nums)
            nums.sort()
            i = 0
            while i < n:
                ctr = 1
                while i < n - 1 and nums[i] == nums[i + 1]:
                    ctr += 1
                    i += 1
                i += 1
                if 2 * ctr == n:
                    return nums[i - 1]
First real contact with Tailwind.
Tags: tailwindcss, beginners, tutorial, vscode
Published: 2022-06-17 15:41:40

Are you kind of a new webdev? Are you tired off the mess that is almost any big css file? Fear not, because I have the perfect thing for you and it's called **Tailwindcss**. Now, I can understand your apprehension. Because this thing that I'm talking about still has css in the name, but fear not. If you go down the **Tailwindcss** route then you will never have to make a separate stylesheet again*. And this tutorial will help you get started.

## How to get started.

1. First type this in your terminal.
```
npm install -D tailwindcss
```
2. Then this, also in terminal.

```
npx tailwindcss init
```
3. You'll notice a file called app.css, put this in it.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
4. Put this in terminal.
```
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
```
5. And voila.

## Dante, I have no idea what I just did.
Oh yeah, I guess I forgot to elaborate. But fear not, because Tailwind is super intuitive once you start working with it. And the only thing you need to know about it before starting is that you influence styling with the class parameter.

## Now, here is an example.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbflnxrcoes5lqphnls8.png)
 As you can see, this link has a couple of styling attributes. A lot of them are pretty clear, like: font-semibold, text-sm, border, etc. Some require a little explanation. Like px-4, this means that this element will have 4 padding on the x-axis. Also one "unit" in tailwind equals 0.25 rem. So px-4 means that the element has one rem of padding left and right.

#### Last note
Tailwind has good documentation and if you like working with it then I recommend that you check it out here: https://tailwindcss.com/docs/utility-first

Now, this concludes my tailwind starter tutorial. I hope anybody reading this was able to take something away from this. And I wish anybody going down the coding path the best of luck
Wildcard Matching
Tags: leetcode, dsa, theabbie
Published: 2022-06-17 15:30:40

Given an input string (`s`) and a pattern (`p`), implement wildcard pattern matching with support for `'?'` and `'*'` where:

*   `'?'` Matches any single character.
*   `'*'` Matches any sequence of characters (including the empty sequence).

The matching should cover the **entire** input string (not partial).

**Example 1:**

**Input:** s = "aa", p = "a"
**Output:** false
**Explanation:** "a" does not match the entire string "aa".

**Example 2:**

**Input:** s = "aa", p = "\*"
**Output:** true
**Explanation:** '\*' matches any sequence.

**Example 3:**

**Input:** s = "cb", p = "?a"
**Output:** false
**Explanation:** '?' matches 'c', but the second letter is 'a', which does not match 'b'.

**Constraints:**

*   `0 <= s.length, p.length <= 2000`
*   `s` contains only lowercase English letters.
*   `p` contains only lowercase English letters, `'?'` or `'*'`.

**SOLUTION:**

    class Solution:
        def isSame(self, a, b):
            if a == "?" or b == "?":
                return True
            return a == b
        
        def isMatchRec(self, s, p, i, j, m, n):
            if j >= n:
                return i >= m
            if i >= m:
                if j >= n:
                    return True
            if (i, j) in self.cache:
                return self.cache[(i, j)]
            if i >= m:    
                res = p[j] == "*" and self.isMatchRec(s, p, i, j + 1, m, n)
                self.cache[(i, j)] = res
                return res
            if p[j] == "*":
                res = self.isMatchRec(s, p, i, j + 1, m, n) or self.isMatchRec(s, p, i + 1, j, m, n)
                self.cache[(i, j)] = res
                return res
            res = self.isSame(s[i], p[j]) and self.isMatchRec(s, p, i + 1, j + 1, m, n)
            self.cache[(i, j)] = res
            return res
        
        def isMatch(self, s: str, p: str) -> bool:
            m = len(s)
            n = len(p)
            self.cache = {}
            return self.isMatchRec(s, p, 0, 0, m, n)
How to use Luos with Arduino? Step 1 - Setup the IDE
Tags: arduino, opensource, microservices, luos
Published: 2022-06-17 15:26:23

In this video, you'll discover how to set up and use Luos with Arduino IDE.

{% embed https://www.youtube.com/embed/Y-rUEB65EWw %}

This integration will allow you to create a Luos network by interconnecting Arduino boards and/or other boards of different brands without problems. Luos manages intercompatibility.
Storyblok/Svelte - now with TypeScript support 🎉
Tags: svelte, storyblok, typescript, dx
Published: 2022-06-17 15:23:19

We are super excited to announce that over the last couple of days, we put our heads together to improve our Svelte SDK. We added TypeScript to the library to make sure you’ll get an even better experience working with our Svelte SDK 🎉 

➡️ Want to check out how to connect Storyblok to your SvelteKit project right away? Follow this [5 minute tutorial](https://www.storyblok.com/tp/add-a-headless-cms-to-svelte-in-5-minutes ).

➡️ Curious to see the TS support in action? This way, please: [Storyblok Svelte & TS SDK Demo](https://stackblitz.com/edit/svelte-ts-sdk-demo). 

Now, when using [storyblok/svelte](https://github.com/storyblok/storyblok-svelte) in your own project, you get auto-completion, static typing & warnings in case something doesn’t add up (even if you are not using TypeScript yourself! 👀)

 Check it out yourself: 

![animation of the suggestions you get for different parameters on the storyblokinit function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mawhu2dv0tm1mt5yu80c.gif)
In `main.ts` we can now get suggestions for the different parameters of the `storyblokInit()` and will get an error in case you are adding the components in an incorrect format. 

![animation of adding lang="ts" to the App.svelte script tag and receiving static typings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0fp9bj5qc62rwaosd2p.gif)

Adding the `lang=“ts”` to your .svelte files gives your static typing and will suggest all the methods available for different functions. 

![Animation of adding TypeScript to the grid.svelte and getting errors when failing to pass the block attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7jvdt8n4team1qg6mjo.gif)

Even if you forget to pass on the `{blok}` attribute, you will get a friendly reminder. 

Stay tuned - we are planning to roll out TypeScript support for all our other SDKs as well 🎉

By the way, if you are looking for some guidance on how to integrate TypesSript in your Svelte project, check out [this article in their docs](https://svelte.dev/blog/svelte-and-typescript#Adding_TypeScript_to_an_existing_project ). 

And of course, we are curious to know what you think! Let us know how you like it and what would make it even better! ⬇️
Appwrite Community Report #10
Published: 2022-06-17 15:21:31

Hello from team Appwrite!👋


How has been your week? For us, it has been quite productive as we work towards more integrations and features! 👀

**TLDR;** We have some giveaways ongoing, some features added, community contributions, resources and more!

---

##📢  What’s new 

- Appwrite just crossed 90,000 followers on Twitter and we are doing a giveaway! Participate now to win Appwrite hoodies🤩
{% embed https://twitter.com/appwrite/status/1536388858958557184?s=20&t=WYXJormODeiuzYyC-Otzfg %}
- Are you a maintainer or know a maintainer? Tell them about [OSS Fund](https://appwrite.io/oss-fund) - a year long fund to support open-source project maintainers. 

---

## ✅ Issues solved

Here’s to making Appwrite better everyday! Issues we have worked on this week:

- GitLab OAuth now allows self hosted instances
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3366)

- Addition of DailyMotion OAuth Provider by community member [Bishwajeet Parhi](https://github.com/2002Bishwajeet)
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3371)
- Advancements towards upgrading the entire Appwrite stack to Docker Compose V2
🔗[Link to PR](https://github.com/appwrite/appwrite/pull/3362)
- Files can now be uploaded from n8n to Appwrite Storage
🔗[Link to PR](https://github.com/appwrite/appwrite/issues/3313#issuecomment-1156382033)

---

##⚒️ What we’re currently working on

- Working to increase the maximum size of a query. 
- Improving Hashing API
- Adding Vimeo as OAuth provider
- Reviewing OSS Fund applications, getting closer to announcing the first maintainer we sponsor

---

##🗣 Discussions

Community member [Maxime Barthomeuf](https://github.com/Maxbrt18), suggested adding Puppeteer support, what do you think about it?
🔗 [Join the discussion here](https://github.com/appwrite/appwrite/discussions/3389)

---

##📘 Resources

- Initiate a cloud function in Appwrite with just [one command]
(https://appwrite.io/docs/functions#gettingStarted).
- Learn about managing project in Appwrite
{% embed https://www.youtube.com/watch?v=QvJ3_CVeZmk %}
- Take up the 30 days learning challenge to [get started with Appwrite]
(https://30days.appwrite.io/).
How To Access PostgreSQL Globally in Windows
Tags: postgres, programming, sql, tutorial
Published: 2022-06-17 15:18:24

If you are getting the error below after installing PostgreSQL don’t panic, just follow along with this tutorial and it’s gonna be solved.

![Header image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btk2br5dyhryr9xiskof.png)

This tutorial is simplified to help everyone to know how to add PostgreSQL to user or system variable(path) which can be accessed globally with minimum stress.

Let’s begin!

Normally, you will have to navigate to your PostgreSQL bin directory to copy the path which takes a while. Instead, I will provide the path for you to make everything quick and easy.

> Path to postgresql bin directory — 

```
C:\Program Files\PostgreSQL\14\bin
```

> **_NB: Change \14\ to the version of Postgres you have installed_**

**Step 1**

Copy the path to your Postgres bin directory provided above.

**Step 2**

Press the windows start button and search for `env` then click `open`

![Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdtitgc18ao00todhadx.png)

**Step 3**

Click on `Environment Variables`

![env](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/034b58lvb7ghrmuxxser.png)

**Step 4**

Double click on `Path`

![Path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12okwbyimbihuks1k5gf.png)

**Step 5**

Click on `New`

![Paste path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kffgqpux44os9q1ix20k.png)

**Step 6**

Paste the `[PostgreSQL bin](C:\Program Files\PostgreSQL\14\bin)` path you copied. Then click `ok` recursively to close all windows


![Paste path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jftd7taf4f0egus593kg.png)

**Step 7**

Close all instances of your terminal then reopen it.

> **_NB: If you are using terminals in VS Code Editor, you will have to restart VS Code Editor for the changes to take effect_**

![Postgres Accessed Globally](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgtvshscbetsnqvhzj70.png)

**Step 8**

You are done

And now you can log in to `Postgres` without using the default `psql shell`.

Hope this solves your issue about using `Postgres` globally.

Thank You