teleren/devto huggingface dataset:
HNG8 SO FAR
Published: 2021-08-23 15:25:34


Its One week already in the HNG internship, the experience has been worthwhile , meeting people in the same niche has been amazing

Also, the environment created by this HNG mentors is nice, for me i have been able to get that production feel thing, where you have a portfolio and looking for a job. its funny we are doing it among ourselves but i get the gist.

Currently, teams have been created and project task has been made known, I'm still hoping to join a team.

Least i forget, there's a channel called #dorime, not what you think, its a place defaulters are taken because they didn't comply to rules, I'm currently there too, hoping i will get out soon🤦‍♂️. see you in my next post✌...
Reshaping the request and response body when dealing with APIs
Tags: javascript
Published: 2021-08-23 15:20:17

As frontend developers, we interact with APIs that helps communicate with the backend. Those APIs could be external, where we need a service from a third party provider. They could also be internal, built by the backend team in the same company you are working at.

We send information to those APIs from the frontend in the body of the *request* and receive information in the body of the *response*.

Often, the request body needs to be in a certain format that the API expects. As in the frontend, we need the response from the API to be in a format that works well in the frontend.

We are not constraint by the format of the data we receive. And so we need to **reshape** that format.

## Array.map()

The array method `.map()` helps us accomplish that. It basically takes an array and produces a different array as a result. So, we can produce an array of different shape.

Here, is an example of how the `.map()` works

```js
const array = [1, 2, 3];

const newArray = array.map((x) => x + 3);
```

I could take an array of objects, and it would produce an array of strings. Or it takes an array of objects, and it produces an array of objects with different properties.

All depending on the callback function that you provide.

When receiving data, we want to know the format of it, and when sending data, we need to know how the request body should be formatted. Then use `.map()` to do the magic.
Using GroupBy to Investigate Data from a Certain Scope According to One or More Specific Attributes
Tags: datascience, analytics, python, pandas
Published: 2021-08-23 15:08:31

In this scenario, we have a dataframe that's made up of multiple attributes and we want to find the means of some of those attributes but from the scope of one or two main attributes.

For example, if we want to find the mean height in a population that consists of males and females with different age groups:
>>>Bear in mind that my dataframe is called population and there are attributes like (for example) weight, height, BMI, and the age and gender, which we will use to split the data during analysis.

##Importing and Parsing
```python
Import pandas as pd
population_df = pd.read_csv('investigation_data.csv')
```

##To view means relative to the age of the person:
```python
population_df.groupby('age').mean()
```
This will result in showing us the mean age of all samples with a certain age, which will be specified in the first column of my dataset.

##To view means relative to the age and then relative to the gender:
So, to use multiple columns with groupby, we can do the following:

```python
population_df.groupby(['age', 'gender']).mean()
```

Which will show us the mean of the attributes according to age, and then gender.
How to set up k3s on a raspberry pi 4
Tags: kubernetes, k3s, raspberrypi
Published: 2021-08-23 15:01:19

### Provisioning your pi
You'll need to download and install raspberry pi imager from the [official website](https://www.raspberrypi.org/software/). After you've done that, open it.

![Raspberry pi imager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ya02ovut0aej9nsnl8cs.png)

Then from the choose os menu, select `Raspberry pi OS (other)`, and then select `Raspberry pi OS lite (32 bit)`. Make sure you have your sd card inserted into your computer, then choose it from the storage menu.

Now, hit `CTRL + SHIFT + X` with the imager window focused.

![Raspberry pi imager config menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av0ox33s18xkjt1p05ej.png)

Then configure ssh (use a password if you're new to ssh, or otherwise use a public key), wifi (if your not using ethernet), and a hostname. Now hit save, and then hit write to flash your sd card. You might need to authenticate, depending on your OS.

After you've flashed the sd card, remove it, then plug it back into your computer. Now, edit `cmdline.txt`, if your using linux, its on the `boot` partition of the drive. After the word `rootwait`, add a space, then add `cgroup_memory=1 cgroup_enable=memory`. Save the file. Now open `config.txt` and add `arm_64bit=1` to the end of the file.

### K3S install
Now for the moment of truth! Plug in your sd card, and boot up your pi. SSH in to your pi using the hostname you set, followed by `.local`. So `pi@kube1.local` for me. Type `yes` if prompted to accept the fingerprint. If you used a password, you'll be prompted to enter it, and if you used a public key, you'll be logged in automatically.

Now, will need to use legacy iptables for kubernetes to work properly. Run these commands:
- `sudo iptables -F sudo update-alternatives --set iptables /usr/sbin/iptables-legacy`
- `sudo update-alternatives --set ip6tables /usr/sbin/ip6tables-legacy`
- `sudo reboot`

Your ssh session will close automatically, and you'll need to reconnect. 

Now, you'll need to install k3s. First become root by running `sudo su -`, then install k3s by running `curl -sfL https://get.k3s.io | sh -`. After that's done, check for nodes, by running `kubectl get node`.

**If you only have one device in your cluster, read on, and if not, you're all done.**

On your master node (the node that you just set up), run this command to get your token: `sudo cat /var/lib/rancher/k3s/server/node-token`. Now on the pi you want to add to your cluster (the node), follow the provisioning steps, and edit the iptables. Now fill in this command: `curl -sfL https://get.k3s.io | K3S_TOKEN="[the output of above command]" K3S_URL="https://[your master ip]:6443" K3S_NODE_NAME="[name of node]" sh -`, and run it on the node. Repeat this for the number of nodes that you have.

Now, why not [buy me a coffee](https://www.buymeacoffee.com/jem), or follow me on [twitter](https://twitter.com/jhqcat) or [github](https://github.com/jacobhq). Have a great day. :)
Create TLS / SSL Certificates for Local Development
Tags: webdev, tls, security, ssl
Published: 2021-08-23 14:51:14

When it comes to TLS certificates, there are a few tools such as [`mkcert`]() to generate them but I like to proceed with caution.

The safest way would be to use `openssl` directly, but this is a low-level tool with many options that requires specific knowledge to use it properly.

The second best choice is to use the tool recommended by some authority in this area like [let's encrypt](https://letsencrypt.org/docs/certificates-for-localhost/) so *let's* see what they suggest:

> If you want a little more realism in your development certificates, you can use [minica](https://github.com/jsha/minica) to generate your own local root certificate, and issue end-entity (aka leaf) certificates signed by it.

So I'm going to use [minica](https://github.com/jsha/minica) here.

The tool itself is very easy to use, but first we need to build it from source (and probably take a look at the source code first). It's written in go, so we'll use [golang container image](https://hub.docker.com/_/golang):

```sh
# ./certs is the dir where we'll store certificates
podman run --rm -it -v $(pwd)/certs:/certs golang
# from the container; get the source code:
go get github.com/jsha/minica
git clone https://github.com/jsha/minica.git
# build binary file
cd minica && go build
# generate the certificates
minica --domains 'localhost,app.test,*.app.test' \
       --ip-addresses 127.0.0.1
# move the certificates to the mounted directory
mv minica.pem localhost/* /certs/
exit
```

The certificates should be in `./certs` directory on the host.

Now we can add `minica.pem` to the browser we use for development. For Chrome-based browsers it's:
*Settings -> Security -> Manage certificates -> Authorities*

and use `cert.pem` and `key.pem` to authenticate the development server.

When we exited the golang container we destroyed it along with every file it contained, especially `minica.key`. This means that we won't be able to generate more certificates signed by this CA but if the file would fall into wrong hands it might be used against us for nefarious things like spoofing.

This allows us to have our dev server running on `https` (which means it closely resembles production environment) without decreasing the overall safety of our development machine.
Make users feel special by giving them their own subdomains.
Tags: showdev, tutorial, react, nextjs
Published: 2021-08-23 14:49:02

Have you ever wondered how to enable users to create their own subdomain? For example _slack workspaces_ (space.slack.com) or _hashnode blogs_ (name.hashnode.dev).
Well, Vercel makes it very easy since they have support for wildcard domains.

## What are Wildcard Domains?

You can think of a wildcard domain as a catch-all for subdomains.
If I go to **foo.domain.com** it will go to the same page as **bar.domain.com**.
Then on the client side, you can serve different content for different subdomains. This will make more sense later.

Setting one up on Vercel is super easy and it has built-in HTTPS.

## Adding Wildcard Domains

First, you need to have a domain available. You can buy one from any domain registrar like [namecheap](https://namecheap.com) or [porkbun](https://porkbun.com).
For this example, I'll use shopeetracker.com. It's a throwaway domain that I don't use anymore.

Next, go to your projects **Domains** tab, enter a wildcard domain, and follow the instructions stated. For example, my domain is shopeetracker.com and I got it from Namecheap.
Then I'll input `*.shopeetracker.com` and configure my nameservers.

![nameserver.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629729888686/fEVzNPemw.png)

Once you have done that you're all set! Pretty easy right?

## Detecting the subdomain

Detecting the subdomain happens at the client-side since we don't have access to the window object on the server-side.
Using a simple helper function we can extract the subdomain from the URL.

```ts
export const getPageData = async () => {
  const { host } = window.location;
  const splitHost = host.split('.');
  const isDev = host.includes('localhost');

  if (splitHost.length === 3 || (isDev && splitHost.length === 2)) {
    // This is your the subdomain
    // Ex. if foo.domain.com then page === 'foo'
    const page = splitHost[0];
    if (page === 'www') {
      return null;
    }

    // You can do your fetching logic here for each subdomain

    return page;
  }

  return null;
};
```

## Demo

A running example can be found on https://shopeetracker.com, and the source code is available in a [Github Repo](https://github.com/paolotiu/wildcard-domains-example).

## Conclusion

Providing custom subdomains can make users feel special. And with wildcard domains, it can be done quickly.
If you tried this out in any of your projects hit me up on [Twitter](https://twitter.com/PaoloTiu_).
I also have a [newsletter](https://buttondown.email/paolotiu).

## Resources

- [Github Repo](https://github.com/paolotiu/wildcard-domains-example)
- [Live Website](https://shopeetracker.com)
- [Vercel's Blog Post](https://vercel.com/blog/wildcard-domains)
나의 첫번째 dev.to 블로깅
Tags: korean, blogging
Published: 2021-08-23 14:28:38

# 왜 Dev.to를 선택했는가?

보통 한국에서 블로그를 이야기한다면 가장 많이 거론 되는 것이 네이버 블로그와 티스토리 블로그이다. 이미 많은 사람들이 잘 알고 있는 블로그 시스템이다. 손쉽게 사용할 수 있다는 장점이 있지만, 너무 많은 공을 들여야하거나 혹은 너무 제한적인 블로그를 지양하고 싶은 마음이 컸다.

물론 워드프레스라던지 Ghost와 같은 셀프호스팅이 가능한 - 커스터마이징이 자유로운 블로그 시스템도 있지만, 공부한 것들을 정리하고 공유하기 위해서 너무 많은 공을 쏟아야하기에 이 또한 제외하게 됐다. 한 마디로 개발공부를 기록할만한 적당한 블로그를 찾고 싶었다. 

그러던차에 후보에 떠오른 것이 Dev.to와 Velog 였다. 먼저 Velog는 한국에서 요즘 개발자들이 많이 사용하는 블로그 시스템이다. 

---

## Velog
**장점**
1. 한국에서 널리 알려있다보니 많은 개발자들이 작성하여 사용중이고, 구글에서 검색도 잘 되는 것 같다. 
2. 영어 울렁증을 겪지 않아도 된다. 

**단점**
1. 어딘가 모르게 좀 산만하다.
2. **컨텐츠 이전**에 대한 기능 지원이 되질 않는다.

사실 Velog에 대한 가장 큰 아쉬움이 바로 2번째 단점이다. 이런 신생 블로그 시스템은 추후에 서비스가 지속되리라는 확신을 갖기 어렵다. 그러면 그 동안 쌓아왔던 컨텐츠가 모조리 날아갈 수 있다는 이야기이다. 

---

## Dev.to
**장점**
1. 다양한 소재의 개발 글들이 올라와 커뮤니티에서 활동한다는 소속감이 느껴진다.
2. 잘 정돈된 레이아웃과 읽기 좋은 화면 구성이 뭔지 알고 만들었다는 느낌이다.
3. **Export Content** 기능을 지원한다.

**단점**
1. 영어다 젠장

---

위와 같은 사항을 고려해봤을때, 글을 작성할때 굳이 영어를 써야한다는 제약이 없기때문에 Dev.to가 추후에 컨텐츠를 이전할 수 있다는 점이 매력적으로 다가왔다. 

실제로 현재 포스팅을 export content로 이메일을 통해 받아본 결과 article.json과 comments.json으로 게시글과 댓글이 json 형식으로 백업되서 전달된 것을 확인해보았다. 


![풍비](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dwj59elx9waxjatv2x6.jpg)
Answer: How to change the length/position of text-decoration:underline?
Published: 2021-08-23 14:23:53

{% stackoverflow 51521577 %}

텍스트 데코레이션은 텍스트 길이에 맞게 길이가 제한됨
=> 이 방법으로 원하는 길이/위치/두께 조절이 비교적 쉽고빠름
Is The 10x developer a myth?
Tags: teamlead, people, humanresource
Published: 2021-08-23 12:29:32

###### I am always posting provoking post on my Linkedin, and I have decided to replicate those here. [Let's socialize!](https://www.linkedin.com/in/alexsandro-souza-dev)

"Someone who is exceptional in their role is not just a little better than someone who is pretty good. They are 100 times better" - Mark Zuckerberg argued when asked why he was willing to pay $47 million to acquire FriendFeed, a price that translated to about $4 million per employee.

Regardless of what the CEO of Facebook think, studies show that the 10x developer is not a myth. I particularly have seen few bad decisions costing millions to companies.

The biggest problem with the pushback against a 10x programmer is that some people think of programming as manual labour and programmers as assembly line workers. They will ask, "If you are building a company, would you prefer one standout person over ten pretty good people?"

The logic above makes it sound like programming productivity is all about typing speed. It's not about writing more code; it's about writing the right code. You become a 10x programmer not by doing an order of magnitude more work but by making better decisions more often.

A single programmer could easily outperform a team of 10 if the programmer can model the problem in a way where there is an order of magnitude less work to do. 

A great programmer will ensure principles, guidelines, automation, tools and frameworks to improve the whole company's performance and customer satisfaction. 

I'm certainly not suggesting that leaders who are growing companies or building teams should only hire rockstars. I actually believe it would be a mistake. Companies should invest in strong teams rather than individuals. However, managers need to be aware of the value of an outstanding developer.

https://www.linkedin.com/posts/alexsandro-souza-dev_team-productivity-leadership-activity-6823536056881725440-59Q6
Toggle state changed on routing..!!
Tags: react, reactrouter, admin, dashboard
Published: 2021-08-23 14:20:10

Hi, I am building a dashboard with reactjs. I have nested menu in the admin sidebar which is controlled by toggle on parent item. Whenever i click on any of the nested item the toggle items menu get closed. Screenshot attached for the same.

Anyone, please suggest some solution.

I am using react router for navigation.
AWS Associate Architect Exam - Pointers
Tags: aws, inthirtyseconds, cloud
Published: 2021-08-23 14:15:31

SO I recently cleared my AWS associate architect exam (2nd time) and here are the list of services / types that normally comes in the exam! 

#Type of questions

Most of the questions are based on 
1. "when to use what" - which services are suited 
2. "what's the more secure way" 
3. "what's the most cheaper way" 
4. "which of these requires less operational overhead" 

#Topics

1. s3 + Cloud front and OAI
2. S3 different use cases (when to use Standard, Glacier/ vault etc)
3. SQS + RDS / different queues and when to use FIFO vs standard
4. VPC peering and endpoints
5. ec2 auto scaling related (scheduled scaling/ cool down periods) 
6. Redshift availability/durability / multi region
7. DynamoDB / Dax / DynamoDB streams 
8. iam roles/policies and types (lambda to s3/ instance profile roles etc /cross account roles)
9. storage gateway (volumes/cached)
10. data sync vs s3 transfer acceleration
11. Kinesis data streams/ analytics/firehose 
12. s3 select vs glacier select
13. RDS related (when to use aurora - latency/ read replicas vs Multi AZ )
14. Monitoring related (cloudtrail vs cloudwatch vs trusted advisor)
15. VPC scenarios (how to create networking). It needs the practical knowledge of setting up access to the Internet for the EC2 instances, for example from Igor (comments)
How to load images in your MDX blog
Published: 2021-08-17 02:10:31

---
title:  How to load images in your MDX blog
published: true
description: 
tags: 
canonical_url: https://cesarvarela.com/blog/how-to-load-images-in-your-mdx-blog
---

If you've followed my previous posts about adding a blog to an existing Gatsby site, you'll notice one thing: images don't load.

Thankfully this is pretty easy to fix, so let's do it:

## Add a `gatsby-source-filesystem` entry for your images

First, we need to let know Gatsby about the existence of our pictures. I want the images to reside inside the `src/blog/images` folder and not in `src/images` (skip this step if you don't care about this).

```js
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blog-images`,
        path: `${__dirname}/src/blog/images`,
      },
    },
```
## Add the `gatsby-remark-images` package

```sh
yarn add gatsby-remark-images
```
or
```sh
npm i gatsby-remark-images
```
And add it to your Gatsby config:

```js
...
    `gatsby-remark-images`,
...
```
## Configure `gatsby-plugin-mdx`

Next, we need to tell `gatsby-plugin-mdx` to use  `gatsby-remark-images`, and this is done on your Gatsby config too:

```js
{
      resolve: `gatsby-plugin-mdx`,
      options: {
        root: __dirname,
        gatsbyRemarkPlugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 500,
              linkImagesToOriginal: false,
            },
          },
        ],
      },
    },
```
## Use them in your `.mdx` files

Once everything is ready, you should be able to include them like you would with `.md` files, using a relative path from the current `.mdx` you are writing on to the image:

```md
...

![smart screen of death](./images/smart-screen.png)

...
```

You can check an example [here](https://github.com/cesarvarela/cesarvarela.com/blame/master/src/blog/codesign-electron-on-windows-getting-certificate.mdx#L45)
Day 10 : Understanding DOM and debugging was never so easy
Tags: javascript, beginners, webdev, 100daysofcode
Published: 2021-08-23 13:45:22

I am summarising everything that I have learnt today. If you also want to go through the same topic, I believe the article links I am providing is one of the best on the web available for that topic.

* DOM tree basics :- [java-script-info](https://javascript.info/dom-nodes#an-example-of-the-dom)


----


* The essential guide to javascript Iterators (the for-of loop guide) :- [javascriptutorial.net](https://www.javascripttutorial.net/es6/javascript-iterator/) 
and [Educative](https://www.educative.io/courses/step-up-your-js-a-comprehensive-guide-to-intermediate-javascript/m27Yx11KPMG)


----


* Walking through the DOM :- [javascript-info](https://javascript.info/dom-navigation#the-sibling-question) . In this article, you may feel some problem at the last with the table properties. Just see the properties being used in the example, ignore others (we will search for them whenever needed, as we know what to search for).


----

* Searching element in DOM :- [javascript-info](https://javascript.info/searching-elements-dom)

----

* Debugging javascript using chrome developer tools :-  [Google](https://developer.chrome.com/docs/devtools/javascript/)

----

* Best guide to debugging javascript for beginners I could find - [link](https://javascript.info/debugging-chrome#the-sources-panel) . In this everything is explained in a much simpler language.
What Programming Books are Developers Reading?
Tags: programming, javascript, python, php
Published: 2021-08-23 13:34:29

Many programmers and technology professionals continuously educate themselves as technology changes and to expand their knowledge base. Many of today’s top programming languages have been popular for the past ten years (or longer in some cases), so having an understanding of each can be valuable for a developer interested in maintaining their flexibility and employability in the industry.
According to the Tiobe Index, today’s most popular languages include:

C
Java
Python
C++
C#
Visual Basic
JavaScript
PHP
SQL
Assembly language

read more: https://hitechnoloy.ca/what-programming-books-are-developers-reading/
Remove all console log in single click.
Tags: javascript, console, javascriptcentric
Published: 2021-08-23 13:32:46

There is no problem to use console.log at development level for logging or to debug your app but what if you forget to remove console log and push your code for review or for production.

definitely  it will impact your app performance and will make your app slow and also less secure.

So how you can remove all console.log from your code in single click ??
Interested ? So lets go to ——> https://youtu.be/UYKbSPMTfZY
Now you can Schedule More Calls with Calendly!
Tags: html, webdev, wordpress, programming
Published: 2021-08-23 13:31:00

**Discovery calls**

If you are a freelancer, you may know discovery calls. Discovery calls are the heart of the freelance business for any freelancer. The only way to make your place in the heart of your clients and understand what they're looking for is discovery calls. 

These discovery calls can help you make or even break your deals. However, if you act smartly, you can get high-paying clients by showing them your compelling ideas and work. 

Now the best way to get in touch with your clients by sitting in any corner of the world is Calendly. Calendly lets customers schedule calls with freelancers at their available time. 

You can set up calendly on your website for the convenience of your customers. 

Here's how you can do it:

1. Set up a landing page. 
2. Set up Calendly. 
3. Add the Calendly button to your landing page.

In this way, whenever a prospect visits your website, it will be easier to schedule calls for him.

Read more about calendly setup at https://tiiny.host/blog/schedule-more-calls-for-your-freelance-business-with-calendly-and-html/.
How to effectively build and manage a QA team?
Tags: testing, webdev, writing, codequality
Published: 2021-08-23 13:05:33

Quality assurance teams ensure that a company’s products meet its set standards of quality. QA specialists utilize various testing methods to determine the quality of a product, then bring awareness to any issues that they uncover and propose improvements or fixes.

However, many companies do not fully understand how to utilize their teams and are unclear on the characteristics of a great software testing team. So we have developed this [guide to assembling and managing a QA team](https://evrone.com/qa-team-management), based on best practices and our own extensive experience with quality assurance management.