teleren/devto huggingface dataset:
Hacktoberfest week 4
Published: 2022-10-28 01:24:21

# Plans Change
This week My original plan was to work on Telescope on this issue [3639](https://github.com/Seneca-CDOT/telescope/issues/3639). I haven't given up on this issue yet however i think it will take a lot more work than I initially planed.

# What Next
I found a repo with a active community and an issue that while i had no experience with vue I thought I would be able to solve.

[Issue](https://github.com/cuttle-cards/cuttle/issues/183)

They even gave me advice on where the issue was and ideas on how to fix it. However I had trouble setting the environment up i was running all of the commands and it was still giving me errors. So i decided to join their discord and found a welcoming community for their card game where they were planning tournaments and even invited me to play and teach me. After explaining my issue the owner hopped in a call with me and tried to help me trouble shoot and discover the issue. Turns out they built their game on a Linux system and recently tried to bring it to windows but while it did work on their end it didn't work on mine I helped test some things and we discovered that because our versions of node.js were different it wasn't working for mine.
After we got things working I found the bug and fixed it and changed some things based on his feedback. and with that i was officially done Hacktoberfest 

[Pull Request](https://github.com/cuttle-cards/cuttle/pull/184)

# What I Learned

Hacktoberfest taught me that the open source community is much more welcoming and willing to work with people of all experience levels. I made friends and learned that it's ok to struggle and ask questions in open-source. Next year I think I'll participate again.
scp Cheatsheet
Tags: beginners, linux
Published: 2022-10-28 00:26:32

A simple command for a simple man.

```
scp copy_this to_this
```

An example:

```
scp root@192.168.7.41:~/test.conf ./

scp -r root@192.168.7.41:~/bin ./

scp test.conf root@192.168.4.41:~/
```
How to customized Bootstrap 5.2 checks and radios
Tags: beginners, css, bootstrap, tutorial
Published: 2022-10-28 00:25:53

Bootstrap is one of the more known and used UI frameworks. It is completely free and open source. Bootstrap 5 is based on HTML, CSS, and vanilla JavaScript. It permits the build of quickly fully responsive sites and is very customizable. 

However, some elements like radios, checks, and switches are complicated to personalize. 

[Here](https://getbootstrap.com/docs/5.2/forms/checks-radios/) there is documentation of Bootstrap checks and radios.

But how to customize those elements? 
There is a pure design of checks and radios with Bootstrap 5.2

![non customized bootstrap radios and checks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcj31kvew2bu3ovlaawc.png)

To examine how it is stylized it is necessary to inspect a website.


![bootstrap radio css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n02s5nq3phm77ikx60jj.png)

Thanks to this analysis we see that circle in the middle of the radio input is an image. The same is for the checkbox and switch. We can see which class is necessary to change the background color of a checked element. 

To change an element in the middle of the radio or checkbox I downloaded some images. Now I can change a css of each element: 
This is a CSS for a switch box:
```
.form-switch .form-check-input {
  background-image: url(/ball-147676_640.png);
  background-color: yellow;
}

.form-switch .form-check-input:checked {
  background-image: url(/ball-147676_640.png);
  background-color: red;
  border-color: red;
}

.form-switch .form-check-input:focus {
  background-image: url(/ball-147676_640.png);
  box-shadow: 0 0 4px 4px violet;
  border-color: violet;
}
```
switchbox:

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

focused switchbox:

![focused switchbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rm9a8x3gk4cb821l9xit.png)

active switchbox:

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

To personalize a radio we do the same:
```
.form-check-input:checked[type=radio] {
  background-image: url(/colors-155896_640.png);
  background-color: aquamarine;
  border-color: aquamarine;
}
.form-check-input:focus[type=radio] {
  box-shadow: 0 0 4px 4px aquamarine
}
```
and this is a result:

![customized radio button ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3fmgsvb9y47vmpe2yno.png)

It is time to see how it works for the checkbox:
```
.form-check-input:checked[type=checkbox]{
  background-image: url(/bootstrap.jpeg);
}

.form-check-input:focus[type=checkbox] {
  box-shadow: 0 0 4px 4px violet;
}
```

![customised checkbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5scjk0smieozew1lowfc.png)

Although it is not obvious, it is possible to customize even those elements.

![customised elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw9onzygnf8b5420eqck.png)

{% stackoverflow 74227209 %}
Adding Full Markdown Support and Sidebar Menu to My OpenSSG
Tags: staticsitegenerator, java, opensource, docusaurus
Published: 2022-10-28 00:20:46

This week I had a look at *Docusaurus* which provides a simple *React* website generation. Especially it provides a lot of support for markdown document. Sidebar menu can be easily configured and adding themes and translations require minimum effort. Deployment took me only a few minutes. 

It is a very interesting open source project created by *Facebook*. It provides document search, SEO, static assets, plugins, and many more. I would like some of these features in my *OpenSSG*. But considering that my SSG is not mature enough to implement high level features, I decided to add some of fundamental ones which is full markdown conversion support, adding sidebar menu, and default CSS support. I will implement more whenever my time allows. 

I spent some time on ways to implement full markdown support. Current markdown conversion logic is already complicated and I felt that I was doing very low-level programming. So I searched Java libraries to make this job faster and easier, then I found *Commonmark*. I'm still not familiar with configuring Java dependencies, but I'm very satisfied with the full markdown syntax test. At the same time, I could reduce my complex markdown parsing code. After that, I looked at how to add sidebar menu. Instead of allowing users to configure their own sidebar, I decided my sidebar has same tree hierarchical structure from input files. This was also pretty challenging to me. But I could handle this logic with my own tree data structure class called `DOMNode` class. I also had a chance to use recursive function to complete path from each tree node. 

```java
public String getUrl() {
        if (this.parent == null){
            return ".";
        }
        return this.parent.getUrl() + "/" + this.data;
    }
```
*It was amazing that I could use this technique in real world programming*

Lastly I added default CSS support as it requires to support sidebar. 

Planning my feature rollout was great. Some work needs prerequisite or existing class change, in overall the order of my feature plan went nice and smooth although my implementation wasn't fast. I will add static asset support, then I will think about more of configuration to support configurable sidebar, themes, and plugins, etc. 

I think prototyping is a proof of concept to make sure that the solution is feasible and check if there is any missing consideration to complete the feature. For me, I needed to make sure that `DOMTree` class works as I expected since I didn't implement tree node before. It was very helpful to prove my concept with a prototype. 

I wrote issues of short-term features and will have to write long-term issues. From my experience in *Hacktoberfest*, I think I should add more details to `README` how to set up dev environment, so that contributors don't get frustrated. Also issue should be clear what to implement or fix. Without clear understanding it's not easy to try to get involved. At the same time, feature should be interesting enough to have someone take the challenge.
🎭 Community engagement : submit issues in less time 🗳️⏱️
Tags: github, productivity, opensource, todayilearned
Published: 2022-10-28 00:18:47

I didn't know this until today but I'm really happy to tell you about it, maybe it will help your opensource projects, it absolutely sped up my productivity.

When you are writing documentation or error messages you want to make it easy to contribute issues (that's beyond just bugs and features). Aspire to make it so easy that the community member doesn't need to do very much, so when you ask for a new issue to be submitted (because you should drive what you want from your community) you can do a lot of the work for them.

## How?
`tip:` a really great way to do this on GitHub is using the create issue URL for the issue form itself, but _did you know that it can be prefilled via query parameters!?_ Well you may know GitHubs API is extensive and a shining light of how far we must go to design APIs, it might not have been obvious that you can do this, here are some great parameters to pass:

> did you know that it can be prefilled via query parameters!?

<cite>Adam talks about the GitHub issues form, enthusiastically for 9 straight hours</cite>

## Usage
- title
- body
- label
- there's probably more...

```html
?title=my-idea&body=ummmm&label=documentation 
```
## Dynamism
A use case might be (I've tested this) a static website such as a documentation website where you want to allow people to submit plugins for curation, a form is added to your SPA and the form builds up the issue link dynamically, the submit button is actually a link, taking you to the now prefilled form, users just hit submit and boom you have a much better dynamicly filled out issue and the author needed to do very little on GitHub, they felt like they where on your documentation website most of the time.
 
Hope you liked it, please like, comment and follow for more great tips and random insights that nobody asked for but everyone kinda needs!
Build your own Kubernetes infrastructure with just a few minutes
Tags: typescript, opensource, productivity, kubernetes
Published: 2022-10-28 00:10:40

Hi, devs!

At CTO.ai, we know that most startups need help to scale faster in operations and software infrastructure to handle multiple requests and keep the application up at a lower cost.

If your team has decided to go for Kubernetes already, we have an open-source repository you can try to build an infrastructure on your own using DigitalOcean.

Here are the technologies used on the code that can help you scale quickly:

- Infra based on Kubernetes
- Container Registry
- Postgres
- Spaces
- Load Balancers SSL (via LetsEncrypt)
- Project Resource Management all build using CDKTF
- Terraform Cloud
- TypeScript

It also includes integration with CTO.ai's Developer Control Plane, that focus on the developer experience. In that way, you can build infrastructure using tools you are familiar with, such as Slack and CLI.

With the Developer Control Plane, you can deliver features using these most common tools and preview the application after each deployment. You can test it before going live in a production environment.

[Click here to go to the GitHub repository](https://github.com/workflows-sh/do-k8s-cdktf).

Feel free to collaborate with our open-source code as well! We'll be glad to have your expertise and feedback on the code we've been building **from developers to developers** :)
My Third Hacktoberfest PR
Tags: opensource, beginners, nextjs, typescript
Published: 2022-10-28 00:08:28

## What I Worked On
I merged my third Hacktoberfest PR once again on [reddit-image-viewer](https://github.com/gregrickaby/reddit-image-viewer). This time [my PR](https://github.com/gregrickaby/reddit-image-viewer/pull/413) was much more simple, but due to the competitiveness of finding good Hacktoberfest issues as well as this issue being related to my previous one I decided to work on it. [The issue](https://github.com/gregrickaby/reddit-image-viewer/issues/409) was that videos lacked a method to view the original reddit post, since clicking a video would play/pause that video rather than with an image where clicking it would link to the original post. 

## My Contribution
My PR was relatively simple compared to my previous one, I had to add links to each post under each video, as well as each image for consistency. 
![All posts now have titles linked to their original post.](https://user-images.githubusercontent.com/61764259/196677571-9cdde498-23f1-4028-8621-99fc2ec8d2e1.png)
To retrieve the links, I had to work with the components already built. These components worked with the reddit API retrieving data about reddit posts. I had to get the title of the post and hyperlink it to the page where the original link was. While this PR was relatively simple, it gave me a chance to gain some understanding and practice using the reddit API.
Blog: Puppet Approved Modules are back!
Tags: puppet, modules, community
Published: 2022-10-28 20:06:32

---
title: Blog: Puppet Approved Modules are back!
published: true
date: 2022-10-28 00:00:00 UTC
tags: puppet, modules, community
canonical_url: https://puppetlabs.github.io/content-and-tooling-team/blog/posts/2022-10-28-module-approval-process/
---

## What does Approved mean?

An approved module means we have checked against a specific criterion, if the module meets the suggested criteria, we do not officially offer support, however it is a module that we would recommend using. For a more extensive write-up on exactly what this means check out our [definition on the Puppet Forge](https://forge.puppet.com/about/approved).

## What does it look like?

When your module is ‘Approved’ it will receive an ‘Approved’ badge on the Puppet Forge. Here is an example of what an ‘Approved’ module will look like:

![Example of an approved module](https://raw.githubusercontent.com/puppetlabs/content-and-tooling-team/main/content/blog/posts/images/puppet_approved_module.png?token=GHSAT0AAAAAABUT6UBKOV6TYYF6GIL6NDZQY24IQYA)

## How can I get my module ‘Approved’?

If you feel that your module is actively maintained and meets the guidelines published [here](https://forge.puppet.com/about/approved/criteria) then all you need to do is create an issue in [puppet-approved-modules](https://github.com/puppetlabs/puppet-approved-modules) and one of our team will get around to checking it as soon as they can. They will provide feedback on anything they need to, or award you an ‘Approved’ badge (Yes, it is that simple!).

Catch us on [Slack](https://puppetcommunity.slack.com/archives/C11LCKKQ9) for any further information or questions.
Use AWS Parameter Store Values for Quarkus Lambda Datasource Credential
Tags: lambda, quarkus, datasource, aws
Published: 2022-10-27 23:59:24

## 1. Introduction
In this example, we are running a Quarkus application as a microservice on top of an AWS Lambda function. If you are wondering how to do that, you can follow this article  https://www.czetsuyatech.com/2022/06/quarkus-deploy-a-resteasy-microservice-as-a-lambda-function.html.

A microservice would often need to access the database. Still, the problem with AWS Lambda is that there is no way to fetch the username/password credentials directly from the AWS Parameter Store (this is not an issue when using a container in ECS).

## 2. Parameter Store
Make sure to create the following keys:
/dev/ct-quarkus-service/DB_USERNAME
/dev/ct-quarkus-service/DB_PASSWORD

## 3. Code Review

### 3.1 Add a dependency to AWS SSM.

```
<dependency>
  <groupId>io.quarkiverse.amazonservices</groupId>
  <artifactId>quarkus-amazon-ssm</artifactId>
  <version>${quarkus-amazon-ssm.version}</version>
</dependency>
```

### 3.2 Create the SSM Client.

```
public class SsmProvider {
 
  public Map<String, String> getSecretParams(List<String> paramsNames) {
 
    final SsmClient ssmClient = SsmClient.builder()
        .credentialsProvider(AwsCredentialsProviderChain
            .of(EnvironmentVariableCredentialsProvider.create()))
        .region(new SystemSettingsRegionProvider().getRegion())
        .build();
 
    GetParametersResponse parametersResponse = ssmClient.getParameters(
        GetParametersRequest.builder()
            .names(paramsNames)
            .withDecryption(true)
            .build());
 
    ssmClient.close();
 
    return parametersResponse.parameters().stream()
        .collect(toMap(Parameter::name, Parameter::value));
  }
}
```

### 3.3 Implement the CredentialsProvider.

```
@ApplicationScoped
@Unremovable
@Named("ssm-credentials-provider")
@Slf4j
public class SsmCredentialsProvider implements CredentialsProvider {
 
  @ConfigProperty(name = "ct.datasource.username")
  String username;
 
  @ConfigProperty(name = "ct.datasource.password")
  String password;
 
  @Override
  public Map <String, String> getCredentials(String credentialsProviderName) {
    SsmProvider ssmProvider = new SsmProvider();
    Map <String, String> properties = new HashMap<>();
 
    List <String> ssmParamsNames = List.of(username, password);
    Map <String, String> secretParams = ssmProvider.getSecretParams(ssmParamsNames);
 
    properties.put(USER_PROPERTY_NAME, secretParams.get(username));
    properties.put(PASSWORD_PROPERTY_NAME, secretParams.get(password));
 
    return properties;
  }
}
```

### 3.4 Update the application.yml.

```
quarkus:
  application:
    name: ct-quarkus-service
  datasource:
    credentials-provider: custom
    credentials-provider-name: ssm-credentials-provider
    db-kind: mysql
    jdbc:
      url: xxx
ct:
  datasource:
    username: ${DB_USERNAME:/dev/ct-quarkus-service/DB_USERNAME}
    password: ${DB_PASSWORD:/dev/ct-quarkus-service/DB_PASSWORD}
```
Access to fetch blocked by CORS
Published: 2022-10-27 23:33:36

When working with an API in your Rails code, a common  error that arises is access being blocked by CORS policy...

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

When receiving this error, first make sure to check your Gemfile that you have the cors gem installed...

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

If not, place the gem in your Gemfile and run a fresh **bundle install**

That should take care of the error. If not, install the following in your **application.rb** file...

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

That should definitely help!

Happy coding !
Hacktoberfest Finale
Tags: hacktoberfest, github, opensource
Published: 2022-10-27 23:28:18

Hello to all,
I got all of my pull requests accepted and wanted to share a few details about my experience and maybe give some advice to anyone who want to try open source coding out.

---

- https://dev.to/lostbutton/hacktoberfest-first-plmrg-1f3f
- https://dev.to/lostbutton/hacktoberfest-week-2-1hna
- https://student.blog.com/hacktoberfest-week-three
- https://dev.to/lostbutton/hacktoberfest-week-4-m05

---

This was my first experience with Hacktoberfest and I learned about it from my open-source course professor, David. I will be honest, I was terrified when I started with this., because for the first time ever, I was going to work on a random strangers code. Due to this I was panicking thinking we had "only a month" to complete this and there was **not enough time**. I started as soon as October 1st struck looking for possible repositories that I could contribute with. I went at a decent pace, and overtime I did complete all four pull requests. Overall, everything turned out even better than I expected and now I have already done the required amount of PRs accepted although procrastinated on the blogs because one for each week.

### Tips
1. Use GitHub's features to your advantage
Use CI integration so that newly submitted PRs are run through checks before you merge them and take advantage of GitHub's issues and PR templates.

2. Communicate with the owner of the Repository
Make certain that your contributors are also communicating about the issues they are working on. For example, during high-traffic periods such as Hacktoberfest, it is very easy for multiple people to create PRs for the same issue, which eventually conflict with each other.

3.Improve existing skills
There is a task for you on open source projects if you're looking for practice in any of the following areas: coding, user interface design, graphic design, writing, or organizing.

### Final Thoughts:
Though it was a bit finicky at first, I had a lot of fun contributing, and even when there were issues, it was resolved. I might even participate next year even without this being a project, and expand my horizons even more. 

It was a pleasure participating in this event.
password_digest
Published: 2022-10-27 23:23:39

When creating a User database in Rails, it would not be best practice to store user passwords as raw strings. To solve this issue for us, Rails provides us with **password_digest**. To prevent passwords from being stolen, password_digest encrypts the passwords before storing them in your database. Want a more secure database? Keep reading & follow along!

First, install the bcrypt gem in your Gemfile...

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

Once placed in the Gemfile, run a fresh bundle install in your Terminal to install the Gem

Then, add a **password_digest** column to your Users table...


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

Then add, **has_secure_password** in your User model file...

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

Then, add **password_digest** to your CreateUsers table (or replace password if that is what you used prior)...

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

One thing to note, although it is **password_digest** , in your models and controllers **password** should be used.

Now, you have a more secure database!

Happy coding!
Creating with params.permit
Published: 2022-10-27 23:07:36

Creating a new User with a Rails backend could be a bit of a headache when we take a look at this schema...

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

We don't need (or want) all of that information when a User registers. In our case, all we want is a name, a username, and a password. But our schema says otherwise... so what do we do?

Params!

We can create a set of params that will tell our backend what information to accept from a User input. For our purposes, we will create a **signup_params**...

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

What these _signup_params_ are saying is to only "permit" (:name, :username, and :password) from a User input

Applying these params to our code...

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

Here, we are instructing Rails to create a new User based only on the _:name_, _:username_, and _:password_ provided by the User.

Happy coding!
Warning: Each child in a list should have a unique "key" prop.
Published: 2022-10-27 22:53:35

When creating a list in your UI with information passed from an array in your JSX, you may come across the following error (I know I sure did)...

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

When creating a list with an array passed from your JSX, you may think this would be the proper syntax...

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

However, it is best practice to add a _key_ prop to each child in a list. React will then use the _key_ prop to create a relationship between the Component and the DOM...

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

Goodbye error! :)