teleren/devto huggingface dataset:
ES6: Date - Increment Days
Tags: date, typescript
Published: 2022-09-17 22:29:12

Q: Given that normal working days are Monday to Friday. Implement a function to increment a date by X working days.

A: Date.getDay() returns a Map of \<number, Day\>. Use Date.getDay() to check the current day and set the new Date with Date.setDate().

0: Sunday 
1: Monday
2: Tuesday
...
...
6: Saturday

```typescript

function isWeekend(date: Date) : boolean {
  return date.getDate() % 6 ===0;
}


export function incrementAndReturnNextBuisnessDay (date: Date, days: number): Date{
  
  date.setDate(date.getDate() +days);
  while(isWeekend(date)){
    date.setDate(date.getDate() + 1);
  }
  return date;  
```
DPS909 Blog: SSG Release 0.1
Tags: opensource
Published: 2022-09-17 03:55:17

I created my static site generator tool using JavaScript and Node.js.  I was already familiar with JavaScript and Node.js but I thought I could improve my knowledge by working with it more often.

Link to repository: https://github.com/alexsam29/ssg-cli-tool
## Overview
This tool allows a user to specify a text (.txt) file path or a directory path as an argument in the command-line. A HTML file will then be created based on the specified text file.  If a directory was specified, then HTML files will be created for every .txt file in the directory.
## How to Use
In order to start using this tool, a recent version of [Node.js](https://nodejs.org/en/) must be downloaded and installed on your local machine.
### Step-by-step
1. Clone or download the [repository](https://github.com/alexsam29/ssg-cli-tool) from GitHub to your local machine. Remember the file location!

2. Open a terminal or command window and move to the directory where the repository was downloaded to.
3. Before moving forward make sure to run the command: ```npm install -g``` to ensure that all npm packages are installed.
4. Start using the tool by inputting the path of a text file or folder using the -i/--input option. For example:```ssg -i fileOrFolder_path```
5. The file specified will be added to the 'dist' directory.  If it is a directory, all text files will be converted to HTML and added to the same directory.  An index.html file will also be created with links to all HTML files generated.
6. [OPTIONAL] You can specify the directory where you want to output the HTML files by using the -o/--output option.  For example: ```ssg -i file_path -o directoryPath```
If the directory does not exist, a new one will be created.  If it does, then the contents will be erased and the new HTML files will be added.

Final output example: https://alexsam29.github.io/ssg-cli-tool/

## Options
Options include:
- -h/--help: This will output a list of all available options
- -v/--version: This will output the name of the tool, version number and author name.
- -i/--input: The main function of this tool. Convert text file(s) to HTML by specifying the file/folder path.
- -o/--output: Specify the directory to add HTML files to.

## Additional Features Implemented
In addition to the main requirements of the release, I have also added 3 of the optional requirements.
- The title is parsed from the input files and used to populate the <title> tag and added to the top of the <body>.
- As described above, I implemented the option for the user to specify the output directory with -o/--output.
- An index.html page is created when the user inputs a folder path. This file contains links to each of the generated HTML files.
Syntassi pastebin
Tags: programming, pastebin
Published: 2022-09-17 22:20:15

Here present the new **Italian** soft pastebin 1.0

[_Syntassi_](incolla.Syntassi.dev)

`support 45 language`
`C, Go, C# C++, Java, Ejs, SQL, XML, Lua, Txt, Git, html, php, Docker etc…`
Rails guide - Adding linter - Part 3
Tags: rails, ruby, tutorial, beginners
Published: 2022-09-17 22:06:48

Hey guys! How are you!

That's the third article of a series that teaches how to create a production ready Rails application. In this article we'll configure linter.

Linter is a tool that assures that all code follows the best practices defined in the project. The tool that we gonna use is called [rubocop](https://rubocop.org/).

# Configurin rubocop

First thing to do is add this gem to the application gemfile, to do so just add the following line in your `Gemfile`:

```
gem "rubocop", "~> 1.36.0", require: false
gem "rubocop-rails", "~> 2.16.1", require: false
gem "rubocop-rspec", "~> 2.13.1", require: false
```

This lines will install `rubocop` that's the main gem we'll use and `rubocop-rails` and `rubocop-rspec` that are dependencies of the main gem. Once you save the file, run the following command to install them:

```
bundle install
```

Now we need to create rubocop's configuration file, it's called `.rubocop.yml` and need to be at the root path of the application, here it's content:

```
require:
  - rubocop-rspec
  - rubocop-rails

AllCops:
  NewCops: enable
  Exclude:
    - 'app/assets/**/*'
    - 'app/views/**/*'
    - 'db/**/*.rb'
    - 'lib/**/*.rake'
    - 'config/**/*.rb'
    - 'bin/bundle'
```

You can use this file to ignore some checks that you don't wanna run in your application, you can see how to do it by looking in the pull request in the end of this article.

# Testing it out

Now that the tool is properly configured, let's test it. To run rubocop just type the following command in your terminal:

```
rubocop
```

If everything is ok you should look something like this:


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

That's a lot of errors, but it's ok, to fix most of them you can run the following command:

```
rubocop -A
```

It'll fixes all correctable issues, now just fix the rest and everything is fine

You can see all the code changed [here](https://github.com/augusto-queirantes/rails_guide/pull/2)
Deploy Vite VueJs App to DigitalOcean App Platform with vue router working
Tags: digitalocean, vite, vue, digitaloceanappplatform
Published: 2022-09-17 22:04:26

## Resources
1. Choose code source location
2. Click the pencil to edit the app as show in the image below
![Edit app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfnx6ztv469n3gkckgi5.png)
3. Edit **Resource Type** from `Web Service` to `Static Site`

## Environment Variables
*Optional* Add env variables for the app

## Info
*Optional* Update App info

## Review
Review and **Create Resources**

## Edit App Spec
**Note**: Required, since it's a SPA, the routes created with Vue Router will not work
1. Go to the app settings in Digital Ocean
![App settings in Digital Ocean](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hm83krb53ju5v046qem9.png)
2. Scroll down to **App Spec** and click Edit
![App spec](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gro0cd06wursi3kgjwcu.png)
3. Add `index_document: index.html` right below the last line with the same indentation as the one before and **Save**
```yaml
# Check the indentation
      routes:
      - path: /
      source_dir: /
      index_document: index.html
```
Generate 5000 Fake Female names of USA
Tags: name, generator, faker, fake
Published: 2022-09-17 22:00:06

One of my friend was looking for multiple female names of USA, so his team can create accounts using those names on one of the website! 

My friend was manually generating female names of USA using [fakenamegenerator.com](fakenamegenerator.com)! That was hectic job for him and time consuming too. 

He just contact me so i can generate using any script. I come up with an idea to generate using python library `pip install faker`, which is one of the best library to generate fake first name, last name, address etc within seconds!

I wrote a code of few lines, which helped him to generate as many names within a second and store them in to a CSV file!

```
from faker import Faker
import csv
fake = Faker('en_US')

header = ['firt_name', 'last_name']


with open('us_female.csv', 'w', encoding='UTF8', newline='') as file:
    writer = csv.writer(file)
    i = 0
    while i <5000:
        data = [fake.first_name_female(), fake.last_name_female()]
        writer.writerow(data)
        i = i + 1
```

I am sharing this code with you guys, may be i will help any one like my friend!
Get Access to Amazon Ads API as a Direct Advertiser
Tags: api, amazonads
Published: 2022-09-17 21:55:08

Full [Amazon Ads API documentation](https://advertising.amazon.com/API/docs/en-us/info/api-overview)

## 1. Create a Login with Amazon application
1. Register as a Amazon Developer: [https://developer.amazon.com/](https://developer.amazon.com/) using the **Sign in** link on the top right
2. Go to the Developer Console
3. Click **Login with Amazon** on the navbar or the one at the bottom of the page like the one shown below
![Login with Amazon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grf798mpmhckwbkr9l4j.png)
4. Click **Create a new Security Profile** button

## 2. Apply for Amazon Ads API access
1. Apply for API Access as a Direct Advertiser: [https://advertising.amazon.com/partner-network/register-api?ref\_=a20m\_us\_api\_drctad](https://advertising.amazon.com/partner-network/register-api?ref_=a20m_us_api_drctad) (approval will take a couple of days)
6. You will an receive email from `jira@amzn-clicks.atlassian.net`
    - with an invitation to access technical support for the API Amazon's Jira service desk
    - Notified if your application is approved or not
        - If approved - Click on `this link` in the email to continue setting up
            - Example of approval email:
            > Your request to use the Amazon Ads API has been approved.
            > Please use this link to set up your Login with Amazon client application for Amazon Ads API access.
How Reduced Docker images
Tags: docker, tutorial, beginners, programming
Published: 2022-09-17 21:17:19

This is a small tip.

When you use docker if you need, install some dependency use

```
–no-install-recommends
```

Example:
```
apt-get install --no-install-recommends -y git 
```

after that you can see you docker image very small

## References

[Ubuntu](https://ubuntu.com/blog/we-reduced-our-docker-images-by-60-with-no-install-recommends)

***

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!
😊😊 See you! 😊😊

***

## Support Me

[Youtube - WalterNascimentoBarroso](https://www.youtube.com/channel/UCXm0xRtDRrdnvkW24WmkBqA)
[Github - WalterNascimentoBarroso](https://github.com/walternascimentobarroso)
[Codepen - WalterNascimentoBarroso](https://codepen.io)
STOMP - Websockets
Tags: webdev, spanish, programming, opensource
Published: 2022-09-17 20:48:03

Hace unos días me preguntaba como hacían estos brokers que usualmente son los mas utilizados para la comunicación entre Clientes y servidores con Sockets y WebSockets. Tales como: [Socket io](https://socket.io/), [Feathers](https://docs.feathersjs.com/) o [Graphql WS](https://www.npmjs.com/package/graphql-ws), entre muchos otros.

## Que es STOMP?
Entre mi investigación me tope con [STOMP](https://stomp.github.io/) (Simple Text Oriented Protocol) un protocolo de Mensajería Orientado a Texto Simple. Es un protocolo muy simple y fácil de implementar, proveniente de la escuela de diseño HTTP. 

Todo esto nace de las quejas que he escuchado de programadores seniors cuando tienen que migrar de todas estas herramientas a algo mas robusto, o tener que escalar [SocketIO con su implementación con Redis](https://socket.io/docs/v4/redis-adapter/).

Así que bueno... la pregunta del millon.

## Quien soporta STOMP?
Pues un par de brokers, como:
- [ActiveMQ](https://activemq.apache.org/)
- [HornetQ](https://hornetq.jboss.org/)
- [OpenMQ](https://javaee.github.io/openmq/)
- [RabbitMQ](https://www.rabbitmq.com/)
- Entre un par mas.

Entonces tenemos quien lo soporte con buen nivel empresarial.
Aquí el asunto es que no hay brokers sencillos que puedan acoplarse de manera fácil a un backend sino es con una arquitectura orientada a servicios. Así que igual y deberíamos hacerlo.

Hay muy poca información acerca de STOMP en español.
Así que hasta que encuentre algo mas divertido que hacer. Me volveré un pequeño contribuidor de este protocolo.

## Paynal
En honor al dios Mexica [Paynal](https://es.wikipedia.org/wiki/Painal) mensajero de Huitzilopochtli. Estaré trabajando en la implementación de varios servidores y clientes (En diferentes lenguajes) que trabajen usando este protocolo en su versión 1.2 ([STOMP 1.2](https://stomp.github.io/stomp-specification-1.2.html)).

Aquí les dejo el [Repositorio](https://github.com/ushieru/paynal) por si solo te quieres pasar o echar una mano, que siempre es bienvenida. Muchas gracias por tu atención.

y Happy Hacking 🧑‍💻🎉
Difference b/w SASS & SCSS
Tags: sass, css, programming, webdev
Published: 2022-09-17 20:15:39

SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that is compiled or interpreted into CSS. It has syntax advancements. The use of math and variable support make CSS more powerful.

SASS has two syntaxes:

- Newer: SCSS (Sassy Cascaded Style Sheets)
- Older: Original SASS (Syntactically Awesome Style Sheets)

So they are both the SASS pre-processors with two different possible syntaxes. However, all this works only with the **SASS pre-compiler** which in the end creates **CSS**. It is not an extension to the CSS standard itself.


## Original SASS

- SASS is the older css pre-processor with indented syntax. 
- It has syntax similar to Ruby.
- Lesser syntax constraints
- No Braces `{}`
- Follows Strict Indentation
- No Semicolons `;`
- File extension is `.sass`
- To create mixin it uses `=` sign
- To use mixin it precedes with the `+` sign
- Greater designer and developer community

## SCSS

- SCSS is a superset of CSS3 syntax.
- SCSS has syntax similar to CSS.
- Every valid CSS3 stylesheet is valid SCSS as well.
- More syntax constraints
- Uses Braces `{}`
- Uses Semicolons `;`
- File extension is `.scss`
- To create mixin it uses `@mixin` directive
- To use mixin it precedes with the `@include` directive
- Smaller designer and developer community


### SASS Example

```sass
$prim-color: red

=my-border($sec-color)
  border: 1px solid $sec-color

body
  background: $prim-color
  +my-border(green)

p
  color: $prim-color
```



### SCSS Example

```scss
$prim-color: red;

@mixin my-border($sec-color) {
  border: 1px solid $sec-color;
}

body {
  background: $prim-color;
  @include my-border(green);
}

p {
  color: $prim-color;
}
```



### Output CSS

```css
body {
  background: red;
  border: 1px solid green;
}

p {
  color: red;
}
```

---

{% user moazamdev %}
React Draggable Component
Tags: react, opensource
Published: 2022-09-17 20:02:03

A simple and lightweight component for making elements draggable.

### [Demo](https://haikelfazzani.github.io/drag-react)
### [stackblitz](https://stackblitz.com/edit/react-ts-qvltmc?file=index.tsx)

# Installation
```shell
$ npm install drag-react
# yarn add drag-react
```

# Example
```jsx
import { Draggable } from 'drag-react';

<Draggable>
  <div>My element is draggable now</div>
</Draggable>
```

### Props
| name | type | default | description |
| --- | --- | --- | --- |
| children | `any` | `-` | `Some element` |
| className? | `string` | `'drag-react'` | `Class name for drag wrapper` |
| style? | `Object` | `{ position: 'fixed', left: '10px', top: '10px', zIndex: 99999 , cursor: 'move' }` | `css style for drag wrapper` |
| onDragStart? | `(_: DOMRect) => void` | `-` | `Called whenever the user mouses down` |
| onDragEnd? | `(_: DOMRect) => void` | `-` | `Called when dragging stops` |


# License
MIT
dynamic name setting for classes
Published: 2022-09-17 19:50:15

When you need to create classes on the go , this is the easiest way 

def create_class(cls_name):
    def __init__(self,*args, **kwargs):
        super(type(self),self).__init__(*args, **kwargs)
        pass
  
    return type(cls_name.upper(), (Parrent_Class), {'__init__': __init__,'__some_hidden_stuff__' : cls_name.lower(),'none_hidden_stuff':'some value})
Set up SSH to auth GitHub in a Terminal session
Tags: ssh, github, git, terminal
Published: 2022-09-17 19:49:16

# Verify the existence of the directory `~/.ssh`

- Let's verify if we have a directory called `.ssh` in the root (`cd ~`). 
We can verify by changing to that directory `cd ~/.ssh`

### Creating the `.ssh` directory
- If we **don't have** the directory then we create it: `mkdir ~/.ssh`.

# Generate a new key
-  If **we have** the directory, then we generate a key by
```bash
ssh-keygen
```
- We press `ENTER` to save the key in our directory `/Users/user-name/.ssh/id_rsa`

- If we **want a password** that protect the key, we enter a passphrase and click `ENTER`, and we repeat the same passphrase settled later and press `ENTER`again.
 - If **we don't** want to, we just left it empty and press `ENTER`.

# Add the public password to Github
- Look and copy the public password:
```bash
cat id_rsa.pub
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dt2vc5d7agdp7cfy0jrd.png)

- We go to **Settings** profile:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iy0ob8hc2qjyaw302t2z.png)

- Then we move to **SSH and GPG keys**:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzkfim91nj0qcbcvoeyl.png)

- And we add a **New SSH key** by adding a Title, the use of that key (in our case **Authentication key**), and the public key generated from the public password (`cat id_rsa.pub`).
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgl7b6frr9e177jgktr6.png)

 - **Note**: The key we use is the public one, from the `id_rsa.pub`, **NOT** the `id_rsa`key.

# Adding an `agent` to hold the ssh key.
An `agent` holds the public and private key for authenticate into services, in our case GitHub.
- Start the agent: 
```
eval $(ssh-agent -s)
```

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

- Add the password to the agent: 
```
ssh-add ~/.ssh/id_rsa
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0r97titfuu9qv7z6qgiu.png)

# Testing
Now in our session is validated to use `push` and `clone` on our public and private repositories.

### Basic Test
```bash
git init
git add .
```
- Then we add the SSH link from a GitHub Repository:
```bash
git remote add origin git@github.com:user/Repo_Name
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrjb6slyr1yi82kjuhye.png)

- We make our commit:
```
git commit -m "First Commit"
```

So when we do some `git push -u origin master` the authentication will be settled.
AWS CodeStar overview
Tags: 30daysofaws, day09, certifieddeveloperassociate
Published: 2022-09-17 03:36:08

## About


![AWS CodeStar overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6avcyjm9x2v62pblavh.jpg)

AWS CodeStar enables you to quickly develop, build, and deploy applications on AWS. AWS CodeStar provides a unified user interface, enabling you to easily manage your software development activities in one place.

- [Documentation](https://aws.amazon.com/codestar/)
- [User Guide](https://docs.aws.amazon.com/codestar/?id=docs_gateway)

CodeStar enables to quickly develop, build, & deploy applic­ations on AWS.

With AWS CodeStar, you can create, manage, and scale automated code reviews with a single click. You can also monitor the performance and scalability of your code review process with the built-in metrics dashboard. 

Each AWS CodeStar project comes with a project management dashboard, including an integrated issue tracking capability powered by Atlassian JIRA Software.

### Alternatives

Alternatives to AWS CodeStar:

- Jenkins.
- Azure DevOps Projects.
- GitHub.
- GitLab.
- CircleCI.
- CloudBees CI.
- Plesk.
- Copado CI/CD.

> - [Practice notes](https://romankurnovskii.com/en/docs/aws-certified-developer-associate/codestar/#practice)
> - [Questions](https://dev.to/romankurnovskii/aws-ec2-top-
questions-certified-developer-exam-27oo)
Renaming lots of files? This trick will save you hours!
Tags: trick, rename, tooling, productivity
Published: 2022-09-17 19:47:57

Let's say you have 100 files that are named incorrectly, and you need to change a specific part of it's name. 

The Question would be:

### How do I rename several files at the same time?

Answer: 
You can use a command line interface tool (cli) named Ranger. This tool will allow you to use your favorite text editor, Nano or Vim, to rename files in bulk.

Here are the steps:

<u>Step 0.</u>
Ensure you have Ranger installed, if you don't know how to install it, you can check this [article](https://www.fredy.dev/tools/ranger-for-newbies-easy-edition/).

<u>Step 1.</u>

In a new terminal, call <code>ranger</code> and select all the files you want to rename with the spacebar. 

<u>Step 2.</u> 
Once the files are selected, type <code>:bulkrename</code> this will open you an editor with the names of the files in it.

<u>Step 3.</u> 
You can start editing the file names, all changes you make to the names will be applied to the actual filenames of your files, once you're done, just close and save it.

You will be prompted two times asking if you want to save and close.

<u>Visual Example:</u> 
<div style="display: flex; justify-content: center;">
<img src="https://user-images.githubusercontent.com/45242501/163793114-a932f5fa-a1fb-4801-9668-3765db9fe214.gif" width=500>
</div>
I built a VSCode like Portfolio with React.js
Tags: react, vscode, portfolio
Published: 2022-09-17 15:05:27

## Live Demo
[https://noworneverev.github.io/](https://noworneverev.github.io/)

## About The Project
![demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l7eobyhe0v3w0t7aubi.gif)
I built a VSCode like porfolio to practice with React.js. The project is inspired by [Visual Studio Code](https://github.com/microsoft/vscode) and [caglarturali.github.io](https://github.com/caglarturali/caglarturali.github.io). As I used markdown to build pages, it's super easy to modify them and write your own contents.

## Features
- Powered by markdown
- Dark mode and light mode available
- Closable tabs
- Collapsible explorer
- Responsive web design
- Google analytics supported

## Installation

1、 Clone the repo
```sh
git clone https://github.com/noworneverev/react-vscode-portfolio.git
```

2、 Install NPM packages
```sh
npm install
```

3、 Enter your name in `.env.development`
```js
REACT_APP_NAME=<your_name>
```
4、 Add your markdown pages in `public/pages`
5、 Add your routes in `src/app/pages/page.ts`, make sure the names of pages are consistent with markdown files.
```ts
export const pages = [
  { index: 0, name: 'overview.md', route: '/overview' },
  { index: 1, name: 'skills.md', route: '/skills' },
  { index: 2, name: 'experience.md', route: '/experience' },
  { index: 3, name: 'education.md', route: '/education' },
  { index: 4, name: 'projects.md', route: '/projects' },  
  { index: 5, name: 'certificates.md', route: '/certificates' },
  { index: 6, name: 'accomplishments.md', route: '/accomplishments' },
];
```
6、 Add your social links in `src/app/pages/link.tsx`, which will appear in both sidebar and homepage.
```ts
 export const links = [
  {
    index: 0,
    title: "Find me on Github",
    href: "https://github.com/noworneverev",
    icon: <FaGithub />,
  },
];
```
7、 Runs the app in the development mode
```sh
npm start
```
8、 If you would like to deploy your own portfolio, don't forget to change Google Analytic measurement id in `.env.production`
```js
REACT_APP_NAME=<your_name>
REACT_APP_MEASUREMENT_ID=<your_measurement_id>
```

## Github Repo Link
[https://github.com/noworneverev/react-vscode-portfolio](https://github.com/noworneverev/react-vscode-portfolio)

Any comment is welcome. Thank you!