teleren/devto huggingface dataset:
Using Lottie Animations inside Angular or Ionic 4
Published: 2019-10-06 23:03:29



## Getting Started

We will need to install the required web components to render and play the Lottie animation. We will be using the player maintained by our team at TeamHive. This package was ported from the original player to be built and compiled with StencilJS. This allows the player to be used in Webpack environments (i.e. Angular).


Install the web component:

```shell
npm install --save @teamhive/lottie-player
```

Register the web component in your `main.ts`.

```ts
import { defineCustomElements } from '@teamhive/lottie-player/loader';

defineCustomElements(window);

```

_Note_:
> When dealing with web components in an Angular application, you need to apply the correct schema on the module containing the component/page.

```ts
schemas: [CUSTOM_ELEMENTS_SCHEMA]
```



## LottieFiles

LottieFiles is a website of both free and premium lottie animations that you can easily adapt and use in your application or website. 

[LottieFiles Website](https://lottiefiles.com/featured)

Find an animation that you like, select it and click the "html" output to find the JSON path. This path will be used in your application.

Note:
> If you are using your application offline, you will need to download the JSON and reference it locally from your application.


## Integrating Into Your App

Let's add a button to our view and embed the lottie-player component with our JSON we've selected from the previous step.

```html
<ion-button fill="outline" expand="block">
    Example
    <lottie-player slot="end" autoplay loop src="https://assets3.lottiefiles.com/packages/lf20_ZWEJL5.json">
    </lottie-player>
</ion-button>
```

If we run this example we should see this:

![Image](https://i.gyazo.com/b54a5e3907fdb7c9585713259a2eabfb.gif)

At this point you are up and running with an embedded lottie animation in your application.

### Additional Styling

If in this example you want to style the animation at the end of the ion-button, you can apply this mark-up.

```css
lottie-player {
    position: absolute;
    transform: translateX(40%) scale(0.75);
}

```

You can adjust the transform based on your animation's size and width of the button control. I would also recommend using a class or id selector for the styling.


![Image](https://i.gyazo.com/717063f3ddd1965961096403b8e65c1f.gif)
Angular Elements - Introdução
Tags: angular, webcomponents, angularelements, microfrontends
Published: 2019-10-06 22:49:30

---
title: Angular Elements - Introdução
published: true
description: Introdução ao conteúdo
tags: angular, web-components, angular-elements, micro-front-ends
series: Angular Elements
---

Estou iniciando essa série de artigos com o intuito de demonstrar como utilizar [Angular Elements](https://angular.io/guide/elements).

Começando pelo básico, não indo muito além do já [documentado no site oficial do Angular](https://angular.io/guide/elements).

Finalizando com pontos mais _avançados_, como roteamento e micro front-ends.

## Web Components

[Micro front-end](https://www.thoughtworks.com/radar/techniques/micro-frontends) é um assunto bastante atual, porém ainda imaturo.

Uma das maneiras de se utilizar essa abordagem de desenvolvimento é usando [web components](https://www.webcomponents.org/introduction), mais especificamente [Custom Elements](https://html.spec.whatwg.org/multipage/custom-elements.html).

Apesar dessa funcionalidade estar disponível em [navegadores mais atuais](https://caniuse.com/#feat=custom-elementsv1), comumente ainda temos que suportar outros navegadores.

Já estão disponíveis [polyfills](https://www.webcomponents.org/polyfills) para cobrir esses cenários, porém a criação dos componentes é apenas um dos problemas enfrentados no desenvolvimento de aplicações.

Além dos componentes em si, temos de nos preocupar com roteamento, state management, caching, etc.

## Angular Elements

Como qualquer outro assunto quando se trata de desenvolvimento, muitos frameworks/libraries estão tentando endereçar esses pontos criando abstrações a fim de facilitar todo esse trabalho.

O que será abordado nessa série é o trabalho realizado pelo time do Angular, [Angular Elements](https://angular.io/guide/elements).

Angular Elements basicamente funciona como uma ponte entre as APIs do browser e as [diversas funcionalidades providas pelo Angular](https://angular.io/features).

Ao inserir um elemento construído dessa maneira em uma página, o navegador o instancia e o adiciona ao [DOM](https://developer.mozilla.org/pt-BR/docs/DOM/Referencia_do_DOM).

Em seguida, com esse elemento instanciado, o Angular assume o controle e provê o seu conteúdo, data binding e change detection através da sua [Template Syntax](https://angular.io/guide/template-syntax#binding-syntax-an-overview).

A imagem abaixo (disponibilizada no site oficial) ilustra o explicado acima:

![Element Intantiation](https://thepracticaldev.s3.amazonaws.com/i/8y2hgbnixjbkvyteobik.png)

## Conclusão

Esse artigo foi criado para dar uma introdução teórica, já direcionando o assunto com outros artigos e documentações a respeito do assunto.

Provavelmente os próximos artigos serão mais direcionados à implementação em si, com exemplos descritivos e funcionais.

Sintam-se livres a comentar, contribuindo positivamente!
Ways to create a new Chrome instance without CORS [macOS]
Tags: debugger, chrome, terminal, cors
Published: 2019-10-06 21:42:01

This tutorial is mainly for **macOS** users, but the command line stuff can be useful for everyone.😊

When you need to test your code in **Chrome** with default settings and without extensions, the `--user-data-dir` argument will be your friend. There is another flag for disable [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS): `--disable-web-security`. Before running the command, you might kill all Chrome instances. 

## From command line
Open your Terminal app and just run the following.

```bash
$ open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir=/tmp/chrome_dev_test --disable-web-security
```

## A new Application
On macOS you can easily create an [Automator](https://support.apple.com/guide/automator/welcome/mac) app, so open it, create a **New Document** then select the **Application**.
![Screenshot from Automator app](https://thepracticaldev.s3.amazonaws.com/i/ers8mgj9rpv6s0gsojdh.png)
After that, search for the **Run Shell Script** action and put the bash script from previous section inside it. Then save it with `⌘S`.
![Screenshot from Automator app](https://thepracticaldev.s3.amazonaws.com/i/g87obw6a9vetrjwsbp5x.png)

## From Visual Studio Code debugger
First of all you need the [Debugger for Chrome](https://github.com/Microsoft/vscode-chrome-debug) extension. In debug menu (`⇧⌘D`) add a new configuration with Chrome target. Here you can set your localhost port and add new fields. In the `configurations` field should be the following. Then just save it and run it.🚀

```json
{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome against localhost",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceFolder}",
  "userDataDir": "/tmp/chrome_dev_test",
  "runtimeArgs": ["--disable-web-security"],
  "sourceMaps": true
}
```

Follow me here or on [Twitter](https://twitter.com/0xMarkcius) for random dev stuff like this.😁
Working with Git terminal
Tags: terminal, beginners
Published: 2019-10-06 21:39:25

What is Git? Git is a Supply Chain Management(SCM) that stands apart from the other SCM. Git has allows you to have multiple branches that are entirely different from each other. Every creation takes a few seconds and is completely easy to understand. In this article, I’ll be writing about some important keys, committing, pushing up to GitHub, and cool tricks. Also, this article is for mac users, but most of the keys should be similar to Linux or windows.
They are a lot of keys to use in the Git terminals. The cd (change directories, one of the most important keys is how you are able to change directories, which can be documents, folders, images, and etc. If you want to go back to the previous directory, then you insert the cd .. to go back. You can see all your list directories with the ls key. When it comes to making directories, you have to put mkdir. Seeing what directory you insert pwd. There are more keys out than there is chicken(lol maybe not that much), but you can search for them on the web. 
You can commit, save, your repository on the local server. The reason to commit the repository on the terminal allows you to stage the repository, so you can push it up to a remote server. Let’s focus on how can we get the repository to be saved on the local server.	 To see what files have not been staged you would enter git status. Seeing what files that have not been staged in the repository is important because you may not want to commit some files you changed in the repository. After seeing the files that haven’t been staged, you would want to stage the files using the git add. It’s very important you type out the files name instead of using git add . because you may not want to commit some files. Last step, git commit that allows you to save the work to your local server. It’ll ask you to write a short message about why you are saving it. Doing this instead of hitting the save button will allow you to keep track of your previous commit that you can always go back. 
Now that we staged our file, let’s learn about why we would want to push our work on GitHub. The reason to push it up to GitHub is that everyone all run into an accident that our computer may break on us, or accidentally spilling cereal on your laptop, which I have so don’t feel bad, or whatever reason your computer stops working. To push up on GitHub you would enter git push right after you git commit. Doing this allows your repository to be up on GitHub for you to have access to the repository on any computer because of it on the cloud, internet. 
Let's go back to talking about commits, you can go back to the previous commit by entering git reflog which allows seeing all your previous commits to select the specific commit you are trying to get back to you would enter git reset HEAD@{index}. The index represents the specific commit number shown you trying to access. You can learn more on https://ohshitgit.com/ which has explicit language, so the clean version is on https://dangitgit.com/. These are websites with some pretty sweet git commands.
TxtToSL Online - A text to sign language translator
Tags: showdev, webdev
Published: 2019-10-06 21:34:34

Hello all!

Finally actually joined here after lurking for a while.

I recently (this / last Friday) open sourced my first project in a while. It's a web app which uses an API / server I'm working on (closed source).

The API translates text into sign language(s)! Proper videos of people doing it, not emojis / images / etc.

I'm hosting the app on my web server [here](https://txttosl.oojmed.com), with the source [on GitHub](https://github.com/oojmed/TTSLO-Web).

I also have some [API docs](https://txttosl.oojmed.com/docs/), incase anyone is interested. ;)

Feel free to give any feedback, or shoot any issues or pull requests on the repo.

Also, the app (and especially) docs suck / are kinda broken on mobile. Working on some fixes soon. :P

PS: Also probably / hoping to release the source of the docs soon! As well as the API / server in the (far) future, need to do a lot of work on stability, configurability, etc.
What Whitney Houston taught me about Open Source Software
Tags: hacktoberfest, opensource, beginners
Published: 2019-10-06 21:16:38

---
title: What Whitney Houston taught me about Open Source Software
published: true
description: We all have our roles to play in a project and no contribution is too small. Any addition to a project is adding value for others.
tags: hacktoberfest, opensource, beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/d11wf2jmvg7ylmkgmub3.jpg
---

>Cover image by [Alvaro Reyes](https://unsplash.com/@alvaroreyes) on [Unsplash](https://unsplash.com).

It's no secret that I am a [fan](https://dev.to/daveskull81/what-do-you-do-when-you-get-nervous-i-dance-to-music-4pb5) of Whitney Houston. I will happily argue that she is one of the greatest singers and performers ever. One of my favorite songs by her is "I Wanna Dance with Somebody."
{% youtube eH3giaIzONA %}
But, outside of her amazing talent her music has actually helped me to better understand open source software. With Hacktoberfest upon us and in full swing I was reminded of how an open source project is a lot like a song. Though there may be an obvious individual working at the center of it all there are many pieces coming together to create this thing loved by many. We can easily get caught up in Whitney singing her heart out about wanting someone to dance with, but without the backup singers coming in with "dance" right on time in the bridge before the last chorus the song just isn't the same. Without their contribution the song would be very different.

This is a lot like open source software where one or a few individuals are celebrated, rightfully so, for building this cool thing, but there are lots of other people in the background adding their work too. I often see tweets like this one:
{% twitter 1091546120365305857 %}
I don't think anyone should downplay their contribution to a project, especially a documentation one. Looking in the thread on that tweet I see many others feel the same way. Just because you can't add new code to a project doesn't mean your contribution isn't important or valuable to others. Non-code contributions to a project in the form of documentation or filing an issue should be celebrated just as much as adding a new feature or fixing a nasty bug. In some cases there are lots of people using a particular piece of open source software and what you add could be incredibly valuable, even if they don't know it, to many of them.

So, if you've been thinking about contributing to a project I strongly encourage you to go for it. Remember it doesn't have to be a code contribution to be useful or extremely helpful. The Hacktoberfest [home page](https://hacktoberfest.digitalocean.com) has a huge list of projects looking for contributors. Check it out and I bet you can find something where you could help.

If you have contributed to something or are working on a contribution I'd love to hear about it in the comments below. Was it your first Pull Request to an open source project? Was this your first time taking part in Hacktoberfest? What did you end up making as your contribution? Let me know! :)
Women in tech workshop
Published: 2019-10-06 21:16:23

“Love what you do and do what you love. Doing something new and different requires a level of drive and passion that is really hard to fake. When your heart is behind what you are doing, so much is possible.” by Tracy Sun 

The percentage of women in tech is improving in Rwanda and all over the world. In the last many years women were not confident to participate in many different tech companies especially in doing programming.

Women in Tech workshop is the program of eight weeks that has organized by Andela in Rwanda. This workshop has the purpose of making women in Rwanda be proud of doing programming as men do it freely. By improving their skills in programming using HTML, CSS, and JAVASCRIPT, there were project management courses by using pivotal tracker, the course of Github to make them know how to work as a team by sharing codes which is one of the values that Andela follows. Also, it helped the attendees to understand and get well to know how to make a good User interface, create the server of the project using NodeJS and give it a database to have a complete working project.


In the last few weeks, there were many activities that were supposed to be completed. Since from the beginning, I get to know at least one new thing each new day. I have learned to manage the project in college but in this workshop, I learnt how to manage my project using a pivotal tracker by writing stories. Also, I have learned how to use Github as a platform that helps to share codes or help collaboration between programmers by getting codes. I developed many projects in college but I was not able to make my site responsive as I can do it now, Also I didn’t know how to use NodeJS but in this workshop, I used it by creating endpoints(Server)for my UI(User interface).


I hope this workshop will still happen for some people who really have a passion for programming. This is more helpful for people who need to join Andela especially women . I can stand and say that we are not different from men, women can also do programming well even better than some men because We are all human beings and we can make it by having passion in what we are doing.
Use Functional Component with React Hooks to replace class component
Tags: react, hook
Published: 2019-10-06 20:57:16

###Compare React Hooks(useState) with React Class component
React hooks changing the way how we are render our component with React,
As we all know React have two ways to render a component.
__Functional Component__ and __class Component__


But if you would like to use __state__ and react life cycle in your component, you have to use Class Component. which is heavy and hard to rebuild your component and hard to run Unit test.
Here is a sample how to handle state in class component,
```javascript
import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { times: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ times: this.state.times + 1 });
  }
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={this.handleClick}>
          you click {this.state.times} times{" "}
        </button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

```
{% codesandbox red-meadow-5kl56%}

As you find out, from above you have to add state with constructor and define your function to update state, even with one state.

Now, React hooks can make it much more simple with __functional component__
You can use a functional component, with __useState__.
Here will be 3 steps to use state hooks in React 16.8

1. you have to import useState from `React`
2. Define your useState at beginning,
(if you would like to use two states, you just define two useState)
You can assume the parameter of `useState` is the init value of the this state,
in my sample, `count` init value is `0`.
3. call setCount with new value when needed.


```javascript
const [count, setCount] = useState(0)
```
`setCount` is a function use to update state.
You can assume as same as `this.setState` in class component.


```javascript
import React, {useState} from "react";
import ReactDOM from "react-dom";

import "./styles.css";
function App () {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => setCount(count + 1)}>
        you click {count} times
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```
https://codesandbox.io/embed/happy-leavitt-73btl
{% codesandbox happy-leavitt-73btl%}


Functional component doesn't have react life cycle, the code is light and easy for you start learning React and reading other people's code. 
The most reason to use a class component is state, now game has been changed.
Faker Pokemon
Tags: faker, php, pokemon, hacktoberfest
Published: 2019-10-06 20:21:19

---
title: Faker Pokemon
published: true
description: Looking for first timer contributors ! 
tags: faker, php, pokemon, Hacktoberfest
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vf9noaxjf66ald710r24.jpg
---

If any php developers out there are looking for a simple beginner friendly project to contribute to, consider faker-pokemon! A faker provider to generate pokemon data in your seeders and tests based of the original three Pokemon game boy games. Pokemon red, blue and yellow. 

https://github.com/James-N-M/faker-pokemon

Issues added 
- Update Documentation to show seeder usage
- Add Main Items
- Add Key Items 

Thanks again happy Hacktoberfest
Key-value storage for multiple databases. Supports MongoDB, MySQL, Postgres, Redis, and SQLite.
Tags: javascript, typescript, node
Published: 2019-10-06 16:38:00

# [Endb](https://endb.js.org) &middot; [![Test](https://github.com/chroventer/endb/workflows/Test/badge.svg)](https://github.com/chroventer/endb) [![codecov](https://codecov.io/gh/chroventer/endb/branch/master/graph/badge.svg)](https://codecov.io/gh/chroventer/endb) [![License](https://badgen.net/github/license/chroventer/endb)](https://github.com/chroventer/endb/blob/master/LICENSE)

Key-value storage for multiple databases

- **Easy-to-use**: Endb has a simplistic and neat promise-based API.
- **Adapters**: By default, data is cached in memory. The officially supported adapters are covered by many tests to guarantee consistent behavior. They are lightweight, efficient wrappers over various database drivers. Offcially supported adapters are MongoDB, MySQL, PostgreSQL, Redis, and SQLite.
- **Third-Party Adapters**: You can optionally use a third-party storage adapters to enable desired functionality.
- **Namespaces**: Namespaces isolate elements within the database to avoid key collisions, separate elements by prefixing the keys, and allow clearance of only one namespace while utilizing the same database.
- **Custom Serializers**: Endb handles all the JSON data types including Buffer using [`buffer-json`](https://github.com/jprichardson/buffer-json). Optionally, pass your own data serialization methods to support extra data types.
- **Embeddable**: Endb is designed to be easily embeddable inside other modules with minimal efforts.
- **Data Types**: Handles all the JSON types including [`Buffer`](https://nodejs.org/api/buffer.html).
- **Error-Handling**: Database errors are transmitted through; consequently, database errors do not exit or kill the process.

## Installation

**Node.js 12.x or newer is required.**

```shell
npm install endb
```

By default, data is stored/cached in memory. Optionally, you can install and use an adapter. Officially supported database adapters are MongoDB, Redis, MySQL, PostgreSQL, and SQLite.

```shell
npm install @endb/mongo # For MongoDB
npm install @endb/mysql # For MySQL
npm install @endb/postgres # For PostgreSQL
npm install @endb/redis # For Redis
npm install @endb/sqlite # For SQLite
```

## Usage

```javascript
const Endb = require('endb');

// One of the following
const endb = new Endb('mongodb://user:pass@localhost:27017/dbname');
const endb = new Endb('mysql://user:pass@localhost:3306/dbname');
const endb = new Endb('postgresql://user:pass@localhost:5432/dbname');
const endb = new Endb('redis://user:pass@localhost:6379');
const endb = new Endb('sqlite://path/to/database.sqlite');

await endb.set('foo', 'bar'); // true
await endb.get('foo'); // 'bar'
await endb.has('foo'); // true
await endb.all(); // [ { key: 'foo', value: 'bar' } ]
await endb.delete('foo'); // true
await endb.clear(); // undefined
```

## Documentation

You can find the Endb documentation [on this website](https://endb.js.org)

## Contributing

Before submitting a pull-request, please read our [Contributing Guide](./.github/CONTRIBUTING.md).

## License

MIT © chroventer