teleren/devto huggingface dataset:
Create a Card Matching Game in AR 🃏
Tags: augmentedreality, unity3d, gamedev, tutorial
Published: 2022-02-04 02:23:19

![](https://miro.medium.com/max/1400/1*fzPn2hZU68TD0a30pHZ87Q.png)

Here’s a simple card matching game using AR Foundation and Unity with [**echo3D**](http://www.echo3d.co) for Android. The full demos can also be found on echo3D’s [GitHub](https://github.com/echo3Dco/Card-Matching-Demo).

Built in Unity 2019.4 with AR Foundation 2.1.10 and ARCore XR Plugin 2.1.10l.

Register
========

Don’t have an API key? Make sure to register for FREE at [echo3D](https://console.echo3d.co/#/auth/register).

Run
===

*   Clone this repo.
*   [Add images](https://docs.echo3d.co/quickstart/add-a-3d-model) to the console.
*   Set the API key in the `CardMatch.cs` script inside the `CardMatch\CardMatchRoot.prefab` using the the Inspector.
*   [Configure Player Settings for AR Foundation](https://developers.google.com/ar/develop/unity-arf/getting-started-ar-foundation#configure_player_settings)
*   [Build and run the AR application](https://docs.echo3d.co/unity/adding-ar-capabilities#4.-build-and-run-the-ar-application).

Learn more
==========

Refer to our [documentation](https://docs.echo3d.co/unity/) to learn more about how to use Unity and echo3D.

This project uses a [third party library](https://pub.dev/packages/flutter_unity#-readme-tab-).

Support
=======

Feel free to reach out at [support@echo3D.co](mailto:support@echo3D.co) or join our [support channel on Slack](https://go.echo3d.co/join).

Screenshots
===========

![AR1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643941017933/-QSysraLn.png)

![AR2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643941008304/K8Uig_z0v.png)

![AR3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643941049701/U9yxWxNwq.png)

![AR4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643941058370/7_eN7uGyE.png)

![AR5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643941074543/xSmSJAZl1.png)

![AR6.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643941091142/ZMC7AEBXk.png)

![AR7.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1643941044183/cEG4CHU-2.png)

---
> _**echo3D** ([www.echo3D.co](http://www.echo3d.co/); Techstars 19’) is a cloud platform for 3D/AR/VR that provides tools and network infrastructure to help developers & companies quickly build and deploy 3D apps, games, and content._

![](https://miro.medium.com/max/1400/0*pFMIZiay7s31ljlN.png)
My basic vim setup
Tags: vim, devjournal, linux, todayilearned
Published: 2022-02-04 02:12:06

## Introduction

Hello :)

Just thought I'd share my .vimrc settings from my recently installed Arch Linux machine.
I've never actually thought too deep about what each of the options do so I decided to look each of them up. 

---

### Very very basic .vimrc

Well then here's my very simple .vimrc file: 
I'll try to explain what each option does below.

```bash
set nocompatible
syntax on
set modelines=0
set number
set encoding=utf-8
set wrap

set tabstop=2
set shiftwidth=2
set softtabstop=2
set autoindent
set copyindent
set expandtab
set noshiftround

set hlsearch
set incsearch
set showmatch
set smartcase

set hidden
set ttyfast
set laststatus=2

set showcmd
set background=dark
```

---

### Very very basic explanation

nocompatable because I don't need "vi" compatability.

Enabling syntax makes it easy to read code via vim.

I don't need modelines so I have set it to 0

Enabling number allows me to see the line number of each line.

After that I have my tab spaces etc set up and search highlighting.

hidden causes unsaved files to be hidden instead of closed when opening a new file.

ttyfast improves smoothness when there is multiple windows. 

laststatus is set to 2 so that the last window will always have a status line.

showcmd shows the command ;) recommended to switch this off if your terminal is slow.

background is set to dark as I tend to like dark themes/backgrounds

Next I'm looking into installing some plugins. If you have any recommendations please let me know. :)
URL [Slug Generator] With Elixir
Tags: programming, elixir, functional, tutorial
Published: 2022-02-04 01:40:07

&nbsp;
&nbsp;

{% youtube peHupiQf6oA  %}

&nbsp;
&nbsp;


Learn how to build a human-readable, search engine-friendly URL slugs generator with Elixir.

### Step 1:

Create a new Elixir project by going to the command line and typing the following in your desired directory:

`$ mix new slug_generator && cd slug_generator`

### Step 2:

Open your test file `test/slug_generator_test.exs`, remove the autogenerated test and add the following test:

```elixir
  test "generates slug" do
    s = "[\"Pattern\", \"Matching\", \"In\", \"Elixir\"] = [a, b, c, d]"

    assert "pattern-matching-in-elixir-a-b-c-d" = SlugGenerator.create(s)
  end

  test "generates simple slug" do
    s = "My slug generator & simple test "

    assert "my-slug-generator-and-simple-test" = SlugGenerator.create(s)
  end
```


Watch your tests fail by going to the command line and running the test by typing `mix test`.

### Step 3:

Let's make our test pass by opening our main project file `lib/slug_generator.ex`, remove the autogenerated hello world function and add the following:

```elixir
  def create(string) do
    string
    |> String.downcase()
    |> String.replace(~r/[^a-zA-Z0-9 &]/, "")
    |> String.replace("&", "and")
    |> String.split()
    |> Enum.join("-")
  end
```

Go back to the command line and watch your tests pass with no failures by typing `mix test`.

### Code Breakdown

#### String.downcase(string)

Makes everything lowercase.

#### String.replace(subject, pattern, replacement)

We use it twice, the first is used with a regular expression as a pattern to replace everything that is not alphanumeric or the `&` symbol in the string with nothing or an empty string. The second time used with the `&` symbol as a pattern to get replaced with `and`.

#### String.split(string)

Returns a list of substrings ignoring whitespace.

#### Enum.join(list, joiner)

Joins the list of substrings with the `-` symbol and returns a string.

## Conclusion 

That's a short and sweet way to build a URL slug generator with Elixir, using the useful `String` module combined with the `Enum` module. You could get way fancier and add more functionality but that should do it for this example tutorial. Thank you so much for your time, I really appreciate it.


&nbsp;
&nbsp;


[![Join The Elixir Army](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv2q172ztuekdtw82vo9.png)](https://elixirprogrammer.com)
Multi Language App in Professional Way with Laravel !
Tags: php, laravel, slug
Published: 2022-02-04 01:16:19

Aloha There ! 
In This article we talk about make app with Mutli language. 

1. Using mcamara laravel localization package to make direction in laravel app . 
2. Using Laravel Spatie Transtable To make dynamic json Columns
3. Using Laravel Sptaie Sluggable To Create Slug 
4. Describe how we can make Multi slug with lang

Point 2,3,4 in the next level of this article
---

**When Create A new project laravel as we know 
**
`composer create-project --prefer-dist laravel/laravel MultiLangApp`

Then 

We begin with mcamara laravel-localization package 
this package contain many features Some of it 

- Detect language from browser
- Smart redirects (Save locale in session/cookie)
- Smart routing (Define your routes only once, no matter how many languages you use)
- Translatable Routes
- Supports caching & testing
- Option to hide default locale in url

[](https://github.com/mcamara/laravel-localization)
Install the package via composer: 
`composer require mcamara/laravel-localization`
**In order to edit the default configuration you may execute:
**
`php artisan vendor:publish --provider="Mcamara\LaravelLocalization\LaravelLocalizationServiceProvider"`

**You may register the package middleware in the app/Http/Kernel.php file:
**
```
 
<?php namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel {
    /**
    * The application's route middleware.
    *
    * @var array
    */
    protected $routeMiddleware = [
        /**** OTHER MIDDLEWARE ****/
        'localize'                => \Mcamara\LaravelLocalization\Middleware\LaravelLocalizationRoutes::class,
        'localizationRedirect'    => \Mcamara\LaravelLocalization\Middleware\LaravelLocalizationRedirectFilter::class,
        'localeSessionRedirect'   => \Mcamara\LaravelLocalization\Middleware\LocaleSessionRedirect::class,
        'localeCookieRedirect'    => \Mcamara\LaravelLocalization\Middleware\LocaleCookieRedirect::class,
        'localeViewPath'          => \Mcamara\LaravelLocalization\Middleware\LaravelLocalizationViewPath::class
    ];
}

```

**Add the following to your routes file:
**

```
// routes/web.php

Route::group(['prefix' => LaravelLocalization::setLocale()], function()
{
    Route::get('/', function () {
        return view('welcome');
    });
});
```
in config in **laravelLocalization.php** file  we can uncomment for the language we need to use in the application .

we can make test now add translate to words then we can the translation and redirect make perfectly with this package 

you can see the code in this repo 
https://github.com/salmazz/Multi-Langague-Example-Laravel-
and continue in the next article 
how can we make dynamic columns with multi lang for slug.
bye bye !
How to fix defaultValue error while working with textarea in React
Tags: javascript, react, node, webdev
Published: 2022-02-04 01:15:30

## Introduction

In HTML, if you want a textbox with some initial text you wrap text inside the textarea tag like this `<textarea> Hello World </textarea>`, this is fully editable, but if you try this in react you will get an error. Trying to use the `defaultValue` prop in react won't work either. if you add a value prop to the textarea the value of the text will be displayed but then it won't be editable, this is because the `value` prop is immutable.

## Solution
Passing a `value` prop to textarea like this `<textarea value={'Hello World'}> </textarea>`, will display the text Hello World on the textbox, but it won't be editable to make it editable we need to pass the a state to the `value` prop and update that state with the `onChange` prop like the code below.

```js
import { useState } from 'react';

function TextBox () {
    
    const [text, setText] = useState('Hello World');

   return (
           <textarea 
             value={text} 
             onChange={(e) => setText(e.target.value) }>
          </textarea>
         );

}

export default TextBox;

```  

Inside the TextBox component, I initialize the `text` state with 'Hello World' and passed it to the textarea as a value prop, this will be the initial text displayed in the text area. `onChange={(e) => setText(e.target.value) }` this line of code updates the `text` state, with the new value.

You can learn more about handling form in react [here](https://reactjs.org/docs/forms.html#controlled-components)
Implementa Auth0 Tokens como un campeón
Tags: auth0, token, security, identity
Published: 2022-02-03 19:30:23

En los últimos años he venido trabajando con el intercambio de tokens entre servicios, 3-parties, encontrando beneficios y puntos de mejora en como implementar este intercambio.

Si usted es un fanátic@ a las buenas prácticas, les quiero compartir ciertas recomendaciones al usar tokens usando Auth0:

**Considerar métodos de verificación secundaria**: puede ser necesario agregar un sistema de verificación de token secundario que garantice que los tokens se generaron desde su servidor para cumplir con sus requisitos.

**Entre más secreto mejor**: la clave de firma debe tratarse como cualquier otra credencial y revelarse solo a los servicios que la necesitan. No exponga los token a cualquiera, recuerde que los token dan permisos y autorizaciones.

**Agregue justo lo necesario en los payloads**: los tokens se firman para proteger contra la manipulación y se decodifican fácilmente. Agregue la cantidad mínima de claims al payload para obtener el mejor rendimiento y seguridad.

**Cada token debe tener caducidad**: técnicamente, una vez que se firma un token, es válido para siempre, a menos que se cambie la clave de firma o se establezca explícitamente el vencimiento. Esto podría plantear problemas potenciales, así que tenga una estrategia para caducar y/o revocar tokens.

**Cachee y reutilice**: reduzca los requests de ida y vuelta innecesarios que amplían el contexto de ataque de su aplicación y optimice los límites de token del plan (cuando corresponda) almacenando tokens de acceso obtenidos del servidor de autorización. En lugar de solicitar un token nuevo, use el token almacenado durante futuras llamadas hasta que caduque. La forma en que almacene tokens dependerá de las características de su aplicación: las soluciones típicas incluyen bases de datos (para aplicaciones que necesitan realizar llamadas API independientemente de la presencia de una sesión) y sesiones HTTP (para aplicaciones que tienen una ventana de actividad limitada a una sesión interactiva ).


**Siempre con HTTPS**: no envíes tokens a través de conexiones que no sean HTTPS, ya que esas solicitudes pueden ser interceptadas y los tokens pueden verse comprometidos.

Espero que estos consejos les sea de provecho, la configuración e identidad de nuestros tokens son aspectos cruciales en la seguridad de nuestras aplicaciones. Un mal uso de ellos, podría impactar negativamente el negocio.
February 3rd, 2022: What did you learn this week?
Tags: weeklyretro, discuss, weeklylearn
Published: 2022-02-04 00:54:53

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Image of the brain](https://media.giphy.com/media/ojmB7lOn3VUU8/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{%link https://dev.to/devteam/what-was-your-win-this-week-1oih %}

<center>

![Little kid making a fist as if to say "Yes!"](https://media.giphy.com/media/6brH8dM3zeMyA/giphy.gif)
</center>
Day 523 : Heavy
Tags: hiphop, code, coding, lifelongdev
Published: 2022-02-04 00:28:27

_liner notes_:
- Professional : Soooo many meetings today. haha. Afterwards, I just worked on updating the docs. I have a demo application where I can test stuff out on. Had some questions, so I asked the team and will probably hear something back tomorrow. 

- Personal : Last night, I got the admin part of my new side project up and running. I was able to add scaffold a project and hook up the database and set up authentication. After that, I watched an episode of "Demon Slayer" and went to bed.

![Looking up at the star-field night sky above Silverthorne, CO, United States](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfxq3pir6xfpht23edty.jpg)

Going to set up some functions to get and create some data that will be needed for my side project. Then I want to have the data show up in the admin so I can save it to the database. Once I get that done, I can start working on showing the data on the front-end. After working on the database stuff, I want to watch an episode of "Demon Slayer" and go to bed. I added a brace to the stand I bought for the projector because it is a little too heavy for the stand it some times falls down.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube cQl_eV3pP3E %}
The Difference between Static and Class methods in Python.
Tags: python, oop, beginners, tutorial
Published: 2022-02-04 00:25:45

Object-oriented programming is a programming paragdigm that relies on the concept of objects. 
These objects can have properties and their methods.

They are three types of methods in python:

- Instance method
- Class method
- Static method

Instance method is the most comman type of method used in python class. To call an instance method, you need to create an object of the class and with the help of that object you can access instance method.

On other hand, both class method and static method can be accessed directly by using class name i.e without creating object of class. Though you can also access these methods using object of a class.

Class and Static methods have some basic differences. Let's have a look over the difference between class and static method.


## Class method 

1. A class method is a method which bounds to class rather than object or instance of the that class.

2. Class methods can be created using @classmethod
decorator.

3. It takes first parameter as class or any variable name which points to the class itself.

4. It can access and modify the state of the class, that will be applicable across overall classs and its instances.


```python
class classExample:
    @classmethod
    def class_method(css, arg1, arg2, ...):
    # methody body
```


EXAMPLE:

```python
class classExample:
#create variable
    x = 2
    @classmethod
    def modify(cls):
    cls.X = 5
    print(cls.x)
    
print(classExample.x) #2
obj = classExample()
print(obj.x) #2
classExample.modify() #5
print(classExample.x) #5

print(obj.x) #5
obj.modify() #5


```

As you can see, in the example an initial value of x is 2.

But when we modify the value x using class method i.e
modify(), its value changes to 5, which indicates that a classs mehtod can access and modify the state of class.


## Static method
1. Static method is similar to class method, which also bounds to a class rather than object of that class.

2. Static method can be created using @static method decorator.

3. It doesn't take any specific first parameter like as in class methods.

4. It cant access and modify the state of the class

```python
class staticExample:
    #create variable
    x = 2
    @staticmethod
    def modify():
        x = 5
        print(x)
staticExample.modify() 
print(staticExample.x)
obj = staticExample()

print(obj.x)
obj.modify
```


_Sam Sonter_
Why is my "hello world" disappearing after adding the connection code from MongoDB Atlas in my REACT app?
Tags: react, mongodb, mongoose
Published: 2022-02-03 23:45:20

Why is my "hello world" disappearing after adding the connection code from MongoDB Atlas?

The code is fine and showing "Hello world!" on my 3000 port, and as soon as I add the mongoose.connect function, then the port 3000 goes blank and the "Hello world!" disappear.   What could be happening? 

Yes, I did install mongoose on package.json


`import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import reportWebVitals from "./reportWebVitals";

const mongoose = require("mongoose");


mongoose.connect(
  "mongodb+srv://<user>:<password>@cluster0.gcyyo.mongodb.net/test?retryWrites=true&w=majority"
);

const partSchema = new mongoose.Schema({
  partN: "string",
  description: "string",
});

const Part = mongoose.model("Part", partSchema);

ReactDOM.render(
  <React.StrictMode>
    <h1>Hello world! </h1>
  </React.StrictMode>,
  document.getElementById("root")
);`
Software-as-a-service - 10 Ways Developers Make Money from Home - E05
Tags: career, programming, webdev, javascript
Published: 2022-02-03 23:52:47

Make money by charging users for using your web application.

A SaaS is an application or website that allows people to sign up and pay for the service.

Analyze the market and explore people's needs and urges for a repeating process and build software by automatizing that process.

Focus on the demand. Try to understand customers and bring them real value.

Look at how your competitors are building their products. How big is this market? Is it growing? Are there enough potential customers so that you can build a successful business on top of it?

In this video series, I share the best ways and how to increase your money income as a web developer while working from home.

Check the video here - [click me](https://youtu.be/lnwifUqJ7HU)

👉 Subscribe to Dan Later - [click here](https://www.youtube.com/channel/UCP8cUZGnvJYjxUZk11Gr3fw?sub_confirmation=1)
What dependencies do I need to work with REACT?
Tags: react
Published: 2022-02-03 23:51:31

For example, I need to work with MongoDB, so I did install Mongoose.

Do I need nodemon to work with REACT?

This is a list of dependencies that I have on a test run

`{
  "name": "table2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.0",
    "express": "^4.17.2",
    "mongoose": "^6.2.0",
    "nodemon": "^2.0.15",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "^5.0.0",
    "save-dev": "^0.0.1-security",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}`
Fuzzy Search Terminal History
Tags: terminal
Published: 2022-02-03 22:20:43

I've been using `ctrl + r` to search through the terminal command history all these years. Today at work, I came across [fzf](https://github.com/junegunn/fzf), a command-line Fuzzy Finder, and it's fantastic. You still type `ctrl + r`, but it provides a friendly UI to navigate the command history. 

![Terminal Fuzzy Finder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knhzcj6gnwvij8d5tw6g.png)
 

If you are on a Mac, install it using Homebrew. For other platforms, please check out the [install](https://github.com/junegunn/fzf#installation) instructions. 

```bash
brew install fzf

# To install useful key bindings and fuzzy completion:
$(brew --prefix)/opt/fzf/install
```

Then close and reopen your terminal. Then type `ctrl + r` to search your terminal command history. 

Hope that helps.
How to fix the Error in data(): "TypeError: Cannot read properties of null (reading 'config')", Vue2 composition API warning
Tags: vue, javascript, compositionapi
Published: 2022-02-03 22:08:32

If you've been using the @vue/composition-api plugin to add composable scripts to develop your Vue2 packages, I'm sure you've ran into this warning when using your library.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhg3uk7shon9omts5xcf.png)
 

## So.. What's the deal?

Well, chances are, your libraries' `package.json` contains the @vue/composition-api.

```
 "dependencies": {
    "@vue/composition-api": "^1.4.5"
  },
```

If the consuming application also contains this dependency, you will have run into this error as Vue can't decide what the `@vue/composition-api` is since there's 2 different versions installed.

## So what's the fix?

There's multiple ways to fix this. 

If you are bundling your package with `rollup`, in your `rollup.config.js` or `rollup.config.ts`, add it as an `external` so that rollup doesn't bundle it, e.g.:

```
{
  input: 'src/yourinputfile.js',
  external: ['vue', '@vue/composition-api'],
  plugins [...]
}
```

**Another option is to add @vue/composition-api as a dev dependency in your library**

```
"devDependencies": {
  "@vue/composition-api": "^1.4.5"
},
"peerDependencies": {
  "@vue/composition-api": "^1.4.5" // if you have specific features from newer versions, you can use a peer dependency to tell the consuming app to use this version
}
```

**That's it!**

For more such insights, checkout my blog website [https://trayvonnorthern.com](https://trayvonnorthern.com/blog)