teleren/devto huggingface dataset:
The Benefits of JavaScript
Published: 2022-12-06 22:13:50

---
title: The Benefits of JavaScript
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---
This is a test of ChatGPT writing a tech blog style article on the benefits of Javascript:

JavaScript is a popular programming language that is widely used on the web. It allows developers to create interactive and dynamic websites and applications. In this article, we will explore some of the key benefits of using JavaScript in web development.

One of the biggest advantages of JavaScript is its ability to create interactive and engaging user experiences. With JavaScript, you can create dynamic effects on your web pages, such as hover effects, slide shows, and interactive forms. This can help improve the user experience on your website and make it more engaging for visitors.

Another benefit of JavaScript is that it allows for the creation of web applications. With JavaScript, you can create complex applications that can run in the user's web browser, without the need for any additional software or plugins. This makes it easy for users to access and use your web applications, and it also makes it easier for you to distribute and maintain your applications.

In addition to its ability to create interactive and dynamic experiences, JavaScript is also known for its speed. JavaScript code is executed directly in the user's web browser, which means that it can run quickly and efficiently. This can be especially beneficial for applications that require real-time processing or complex calculations.

Another key advantage of JavaScript is its versatility. JavaScript can be used on a wide range of platforms, including desktop and mobile web browsers, servers, and even embedded devices. This makes it a great choice for developers who need to create applications that can run on multiple platforms.

Finally, JavaScript has a large and active community of developers. This means that there are many resources available for learning JavaScript, as well as a wealth of libraries and frameworks that can be used to accelerate development.

In conclusion, JavaScript is a powerful and versatile programming language that offers many benefits for web development. Its ability to create interactive and dynamic experiences, as well as its speed and versatility, make it a great choice for developers who want to create engaging and high-performing web applications.
Announcing Keystrokes, successor to KeyboardJS
Tags: javascript, typescript, keyboard, frontend
Published: 2022-12-06 22:06:00

---
title: Announcing Keystrokes, successor to KeyboardJS
published: true
description: Keystrokes is a library for binding keys and key combos to functions. It's currently in it's alpha phase and is in need to feedback.
tags: javascript, typescript, keyboard, frontend
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hdc5yv6k3xz6ecq1oej.png
published_at: 2022-12-06 14:06-0800
---

It's been seven years since I released of KeyboardJS. Since then web applications have become a lot more sophisticated, [TypeScript][ts] has come to prominence, and with [`KeyboardEvent.key`][mdn-key] now available in all modern browsers, it is no longer necessary to rely on key codes to identify what key was pressed.

As a result of these changes I wanted to take another look at keyboard bindings and see if I could come up with a more modern iteration of KeyboardJS.

I give you [Keystrokes][keystrokes], a library for binding keys and key combos to functions. Easy to use and will work in any TypeScript or JavaScript project. It will even work in non browser environments.

Here's an example of a simple key and key combo binding.

```js
import { bindKey, bindKeyCombo } from '@rwh/keystrokes'

bindKey('a', () =>
  console.log('You\'re pressing "a"'))

bindKeyCombo('ctrl > y, r', () =>
  console.log(
    'You pressed "ctrl" then "y", released both, and are ' +
    'pressing "r"'
  ))
```

Note that is just the surface. You can find out more by checking out [the readme][keystrokes].

Any feedback you can provide is greatly appreciated.

Thanks for your time!
-- Robert

[mdn-key]: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
[ts]: https://www.typescriptlang.org/
[keystrokes]: https://github.com/RobertWHurst/Keystrokes#readme
sanctions.io - Sanctions & AML screening made simple
Tags: screening, saas, aml, compliance
Published: 2022-12-06 22:00:59

A simple, reliable, and cost-effective solution for your Sanctions & AML screening process.  

sanctions.io provides smart, AI-powered Sanctions, PEP, and Criminal Watchlists Screening for your AML, KYC & Trade Compliance screening needs.

Simple integration with our RESTful API and our pre-built integrations & Apps for business applications such as SAP, BigID, and many more.

[https://www.sanctions.io](https://www.sanctions.io)
Series explaining how I'm preparing for my Upwork Academy Skill Assesment exam.
Tags: codesignal, upwork, programming, algorithms
Published: 2022-12-06 21:33:29

I've chosen to document my way into passing the Upwork skill assessment. I got invite to the assessment some two weeks ago and when I tried getting resources to study ahead of it, I nearly couldn't find one, aside a Reddit user who told me to prepare on Codesignals for the general assessment.

even after getting this info, there are little to zero deep explanation for the solutions on codesignal question especially for a self thought engineer to understand.

So, I picked up the challenge to document my way into solving the algorithms and to give clear explanation of how I end up solving each of them, watch this space for the series.

Kindly wish me luck as I'm still preparing for the exam amidst two heavy projects that I'm working on all alone. Hoping to get trough everything before the end of January.
Homework: Brackets Check in JS
Tags: javascript, homework, student, programming
Published: 2022-12-06 21:33:25

I recentliy saw a homework for students in which you should write a function that gives true if a string with brackets of different types closes brackets accordingly otherwise false.

My first solution not using a stack was this:

```
const openBrackets = '([{'
const closingBrackets = ')]}'

function checkBrackets (string) {
  let bracketsStack = ''
  for (let i = 0; i < string.length; i++) {
    const char = string[i]
    if (openBrackets.includes(char)) {
      bracketsStack += char
    } else if (closingBrackets.includes(char)) {
      const lastBracket = bracketsStack[bracketsStack.length - 1]
      if ((lastBracket === '(' && char !== ')') ||
          (lastBracket === '{' && char !== '}') ||
          (lastBracket === '[' && char !== ']')) {
        return false
      }
      bracketsStack = bracketsStack.substring(0, bracketsStack.length - 1)
    }
  }
  return true
}

console.log(checkBrackets('()()')) // true
console.log(checkBrackets('([])')) // true
console.log(checkBrackets('([)]')) // false
```

But it looks a bit ugly using the big if and I created a second one using a map, to make it shorter and easier, I would think.

```
const brackets = {
  '(': ')',
  '{': '}',
  '[': ']',
}
const openingBrackets = Object.keys(brackets)
const closingBrackets = Object.values(brackets)

function checkBrackets (string) {
  const bracketsStack = []
  charIterator = string[Symbol.iterator]()
  let char
  while (char = charIterator.next().value) {
    if (openingBrackets.includes(char)) {
      bracketsStack.push(char)
    } else if (closingBrackets.includes(char)) {
      if (brackets[bracketsStack.pop()] !== char) {
        return false
      }
    } 
  }
  return true
} 
 

console.log(checkBrackets('()()')) // true
console.log(checkBrackets('([])')) // true
console.log(checkBrackets('([)]')) // false
```

What do you think? Is there a more elegant version to do it?
Wordle Game Built using FARM Stack - MongoDB Atlas Hackathon 2022 on DEV
Tags: atlashackathon22, mongodb, react, python
Published: 2022-12-06 21:06:43

## What I built
Popular Wordle Game using FARM (FastApi, React, MongoDB) Stack

### Category Submission:
(Think Outside the JS Box)

### App Link
[Wordle Game](https://wordle-game-steel.vercel.app/)

### Screenshots
![Wordle Game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2gouokqkgg7fgxqe4p6.png)
![Create Game Grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83dmynh2jzxs892xgqxq.png)
![Tile Animations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o1612nh8sdxlkm5yd3b7.png)
![Keypad Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nua1kzfn8c4o4xtupagy.png)
![Show Modal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blke20li589wyr4t2izq.png)

### Description
You have to guess 5 letters word in maximum 6 turns.
#### How to Play:
1. Submit word by pressing `Enter` after adding 5 letters.
2. Press `Backspace` to remove the letter.
3. You can't repeat the words during multiple guesses.
4. You have to submit exact 5-letter word.   
      
#### Word Hints:
1. Tile gets green if letter is at the right place.
2. Tile gets yellow if letter is in the word but not at right place.
3. Tile gets gray if letter is not in the word.
4. All the used letters are printed on the keypad with colors (green, yellow, gray) as well. 

### Link to Source Code
[Source Code](https://github.com/marslansarwar171/wordle-game)

### Permissive License
(MIT License)

## Background
(What made you decide to build this particular app? What inspired you?)
Being non-native english speaker, I love this game. It challenges me for my english vocabulary. I play this game a lot. I always work in JS Stack. But this hackathon motivated me to try another stack outside JS. So, I built this game using FARM stack. 

### How I built it
(How did you utilize MongoDB Atlas? Did you learn something new along the way? Pick up a new skill?)
I stored all the words for my game in the MongoDB Atlas Database. I learned how to use MongoDB with Python. I learned FastApi and Python during this hackathon.   

Frontend --> React
Backend  --> FastApi
Database --> MongoDB Atlas
Deployment --> Vercel 

### Additional Resources/Info
[Game Demo](https://www.youtube.com/watch?v=a84SnhwpCm4&t=1s)

[Article on FARM Stack by MongoDB](https://www.mongodb.com/developer/languages/python/python-quickstart-fastapi/)

[Youtube Video on FARM Stack by MongoDB](https://www.youtube.com/watch?v=IKmv0AuBwp0)

[MongoDB Integration with Vercel by MongoDB](https://www.youtube.com/watch?v=JIlYroSsInU)
RENT! e-commerce, submission for Atlas Hackathon
Tags: atlashackathon22, python, flask, ecommerce
Published: 2022-12-06 20:03:35

## What I built
I have created an e-commerce that allows people to rent articles related to technology. The user can choose the number of days for which to rent one or more items. Since I don't want to bore you too much, I made a video of about 6 minutes for a quick overview:

{% youtube https://www.youtube.com/watch?v=jAQ3H5vML2E %}

### Category Submission:
**Search No More**

### App Link
Not hosted yet
{% github  https://github.com/MB337/RENT-Project-MongoDB-Atlas-Hackathon %}

### Screenshots
<img src="https://i.imgur.com/tJEBJZb.png"/>

### Description
You can install this project and run it with docker by following the instructions on my github.
The site contains an "Admin" section reachable at "/admin" which will contain data regarding the website: sales data that can be viewed on a graph, proposals for new products, section to add a new product, section to modify / delete a product. The website also offers the possibility to search for a product thanks to Atlas Search. Product data will be saved on MongoDB via pymongo as follows:

```
{
    _id: "id",
    category: "category",
    prodName: "name",
    desc: "description",
    price: "price",
    isHomepage: "Is it in Homepage?",
    isHomepageCarousel: "Is it in Homepage Carousel?",
    isCategoryCarousel: "Is it in Homepage?",
    image: "image-link",
    watch: "In progess..."
}
```
<hr/>
### Modules or tool that I used:
- <a target="_blank" href="https://flask.palletsprojects.com/en/2.0.x/">Flask:</a> micro web framework written in Python.
- <a target="_blank" href="https://docs.atlas.mongodb.com/atlas-search/">Atlas Search:</a> Atlas Search provides options for several kinds of text analyzers, score-based results ranking, and a rich query language.
- <a target="_blank" href="https://pymongo.readthedocs.io/en/stable/">Pymongo:</a> Python distribution containing tools for working with MongoDB.
- <a target="_blank" href="https://www.chartjs.org/">Chart.js:</a> an open source JavaScript library for creating interactive and animated charts on web pages.
- <a target="_blank" href="https://axios-http.com/docs/intro">Axios:</a> Axios is a promise-based HTTP Client for node.js and the browser.
- <a target="_blank" href="https://getbootstrap.com/">Bootstrap 5:</a> Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.
<hr/>


### Link to Source Code
{% github  https://github.com/MB337/RENT-Project-MongoDB-Atlas-Hackathon %}

### Permissive License


## Background
I was interested in discovering the new features of MongoDB, I come from SQL-type databases so it was an experience that enriched me


### How I built it
I learned a lot from this competition, especially about using nosql databases
Ng-News: Episode 22/48 - NgRx 15, Chrome 108, FormsModule
Tags: webdev, javascript, angular, programming
Published: 2022-12-06 20:00:06

NgRx released version 15 with GA for @ngrx/component and Dmytro Mezhenskyi with a deep-dive talk on Angular forms. And Armen Vardanyan published an article about the advantages of the new inject function.

{% embed https://youtu.be/pDJSt1LApXw %}

## NgRx 15

NgRx, a library to manage state in applications, was released in version 15. It is the most used library in that area. Others are Ngxs, Elf, or Akita.

Version 15 doesn't come with new killer features. Instead, we see that every new version tries to be more efficient in terms of developer experience or - to put it simple - reduce boilerplate.

Since version 14.3, we have been able to use provider functions, which are standalone alternatives to the NgModules, like Store- or EffectsModule. With version 15, NgRx Component, a set of useful directives, became stable.

The main new feature is an improved version of the selector when it comes to combine multiple selectors together. This feature is only available for the component-store, which can be seen as little brother or sister, of the global store. But there are plans to come up with this feature for the global store as well.

{% embed https://dev.to/ngrx/announcing-ngrx-v15-standalone-apis-type-safe-projectors-component-and-componentstore-updates-and-more-l7 %}

## `inject()` - yes or no?

If you are unsure, if you want to use the constructed-based injection or the new inject function, then Armen Vardanyan gives you some reasons for the inject function. For example type safety and better inheritance.

{% embed https://dev.to/this-is-angular/always-use-inject-2do4 %}

## Chrome 108

Be sure to update to Chrome 108. The DevTools are able to identify CSS rules which have no effect. This doesn't mean CSS rules that are not used but where the rules can't be applied.

{% embed https://youtu.be/UVtXrWvq_oI %}

## Deep-Dive `FormsModule`

A deep-dive into the inner workings of the FormModule was the topic at AngularNation. Dmytro Mezhenskyi gave the talk and unveiled the - maybe - shocking - truth about template-driven and reactive Forms. The template-driven ones are actually built on reactive forms.

{% embed https://youtu.be/7koRJKiBQGA %}
Low-Code and No-Code: What Option Is Best for You?
Tags: lowcode, nocode, beginners, productivity
Published: 2022-12-06 19:58:06

## Introduction

I started my journey into computer science as a software developer for a Fortune 500 company many years ago. Throughout the years, I was able to experience the good (and the bad) of relying on a software development team to build and update apps. Fast forward to today, I've been hearing more and more about Low-Code and No-Code development platforms, such as Vonage's own AI Studio, and decided that it was time to take a closer look. In this post, you'll learn about the pros and cons of Low-Code and No-Code development platforms and why Vonage decided to go down that route with their latest conversational AI platform called AI Studio. This tool handles complex interactions between businesses and customers, lowering operational costs and significantly improving service levels.

Let's break this down. 

## What are Low-Code and No-Code development platforms?

Low-Code and No-Code development platforms are visual software development environments that allow business and traditionally non-technical users to drag and drop application components to build an app without writing any code. They typically have little to no coding knowledge. In contrast, a professional software developer might use an Integrated Development Environment (IDE) (such as Visual Studio) or an Editor (such as Visual Studio Code) to build an application with code and a solid understanding of computer science programming concepts. Keep in mind that both approaches allow you to create an application of various complexities, and both should be considered equal as it all depends on your business use case.

> To continue reading the full article, please [click here](https://mcrump.me/lowcode)

Conclusion

If you have questions or feedback, join us on the [Vonage Developer Slack](https://developer.vonage.com/community/slack) or send me a Tweet on [Twitter](https://twitter.com/mbcrump), and I will get back to you. Thanks again for reading, and I will catch you on the next one!
Why cannot I not! Loopy Loops!
Tags: react
Published: 2022-12-06 19:41:44

Why is it I can do one and not the other! I am new to React coming from Laravel, PHP.

```
import React from 'react'
import Task from './Task'


const Tasks = ({ tasks, onDelete, onToggle }) => {

    return (
        <div>
            {tasks.map((task) => (
                <Task key={task.id} task={task} onDelete={onDelete} onToggle={onToggle} />
            ))}
        </div>
    )
}

export default Tasks

```

```
import React from 'react'
import Task from './Task'


const Tasks = ({ tasks, onDelete, onToggle }) => {

    function showTask(item, index) {
        <Task key={item.id} task={item} onDelete={onDelete} onToggle={onToggle} />
    }

    return (
        <div>
            {tasks.forEach(showTask)}
        </div>
    )
}

export default Tasks
```
Create a Static Site using VitePress for Beautiful Help Documentation
Tags: javascript, beginners, webdev, productivity
Published: 2022-12-06 19:40:20

## Introduction

I've always been a fan of static site generators as a way to create a fully static HTML website based on data (typically in Markdown) with theming support. I've found that more of your time is focused on writing the content vs. the time spent managing the infrastrucutre for something such as a content managment system (CMS) like WordPress, which requires a database and a front-end UI to enter content. If I could sum up my three reasons why I like static site generators, it would be: Performance (pages are pre-rendered), Ability to Customize (Themes are typically baked in), and they don't require code to run on the server side. Let's jump into a popular one called, [VitePress](https://vitepress.vuejs.org/).

## A Primer on VitePress

VitePress is listed in the documents as [VuePress'](https://vuepress.vuejs.org/) little brother, and it is built on top of [Vite](https://vitejs.dev/). For those that don't know Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects so it might sense to pair it with a static site generator such as VitePress. One of the original problems with VuePress was that it was a Webpack app and it took a lot of time to spin up a dev server for just a simple doc. VitePress solves these problems with nearly instant server start, an on-demand compilation that only compiles the page being served, and lightning-fast HMR. Let's get started! 
 
> To continue reading the full article, please [click here](https://mcrump.me/vitepress)

Conclusion

If you have questions or feedback, join us on the [Vonage Developer Slack](https://developer.vonage.com/community/slack) or send me a Tweet on [Twitter](https://twitter.com/mbcrump), and I will get back to you. Thanks again for reading, and I will catch you on the next one!
Release 0.4 Progress
Tags: beginners, opensource, javascript, react
Published: 2022-12-06 19:35:52

## What I have done so far
I have had [my pull request](https://github.com/humphd/my-photohub/pull/28) merged for creating the UI for creating a new project. What I have created is purely visual and has little functionality. With my contribution, I have integrated my UI with what already exists. 

## Obstacles
In addition to the work I have for other courses, the open-source contribution process has been much slower than I expected. I am currently trying to get a better understanding of how the project is meant to work and how each contributor's work moves toward it. With a project which has not yet completed its basic functionality, it is hard to understand what can be done to further it along the development process. 

## What I will do next
I will ask the project's contributors what can be done to move the project forward, and try to have that done before the deadline. To accomplish this, I will create a new issue and a pull request after discussing with the other contributors.
Download and install git on Linux, Windows, and macOS
Tags: git, programming, beginners, tutoral
Published: 2022-12-06 19:28:00

---
title: Download and install git on Linux, Windows, and macOS
published: true
description: Installing git on Linux, Windows, and macOS
tags: git, programming, beginners, tutoral
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2022-12-06 19:28 +0000
canonical_url: https://code-maven.com/download-and-install-git
series: git-on-windows
---

{% youtube T-2S0eI8Nh4 %}

This time we are going to talk about downloading and installing git. There is going to be a separate episode on how to install on Windows, this is some generic overview.

All the [slides](https://code-maven.com/slides/git-intro/) and the specific slides about [git installation](https://code-maven.com/slides/git-intro/getting-git).

## Linux

For RedHat, CentOS and similar yum-based Linux distributions:

```
sudo yum install git-core
```

For Ubuntu, Debian, and other apt- or deb-based Linux distributions:

```
sudo apt-get install git-core
```

You could also download the latest version of git from [git-scm](https://git-scm.com/), but usually you are better off using
the version that is packaged by the vendor of your Linux distribution. It is usually better to use the standard package-management system
of your Linux distribution.

Of course, if you have a really, really old version of Linux then, ..., then yous should probably upgrade your Linux.

Well even in older versions of Linux you are still better off using git that was packaged by the vendor.

## Windows

For Windows there will be a separate video and article, but I'd recommend downloading git from [git-scm](https://git-scm.com/).

## Apple macOS

For macOS you could also use the package from [git-scm](https://git-scm.com/), but probably a better way is to
first install [Homebrew](https://brew.sh/) and then that install git using:

```
brew install git
```

In case you are not familiar with it, [Homebrew](https://brew.sh/)  is a package management system for Mac OSX. It is like `apt` or `yum` for Linux. It's a tool to install all kinds of open source projects. You'll probably
need a lot more tools than just git, so that's why it is probably better to use Homebrew for git as well.