teleren/devto huggingface dataset:
BLOGTO: Vscode extension to help you post blogs to, Dev.to, Hashnode and Medium
Tags: javascript, webdev, programming, opensource
Published: 2021-12-18 17:14:04

BlogTo is a vscode extension which helps your post your ideas to medium.com, hashnode.com, and dev.to


> Beta release. Extension may have some issue or bugs. 


![Screenshot 2021-12-18 at 7.33.51 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1639846776102/wlsJ_scN8.png)

### Why BlogTo was build :

- Create a utility tool to let people blog faster
- Avoiding the friction
- Giving enough features and flexibility.


### Features (0.6.1): 

1. Post blogs to dev.to, medium and hashnode
2. Simple UI
3. Good feedback.
4. Simple to set up

### Setup up : 

1. Download the extension  [here](https://marketplace.visualstudio.com/items?itemName=coolhead.blogto)  
2. Click on the config button, set up the api tokens for medium, dev.to and hashnode.
    -  This will fetch user data and save it localSession in vscode.
  
3. Open any markdown files in Vscode and Start posting blogs.
   
4. Issues and Error
    - github [here]( https://github.com/pratiksharm/blogto)

### Upcoming Features,Bugs, issues and possible solutions. 

1. Image uploading  
    - Extract all the image tags, uploading them on the platform via api, get the image url and replace them in the markdown.
2. There is a limit of 10 requests per 30 seconds.(dev.to)
3. Posting as organisation

### Alternative to BlogTo:

- CLI tool for cross posting
    - https://github.com/shahednasser/cross-post
    - read here for setup : [here](https://blog.shahednasser.com/i-created-a-cli-to-cross-post-your-articles-on-dev-hashnode-and-medium/)
- Chrome Extension plugin
    - [https://codewrite.io/](https://codewrite.io/)
- Website Service ( a whole package )
    - [https://crossxpost.app/](https://crossxpost.app/)


Will be writing an extended version on blogto. Do let me know if you guys face any issue or have any feedback.
Notch X : For Multi-taskers
Tags: python, productivity, programming, product
Published: 2021-12-18 16:54:45


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmrr949ktlyng6btk0kv.png)Ever since the release of the latest **MacBook** there has been a crazy fuss surrounding the notch of **MacBook**. 
But this story is not about notch on MacBook?
This one's about bringing MacBook's notch to **Windows**. So, once I searched the web how to add notch to windows I understood that though there were a few software capable. But all faced with the same problem that bringing a notch defeats the purpose of productivity.

Hence, there was _this question I faced_ that **how could you add a notch while at the same time making your system better?**.
Now for one, there is one thing I should tell you that during this pandemic there were many instances when I learned but if there was anything that I learnt the most was to Multi-Task. 
Such as, joining my online-classes, at the same time preparing for presentation in next class, as well as keeping updated with the messages from my group members for upcoming presentation.

For last few days I felt the need to access most important apps instantly. But each time I would have to go to Start Menu then Type The Name of App and then press Enter.

> That's when I decided to create Notch X bringing the look and feel of notch and merging it with productivity for users.

And after coding, developing, designing and testing for 12*15 hours Notch X was born.

For starters, it is capable of:

- Opening Notes :to know what to study

- Opening Teams :to join my class

- Xbox Gamebar :to record anything important in class and beyond

- Settings :to quickly change microphone and camera access for conditions such as accidental enabling

- And Wox : an application launcher faster than Start Menu

and I wish to add more features to it in future.
You can star the repo at [rug-gui/notchx](https://github.com/rug-gui/notchx)
You can also download the installer directly and install it.
(Though, it might have some bugs!)

Project is currently in Alpha Phase of Development.

And yeah, I believe even now it is not perfect, but there are a few improvements you can suggest too. And since it's open-source there can be few you can add yourself too.

_Notched Forever💖_
Lessons in Language Design from Go (a series)
Published: 2021-12-18 16:24:47

This is the beginning of a series of blog posts about programming language design, with a focus on Go.

I've been using Go for about 7 years now, so I have personal experiences on which to base my opinions.  I've also used a bunch of other languages in that time.  I'd like to try to compare the design choices embedded in those languages, especially thinking about how those choices affect day-to-day usage and the long-term evolution of a language "ecosystem."

A lot of wonderful people create Go, and a lot more wonderful people use Go every day, building some very useful things.  For example, the world of Docker and orchestration that underlies most of the Internet right now would not exist without it!  Go was developed to fill a need, and its growth and popularity since that time show that it is a valuable piece of the software world right now.

So, I hope that I can draw some lessons that might inform future language development without doing any harm to that community.
How to use built-in Proxy object in javascript
Tags: javascript, webdev, beginners, programming
Published: 2021-12-18 16:02:57

`Proxy` object allows you to add custom get, set, delete behaviour on your existing object.

Here is one useful way of using `Proxy`, which will allow us to **query json array with value rather than index**.

```javascript

// our array
const items = [
    {
        id: '123',
        name: 'phone'
    },
    {
        id: '789',
        name: 'tablet'
    },
    {
        id: '1011',
        name: 'laptop'
    }
]

// define custom hooks
const handlers = {
    get: (target, prop) => {
        return target.find(item => item.name === prop)
    }
}

// create proxy object
const customItems = new Proxy(items, handlers)

// now you can access our array with name instead of index 😀
console.log(customItems['laptop'])  
// logs => { id: '1011', name: 'laptop'}
```

For more in depth information check out [MDN guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) or comment below in case of doubt. 

You can play with the above code here :-

{% runkit %}

// our array
const items = [
    {
        id: '123',
        name: 'phone'
    },
    {
        id: '789',
        name: 'tablet'
    },
    {
        id: '1011',
        name: 'laptop'
    }
]

// define custom hooks
const handlers = {
    get: (target, prop) => {
        return target.find(item => item.name === prop)
    }
}

// create proxy object
const customItems = new Proxy(items, handlers)

// now you can access our array with name instead of index 😀
console.log(customItems['laptop'])  
// logs => { id: '1011', name: 'laptop'}

{% endrunkit %}


## 💡 Post your cool ideas with `Proxy` in comments.
Dockerizing a Node.js web application
Tags: node, devops, docker, react
Published: 2021-12-18 15:11:40

> In this article, I would like to document how I dockerize my portfolio web site, which is a Node.js application.

## Table of Contents
* [Build the Node.js application](#build-the-nodejs-application)
* [Deployment](#deployment)
* [Verification](#verification)

## Build the Node.js application

Firstly, create Dockerfile for the Node.js application.

```dockerfile
FROM node:14.18.2-alpine3.14
WORKDIR /app
COPY package.json ./
COPY package-lock.json ./
COPY ./ ./
RUN npm ci
CMD ["npm", "run", "start"]
```

Since I've used *node-sass* package for enabling SASS in my application and [the package supports limited Node.js version](https://github.com/sass/node-sass/releases/), I need to find the right [node.js docker image at **docker hub**](https://hub.docker.com/_/node). 

![Supported Environments by node-sass package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6aeeb0a8z8u4stg4ttv.png)

At *docker hub*, search for the right image in the *Tags* tab.  Once the desired image is found, put it on the first line (i.e. the FROM layer) of the Dockerfile.

![Node.js docker images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvhakovvfa7q1mvxg282.png)

Secondly, create .dockerignore file to exclude files and directories from the docker image.

```ignorelang 
node_modules
*.log
```

Thirdly, build the Node.js application.

```sh
yarn build
```

Fourthly, build the docker image.


**Make sure Docker Engine is running in your development environment.*

```sh
docker build -f Dockerfile -t portfolio-website .
```

## Deployment

* Deploy by exposing port 5001 instead of default port 3000 (you can change to any port according to your environment).

```sh
docker run --name portfolio-website -it -p 5001:3000 portfolio-website
```

## Verification

* Check that the web application is running by opening `http://localhost:5001/` in a web browser.


  ![Dockerized Node.js application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jfnn5mrob03bzjzjvwt.png)
How to fix "Property 'ethereum' does not exist on type 'Window & typeof globalThis'.ts(2339)"
Tags: javascript, tutorial, web3
Published: 2021-12-18 14:50:31

## Introduction
When working with MetaMask APIs, you might encounter this warning: "Property 'ethereum' does not exist on type 'Window & typeof globalThis'.ts(2339)"  when accessing `window.ethereum` in a TypeScript project. MetaMask injects a global API into websites visited by its users at `window.ethereum`

![a code snippet screenshot](http://naftalimurgor.netflify.app/static/img/error-ethereum-does-not-exist.png)

To fix this warning, and corresponding compile error, add this declaration at the top level of your file, after imports.

```typescript
declare var window: any
```

Note, this is not the best fix as this temporarily fixes the warning by telling the `TypeScript` compiler to treat `window` as of type `any` hence ignore any warnings. 

This sacrifices also any  IntelliSense and auto-completion provided by code editor on the `window` object.
***
This article was originally published at https://naftalimurgor.netlify.com
Linux: An Intro For Newbies
Tags: linux
Published: 2021-12-03 17:19:21

The Linux operating system is one of the most widely used pieces of software in the world, though its open source nature means that most people don’t know this. You might be using Linux every day, whether you know it or not.

Linux (the core system) comes bundled with many software packages called a _Linux distribution_. There are many different Linux distributions available like [OpenSuse](https://www.opensuse.org/), [Ubuntu](https://ubuntu.com/), [Fedora](https://getfedora.org/), [Kali](https://www.kali.org/) and many others. 

### Linux server

Linux has been widely used in web servers for some time now. In fact, the majority of websites you visit are served by a computer running Linux. 

The easiest way is to start a linux cloud vps on a service like Vultr or Digital Ocean.  That gives you access to a Linux server. From there, you can use the [Linux command line](https://bsdnerds.org/what-is-linux-shell/).

As a developer, knowing the Linux command line is a must have skill. Because so much software uses Linux: web apps, routers, embedded systems etc. Often times you'll have to login through a remote terminal connection (ssh).

### Linux on desktop?

It’s also increasingly popular on the desktop, with users able to take advantage of its cross-platform nature. This means that Linux can be installed on almost any computer, whether Apple or Windows-based, and work exactly as it should.

There are many different graphical environments and there isn't a "Linux way" of doing things. In fact, when it comes to Linux usually there's a dozen ways of doing the same thing. There are many graphical choices like [Gnome](https://www.gnome.org/), [kde](https://kde.org/), [mate](https://mate-desktop.org/) etc. Usually a Linux distributions comes bundled with all of them.

Given the Linux desktop share, it doesn't seem like there will ever be the _"year of the Linux desktop"_ but nonetheless it's comfy system for doing software development.

Many development tools are available including [VSCode](https://code.visualstudio.com/), [Vim](https://www.vim.org/) ([learn vim](https://vim.is/)), [Android Studio ](https://developer.android.com/studio/) and loads of others. In fact, most developers I've met use either Linux or OS X all the time.

### Install Linux

As you might imagine, installing Linux is a little more complicated than downloading an app on your phone. The good news is that it’s not actually that hard to install.

The general idea is to download the **.iso** file and write it on a **bootable USB disk**. Then boot from the usb disk using the bios. Sometimes it doesn't boot because secure boot is enabled.

After booting, you may find yourself in an installation menu. Some distributions however, just give you a terminal where you can type commands to install everything like Gentoo (those are only free if your time is worthless). However, most Linux distributions guide you through some kind of graphical installer.

![cat on pc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30hyfpl8h6ecqvlqc09m.jpeg)
Import Google Maps 3D data into Blender
Tags: tutorial, beginners, blender, 3d
Published: 2021-12-18 14:32:38

[Nicko16](https://www.youtube.com/channel/UCIldsycnma5sHR1VRP38vhg), a Blender YouTuber, uploaded in 2020 a short tutorial about how to Import Google Maps 3D Data into Blender, using the RenderDoc Blender add-on. Basicly, it import 3d models and building from google map with [MapsModelsImporter](https://github.com/eliemichel/MapsModelsImporter/releases) developed by Élie Michel.


## Video
{% youtube F_XsmoZJmG8 %}


>  18th November 2021, UPDATE, I can confirm this is working with: 
Blender v2.93.6 
RenderDoc v1.16
MapsModelImporter v0.4.0  

{% twitter 1462924565055741960 %}

#### Requirements & useful links
This is the text that you need to add to the Chrome shortcut target field to run it in debug mode (delete the existing contents beforehand):

`C:\Windows\System32\cmd.exe /c “SET RENDERDOC_HOOK_EGL=0 && START` `C:\Program Files (x86)\Google\Chrome\Application\chrome.exe^ –disable-gpu-sandbox –gpu-startup-dialog`

If your Chrome is installed in a different location to the one above you may need to go in and change parts of this text.

You can download the MapsModelmporter addon here(MapsModelsImporter-v0.2.1.zip): https://github.com/eliemichel/MapsMod
You can download RenderDoc here: https://renderdoc.org/
You can see Elie’s original video here: https://youtu.be/X6Q7dbtXVZQ
You can download Blender here: https://www.blender.org/download/
we support our best for this free tutorial and scripts for Importing Google Maps 3D Data

#### Conclusion
We tried and actually it perfectly works! It's pretty useful to have an access into the world in 3D whatever your project is. The data is accurate but, as you excepted, it's made of low-poly models so if you are requiring or you need this for close-up (plans), I don't advice you to make it. And of course, it's totally free. 

Let us know your feedback in comment.

Noé Cabannes-Michel @noe
Sending E-mail📨Using Python
Tags: python, smtp, webdev, tutorial
Published: 2021-12-18 14:31:54

So, Have you guys ever wondered how do companies like Amazon, Walmart, eBay send emails to your inbox immediately after your purchase. Do you think it's an email sent by an human. I know most of you must have guessed it's an Automated E-mail but how do they do that? 
![typing-fast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xkgw54r81a2w13x5mct.gif)

In order to solve the question that was raised we are gonna be trying to send a email using simple Python Code. Feel free to customize the code according to your needs.
 

### A Simple Program
{% gist https://gist.github.com/raghavmri/911ef01fd61b946b337c8b795a07aaea %}

### Points To Note
- Do let me know where I can improve in writing posts in the comment section below as I am too learning new things :)
- Thanks For Reading ♥!

### Video Reference 
{% youtube 1UrV0edj1TI %}
Do you implement logic first or focus on styling right-away?
Tags: discuss, react, javascript, webdev
Published: 2021-12-18 14:14:41

Hey React people! I'm just curious how you approach implementing dynamic UI which requires things like: app-state management, fetching data from API etc. For instance,  I  first focus on app-state, actions,  any potential state kept in URL query params, dependencies in `useEffect` to re-fetch data upon action completion etc. Then, I write basic unstylled JSX to see it functional. Once I can click through major user journeys, I work on styling. What's your way?
Play Blur onblur
Tags: html, javascript, webdev, showdev
Published: 2021-12-18 13:59:44

Yesterday, a colleague asked me what we should do `onfocusout` on a task, we're working on. I told him it's called `onblur` in JavaScript (we were both right, more on this later!) 

To this, _another_ colleague said:

> “Is this a reference to the band? Otherwise, it's a shitty name”.

(if you're not familiar with the band [Blur](https://en.wikipedia.org/wiki/Blur_(band)) or the `onblur`-event, this probably isn't funny at all) 

… maybe it **is** a shitty name, but what if we could **play** Blur `onblur`?

First, we need to add an audio-file:

```html
<audio src="woohoo.mp3" hidden id="woohoo"></audio>
```

We'll give it an id, `woohoo`, so we can easily reach it from code.

Then, we'll add a fieldset, with some inputs:

```html
<fieldset id="app">
  <legend>Play Blur onblur</legend>
  <label>♪ Woohoo<input type="text" /></label>
  <label>♫ Woohoo<input type="text" /></label>
  <label>♫ Woohoo<input type="text" /></label>
</fieldset>
```

And finally, a little snippet of JavaScript, where we iterate the `elements`-collection of the fieldset, and add an `onblur`-eventListener to each input:


```js
[...app.elements].forEach(input => input.addEventListener('blur', function(e) {
  woohoo.play()
}))
```

And that's it! Now focus on a field and leave it ;-)

{% codepen https://codepen.io/stoumann/pen/ExwmqOv %}

---

## Real use-cases

Okay, so admittedly this is just plain _stupid_, but maybe we could actually use this technique in conjunction with the [Constraint validation API](https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation)?

If a form-field is **valid**, it could play a tiny "ding!"-sound, and if it's **invalid**, a tiny "buzz"-sound.

---

## `focusout`
Turns out my colleague was right: there **is** an event called `focusout` (and it's counter-part: `onfocusin`) – I'm just so old-school, that I've used `focus` and `blur` for ages! 

Unlike `blur`, `onfocusout` actually _bubbles up_, meaning we can add a single event to the fieldset instead:

```js
app.addEventListener('focusout', () => woohoo.play)
```

– but it's not funny at all to play Blur `onfocusout`, is it? 😂

In conslusion: Thank you to my colleagues for giving me an excuse to code something stupid **and** learning about the `onfocusout`-event!
Secure our website using JWT (JSON Web Token) in nodeJS or expressJS
Tags: javascript, react, node, devops
Published: 2021-12-18 13:14:55

## here we are using JWT to secure our application or website from unauthenticated user they try to access our data.

In npmjs a library named is 

> jsonwebtoken 

> npm i jsonwebtoken

if we only check user isAuthenticated or not we simply pass the middleware in between request and response

### auth.js

```
`export default function getTokenFromUser(req: Request) {
  const authorization = req.headers.token;
  var decoded = jwt.verify(authorization, 'secret');
  if (!decoded) {
    throw new TokenError("No Authorization Header");
  }
  try {
    const token = decoded?.split("User data ")[1];
    return token;
  } catch {
    throw new TokenError("Invalid Token Format");
  }
}`
```


we simple pass this auth of in between req,res

```
app.post('/api/post',auth,(req,res)=>{
//if some operation on code we use middleware
const token=jwt.sign({
  data: 'your data to store as token'
}, 'secret', { expiresIn: '1h' });

res.header('token',token).send("success")
});
```
we ensure that you can save your secret key in your config file.
E-commerce using MongoDB and handlebars
Tags: javascript, atlashackathon, mongodb, webdev
Published: 2021-12-18 13:05:19

### Overview of My Submission
Online marketplace for freelance digital services where you can buy and sell gigs. You can hire a freelancer as well as work as one. 

Has implemented user profile including Google’s social login and it’s completely responsive.

🔗 [Live demo](http://servicewall.herokuapp.com/)

Built with:

- HTML / CSS / JavaScript / Handlebars
- npm / MongoDB / NodeJS / ExpressJS
- Stripe / Mapbox / Nodemailer / Cloudinary / PassportJS



### Submission Category: 

E-Commerce Creation


### Link to Code
{% github https://github.com/Silinde87/M2-Service-Wall %}


![Screenshot of ServiceWall](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl83dh5z8zmb9lakq1fm.png)


![Screenshot of ServiceWall](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0n5i9wmhm1b44mvlbso9.png)


![Screenshot of ServiceWall](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oeh81tk8sgbn4ek6pez2.png)
How to create a simple CSS only dropdown 
Tags: css, html, webdev, frontend
Published: 2021-12-18 13:04:05


This is a small CSS tutorial I decided to write this morning. Maybe later I should do more.

Today's topic gonna be CSS based dropdown menu. The code itself was written from scratch. It took me around 30 minutes. The only external code was used is CSS reset.

I am using Pug to write quick HTML and SCSS.

The first thing is to create a dropdown container div.

Then put inside a button. It will serve as a trigger. Then we put inside an unordered list with a few items.

    .dropdown
     button.trigger-btn Hover me
      ul.dropdown__items
       li.dropdown__item Menu item 1
       li.dropdown__item Menu item 2
       li.dropdown__item Menu item 3
       li.dropdown__item Menu item 4

Then we add padding, background color, etc.

For color selection, [Material colors](https://materialui.co/colors/) were used. There you can quickly choose some nice-looking colors.

Shadows for the dropdown were generated with a help of a [CSS generator](https://cssgenerator.org/box-shadow-css-generator.html).

We finished with styles and HTML. Now, how actually does the magic works?

In order to have a dropdown appear on mouse-over we need to set :hover pseudo-class. When the .dropdown container is mouse-over.dropdown__items element becomes visible by adding display:block CSS rule.

Check out the code example to understand better how it works:
{% codepen https://codepen.io/AntM/pen/QWMPEgO %}
🔴 How to capture packets with Tcpdump 🧐
Tags: beginners, tutorial, productivity, computerscience
Published: 2021-12-18 13:02:55

🔥 🔥 **_ALL ABOUT TCPDUMP ARGUMENTS DETAILS SHARED  
HOW IT WORKS**_ 🤷‍♂️🔥🔥🔥

{% youtube zt3XtDRQWeo %}