teleren/devto huggingface dataset:
I built a dev.to stats card generator (followers & views count)
Tags: opensource, node, javascript, community
Published: 2022-10-25 15:59:08

## Why

I like to share my achievements and having more than 30k views (at the time of writing) on my dev.to blog is a good achievement. Also, I want you to know that my content is helpful and trustworthy, because if it is not then why other people follow me and read my articles!

Dev.to doesn't display followers count or views count so I built a Node.js server that scrapes my followers and views count and renders an SVG image card to display them in a cool way.

<a href="https://github.com/Amr2812/devto-stats-card#readme" target="_blank">Here's an example embed in the GitHub repository.</a>

If you want to see it get updated <a href="https://dev.to/amrelmohamady" target="_blank">follow me or view one of my articles</a> then simply refresh.

## How

1. The Node.js server accepts an HTTP request
2. It fetches my dashboard using Axios (HTTP Client)
3. It gets the views and followers count using cheerio (HTML Parser)
4. It puts the values in an already designed SVG template (by draw.io)
5. Sends the generated SVG back to the client to display the SVG image

I used SVG because the It is actually some XML code describing how it looks so I can easily embed my values in the text tags without doing heavy image processing.

When I fetch my dashboard I use an authentication cookie which I got from the console and It will be expired next year if I didn't visit dev.to or no one visited a website that displays my stats card so, no need to automate a login workflow.

It is open source so you can fork the repo and deploy your own server from [https://github.com/Amr2812/devto-stats-card](https://github.com/Amr2812/devto-stats-card).
You will need to rename `.env.sample` file to `.env` and replace the cookie header constant to your own one and in the `config.js` file you will need to replace the blog URL constant to your own one.

**Star the project If you like it ⭐**

---

If you like the article you can join my [newsletter](https://amrelmohamady.hashnode.dev/newsletter) and follow me.

You can also buy me a coffee that would help me grow as an open source developer :)

<a href="https://www.buymeacoffee.com/amrelmohamady" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
Get your SQL Server dev environment ready in one click
Tags: database, vscode, azure
Published: 2022-10-25 15:35:16

Setting up a development environment is – most of the time – cumbersome. Technologies like Docker and Visual Studio Code Remote Containers – and GitHub Codespaces – really help a lot. 
We’ve just released a new sample, [Try Out Development Containers: SQL Server & Azure SQL](https://github.com/microsoft/vscode-remote-try-sqlserver) that get you ready to work on your databases projects, just in one click!

## One-click to SQL Server development

If you click on the button below, you will open an instance of Visual Studio Code – if it’s installed – spin up a new SQL server instance and automatically add relevant Visual Studio Code extensions.

[![Open in Remote - Containers](https://img.shields.io/static/v1?label=Remote%20-%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/vscode-remote-try-sqlserver)


![Visual Studio Code opened on the Try SQL CMD project](https://www.maneu.net/images/posts/2022/data/sql-server-remote-containers-2.png)

When you have opened this template, you can directly write SQL files, execute them either through the `SQLCMD` CLI or use the SQL Server extension to visualize your database right from the Visual Studio Code interface. You have everything ready to work on your database projects.

## Easily deploy database schema changes

This sample uses the SQL Database Projects extension. This extension allows you to organize your SQL files into a [_database project_](https://marketplace.visualstudio.com/items?itemName=ms-mssql.sql-database-projects-vscode). This extension allows you to: 

-	Create a database schema from a Swagger or Open API definition
-	Compare your database to your database numbers
-	Deploy your database project to an Azure SQL database or a SQL Server instance


![Visual Studio Code UI to publish schema changes to a database](https://www.maneu.net/images/posts/2022/data/sql-server-remote-containers-3.png)

## Use it for learning or for your next project

You can use this [Dev Container quick start](https://github.com/microsoft/vscode-remote-try-sqlserver) simply to learn how to use Azure SQL or SQL Server. But you can also simply [**Use this Template**](https://github.com/microsoft/vscode-remote-try-sqlserver/generate) within GitHub to create your next database project and get everything already setup for you.
My 5 Most Used VS Code Hotkeys And Why
Tags: programming, vscode, beginners
Published: 2022-10-25 15:33:13

VS Code is excellent software. It suits web developers amazingly.

The codebase I currently work on is larger than all my personal projects combined. The mouse can only get you so far, and rather slowly. These are my most used VS Code hotkeys as a Beginner Software Developer (and the reason behind each choice).

## CTRL + SHIFT + F

This looks through your directory for any string. It can be a function, variable, etc...

### Why?

Moving through a professional codebase as a beginner is intimidating. There is so much information flying around that being able to look everywhere at once will allow you to map behaviors more easily.

## CTRL + P

Similarly, this hotkey allows to search for filenames, using [fuzzy search](https://www.techtarget.com/whatis/definition/fuzzy-search). Also a must for traversing large projects.

### Why?

There are files that we open regularly, such as READMEs. Also, in React we can have a component, content and template architecture. With similar naming for these files, you can find all them at once.

## CTRL + SHIFT + L

This hotkey surprised me. I had been using CTRL + D repeatedly to select occurences of a string in the current file. CTRL + SHIFT + L does that immediately, for _all_ ocurrences.

### Why?

Makes it ultra-fast to refactor, specially variable names (descriptive variables FTW).

## ALT + UP/DOWN

Forget cutting, removing empty spaces, pasting and adding empty lines back: by using this, you can manually move any amount of lines up or down in your file seamlessly.

### Why?

Want to switch the order of your components just to see what it looks like? This is the way to go!

## CTRL + SHIFT + K

This removes the selected lines. As a beginner, I felt frightened to remove anything from the codebase. This hotkey helped me overcome that fear (with some obligatory CTRL + Z to follow).

### Why?

A great lesson I learned is that removing code is a shorter path to understanding functionality than adding. CTRL + SHIFT + K is our fastest tool for that.

Here is a [useful pdf](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf) with many other keyboard shortcuts to increase your productivity.
Modularize Your React Project!
Tags: react, modular, javascript
Published: 2022-10-25 07:23:47

If you do keep up with current events, you should know that functional programming is a topic of great interest in the javascript community. Devs want to build more predictable applications by composing functions and assembling components as single modules [entities] where each piece has its own responsibility. It’s the **utmost modular model.**

When it comes down to handling large applications with complex and wide codebases, it often involves teams of developers.

**How do you handle such wide codebases?**

_Ladies and gentlemen, I present the solution:_
Structure your codebase around the concept of modules. In this case, each module will have its own individual responsibilities. This approach is not new, but it's quite simple and effective. It involves breaking down your application into smaller, single-purpose business functions.

I've had the chance to work on a couple of large codebase projects and I strongly believe this is the best way to develop maintainable React applications.
🗞 Rapyd Developer Newsletter: October, 2022
Tags: fintech, payments
Published: 2022-10-25 15:22:00


[**Complete this survey**](https://rapyd.sjc1.qualtrics.com/jfe/form/SV_6sVd0n93fIs2Y3c) and share your input to help improve the Rapyd Developer Community. 

Hi everyone, 

Here is our October newsletter with notable updates and news from around the Rapyd global developer community. 

Leverage fintech to help build an emerging tool to impact climate change. [**Sign up and submit**](https://rapyd.hackerearth.com) your project for the hackathon now until Thursday, December 8 @ 5:00 pm EDT. 

Be sure and check out our [**brand makeover**](https://rapyd.net/developers).

## Changelog 💻
You can now [**accept SEPA Direct Debit payments**](https://docs.rapyd.net/build-with-rapyd/docs/sepa-direct-debit) through the Hosted Checkout Page and the Toolkit Integration embedded into your website.

Italian and Turkish translation support has been added to all hosted pages. 

The **Client Portal** has been updated to include new assets aligned with Rapyd’s new design and brand. Pages and navigation will remain the same throughout the dashboard.

---

[**Join 50K+ Devs talking FinTech.** 🤓](https://community.rapyd.net)

---

## Discover 🔍
[**How Would You Define API First?**](https://community.rapyd.net/t/how-would-do-you-define-api-first/22506) `/community`
Learn and contribute your thoughts on what it means to be an API-first company.

[**Rapyd Bytes: Webhooks**](https://youtu.be/MmzKyF6WNFg5) `/videos`
Learn how to generate a webhook using the Rapyd API.

[**Hackathon Projects Overview**](https://community.rapyd.net/t/live-hackathon-projects-built-on-the-rapyd-api/57924) `/community`
Check out different payment projects built on the Rapyd API.

 
[**Discord Tech Talk: Build a Climate Fintech App**](https://community.rapyd.net/t/come-learn-and-ask-your-climate-fintech-hackathon-questions/57900/3) `/audio`
Hear discussions on use cases of building a Climate Fintech App. 

---

Want an email of Rapyd Developer Newsletters? ⏩
Click [**here**](https://go.rapyd.net/dev-newsletter) to subscribe.

---

###### Rapyd is an API first, developer focused company. The Rapyd Dev Community makes it easier to get started building payment and fintech experiences that makes global commerce possible.
Tune Performance using MySQL Query EXPLAIN Plan
Tags: mysql, database, queryoptimization
Published: 2022-10-25 15:15:58

---
title: Tune Performance using MySQL Query EXPLAIN Plan
published: true
description: The EXPLAIN plan is a useful statement when you need to optimize MySQL queries.
tags: #mysql #databases #queryoptimization 
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4eq8zm2tqx7krb8u9lqa.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-25 15:12 +0000
---
The MySQL EXPLAIN plan can clarify how MySQL queries are executed and which indexing methods are best for efficient query execution. In this article, we'll look at how to optimize MySQL queries using the MySQL EXPLAIN plan - https://www.devart.com/dbforge/mysql/studio/explain-plan.html
Implementing a Docusaurus Feature for my SSG
Tags: webdev, javascript, github
Published: 2022-10-25 14:44:02

> Docusaurus

I've never used [docusaurus](https://docusaurus.io/) before, nor have I ever heard of it. However, setting up a docusaurus website actually made me realize how easy it is to build a website when using it compared to making one your own. The simplicity of the code, and how easy it is to learn makes me want to recommend it to people who doesn't want to spend too much time starting up a documentation website.

> Adding Feature for my SSG

When I was setting up a docusaurus project, I never realized how I took having a "sidebar" for granted. Creating it was simple, you already have a template given to you by the developers when you establish your project. This template already helps you in terms of having you view what a [sidebar](https://docusaurus.io/docs/sidebar) would look like for the website. Learning how to add new sections for the sidebar wasn't all that hard either, and by the end I finally understood how all of it works.

I thought to myself "I don't think it'll be that hard to implement a 'simple' sidebar." How wrong I was.
I first thought of creating an index file that will be used for cycling through each website. It did work, and I had
a basic, but functional sidebar for my `dist` directory. However, that's when I realized that when clicking one of the links, the sidebar disappears. When I noticed the problem I decided to create a new function in my project called `createNavBarDiv`, which will be inserted into the string when create a new `.html` file. There are also some `css` and one `script` that were used, but they only play in terms of the looks of the sidebar so I won't go through with them. Now that all of the files are connected via a sidebar, I can now go back to the index file and make it as the "home" file that contains all the links for all files as a card.

> Next Step

The sidebar works perfectly as I intended, but it still isn't perfect in terms of the appearance, and the code still needs some condensing. The appearance of the `index.html` is just not that great (it's functional, but not amazing), and the sidebar isn't too much of a problem, but I think it can look much cleaner that it currently does.
Hiring Coders Semi-Finals
Tags: hiringcoders, vtexio, lowcode, bootcamp
Published: 2022-10-25 12:54:07

So, continuing the Bootcamp story that brought me to this point. The challenge started with 10,000 people on a full-stack learning path, the first 50 days were front-end and back-end development, with assessments and tests that grade each student, and the first 3,000 were able to continue in the second phase. In the second phase, we were introduced to Vtex IO, a low code platform to create online stores with more agility and flexibility, after 3 weeks the 300 students with the best grades passed to the semifinals, which was a team phase, where the team is creating a  virtual wallet in a Vtex store. That was the core part of the challenge for me, as we had the chance to experience teamwork to develop something real, at this stage I had the experience of pushing to the team's Github repository and dealing with the conflicts caused by that push, dealing with the division of tasks and responsibilities, put into practice the learning in TypeScript and React that was presented in the second phase and share a goal with the faculties. At this stage we got the second place which gives us the opportunity to go to the final.

The repository for this phase is here:

https://github.com/AlbertoVictorRebello/hiring-coders-fase3-dreamscape-grupo2

In the next post, i'll talk about the final phase.
Heroku Postgres DB to Railway Postgres DB Migration(For Django Apps in Heroku using Postgres DB addon )
Tags: heroku, railway, django, postgres
Published: 2022-10-25 14:38:31

Caught off-guard by Heroku's discontinuing of the free Heroku Dynos and Free Heroku Postgres starting November 28th, 2022? No need to worry. This post will detail how to migrate the data from your Heroku Postgres addon to Railway which is a great alternative to Heroku. The following steps will help towards facilitating a seamless migration of your data between the two platforms. 

I. Ensure that you have postgres installed on your machine

II. Add the postgres bin directory to your machine's environment variables to access postgress on your windows CLI

III. Open a new CMD and confirm that postgres is accessible to your CLI through the following command: 

```
psql --version
```
IV. Log in to heroku and click on your app's postgres DB addon. 

V. Click the settings tab on the addon and click on the database credentials link to reveal your details.

VI. Now on your CMD window, connect to your heroku postgres DB using the following command. (Input the host, port, User and Data as they appear in the Heroku Postgres adon Database Credentials):

```
psql -h <host> -p <port> -U <User> -d <Database>
```

VII. You will be prompted to input a password. Use the password provided Heroku Postgres adon Database Credentials. 

VIII. Now you are succesfully connected to your Heroku postgres DB. You can carry out any query to confirm this. For instance, type `\dt` on your CMD to see all the tables within the DB (In the event you receive an error prompt, use the following command to encode the output appropriatrely:  

```
set client_encoding='utf-8'
```

).

IX. Next, we shall create a dump file to temporarily hold the data from our Heroku postgres DB as is currently. Open a new CMD tab and input the following command:

```
pg_dump -h <host> -d <Database> -U <User> -W -Ft > filename.dump
```

(The filename can be anything really. Just ensure that you have the .dump file extension to the name you choose).

X. Now, create an account on Railway.app and create a project. Type **ctrl+k** In your project environment to bring up the help tab and type postgresql. Click on the postgresql service to create a new postgres DB instance on Railway.
 
XI. On the variables tab of the Railway Postgres instance are the DB credentials. 

XII. Use the following command to transfer the DB data in the dump file we created in step 9 to Railway (Use the variables in step XI): 

```
pg_restore -U <PGUSER> -h <PGHOST> -p <PGPORT> -W -Ft -d <PGDATABASE> filename.dump
```

XIII. These steps shall help you successfully migrate your data from Heroku Postgress to your Railway Postgres instance.
Why Schema Markups are important for your website and how it helps in Google rankings
Tags: seo, wordpress, webdev, design
Published: 2022-10-25 14:28:11

In spite of being among the most powerful SEO tools, Schema Markups are still not used by webmasters as much as they should be.

Simply put, Schema markup is a form of microdata that is added 
to your web page in order to enhance your page's description in for search engines.

In other words, Schema is a language used by web pages to communicate with search engines and make it clear to the search engines what the page is about.

So it's really important to use Schema Markups to make your page more relevant in the eyes of search engines for the keyword or search term that you are targeting. And it is well known that the relevance of your page is one of the most important factors that search engines consider while ranking a page for targeted keywords.
In order to know more about Schema Markups and other SEO-related tips, get in touch by clicking [here](https://theurbanmoon.com/).
[vite] Internal server error: Cannot read properties of undefined (reading 'length') for Tailwind and PostCSS.
Tags: tailwindcss, postcss, vite, config
Published: 2022-10-25 14:21:53

_Disclaimer: this is not a fix but rather a quick hack, so that, for instance, you might continue building._ 

**Problem:** You've just installed TailwindCSS but you get the error below as well as some indication that it might related to the PostCSS config.

```
$ [postcss] Cannot read properties of undefined (reading 'config')
$ [vite] Internal server error: [postcss] Cannot read properties of undefined (reading 'config')
```

**Quick Hack:** Copy the content of _module.export_ in the _tailwind.config.js_ file into the value of the _tailwindcss_ property in the _postcss.config.js_ file. Your final result should look like this:

```
./postcss.config.js

1  module.exports = {
2   plugins: {
3    tailwindcss: {
4       content: [
5         "./index.html",
6         "./src/**/*.{vue,js,ts,jsx,tsx}",
7       ],
8       theme: {
9         extend: {},
10      },
11      plugins: [
12        require('@tailwindcss/forms'),
13      ],
14    },
15    autoprefixer: {},
16  },
17 }

```

That should do the hack. Cheers.
How to handle login forms in React? Including storing user sessions and authentication
Tags: react, javascript, mongodb, webdev
Published: 2022-10-25 13:57:31

I am working on a project and I've created a login page using React. I want it to store user sessions, so the user is logged in even after refreshing the page. Also, I want to authenticate the user from the MongoDB database.

Suggest some references or resources that I could use for React form handling
[Grind 169] 8. Binary Search
Tags: go, leetcode, grind169
Published: 2022-10-25 13:56:14

Problem Link: https://leetcode.com/problems/binary-search/

Solution:

```go
func search(nums []int, target int) int {
    
    var l, r = 0, len(nums)-1
    
    for l <= r {
        
        var mid = (l + r) / 2
        
        if nums[mid] == target {
            return mid
        }
        
        if target > nums[mid] {
           l = mid + 1
        } else {
           r = mid - 1
        }
    }
    
    return -1
}
```
[Grind 169] 7. Valid Anagram
Published: 2022-10-25 13:54:35

Problem Link: https://leetcode.com/problems/valid-anagram/

Solution:

```go
func isAnagram(s string, t string) bool {
    var n1 = len(s)
    var n2 = len(t)
    
    if n1 != n2 {
        return false
    }
    
    var data1 = make(map[byte]int)
    var data2 = make(map[byte]int)
    
    for i := 0; i < n1; i++ {
        var c1 = s[i]
        var c2 = t[i]
        
        _, ok1 := data1[c1]
        _, ok2 := data2[c2]
        
        if ok1 {
            data1[c1]++
        } else {
            data1[c1] = 1
        }
        
        if ok2 {
            data2[c2]++
        } else {
            data2[c2] = 1
        }
    }
    
    for k := range data1 {
        if data1[k] != data2[k] {
           return false 
        }
    }
    
    return true
}
```
Would you like pay-per-visit web hosting?
Tags: discuss, hosting, webdev, pricing
Published: 2022-10-25 13:51:37

The market standard in web hosting is this: Your website runs on shared resources on a more or less packed server & your priority on the machine and number of parallel processes allowed depends on how much you pay.

If you have a cheap plan, **performance can be low and traffic peaks can be cut off**.

What if, in each hosting plan...

- Your website runs on a containerized setup that gives you **all the resources you need** to cover huge traffic peaks

- Every project receives the **same prioritization** on the server

- You'll get an **awesome time to first byte**, no matter what

- You still pay **typical shared hosting prices**

- But: Your plan has a **fixed number of monthly visits**, and you need to pay per visits when it is reached

Would you like that? What would be your concerns?
[Grind 169] 6. Invert Binary Tree
Published: 2022-10-25 13:51:05

Dedicated to [mxcl](https://twitter.com/mxcl), Creator of `brew` :)


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


Problem Link: https://leetcode.com/problems/invert-binary-tree/

Solution:

```go
/**
 * Definition for a binary tree node.
 * type TreeNode struct {
 *     Val int
 *     Left *TreeNode
 *     Right *TreeNode
 * }
 */
func invertTree(root *TreeNode) *TreeNode {
    
    if root == nil {
        return nil
    }
    
    var temp = root.Left
    root.Left = root.Right
    root.Right = temp
    
    invertTree(root.Left)
    invertTree(root.Right)
    
    return root
}
```