teleren/devto huggingface dataset:
Relational database (MySql)
Published: 2021-12-23 16:42:53


The importance of databases in web applications is immense. Information base in any good application. There are many identity databases and relational databases are more commonly used. Such as MySQL, Oracle (Oracle), PostgreSQL (PgSQL) etc. Data can be stored in a database and sorted according to the information query (required method).

SQL = Structured Query Language is a powerful language for managing relational databases. With this language you can manage and access the data of any database system such as MySQL, SQL Server, Oracle etc. It is a 4th generation language. However, it is not a full-fledged programming language because it does not support data structures such as loop, branch.
What can be done with MySQL?
 =>A new database can be created
 =>New tables can be created
 =>Query can be done
 =>Data can be retrieved from the database
 =>New records can be inserted into the database
 =>Records can be updated
 =>Can be deleted etc.

An example of an equation statement
SELECT name, email FROM users WHERE salary > 40000;

Query says that this whole above statement survives in SQL. In a query, the table of the database, the name of the column can be written with backtick (`) but it will work even if not given. I could write the above query as below

SELECT ‌‍`nam‌‌‌‍e`, `email` FROM `users` WHERE `salary` > 40000;
 
SQL Statement
Most of the work in the database can be done with the sequel statement. For example, with the following sequel, all the records in the friends table will be selected.

SELECT * FROM friends

Esquel but not case sensitive i.e. ‘select * from friends’ and ‘SELECT * FROM friends’ will both have the same function and output.

SQL DDL and DML
MySql can be divided into two ways

DDL-Data Definition Language: It is used to create databases, delete, etc. Index (keys) are added, connections are made between two tables, constraints are fixed in the table, etc .. Important DDL statements are

 =>CREATE DATABASE - A new database is created
 =>ALTER DATABASE- The database is executed
 =>CREATE TABLE - A new table is created
 =>ALTER TABLE - The table is edited
 =>CREATE INDEX- INDEX is created
 =>DROP INDEX- INDEX is deleted

DML-Data Manipulation Language

Query and update is done with the DML part of SQL.

 =>SELECT - retrieves data from the database
 =>UPDATE- Updates the data
 =>DELETE- Deletes data from database
=>INSERT INTO - Inserts information into the database
CSS Transformations
Tags: css, transformations, transform, programming
Published: 2021-12-23 16:42:29

## CSS Transformations
CSS transformations can be split into two categories, two-dimensional and three-dimensional. We’ll look at two-dimensional transformations first. Two-dimensional CSS transformations operate on the X (horizontal) and Y (vertical) axes.

**CSS Transform: Translate**
The translate() method translates, or moves, a page element up, down, left, and/or right on the page by a specified amount. In the parenthesis, the first number specifies the horizontal distance, and the second number specifies the vertical distance.
For example, we can translate our div by a number of pixels:  

```
transform: translate(100px, 75px);
```
TranslateX():
In addition to translate(), we also have the translateX() and translateY() methods. translateX() moves an element only horizontally, and takes one argument:

```
transform: translateX(100px);
```
TranslateY():
Similarly, the translateY() method moves an element vertically. It also takes just one argument:transform: translateY(100px);

CSS Transform: Scale
The scale() method changes the size of the target element. If we provide one argument, this increases or decreases the size of our div by a multiple of its original size:

```
transform: scale(2);
```

CSS Transform: Rotate
The rotate() function, as you might guess, rotates an element. By default, the element will rotate around its center. We can specify the rotation in terms of degrees, radians, or turns (from 0turn to 1turn): 

```
transform: rotate(45deg);
```
CSS Transform: Skew
The skew() method skews, or slants, an element along its X and/or Y axes. Its arguments specify the horizontal and vertical angle of the skew, respectively. 

```
transform: skew(50deg, -15deg);
```
The CSS transform-origin Property
transform-origin is another CSS property that can be used with transform. The transform-origin property changes the position of the origin, the point where the transformation starts or is based around.
This is most clearly demonstrated with the rotate() method: We can use transform-origin to move the center point of rotation: 

```
transform: rotate(45deg);  transform-origin: top left;
```

CSS Transform: Perspective
The perspective() value sets the depth of the element on the Z-axis. It toggles how “close” or “far away” the element appears. perspective() is used in conjunction with other 3D transformation methods, as we’ll see next.
CSS Transform: rotateX() and rotateY()
Like rotate(), the rotateX() and rotateY() values rotate our div, but “around” the X and Y-axes: 

```
transform: perspective(500px) rotateY(40deg);
transform: perspective(500px) rotateY(60deg); 
transform: perspective(500px) rotateY(80deg);
```
Don't forget to share this post!
JSON Web Tokens(JWT)
Published: 2021-12-23 16:40:45

JSON Web Tokens (JWT) are an RFC 7519 open industry standard for addressing claims between two gatherings. For instance, you can utilize jwt.io to unravel, confirm, and produce JWT.

JWT indicates a smaller and independent technique for conveying data as a JSON object between two gatherings. Since it is marked, this data can be checked and trusted. JWTs can be marked utilizing confidential (utilizing the HMAC calculation) or an RSA or ECDSA public/private key mix. In a second, we'll see a few instances of how to utilize them.
Node CRUD Operations
Published: 2021-12-23 16:39:56

CRUD, Express, and MongoDB are large words for a never contacted individual any server-side programming in their life. How about we rapidly present what they are before we plunge into the instructional exercise.

Express is a structure for building web applications on top of Node.js. It works on the server creation process that is as of now accessible in Node. On the off chance that you were pondering, Node permits you to involve JavaScript as your server-side language.

MongoDB is a database. Here you store data for your sites (or applications).

CRUD is an abbreviation for Create, Read, Update and Delete. It is a bunch of activities we get servers to execute (POST, GET, PUT and DELETE demands individually). This is the thing that every activity does:

Create (POST) - Make something
Read (GET)- Get something
Update (PUT) - Change something
Delete (DELETE)- Remove something
Kali VPN Tweaks for TryHackMe
Tags: cybersecurity, tutorial, beginners, kali
Published: 2021-12-23 16:27:25

I recently [signed up for TryHackMe](https://tryhackme.com/p/unit.vector), a CTF-style online platform for learning cyber security, using hands-on exercises and labs. I prefer to use my own tooling ([Kali](kali.org/)) in a local virtual machine rather than the browser-based Attack Box. This requires an OpenVPN tunnel connection.

I discovered that while you can use Kali's default VPN client, you need to make a few configuration changes once you import your personalized `.ovpn` configuration file.

**Note:** This assumes you have configured your LAN to use a private IP range of `192.168.0.0/16` which virtually all SoHo routers do. (If you've reconfigured your router to address in `10.0.0.0/8` you probably don't need this guide.)

# Step 1 - Download & Import your Configuration File

Click the Network Connections menu in the quick launch bar (top right), choose VPN Connections > New, choose Import A Saved VPN Confiruation... and provide your `<tryhackme-username>.ovpn` file.

![Picture of described GUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hve603oydhgycbwa0ybl.png)

# Step 2 - Tweak Routes

Open the configuration's settings and choose the `IPv4 Settings` Tab, and click `Routes...`.

Check off `Use this connection only for resources on its network`

![Picture of described GUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o50yl5mhi1uevsielnbk.png)

Without this, _all_ traffic will pass over the VPN tunnel, which has the negative side-effect of blocking anything that isn't served from the TryHackMe `10.0.0.0/8` network.

# Step 3 - Set tool scope

You could additionally set scope of tools like BurpSuite to TryHackMe's IP range:

![BurpSuite > Target > Scope > Use advanced scope control](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2lthqkdsbkm5flgk5n6.png)
O pequeno grande ganho do enum no Dart 2.15
Tags: dart, flutter, news, enum
Published: 2021-12-23 16:36:33

Como sabemos o `enum` no **Dart** tem limitações se comparado com outras linguagens 🙄, como exemplo, não podemos declarar membros e antes que se pergunte, sim, já temos essa solicitação em andamento, veja a [issue](https://github.com/dart-lang/language/issues/158) para acompanhar.

Outro ponto é que não havia uma forma de obter a `String` de um `valor` do `enum`.

Antes para conseguir esse "feito", era necessário, por exemplo, usar as `extensions`:

```dart
enum Day { monday, tuesday, wednesday, thursday, friday, saturday, sunday }

extension on Day {
  String get toShortString => toString().split('.').last;
}

print('It\'s ${Day.friday.toShortString}');
```

No **Flutter** ainda há um método chamado `describeEnum` que faz o mesmo, leia a [documentação](https://api.flutter.dev/flutter/foundation/describeEnum.html) para saber mais 📖 <br/>**Porém, aconselho a usar a forma que irei descrever adiante.**

## Agora no 2.15 🙏

Fazendo o mesmo uso das `extensions` acima, a equipe do **Dart** implementou alguns métodos visando melhorar a forma de se obter e trabalhar com essa `String`, eles são demonstrados abaixo:

```dart
enum Day { monday, tuesday, wednesday, thursday, friday, saturday, sunday }

print('It\'s ${Day.friday.name}');
print('It\'s ${Day.values.byName('monday').name}');
final enumMap = Day.values.asNameMap();
print('It\'s ${enumMap['sunday']?.name}');
```

Ae sim, bem melhor 🙌

Sabemos que ainda faltam melhorias, mas vamos aguardar os próximos capítulos 🕥

Bom já sabe neh?! Se curtiu, deixe um **like**, dá aquela **compartilhada** com outros `devs` e me **segue** nas redes sociais 🍻

### Links úteis

{% https://stackoverflow.com/a/71412047  %}
context api
Published: 2021-12-23 16:30:06

context API
context API is an important thing in react. It helps us to pass data through the component tree without props down. In a larger program, it is not convenient to use props down manually at every level. If we want to pass data from one component to another component we have several ways to send data. For a simple program, we can use props down. In this process, we will send data from parents to every child component. There is no question when we work with a small program. But it’s become an issue when we work with a large program and we have to send data from one component to another component it is very convenient to use context API. Let’s see an example:











If we want to show some data in the 6th child component, we can use two methods. using the props down method we have to send data from parent to each child component, but if we use context API we don’t have to pass data at every child component. We can directly send data from parent to 6th child component. It saves time as well as increase performance.


JavaScript Props Types
Its basically use to make sure that the component data types or not and also the value components pass to other component is its right data or not. Props Types exports several authentication tools that can be used to ensure the accuracy of the data obtained.

what is exactly State-props is?
Sometimes we use state to keep data and if other components need this, we pass the state as a props that is state props for better known props are used for data transfer and status - for data management. The data from the props is read-only and cannot be changed by external components. State data can be modified from their components, but they are private.
what is JSX?
JSX is a React Extension add-on for JavaScript syntax that provides a way to configure component maps using syntax known to many developers. It is similar to HTML. Basically, its work like internally all the code which completely like HTML but they work as a JSX.
what are hooks?
simply hooks are like a globally configure components function which need to be use in other many components according with condition where we need to use. for example, useAuth() and use Firebase() we use this for firebase authentication.
what are custom hooks?
Personalized hooks are a mechanism for reusing modern logic (such as setting, subscribing, and storing current values), but each time you use a particular hook, its status and effects will be completely shared. 
Custom clusters allow us to copy functional components, remove logic from the user interface surface, and copy code by moving common usage to reusable hooks.
JSX, Context API, State-props & PropTypes

Published: 2021-12-23 16:26:04

**JSX**

JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. It allows us to directly write HTML in React (within JavaScript code). It is easy to create a template using JSX in React, but it is not a simple template language, instead it comes with the full power of JavaScript.


**Context API**

The Context API is a React structure that enables you to exchange unique details and assists in solving prop-drilling from all levels of your application. Context is a good way to share values between our components without using props every time, but these criteria should not be only one. If some values are needed on different levels of the components tree and for many elements, it will be a good idea to use context for this data.


**State-props**

Props are used to pass data, whereas state is for managing data. Data from props is read-only, and cannot be modified by a component that is receiving it from outside. State data can be modified by its own component, but is private (cannot be accessed from outside)


**PropTypes**

PropTypes are a mechanism to ensure that components use the correct data type and pass the right data, and that components use the right type of props, and that receiving components receive the right type of props.
Preserve aspect ratio for images
Tags: ratio, image, javascript, ts
Published: 2021-12-23 16:15:37

---
title: Preserve aspect ratio for images
published: true
description: 
tags: ratio, image, js, ts
//cover_image: https://direct_url_to_image.jpg
---

I'm currently working on a website where I have images of random sizes. They all need to be responsive and be placed within a solid container that will maintain the aspect ratio of the image it contains. This can be done with the `padding-top: x%` and `position:relative` on parent element while the child (image) has `position: absolute` and `top:0; left:0; right:0; bottom:0` 
So I found needed a way to calculate image radio based on dimensions. In my project I use chakra UI so, the radio has the form of `a/b` Let's look into it:

I'm using a API based CMS where I need to convert radios from strings into `a/b` format (not string)
``` TS
// Transforms 'a/b' string into a/b
export const parseRatio = (prop: string) => {
  let newRatio = prop.split('/'),
      first = Number(newRatio[0]),
      second = Number(newRatio[1])
  return  first / second
}
```


Next I found this neat little function that calculates my ratio based on image dimensions (that I can query from the API)
``` TS
// compute ratio based on dimensions
export const ratioCalc = (w:number, h:number) => {
  let gcd :any = (a:number, b:number) => (b == 0) ? a : gcd (b, a%b),
    ratio = gcd(w, h),
    left = w/ratio,
    right = h/ratio
  return parseRatio(left + '/' + right)
}
```

Let me know what you think.
Apama Advent Calendar - 23 Dec 2021 - Apama on planet Earth
Tags: apama, iot, cumulocity, streaminganalytics
Published: 2021-12-27 09:57:47

---
title: Apama Advent Calendar - 23 Dec 2021 - Apama on planet Earth
published: true
date: 2021-12-23 16:12:07 UTC
tags: apama, iot, cumulocity, streaminganalytics
canonical_url: https://tech.forums.softwareag.com/t/apama-advent-calendar-23-dec-2021-apama-on-planet-earth/254022
---

_This is Day #23_ _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._  

In this penultimate article for our 2021 Advent Calendar, we’re switching away from the technical hints and tips, to look more at some use-cases. Check the original article in the [Software AG Tech Community](https://tech.forums.softwareag.com/t/apama-advent-calendar-23-dec-2021-apama-on-planet-earth/254022).

_Note that some posts may be published a day or two early or late (e.g. Mon-Fri) so you may find you have bonus days with more than one post!_
BACK-END CORE-CONCEPT INTRODUCTION:
Tags: javascript, node, webdev, mongodb
Published: 2021-12-23 16:10:41

Nodejs: Node.js is an open-source server side runtime built on Chrome's V8 JavaScript engine. Node.js is JavaScript runtime for easily building fast and scalable network applications.It’s primarily used for non-blocking, event-driven servers, due to its single-threaded nature. It's used for traditional web sites and back-end API services, but was designed with real-time, push-based architectures in mind.
ExpressJS: Express. js is a Node. js web application server framework, designed for building single-page, multi-page, and hybrid web applications. It is the de facto standard server framework for node.It is a lightweight package that does not obscure the core Node.
Mongodb: MongoDB is a NoSQL database.MongoDB is the most commonly used database . MongoDB makes it easy for me to store structured or unstructured data. Using Node & express i store my data on mongodb. Then I use those data for my applications.  
CRUD Operations: CRUD operations allow you to work with the data stored in MongoDB. The CRUD operation documentation is categorized in two sections: Read Operations find and return documents stored within your MongoDB database. Write Operations insert, modify, or delete documents in your MongoDB database.

JWT Authentication: JWT means JSON web tokens. JWT are representing claims between two parties. JWT specifies a compact and self-contained method for communicating information as a JSON object between two parties. Because it is signed, this information can be checked and trusted. JWTs can be signed using a secret public/private key combination.

Mongoose: Mongoose is a Node.js-based Object Data Modeling library for MongoDB. It is akin to an Object Relational Mapper such as SQLAlchemy for traditional SQL databases. The problem that Mongoose aims to solve is allowing developers to enforce a specific schema at the application layer. In addition to enforcing a schema, Mongoose also offers a variety of hooks, model validation, and other features aimed at making it easier to work with MongoDB.

Aggregation:  Aggregation operations process the data records/documents and return computed results. It collects values from various documents and groups them together and then performs different types of operations on that grouped data like sum, average, minimum, maximum, etc to return a computed result.

sql and nosql databases: SQL Databases are categorized as Relational Database Management System.These databases have fixed or static or predefined schema. SQL databases are best suited for complex queries.
NoSQL databases are categorized as Non-relational or distributed database systems. NoSQL has dynamic schema.NoSQL databases display data as collection of key-value pairs, documents, graph databases or wide-column stores.
React 
Published: 2021-12-23 16:09:18



JSX
JSX is a syntax extension of javascript. JSX looks like html but actually, it is not html.JSX converts html tags to react elements. XML rule is followed by JSX. Regular javascript is slower than JSX. so it is a big advantage. And JSX also gives an error if the html code is not correct.
Ex:
const name = 'Rafiun Vabna';
const element = <h1>Hello, {name}</h1>;

State And Props
State :
        The state is mainly a variable that stays in a component. we store property values in the state. We cannot access or change states outside the components. And we can also use state only inside the component.
 Ex:
    Const [state,setState]=usestate ()


Props:
      Props are mainly passed arguments in react components. We use react components in UI again and again. Sometimes we don’t render the same data we change it .in that time we pass them through props. 
Ex:
   
function Welcome(props) { 
return <h1>Hello, {props.name}</h1>;
 }


Hooks 
The hook is mainly a connection between state and components. Hooks allow components to access the state  . we can only call hook inside react function component.
Ex:
     useState hook.
     useref hook 
     use context hook

Context API
      Context API is an alternative way of props drilling. Context API mainly manage state globally. We access data in many nested components through props. but using context API we can easily access data in many nested level components. We import create Context  to create context API

 Ex:
const MyContext = React.createContext(defaultValue);
   

Component life cycle
components have a life circle of Mounting, update, unMounting.
Mountain means creating into the dom  by calling the render method
Example  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

Updating. When a component is updated component update life cycle is activated. Component update counts any kind of change in state props
CRUD Operation with Node and Mongodb
Published: 2021-12-23 16:07:45

hello guys how are you? i think you all are fine. do you know about crud operation with node,express and mongodb. you well done. if don't know. hey let's start with me.
at you need to install node in your computer. then make directory in your computer. also install express and mongodb. then run your vs code terminal **npm init command.** 

C=Create 
R=Read
U=Update
D=Delete

Create-Method
First I will discuss about C, which means Create Method. We can send data to the server using the Post method. Notice below the code block.


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

The post method take two parameter req and res object. Then we can req server then server response us.

Read-Method
The Read method means we can get something from the server. Where we need to use the get method. 

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

Notice the code block the get method also takes the req and res method . we can request to server for data then server send data us.

Update Method
We use the Put method to update something. Which takes two parameters req and res. 
We have to use $Set to update items. Which property will be updated we need to the property in the $Set.



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

Delete-Method


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