teleren/devto huggingface dataset:
Hacktoberfest 2021: Project Maintenance
Tags: hacktoberfest, project, maintenance, github
Published: 2021-10-28 03:25:43

---
title: Hacktoberfest 2021: Project Maintenance
published: true
description: How I became a project maintainer during the month of October
tags: hacktoberfest, project, maintenance, github
cover_image: https://repository-images.githubusercontent.com/412858870/48101a37-512f-4b57-9b9c-f0832fee5161
series: Hacktoberfest Journey
---

## Overview
At the beginning of October, I made this:
{% github vivian-dai/Hacktoberfest-2021-Repos no-readme %}
At the time, I don't think I really thought about what this project would become or what kind of impact it might have, I just genuinely wanted to figure out how to win a T-shirt without too much of a hassle.

## Progress
By the end of October, this repository had over 200 commits, 30 stars, over 60 forks, over 70 merged pull requests, and over 40 different contributors. I didn't really expect it to get anywhere near this big. In a single month, this repository evolved quite a bit.
### Notable Benchmarks
{% github https://github.com/vivian-dai/Hacktoberfest-2021-Repos/pull/8 %}
This contribution converted the organization of the repository list from just a list to tables which look much nicer.
{% github https://github.com/vivian-dai/Hacktoberfest-2021-Repos/pull/47 %}
Here, an archive was introduced on top of the blacklist for projects that aren't actually excluded but are inactive. I thought this was a pretty cool idea.
{% github https://github.com/vivian-dai/Hacktoberfest-2021-Repos/pull/41 %}
This sorted the excluded repositories in alphabetical order which meant I didn't need to perform a linear scan to see if the repository was already listed. It reduced the time complexity of my code reviews from O(n) to O(logn).

## Next Steps
In all honesty, I will probably leave next steps to next year. Sorting each individual section (topics and languages) in alphabetical order would be nice. I should also update the contributing file to specify specific things people can do (eg. add a Hacktoberfest accepted repository, add a blacklisted repository) and specify the exact guidelines they'd need to follow.

Well, until next year! Happy hacking!
Custom og title, description and image input in nextjs, reactjs
Published: 2021-10-28 03:08:46

Now, on [@dsabyte](www.dsabyte.com) online editor, user can give custom og title, description and image. 

Go to [here](https://www.dsabyte.com/posts/publish) and select post or series to create. 

Then write some markdown and click on publish. Then provide some tags, and click on preview. 

There you'll see a box on the right side for SEO.
Asynchronous JavaScript: callbacks, promises and async/await.
Tags: javascript, async, codenewbie, programming
Published: 2021-10-28 02:40:45

Hi! 

First JavaScript is a single-threaded programming language, which means only one thing can happen at a time. That happen, because the JavaScript engine can only process one statement at a time. So, the asynchronous is the action that do not happen at a time. And, Why is important understand the asynchronous in JS?. Always we work with data, sometimes we have to work with some APIs and depending the situation the server take some time to process the request at a time block the tread making the web unresponsive. That's where asynchronous comes into play. 

JavaScript has three ways to handle the asynchronous: callbacks, promises and async/await. 

### Callbacks

A callback is a function passed into another functions as an argument. 

```JS
function myName(name) {
  return name
}

function hello(callback) {
  console.log("Hello" + " " + callback)
}

hello(myName("Karen")) // Hello Karen
```

In this case, we have two functions, in the first, we need to get a value: name. So, we get it within a function. In the second function, we use the value that we returned at the first function and we use it in the second. So, to make it successful, we're going to passe the myName functions as a parameter inside the hello function. 

### Promises

A promise is a special object in JavaScript, 'cause that links the producer code and consuming code. When we talk about producer code, we must through something that takes time to be processed. And the consuming code as something to provide us a result.

A promise has two properties: the state and the result.
The *state* can be: pending, fulfilled and rejected.
The *result* can be: undefined, a result value or an error object.

Now the syntax for a promise is next:

```JS
let thePromise = new Promise(function(resolve, reject) {
  resolve("done");
  reject(new Error("…")); 
});
```
Inside a promise, we have two arguments: *resolve* and *reject*. Both arguments are callbacks provided by JS. The resolve callback is being executed if the job is finished successfully. Meanwhile, the reject is be executed if an error has occurred.

### Async/Await

Make the promises easier to write within two keywords:
1.- Async: Makes a functions return a promise.
2.- Await: Makes a functions wait for a promise.

```JS
const myName = (name) => name

const hello = async () => {
  const result = await myName("Karen")
  console.log(`Hello ${result} `) // Hello Karen
}
```
An NFT based game
Tags: web3, dapp, react
Published: 2021-10-28 02:29:29

## The project
So this past week I built out my second dApp with the current cohort in the [Buildspace](https://buildspace.so) community. This time round, the project was to create an NFT based game. The goal was to make a game where you could attack a big boss via a transaction on the blockchain that would use a game smart contract.

So like the previous dApp, this required some knowledge of Solidity to build out our smart contact, [Hardhat](https://hardhat.org/) to help us develop our dApp with ETH, and some frontend skills (React and JavaScript).

The project provides a template for the frontend part, but once again I used my [web3 starter project](https://github.com/nickytonline/web3-starter). The benefit of building out with the web3 starter is I'm improving the starter project. 😎

## Going off script

Like the first dApp I built, I made it my own. Here's some fun screenshots from the game I made.

### Select your player

<center>

![Mint your player in Terrible Characters](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5apna2gthcp2uzp67vd.gif)

</center>

### Mint your player

<center>

![Player being minted](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh00c3pltuxe2gexjzk3.gif)

 </center>

### Attack the big boss

<center>

![A player with a minted NFT attacking a big boss in Terrible Characters](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1w4w5ypmaa2bazttn66.gif)

</center>

### When your player is dead

<center>

![When your player is dead](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5ask849iqilo3r53uw0.png)
 

</center>

If you're interested in how it's all built, I've open sourced it. I’m sure there’s some refactoring to do, but I’m really happy hour it turned out.

{%github https://github.com/nickytonline/terrible-characters %}

If you want to just check out the game, head on over to [nftgame.iamdeveloper.com](https://nftgame.iamdeveloper.com). Note that it's only on the Rinkeby test network so no real coin will be used.

Until next time!
Easy View Components In Jekyll
Tags: ruby, ssg, jekyll, quicktip
Published: 2021-11-01 18:11:39

---
title: Easy View Components In Jekyll
published: true
date: 2021-10-28 00:00:00 UTC
tags: ruby,ssg,jekyll,quicktip
canonical_url: http://matheusrich.com/components-in-jekyll/
---

[Jekyll](https://jekyllrb.com/) is a famous static site generator. It has over 43k stars on GitHub, but in our current [JAMstack](https://jamstack.org/what-is-jamstack/) world, it’s not the shiniest star anymore.

With web development becoming more complex — some would say _too_complicated—, Jekyll may feel bare bones when compared with competitor tools. One of the key aspects it lacks is components, which becomes a must with the introduction of [utility-first CSS](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/) libraries like [Tailwind](https://tailwindcss.com/).

I was losing hope, but then I discovered the [`include`](https://jekyllrb.com/docs/includes/) tag.

## Creating components

Include tags are kinda similar to partials in Rails: they allow us to include content from another file (stored in the `_includes` directory).

```liquid
  <!-- This includes the contents of _includes/footer.html into this file -->
  {% include footer.html %}
```

The cool thing is that you can pass parameters to include tags! This is where things start to get interesting. We can create components similar to what we would do with React, for example. But instead of using JS, we use [Liquid](https://shopify.github.io/liquid/).


```html
<aside class="max-w-md p-5 rounded bg-gray-50 border-l-4 border-l-blue-500">
  <strong class="block mb-4">{{include.title}}</strong>
  <p>{{include.content}}</p>
</aside>
```
<figcaption>Poorman's JSX</figcaption>


And we use it in the template like this:

```liquid
{% include aside.html title="Include tags are cool" content="Keep reading for caviats, tho" %}
```

It’s even possible to have parameters with default values using Liquid’s [`default`](https://shopify.github.io/liquid/filters/default/) filter:

```html
<aside class="max-w-md p-5 rounded bg-gray-50 border-l-4 border-l-blue-500">
  <strong class="block mb-4">{{include.title | default: 'Note' }}</strong> <!-- default value here -->
  <p>{{include.content}}</p>
</aside>
```

## Don’t be greedy!

Include tags are powerful, but they add an overhead on the build time for your site, so don’t use them for _every single thing_. The docs recommend not using them for every image on your blog, for example.

A different approach would be using [custom Liquid tags](https://jekyllrb.com/docs/plugins/tags/) to create components, but note that they are [not supported](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/troubleshooting-jekyll-build-errors-for-github-pages-sites#unknown-tag-error) by GitHub Pages — so automatic build/deploy won’t work.

  

> <small>TIP: If you wanna something more… <em>modern (?)</em> for doing JAMstack with Ruby, check out <a href="https://bridgetownrb.com/">Bridgetown</a>.</small>
How To Use Firebase Authentication With Gatsby
Tags: react, gatsby, firebase, jamstack
Published: 2021-10-27 23:57:29

I have been working on a new project. And I wanted to share my journey of implementing Firebase Authentication on a Gatsby site. Hope this can be helpful to others. I always appreciate any feedback or questions.

https://ongomobile.medium.com/how-to-use-firebase-authentication-with-gatsby-ad4a5cdcb295
Deploy Your Project Live On Netlify.
Tags: codenewbie, beginners, netlify, webdev
Published: 2021-10-27 23:42:21

Have you ever wondered how to view your project live from anywhere not just your local machine as a beginner? You are not alone most beginners do that including me. :)

Today what I will be showing you guys is a way of deploying your project live using [netlify](https://www.netlify.com/).

### What is netlify?

Netlify is a cloud platform that allows developers to Build, deploy, and scale modern web projects.

Now let's get started.

### Create a netlify account

Visit [netlify.com](https://www.netlify.com/) and click the signup button in the top-left corner of the webpage. There are a bunch of options to signup, but I will recommend signing up with [Github](github.com).

### Deploy your project

After you successfully log in, navigate to the site's page. At the bottom of the page, you will see a section like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wl2i8mxmvwg4x4u2jm7p.png)

All you need to do is to drag your project folder into the area and netlify will finish all the work.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77owbhixgpz1lv85w0kc.png)

Wait for a few minutes for the projects to finish deploying. When that's done let's make the URL more readable by changing the site name. go to the `Site Settings` page, under the general tab you will see the `Site Details` section, right at the bottom you will find the `Change Site Name` button and change it to something like **preview-project** it can be anything you could remember.

All good, now visit the site, [https://preview-project.netlify.app](https://preview-project.netlify.app/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2his0qi37e7scsepm1m.png)

**Note:** This tutorial is geared more toward beginners.
I can't believe you're not adding observability
Tags: observability, kubernetes, newrelic, devops
Published: 2021-10-27 23:29:08

---
title: I can't believe you're not adding observability
published: true
description: I want to talk to you about observability, the art of understanding errors and performance of your technology stack by implementing monitoring and some kind of tool to view that monitoring.
tags: observability, kubernetes, newrelic, devops
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4x5qjvnwgn8os6yowsih.jpg
---

*cover image by [uppsa uppsa](https://www.flickr.com/photos/141665267@N08/27491358331/)*

I want to talk to you about observability, the art of understanding errors and performance of your technology stack by implementing monitoring and some kind of tool to view that monitoring.

Listen, if you're making money as an engineer in the tech industry, you're doing a good job. Functional? Object-oriented? Microservices? One big scary monolith? 

If what you do is paying for groceries and keeping a roof over your head then it's good code, good architecture, and you have nothing to apologize for.

![a monolith](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phl5ezf20jt1drgmdrp5.jpg)
*if this thing pays the bills it's good technology*

So when I say 'I can't believe you're not doing observability' it's not about whether your technology is good in any absolute, Manichean sense. I completely understand how observability can seem like a reach goal, a nice-to-have, something that might be useful in other shops but not here, always moved to the next sprint.

### But I don't know how you're not *stressed out all the time* without observability.

Like, what happens when the site goes down late at night? I've been on teams without any kind of standardized monitoring so I know what happens: the best operations person you have gets woken up. If she's unavailable or can't figure it out then *everybody* gets woken up until someone finds the problem from scouring logs, reverting changes, or testing the system by brute force.

And I've also been in teams where performance trends were invisible, so it was impossible to explain to our PM's why we needed 2 weeks to handle tech debt.

So I think observability is something everyone should be doing. DevOps in its purest form. A concern shared across all technical roles and appreciated by management.

I cannot bring you to this promised land of restful nights and pretty charts, but I can show you how to get there. New Relic can monitor dozens of services using a free tier account, and our free conference next week can show you how to monitor everything from front-end React to Kubernetes clusters.

Register for [Data Nerd Days November 3rd](https://hopin.com/events/data-nerd-days-2-0?utm_source=Dev.to&utm_campaign=Community), I'll be talking about monitoring serverless. As of the time of writing this article, the next few hundred registrants will get sweatshirts.

If you don't use New Relic use another tool, but for all love do add some observability to your stack soon.
Grpc web limitations
Tags: flutter, webdev, devops, opensource
Published: 2021-10-27 23:22:24

I vent: Im trying to make a simple program (chatroulette like) with go server and flutter web client, using grpc apis, but I found some problems when the grpc gateway try to decode the json from the client, p.s. i don't know dart, but seems java :| And with this, and also all the problems related to the web standards (http 1.1, cors), I would like to expose the disappointment on the web world
https://github.com/LorenzoTinfena/chat-and-meet-client
https://github.com/LorenzoTinfena/chat-and-meet-server
First opportunity
Tags: beginners, programming
Published: 2021-10-27 23:18:59

Looking for opportunities in the various fields of activity is very dynamic, but we must have the tricks to get the opportunity faster.

I believe that a golden opportunity that will add a lot in your future as a developer is joining Software House or Startup.

My first opportunity was at a startup and I learned a lot, as I had daily contact even with the Designer.

> 'Strap on your seat belt if you’re signing up for a startup. 
It’s a high-velocity experience'. by Tim Ferriss.

Hiring in Startup and Software House often doesn't have the complication in the admission process. Outside, you will earn your first money, the knowledge you will have daily will be outside the curve.

Many companies have well-defined positions and you don't have direct contact with the other positions, what you do is only what you were hired to do. You'll learn a lot too, but you'll have your hands tied on just that. But if you are looking to grow in other fields, beyond what you are hired to do, I believe that software house and startup is a great option for you to get started.
When does a pointer become dangling in C/C++? | Why isn't this example dangling?
Tags: c, cpp, watercooler
Published: 2021-10-27 22:01:54

<sup>All testing has been done on [SoloLearn](https://www.sololearn.com/)'s [C++ playground](https://code.sololearn.com/cpp).</sup>  
So, I was planning on making a post on a custom pointer datatype, and I was playing around with (raw-)pointers, and I wanted to test something, to see if I could (purposefully) get a pointer to dangle, so I tried something I was certain would work:
```cpp
int main() {
    int* p;
    {
        int i = 10;
        p = &i;
    }
    std::cout << p;
}
```
and I was baffled when I saw `10` in the output box.
So, I tried (virtually) the same thing in C:
```c
int main() {
    int* p;
    {
        int i = 10;
        p = &i;
    }
    printf("%d", *p);
}
```
and I got `10` again.

I thought the conditions for a pointer to become dangling was for the referenced value to leave the current scope. But as it's apparent, even though `i` (and its value) leaves the scope.<sup><small> (Yes, it is leaving the scope, for anyone who wants to object. This is called a guard-scope, and allows temporary variables to exist.)</small></sup>
So, what are the actual conditions for a pointer to become dangling? And<sup>/or</sup> why is my example NOT dangling?  

<h1><b>Thanks!<br/>Cheers!</b></h1>
Jamstack Conf 2021
Published: 2021-10-27 22:11:31

Have Single-Page Apps Ruined the Web? | Transitional Apps with Rich Harris

What do you already know about the session topic?
 
Before watching this talk, I was aware of single-page applications since I have developed them both for school or professionally. At the end of the day, An SPA is a single page that interacts with the user on a continual basis by dynamically modifying the current page rather than loading complete new pages from the server. Gmail, Facebook, and Twitter are examples of this.
 
What did you learn?
 
I learned about how critiques on both sides of the medallion (SPA vs MPA) can have solid points and arguments against each other. I learned that the main pros of SPA’s are single codebase, fast navigation, persistent elements, and client-side state management, Whereas the pros of MPA’s are Server-rendered (or static file, etc.), fast initial load, working without JavaScript by default, consistent experience with accessibility features built-in, and the ability to use whatever technology the user prefers.
 
The cons of SPA’s are its lack of resilience, needing too much JavaScript, and a typical low initial page load performance. When it comes to MPA’s the cons are having to use 2 apps instead of 1, sluggish navigation, the need to re-evaluate all JS on every page load.
 
Follow-up questions, conclusion.
 
Through “transitional design”, transitional apps can have an effect that is the best of both worlds (SPA vs MPA). SvelteKit, which is a meta-framework Rich Harris’ team is currently working on, is a toolkit for building transitional apps. I would want to see a demo for this even though GitHub boilerplate is provided.
SOLID Principles of Software Architectures
Tags: softwaredevelopment, softwarearchitectures, solidprinciples, softwareprinciples
Published: 2021-10-27 22:09:18

SOLID design principles are five software design principles that enable you to write effective object-oriented code.
The SOLID name is a mnemonic acronym where each letter represents a software design principle, as follows:

01) S for Single Responsibility Principle
02) O for Open/Closed Principle
03) L for Liskov Substitution Principle
04) I for Interface Segregation Principle
05) D for Dependency Inversion Principle

The five principles overlap here and there, and programmers use them broadly. SOLID principles lead to more flexible and stable software architecture that’s easier to maintain and extend, and less likely to break.

Let's us consider each of the principles

Single Responsibility Principle ==>

Each of the services in the microservices architecture should be designed to adhere to a single objective. Simply put, they should have a unique responsibility and be the sole reason behind the change.

Open/Closed Principle ==>

It should be easy to expand the functionality of independent software modules. That is, the expandability of a specific service should not impact the original behavior of the software.

Liskov Substitution Principle ==>

Any two independent services should be able to communicate with each other whenever required through an API call. Also, two services having the same contract should be able to act as a substitute between each other, without altering the overall system.

Interface Segregation Principle ==>

The software should be divided into microservices in a way that there are no redundancies present. That is, the smaller modules should be loosely coupled to satisfy the client’s needs, along with minimizing the anti-patterns present in the code.

Dependency Inversion Principle ==>

The high-levels modules should not be depending on low-lower-level modules. Instead, they both should lean on abstractions. Following the same principle, abstractions should rely on details, while the vice-versa holds true. This principle ensures that changes to the higher-level modules will not affect the lower-level modules.


Thank you..........
Git My Dots! I made a simple dotfiles manager that's based on Git hooks
Tags: linux, bash, dotfiles, opensource
Published: 2021-10-27 22:05:43

Git My Dots! is a simple tool that packs in 4 simple commands to help you manage your dotfiles repositories. It can easily and instantly get rid of and install new dotfiles so you can try all the amazing stuff the people here at r/unixporn do!

Check out the GitHub repository if you're interested, I'd very much appreciate any feedback. There's a lengthy and detailed README over there!

https://github.com/Syndelis/git-my-dots
vue__WEBPACK_IMPORTED_MODULE_0__.reactive) is not a function

Tags: vue, javascript
Published: 2021-10-27 21:45:58

vue__WEBPACK_IMPORTED_MODULE_0__.reactive) is not a function

Trying to upgrade v2 to v3 with vuex 4 version and getting below error

vuex.esm-bundler.js?16b2:140 Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.reactive) is not a function
Simple bash script to create a tar archive from custom source with optional encryption and files exclusion
Tags: bash, backup, tar, encryption
Published: 2021-10-27 21:37:58

bash script to create compressed archive from source path to destination. Supports files and folders exclusions from txt file and optional encryption with password.

![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/670hujyvll2a1294gka5.gif)

[Download from github](https://github.com/alfiosalanitri/encrypted-backup/blob/main/README.md#usage)