teleren/devto huggingface dataset:
Use Custom Fonts In ReactNative App
Tags: reactnative, javascript, react
Published: 2022-07-07 03:18:01

## Let's use custom fonts in you `react-native` app

---

### Create a `react native` app with typescript or javascript

```sh
npx react-native init [ProjectName] --template react-native-template-typescript
```

### Create a fonts folder & copy your fonts into this folder

```sh
mkdir fonts
```

### Create `react-native.config.js` file in the root of your project

```
touch react-native.config.js
```

### Add following code in `react-native.config.js` file

```js
module.exports = {
  assets: ['./fonts/'],
};
```

### Run following command to link fonts to your project

```sh
npx react-native-asset
```

### Now open `App.tsx` file and use your custom font family

```tsx
import {SafeAreaView, StyleSheet, Text} from 'react-native';
import React from 'react';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.Italic}>Italic</Text>
      <Text style={styles.Bold}>Bold</Text>
      <Text style={styles.Regular}>Regular</Text>
      <Text style={styles.Light}>Light</Text>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {padding: 10},  
  Bold: {fontSize: 30, fontFamily: 'Nunito-Bold'},
  Light: {fontSize: 30, fontFamily: 'Nunito-Light'},
  Regular: {fontSize: 30, fontFamily: 'Nunito-Regular'},
  Italic: {fontSize: 30, fontFamily: 'Nunito-Italic'},
});
```

---

### [Get Full Source Code In GitHub](https://github.com/AshirbadGudu/react-native-custom-fonts)
Is Java still a good option for enterprise?
Tags: clojure, java, kotlin, startup
Published: 2022-07-07 03:05:00

The JVM ecosystem has been incredible for many years. Pretty amazing languages such as Scala, Kotlin, and Clojure, libraries, IDEs, and excellent books. Java 19 with the Loom Project supports a high-throughput, lightweight concurrency model. 

I believe Java is in the right direction to become a better language. Today I used some of the new features, although it is not as expressive as the other JVM languages. I enjoyed working with this version.

Records, Pattern Matching, Sealed classes, switch as expressions, type inference, and many more. I hope shortly the companies start looking at Java as a good option for startups.

#100DaysOfCode #Java
- [Java 8 Example](https://dev.to/jorgetovar621/from-java-8-to-kotlin-clojure-and-java-17-5gjb)
- [Kotlin Example](https://dev.to/jorgetovar621/java-8-to-kotlin-clojure-and-java-17-2-45d5)

## Implementing Java 17 example. BookParser

The next step: Clojure

https://github.com/jorgetovar/from-java-8-to-java-17-kotlin-clojure/pull/3/files
AWS MFA services
Tags: aws, cloud, devops, todayilearned
Published: 2022-07-07 02:56:55

 `What is the standard login procedure for any web-based application?`

Indeed, we will use a login username and password to respond to this particular question. Anyone can assume your identification, and if it is cracked, which is a major nuisance caused!

` What can you change about this?`

The word "factors" is used. To be more in the context, factors are pieces of information that reveal your identity. Nowadays, various types of criteria are used to login into any web-based application.
Four main types of variables were most frequently used to enter into any web-based applications.
- Knowledge - Information you possess! Username and password, as an illustration.
- Possession -  Something you own! For instance, a bank card or MFA tool/app.
-  Inherent - A quality you own! For example, your own voice, face, and fingerprint for recognition.
-  Location: A geographical area, cooperative network, home WiFi network.


>  Overall, additional factors increase strength and make frauds more complicated.



`Since we learned about factor authentication,lets learn how we use on AWS MFA services ?`

 Once we have an [AWS account](https://portal.aws.amazon.com/billing/signup?nc2=h_ct&src=header_signup&redirect_url=https%3A%2F%2Faws.amazon.com%2Fregistration-confirmation#/start/email), we can log-in to the application with the login username and password. One-factor authentication is being used here at the moment. A malicious actor may take your identity! It could be because of an error on the user side or malware on the machine.

Now how to tackle this ? 
 - Using MFA 
We utilize the MFA cloud service to get around this. It could be a physical MFA device(generate ever-changing codes) or a virtual application(Google authenticator), which is integrated with the MFA service.

`How to configure MFA using AWS?`

You must turn on the MFA service for that specific-user to set up that unique identity within AWS. Users of Roots, for illustration. Secret keys and other related information are generated by the AWS service. This data must be typed into a virtual application like Google Authenticator, or Microsoft authenticator.

The specific QR code is produced using the secret key and additional data in a graphic format, and is then scanned! Using the authenticator program, scans are performed. The authenticator application will begin generating a code when needed once the scanning is complete.
```
Different virtual devices are used for different accounts/services.

```
Now, in addition to your username and password, you must now input the MFA code in order to access your AWS account. User should use the current code mentioned in the application for that particular user/account.

Thankyou [adriancantrill](https://twitter.com/adriancantrill)
Nunca te pierdas una notificación de Pull request en github
Tags: codereview, español, pullrequest, github
Published: 2022-07-07 02:10:47

Muchas veces la cantidad de notificaciones de github suele ser un dolor de cabeza para enterarse de los pull request que otro miembro del equipo está esperando. Esta guía busca tener un camino para lograr la revisión de código en menor tiempo.

### Configura tu correo del trabajo en github
Lo primero es separar las notificaciones de proyectos personales con las notificaciones de proyectos del trabajo antes que sea un caos.

Vaya a [Configuración de correo electrónico en GitHub](https://github.com/settings/emails) y agregue su correo electrónico de trabajo. Después de verificarlo, lo tendrá listo para usarlo.

Ahora iremos a la [configuración de notificaciones en GitHub](https://github.com/settings/notifications), e iremos a la parte final en la sección _Custom routing_ donde podremos cambiar el correo donde llegarán las notificaciones de cada organización.


### Configurar gmail
Crear un filtro para los correos que vengan de _notifications@github.com_ que contengan las palabras _requested your review_ como aparece a continuación. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5ppjy22e139h3q2bc5k.png)

Creado el filtro, seleccionamos aplicar etiqueta, creamos la etiqueta _github-pull-request_ y marcamos la categoría como notificaciones.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdg92k9sycvqqfcjaw2g.png)
   
### Configurar extensión de Gmail para chrome 
Añadimos [Gmail notifier](https://chrome.google.com/webstore/detail/notifier-for-gmail/dcjichoefijpinlfnjghokpkojhlhkgl), en la sección **Timings** es recomendable poner 15 minutos de recordatorio.

La sección importante es **Gmail** donde pondremos la etiqueta que creamos. En mi caso la cuenta principal es donde llegarán las notificaciones.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dkaijpvt7zye9ph62hs.png)
 


### Configurar notificaciones de cada proyecto en Github (opcional)
Adicionalmente puedes configurar que repositorios están observados a [notificaciones en github](https://github.com/watching)
What You Should Know About Logging with Micro-Frontends In 2022
Tags: webdev, javascript, tutorial, microservices
Published: 2022-07-07 02:02:56

There is a new trend in building enterprise scale applications that is extending the concept of micro-services all the way through to the frontend of applications. We call this concept Micro-Frontends. 

However, when we divide our applications into multiple, smaller applications, challenges arise in regards to how we control our logging in both the development environment and in production.

First, we'll take a look at a basic micro-frontend architected application and then dive into some logging concepts that are applied in standard back-end environments. After that we will take a look at how we can use the Adze logging library to solve this problem for the frontend.

To read the rest, go here: https://andrewstacy.com/blog/logging-with-micro-frontends/
Ergonomic error handling in Go using generics
Published: 2022-07-07 01:58:35

Now that Go has generics, I discovered that you can implement ergonomic exception-like error handling as a library. Here's my take on the idea:

https://github.com/chrismwendt/go-exceptions

Typical error-handling in Go looks like this:

```go
func f() error {
  err := g1()
  if err != nil {
    return err
  }

  v1, err := g2()
  if err != nil {
    return err
  }

  // ...
}
```

There are a few downsides to handling errors like this:

- `if err != nil { return err }` takes 3 extra lines
- You need to explicitly store the errors in variables and conditionally return them every time you call a function that returns an error
- Error handling ends up cluttering the code and making it harder to focus on the domain logic
- You can't do `f(g())` if `g()` returns a value and an error and `f()` expects only a value, which forces you to split up the code, add temporary variables, add an `if`, and manually handle the error

How can we make this more ergonomic? Perhaps ideally, Go would add support for [Rust's `?` operator](https://stackoverflow.com/a/42921174/2061958), but we can get pretty close using [`panic()`](https://gobyexample.com/panic) and [`recover()`](https://gobyexample.com/recover) to have errors bubble up without needing to explicitly store them in variables.

Here's what usage of go-exceptions looks like:

```go
import ex "github.com/chrismwendt/go-exceptions"

func f() (err error) {
  // Catch() calls recover() and assigns the error to &err
  defer ex.Catch(&err)

  // Throw() calls panic() if the error argument is not nil
  ex.Throw(g1())

  // Throw() also accepts a label
  ex.Throw(g2(), "g2")

  // Throw1() returns 1 value, Throw2() returns 2 values, etc.
  v1 := ex.Throw1(g3())

  // Passing arguments is easier
  v2 := ex.Throw1(g4(ex.Throw(g5())))

  // ...
}
```

This is more ergonomic in a few ways:

- It eliminates a bunch of temporary `err` variables
- You can more easily pass the result of one function into another
- The code is more compact
- Once you learn about the library, IMO the code is more readable

Internally:

- `Throw(err)` is basically: `if err != nil { panic(err) }`.
- `Catch(*error)` recovers from any panic and stores the recovered value in the given error

You could go a bit further and adopt a convention of panicking rather than returning errors, but that begins to depart from typical Go calling conventions and could cause friction when calling or being called by other code.
Parse a JSON into struct
Tags: go, beginners, opensource, programming
Published: 2022-07-07 01:16:19

This short snippet shows you how to parse a JSON with a generic, random structure, stored in a file.

```golang
package main

import (
	"encoding/json"
	"fmt"
	"io/ioutil"
	"os"
)

func main() {

	path := "./obj.json"

	jsonFile, err := os.Open(path)
	if err != nil {
		fmt.Println(err)
	}
	defer jsonFile.Close()
	bytes, _ := ioutil.ReadAll(jsonFile)

	var parsed map[string]interface{}
	json.Unmarshal([]byte(bytes), &parsed)
	fmt.Printf("%#v", parsed)

}
```

To test the code, you can use a json file like this:

`obj.json`

```json
{
  "prop": "value",
  "students": [
    {
      "name": "John",
      "age": "20",
      "marks": "80",
      "address": {
        "city": "New York",
        "state": "NY"
      }
    },
    {
      "name": "Jane",
      "age": "20",
      "marks": "90",
      "address": {
        "city": "New York",
        "state": "NY"
      }
    }
  ]
}
```

The output for this example would be like this:


> map[string]interface {}{"prop":"value", "students":[]interface {}{map[string]interface {}{"address":map[string]interface {}{"city":"New York", "state":"NY"}, "age":"20", "marks":"80", "name":"John"}, map[string]interface {}{"address":map[string]interface {}{"city":"New York", "state":"NY"}, "age":"20", "marks":"90", "name":"Jane"}}}%

map[string]interface {}{"prop":"value", "students":[]interface {}{map[string]interface {}{"address":map[string]interface {}{"city":"New York", "state":"NY"}, "age":"20", "marks":"80", "name":"John"}, map[string]interface {}{"address":map[string]interface {}{"city":"New York", "state":"NY"}, "age":"20", "marks":"90", "name":"Jane"}}}%

**Note**: if your JSON object has a format you know beforehand, you can use a struct instead of `map[string]interface{}`

---

I'm the maintainer of DoTenX, and invite you to take a look at this repository, if you enjoy coding with Golang or learning it:

https://github.com/dotenx/dotenx
Generate tests for your React components with jest-test-gen
Tags: javascript, testing, jest, react
Published: 2022-07-07 00:19:55

Hey 👋

I’ve released v1.0.0 of the test scaffolding generator tool `jest-test-gen`, introducing support for React components 🎉

You can now pass a path to a source file that exports one or more React components and it will automatically detect them and generate an initial jest test file containing snapshot tests for each exported component.

The generated code uses react-test-renderer to get a serializable tree of components that is then used by jest for snapshot testing.


![generated component snapshot test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wy1hx6tc6ulengtrv1p.jpeg)

When propTypes are available, the component’s props will be passed to the component for testing, as a placeholder for the value of the props, a comment containing the type of the expected prop is inserted. This makes it easy to provide suitable prop values for testing purposes and makes sure that all component props are being tested.

jest-test-gen will recognize both class-based and functional components.

To give it a try, you can install the CLI tool via npm:
```
npm install -g jest-test-gen
```
and run it to get a generated test file:

jest-test-gen ~/demoproject/src/components/myReactComponent.js

Please ⭐️ the repo [jest-test-gen on Github](https://github.com/egm0121/jest-test-gen) if you find it useful.
How to create plugin in nuxt3
Tags: nuxt3, nuxt3plugin, nuxt
Published: 2022-08-15 12:09:39

---
title: How to create plugin in nuxt3
published: true
date: 2022-07-07 00:00:00 UTC
tags: ['nuxt3','nuxt3plugin','nuxtjs']
canonical_url: https://www.codef.site//blog/nuxtjs/how-to-create-plugin-in-nuxt3
---
!["nuxt3 plugin example"](https://www.codef.site/img/nuxtjs/nuxt_plugin.jpg)
In this tutorial, we will learn how to create a plugin in nuxt3. we will use some [app hooks](https://v3.nuxtjs.org/api/advanced/hooks#app-hooks-runtime) to create a plugin. With the help of these hooks, we will create a plugin that will show a progress bar on the top of the page.

## Prerequisites

We will use [NProgress](https://ricostacruz.com/nprogress/) package to show the bar at the top of page while the page is loading. So lets install it. And make sure to import its css or add a link to its css file.

```bash
npm install --save nprogress
```

```html
<link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
```
## Create a plugin

Now create a folder called <code-inline>/plugins</code-inline> in the root of your project. And create a file called <code-inline>page-progress.js</code-inline> in this folder. You can name the whatever you want. Nuxt provides a helper function to create a plugin called <code-inline>defineNuxtPlugin</code-inline>.

```js
export default defineNuxtPlugin((nuxtApp) => {
    ...
})
```

Inside this function, we will use the <code-inline>nuxtApp</code-inline> object to access hooks and show/hide the progress bar. We need two hooks i.e. <code-inline>page:start</code-inline> and <code-inline>page:finish</code-inline>.

1. <code-inline>page:start</code-inline> - This hook will be called when the page starts loading.
2. <code-inline>page:finish</code-inline> - This hook will be called when the page finishes loading.

First we import <code-inline>NProgress</code-inline> package and then call the <code-inline>NProgress.start()</code-inline> method in page:start hook to start showing the progress bar. And in page:finish hook, we will call the <code-inline>NProgress.done()</code-inline> method to hide the progress bar.

```js
import NProgress from "nprogress";

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.hooks.hook("page:start", () => {
        NProgress.start();
    });
    nuxtApp.hooks.hook("page:finish", () => {
        NProgress.done();
    });
});
```

By default NProgress will show spinner at the top-right of the page and to disable it we need pass showSpinner to false.

```js
export default ...
NProgress.configure({ showSpinner: false })
nuxtApp.hooks....
```

We don't need to register our plugin in the <code-inline>plugins</code-inline> array in the nuxt config because nuxt will automatically register the plugin.
CATalog App: First Steps
Tags: flutter, dart, beginners, programming
Published: 2022-07-06 23:50:03

## The Idea

For my first public flutter app, I decided to do something meaningful. Something that could actually change the world. I decided to make a catalog.

But this wasn't going to be just any catalog. No, this was to be the CATalog. A directory for all cats, listing their images, names, and stats. But to do this, I need to work on my Flutter skills.

## The Process
### UI Diagram
In order to turn my idea into a reality, I first came up with a diagram of how the homepage and navigation would occur. I decided upon the following structure:

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

_... yea I'm a bit of an artist what can I say ..._  

### Initial Roadblocks
At first, I wanted to pull the cat images from [Purina's Cat Breeds Site](https://www.purina.com/cats/cat-breeds); however, I only knew how to use the [http request and response library](https://docs.flutter.dev/cookbook/networking/fetch-data) for JSON data directly. The data on their site was formatted with html, giving me this weird error when I tried to implement the list builder:

![SpinsOfDeath](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7upmz2vdm72xeo0vxrd2.gif)


### Composing the List

So instead I began by downloading pics of my favorite cats and saving them in an asset folder that I added to my pubspec.yaml file. Only the studs got selected, but eventually I want to include all breeds.

![Maine Cat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjj98ozz2acav0n0ck6h.jpg)

_one of the studs selected_

I then created the ListView builder with tiles composed of these images and their respective names. I also added a button for more info which would implement a Navigator.push method in its onPressed attribute when I finish the CatInfo class.

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

As you can probably tell, the pictures were pretty wanky. But this was an easy fix. I simply added a fit attribute to the image giving it the BoxFit.fill tribute. This, along with an added favorite IconButton, concluded my changes to the UI for the day. This is what it is looking like so far!

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

## Next Steps
All in all, today was a pretty fun day. I created the initial catalog with some cool lookin' cats. But there is much work to be done. Next time, I will implement the Cat Info Page.

### Creating the Cat Info Page Class
The next stage of this project is to implement my Cat Info Page class, which contains an in depth view of a specific cat from the catalog, listing their stats/special abilities.

In order to do this, I need to create a Stateless class which takes a cat name and returns its formatted jpg image and randomized stats. I will finish this in my next post

Thank you for reading. Feel free to comment with tips/suggestions and follow if you want to join me on this flutter journey!

Github Repo: https://github.com/TannerHornsby7/CATalog
Day 88: a day of discovery
Published: 2022-07-06 23:33:48

Hi!
so today was actually a day of discovery I discovered some interesting stuff about React and tailwind. I didn't know that the React useState() function doesn't update the state immediately I actually wasted like an hour trying to figure out why React was behaving unexpected just to find later that it is the expected behaviors and actually a good thing. Let me drop this article [HERE](https://www.daggala.com/react-state-not-updating-immediately/) for reference.
For tailwind I discovered that there are a many components available that you can easily edit and customize to save more time for the actual flow of your application and I started using some of the components that I was able to find which is great
Today I focused on the form validation and is nowlike 85% done by tomorrow morning it will be fully functioning  and maybe I will then start working on other task
okay let me jump

Signing off...
Build and publish the components whenever a new change to the source is detected.
Tags: aws, iot, devops
Published: 2022-07-06 23:22:42

AWS IoT Greengrass V2 services are usually used in an automated framework where deployments of components are provisioned based on specific events. GDK CLI helps be more flexible for creating AWS IoT Greengrass V2 components using Python/Java/Bash. However, automation would be ideal instead of manually provisioning the build and publishing tasks whenever there is any change to the element. This build solution highlights using AWS CodePipeline for building/publishing AWS IoT Greengrass V2 components and reduces development efforts and manual intervention. Furthermore, for continuous integration and continuous deployment (CI/CD), versioning is an important aspect which can be simplified and automated by this build solution.

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

https://aws.amazon.com/blogs/iot/automating-workflows-for-aws-iot-greengrass-v2-components/