teleren/devto huggingface dataset:
Trip Collaborator #2: Finalising Location Made Easy (Architecture and Screenshots).
Tags: redishackathon, redis, database, programming
Published: 2022-08-17 16:28:04

[Instructions]: # (To submit to the Redis Hackathon on DEV, please fill out all sections. DELETE ALL NOTES, reminders, and guidelines before publishing.)


## Overview of My Submission

The project is called as **Trip Collaborator.**

### About the project.
Trip Collaborator is an application which will help solve the biggest problem of booking a trip amongst friends, family and relatives.

### Problem Statement.

While we are planning for our next getaway, normally we have lots of places in our mind. These suggestion we either get it from various  platforms but managing them is a bit of a concern.

The thought behind Trip Collaborator is to make that hustle easier, two users should easily be able to share location. There are various features that can be implemented along with these.

I will add scope to which this project can be extended in scope section. If anyone interest can submit a pull request.

### Screenshots of the application

#### Login Page

![Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8h2kir57sjiwlhewxpp.png)

#### Feed Home page

![Feed Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo1v6vokxfh43xp436gf.png)

#### Referred Feed Home page

![Referred Feed Home page!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ky8cnk772nkm3vqhy42.png)
 
---
### Architecture Diagram

#### Overall Architecture Diagram

![Overall Architecture Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3czqcf34nbhhhrj5t1lm.png)

#### Flow Diagram

![Flow Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epp1tn4z0q9sg52tk8ge.png)

---

### About The Author
Apoorv Tomar is a software developer and part of [Mindroast](https://mindroast.com/). You can connect with him on [Twitter](https://twitter.com/apoorvtomar_), [Linkedin](https://www.linkedin.com/in/apoorvtomar/), [Telegram](https://t.me/ApoorvTomar) and [Instagram](https://www.instagram.com/apoorvsinghtomar/). Subscribe to the [newsletter](https://www.mindroast.com/newsletter) for the latest curated content. Don’t hesitate to say ‘Hi’ on any platform, just stating a reference of where did you find my profile.
The Definitive Guide to HTML Block Level and Inline Level Elements
Tags: html, beginners, webdev
Published: 2022-08-17 16:27:00

In your journey as a web developer, one thing you will need understanding of to make web development smooth is the concept of block level and inline level elements in your HTML. An understanding of these elements and the properties will aid you in styling your HTML with little to no hassle.

#What are the Differences between Block Level and Inline Level HTML Elements?# 
HTML element types can be divided into two categories - block level elements and inline level elements. 

Block level elements start on a new line and take up the entire width of a page and by default the browser automatically adds some space (a margin) before and after the element.
Some block level elements include:

```
<div></div>
<hr>
<li></li>
<ul></ul>
```
Block level elements by default are set to a display of block and to be able to 'hack' into their default setting and manipulate their behavior, one will have to reassign the value of the display property to an inline, or flex or whatever value they will prefer.

Inline level elements do not start on a new line but instead flow with text around them and only takes up as much width as necessary. Here are some in-line level elements:

```
<a></a>
<button></button>
<img>

```
To be able to change the default behavior of an in-line level element, one will have to change the value of its, display property to a block or any desired value.

That's all there is to it. Nothing complex here. So the next time you are trying to position or align an element that isn't responding, check what type of element it is and let this short article be your guide.
🤔 ”I can't complete the get started tutorial because some dependencies are not installed”
Tags: opensource, microservices, help, luos
Published: 2022-08-17 16:11:47

When you start your first application or follow the Luos's get started you may face problems with the environment development installation.

Find the resolution of this symptom here: https://www.luos.io/faq/install-development-environment

Otherwise, if you have encountered a problem with Luos, feel free to contact our maintainers via Discord (link in comment). We are an open-source project and we are happy to help you!
Make your text input look like a password input
Published: 2022-08-17 15:49:00

Ever wondered why password inputs look like ****** ,
turns out it's because of `-webkit-text-security` property.
Here's how to make a simple text input look like a password input:

```css
input.pw {
  -webkit-text-security: disc;
}

input.pw2 {
  -webkit-text-security: circle;
}

input.pw3 {
  -webkit-text-security: square;
}

```



```html
<input type="text" class="pw" value="secret"/>
<input type="text" class="pw2" value="secret"/>
<input type="text" class="pw3" value="secret"/>
 
```

result :
![inputs result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/roe050lelu6scwcob4tz.png)
Build Apps with Frontly + Google Sheets
Tags: webdev, news, nocode
Published: 2022-08-17 15:27:00

Do you use Excel or Google Spreadsheets as a part of your business or hobby? Turn those into web apps in minutes with [Frontly](https://www.frontlyapp.com)!

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

Using just a free Google Sheet and a free Frontly account to build a front end web app, you can make a full functional app - no coding required, and it's quick. Depending on your app use case, as quick as a few minutes, but probably more realistically in an afternoon.

We're looking for beta testers! Bring your app idea to life with a simple Sheets back end. Our team is available via live-chat to help, and we have a free-forever plan (with some limitations) for beta testers.

Check out a few [demo apps](https://demo.frontlyapp.com/home) we made, or if this sounds relevant to you, [sign up for an account](https://app.frontlyapp.com/signup) - no strings attached.
How to write C# code to Stitching Images ?
Tags: csharp, opencv, wpf, imagesstitching
Published: 2022-08-17 15:17:04


 Hello every one, I am student and I am new to C# and WPF API. My assignment requirements is create an Images Stitching Application. 
- Detail:
+ Browse images from folder and display its.
+ Stitching all of images were browsed
+ Display the panorama after stitching 
+ Can adjust the quality and size of the newly created image
I made some of them

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

I'm having trouble in two parts:
+ I was able to browse all the images from the folder and display them, but it's not as neatly organized as the sample. Currently it is displaying one image per line.
+ Regarding the stitching algorithm, using the C# programming language, the results are not very good. Can anyone who has experience with this problem help me?
What I learn from AWS Financial Services Cloud Symposium Hong Kong 2022
Tags: aws, fintech, machinelearning, computerscience
Published: 2022-08-17 15:15:28

**What is the goal of this event.**
AWS Financial Services Cloud Symposium Hong Kong 2022 is an annual event dedicated to educating the Financial Services community about the benefits of cloud computing. I heard incredible stories about how amazon web services is hastening the financial sector's digital transformation by giving companies the tools they need to grow at their fingertips while achieving their goals.
Operational resilience continues to be an area of focus for business in the financial industry and AWS cloud is providing highly available IT services to host mission critical workloads such as core banking systems , security and compliance.
One of the key takeaways from the event is how AWS is changing the landscape of business operations during and after the COVID-19 era by raising the bar high and high for their customers through storage, machine learning and other means by providing the ability to deliver an effect or outcome to businesses in the financial industry.
**Please note** this event was broadcasted on Jul 28, 2022. Videos are now available to watch on demand. You can access the sessions by logging in to our virtual platform. 
Check this link below to know more about the event https://aws.amazon.com/events/fsi-cloud-symposium/
Single Responsibility Principle in TypeScript
Tags: typescript, cleancode, javascript, webdev
Published: 2022-08-17 15:15:00

> A class should have just one reason to change.

Every class in our code should be responsible for just a single part of the application. By following this principle we reduce the complexity of our code.

If a class is responsible of multiple parts of our app, it will have to be changed frequently. Therefore, changing one part of the class increases the risk of breaking other parts of itself. The solution is to divide it into multiple classes, each one with one responsibility.

---

In the following bad example we can see how the `Student` class has two responsibilities: managing the student data and the course data.

```ts
class Student {
  id: number;
  name: string;
  courseId: number;
  courseName: string;
  courseSubjects: string[];

  // constructor

  getCourseSubjects(): string {
    return this.courseSubjects.join(", ");
  }
}
```

Following the Single Responsibility Principle we can improve this by moving the course data to its own class.

```ts
class Student {
  id: number;
  name: string;
  course: Course;

  // constructor
}

class Course {
  id: number;
  name: string;
  subjects: string[];

  // constructor

  getCourseSubjects(): string {
    return this.subjects.join(", ");
  }
}
```
What Are JavaScript Data Types?
Tags: javascript, webdev, beginners, programming
Published: 2022-08-17 15:09:00

Data Types specify the kind of data stored and manipulated in a program.

Data Types can be categorized into six parts which isn’t divided into three main categories.....

**1. Primitive:**
<>Number
<>String
<>Boolean

**2. Compound:**
<>Array
<>Object
<>Function

**3. Undefined:**
<>Undefined

The two most common categories are know to be different from each other because primitive data Types can only contain one value simultaneously while the compound data Types can contain more values.
Let’s explain them accordingly...

**<>String Data Type<>:**
This data type deals with textual values and characters which are created with the double or single quotation mark on the keyboard. Example...

```
var a = “hi there”;
var b = “hello there”;
```

**<>Number Data Type<>:**
This data type deals with positive and negative numbers without or with decimal numbers and places written using exponential quotations.

Example....

```
var c = 24;
var d = 23.7;
```
**Note**: When writing codes for Number Data Types, strings are not supported in other To bring a desired outcome.


**<>Boolean Data Type<>:**
The Boolean Data Type can only contain two values: **TRUE** or **FALSE**.
It is usually used to show values like Yes(true) or No(false). For example....

```
var Show = true;
var IsShow = false;
```

**<>Undefined Data Type<>:**
This data type is can be used to assign a single value: **The Undefined Special Value**. 
This data type is effective when you declare a variable without a value. 
For example....

```
var d;
var e = “Okanu Gracious”;

alert(d) // Output: Undefined
alert(e) // Output: Okanu Gracious

```


**<>Object Data Type<>:**
The object Data type is a very complex data type in JavaScript which has one sole aim. The aim of the object data type is to store large collections of data.
An example of Object Data Type are....

```
var WebDev = {
Frontend : “HTML and CSS”
Backend : “MySQL and Python”
}
```

**<>Array Data Type<>:**
An array data type is a type of data type where a programmer inputs different data values in a single variable. An example of Array data type includes....

```
var Frontend = [“HTML”, “CSS”, “JavaScript”, “ReactJS”, “Vue”]

alert(Frontend[0]); // Output: HTMl
```

**<>Function Data Type<>:**
This is data type which executes a block of codes. Functions can be used anywhere, it can be stored in an array, objects, variables, anywhere.
An example of Function Data Type are...

```
function Myfunction(){
console.log(“hello”)
}
```

Thank you for reading!
Do follow me on Twitter @okanugracious
Running ASP.NET on local ip, not localhost
Tags: dotnet, iis
Published: 2022-08-17 14:57:50

Hi !
On a ASP .NET project, as I needed to see my local work on my phones, I wanted to switch from "localhost" to local ip.

I changed applicationhost.config :

after the existing localhost nodes, adding :

<binding protocol="http" bindingInformation="\*:64645:192.168.XXXX" /> 
<binding protocol="https" bindingInformation="\*:44314:192.168.XXXX" />

But nothing works, when building and running the project applicationhost.config is overwritten, those two lines disappear and back to initial state, indeed runs localhost:44314

I use JetBrain IDE

If you have any clue, merci !!!
Memória Real x Memória Virtual e Fragmentação
Tags: architecture, devjournal, todayilearned
Published: 2022-08-17 14:57:15

Assim como já vimos em posts anteriores, a memória vê uma lista de endereços que apontam para páginas e não necessariamente temos o número máximo de endereços que a CPU nos fornece, onde o barramento nos limita e o SO reserva um pouco para ele. 

Porém, temos um outro detalhe que é importante saber e entender. Que é a memória virtual. 

**Mas o que é isso Thomas?**

![pensando](https://media.giphy.com/media/iQjYMWlP1Qwq4JlWfQ/giphy.gif)

Então, na memória real, nós realmente tínhamos uma lista de endereços que iam por exemplo de 000 até FFF (desconsiderando todas as diminuições apenas para que seja mais fácil de entender). Porém isso causava um problema onde os programas podiam acessar os dados um dos outros e outros problemas. Com isso, a partir dos anos 90, surgiram processadores capazes de usar memória virtual.

## O que acontece?

Bem, a memória virtual funciona da seguinte forma, ela pega uma parte da memória local e cria endereços virtuais, assim o programa vai ver uma memória de 000 até FFF, mas na vdd vai estar acessando por exemplo A43. E conforme for precisando de mais ele vai alocando. 

E com isso os programas começa a se tornar isolados. Impedindo que eles comecem a acessar dados um dos outros. 



## Fragmentação

![fragment](https://media.giphy.com/media/Rpc7RLegctKms/giphy.gif)

Como um último assunto desse post vou falar sobre fragmentação. Vamos supor que você tenha 5 caixinhas, e sempre que você quiser armazenar coisas nela tenha que ser em caixas seguidas. 

(Você vai precisar de bastante imaginação)

Suponha que você guarde 3 tênis nas primeiras caixas. E agora decida guardar 2 camisetas nas duas últimas. Mas agora decide esvaziar a segunda e a quarta caixa. 

E agora vc tem duas caixas vazias, mas separadas. E como você só pode salvar coisas contínuas, mesmo que possa guardar duas coisas, você só pode guardar coisas diferentes. E esse é o problema da fragmentação.
Cryptoprocessing as a way to quickly improve your business
Tags: cryptoprocessing, business, web3, cryptocurrency
Published: 2022-08-17 14:52:00


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

Cryptocurrency today is not just a popular word in the news headlines. More and more people are using digital assets. For some, it’s a forced measure because sometimes there are no other ways to transfer money overseas. For others, it is an additional feature that they are curious to use.

The point remains the same: the number of users of exchanges, wallets, and other blockchain services is growing. People are becoming regular “clients”, cryptocurrency has many more advantages than economic instruments. Commissions are lower than in a bank, transaction terms are higher, and there are simply no restrictions on international transactions.

The more people join the number of fans of the crypto industry, the more it grows and develops, becoming useful and convenient not only for individuals, but also for businesses. Among the latest stunning innovations are cryptoprocessing services. Thanks to them, companies can:

- Accept, exchange and withdraw funds;

- Save on commissions;

- Faster transactions;

- Scale up their business and expand their geography;

- Increase their client base.

Cryptocurrency is cheaper and easier to use as a means of making online payments. At the same time, businesses are relieved of the responsibilities that come with working with banks. There is no need to worry that they can control and influence payments — in blockchain this is impossible.

0xprocessing is one of the largest advanced processing services today. It is the most technologically advanced payment gateway that allows e-commerce platforms, gaming platforms and gambling providers, as well as any other business to accept over 40 of the most commonly used cryptocurrencies as payment from users around the world.

Their proprietary blockchain infrastructure allows all transactions online to be secure and reliable, avoiding risks of third-party interference and data leakage, and the integration of Web 3.0 wallets makes the project truly unique.

You can get more information directly here: https://t.me/OxProcessing_bot
What Mediation is and how Virtual Mediation is done on Law Blocks.
Published: 2022-08-17 14:47:12

In Mediation, a neutral third party, a mediator, tries to facilitate negotiations between the disputing parties. Typically, a mediation will follow the same general agenda.
First, the parties will meet together with the mediator through virtual connect, and everyone is given an opportunity to introduce themselves and explain their complaints. The mediator will then usually break up the parties so they can meet with them individually, and understand their difficulty.
At this point, the mediator will normally try to understand each sides of the problem. better while simultaneously understanding any weaknesses in their cases. To make the parties recognize the benefit of coming together to a settlement rather than proceeding in any Court.
After some discussion, the mediator will see what terms one party wishes to offer the other and then meet with the other party to convey this offer. This back and forth will usually continue until the parties come to an agreement or until it becomes apparent that no resolution is possible. If a settlement is reached it is loaded on the law Blocks and both the parties sign in cryptographically. If a party violates the settlement, it will give rise to a cause of action for breach of contract. If no settlement is achieved, the mediator will declare an impasse, and the case can proceed to other option of settlement through Expert Legal Arbitrators.
Law Blocks help to take this mediation process online through our global legal community. The final legal contract will record on XDC Network’s blockchain, and users will settle the platform and lawyer fees in LBT token (XRC20 Token). The community can buy LBT on https://www.bitrue.com/trade/lbt_usdt for now and on many more leading exchanges shortly.
For more info visit:
LinkedIn:https://www.linkedin.com/in/law-blocks-365731225/
Twitter:https://twitter.com/lawblockstoken
Reddit:https://www.reddit.com/user/LawBlocks/comments/rd873t/law_blocks_a_legaltech_community/
Medium:https://lawblocks.medium.com/
Discord: https://discord.gg/9eRv89bt
YouTube: https://youtube.com/channel/UCbg3ToXjksIHOpsxl8YsO_A
Website: https://lawblocks.io/
How to make an element to fill the height of a page
Tags: html, css, beginners, tutorial
Published: 2022-08-17 14:35:00

Sometimes it's needed for a fullscreen menu, etc. There are 2 ways I know to do so:

#100vh
`vh` stands for "viewport height". To make the element full-screen just add `height: 100vh` to its CSS. There's also `vw` that's based on viewport width. The only problem is that `vh` doesn't mind mobile browsers' search bar and toolbar so sometimes you may encounter a situation when these bars hover some page's elements hiding them.

#100dvh
`dvg` stands for "dynamic viewport height", it does mind mobile browsers' search bar and toolbar and excludes their heights out of viewport's height.
TIDBIT: get direnv to use .env
Tags: devops, bash, todayilearned
Published: 2022-08-17 14:22:00

[`direnv`](https://direnv.net/) is a great tool for loading environment variables on a per-project basis.

The one catch is that it loads `.envrc` files by default and not `.env`. I found their instructions on how to load an `.env` a little unclear for a new developer like myself so below I'll show what to do.

I'm assuming:
- you've [installed `direnv`](https://direnv.net/docs/installation.html)
- you're on a mac or linux machine (sorry, Windows)

## create a config

First, create a config directory for `direnv`

```bash
mkdir ~/.config/direnv
```

Then create a config file

```bash
touch ~/.config/direnv/direnv.toml
```

## configure

Open the config, and add

```toml
[global]
load_dotenv = true
```

Save, and restart your shell

```bash
exec $SHELL
```

That's it!

Now, when you go to a project with a `.env` file, you can simply run

```bash
direnv allow
```

It will load the `.env` instead of just looking for `.envrc`

I hope this helps someone else!