teleren/devto huggingface dataset:
How To Build A Nuxt 3 Ionic Capacitor Starter App
Tags: nuxt, vue, capacitor, ionic
Published: 2022-05-09 18:49:00



**Nuxt** - The Hybrid Vue Framework - https://v3.nuxtjs.org/
**Capacitor** - Drop Capacitor into any existing web project, framework or library. Convert an existing React, Svelte, Vue (or your preferred Web Framework) project to native mobile. - https://capacitorjs.com/

---

{% youtube tDYPZvjVTcc %}

---

This is a walkthrough of how to get started with building a mobile application with nuxt3 and Ionic Capacitor. In this video, we create the basic project and then using the Ionic VS Code Extension, add IOS and Android libraries so we can deploy the application on mobile devices.

###Install Nuxt3

Pretty straight forward, we will just follow the guide listed below
- [Nuxt 3 - Quick Start (nuxtjs.org)](https://v3.nuxtjs.org/getting-started/quick-start)
```
npx nuxi init nuxt-app
cd nuxt app
npm install
```

###Run with Ionic Capacitor
To get the app to run with ionic capacitor we need to make a change in the nuxt configuration

- change config to set `ssr` to `false` in `nuxt.config.ts`

```tsx
import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr : false,
  css: [
    // add required css:
  ]
})
```

- We are going to use the [Visual Studio Code Ionic Extension](https://marketplace.visualstudio.com/items?itemName=ionic.ionic) for installing Capacitor and running the app on a device.
Capacitor works by wrapping the web site in a container and providing access through APIs and plugins to native device functionality.

- use extension to Add Capacitor

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4sqtwrbuxxu81rkla0ag.png)
>Click Add Capacitor Integration

Nuxt outputs in build to the directory `.output` so we need to make the following change:
- change webDir directory in the `capacitor.config.json`

```tsx
"webDir": ".output/public",
```

- change scripts in `package.json`

```tsx
"ionic:build": "npm run build", // capacitor extension adds this form you
"ionic:serve": "npm run start"
```

###Running On Device
To run on device you can also using the Ionic Extension. Just select the platform you want to use by clicking "Add IOS Project" or "Add Android Project" under "Recommendations"

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

After adding the specific Project, you can Run by choosing an option in the extension


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

- Issue Running On Device
    - I had a problem getting everything to run initially due to an error I was getting from the ionic extension. It did not like that the `package.json` file was missing `name` and `version` properties. After I added them to the package.json then the extension could run the build scripts and deploy to the device

###Source Code
{% github aaronksaunders/ionic-capacitor-nuxt-video-app %}

www.clearlyinnovative.com
Temporal Dead Zone (TDZ)
Tags: javascript, beginners, programming, webdev
Published: 2022-05-09 18:20:32

![hello](https://i.pinimg.com/originals/57/5a/20/575a20918d349a354cc636a0d49b35a0.gif)

Let's understand TDZ and why does it exist. 

**Temporal Dead Zone (TDZ)** is an area of a block where a variable cannot be accessed until it is initialized. Let's see a simple example to understand better.

Example 1

```
console.log("Welcome ",name)

let name = "Vidhi"
```
In the code written above, the area above the variable `name` is initialized is *temporal dead zone*. Notice a console log there. Well if we try to run this code, it will throw a reference error. 
![TDZ error example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xabvmqubtozozktaf17n.png)

This happened because in the console.log statement we tried to access a value which was not yet initialized. Let's see one more example.

Example 2
```
console.log("Welcome ",name)

var name = "Vidhi"
```
This example has a small change when compared to example 1. Here the variable is declared with var. Now what it does is, when we run this code, there will be no error but the value of `name` will be undefined. 

This happens because when a `var` variable is hoisted, it is automatically initialized as undefined. This does not happen with `let` and `const` and therefore the error occurs.
Empleos en Data y Analytics LATAM — Mayo 2022 - II
Published: 2022-05-09 18:17:55

Te compartimos las ofertas laborales del mes para áreas de Data, Analytics y Cloud 👨‍💻👩‍💻.

✅[Data Analyst- Rappi (Perú, Lima)]
(https://pe.indeed.com/viewjob?jk=d8206d922569f716&tk=1g2kpaku8pttr800&from=serp&vjs=3)
✅[Data Engineer- 10Pearls (Colombia, Bogotá)]
(https://co.indeed.com/viewjob?jk=a2265c1fa7f899bd&tk=1g2kpd5dhpuv2801&from=serp&vjs=3)
✅[Data Scientist - Banco Pichincha (Ecuador, Quito)]
(https://ec.indeed.com/viewjob?jk=6820b27eb9fa44bf&tk=1g2kph81pj469800&from=serp&vjs=3)
✅[Machine Learning Analyst - BairesDev SA (Chile, Santiago de Chile)]
(https://cl.indeed.com/viewjob?jk=14b6e1caa54d1a1b&tk=1g2kpil1k3c64002&from=serp&vjs=3)
✅[Data Analyst - Citi (Mexico, Ciudad de México)]
(https://mx.indeed.com/viewjob?jk=c15bea70eb27a9e2&tk=1g2kpmtlft5dk800&from=serp&vjs=3)
✅[Data Engineer- HomeLight (Bolivia, Santa Cruz)]
(https://www.linkedin.com/jobs/view/3025822872/?eBP=NotAvailableFromMidTier&refId=vfZHz2RzahIyXH9wL1OApQ%3D%3D&trackingId=%2BzmhsiVb7f%2BQ8Vr7kA1XvA%3D%3D)
✅[Data Scientist - Wurzel Group Spain (Argentina, Buenos Aires)]
(https://ar.indeed.com/ver-empleo?cmp=Rhinok&t=Data+scientist&jk=ca4a471f54b820b8&q=Data+Scientist&vjs=3)
✅[Machine Learning - BairesDev (Venezuela, Caracas)]
(https://ve.indeed.com/viewjob?jk=e627e2de4d48e515&tk=1g2l0hscj36ii000&from=serp&vjs=3)


Aprende, aplica y crece en proyectos de Data y Analytics en Cloud.

Visita nuestra página:
👉🌐 datapath.ai
KeyStone in OpenStack
Tags: cloud, devops, openstack, opensource
Published: 2022-05-09 18:04:22

1- Keystone :

Keystone is the identity service in openstack , verifies the user’s identity and provides information about which resources the user has access to.The Keystone project provides authentication, authorization , Provides authentication for other services as we found in last article like authentication for : Nova-Compute , Swift Object Storage , Neutron Networking , Glance Image , Cinder Block Storage and Horizon Dashboard .


2- Keystone Identity Flow :

Requests to the Identity service are made via an API call , Keystone Provides service catalog “Service API URL” which means any service will be added on openstack should be registered on keystone . Keystone saves info of roles , groups , users and these info could be from external identity like LDAP .Keystone also includes WSGI middelware to provide authentication support for Nova and Swift. Keystone has DB .

Flow :

A- User send credentials to the keystone .
B- User gets token from Keystone .
C- User send request + token to openstack services .
D- Keystone check the tokens with openstack services .
E- User recieves response from openstack service .
3- Keystone Architecture Concepts :


A- Services : Keystone is organized as a group of internal services exposed on one or many endpoints .


B- Identity : The Identity service provides auth credential validation and data about users and groups .


C- Users : represent an individual API consumer. A user itself must be owned by a specific domain .


D- Groups : are a container representing a collection of users .


E- Projects : represent the base unit of ownership in OpenStack, in that all resources in OpenStack should be owned by a specific project. A project itself must be owned by a specific domain


F- Domains : are a high-level container for projects, users and groups. Each is owned by exactly one domain. Each domain defines a namespace where an API-visible name attribute exists. Keystone provides a default domain .


G- Roles : dictate the level of authorization the end user can obtain. Roles can be granted at either the domain or project level .


H- Token : Token service validates and manages tokens used for authenticating requests once a user’s credentials have already been verified.


J- Catalog : provides an endpoint registry used for endpoint discovery.

4- Keystone Role in Vm Creation :


A- The identity service (Keystone) authenticate the user with the user credentials and then generates and send back an auth-token, that auth-token which will be used for sending the request to other components through REST-Call .


B- Keystone verifies the user has the correct permissions for the request based on its own policies


C- Keystone replies with the temporary token and the list of tenants the user has access to .


D- Glance-api validates the auth-token with keystone and after that nova-compute gets the image metadata .


E- cinder-api validates the auth-token with keystone and then nova-compute gets the block storage information .
Marvel Universe App - Built in Flutter + Appwrite
Tags: appwritehack, flutter
Published: 2022-05-09 17:48:52

[Instructions]: # (To submit to the Appwrite Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
Marvel Universe - is a mobile application, built with Flutter and AppWrite to exhibit the marvel cinematic universe, comics, characters and stories.

I have used the Appwrite Account API and Appwrite Database. I would like to continue work on this app and complete this with using all features of Appwrite. (Appwrite Storage & OAuth2 Providers).

Fork Project From: https://github.com/khuntsr/marvel-comics-flutter
 

### Submission Category: 
Mobile Moguls


### Link to Code
{% github khuntsr/marvel-comics-flutter  %}


### Additional Resources / Info

In this app development environment is used, I have not created any production environment. I have attached the scrrenshot of used database colletions, if you want to run the source code.

This version of app contains below features,

- New User Registration (Appwrite Account API)
- User Login (Appwrite Account API)
- Marvel Universe Screen (Appwrite Database)
- Change Password (Appwrite Account API)
- Marvel Universe Moview Details
- Drawer Menu
- Logout

I will continue work on this app and will deliver below features,

- Marvel Comics Screen (Appwrite Database & Marvel API)
- Marvel Stories Screen (Appwrite Database & Marvel API)
- Marvel Characters Screen (Appwrite Database & Marvel API)
- Profile Details (Appwrite Account API) & Pic Update (AppWrite Storage)
- External Loging (OAuth2 Providers will be used)

#### Glims of the App.


> Dashboard screen

![Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0zhyslb1x4grd5x3c34.png)

> Dashboard screen with playing video in YouTube player

![Dashboard with Playing Video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/na6vw2rng9z1f25899do.png)

> User login screen

![User Login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/961ed2j71ocspk4yy1b4.png)

> Awesome animated drawer menu

![Drawer Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctq7tbmmmtxjgelqt2qk.png)

> Dashboard screen II

![Dashboard 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4at0ya9dxrnpzu7nrd2.png)

> User registration screen

![User Registration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjuz227ppder2l7z4q36.png)

> Change password screen

![Change password](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ml27c92fljveogjnjpp.png)

> Marvel cinemetic details screen

![Marvel cinemetic details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vacm4fwxppotfskevl5x.png)

> Database collection arrtibute screen (it is used in dashboard screen)

![Database collection arrtibute screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sswv986l50m9b2y8x9u7.png)

It is my first Hackathon, and I had a lots of fun with it.

Appricite your time to reading this article.

Thank You! Happy Coding :)
When Instagram becomes TikTok
Tags: socialmedia, content, tiktok
Published: 2022-05-09 17:46:28

Did you notice the recent changes to the Instagram Feed? Although subtle, they're loudly warning where social platforms are heading. A world of social-first content creation and consumption that keeps people on the platform.

If you want to geek out with me on what these changes mean and why they matter here are 4 points:

📱 FULL SCREEN: Social media consumption happens largely on mobile, with the years platforms have expanded the aspect ratios. TikTok went full screen and now Instagram has followed. This was true on IG Reels, but now it's true to the feed as well.

💡 WHY THIS MATTERS: Content creation will have to be made for mobile or your content will appear so small compared to your competitors, brand awareness and relevance will suffer.

🔉 SOUND & ENGAGEMENT BUTTONS FRONT AND CENTER: TikTok started it, that sound button you can so easily click, discover new artists, but more importantly... remix and create your own content. This same functionality is there on your feed now.

💡 WHY THIS MATTERS: Having this sound button readily available is pushing not only toward native consumption but also native creation! This is the button that gave the great Khaby the ability to remix content and curate a 137M following. The platforms want us to create and consume social-first content on their platform. This means traditional ways of content creation will be pushed out.

💰 PAID ADS: Paid ads on TikTok and now Instagram as well are blending seamlessly into the rest of the organic content. I don't know about you but sometimes, especially on TikTok, it takes me a few seconds to realize it's an ad.

💡 WHY THIS MATTERS: If you're ads ain't blending into the native platform you are spending money on... you're at a loss. This will require innovation. This will require entire teams stepping out of their comfort zone to adapt to this new world.

🥊 THE HOOK: Straight to the point. This new way of consuming content is forcing content creators to get straight to the point. You have to immediately deliver: education, inspiration, entertainment or value, if not you lost your audience.

💡 WHY THIS MATTERS: Whether you’re teaching grammar or programming the winners in these platforms are those who are able to educate and entertain in snackable sized content.

✨ CONCLUSION: This is a blatant example of where Social Media Platforms are heading: video, social-first video content that keeps you watching, engaging and creating in the platform. 

TikTok came to disrupt the way content is created and consumed, all the other platforms are catching on and implementing these changes. These subtle changes are hugely important, we need to notice them and prepare for them because the algorithms are changing whether we want to or to not. 

PLEASE SHARE YOUR THOUGHTS WITH ME AND LET'S CONTINUE TO GEEK OUT ON THE FUTURE OF SOCIALS.
Quais tópicos você sente falta em português?
Published: 2022-05-09 17:42:28

Tenho feito alguns tutoriais de Magento 2 (PHP) por três motivos:

1. porque os conteúdos que consulto estão espalhados/incompletos, então meio que quis criar minha própria doc;
2. porque não têm muitos conteúdos em português, então quis deixar disponível essa doc para ajudar possíveis desenvolvedores de Magento 2 BRs que não possuam dificuldade com inglês;
3. pra eu devolver um pouco de conhecimento pra comunidade, já que consulto inúmeras coisas diariamente.

E ultimamente tenho terminado de construir essa doc de Magento 2, então estava refletindo sobre o que mais poderia devolver pra comunidade. 
Criar esse tópico de discussão aqui não seria novas ideias pra mim, mas pra fomentar o debate dos falantes e poruguês que tem por aqui.
A Visualizer for PyTorch Image Transformations
Tags: machinelearning, datascience, ai, computervision
Published: 2022-05-09 17:40:53

### Tldr
Check out the app [here](https://pytorch-transforms-builder.chriszhu.me/).

Image augmentation is a common technique used when training computer vision models in order to generate artificial training data by transforming in your actual training data, for example, random rotations and shifts.

<center>![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgqqmfm2pn3ky940z3jt.png)_We created 4 new images of cats!_</center>

However these augmentations can often be a source of subtle bugs. For example here is an typical PyTorch transform pipeline:
```
from torchvision import transforms

transform = transforms.Compose([
	transforms.RandomAffine(degrees=360, translate=(0.64, 0.98), scale=(0.81, 2.85), shear=(0.1, 0.5), fill=0, interpolation=InterpolationMode.NEAREST),
	transforms.ColorJitter(brightness=0.62, contrast=0.3, saturation=0.44, hue=0.24),
	transforms.RandomVerticalFlip(p=0.45)
])
```

Do you see anything obviously wrong with it?

Well, let’s see what happens when we actually try to apply these transformations to our cat.

<center>![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mok2q04d75d1mkgmz7dy.png)_Half of these don’t even look like cats!_</center>

As you can see the transformations were not properly tuned and resulted in a significant number of images being completely unrecognizable. If we train the model on this augmented dataset, it’s no longer learning what a cat looks like.

These sorts of bugs are tricky because no errors will be raised. Instead the result would be that the model will not perform as well on the un-augmented test dataset as it could have.

## Introducing a PyTorch transforms visualizer
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tprgrfk7r9hilmuq506a.png)

You can use this tool to develop and sanity check your transforms on actual images before using them in a training script. It supports all the transforms provided in the [`torchvision.transforms`](https://pytorch.org/vision/0.8/transforms.html) package.

Check it out [here](https://pytorch-transforms-builder.chriszhu.me/)!
FULL LIST- React & React Native: The champions of meetups in April 2022
Tags: react, reactnative, programming, tutorial
Published: 2022-05-09 17:39:54

There was a lot going on in April in terms of meetups all over the world. Let’s see what the [top 8 meetup videos were this month](https://blog.meetupfeed.io/react-react-native-april-2022/). You can find out more about accessibility, how to learn React Native as a junior, AR apps, using SVG, libraries, debugging and much more! Check this list and broaden your horizon today.

[React Native Accessibility Basics | Nivedita Singh](https://meetupfeed.io/talk/react-native-accessibility-basics-by-nivedita-singh-react-react-native-meetup)
Nivedita shares what she has learned about accessibility and its implication in the past few months. This talk will be about the basics of accessibility. Why should we even care about accessibility? Some guidelines that were set up to ensure that this is implemented well. Also, how Android and iOS natively allow developers to make accessible apps. And then, join a deep discussion on allied tools.


[Learning React Native as a Junior Engineer | Erin Fox](https://meetupfeed.io/talk/chain-react-2018-learning-react-native-as-a-junior-engineer-by-erin-fox)
Learn how you can master React Native as a beginner. What exactly is it? How does it work for iOS AND Android? Not only can you make universal components and save hundreds of lines of code, it allows developers to reuse code across the web and mobile all with a smooth UI.


[Strategies For Using React Native In A Brownfield App | Harry Tormey](https://meetupfeed.io/talk/chain-react-2018-strategies-for-using-react-native-in-a-brownfield-app-by-harry-tormey)
What is hot reloading? It is the ability to push over the air updates to published apps and the promise of having your app “just work” out of the box on Android as well as iOS. This makes React Native a tempting proposition for frontend developers. But what do you do when you have to integrate React Native into a large existing native code base? This talk is from the perspective of an experienced native iOS developer who has worked with React Native to ship several cross-platform Greenfield and brownfield apps.


[Building AR Apps with React Native | Vladimir Novick](https://meetupfeed.io/talk/chain-react-2018-building-ar-apps-with-react-native-by-vladimir-novick)
With the release of ARKit and ARCore by Apple and Google we see various Augmented reality apps created for iOS and Android. Have you ever wondered how you can create such apps in React Native? In this talk we will see how it can be done fairly easily.


Craving for more? Check the full list [here](https://blog.meetupfeed.io/react-react-native-april-2022/).
Services in Angular12
Tags: javascript, angular, webdev, react
Published: 2022-05-09 17:36:45

**Angular services are singleton object that gets instantiated only once in a lifetime of an application.**

_Consider our application having following components_

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

Let's say we want to log some data in AboutComponent and UserDetailComponent.

Both logs are same, so basically we are duplicating code in two different components. 

Suppose in User component we also want to access some data, and we don't know if we will use it in other part of application.

**So use cases for services are**

- To avoid duplication of code

- Data Storage

- Communication between components

**A service is just another class which acts as a central repository, as a central buisness unit where you can centralize your code.**

Here in this case we can make logService to centralize it .

## How to create a service

- simply run the command in your terminal

 ![Image description](https://dev-to- uploads.s3.amazonaws.com/uploads/articles/iw8829lhl6jubey72w3c.png)
 
**here g means generate ,s means service **

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

here you see we have made one class with service name

As I have mentioned in my earlier blogs

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

This means your service can be accessed from anywhere throughout the application .

## How to access the service in your component

- First you will declare a property stateService of type MyStateService(i.e your service class)

-Make sure to import the service at the top

- Now you can directly call your method present in service through property like this 

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

**If you don't use "@Injectable({providedIn:'root'})" in your service . In that case you have to provide a service in providers array of component in which you're trying to inject a service.**

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

Like this you will have to do it,
It is not recommended , however you can use it acc to your requirement.

## Hierarchical Injector 

_Angular dependency injector is actually a hierarchical Injector._

**It means if you provide a service in one component then angular framework knows how to create service instance for this component and all of it's child component.
**
**All component will receive same instance of service because it is singleton.**

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


_It is top to bottom approach._

**Thanks for reading,hope it is helpful** 
**Please like share and follow for more such content**