teleren/devto huggingface dataset:
Data Storage Technology – Best Cloud Storage Services
Published: 2022-11-18 13:21:15

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwvwzkuvfj6trkv4kmj0.png)
Storage is part of the computer. Data Storage Technology has revolutionized this arena. From Floppy Disks, CDs, DVDs, USB Flash Drives, and Solid State Drives respectively. While online drives are the best cloud storage services.

[Read Full Article](https://iconiferz.com/data-storage-technology-best-cloud-storage-services/)
Vue 3 component eco system
Published: 2022-11-18 13:16:41

<IMG  src="https://miro.medium.com/max/700/0*IwCEy1VV34FMqx3y.png"/>

Check out Github repo for a boiler plate that contains Vue3 Typescript, Vite, Tailwind and Jest which contains examples of the different component listed below.

**_https://github.com/wadizaatour/Vue3Tailwind_**

# Using Components

Values in the scope of `<script setup>` can also be used directly as custom component tag names:


```
<script setup>
import MyComponent from './MyComponent.vue'
</script>
<template>
  <MyComponent />
</template>
```

Think of MyComponent as being referenced as a variable. If you have used JSX, the mental model is similar here. The kebab-case equivalent `<my-component>` also works in the template - however PascalCase component tags are strongly recommended for consistency. It also helps differentiating from native custom elements.

# Dynamic Components

Since components are referenced as variables instead of registered under string keys, we should use dynamic :is binding when using dynamic components inside `<script setup>`:


```
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>
<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>
```

Note how the components can be used as variables in a ternary expression.

# Recursive Components

An SFC can implicitly refer to itself via its filename. E.g. a file named FooBar.vue can refer to itself as <FooBar/> in its template.

Note this has lower priority than imported components. If you have a named import that conflicts with the component’s inferred name, you can alias the import:


`import { FooBar as FooBarChild } from './components'`

# Namespaced Components

You can use component tags with dots like <Foo.Bar> to refer to components nested under object properties. This is useful when you import multiple components from a single file:
```
<script setup>
import * as Form from './form-components'
</script>
<template>
  <Form.Input>
    <Form.Label>label</Form.Label>
  </Form.Input>
</template>
```

# Lazy load Components


In `<script setup>` you can simply lazy load components:
```
<script setup>
import { defineAsyncComponent } from 'vue'
const MyComponent = defineAsyncComponent(() => import(./MyComponent.vue))
</script>
<template>
  <MyComponent />
</template>
```
A first look at Storybook
Tags: storybook, testing, webdev
Published: 2022-11-18 13:16:05

So you might have heard about Storybook, not children's stories, but the one for developers.

It's a frontend system (a workshop, they call it) for building UI components and pages.
This allows you to create more stable components and test and document them.

## Why is Storybook so great?

Storybook provides a way for developers to create components and pages in isolation. This means you can focus on how that individual element should behave, its options, and so on.

Eventually, you write your story for the component and define the different states it can be in.

After this, we get a couple of cool features:

- Spot test: Run your Storybook, and you'll be able to view the component and see if it is showing as expected.
- Visual tests: Automated tests to see if your component still renders as the previous test
- Interaction test: Test how it behaves on user interaction
- Accessibility test: Super cool to see there is an accessibility test on the component level!
- Snapshot testing: You can test on component dom level against snapshots to ensure nothing changes by accident.

You'll be able to reuse the test in Storybook in other testing frameworks as well.

Besides these points, it also provides documentation for your team. Colleagues can find components easily and see what they should look like.

## Do we always need it?

I'm super intrigued to give Storybook a try, as we use many custom components (like, really a lot!). This becomes a pain to maintain as some code someone else writes might accidentally impact a component.

I'm writing this series around Storybook to try it before implementing it.
I want to experience what it's like and if it can be helpful.

But, with that said, there will be times when it will be sheer overkill for your project.
For instance, when you rely solely on an external component library, you can use Storybook, but it will take longer to set up and doesn't really bring much value.

There is also another level of how long it will take to set up Storybook.
If your application is tiny, you may like to test it manually.
But in most cases, you'd be benefited from having some visual system in place.

I'm super hyped to try it and follow my newsletter if you are, too, as we will be exploring it in detail over the next couple of articles.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Connecting Python scripts to Firebase Web-App ?
Tags: webdev, firebase, python, beginners
Published: 2022-11-18 13:14:44

Hey guys,

Bit of an issue - I'm building a website for a project and in the site, I need to have visualisations, and a chat bot (that are done already as python scripts) on the site. I'm using Firebase at the moment for hosting the site. Is there a way I can run the python visualisation inside the site?  No idea where to go. I've looked online at documentation and from what I can see, google cloud will be able to run the scripts once I containerize them. 

Are there any tutorials I can look at that will help me with this? Totally lost. 

I'm using JavaScript for the programming for the site.

Thanks all
Follow Friday: NodeJS Edition (18 November 2022)
Tags: meta, writing, node, javascript
Published: 2022-11-18 13:02:00

_Happy Friday, friends! 🎉 Follow Friday is your weekly opportunity to shout out fellow DEV Community members doing awesome work. Check out the comments and follow someone new!_

[Node.js](https://nodejs.org/en/) is an open-source, cross-platform JavaScript runtime built on Chrome's V8 JavaScript engine. It's used for server-side development and can be used on the frontend and the backend, despite that it's often mistaken for a backend-only framework.

So, devs: who are your favorite DEV community members writing about NodeJS?

_**Formatting tip**: to populate a card with a follow button, use the liquid tag syntax `{% embed https://... %}` and insert the URL of your favorite author's profile._

Join in on the #FollowFriday fun by @mentioning your favorite author to follow on the topic of NodeJS (and letting us know why you love their posts!) ⤵️
Reorder items with Drag and Drop using SwiftUI
Tags: ios, swift, swiftui, mobile
Published: 2022-11-18 12:28:26

Learn how to replicate UIKit’s Drag and Drop feature in the SwiftUI

Earlier, we implemented a Drag and Drop feature for UICollectionView, which was used to copy the dragged item. Very useful for functionality like adding items to the cart.

Please [check out the article](https://blog.canopas.com/ios-drag-and-drop-collection-view-cell-using-swift-ea21d1f4045c) if you’ve missed it.

Last week, we received a new requirement to provide drag and drop feature in the app for a better user experience.

According to requirements, we wanted to allow users to prioritize their activity according to their needs. While we did the implementation with UIKit in the past, we never had a chance to do it using SwiftUI.

I have divided this into 3 parts, feel free to jump around according to your needs!

1. Create a basic UI
2. Add drag support
3. Add drop support and update the list

For detailed implementation, [check out our blog](https://blog.canopas.com/reorder-items-with-drag-and-drop-using-swiftui-e336d44b9d02).
C++ intro for starter 7
Published: 2022-11-18 12:19:39

#Assalomu alaykum!

Bugun sizlar bilan gaplashdigan mavzu ternary shart operatorining yana mukammalroq varianti, bu `If&Else` haqida batafsil gaplashamiz.

Demak,boshladik `If` ingliz tilidan tarjima qilganda `agar` ma'noni bildiradi,`else` esa `aks holda` degan ma'noda ishlatamiz.Bulardan ko'rinib turibdiki,biz berilgan fikr bo'lsin:
Agar bugun yomg'ir yog'sa bugun biz universitetga bormaymiz.
Aks holda,biz universitetga boramiz;
Xa-xa siz tushunganizgizdek, ikkita fikrdan birini qaysi biri maqulligini ko'rish uchun, biz bu operatorlardan foydalanamiz.

Quyidagi sur'atga diqqat e'tibor bering!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/os1acwvhz4j5d9ndrsxc.png)
  ko'rib turganingizdek,ikkita fikrdan birini bajarmoqda bu funksiyalarimiz.

Demak,
```cpp
#include<iostream>
using namespace std;

int main()
{ int statement;
  cin>>statement;
  if(statement==true){cout<<"to'g'ri fikr";}
  else {cout<<"noto'g'ri fikr";

return 0;
}
```
Qo'shimcha qilib aytadigan bo'lsak,`if` qatnashgan funksiya shart bera olamiz va `else` esa agar `if` qatnashgan  funksiyalarning hech biri `to'g'ri`n ya'ni `true` qiymat qaytarmasa ,ishga tushadi va qaysidir `if` dagi statement ya'ni fikr to'g'ri bo'lib qolsa `else` ishga tushmaydi.

Masalan
```cpp
#include<iostream>
using namespace std;

int main()
{ int statement;
  cin>>statement;
  if(statement==true){cout<<"to'g'ri fikr";}
  else if (statement>boshqa fikr) cout<<"Statementga baho"; 
  else if (statement <boshqa fikr) cout<<"Statementga baho ber"; 
  else {cout<<"noto'g'ri fikr";

return 0;
}
```
`else if` funksiyasi bu aks holda agar ma'nosini beradi va u bitta `if` ishlamasa keyingisi `else if` ishlaydi va shu tariqa siklni davom ettirsak bo'laveradi.


Bugun shu mavzular haqida gaplashdik.@dawroun

> E'tiboringiz uchun rahmat!
Appwrite OSS Fund Sponsors Isar
Published: 2022-11-18 12:13:40

Hi readers 👋, welcoming you back to the "Appwrite OSS Fund" series, where we celebrate open-source maintainers. 🎉

## 🤔 What Is OSS Fund? 
On the 4th of May, the Appwrite team launched the [OSS Fund](https://appwrite.io/oss-fund), an initiative to support open-source project maintainers. Being an open-source company, we wanted to give back to the community and help as many people as we can. 

The OSS Fund is an initiative that is very close to our heart. 
Hear what our Founder and CEO has to say - The Appwrite Story:
{% embed https://appwrite.io/oss-fund-announcement %}

> ### 📢 Announcing The Ninth Project 
> After careful considerations from the committee we are thrilled to announce the ninth project:
> {% embed https://twitter.com/appwrite/status/1585979756910092289?s=20&t=kmHXgjb8nWZtLJyvh2rp2g %}

## 🤔 What Is Isar?
[Isar](https://github.com/isar/isar) is an open-source embedded NoSQL database for Flutter apps. It is very efficient and super easy to use. Isar apps run on all platforms and operating systems with a single codebase.

The goal is to make using multi-threaded queries, indexes, and full-text search as easy as possible.

Isar has detailed docs and a real-time database inspector to help developers build offline-first apps with ease.

## 🤝 Meet The Maintainer

[Simon](https://twitter.com/simonleier) is the maintainer of Isar. He is a 25 year old Flutter developer from Munich who works at ClickUp. He spends most of his free time maintaining open-source projects.

## 💡 How Did The Idea Of Isar Come Up?

When Simon started Hive (the predecessor of Isar) there didn’t exist database packages for Flutter except for SQLite bindings.

Most apps still put little focus on being fully functional with unstable or missing connections. He wanted to help developers to deliver great user experience and performance even if offline and that is how Isar was built.

## 🚘 The Journey So Far

Before building Isar, there was Hive, which is a lightweight and blazing fast key-value database written in pure Dart. At some point, it became clear that Hive could not cover all use cases and was not scalable enough. Simon started from scratch and developed Isar to overcome all the previous limitations and deliver the best developer experience possible.

_Fun fact: He had problems finding a name for this new database so I named it after the river in my home city._

## 🗒️ Ending Notes
As Simon continues to work on Isar, he encourages everybody to contribute to open source and says "even adding a missing comma to docs, goes a long way". 

He also says:

> "I would like to thank Appwrite for their fantastic commitment to open-source software and all users and maintainers of Isar for their trust and support."


If this story resonates with you or your friend, tell them about OSS Fund, as applications are still open:
{% embed https://appwrite.io/oss-fund %}
Let your imagination go wild
Tags: javascript, image, opensource
Published: 2022-11-18 11:42:37

Testing is thinking outside the box
Testing is being creative
Testing is puting imagination in action

Since it is Friday I give you a challenge to put all above skills at work

Have a look and comment results you got

https://www.youtube.com/watch?v=69QDPGvVOuQ&ab_channel=ResterTest

#testing #stablediffusion #criticalthinking #images #restertest
Beginner to Master JS.
Tags: webdev, javascript, beginners, programming
Published: 2022-11-18 11:32:54

## How to learn JavaScript? Learn from here…
There are so many JavaScript resources available out there, it’s hard to understand how much of it overlaps and how much is redundant. Not to mention the process of weeding out bad information. Most JavaScript learning resources neglect two of the most important topics in JavaScript: prototypal inheritance and functional programming.

There are many possible paths, several good paths, but few great paths.

Here is one clear path to JavaScript mastery:

![Learn javascript from here](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcei95pbjqx3kcvpll3m.jpg)

**JS Learning Resources**

Everyone is learning different programming languages and want to be good command at them. As I started learning JS for web development and want to be good at this language. It’s hard and there are so many learning resources all over internet. So, which one would follow and how to be good at that makes me confused. As I learned from different resources from them some of great resources that I would like to share are as follows.

Here it goes.

The internet is awash in information. What you probably need is quality, not quantity. Here are some resources that take you from zero to hero. These are structured ways to learn with practice exercise.

**_Learning Resources_**

1. This is a FREE course that covers all the critical aspects of javascript Eloquentjavascript [click here](https://eloquentjavascript.net/)
2. Coding Experts [click here](https://www.youtube.com/playlist?list=PLAqsB9gf_hQYNbtgfb6Y-5BIaxAjgutlW)
3. JS for Cats [click here](https://jsforcats.com/)
4. JavaScript Basics [click here](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
5. JavaScript Info [click here](https://javascript.info/)
6. Codecademy (https://www.codecademy.com/learn/intr...)

7. Fullstack Academy (https://www.fullstackacademy.com/intr...)

8. Team Tree House (JavaScript Basics Course (How To) | Treehouse (teamtreehouse.com)

9. JD Documentation(https://developer.mozilla.org/en-US/d...)

10. khan Academy (https://www.khanacademy.org/)

_From above I will highly recommend starting with learn-js(https://learn-js.org) Because It has hands-on exercises._


> Starting learning any language by reading and practicing every 
  topic parallelly is the best way to learn to program.
Passkeys: FIDO’s new mission to completely remove passwords
Tags: passkey, cybersecurity, fido, passwordless
Published: 2022-11-18 11:28:50

Passkey is an easy and much more secure way to log in or sign up without any passwords. Passkeys are developed by FIDO Alliance and the World Wide Web Consortium in order to offer users a straightforward and interoperable infrastructure for passwordless authentication.

**Passkeys - Explained!**
Passkeys are cryptographic login credentials that replace the need for passwords by requiring either biometric verifications, like fingerprint scan or facial recognition or a PIN or pattern or plug-in authentications, like smart cards.

**Also, passkeys replace passwords and two-factor authentication in a single step, making the user experience seamless.**

Compared to password-based authentication, passkeys make it more seamless and secure for users to connect to websites and apps. In conventional password-based authentications, a password is created during registration or signup, encrypted, and stored on a server. When logging in, the user enters their password, and the server verifies it by comparing it to a stored password hash.

_However,_ the idea of keeping user credentials on a server no longer exists with passkeys. Passkeys establish a secure and reliable authentication channel by generating cryptographic key pairs (public key and private key) that can connect the user and the respective application. With passkeys, user credentials can be verified using either,

- An in-built authenticator (eg: biometric device)
- An external or roaming authenticator (eg: mobile phones)
- An authenticator that is plugged in (eg: USB or smartcard)

Read more on Passkeys, How it works, Are they secure, Benefit of Passkeys in detail [here](https://mojoauth.com/blog/passkeys-fido-new-mission-to-remove-passwords/).
Avigma Tech LLC
Tags: mobile, ios, avigma, android
Published: 2022-11-18 11:12:24

The industry review of Avigma Tech LLC has been perfect for the past years as most of its business comes from repeat orders by highly satisfied clients. Credibility is the hallmark of the company.

At Avigma technology, we understand the things that keep you formerly occupied. Our team of hard-working specialized workers work 16 by 7.  As one of the best web development company in US, we promise that desire quality would not be affected by any circumstance.

We have a small and competitive team of 30 people. Our dedicated team of experts work closely with the customers for delivering customized products and solutions, which are suitable for the client’s requirements. There are teams of experts to solve any type of problems related to websites/mobile applications in the best possible way.

Our unique blend of American standard programming, combined with our unmatched pricing, dedicated staff, and tenacity to ensure successful solutions, enables us to provide you the most for your programming and development dollars. If you can DREAM it, we can BUILD it. Please contact us today to start making those dreams a reality.

Get your software developed today, Please visit: https://avigma.com/services/mobile-apps-development-company/
Símbolos de APL: "Vezes" e "Divisão"
Tags: apl, programming, programacao, dyalog
Published: 2022-11-18 11:00:00

> AVISO! Essa série de artigos usará exemplos rodados em Dyalog APL, a implementação da Dyalog.

> AVISO 2! Esse artigo contém exemplos de código. Se você quiser rodá-los, copie e cole as linhas **identadas à direita** (as linhas identadas à esquerda são os resultados) nesse site: https://tryapl.org

Nesse artigo vem mais 2 símbolos!

## Vezes (`×`)
A função monádica do `×` é "direção" ("Signum" na [documentação](https://aplwiki.com/wiki/Signum)).
A função "direção" retorna o sinal do argumento

```
      ×3 ¯10 0
1 ¯1 0
      ×3J4
0.6J0.8
```

3 é positivo, -10 é negativo e 0 é zero. Esse passo é o comum.

```
      ×3J4
0.6J0.8
      3J4÷|3J4
0.6J0.8
```
No caso do número complexo a função é um pouco mais complexa. Ela é a divisão do número pela sua magnitude.

```
      2×3
6
```
No entanto há uma diferença de com fazemos multiplicação de matrizes. Quando multiplicamos matrizes, além de a restrição ser apenas que o número de colunas de uma deve ser igual ao número de linhas da outra, cada elemento da matriz resultante é a soma dos produtos dos elementos de cada coluna de uma matriz por cada linha da outra matriz.

A matriz
```
1   2   3
4   5   6
7   8   9
```
multiplicada pela matriz
```
1   2   3
4   5   6
7   8   9
```
resulta na matriz
```
30  36  42
66  81  96
102 126 150
```
No entanto a razão de ser da APL foi uma necessidade de regularização da notação matemática. Por isso a multiplicação de matrizes funciona da mesma maneira que a adição, elemento a elemento.
```
      3 3⍴2
2 2 2
2 2 2
2 2 2
      (3 3⍴2)×3 3⍴2
4 4 4
4 4 4
4 4 4
```


## Divisão (`÷`)
A função monádica do `÷` é "recíproco" ("Reciprocal" na [documentação](https://aplwiki.com/wiki/Reciprocal)).
O retorno dessa função é o inverso do agumento.

```
      ÷1 ¯2 1J2
1 ¯0.5 0.2J¯0.4
      ÷0
DOMAIN ERROR: Divide by zero
      ÷0
      ∧
```
O recíproco de 0 claro que dá um erro de divisão por zero.

A função diática do `÷` é "dividir" ("Divide" na [documentação](https://aplwiki.com/wiki/Divide)). A divisão também funciona da maneira esperada.

```
      2 0 5÷4 0 2
0.5 1 2.5
```
Notem que há mais uma incongruência com a matemática padrão. Em APL, 0÷0 é 1!


## Conclusão
Esse artigo foi menor mas ainda assim cobrimos dois outros operadores aritméticos da APL.
Bom APL!

Até a próxima!
In One Minute : Maven
Tags: maven, java, beginners, oneminute
Published: 2022-11-18 10:30:00

Apache Maven is a build automation tool used primarily for Java projects. Based on the concept of a Project Object Model ([POM](https://maven.apache.org/pom.html)), Maven can manage a project's build, reporting, and documentation from a central piece of information.

## Maven's objectives
Maven’s primary goal is to allow a developer to comprehend the complete state of a development effort in the shortest period of time. Maven adheres to the principle of "convention over configuration" that helps building Maven projects with very little configuration. Systems, libraries, and frameworks should assume reasonable defaults, and systems should "just work" without requiring unnecessary configuration. In order to attain this goal, there are several areas of concern that Maven attempts to deal with:

- Making the build process easy
- Providing a uniform build system
- Providing quality project information
- Providing guidelines for best practices development
- Allowing transparent migration to new features

The configuration of a Maven project is done by creating a file called pom.xml located at the root of the project. This file is referred to as the POM file. Each POM file inherits from a global Super POM that defined common properties for all Maven projects.

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

## More information

- [Maven Releases History](https://maven.apache.org/docs/history.html), with documentation
- [Apache Maven Wikipedia Article](https://en.wikipedia.org/wiki/Apache_Maven)

## Free Maven Books

- [Better Builds with Maven](http://de.scribd.com/doc/238927/Better-Builds-With-Maven)
- [Sonatype eBooks](https://www.sonatype.com/ebooks)