teleren/devto huggingface dataset:
Web AR Developers
Tags: discuss, augmentedreality, devops, webdev
Published: 2022-07-11 03:23:07

I am really impressed by the Web AR for its simplicity and   easy access. 

If you had worked with Web AR. Please do share your experience with Web AR like what tools you used and will you use it further for AR development,etc..

P.S. Share your project with us and Let's connect.
Minimal React Portfolio
Tags: javascript, beginners, react, webdev
Published: 2022-07-11 03:10:37

Hi everyone 👋, 
I have been working on my personal portfolio for two days now. I designed it using **Adobe XD** and built it using **React**. it is minimal, nothing extraordinary. A simple black and white layout.

It is a way for me to practice **CSS** and share something. Hence, I thought why not make it public, and share it with others to use it or give me feedback. 

demo link: https://minimal-reactjs-portfolio.netlify.app/

repo: https://github.com/shehabshalan/minimal-react-portfolio

Here is what it looks like

![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0trjms38beiamtiikzr.gif)

Thanks for reading!
Preview vue.js app in android
Tags: vue, vite, mobile, android
Published: 2022-07-11 03:10:35

First you need to ensure that your device is in same network

in `package.json` file in your app, add this command

`"host": "vite --host"` or use your own name, im using `host` for command name. you can change the setting inside `vite.config.js` too with this setting 

```
  server: {
    host: true
  }
```

vite will automatically use your ip as a server ip, then run the command with `npm run host`, and finally you can access your app in external device, just access it with `{your ip}:{your app port}` eg: `192.168.10.1:3000`.

Thanks for this github [issue](https://github.com/vitejs/vite/discussions/3396)

if you have another method feel free to discuss, thanks for reading
Installing SciSpacy on Apple M1 Laptops
Tags: scispacy, ner, nlp
Published: 2022-07-11 03:09:39

# Background

I was working on developing a API based on SciSpacy to search for medical terms. Looking at the slow performance of loading the model and entity linker on the Intel i5 chip on my Lenovo laptop, I was curious to check how the Apple M1 chip would perform since I own a MacBook Air with M1 chip with following specifications,

* RAM - 16GB
* Storage - 512GB SSD
* Apple M1 chip
  * 8-core CPU with 4 perform­ance cores and 4 efficiency cores
  * 8-core GPU
  * 16-core Neural Engine

# The Process

Following are the dependencies from **requirement.txt** file for SciSpacy and the en_core_sci_lg model,

```
scispacy==0.5.0
https://s3-us-west-2.amazonaws.com/ai2-s2-scispacy/releases/v0.5.0/en_core_sci_lg-0.5.0.tar.gz
```

The ** pip install -r requirement.txt ** failed with lot of errors while installing a dependency ** nmslib ** with an error ** clang compiler does not support '-march=native' **. Since I already had the Xcode installed on my Mac the version of C was 11 but somehow the mentioned command was failing, since the said argument was not supported on the C version. With a lot of digging around I finally found a solution mentioned on [SciSpacy GitHub page](https://github.com/allenai/scispacy/issues/372). 

Install the nmslib using following command, 

```
CFLAGS="-mavx -DWARN(a)=(a)" pip install nmslib
```

After running this command all the packages got installed as expected and I was able to load and run the queries on SciSpacy model. 

Next I will be coming up with the performance comparison on Apple M1 vs Intel i5 chip. I understand the comparison isn't fair but it just shows how much improved the M1 Chip is over the Intel processors.
Favorite String Literals
Tags: javascript, tutorial, productivity
Published: 2022-07-11 03:09:13

I was recently listening to a JavaScript tutorial on 2x speed when I caught something that caused me to slow down and rewind. The presenter was talking about strings, concatenation, and ES6 string literals. The statement that caught my attention I summarized as "Go ahead and start with template literals first so you don't need to change to backticks later when you need to use a variable".

**JavaScript**

```Javascript
// instead of concatenation
// start with a template literal
let numberOfCats = 5;
console.log(`I have ${numberOfCats} cats.`);
console.log(`Now I have ${numberOfCats+1} cats.`);
```

This struck me as very sensible! There are many advantages to using a string literal instead of a basic statement or simple concatenation and you would save yourself time in refactoring code if you were already using them. They are more readable than other ways of formatting strings; they look like normal sentences and allow you to more easily identify portions to change or update.

I realized I could apply this kind of strategy to some of the other languages I know as well:

**Python**

```Python
# instead of concatenation
# use an 'f' string in Python 3 right away
number_of_cats = 5
f"I have {number_of_cats} cats"
```

**C#**

```csharp
// instead of String.Format() (ex. Console.WriteLine("Hello {0}", "world"))
// use string interpolation
string numberOfCats = 5;
Console.WriteLine($"I have {numberOfCats} cats.");
```

By using these techniques right away in your code, you save time and effort and increase the accuracy of your code when changes occur.

## Further Reading

- [Template literals (template strings)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals): MDN
- [f-Strings: A New and Improved Way to Format Strings in Python](https://realpython.com/python-f-strings/#f-strings-a-new-and-improved-way-to-format-strings-in-python): Real Python
- [$ - string interpolation (C# reference)](https://docs.microsoft.com/en-us/dotnet/csharp/language-reference/tokens/interpolated): Microsoft Docs
Apply Kubernetes resources to AWS EKS Cluster - Bitbucket Pipeline
Tags: kubernetes, aws, eks, bitbucket
Published: 2022-07-11 02:16:03


![Relation between EKS and Bitbucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wunm93fuvadb9whz7ufk.png)

## Apply k8s Deployment.

[Official](https://docs.aws.amazon.com/eks/latest/userguide/add-user-role.html)

We'll use [this one](https://bitbucket.org/atlassian/aws-eks-kubectl-run/src/master/) in the pipeline.

The following is needed.

1. AWS IAM.
2. Role/ClusterRole and Binding.


### AWS IAM

Simply create one of `User`. This user will not access to Console. We configure this user's key and token to BitBucket.

The user should have the following policy at least.

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "eks:DescribeCluster"
            ],
            "Resource": "*"
        }
    ]
}
```

### Role/ClusterRole and Binding.

2 Resources are needed to be applied.


**ClusterRole**

```yaml
apiVersion: rbac.authorization.k8s.io/v1
kind: ClusterRole
metadata:
  name: bitbucket-cicd
rules:
- apiGroups:
  - ""
  resources:
  - nodes
  - pods
  - services
  verbs:
  - get
  - list
  - update
  - patch
- apiGroups:
  - apps
  resources:
  - deployments
  - daemonsets
  - statefulsets
  - replicasets
  verbs:
  - get
  - list
  - update
  - patch
- apiGroups:
  - batch
  resources:
  - jobs
  verbs:
  - get
  - list
  - update
  - patch
---
apiVersion: rbac.authorization.k8s.io/v1
kind: ClusterRoleBinding
metadata:
  name: bitbucket-cicd-binding
subjects:
- kind: Group
  name: bitbucket-group
  apiGroup: rbac.authorization.k8s.io
roleRef:
  kind: ClusterRole
  name: bitbucket-cicd
  apiGroup: rbac.authorization.k8s.io

```

`apiGroups`: apiVersion is specified when we create k8s manifest. apiGroups is string up to the first slash in this version. The version should be ignored. If group name was v1 only for example, apiGroups will be empty string, We can get all of api groups, use the command `kubectl api-resources`. 

`verbes`: All of verbes are [here](https://kubernetes.io/docs/reference/access-authn-authz/authorization/#determine-the-request-verb).

**ClusterRoleBinding**

```yaml
apiVersion: rbac.authorization.k8s.io/v1
kind: ClusterRoleBinding
metadata:
  name: bitbucket-cicd-binding
subjects:
- kind: Group
  name: bitbucket-group
  apiGroup: rbac.authorization.k8s.io
roleRef:
  kind: ClusterRole
  name: bitbucket-cicd
  apiGroup: rbac.authorization.k8s.io
```

####subjects

Specify User, Group, or ServiceAccount to which the role is tied in this field.

`kind`: Will be User / Group / ServiceAccount.

`name`: Resource name of the kind.

### Edit `aws-auth`

Map ClusterRoleBinding and IAM User.

```bash
kubectl edit -n kube-system configmap/aws-auth
```

Mapping data will be like this...
```yaml
apiVersion: v1
data:
  mapAccounts: |
    []  
  mapRoles: |
    - "userarn": "arn:aws:iam::{account id}:user/{IAM name}"
      "username": "bitbucket-cicd-user" # Name you like
      "groups":
      - "bitbucket-group" # Group name you specified in ClusterRoleBinding
-- omit.....
```
Building in Public: with Virtual Coffee
Tags: webdev, beginners, javascript
Published: 2022-07-11 02:15:13

So Virtual Coffee, my go-to dev community, has a monthly challenge in July to build in public. I've been wanting to refresh my portfolio a bit and so I thought, why not join the challenge and dig into my portfolio!

I want to make my portfolio less of a pain to update with it comes to projects and swapping out skills. Right now, everything is hand coded into the HTML. Which is fine and it works.

But!

I've been working with Jekyll sites and have learned a bit more about javascript in the time I've build my portfolio. I can see how I _could_ have some like data hub and then format the info given into the html. Kinda like having a CMS or just separating the content from how it's rendered.

I'm not sure how to go about that, but I think I have some ideas. But I'll need to float some out to people that know how to execute the vision.


## Goals
- Render info on portfolio more programmatically
- Update content including:
  - projects
  - project screenshots
  - skills
- Connect custom domain to site 

## Some ideas:
- create a CMS and connect it to my portfolio
- rebuild site in Jekyll and use .yml as data files to feed into HTML
- some in between with JS
JavaScript Path Documentation of Handy Methods
Tags: javascript
Published: 2022-07-11 01:35:56

---
title:  JavaScript Path Documentation of Handy Methods
published: true
description: Finding Object from an array with some specific condition
tags: javascript
---
1. The __find()__ method returns the value of the first element in the provided array   that satisfies the provided testing function.

```javascript
const array1 = [{id:'1',name:'test'}, {id:'2',name:'test2'}];
const found = array1.find(element => element.id === '1');
console.log(found);
```
OutPut: ```Object { id: "1", name: "test" }```
Error: Missing helper: "handlebars": Missing helper: "handlebars". Any thought ?
Tags: javascript, webdev, help, beginners
Published: 2022-07-11 00:44:55

📁 server.js
```
const Hapi = require('@hapi/hapi');
const Inert = require('@hapi/inert');
const Vision = require('@hapi/vision');
const Handlebars = require('handlebars');
const path = require('path');
const routes = require('./routes');

const init = async () => {

  // BUILD SERVER
  const server = Hapi.Server({
    host: 'localhost',
    port: 1234,
    routes: {
      files: {
        relativeTo: path.join(__dirname, 'static'),
      },
    },
  });

  // PLUGIN CONFIGURATION
  await server.register([
    {
      plugin: require('hapi-geo-locate'),
      options: {
      // to able track the user ip
        enabledByDefault: true,
      },
    },
    {
      plugin: Inert,
    },
    {
      plugin: Vision,
    },
  ]);

  // MAKE HANDLEBARS AVAILABLE
  server.views({
    engines: {
      html: Handlebars,
    },
    path: path.join(__dirname, 'views'),
  });

  // ROUTE
  server.route(routes);

  // SERVER CONFIGURATION
  await server.start();
};

init();
```

📁 routes.js
```
const {servingDynmaicPage} = require('./handler');
const routes = [
{
  method: 'GET',
  path: '/dynamicPage',
  handler: servingDynmaicPage,
},];
    
module.exports = routes;
```

📁 handler.js
```
const servingDynmaicPage = (request, h) => {
  const data = {name: 'Adit'};
  return h.view('index', data);
};

module.exports = {servingDynmaicPage};
```

why i get an error like this => Error: Missing helper: "handlebars": Missing helper: "handlebars". Any thought ?
SSH: Timeout ao se conectar com o Github
Published: 2022-07-11 00:32:25

Literalmente todas as vezes que tive que configurar um ambiente de desenvolvimento do zero, passei por esse problema com o SSH:

```
ssh: connect to host github.com port 22: Operation timed out
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```
Vamos lá!

## Primeiros passos:
Para garantir que você tem uma chave gerada, e configurada corretamente, siga esses passos:

1. 
[Criar uma Chave SSH](https://docs.github.com/pt/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)
2. 
[Conectar a chave ao seu github](https://docs.github.com/pt/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account)
3. 
[Testar sua conexão](https://docs.github.com/pt/authentication/connecting-to-github-with-ssh/testing-your-ssh-connection)


Após esses passos, se você já os não tinha feito, vai receber a mesma mensagem de erro no terminal.

## Correção

Abra o arquivo `~/.ssh/config` no seu editor de texto (VScode por exemplo):

```
code ~/.ssh/config
```
Adicione esse trecho de código no arquivo e salve:

```
Host github.com
 Hostname ssh.github.com
 Port 443
```

Prontinho, pode rodar o comando `ssh -T git@github.com` para testar e é para tudo estar funcionando! 😁


_> Esse tutorial foi criado pois sofri com esse problema algumas vezes, espero que possa ajudar alguem x)_

[Instagram](https://www.instagram.com/karlos.dev/)
[Linkedin](https://www.linkedin.com/in/karlossilva/)
🎙️Tirando faixa de audio OBS Studio nativamente (Twitch VOD Track)
Tags: braziliandevs, devrel, beginners, streaming
Published: 2022-07-10 23:46:15

## Introdução
Com a vinda da [versão 26.1 em 14 de dezembro de 202O](https://github.com/obsproject/obs-studio/releases/tag/26.1.0) uma configuração para permitir separar o áudio do VOD na Twitch para outra faixa. Inclusive a própria Twitch ajudou o OBS nessa funcionalidade.

## Configuração da Twitch VOD Track
- Indo em `File > Settings`
![Indo em File > Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwto1y80mvy8603rj5zi.png)

- Depois clique na aba `Output`
![Depois clique na aba Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxxkjkiarrk6p8taxwc8.png)

- Se tiver no `Output Mode: Simple` marque `Twitch VOD Track (Uses Track 2)`
![Se tiver no Output Mode: Simple marque Twitch VOD Track Uses Track 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qfequpa92rjv5ru6kbn.png)

- Se tiver no modo `Output Mode: Advanced` marque o checkbox `Twitch VOD Track` e escolha a faixa de 1 até 6.
![Se tiver no modo Output Mode: Advanced marque o checkbox Twitch VOD Track e escolha a faixa de 1 até 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o03ikx28tavt8tft6upr.png)

## Usando a Twitch VOD Track
- Em  `Edit > Advanced Audio Properties`
![Advanced Audio Properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/giew05aund916hmrd4hf.png)

- Em `Track` usando configuração de Twitch Vod Track 2 , Vamos no Desktop Audio (onde sai som do seu PC) esmarcar o track 2 e deixar o track 1 marcado para seus espectadores ouvir jogo, musica e tudo que seu CP está tocado.
Para Mic/Aux precisa estar marcado para track 1 e 2, para seu VOD ter sua fala apenas.

![Configuração](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hn31l2gzpl2kddj74xkh.png)
Hello World!
Published: 2022-07-10 23:34:38

Documenting my learning journey #2

Today I wrote my first line of Ruby code. A simple "Hello World", but that became special because it was my first project that I could see running.

```
puts "Hello World"
```

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

I also learned how to create a loop. Nothing more than a repetition, but to be done it needs to be encoded in a "code block". I did it this way:

```
5.times do
    puts "Hello World!"
end
```
AbcDB - Dead Simple Database for your JAMStack
Tags: jamstack, webdev, beginners, database
Published: 2022-07-10 23:21:50

Hi all, I want to share a project I created called https://abcdb.dev/, a simple key-value database for JAMStack apps.

We feel that Firestore is becoming too complicated as a product for the average user. The amount of customization and options is just overwhelming. From security rules, cache vs. server fetch, snapshots, pending writes, realtime updates, etc. The product is not as friendly and easy to setup as it used to be before. Especially with the advent of JAMStack apps, we see the need for database solution that just work out of the box, without the need for complex setups and sophisticated solutions around it.

I created https://abcdb.dev/ as the solution for that problem. It's easy to use and require one click to start. Please give it a try and let me know, it has been helpful for my own JAMStack development so far 🙂
The choice to build open source and in public
Tags: opensource, webdev, startup, kubernetes
Published: 2022-07-10 23:14:39

Today was a big day! I made the foundational decision for [Statyes](https://statyes.com) to be an open source from day one.

This choice might have been the best decision I've made. It also may be the worst. Only time will tell. However, I'm convinced it's a wise decision for the following reasons:

## I'm building this in public
I've enjoyed following people make their dreams happen over the years! There's something inspiring and so eye-opening to be part of the high's and low's of someone's journey through entrepreneurship. It becomes a collective experience for all to share in the milestones and victories as a product comes to market!

I'll be vulnerable here as well. It's a lonely journey to build a product by yourself without the support of a community. Just the idea that others might check out my code and make contributions themselves thrills me. It becomes a product much greater than myself.

## There are few "good" alternatives
The status page world has so much room for improvement. Even in the open source community, the main player Cachet, has effectively been [marked](https://github.com/CachetHQ/Cachet/issues?q=is%3Aissue+is%3Aopen+dead) "dead" by the community.

I think there's ample opportunity for big ideas to disrupt the space. And I've got some big ideas! Automated event responses using machine learning, beautiful page builders, and simpler metric connections just to name a few. It's gonna be fun!

## No reason to make ALL the money
It might sound funny, but this is a sincere ethos I have regarding my personal work. I LOVE building software and am grateful to have a wonderful career that takes care of me and my family.

As I build Statyes, I definitely want to monetize it (don't mistake open source for completely free). However, there's no reason to hold the code hostage for only the users wanting to pay. Let's be honest, status pages are only as good as their hosting provider is! So I'm already planning out a stellar Kubernetes approach to offer amazing uptime and resiliency from day one.

---
Overall, I'm so excited to build this system and get it into the hands of businesses and builders alike. There's a big road ahead of me. However, with the road I chose today, I won't be alone. 🤓
Day 92: Back to writing
Published: 2022-07-10 23:10:42

Hi!
Today was a long one I expected it to be a restful one and it turned out to be a one full of tasks with movies, traveling, coding,.. thankfully I also got back to writing and published a second article on the Heroku series and I actually needed this it's been like two months know since I had published a guide but I' will try squezze time for it from now on 

Tomorrow I will get back to the job so let me run

Signing off..
Keagate: Open-source, high-performance alternative to Coinbase Commerce & CoinGate.
Tags: opensource, blockchain, webdev, javascript
Published: 2022-07-10 22:59:57

*tldr – [Keagate](https://github.com/dilan-dio4/Keagate#instant-payment-notifications) is an open-source cryptocurrency payment gateway for multiple currencies.*

---

There's a couple reasons that Keagate is the superior method for accepting crypto payment. To name a few; no fees or middle, multiple coins available, open-source, etc...

The payment workflow can be [api-driven](https://dilan-dio4.github.io/keagate-example-swagger/) or utilize the built in invoice interface.

Example invoice: 

![Keagate invoice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8o7ek5q96hp5p2czm3bq.png)

To use Keagate in your next project, there's two installation methods.

1 – One-liner in Unix environments

```bash
bash -c "$(curl -sSL https://raw.githubusercontent.com/dilan-dio4/Keagate/main/packages/scripts/keagate.sh)"
```

2 – Manual installation, [as seen here](https://github.com/dilan-dio4/Keagate#manual-installation).

Lastly, proceed through the configuration helper:

```bash
node packages/scripts/build/configure.js
```

More information is available on the [Github](https://github.com/dilan-dio4/Keagate).
Creative Problem Solving Techniques
Tags: functional, leadership, beginners, tutorial
Published: 2022-07-10 22:36:13

The world is never short of programmers or coders it's only short of creative problem solvers. having great problem solving techniques keeps you at edge and way ahead of others. 

## They are traditionally four(4) steps to problem solving.


_**1. Define the problem.**_
_**2. Generate new ideas.**_
_**3. Evaluate and select solutions.**_
_**4. Implement.**_

those are the foundational problems solving techniques you'll have to stick to when you're faced with your next problem. Without further a do, let's dive further.

1. **Define the problem:** First, you must define the problem, what is it cause? what are the signs there's a problem at all?

2. **Generate new ideas:** Next, you identify various options for solutions. What are some good ideas to solve this?

3. **Evaluate and select solutions:** Then, evaluate your options and choose from among them. What is the best option to solve the problem? What's the easier? How should you prioritize?

4. **Implement:** Finally implement the chosen solution. Does it solve the problem? Is there another option you need to try?

## Creative Problem Solving Process

**_♦Separate ideation from evaluation:_** 
When brainstorming creative ideas for your next project, have a separate for writing it all down. focus on generating lots of ideas. Don't prioritize them or evaluate them until everything is captured.

**_♦Judging will shut it down:_**
Nothing stops the flow of creative ideas faster than judging them on the spot. Wait until the brainstorming is over before you evaluate.

**_♦Restate problems as questions:_**
Restating problems as questions will give you more clarity about the problem. it's easier to a group into thinking of creative ideas when challenges are stated as open-ended questions.

**_♦Use "Yes and" to expand ideas:_**
It's way too easy to shutdown and negate ideas by using the word "but" (i.e. "But i think this is better..."). Avoid this at all cost, instead expand on what was previously introduced by saying "Yes, and?..." to keep ideas flowing and evolving.

ps: Before you solve a problem, seek to understand it fully.
I hope someone find this useful.
follow for more tips.