teleren/devto huggingface dataset:
Latest Javascript Feature you should know
Tags: javascript, beginners, webdev, tutorial
Published: 2021-12-24 18:15:59

## Numeric Separator

- Large Numeric Literals Are Difficult For The Human Eye To Parse Quickly.

- The Numeric Separators Allow You To Add Underscores Between Digital In Literal Numeric, Which Makes Them More Readable.

```
let value1 = 250000000;
let value2 = 250_000_000; //same as value1 i.e 250000000
```
The Underscores will be stripped out automatically when the files get parsed.

#Nullish Coalescing 
  
The Nullish Coalescing Operator(??) allow us to check nullish values instead of falsy values.

```
let count1 = 0;
let result1 = count1 ?? 1;
console.log(result1); //output - 0

let count2 = null;
let result2 = count2 ?? 1;
console.log(result2); // output - 1
```
Nullish Coalescing Operator (??) is better choice than the logical OR operator (||) if you want to assign a default value to a variable.

#BigInt
 

- The maximum number you can store as an integer in JavaScript is 2^53-1

- And BigInt allow you to go even beyond that, such that it provides a way to represent whole number larger than 2^53-1


A BigInt is created by appending n to end of an Integer literal of by calling the function BigInt that creates BigInt form string, number et.

```
const Bigint = 123456789012345678901234567890123456789n;
const sameBigint = Bigint("123456789012345678901234567890n");
const BigintfronNumber = Bigint(10); //same as 10n
```

#Optional Chaining 

- The Optional Chaining Operator allow you to access properties of potentially undefined/null values without throwing an exception.

- it allow you to access nested object property without worrying if the property exist or not. 

```
const user = {
          dog: {
          name: "chee"
         }
       };

console.log(user.monkey?.name); //undefined 
console.log(user.dog? .name); // chee

```

#Promise.any()

- Promise.any() takes an iterable of promise objects.

- it returns a single promise that resolves as soon as any of the promises in the iterable fulfill. with the value of the fulfilled promise.

```
const promise1 = /*some*/;
const promise2 = /*some*/;
const promise3 = /*some*/;

const promises = [promise1, promise2, promise3];

promise.any(promises).then((value)=>console.log(value));
```
Edit Distance
Tags: 100daysofcode, java, algorithms, programming
Published: 2021-12-24 18:13:02

# [Description](https://binarysearch.com/problems/Edit-Distance)
# Solution

```java
import java.util.*;

class Solution {
    public int solve(String a, String b) {
        int aLength = a.length(), bLength = b.length();
        int[][] dp = new int[aLength + 1][bLength + 1];

        for (int i = 0; i <= aLength; i++) {
            dp[i][0] = i;
        }
        for (int i = 0; i <= bLength; i++) {
            dp[0][i] = i;
        }
        for (int i = 1; i <= aLength; i++) {
            char aChar = a.charAt(i - 1);
            for (int j = 1; j <= bLength; j++) {
                char bChar = b.charAt(j - 1);
                if (aChar == bChar) {
                    dp[i][j] = dp[i - 1][j - 1];
                } else {
                    int deleting = dp[i - 1][j];
                    int inserting = dp[i][j - 1];
                    int replacing = dp[i - 1][j - 1];
                    dp[i][j] = 1 + Math.min(Math.min(deleting, inserting), replacing);
                }
            }
        }
        return dp[aLength][bLength];
    }
}
```
Explore Express.js
Tags: node, javascript, tutorial, beginners
Published: 2021-12-24 17:55:55

Today we will learn about the Node.Js web application framework Express.Js.

###What is Express.js?
Express.js is a free, open-source, simple, tiniest web application framework of Node.js. It is used for backend design & development.  Express.js requires only JavaScript that’s why it’s easier to build single-page, multiple-page, hybrid web applications & API without any effort. Express.js supports MVC architecture.

###Why we should use Express.js?
JavaScript has Node.js for backend development. Node.js has many frameworks to make easier backend development. Such as Express.js, Koa.js, Meteor.js, Nest.js, Socket.io, Total.js, etc. So, if you are a JavaScript developer then it’s easier for you to use Express.js for backend development. Express.js offers simplicity, flexibility, efficiency, minimalism, and scalability that’s why it’s more popular.

###Features
Express.js has many features. Let’s learn about them -

- Middleware - Middleware is a function that is used to get access request and response objects. 
- Faster server-side development - Express.js provides many readymade functions from Node.js it’s made easier to develop.
- Routing - Express.js provides an admiringly advanced routing mechanism.
- Templating - Template engines allow you to build dynamic content in web applications.
- Debugging - Express.js has a debugging mechanism that can find bugs easily. 

###Advantages
- Express.js is fast & easier to learn.
- It’s easier to configure & customize.
- Huge community support.
- Supported by Google V8 Engine.
- Easy to connect with databases such as MongoDB, MySQL, etc.
- Easy to integrate with different templates.
- Allows you to define routes based on HTTP methods & URLs.
- Easy to serve static files and resources.
- Flexible middleware module.

###Disadvantages

- 
There are problems with the callback or event-driven nature but the last update of Node.js brings async/await that prevents this problem.
- Client request problem with middleware system.

###How to Install Express
Install with npm - **`npm install express -g`**

###How to Start
First, create a directory named **simpleExpress**. Change to it, and run **`npm init`**. Then install express as a dependency. In the directory create a file named index.js and write the following code. 

![Express Example Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyfykux7z6umkaegp1sc.png)
<figcaption>Hello World Example with Express.js</figcation>

Run the app with the following command - **`$ node index.js`**
Then open the browser and visit **“localhost:5000”** to see the output.

Visit [Express.js](https://expressjs.com/) official site to read documentations and know more in details.

Thanks for reading this tutorial!
Apama Advent Calendar - 24 Dec 2021 - Apama Christmas Tree Lights
Tags: apama, iot, cumulocity, streaminganalytics
Published: 2021-12-27 10:01:11

---
title: Apama Advent Calendar - 24 Dec 2021 - Apama Christmas Tree Lights
published: true
date: 2021-12-24 17:55:06 UTC
tags: apama, iot, cumulocity, streaminganalytics
canonical_url: https://tech.forums.softwareag.com/t/apama-advent-calendar-24-dec-2021-apama-christmas-tree-lights/254139
---

_This is Day #24 (final day) of a short series of brief tips, tricks, hints, and reminders of information relating to the Apama Streaming Analytics platform, both from Software AG as well as from the community._

![animatedGif_tree](https://aws1.discourse-cdn.com/techcommunity/original/3X/4/4/44f0104510d6f7e431b8b0fd37ddde2d9269a232.gif)

**Dot dash, dot dash dash, dot dash, dash dash, dot dash (=Apama)**

As a little bit of Christmas fun, we’ll make use of this [LED Christmas tree for Raspberry Pi](https://thepihut.com/products/3d-xmas-tree-for-raspberry-pi) by The Pi Hut to **display festive tweets in morse code**. This project makes use of the [Twitter API](https://developer.twitter.com/en/docs/twitter-api), the Apama HTTP client connectivity plugin, and a [C++ based EPL Plugin for interfacing with RaspberryPi’s GPIO](https://github.com/louiseam-sag/apama_GPIO).

As you will see, there is no “analytics” today, it is just a bit of seasonal fun that demonstrates:

1. Apama running on an IoT device (the Raspberry Pi)
2. Use of EPL ([Day #6](https://tech.forums.softwareag.com/t/apama-advent-calendar-06-dec-2021-apama-epl-fundamentals/253758/2))
3. Use of a custom EPL Plugin (to control the LEDs)
4. Use of a standard connectivity plugin (HTTP Client) to integrate to an external data-source ([Day #8](https://tech.forums.softwareag.com/t/apama-advent-calendar-08-dec-2021-apama-connectivity/253799/2))

And who doesn’t like flashing LED’s anyway!

Go check it out in the [Software AG Tech Community](https://tech.forums.softwareag.com/t/apama-advent-calendar-24-dec-2021-apama-christmas-tree-lights/254139)!
Magento 2 Block Ip Address Extension
Tags: magento2, webdev, webdesign, ecommerce
Published: 2021-12-24 06:09:25

You can block entry to your internet site from a couple of areas and international locations with [Magento 2 block Ip Address](https://marketplace.magento.com/fme-geoipultimatelock.html) Extension. This extension helps you to block entry to products, CMS pages, or the complete website shop.

The Magento 2 Block IP lock extension helps you to block IP addresses and redirect them to an exceptional internet web page of your choice. Monitoring and adjusting a couple of policies will let you manipulate incoming visitors to your internet site in actual time.

Your Magento 2 shop may be blocked from having access to unique international locations with the IP Addresses & Country Blocker extension. A complete internet site may be blocked, or you could block unique content material together with products, categories, and CMS pages. The IP Addresses & Country Blocker extension helps you to undercover agents on site visitors in actual-time and limit them immediately.

If you need to block or redirect site visitors to a predefined URL, you could show a custom message. If you need to lock site visitors from exceptional areas or international locations, you could create exceptional policies.

Key Features

1. Bots and site visitors may be blocked via way of means of IP lock with, region, and country
2. Restriction of the complete shop or unique products
3. Utilizes MaxMind Country IP Database
4. Redirect Users to Another URL or Display a Custom Message to Block Users
How to Create Contact Form using HTML and CSS
Tags: html, css, javascript, webdev
Published: 2021-12-24 17:49:55

Today we are going to create a contact form but first, let me introduce what exactly a contact form is.
A contact form is a short web-based form published on a website. Any visitor can fill out the form and submit it to send a message to the site owner.
Publishing a contact form makes it easy for new customers to get in touch.

**HTML code**
```
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
      <link rel="stylesheet" href="style.css" />

```
[read more](https://www.codewithrandom.com/2021/12/how-to-create-contact-form-using-html.html)
Hello world
Published: 2021-12-24 17:42:51

Lets start Javascript learning:
Текст нужно оборачивать в одинарные, двойные или косые кавычки:
console.log(этот текст на экран выведен не будет...) - неправильно
console.log('а с этим все хорошо') - правильно
console.log("и с этим") - правильно
Ugly sweater CSS: The Child Christmas outfit
Tags: css, frontend
Published: 2021-12-24 17:22:19

This is a short Christmas Eve post. Life has been busy this past couple weeks so I haven't finished any new CSS sweaters. So I'm updating last years the Child sweater.

Here's what the final Grogu sweater looked liked. 
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gvc4s5mr760rhmv3asw5.jpg)

I learned some CSS in the year since [this version](https://dev.to/jarvisscript/ugly-sweater-css-the-child-l41/) was made. All I'm doing to update it is change the colors and add some Holiday cheer. 

Here are the new colors for the cradle and the clothes.

```CSS
:root {
	--MainRed: #a42624;;
	--DarkRed: #611913;
	--Green: #3d8425;
}
```

I changed Grogu's clothes from a robe to a sweater and added some snowflakes to it.

```HTML
	<div class="childRobe">
	   <div class="childHands"></div>
	  <div class="snow"> * * * * </div>
	   <div class="childHands"></div>
	</div>
```

```CSS
.childRobe {
	background-color: var(--MainRed);
	height: 40px;
	width: 88px;
	margin-top: -70px;
	margin-right: -108px;
	display: flex;
	justify-content: space-between;
}

.snow {
	color: white;
	font-size: 1em;
	margin-top: -6px;
}
```

To finish it off I added a hat. This took the longest time of the updates. I had to add a new div without changing the positions of the rest of divs that make the Character. I placed the hat div before all the character divs and used Z-index to force the hat to show on top of ever thing.

```CSS
.hat {
    background-color: var(--MainRed);
    height: 32px;
    width: 58px;
    border: 1px solid black;
    border-bottom: 2px solid white;
    margin-top: -442px;
    margin-right: 20px;
    border-top-left-radius: 62%;
    border-top-right-radius: 62%;
    z-index:2;
}
```

![Grogu in a hovering cradle. Grogu is a alien child.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3edv4w3tf6ltu4zf69n7.jpg)

And there is the final Christmas version of the Child made with CSS. It was fun to update an old project with new skills. I hope you enjoyed it.

```
-$JarvisScript git push
```

{% twitter 1474431595616604187 %}
Short Note on CRUD Operations of MongoDB…
Tags: beginners, mongodb, javascript
Published: 2021-12-24 17:15:45

## MongoDB CRUD Operations
CRUD operations create, read, update, and delete documents in MongoDB.

**_Create Operations_**
Create or insert operations add new documents to a collection in the database. If the collection does not currently exist in the database, then insert operations will create the collection.

MongoDB provides the following methods to insert documents into a collection:
- db.collection.insertOne() 
- db.collection.insertMany() 
Here, insert operations target a single collection.

_**Read Operations**_
Read operations retrieve documents from a collection in the database.

MongoDB provides the following methods to read documents from a collection:
- db.collection.find()
We can specify query filters or any criteria that identify the documents to return.

_**Update Operations**_
Update operations modify existing documents in a collection of the database. 

MongoDB provides the following methods to update documents of a collection:
- db.collection.updateOne() 
- db.collection.updateMany() 
- db.collection.replaceOne()
Here, update operations target a single collection.
We can also specify any criteria, or filters, that identify the documents to update.

_**Delete Operations**_
Delete operations remove documents from a collection in the database. 

MongoDB provides the following methods to delete documents of a collection:
- db.collection.deleteOne() 
- db.collection.deleteMany() 
Here, delete operations target a single collection.
We can specify any criteria, or filters, that identify the documents to remove.
CSS Transform 2D and 3D
Tags: css
Published: 2021-12-24 17:12:05

**CSS TRANSFORMS**
_**CSS 2D transforms Method:**_ With the transform: property the 2D methods are 

- translate()
- rotate()
- scaleX()
- scaleY()
- scale()
- skewX()
- skewY()
- skew()
- matrix()

**translate()**
With the translate() method we can move one element from its current position like,
```
div {
  transform: translate(50px, 100px);
}
```
Here translate(x, y) are assign as the value of x(horizontal) & y(vertical)

**rotate()**
We use the rorate() method so that we can rotate our element clockwise or anti clockwise like,
```
div {
  transform: rotate(40deg);
}
```
rotate(x) can assign a positive degree value to rotate clockwise and a negative degree to rotate anti-clockwise.

**scale()**
With scale() we can increase or can decrease element height and with.
```
div {
  transform: scale(2, 3);
}
```
Here the first value assign with and the second value stands for height.

**skew()**
The skew method skews an element in order of X-axis and Y-axis with angle.
```
div {
  transform: scale(2deg, 3deg);
}
```
Here first value assigns X-axis and the second value assigns Y-axis. skewY() only for Y-axis with one value,  skewX() only for X-axis with one value.

**matrix()**
The matrix method is the combination of all transform methods.
```
div {
  transform: matrix(2, 3, 4, 4, 2, 4);
}
```

**_CSS 3D transforms Method:_** With the transform: property the 3D 

- methods are
- rotateX()
- rotateY()
- rotateZ()

**rotateX()**
RotateX method rotates an element in X-axis with degree value.
```
div {
  transform: rotateX(2deg);
}
```

**rotateY()**
RotateY method rotates an element in Y-axis with degree value.
```
div {
  transform: rotateX(2deg);
}
```

**rotateZ()**
RotateZ method rotates an element in Z-axis with degree value.
```
div {
  transform: rotateX(2deg);
}
```
highsea : color range generator for tailwindcss
Tags: tailwindcss, webdev, svelte, javascript
Published: 2021-12-24 17:10:08

If you like using tailwindcss, every now and then you find yourself in the position of wanting to use a specific shade, but no default color in the tailwindcss range does fit the bill, it's too greenish or to reddish or too whatnot - it just doesn't work.

From there, either you build your own range manually, or find some some code somewhere that generate them.

I didn't find anything easy enough for my liking, so I built it.

Here comes [highsea](https://highsea.nostrorom.com), it's very barebones for now in terms of features, but it nails the heart of the matter: generate a 50-900 range for any hue, while still fitting with the existing range should you want to combine custom and default on the same project.

More features will be added later on; in the meantime enjoy !
Cheat Sheets for Web Developers
Tags: webdev, cheatsheet, productivity, programming
Published: 2021-12-24 17:06:22

The front-end development evolves with incredible speed. Now it's a challenge to remember all the syntax, methods, or commands of a programming language, framework, or library. Here is where cheat sheets come in. They are great, intuitive resources that help you quickly find what you need.

In this post, I want to share some of the most useful cheat sheets or references I've found it, and I use it daily.

#### General

[https://goalkicker.com/](https://goalkicker.com/) - Programming Notes for
Professionals books. Includes a lot of frameworks / programming languages.
Probably the best and concise cheat sheets I've found.

[https://devdocs.io](https://devdocs.io)/ - multiple API documentations in a fast, organized, and searchable interface.

#### Accessibility

[https://learn-the-web.algonquindesign.ca/topics/accessibility-cheat-sheet](https://learn-the-web.algonquindesign.ca/topics/accessibility-cheat-sheet/)

[https://lab.abhinayrathore.com/aria-cheatsheet](https://lab.abhinayrathore.com/aria-cheatsheet/)

[https://www.w3.org/TR/wai-aria-practices](https://www.w3.org/TR/wai-aria-practices/)

### HTML

[https://digital.com/tools/html-cheatsheet](https://digital.com/tools/html-cheatsheet/)

[https://htmlreference.io](https://htmlreference.io/)

[https://quickref.me/html](https://quickref.me/html)

[https://dev.w3.org/html5/html-author](https://dev.w3.org/html5/html-author/)

### CSS

[https://cssreference.io](https://cssreference.io/)

[https://quickref.me/css](https://quickref.me/css)

[https://devdocs.io/css](https://devdocs.io/css/)

[CSS Snippets](https://www.30secondsofcode.org/css/p/1)

[Grid - A simple visual cheatsheet for CSS Grid Layout](https://grid.malven.co/)

[Flex - A simple visual cheatsheet for flexbox](https://flexbox.malven.co/)

### Javascript

[JavaScript Snippets](https://www.30secondsofcode.org/)

[https://javascript.info](https://javascript.info/)

[https://www.javascripttutorial.net/es-next](https://www.javascripttutorial.net/es-next/)

[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)

### Typescript

[https://rmolinamir.github.io/typescript-cheatsheet](https://rmolinamir.github.io/typescript-cheatsheet/)

[https://github.com/sindresorhus/type-fest](https://github.com/sindresorhus/type-fest)

[https://www.freecodecamp.org/news/advanced-typescript-types-cheat-sheet-with-examples](https://www.freecodecamp.org/news/advanced-typescript-types-cheat-sheet-with-examples/)

[https://www.sitepen.com/blog/typescript-cheat-sheet](https://www.sitepen.com/blog/typescript-cheat-sheet)

### Git

[Git Command Explorer](https://gitexplorer.com/)

[Git Snippets](https://www.30secondsofcode.org/git/p/1)

### Design Patterns

[https://www.patterns.dev/posts](https://www.patterns.dev/posts/)

[https://refactoring.guru/design-patterns](https://refactoring.guru/design-patterns)
**MongoDB CRUD Operations**
Tags: mongodb, javascript, react, programming
Published: 2021-12-24 17:06:07



Hello everyone, what’s up? Hope all of are you well by the grace of almighty Allah. Alhamdulillah, I am also fine by the grace of omnipotent Allah. Today I will discuss about MongoDB CRUD Operations. CRUD means C for Create, R for Read, U for Update, and D for Delete. When we think, we will make a website then we have to think of two things, the first is the client site and second is the server site. For server site we have to think database. This is most important part of our website. Cause our website will have huge data and this data we have to put on database. Data can be update, delete, create and read, that's why we need CRUD operation. Now I'm starting discuss.

**Create:** Our first work is to put data in our database. The create operation will help us to put data in the database. Create operation is also known as insert operation. It's add new documents to a collection. If the collection does not exist, create operations will create the collection.
Create operation has two method to insert documents into a collection:
**•db.collection.insertOne() ->** it will insert a single data at a time
**•db.collection.insertMany() ->** it will insert multiple data at a time

**Example:** suppose our collection name is users. Now will put single data in our collection.
db.users.insertOne(
{
	name: "Ishrafil",
	age:23,
	profession: "Software Developer"
} )

**Read Operations:** After put the data in the database we can be needed retrieve the data. With the help of read operation we can retrieve the data. Read operations retrieve documents from a collection. 
Read operation has a method to retrieve the data from database that is find().
**•db.collection.find()**


**Update Operations:** After putting the data in the database we can be needed update or modify our data. With the help of update operation, we can update or modify our data. Update operations modify existing documents in a collection. 
Update operation has three methods to modify the data or document. 
**•db.collection.updateOne() ->** it will update a single data at a time
**•db.collection.updateMany() ->** it will update multiple data at a time
**•db.collection.replaceOne() ->** it will replace a single data at a time


**Delete Operations:** After putting or updating the data in the database we can be needed delete or remove our data. With the help of the delete operation, we can delete our data. Delete operations remove documents from a collection.
Delete operation has two methods to delete or remove the data or document.
**•db.collection.deleteOne() ->** it will delete a single data at a time
**•db.collection.deleteMany() ->** it will delete multiple data at a time