teleren/devto huggingface dataset:
How to use ES6+ features in nodejs
Tags: javascript, webdev, node, beginners
Published: 2021-10-29 17:06:49

This article is about how to use `es6+` in nodejs project 

#### Initialising project with npm
```bash
npm init -y
```

#### Installing babel plugins for es6+ features
```bash
npm i -D @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/preset-env 
```

#### Adding babel support for project
```bash
touch .babelrc
```

Paste the following content in `.babelrc`
```javscript
{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-proposal-class-properties", "@babel/transform-runtime"]
}

```

Babel is not a compiler or interpreter it is just a transpiler so we have to transpile `es6` to `es5` using babel then we have to execute that transpiled code. For that we can write npm script.

Add the following script to `package.json`
```bash
"build": "babel src -d dist",
"start": "npm run build && node dist"
```

Now create `src` folder and start writing `es6+` code inside that folder. Run `npm start` it will create `dist` folder inside that folder we can find transpiled code.


Cheers!!!
You can now extend your support by buying me a Coffee.

<a href="https://www.buymeacoffee.com/sakethk" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
Inglés en entrevistas? Mirá 👇🏻
Tags: beginners, programming, career, spanish
Published: 2021-10-29 16:49:36

Este es un pequeño post para entender qué significan los niveles de inglés que aparecen en las búsquedas de IT. Cuando se abre un nuevo puesto de trabajo y quieren contratar a un nuevo desarrollador, el primer filtro es el idioma (inglés). El nivel de inglés que enseñan las escuelas no es suficiente a veces; por lo que es difícil encontrar a alguien que tenga un buen nivel de inglés y habilidades técnicas que no haya ido a una academia/profe particular.

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

```
Vamos por partes
```

El CFRL* es una guía estándar que sirve para medir la comprensión que tiene una persona, de un determinado idioma. Se distinguen en:
Interpretar
Hablar 
Escribir

Esta guía se divide en 7 niveles:

**Principiante**: Se supone que no hay estudios previos de inglés.

**A1 (Elemental)**: Puedes desenvolverte en actividades cotidianas muy limitadas.

**A2 (Intermedio bajo)**: Puedes desenvolverte en actividades cotidianas.Todavía no tienes suficiente conocimiento para enfrentarte solo a algunos problemas, pero puedes manejar interacciones simples.

**B1(Intermedio)**: Puedes hacer un uso eficaz e independiente de la lengua en situaciones familiares. Todavía hay muchos errores y carencias de vocabulario, pero puedes comunicar y comprender mensajes generales en la mayoría de los contextos. 

**B2(Intermedio Superior)**: Puedes enfrentarte a tareas sencillas. Te desenvuelves con bastante facilidad en situaciones bastante complejas y exigentes. Hay carencias de vocabulario en situaciones complejas, pero la comunicación se restablece con facilidad.

**C1 (Avanzado)**: Puedes ocuparte de tareas de trabajo complejas. Tienes un excelente dominio del idioma, con fluidez y precisión constantes y bien organizado. Te enfrentas bien a situaciones exigentes y complejas. 

**C2 (Competencia)**: Puedes utilizar el idioma con fluidez, precisión y adecuación. Has alcanzado un nivel excepcional de fluidez que se corresponde con el de un hablante nativo.

![meme 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76ft1igl1q0l0kybuj7b.jpg)

 Así que, si estás empezando tu carrera de desarrollador, o si tienes un tiempo libre, ¡aprende inglés! Espero te sirva el post  😁
2021 New GitHub profile readme template.
Published: 2021-10-29 16:38:31

Hi guys, I have made an GitHub profile readme. If you're interested in it please check it out
Decorate the GitHub Profile most effectively. GitHub HR Profile Template most effectively show your development skills to recruiters.

![alt text](https://scontent-ssn1-1.xx.fbcdn.net/v/t1.6435-9/248604563_403856607869153_7981656207480907734_n.jpg?_nc_cat=102&ccb=1-5&_nc_sid=730e14&_nc_ohc=-jZc3SxvfUcAX8Cy2l9&_nc_ht=scontent-ssn1-1.xx&oh=71292d9a79f50283704d97b665134991&oe=61A054DA "GitHub HR Profile")

https://githubprofile.com

 * My top 3 programming languages
 * My tech stack
 * My contribution to open source and ranking of contributors

Use in the following cases

 * When to submit GitHub to your company
 * When to include GitHub in your resume
 * When to use GitHub for your brand
 * When to show your skills to GitHub visitors

Try it for yourself! Thank you very much :)
Hotwire with StimulusReflex
Tags: rails, hotwire, stimulusreflex
Published: 2021-10-29 16:09:36

Here's a deck of slides I made for a talk I gave at the viennarb meetup. Enjoy!

{% speakerdeck 7264e1d6eaf04067af1fdb4afca5cad1 %}

And here’s the video of the talk:

{% youtube fdqOHazPdmA %}
Use Hydrator in Laravel Doctrine
Tags: laravel, doctrine, doctrinehydrator
Published: 2021-10-29 16:09:03

Have you ever used Doctrine in Laravel? If so, this should be familier to you.
```
/** @ORM\Entity **/
class Book {
    
    /** @ORM\Column(type="string") **/
    protected $title;

    public function getTitle() {
        return $this->title;
    }

    public function setTitle($title) {
        $this->title = $title;
    }
}
```
Just imagine an entity with more properties and in order of that, more setter methods. calling all of them one by one to store a new entity would be a headache.
Wouldn't it be nice if there was something that would handle it based on the keys of the data array that you have? The good news is that it's already done! but there is a lack of documentation in for using it in Laravel.
## Install Requirements 
First of all you should install doctrine in your laravel project. It's well explained [here](http://www.laraveldoctrine.org/). Then install doctrine hydrator
```
composer require doctrine/doctrine-laminas-hydrator
```
if you want to read more about it, checkout the [documentation](https://github.com/doctrine/doctrine-laminas-hydrator)
## Configure Hydrator
Add doctrine config file to configs directory if you haven't already
```
php artisan vendor:publish --tag="config"
```
In `config\doctrine.php` register hydrator inside `custom_hydration_modes` key
```
'custom_hydration_modes'     => [
    'default' => \Doctrine\Laminas\Hydrator\DoctrineObject::class,
],
```
## How to use it
Now imagine a BookController
```
class BookController {

    protected $em;

    public function __constructor(EntityManagerInterface $em) 
    {
        $this->em = $em;
    }

    public function store(Request $request) {
        // It will find the proper setter method based on the key and passes the value to that
        $book = $this->em->newHydrator('default')->hydrate($request->all(), new Book);
        $this->em->persist($book);
        $this->em->flush();

        // whatever ...
    }
}
```
That's it!
It's much cleaner than calling setter methods one by one and calling new setter methods after adding new columns to our entities.
Downloading data from Render.com's persistent Redis service
Tags: redis, render
Published: 2021-10-29 15:57:27

Render.com [doesn't yet have a managed Redis](https://feedback.render.com/features/p/managed-redis) offering, but we can still deploy a [persistent Redis instance as a Private Service](https://render-web.onrender.com/docs/deploy-redis) with an attached disk to store its data.  
  
The problem is, Render's private services are not exposed to the internet, so how do we download the Redis data if we want to back it up, or migrate it somewhere else or whatever?  
  
[This Render article](https://render-web.onrender.com/docs/disks#transferring-files) describes how we can get our hands on the data stored on attached disks using `magic_wormhole`. However, the Redis Docker image runs [Alpine Linux](https://alpinelinux.org); and to install `magic_wormhole` we need `apt` which isn't available on this Linux distribution.  
  
There is a workaround to install it using a long and complicated command, that I don't understand. Go to your Redis service from your Render dashboard and select the **Shell** tab.  
  
Then run this command (it will take a few minutes to complete):  
  
```shell
apk add build-base python3-dev libffi-dev openssl-dev py3-pip && pip3 install --upgrade pip && pip3 install magic-wormhole
```
  
Ensure you have `magic_wormhole` installed on your local machine as well. Follow the instructions for your OS [on this page](https://magic-wormhole.readthedocs.io/en/latest/welcome.html).  
  
Once the installation in both places is complete, run the following command in the Render dashboard:  
  
```shell
wormhole send /var/lib/redis/appendonly.eof
```
  
`magic_wormhole` will then go away and do its magic and give you a command to run on your local machine. Run that once you have it and voila, you have the Redis data file from Render on your local machine to do with as you please!

_This article was originally published on [my blog](https://binarysolo.chapter24.blog/downloading-data-from-render-com-s-persistent-redis-service/)_
Using jsPDF, html2Canvas, and Vue to generate PDF's.
Tags: javascript, vue, programming, tutorial
Published: 2021-10-29 15:50:00

If you've ever used jsPDF and html2canvas with Vue to convert html to a PDF file then you probably understand the headaches that you run into when trying to achieve the proper size and resolution of the PDF. In this article I'm going to talk about the headaches that I ran into and what I did to solve those issues, so let's get started.

The first thing you will need to do is create a new jsPDF object. You can achieve this by doing the following:

```
const doc = new jsPDF({
        orientation: 'p',
        unit: 'px',
        format: 'a4',
        hotfixes: ['px_scaling'],
      });
```

*The default for unit is mm, if you decide to use px like I did you will need to include the [hotfixes option](http://raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html) parameter which takes an array and you will need to include px_scaling like I did in the above code.*

**The unit that you used to create your jsPDF object is very important. And you'll see why in a moment.**

Now, once you've created your jsPDF object you'll need to use html2canvas to create an image which can then be converted to a pdf, like so:

```
html2canvas(this.$refs.content, {
        width: doc.internal.pageSize.getWidth(),
        height: doc.internal.pageSize.getHeight()
      }).then((canvas) => {
        const img = canvas.toDataURL("image/png");

        doc.addImage(img, "PNG", 140, 10, doc.internal.pageSize.getWidth(), doc.internal.pageSize.getHeight());
        doc.save("p&lstatement.pdf");
      })
```

Originally when I was testing this out I was getting the height and width of the ref by doing the following:

```
this.$refs.content.clientWidth
this.$refs.content.clientHeight
```

The problem with this was that it was returning pixels and I had originally set the jsPDF unit to mm which was distorting the image. So make sure that you're using the same unit for both jsPDF and the actual image.

Here is the html:
![Screenshot of P&L html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eu6mbuttipseyje8ml7r.png)

And here is the downloaded pdf:
![Screenshot of P&L downloaded to pdf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grw614h9czq06899cdy0.png)

Hopefully this helps someone else from pulling their hair out trying to get the PDF to display correctly. You may need to play around with the dimensions to get it perfect, but this is what worked best for me.
Checking out Docusaurus
Tags: opensource, cpp, javascript
Published: 2021-10-29 15:48:49

This week I checked out a really cool SSG called [Docusaurus](https://docusaurus.io/docs). Its a very easy to use SSG that creates a nice documentation site from markdown files. When I first tried to set up a Docusaurus sample website I was very impress with how simple it was to set it up, and how good the website looked for such a simple setup. You can take a look at the sample website I made [here](https://joshuali7536.github.io/DocusaurusSampleSite/).
I really liked how it had its own sections for Tutorials and Blogs, with a table of contents sidebar that allowed for incredibly easy navigation between the generated pages. Thus I wanted to start working towards a similar improvement to my own SSG, LENNAH.

My goal is to improve the accessibility of the generated HTML my SSG creates so the first goal was to make my HTMLs connected. I planned out several items to work towards to achieve this goal.
- Create a generate homepage
- Add a way to return to the homepage
- Add a table of contents side bar like in Docusaurus
- Add a navigation bar at the top

I wanted to first get a basic prototype that simply lets me at least navigate between pages because that would serve as the base foundation of my SSG's navigation. So my first prototype was implementing the homepage and adding a link that allowed the user to return to the homepage without using the browser's back button. These were fairly simple additions to LENNAH but were a nice change.
- [Homepage prototype](https://github.com/joshuali7536/LennahSSG/pull/20)
- [Return button prototype](https://github.com/joshuali7536/LennahSSG/pull/22)

The next steps will be to figure out how to convert the simple return button into a part of a nav bar, and then figure out how to create a side bar using that knowledge. I think however, before that I will have to implement CSS support into LENNAH so I can provide the CSS needed for creating a nav bar or side bar. So I think that is the first step I will take to work towards this goal. Docusaurus is a really cool example to learn from so I highly recommend [checking it out](https://docusaurus.io/) if you haven't already. So until next time, take care!
A few simple ways to protect your digital privacy
Tags: security, privacy
Published: 2021-10-29 15:29:30

Many people are concerned about how much personal information is stored on the internet and could be stolen or misused in today's reality. You're not the only one who feels this way. The issue of online privacy is crucial.

You can improve your online security against unwanted access to your data and privacy by taking several simple actions.

**1** 

Browse in private mode or use a browser, which doesn't store and send your data.

Browsing in private mode can let you avoid your browser's history from tracing. However, these private modes aren't entirely private. Your ISP can observe your surfing behavior even if you're using an incognito or private mode.

e.g.

https://www.brave.com/

https://www.beakerbrowser.com/

**2** 

Be cautious about where you click.

Phishing attempts are one of the ways how hackers can compromise your online privacy. They frequently accomplish this by sending fake emails that look like from banks, credit card companies, etc. 
Hover your cursor over suspicious links to see the destination URL before clicking. Don't click if it doesn't match the website you use.

**3** 

Change your search engine.

If you're like most web users, you use Google as your primary search engine.
You don't have to, though.
People prefer anonymous search engines for a variety of reasons. Your search history or clicks are not collected or shared by these sorts of search engines.
Ad trackers on the websites you visit can also be blocked by anonymous search engines. 

e.g.

https://www.duckduckgo.com/

https://www.startpage.com/

**4**

Use dedicated proxy servers. 

A dedicated proxy server acts as a private and secure connection point between users and the internet. It's a server that acts as an "intermediary" between end-users and the web pages they browse on the internet. An IP address is used when a computer connects to the internet.

You can compare it to your home's street address. It directs data to the appropriate destination while also providing a return address for other devices.

A dedicated proxy server is a machine connected to the internet that has its unique IP address and serves as a disguise for your computer.

There are plenty of companies that provide such services, here is my personal top of the most reliable ones:

https://www.dslrentals.com/

https://www.proxy-hub.com/


Stay safe=)
Typed: A 1kb type-safe runtime validation library
Tags: typescript, javascript, webdev
Published: 2021-10-29 15:24:04

I've been working on a little side project and I just wanted to share it with you so that maybe you can find some use for it in your own projects. 

`typed` is similar to [superstruct](https://github.com/ianstormtaylor/superstruct) and [zod](https://github.com/colinhacks/zod) in that it validates data at runtime and it is type-safe but what's different about it is that it comes in a tiny package (1kb) with an ESM build and it also outperforms them by a significant amount.

Here is where my original post would have ended, but somebody mention in the comments that I should tease you with some examples (yes, my marketing skills suck!).

So before I show some examples let me explain why I made it in the first place. The first reason was curiosity: build it to understand how other libraries work. `typed` actually borrows some type definitions from `superstruct` because when I started writing this library I had more limited knowledge about more advanced TypeScript topics.

The second reason was that I needed to complement a library I made for writing type-safe JSON APIs. It started as a nicer way to write next.js handlers and I'll soon migrate to the server (yes, I know all cool kids are writing Serverless code this days but I still enjoy coding good old node servers) but I needed a library to validate incoming JSON and in case of failure, reply with a 400 Bad Request error.

The third reason is that I stopped using GraphQL on my personal projects and I switched back to plain fetch requests using Vercel's SWR (stale while revalidate). The thing is that I was missing all the type-safe features that `apollo` and `codegen` was giving me.

To demonstrate the second reason, let me show you how I'd like to write a restful endpoint:

```typescript
import * as T from 'typed'

enum PostStatus {
  draft,
  published,
}

const inputType = T.object({
  title: T.string,
  body: T.string,
  tags: T.array(T.string),
  status: T.enums(PostStatus),
  publishedAt: T.optional(T.asDate),
})

// The request handler
export const createPost = post(async (request) => {
  const data = await request.json(inputType);
  const post = await prisma.post.create({ data });
  return Response.json(post, HttpStatus.CREATED)
})
```

To demonstrate the third reason, here's is a practical example that you can explore on codesandbox.

{% codesandbox confident-gauss-fygnv %}

Anyways, I hope you find it useful as I do on my own projects. Feel free to reach out if you have any questions.

{% github brielov/typed %}
SQL vs NoSQL
Tags: sql, mongodb, webdev, database
Published: 2021-10-29 15:22:52

## SQL vs NoSQL

| **SQL**                                                       | **NoSQL**                                                                                 |
| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| 1. Tables with fixed rows and columns                         | 1. JSON documents, key-value pairs, tables with rows and dynamic columns, nodes and edges |
| 2. Vertical Scaling (Scale-up with a larger sever)            | 2. Horizontal Scaling (Scale-out across commodity servers)                                |
| 3. Strict Schema                                              | 3. Dynamic Schema                                                                         |
| 4. An ideal choice for the complex query intensive enviroment | 4. Not a good fit complex queries                                                         |
| 5. Oracle, MySQL, Microsoft SQL Server, and PostgreSQL        | 5. MongoDB, DynamoDB, HBase, Neo4j                                                        |
| 6. Table-based                                                | 6. Graph-Based, Document-Based, Key-Value Pair                                            |

**What you prefer? Comment down below ⬇️**

---

**_NOTE:_** If you found this help. Like and share. Thanks, Happy Learning!

---

### Let's connect 💜

You can follow me on [Twitter](https://twitter.com/MrDanishSaleem), [Instagram](https://www.instagram.com/mrdanishsaleem/), [LinkedIn](https://www.linkedin.com/in/mrdanishsaleem/) & [GitHub](https://github.com/mrdanishsaleem/)

### Support Me

If you like this post. Kindly support me by [Buying Me a Coffee](https://www.buymeacoffee.com/mrdanishsaleem)
#hacktoberfest2021
Tags: programming, javascript, opensource, webdev
Published: 2021-10-29 15:16:04

This was the first time I had participated in #hacktoberfest and made some really good "open-source" contributions. I learned a lot of things and got to know how to collaborate on projects with people on GitHub. I'm very happy to share that all 4 pull requests have been accepted and will be getting the Hacktoberfest goodies.
vscode freezing on linux mint
Tags: vscode, linux
Published: 2021-10-29 15:12:24

Hi everyone. I've been fighting with VSCode for almost two weeks now.
I'm on Linux Mint 20.2 (update from 20.1 3 days ago) with Cinamon.

VSC keeps freezing my whole system randomly while working.
I have 4 ext. installed:

1. FiveServer
2. Pretier
3. Aura Theme
4. Tabnine (free)
I've tried working with and without extensions, with the same result.
I've even tried to run VSC from console with --disable-gpu attr.

Freezing is random. Sometimes while typing, sometimes when switching windows between VSC and FF.
Once it works fine thru out whole day, and crushes when hit backspace while editing :/

First thought there is a problem with FF but then it froze wit only VSC lunched :/
I even switched Motherboard and RAM thinking it's a hardware issue after dropping my laptop some time a go.

Does anyone had the same problem?

I really liked working with VSC.
I've tried Atom as a replacement, but not like it so much.
WEBSTORM is cool but it's overkill for me for now.
Top 12 Skills To Learn In 2022
Tags: skills, beginners, career
Published: 2021-10-29 15:11:38

Why do you need to learn a highly in-demand skill?

By learning a highly in-demand skill, you will be putting yourself in front of countless opportunities.

Here's a list of highly in-demand skills to learn:

### 1. SEO

### 2. Web Design

### 3. E-Commerce

### 4. SEO Copywriting

### 5. UI/UX Design

### 6. Digital Marketing

### 7. Saas Apps

### 8. Funnel Design-Landing Pages

### 9. Social Media Management

### 10. Affiliate Marketing

### 11. iOS/Android Development

### 12. Video Editing

---

## Let's connect!

You can follow me on [Twitter](https://twitter.com/MrDanishSaleem), [LinkedIn](https://www.linkedin.com/in/mrdanishsaleem/) & [GitHub](https://github.com/mrdanishsaleem/)

---

If you like this post. Kindly support me by [Buying Me a Coffee](https://www.buymeacoffee.com/mrdanishsaleem)

![Buy Me a Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0ikih5nlsqs0oops11e.png)