teleren/devto huggingface dataset:
How to Use VisionLib and echoAR for Cloud-Connected 3D Model Tracking
Tags: tutorial, programming, showdev, augmentedreality
Published: 2021-03-15 15:39:42

Here’s an easy demo that lets you track 3D Models with Unity, VisionLib, and echoAR. The full demo can also be found on echoAR’s  [GitHub](https://github.com/echoARxyz/Unity-VisionLib-echoAR-demo-Model-Tracking).

![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615822494867/MGp8E78ju.png)

# Register

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

# Setup

* Download and install the VisionLib SDK in a new Unity project.
* Follow the instructions on our [documentation page](https://docs.echoar.xyz/unity/adding-ar-capabilities) to [set your API key](https://docs.echoar.xyz/unity/adding-ar-capabilities#3-set-you-api-key).
* Add the mini car model to the [console](https://docs.echoar.xyz/quickstart/add-a-3d-model) from the [Models](https://github.com/echoARxyz/Unity-ARFoundation-echoAR-demo-Living-Room-TV/tree/master/assets) folder.
* Overwrite the existing *echoAR/CustomBehavior.cs* script with the new [CustomBehavior](https://github.com/echoARxyz/Unity-ARFoundation-echoAR-demo-Living-Room-TV/blob/master/CustomBehavior.cs) file.
* Set up a Model Tracking scene using [VisionLib](https://visionlib.com/documentation/vl_unity_s_d_k_model_tracker_tutorial/)’s instructions, using *carEcho.vl and ModelTrackingScript.cs* in the Scripts folder instead of TutorialModelTracker.vl and Tutorial.cs.
* Tag the VLCamera Object as MainCamera in your scene.
* Print out and build VisionLib’s car target to test the model tracking.

![2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615822505716/hHSFui7c8.png)

# Run

* [Build and run the AR application](https://docs.echoar.xyz/unity/adding-ar-capabilities#4-build-and-run-the-ar-application).

![3.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1615822540071/JtILqS4Ea.gif)

# Learn more

Refer to our [documentation](https://docs.echoar.xyz/unity/) to learn more about how to use Unity, AR Foundation, and echoAR.

# Support

Feel free to reach out at support@echoAR.xyz or join our [support channel on Slack](https://join.slack.com/t/echoar/shared_invite/enQtNTg4NjI5NjM3OTc1LWU1M2M2MTNlNTM3NGY1YTUxYmY3ZDNjNTc3YjA5M2QyNGZiOTgzMjVmZWZmZmFjNGJjYTcxZjhhNzk3YjNhNjE).

-----

> echoAR (http://www.echoAR.xyz; Techstars ’19) is a cloud platform for augmented reality (AR) and virtual reality (VR) that provides tools and server-side infrastructure to help developers & companies quickly build and deploy AR/VR apps and experiences.

![4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1615822558110/h7Jh4OE7b.png)
Cheatsheet on converting Bootstrap v4 project to Bootstrap v5
Tags: webdev, bootstrap, css, cheatsheet
Published: 2021-03-15 15:35:15

Hi guys, I've been working on  [Pinegrow's Bootstrap blocks and templates](https://pinegrow.com/docs/bootstrap-blocks/bootstrap-4-blocks/), currently to migrate from Bootstrap 4 to Bootstrap 5. And through the process, I guess I went through almost all of the classes and changes. Therefore, I thought it would be helpful to share those changes. If you are thinking how to migrate from Bootstrap v4 to v5, this list can be handy; so you can just **search and replace** them.

| Utilities        | Change |
| ---------------- | ----------- |
| Paddings | pl > ps <br> pr > pe |
| Margins | ml > ms <br> mr > me |
| Gutters | no-gutters > g-0 |
| Font Styles | font-weight- > fw- <br> font-style- > fst- |
| Alignments | text-left > text-start <br> text-right > text-end |
| Ratio/Embed | embed-responsive > ratio <br> embed-responsive-16by9 > ratio-16x9 |
| Badges | badge-primary > bg-primary <br> badge-pill > rounded-pill |
| Form | form-group > mb-3 <br> form-row > row |
| Border | border-left > border-start <br> border-right > border-end |
| Border Radius | rounded-lg & rounded-sm > rounded-1, rounded-2 & rounded-3  |
| Button Block | btn-block > d-block w-100 (as alternative) |
| Visually Hidden | sr-only > visually-hidden |

### JS data name changes for menu triggers and dropdown

| Changes |
| --- |
| data- > data-bs- |
| data-ride > data-bs-ride |
| data-target > data-bs-target |
| data-slide > data-bs-slide |
| data-togglet > data-bs-toggle |

### Few other pointers

- All class names with **left/right** and **l/r** has been changed to **start/end** and **s/e**
- Dropped classes - **.media**, **.from-group**, **.from-row**, **.from-inline**
- Form labels now require the **.form-label** class, which has margin bottom applied
- **Negative margins** are disabled in Bootstrap 5
- Columns doesn’t have **position: relative** property
- Form row layout changed
- Input group layout changed
- Navbar link **active** class is set on the link itself not on the parent
- If you put a **column** outside a **row**, always set **col-* class** for all the viewport that you need to cover. Mostly should be **col-12** for the smallest viewport.

Please check the rest of the article which was first posted on https://blog.abirana.com/how-to-migrate-convert-bootstra-4-to-bootstrap-5
"To be, or not to be"
Published: 2021-03-15 15:27:41


Hello everyone, We have a security question.
We are developing a finance application that helps users to handle their expenses by storing those expenses in the app and getting monthly or annually reports. The user's data are saved in the cloud. Our users would like their data to be private, mostly because of cultural reasons.

Now We want to implement a feature that users can store their expenses and can attach images of their bank receipts which will then end up in the cloud.

We have two options for attaching:

1. Uploading the images and serving each image via a url. We'll serve the image on a url and will return the url. Then application can show the image to users with an in-app browser. However, this method is not secure, because we can not implement an authentication strategy on the serving static file. An attacker can generate thousands of random urls and might be able to steal some of those images.

2. Uploading the images and providing the users with image files which they can download anytime they want. This option will implement a JWT auth strategy that everyone can download their own images.

You guys, can help me to decide which one is better for our brand to help us secure the trust of our users?

Hug the social distancing and be safe.
Which encryption control to choose for your app protection, by Anastasiia Voitova
Tags: security, cryptography, encryption, privacy
Published: 2021-03-15 15:04:12

>*ALE, disk/FS, TDE/DB, TLS or E2EE. Ohoo, so many things to master! 
Can a human being appdev really understand it?* 
 
Well, yes. 💡 You will arrive there in just 2 minutes with [Anastasiia Voitova] (https://www.linkedin.com/in/anastasiiavoitova/) aka [@vixentael] (https://twitter.com/vixentael), Head of customer solutions at [Cossack Labs] (https://www.cossacklabs.com/). 

Watch this video to cut through complexity and find out how these controls address various threat models.
 
---
Send your likes to [@vixentael] (https://twitter.com/vixentael) and [@9gunpi] (https://twitter.com/9gunpi), and follow [@Cossack Labs] (https://twitter.com/cossacklabs) on Twitter.👋
Watch the full video on [YouTube] (https://www.youtube.com/watch?v=CqsrA4eeGSs&ab_channel=CossackLabs).
Dive deep into ALE [here](https://www.infoq.com/articles/ale-software-architects/).🐬
Get through the [slides here](https://speakerdeck.com/vixentael/e2ee-equals-security-equals-privacy).🐬
{% speakerdeck ba7464de4e2e46aa9aff6154ee8b1a89 %}
I built an open-source trading bot framework
Tags: java, trading, bot, crypto
Published: 2021-03-15 14:58:52

Hi everyone, while learning trading, I built an open-source trading bot framework available as a Sprint Boot Starter, you can know more about it here : [https://github.com/cassandre-tech/cassandre-trading-bot](https://github.com/cassandre-tech/cassandre-trading-bot).

I spent lots of time on documentation & unit tests so you can learn faster than me :)
Day 76 Of 100DaysOfCode: Python BeautifulSoup To Scrape DataCamp Tutorials & Analyze
Tags: womenintech, codenewbie, 100daysofcode, beginners
Published: 2021-03-15 14:51:35

Hello everyone after taking one day of leave returning  to  #100daysofcode journey. I hope all of you are doing great. And today is my 76 days of #100daysofcoe and #python learning journey. Like usual day today also spend time learned from the datacamp.  I regularly took the courses from datacamp because I have a limited amount of time for accessing courses. I worked some time on my first project( news scrapping).

Due to physical problems, I purchased less time than other days in learning to code. I learned more about the concept of BeautifulShoup using python BeautifulSoup to scrape dataCamp tutorials & analyze.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 76 Of <a href="https://twitter.com/hashtag/100DaysOfcode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfcode</a> and <a href="https://twitter.com/hashtag/python?src=hash&amp;ref_src=twsrc%5Etfw">#python</a> <br>Spend Time In Python BeautifulSoup to scrape DataCamp Tutorials &amp; Analyze<a href="https://twitter.com/hashtag/WomenWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#WomenWhoCode</a> <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://twitter.com/hashtag/beginner?src=hash&amp;ref_src=twsrc%5Etfw">#beginner</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://t.co/wfKP5i2M5Y">pic.twitter.com/wfKP5i2M5Y</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1371469438629806082?ref_src=twsrc%5Etfw">March 15, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
🛠 What is .NET? An Overview of the Platform
Tags: programming, dotnet
Published: 2021-03-15 14:49:54

Microsoft's ambition to provide developers with one platform to solve any type of problem has been fulfilled by .NET. For a couple of decades already, the .NET platform has been powering up web, desktop, and mobile applications in both the startup and enterprise scenes.

Without any doubt, .NET plays a central role in the software development industry. .NET popularity in the developer community is a fact. You can measure it through the number of open source projects around the world and the presence of C# among the five most popular programming languages. Its popularity is going to grow even more, especially after the latest release (.NET 5), which revolutionizes the industry by pioneering the concept of universal software development.

To understand the power of .NET, let's explore some of its technical foundations.

[Read more...](https://auth0.com/blog/what-is-dotnet-platform-overview/?utm_source=content_synd&utm_medium=sc&utm_campaign=dotnet)
Nuxt Tailwind Breakpoint Helper
Tags: nuxt, tailwindcss, package, dx
Published: 2021-03-15 14:42:25

In *Dasher* we do a lot of web front-end. We use **Vue, Nuxt and Tailwind CSS** for it. We really love fast prototyping and quality outputs. We wanted to make our development experience even more enjoyable and effective ⚡.

Further, I will write why we created our small and really simple module [**Nuxt Tailwind breakpoint helper**](https://www.npmjs.com/package/@dashers/nuxt-tailwind-breakpoint-helper).

# Once upon a time

Our front-end developer, while testing responsive Vue component in a browser, said that he would like to see current screen size, which is defined in Tailwind config file.

As you know, when you change screen size in an inspect mode in a browser you see real viewport size in pixels. But when you write responsive styles in Tailwind it looks something like this:

```html
<div class="max-w-full sm:max-w-md md:max-w-2xl">
    <p>paragraph...</p>
</div>
```
Here you see `sm` (min-width: 640px) and `md` (min-width: 768px) screen sizes, which are defaults in [Tailwind config](https://tailwindcss.com/docs/breakpoints). But you can re-write them or extend to have your own values such as `super-extra-big-screen-size` and it could have value `min-width: 4000px` .

Lot of us have some issues with a memory (now I mean human memory 🧠). There are times when we can't quite remember if `md` screen size starts from 768px or some other value, **but we want to see which Tailwind screen size is applied right now.** Also, we don't want to open inspect mode everytime.

# How we helped ourselves

<img src="https://gitlab.com/dashers/public/breakpoint-helper/-/raw/master/public/images/example2.gif?v1" alt="NTBH gif example" width="1200" height="800" />

We created our own NuxtJS module, which embeds a small "widget" to the left bottom corner of a browser's viewport and shows current Tailwind screen size (sm, md,...) and actual viewport height and width in pixels. Module is injected only in development mode. You can also style it as you need using module options in `nuxt.config.js`.

Now, we can debug and tune up our components even faster and have an actual Tailwind screen size everytime!

# In the end

We would appreciate any comments, feedback or contribution to the module if you want to use it, but missing something ✌.

Thanks for reading! The Dasher Team ⚡

- 🔗 [NPM package of the module](https://www.npmjs.com/package/@dashers/nuxt-tailwind-breakpoint-helper)
- 🔗 [Gitlab Repo of the module](https://gitlab.com/dashers/public/breakpoint-helper)
- 🔗 [Dasher website](https://www.dasher.cz/)
Identify Stocks on Reddit with SpaCy (NER in Python)
Tags: python, machinelearning, datascience, tutorial
Published: 2021-03-15 14:42:10

{% youtube TCZgXFPNnbc %}

We will learn how to process unstructured text data from Reddit and extract organization names so that any further analysis is automatically classified and results assigned to the correct stocks.

Organizations are mentioned in each subreddit in a variety of formats. Typically we will find two formats:

- Organization name, eg Tesla/Tesla Motors
- Ticker symbol, eg TSLA, tsla, or $TSLA

We also need to be able to differentiate between tickers and other abbreviations/slang -some of these are unclear like AI (AI can mean both artificial intelligence and refer to the ticker symbol for C3.ai).

So, we need a reasonable competent NER process to accurately classify our data.
Python `property`
Tags: python
Published: 2021-03-15 14:41:21

Welp, I discovered descriptors in python. I was trying to implement something similar to `@property`, which I thought of as some weird decorator, which turns a function into some sort of a function that is called without the `()` brackets.
Of course an automatically called function is something impossible, but one could inject something into `cls.__getattr__` perhaps? Turns out this is also impossible (afaik) - to get to the class one has to either hook into where the function is defined; or have something called to reach `self` and then hook into `__getattr__`, but we don't have anything being called...

After understanding that I got no clue how to create `property` on my own, I googled for that, and now I got this:

```python
class prop:
    def __init__(self, fget):
        self.fget = fget
    def __get__(self, obj, objtype=None):
        return self.fget(obj)

class A:
    @prop
    def data(self):
        return 32
```

If I produce an object with a method `__get__(self, obj, objtype=None)` inside another class, then this object is magically called without any brackets. Yeap, descriptors.

Btw, here is a link for more info: https://docs.python.org/3/howto/descriptor.html#properties

As for what I wanted to do, I now got this:
```python
def lazy(load='scan'):
    class desc:
        def __init__(self, prop):
            self.attr = f'_{prop.__name__}'
        def __get__(self, obj, objtype = None):
            if not hasattr(obj, self.attr) or getattr(obj, self.attr) == None:
                getattr(obj, load)()
            return getattr(obj, self.attr)
    return desc

class A:
    def __init__(self):
        pass
    @lazy()
    def data(): pass
    @lazy()
    def other(): pass
    def scan(self):
        self._data = 42
        self._other = 34
```

Now I can have multiple properties lazily loaded when they are needed. Yeaay.
Hasura 2.0 Video Series
Tags: hasuracloud
Published: 2021-03-16 08:32:51

---
title: Hasura 2.0 Video Series
published: true
date: 2021-03-15 14:38:42 UTC
tags: HasuraCloud
canonical_url: https://hasura.io/blog/hasura-2-0-features-video-series/
---

 ![Hasura 2.0 Video Series](https://hasura.io/blog/content/images/2021/03/hasura_2.0_video_series.png)

Today we are beginning a new series of videos covering Hasura 2.0, the new features, some updated features, and long standing features that were often overlooked. Over the coming weeks, we'll be releasing a series of videos with two distinct focuses. Each feature will be highlighted in a 1 minute snapshot for quickly learning and sharing the new features, as well as a complementary longer-form version with more narrative and details about the individual features.

To begin our series, we've created a couple of quick snapshots and a long form take on creating a new project, setting up some tables and adding relations. This first video may be review for anyone familiar with the platform, but stay tuned for a fast-paced release cycle covering the more advanced features in the videos to come. Let us know what you think and do follow us on all the platforms to stay up to date with all the new releases!

## Watch the Overview

{% youtube -Ni30YN58gE %}
Atomize : Simple Design System for React
Tags: react, webdev, javascript, design
Published: 2021-03-15 14:27:30

## Concept

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jb99b2cv0ey1gxujwox.png)

Atomize React is a UI framework that helps developers collaborate with designers and build consistent user interfaces effortlessly.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7d7qv80qohkllvqkmdl.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/liucqb0osnj1daeu8by3.png)

## Features

* UI design system for web apps.
* Elegant and beautiful React components
* Environment Support
* Modern browsers and Internet Explorer 9+
* Server-side Rendering

## Install

```bash
npm install atomize react-transition-group
yarn add atomize react-transition-group
```


## Usage

```js
import { Button } from "atomize";
ReactDOM.render(<Button />, mountNode);
```

## Link

* [https://atomizecode.com/](https://atomizecode.com/)

* [https://github.com/proksh/atomize](https://github.com/proksh/atomize)
Build telegram bot without code and receive notifications
Tags: social, chat, bot, automation
Published: 2021-03-15 14:22:54

You must have used telegram to chat with your friends, family or colleagues. But there is more to this awesome app. You can build your own ROBOTS with telegram. For example, you can keep yourself informed about upcoming movie launch, the blockbuster album release, your favorite show's next episode release alert, fetch summary of your workouts each night before bed or get an alert about your next phone's price drop. All of it at one place — inside your telegram app.

So.. why wait — let's build one!

Bonus Point:— _Telegram bots are faster, easier, simpler than slack bots. I personally use telegram bots to monitor my website’s downtime._

### Step 1: Get Bot Token

![image](https://nocodeapi.com/static/3a61f77b01d064c746c44c0322678ae2/91e7e/botfather.png)

- Search **@botfather** on telegram.
- Click on **addthis** at the bottom of telegram channel.
- Send **/newbot** command to make a new bot.
- Give this bot a name.
- Give this bot a username.

The bot will reply to you with a `Bot Token Key`. Save it because you will need it in Step 3.

### Step 2: Start your Bot

![image](https://nocodeapi.com/static/ad274e687c0136f6627dea5124edea6f/487bb/botfathertoken.png)

- Find your bot window in @botfather token message. It looks like this:— t.me/your_username. And tap on it.
- It will take you to your bot chat window.
- Click on /start at the bottom of your bot chat window.

### Step 3 : Make your app on NoCodeAPI

![image](https://nocodeapi.com/static/0e381c9c772b7a94f7beb00066fafba5/321ea/telegram-dashboard.png)

- Click on **"Make Telegram Webhook API"**
- Give your webhook a **"name"**
- Enter the **"bot access token"**, @botfather gave you in telegram
- Click **"Refresh DropDown"**
- Select your **"Chat ID"**
- Click **"Create"**

### Step 4: Test if it is working

![image](https://nocodeapi.com/static/b278ae91c274db836ba2cea09fdf9ae6/321ea/telegram-swagger.png)

- Your webhook is listed in your nocodeapi dashboard. 
- Click on **"open playground"**
- You can see the URLs to send either a text message or an object message to your bot
- Send a test message and it should show up in your telegram app.

### Conclusion 😀

If it worked. It is good news. But if you are facing any issue — contact us [here](https://t.me/NoCodeAPI) on telegram. We will get you boarded. 

I am using telegram webhooks for:—

* Netlify Build Notification
* New Meeting booked on Calendly
* New user on Stripe
* Website Down/UP with Uptime Robot

Most services support hooks. You can use telegram app to receive notifications on your cell phone.

I hope it helped you in building your API. If you found it helpful, give us a follow on our Twitter channel at [@nocodeapi](https://twitter.com/nocodeapi). Thank you for reading. 👋
🦋Flutter - Access global non-changing variables
Tags: flutter, dart, bestpractices, programming
Published: 2021-03-15 14:12:15

**In Flutter, you often have non-changing values that are used across the app** (for example the app name, version, etc.) **Wouldn't it be nice for you to have globally managed access for these?**
Of course and I'll show you how to do it here:

##The basic idea
For the simple administration of global values it is sufficient to have a static access to a class, which provides the needed values. For this it is recommended to use [the Singleton pattern](https://dev.to/lucianojung/flutter-singelton-pattern-1a38) in this class.

##The solution
To solve this problem we generate a class (I call it Globalvariables for this example). In this we implement the singleton pattern as shown below.

``` dart
class GlobalVariables{

  static final GlobalVariables _instance = GlobalVariables._internal();

  factory GlobalVariables() => _instance;

  GlobalVariables._internal();

  [...]

}
```

Then we create the getter functions without declaring variables.
``` dart
class GlobalVariables{
  
  [...]

  String get name => 'My Flutter App';
  String get version => '1.0.0';
  int get versionCode => 100;
}
```

We can now access these Variables with the following line of code:
``` dart
GlobalVariables().name // => My Flutter App
```

##Comments
Instead of using the Singleton pattern, it is of course also possible, but less convenient, to define static variables or functions with the addition 'static':
``` dart
static String get name => 'My Flutter App';
```

If you have any comments or questions, **feel free to leave a comment**.

Feel free to follow my [profile](https://dev.to/lucianojung) if you want to learn more practical tips about Flutter.
Also feel free to visit my [Github profile](https://github.com/login?return_to=%2Flucianojung) to learn more about my current OpenSource projects.