teleren/devto huggingface dataset:
Moving Personal Website from ReactJS to GatsbyJS
Tags: webdev, javascript, react, programming
Published: 2021-03-10 01:46:01

---
title: Moving Personal Website from ReactJS to GatsbyJS
published: true
description: Moved personal website to GatsbyJS
tags: webdev, javascript, react, programming
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i72rp9xqkem3ocqlgz5r.png
---
[Personal website](https://www.davina-devs.com/) successfully moved to [GatsbyJS](https://www.gatsbyjs.com/)!

The initial site was built in [ReactJS](https://reactjs.org/) about a few years ago. I wanted to exercise the ReactJS skills that I picked up at my first job. Everything worked fine. But the one thing lacking about my site was routes. I couldn't point potential recruiters to the About page directly where they could find download links to the resumes.

For a long time, I wanted to learn GatsbyJS, but couldn't find the time due to my day job. Finally found some time this weekend to get started. The site is deployed on [Netlify](https://www.netlify.com/).

For the most part, transferring of the site was simple as GatsbyJS is built on ReactJS. The one issue I struggled with was getting [FontAwesome Pro](https://fontawesome.com/) icons to work. After some Googling, I managed to get it working. Apparently, I had to use the FontAwesome's react component to render the icons.

After that I ran into some issues getting the site deployed. This was when I learned how to read the deployment logs on Netlify.

The first errors I encountered was some libraries were missing from the build process. I realised that I had to add an `.npmrc` file. The next error I encountered was:

```
"window" is not available during server side rendering
```

I was using `window` in two places: for the back-to-top button and for extracting the query string. I resolved the back-to-top button by using an anchor tag over a button and modifying some styles. I then researched on alternatives to extracting query string values. I was led to this [StackOverflow post](https://stackoverflow.com/questions/53800162/getting-url-parameters-on-gatsbyjs). I went with using the `query-string` package. The errors were resolved and the site was published successfully.

Later on, I had issues with broken images. Since the projects I've published were little, I didn't want to maintain an API and a DB. I may do it in the future. So I decided to load the projects as static data on the site. After some debugging, I fixed the image urls by adding a `../` to all images under the `/projects` route.

From reading Netlify logs to using the console to debug the image urls, I've learned a lot from deploying this GatsbyJS site. I enjoy exploring and experimenting with new technologies. Hopefully I will have a new project idea for GatsbyJS again!
Learning from my daughter
Tags: development, ios, confidence
Published: 2021-03-10 01:39:49

---
title: Learning from my daughter
published: true
description: Uncertainty is daunting, but can turn to enjoyment
tags: development, iOS, confidence
//cover_image: https://direct_url_to_image.jpg
---

Late last summer, my youngest daughter decided she wanted to swim summer league next summer. I had just taught her to dive and she was getting comfortable in the pool. So we look around and find a local swim team that offers a swim school (that followed COVID protocols) and we signed her up. Two times a week, for 30 minutes per practice, she learned the four strokes of competition swimming.

Swimming was the one sport I was pretty decent at growing up, and she has seemingly inherited similar abilities because after six months, she was asked to be evaluated for the regular team. Last Friday, she showed up, swam one length of the pool in each stroke and was told she was a prime candidate for the age group 3 team, and she could start the following week.

So Monday's practice comes around and there are more swimmers, more structure, and more instruction thrown at her than she had before. I watched from outside the building as she was mentally trying to keep her head above water. Circle swimming, kicking drills, flip turns, breathing, dryland exercises--all of it new. I was not sure how she'd handle all this unfamiliarity and I could tell she was getting frustrated with not knowing what she was supposed to be doing right from the off. Her coach would remind her of the drill, send her on her way and continue to remind her until she got it right.  

I walked away after 15 minutes for fear that my presence might be an additional pressure and I went and sat in my truck. I came back for the last 15 minutes of practice and saw, that as exhausted she was (practice is an hour), she appeared to be more confident in the water. There wasn't this look of uncertainty and tentativeness that I had seen earlier. She embraced the unfamiliarity, trudged along while getting feedback on where to improve and though utterly exhausted by the end of practice, proud of herself for being able to complete what she called "real practice".

This lesson hit home for me as over the last few weeks at work, I felt like I haven't been getting much done. I've had to focus on tasks where I don't feel comfortable with what I'm doing and I'm not all that sure that my solutions are going to work. But watching her practice reminded me that my console is my coach, pointing out my errors, trying to nudge me in the right direction, and that if I continue to listen, I will eventually feel more comfortable in the task assigned. So like my daughter, I'm trying to remind myself to jump in, break some things and get the feedback I need to learn and grow. It is rewarding to see my daughter learn these lessons, and so good for me to see problem solving through the eyes of a child.
Consuming high-throughput Redis streams with Rust
Tags: rust, redis, performance
Published: 2021-03-10 01:35:07

Today I’d like to share a small rust library that helps you produce and consume Redis stream data.

Based on [redis-rs](https://github.com/mitsuhiko/redis-rs), this library is a port of the Elixir [Redix.Stream](https://github.com/compound-finance/redix_stream) library.

We have been using at [Klaxit](https://github.com/klaxit) to process the combined log streams from Heroku’s [Logplex](https://devcenter.heroku.com/articles/logplex) and automatically fix some performance issues that sometimes happen on Heroku even before our users notice them.

We also use it to scale some services when needed.

It’s been running in production with great success for more than six months.

The project is available here: https://github.com/klaxit/redis-stream-rs.

Feel free to check the README for simple and more advanced (aka consumer groups) usage!

This is our first Rust project, so all feedbacks are welcome!

Enjoy ;-)
Build a Paid Membership Site with Magic and Stripe: Pt. 4 - Deploy to Heroku
Tags: passwordless, stripe, magic, auth
Published: 2021-03-10 01:28:26

---
title: Build a Paid Membership Site with Magic and Stripe: Pt. 4 - Deploy to Heroku
published: true
description: Learn how to seamlessly deploy your very own paid membership site to Heroku!
tags: passwordless, stripe, magic, auth
cover_image: https://i.imgur.com/EElejSN.png
---

This is the final part of the Build a Paid Membership Site with Magic and Stripe series. Make sure to read the following articles before proceeding:

1. [**Quickstart**](https://dev.to/magiclabs/build-a-paid-membership-site-with-magic-and-stripe-pt-1-quickstart-bp) to set up Stripe and Magic.
2. [**How the React client side is built**](https://dev.to/magiclabs/build-a-paid-membership-site-with-magic-and-stripe-pt-2-react-client-3j3m).
3. [**How the Node server side is built**](https://dev.to/magiclabs/build-a-paid-membership-site-with-magic-and-stripe-pt-3-node-server-1f73).

# Deploying to Heroku
## Create a Project
🚀 Want to deploy your app on Heroku? First, [install the Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli). Then run `heroku create` to generate a new Heroku project. It will return your Heroku app URL, similar to what is shown below.

```txt
$ heroku create

Creating app... done, ⬢ cryptic-waters-25194
https://cryptic-waters-25194.herokuapp.com/ | https://git.heroku.com/cryptic-waters-25194.git
```

## Set Config Vars (.env)
Now let's set the production .env variables for our app. Locate your new project on Heroku and go to **Settings**. In Heroku, we set up .env variables under **Config Vars**. Click `Reveal Config Vars` and enter both of your client and server side environment variables.

## Update Server.js
Add the following into your `server.js` file so that Heroku knows how to build your app.

```js
/* File: server.js */

// For heroku deployment
if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}
```

## Update Package.json
In `package.json`, add this to the `scripts` object:
```
/* File: The server's package.json */

"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
```

Now you can run the following commands to deploy your application:

```
$ git add .
$ git commit -m 'your message'
$ git push heroku master
```

Heroku should have given you a link to your live app. Congrats! 🎉

# Outro
That's it for today! If you'd like more tutorials on Stripe x Magic, (**e.g.** how to create a subscription membership website) please let us know in the comments section below. 

Until next time 🙋🏻‍♀️ ♡.
Writing a Perl Core Feature - Writing a Perl Core Feature
Tags: perl, c, yacc
Published: 2021-03-10 01:26:17

This is introduction of Perl topic.

This topic write the topic how to add Core Features to Perl.

https://leonerds-code.blogspot.com/2021/02/writing-perl-core-feature.html

Perl is written C language and yacc(not pure yacc). Adding Core Features is difficult if there is no acknowledgement.

After reading this article, you'll know how to do it.
How I merged/migrated my personal website and content using Hugo
Tags: hugo, go, jamstack
Published: 2023-07-13 00:21:43

---
title: How I merged/migrated my personal website and content using Hugo
published: true
date: 2021-03-10 00:59:20 UTC
tags: [hugo, go, jamstack]
canonical_url:  https://aviebrantz.com/articles/2021/2021-03-09_how-i-merged-migrated-my-personal-website-and-content-using-hugo/
---

I noticed that has been a while since I wrote an actual article and I was kind of not satisfied with my current state of some of my content being spread between my Github, Medium and Youtube. I was always trying to get my website to be up to date, but was the process was too manual. So, as I good engineer, I decided to over-engineer my own personal website and try to put everything into a central place using Hugo and Go.

> [See my the article on my website](https://aviebrantz.com/articles/2021/2021-03-09_how-i-merged-migrated-my-personal-website-and-content-using-hugo/)
URL Shortener Template
Tags: express, template, node
Published: 2021-03-10 00:58:16

> _**This article is very old, the project still works but it is no longer maintained.**_

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

**A very simple URL shortener built with express and lowdb. [View the Demo!](https://url-shortener-template.glitch.me)**


## Features
- Simple and elegant UI.
- Very easy to setup: [Remix on Glitch](https://glitch.com/edit/#!/remix/url-shortener-template) or [Run on Repl.it](https://repl.it/glitch/url-shortener-template)
- Works well on mobile.
- Open Source on [GitHub](https://github.com/remiixinc/url-shortener) and [Glitch](https://glitch.com/#!/url-shortener-template).
Day 36: React Form Validation
Tags: 100daysofcode, react, javascript
Published: 2021-03-10 00:50:06

```javascript
import React from 'react';
import yup from 'yup';

const FormComponent = ({ values, errors, onChange, onBlur, onSubmit }) => (
  <form onSubmit={onSubmit}>
    <input onChange={onChange} value={values.email} error={errors.email} />
  </form>
);

const Form = createForm({
  validations: {
    email: yup.string().email().required()
  },
  adapter: 'yup'
})(FormComponent);

class PageWithForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { errors: {} };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit({ values, errors, isValid }) {
    this.props.createResource(values).catch((err) => this.setState({ errors: err }));
  }

  render() {
    return <Form errors={errors} onSubmit={this.handleSubmit} />
  }
}

const mapStateToProps = () => ({});
const mapDispatchToProps = (dispatch) => ({
  createResource: (resourceProps) => dispatch(saveResource(resourceProps)),
});

export default connect(mapStateToProps, mapDispatchToProps)(PageWithForm);
```
12 years later, a tough coding problem only took me 12 minutes to solve
Tags: javascript, functional, programming, celebration
Published: 2021-03-10 00:45:27

#The coding problem
* I want to build up a list of pre-determined functions, then dynamically apply them to a list

## For example
```javascript
const list = [1,2,3,4,5,6,7,8,9,10];

function under8(i) { return i < 8 }
function over3(i) { return i > 3 }
function under6(i) { return i < 6 }
function over4(i) { return i > 4 }

let fns = []

// accumulate the list of functions to apply
fns = [under8, over3, under6, over4]

let filteredList;

// build a program that generates a filtered array from list

// Testing the program
console.log(filteredList) // -> 5
```

## After only one bout of over-thinking, the solution hit me!

```javascript
filteredList = fns.reduce((acc, fn) => {
  return acc.filter(fn)
}, list)
```

## How it works
1. The array of functions is iterated through
2. The sequence starts with the list of 10 numbers
3. Each iteration, the current function is used to filter the list
4. The resulting subset of items from list is carried through to the next iteration, where the next function is applied as a filter
5. The result is saved as a new array into filteredList
6. The output is list, after being filtered by each function that has been added to the fns list

###Moments like this feel great. Celebrate them when you can.
Thank you, functional programming.
A case for trunk-based development
Tags: productivity, cicd, devops
Published: 2021-03-15 08:36:18

---
title: A case for trunk-based development
published: true
date: 2021-03-10 00:00:00 UTC
tags: productivity, cicd, devops
canonical_url: https://jhall.io/archive/2021/03/10/a-case-for-trunk-based-development/
---

Yesterday I explained that [GitFlow is anti-agile](https://jhall.io/archive/2021/03/09/gitflow-is-anti-agile/), but what’s the better alternative?

[Trunk-based development](https://trunkbaseddevelopment.com/) is the core method I advocate. The one-line summary is:

> A source-control branching model, where developers collaborate on code in a single branch called ‘trunk’\*, resist any pressure to create other long-lived development branches by employing documented techniques. They therefore avoid merge hell, do not break the build, and live happily ever after.
> 
> - main or master, in Git nomenclature

There are a number of variations I use in specific situations, but the core practices of meaningful trunk-based development are:

- There is **a single immortal** branch: mainline (often called `master`, or `main` in git).
- The mainline branch must _always_ be **release ready**.
- All coding happens in short-lived feature branches, which are frequently merged into mainline, then deleted.

This approach offers many benefits which I won’t get into today, but one is that it’s a natural fit for [_real_ continuous integration](https://jhall.io/archive/2021/02/18/youre-probably-using-the-wrong-definition-of-continuous-integration/).
How to put text inside pseudo elements in CSS?
Tags: css
Published: 2021-03-10 00:00:00

---
  title: How to put text inside pseudo elements in CSS?
  published: true
  tags: CSS
  date: Wed Mar 10 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/put-text-in-pseudo-elements-css
  cover_image: https://melvingeorge.me/_next/static/images/main-c1651200fcd5338152e849d563196a5c.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/put-text-in-pseudo-elements-css)
  
To put text inside pseudo-elements like `:before` and `:after`, you can use the `content` property in the CSS and pass the text you want to be displayed as a string.

```css
/* Put text in Pseudo element ✅ */
div:after {
  content: "Hello World!";
}
```

That's it! 🔥

See the above code live in [JSBin](https://jsbin.com/buracuhamu/3/edit?html,css,output)

### Feel free to share if you found this useful 😃.

---
Null e Undefined
Published: 2021-03-09 23:56:37

Chegamos a mais um post da minha [saga de estudos](https://dev.to/inando85/bem-vindo-de-novo-javascript-1b48) em JavaScript.

Hoje irei falar um pouco sobre os tipos de dados `null` e `undefined`.

Os dois tipos são muito parecidos, ambos indicam a falta de valor.

A principal diferença entre eles é que o tipo `null` deve ser intencionalmente atribuído, já o `undefined`, é injetado automaticamente por baixo dos panos pelo próprio JavaScript.

#### Null

~~~javascript
let emptiness = null

console.log(emptiness) // null 
console.log(emptiness + 3) // 3
console.log('O valor é: ' + emptiness) // O valor é null
~~~

Observando o código acima, podemos notar:

- 1: O valor da variável é `null`, que foi o tipo de dado atribuído.
- 2: A operação matemática retorna 3, pois quando tentamos realizar operações matemáticas com o ``null, é automaticamente atribuído o valor `0` (zero) para ele.
- 3: Quando o tipo de dado `null` é inserido dentro de uma string, ele é automaticamente convertido pelo JavaScript para `string`.


#### Undefined

~~~javascript
let emptiness

console.log(emptiness) // undefined 
console.log(emptiness + 3) // NaN
console.log('O valor é: ' + emptiness) // O valor é undefined
~~~

Observando o código acima, podemos notar:

- 1: O valor da variável é `undefined`, este valor foi injetado de forma automatica pelo JavaScript.
- 2: A operação matemática retorna `NaN` (Not a Number), pois quando tentamos realizar uma operação que não faz nenhum sentido (`undefined`+ 3). 
- 3: Quando o tipo de dado `undefined` é inserido dentro de uma `string`, ele é automaticamente convertido pelo JavaScript para `string`.

Para mais detalhes sobre [Null](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null) e [Undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined).

________________________________________________________________

Esse foi mais um post da minha saga de estudos em JavaScript Vanilla. Espero que estejam gostando!

Qualquer dúvida ou sugestão, vocês me encontram nas minhas redes sociais:

[LinkedIn](https://linkedin.com/in/inando85)
[GIthub](https://github.com/inando85)
[Twitter](https://twitter.com/inando85)
623. Add One Row to Tree (javascript solution)
Tags: algorithms, javascript
Published: 2021-03-09 23:52:02

###Description:

Given the root of a binary tree, then value v and depth d, you need to add a row of nodes with value v at the given depth d. The root node is at depth 1.

The adding rule is: given a positive integer depth d, for each NOT null tree nodes N in depth d-1, create two tree nodes with value v as N's left subtree root and right subtree root. And N's original left subtree should be the left subtree of the new left subtree root, its original right subtree should be the right subtree of the new right subtree root. If depth d is 1 that means there is no depth d-1 at all, then create a tree node with value v as the new root of the whole original tree, and the original tree is the new root's left subtree.

###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
// DFS approach
var addOneRow = function(root, v, d) {
    if (d === 1) {
        const node = new TreeNode(v);
        node.left = root;
        return node;
    }
    insert(v, root, 1, d);
    return root;
}

function insert(val, node, depth, n) {
    if (node === null)
        return;
    // Stop when we hit n - 1 and add the new nodes at the current level
    if (depth == n - 1) {
        let t = node.left;
        node.left = new TreeNode(val);
        node.left.left = t;
        t = node.right;
        node.right = new TreeNode(val);
        node.right.right = t;
    } 
    // Keep traversing down the tree if we are not on the correct level
    else {
        insert(val, node.left, depth + 1, n);
        insert(val, node.right, depth + 1, n);
    }
}
```
How to create Web Development Environment with Ubuntu and Perl?
Tags: perl, linux, ubuntu, webdev
Published: 2021-03-09 23:51:34

How to create Web Development Environment with Ubuntu and Perl?

I wrote the site to resolve this question at last one year in Japan.

This is Japanese, on the other hand, automatically translation is good in 2021. Maybe you understand commands.

<a href="https://translate.google.com/translate?sl=ja&tl=en&u=https://www.ubuntu-perl-web.com/">Ubuntu + Perl - Let's build Web Sysmtem Development Environment</a>
How to Deploy Hugo to China?
Tags: hugo, go, ssg, china
Published: 2021-03-09 23:17:51

---
canonical_url: https://www.21cloudbox.com/solutions/how-to-deploy-hugo-in-production-server.html
---
# What is Hugo?
Hugo is an open source static site generator (SSG) based on the Go language. It is extremely fast and can package a 20-page static blog in a few milliseconds. Entities such as [1Password Support](https://gohugo.io/showcase/1password-support/) and [Let's Encrypt](https://gohugo.io/showcase/letsencrypt/) use Hugo to make their static sites.

21YunBox provides a very simple Hugo deployment method. You can deploy on the 21YunBox in the form of a **static site**.


# How to Deploy Hugo in China?

1. Register to become a [21YunBox member](https://www.21cloudbox.com/u/signup/)
2. Fork [Hugo Example](https://gitee.com/eryiyunbox-examples/hello-hugo)
3. Create with the following configuration


| Environment       | `Static Site`            |
| ----------------- | :-------------:          |
| Build command     | **`hugo --gc --minify`** |
| Release Directory | **`./public`**           |

If you'd like a step by step example, please refer to the video below:
[How to deploy Hugo to the server operation video](https://www.bilibili.com/video/BV1gr4y1T76q)

# Why Choose 21YunBox?

> 21YunBox is a Cloud Service Platform based out of Beijing, China. Our services provides you with an easy and budget friendly, end-to-end web platform deployment service for all applications and stacks. No matter your need, we have a flexible solution to assist.
>
> If needed, we also offer [full support in obtaining your ICP license](https://launch-in-china.21yunbox.com/solutions/how-to-get-an-ICP-license-for-china.html) which allows you to legally host online content within Mainland China.


To learn about the differences between 21YunBox and these foreign (outside of China) cloud service platforms, please refer to:

* [21YunBox vs Heroku](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-heroku-in-china.html)
* [21YunBox vs Netlify](https://launch-in-china.21yunbox.com/blog/solutions/alternatives-to-netlify-in-china.html)
* [21YunBox vs Vercel](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-vercel-in-china.html)
* [21YunBox vs Gatsby Cloud](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-gatsby-cloud-in-china.html)
* [21YunBox vs Github Pages](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-github-pages-in-china.html)
* [21YunBox vs Surge.sh](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-surgesh-in-china.html)
* [Compare in terms of function and price: 21YunBox vs Heroku, Netlify, Vercel](https://www.21yunbox.com/compare-others/)


<br>
*This article's content originated [here](https://launch-in-china.21yunbox.com/solutions/how-to-deploy-hugo-in-production-server.html)*

*For additional detail and future modifications, refer the original post.*