teleren/devto huggingface dataset:
Should we use "Functional" components + Hooks rather than "Class-Based" components?
Published: 2021-10-29 22:36:09

# What does React say?

The FAQ of React docs site encourage us to adapt to functional components and hooks:
> When you’re ready, we’d encourage you to start trying Hooks in new components you write.

## Why?!

The only reason which never have described by even React docs in details is functional components are cleaner and much-easier-to-read ones. You can understand functionality of a component by glimpsing.

Consider you want to use `componentDidMount` and `componentWillUnmount`:

- In class-based components these are separate methods which may need interactions with each other. Also they can't be redeclared in the component.
- But by using `useEffect` hook, you can have multiple `componentDidMount` and `componentWillUnmount` functionalities in your components and therefore this and other reasons which you may have faced cause much easier codes for comprehension.
Lab 6
Tags: opensource
Published: 2021-10-29 22:11:15

For this week's lab I added a feature from [docusaurus](https://docusaurus.io/) to add `<meta>` tags to my [GAS SSG's](https://github.com/gusmccallum/GAS-ssg) generated HTML pages for added SEO. I started by logging [an issue](https://github.com/gusmccallum/GAS-ssg/issues/21#issue-1039789863) with a description of the functionality I was looking to add, and started working on it.

I created a [new branch](https://github.com/gusmccallum/GAS-ssg/tree/docusaurus-seo) in my repo to put my changes, and started writing logic to add `<meta>` tags with keywords from the title when generating the document. After some work the prototype was ready and I tested it. It wasn't triggering from one control path so I made the necessary changes and it worked. I pushed the changes and [merged the commit](https://github.com/gusmccallum/GAS-ssg/commit/4311327116a319d3c4cc6781010c2bc2a930ab89) to the main branch. 

On the docusaurus side of things, I generated a site and tested it locally, then moved to deploying it to github pages. I was unsuccessful, and tried again. Ultimately there were errors no matter what so I started over, upgrading yarn and making sure to install all the relevant packages as best I could. After starting fresh the site would no longer build or run locally, let alone deploy to github. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pm6dei66is1psxjbvoy5.png)
Meta Programming
Tags: rust, opensource, osd600
Published: 2021-10-29 22:04:49

Hey Again! It's been a while since my last blog :)

As usual the previous related blog is right here {% post https://dev.to/antoniobennett/refactoring-code-2gf4 %}

## Task 1
For this assignment we had to familiarize ourselves with [Docusaurus](https://docusaurus.io/) which is created by Facebo- \*Cough* Meta. The basic setup can be found [here](https://antonio-bennett.github.io/docusaurus-demo/) via github pages. It was super easy to setup! I did have a hiccup with github not doing password auth anymore when I tried running the built in deploy script for github pages and the fix was too annoying so I just built and copied the files to my github pages repo.

## Task 2

The second task was to also implement a feature of docusaurus. I chose to implement the markdown parsing feature. Although rssg technically had this feature, it was very limited. Only supporting level 1 headers and inline code. To do this we were allowed to use 3rd party libraries, specifically crates in rust.

I chose to use [comrak](https://github.com/kivikakk/comrak). It is one of the most developed and well known markdown to html crates and is very easy to use. The main logic of my code is very simple and is done as such
```rust
    if ext == "md" {
        let file: Vec<&str> = vec_lines.into_iter().skip(3).collect();
        let file = file.join("\n");
        let file = markdown_to_html(&file, &ComrakOptions::default());
        html.write_all(file.as_bytes())
            .expect("Could not write markdown");
        return;
    }
```
It simply takes each applicable line of the file and converts it to html. That simple. The full commit can be found [here](https://github.com/Antonio-Bennett/rssg/commit/fb117cf4)

Thanks for reading again and I hope I'm not boring you guys to death yet! :)
🚂 Model Railroad Scale Calculator Function 🚇
Tags: javascript, typescript
Published: 2021-10-29 21:57:03

As I am at home a lot, Just for fun, I am starting to look at modelling a railroad / railway, cool but I don't do very often maths, so I used some code to write a function to help me out.

I have been wracking my brain about a function helps me translate real world measurements into a Guage such as _HO_ or _OO_ - this gauge correlates with a scale for example _OO_ 1:76

You might find it useful 🤷‍♂️
 

{% codesandbox mode-railway-railroad-gauge-calculator-function-k8is5 %}
ARTICLE ON CSS POSITION AND DISPLAY PROPERTIES

Published: 2021-10-29 21:26:35

CSS position property

Knowing that these (position and display) properties are essential in a CSS program. The “position” property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). It defines the position of an element in a document. This property works with the left, right, top, bottom and z-index properties to determine the final position of an element on a page.

We have five types of position property mentioned earlier, but here we’ll be concentrating on static-type positioning and relative-type positioning.
Static type positioning consists of only one value; position: static. Which is the default and it’s rarely declared. The code looks like this;
     .ourBox{
	position: static;
}

It’s the default positioning of every element, regardless of whether it’s declared or not.
Relative-type positioning consists of the values position: relative, position: absolute and position: fixed. These positioning values interact with each other and allow you to move elements around in interesting ways. For example;
.ourBox{
	position: relative;
	top: 20px;
	Left: 20px;
}

CSS display property
The display CSS property basically tells us how an element is displayed. It sets whether an element is treated as a block element or inline element and the layout used for its children, such as flow layout, flex or grid.

Formally, the display property sets an element's inner and outer display types. The outer type sets an element's participation in flow-layout the inner type sets the layout of children. Some values of display are fully defined in their own individual specifications; for example the detail of what happens when display: flex is declared is defined in the CSS Flexible Box Model specification. 
A block-level element always starts on a new line and takes up the full width available, stretches out to the left and right as far as it can.
An inline element does not start on a new line and only takes up as much width as necessary.
Display Properties are attached to a HTML Document using the following syntax:
block:
   display: block;
display: inline;
block-attribute:

display: block;
Block-level elements start at a new line and the elements come after it has to start at a new line.
It takes up the largest available space.
We can control the width and height of the element.
Elements are affected by margin and padding.
Block-level elements stack on top of each other ( like hamburger ingredients ).

display: inline;
Inline elements take minimum available content space.
We can’t control the width and height of the element.
Only horizontal dimensions are affected by margin and padding properties, element’s width and height will remain unaffected.
My Bespoke JetBrains Toolbox Configuration
Tags: development, programming, tutorials, productivity
Published: 2021-10-29 20:49:46

---
title: My Bespoke JetBrains Toolbox Configuration
published: true
description: This article goes into details about my particular, personal, bespoke JetBrains Toolbox configuration.
tags: #development #programming #tutorials #productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0g7fxehwnpa2xj8r6gcu.png
---
# JetBrains Toolbox Configuration

One thing I do just enough to remember I need to do, but not frequently enough to remember which settings are which, is installing the JetBrains Toolbox app to get the other JetBrains' software installed.

![JetBrains Toolbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ia2a5anop18qnh2x1rk5.png)

The following is the quick list of the key things that I setup to get the most out of Toolbox. This is a quick process and I've detailed it here, one for memory, but also to detail what some of the features provide so this might be of more use to others.

The Toolbox *Settings* options are located by clicking on the gear icon when the application is opened up. This is the same across operating systems; Windows, Ubuntu, MacOS, or others. Find the gear, click it!

![JetBrains Toolbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1tczy2lp0tmlcj4hej4.png)

Once *Settings* are opened up the core 4 configurations include:

![JetBrains Toolbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxcodh22db06m30saejw.png)

1. If you've got an account, login. Everything is easier if you're logged into your account.
2. This second option around the theme is great on MacOS and Ubuntu. I'm not sure what it does on Windows exactly, but presume a similar effect. I myself set this to *Auto* since I always set the OS level theme to dark and love that almost all the apps that I use shift to that theme.

![JetBrains Toolbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5p49wc33gmfz65fn5kd.png)

4. I don't set a shortcut for the toolbox, I simply use the Ctrl+Space to launch it from the spotlight on MacOS and use whatever option to issue apps from command on Windows and Linux OS installations of Toolbox.
5. This section, I'll detail further down, has a host of additional settings around the tools use itself.

I'd have put the rest of the article here, but the image upload is bothersome. Thus I posted the full article on my blog [Composite Code](https://compositecode.blog/), [here](https://compositecode.blog/2021/10/29/jetbrains-toolbox-configuration/).
How to get a user’s LinkedIn account, Twitter username, and more from a single line of code
Tags: api
Published: 2021-10-29 20:35:32

Users' data is the gold for your business. But, how do you know more about your users when you only have or collect a piece of information like phone numbers or emails?

We are living in a digital age where people are more connected than ever before and almost everyone is on social media like Twitter or LinkedIn. One way to know more about your users is to go on the social media they are. But, this will only help if you have a tiny number of users because you have to 
* Try whether they are on Twitter or LinkedIn or another social media
* Manually go on the user social media account to have information

This is not productive for your business, and you shouldn’t even try it. There need to be something better to help you. Like gold, the quality of data is also important. 

Looking around, we could not find a suitable solution that could help us enough, just like you. So, we developed one, and we call it Kelvin Data. Kelvin Data can be used by developers through an API (GraphQL or RESTful) or by anyone through a web portal. 

Your business is so important to us, so we have designed Kelvin Data with that in mind. We focus on structuring and organizing data from around the web to make it accessible and easy-to-use so that you have a ready to use data set while still continuing running your business.

Let’s take a deep dive here to see how to use Kelvin Data to better know your users.

## Kelvin Data 101
No matter what your site or app does, knowing more about your users gives you more opportunities. Let’s see some of them:
* You can easily fight fraud
* Send email based on their location
* Increase your sale power
* And more

Thanks to Kelvin Data, you can achieve your goal with easy, no matter what it is. Here is how it works.

First, you need an API key for authentication with us. You can find one here. Now that you have a valid key, you can make a call to our API by providing us with at least one piece of information you have for your user, like email or phone number.

Let’s consider an example. Your user email is jared@ycombinator.com. The API endpoint you’ll call looks like this:

https://api.kelvindata.com/rest/v1/search-v2?email=jared@ycombinator.com&apiKey=your-apikey-here

And this is the result you’ll have (I’m using the web portal [here](https://www.kelvindata.com/search)).

![Kelvin search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qt93xdispro88chuhhql.PNG)

***
Kelvin Data is a powerful and simple platform whose mission is to structure and organize data from around the web to make it accessible and easy-to-use. We offer flexible [pricing plans](https://www.kelvindata.com/pricing) to meet your business needs. [Sign up](https://www.kelvindata.com/sign-in) to get started, or [contact us](mailto:Hello@KelvinData.com) to learn more.
Implement cool features for my static site generator
Tags: javascript
Published: 2021-10-29 20:18:26

## Introduction
Hello everyone, my name is Dustin. Today, I'd like to talk about my experience of borrowing some cool features from [docusaurus.io](https://docusaurus.io/) to add it to my static site generator.

## What I added
1. [Fully support for markdown file](https://github.com/tuanthanh2067/cv-ssg/commit/146857ec17dc834170e097d215f4dee11c328bac)
2. [Handling metadata](https://github.com/tuanthanh2067/cv-ssg/commit/374e3102b9ee3d5c0f356672d99e4ca8afb7f7cc)
3. [Support static assets such as images](https://github.com/tuanthanh2067/cv-ssg/commit/ae7e54a86880b4fa487248e6ab970020584acb09)

## Process
Implementing those 3 features was quite simple. For metadata and markdown file, I mainly used an external library: [showdown](https://www.npmjs.com/package/showdown) to convert from markdown files to html files as well as parsing metadata from markdown files. 
However, implementing the support for static assets such as images is a bit more interesting. I had to use another external library called [fs-extra](https://www.npmjs.com/package/fs-extra) to copy assets folder from user to the dist folder. I also had to create another new class called `CopyFolder` where I used `fs.copy` method to copy `assets` folder

## Recommend for my friend?
Yes, Docusaurus is highly recommended for developers who just want a simple document for their project, developers just need to focus on the context, Docusaurus will take care of the rest. 

## Future issues
The next step that I wanted to do is to improve static files because right now users have to use exact same word `assets` to make the program run properly.

In the future, I think I'll add `Themes` and main page which will be generated automatically and styled by me with a random theme that I chose beforehand. The main page lists all other pages

[My docusaurus sample repo on Github](https://tuanthanh2067.github.io/docusaurus-sample-repo/build/index.html)
Git push pitfalls to watch out for
Tags: git, programming
Published: 2021-10-29 20:18:13

Git is powerful but its relatively terse and obtuse api can make it hard to be sure what commands are really doing. Here are a couple pitfalls I've found over the years with `git push` that it's good to be aware of.

# Pushing the wrong thing

You're probably familiar with `git push` but do you know all the assumptions that calling it without arguments is making?

`git push` is sugar for `git push [default remote] HEAD:[HEAD's upstream branch]`. So if your local branch's upstream is set to say 'master' you could accidentally overwrite master.

You can adjust the default behavior for `git push` by setting the [`push.default`](https://git-scm.com/docs/git-config#Documentation/git-config.txt-pushdefault) git config

Another trap is `git push origin branch_name`. It expands to `git push origin branch_name:branch_name` so if you're not on branch_name and you expect to push your current branch to remote branch_name you may be surprised (ask me how I know!). 

# Deleting a remote branch on accident

Here's a typo that can burn you hard

DON'T RUN THIS: `git push origin :branch_name'

You may assume that this means push your current branch up as "branch_name" but noooo, it actually will replace the remote branch with nothing, deleting the branch.
My Last Pull Requests For Hacktoberfest  
Tags: opensource, hacktoberfest, react
Published: 2021-10-29 19:26:57

This last week of Hacktoberfest, I finished my last pull requests. I solved an issue for a [Pet Adoption site](https://github.com/drew5494/Awesome-Adoption) built with React. The other pull request involved supporting <code>count(1)</code> for an SQL database queries in [QuestDB](https://github.com/questdb/questdb). 

To solve the first [issue](https://github.com/redxzeta/Awesome-Adoption/issues/198), I had to create a private route for the <code>reset-password</code> page. I had never done this before, so I had to do some research on private routes. I made a mistake at first by using the wrong authentication type but the developer was very helpful and I figured it out.

The other [issue](https://github.com/questdb/questdb/issues/1420) for QuestDB involved accepting <code>count(1)</code> the same way as <code>count()</code> in a database query. I struggled very much with this as it was a larger project. The developer again gave me some directives on what to do. 

Both issues were eventually [merged](https://github.com/redxzeta/Awesome-Adoption/pull/202) just in time. Hacktoberfest was a challenge for me, who is not very experienced as a developer yet, but I managed to complete four pull requests before the deadline and learned a lot from the experience. Best of luck to the other developers who have contributed greatly!
Docker and Kubernetes Made Relatable - IV
Tags: devops, devjournal, docker, kubernetes
Published: 2021-10-29 19:25:46

## How Do External Teams Talk to Each Other?
Pods are ephemeral resources. Deployments can dynamically generate and destroy pods. Because pods are unstable, transient, and volatile, we can’t trust that the application will always be reachable via a pod’s IP.
We’ll need a permanent address that will route requests to whatever pod is active at the time.
### Kubernetes services: The team SPOC that routes relevant external communication to devs
> In Kubernetes, a service is an abstraction which defines a logical set of pods and a policy by which to access them. The set of pods targeted by a service is usually determined by a selector. Kubernetes services provide addresses through which associated pods can be accessed.

Take a look at the service.yaml file below:
{% gist https://gist.github.com/Sampriti-Mitra/05098431d4409820813203d2d87dfa48 %}
This specifies a service that targets the port 10000 of pods with the label `app:myapp`.

### Creating a Kubernetes Service
```
kubectl apply -f service.yaml
```
The minikube tunnel command can be used to expose LoadBalancer services. To keep the LoadBalancer active, it must be run in a separate terminal window.
```
minikube tunnel 
```
> minikube tunnel runs as a process on the host and creates a network route to the cluster’s service CIDR using the cluster’s IP address as a gateway. The tunnel command gives any application on the host operating system immediate access to the external IP address.
```
kubectl get service myapp
```
You should be able to see the external ip; earlier it would have been pending.
Now you can use this ip to open the service in the browser:
```
minikube service --url myapp
```
You should be able to view this in your browser.
`Welcome to myapp!`

The section about services is incomplete without an analogy from the dev life. 
Imagine an external team is unsure or confused about how to use a feature developed by the dev team. One way to resolve the problem is to contact a known developer directly. Of course, that would work, but what in case the developer has moved to a different team and lost context? In this case, the team SPOC comes to the rescue to help route the query within the team.

It’s Been a Long Article… and I Hope To Tell You More About It Next Time!

With that, we come to the end of the series on K8s made relatable and the adventures of the fresher on the first day. However there is more to be learned, and more adventures to follow, so stay tuned!

References
[Kubernetes Service](https://kubernetes.io/docs/concepts/services-networking/service/)
[Kubernetes Deployment](https://kubernetes.io/docs/concepts/workloads/controllers/deployment/)
[Read more about Kubernetes components](https://kubernetes.io/docs/concepts/)
[Docker Containers](https://www.docker.com/resources/what-container)
GitHub Pull Request Template a faster way to document a PR
Tags: github, markdown, devops
Published: 2021-10-29 19:10:22


## Why do you need a Pull Request Template?

Pull Request(PR) are often when raised are not properly documented. The best way to document them is to use a consistent template. The Template will help the team to document the PR in a concise way. PR reviewer gets an idea about what to expect in a PR.

## How to add a GitHub PR Template?

Create a file `pull_request_template.md` inside a root folder of the repository called `./github`

```
./github/pull_request_template.md
```

This file is nothing but a template that will be shown on GitHub PR, when the PR is raised.

## Sample Template file

```
## Description
<!-- Please write a brief information about PR, what it contains, its purpose -->

## Link to Jira
<!-- If there is a ticket for this -->

## Screenshots
<!-- Please add screenshots -->

## Testing
<!-- How to test PR -->
```