teleren/devto huggingface dataset:
Add AR and 3D Models to any Site in Minutes
Tags: tutorial, codenewbie, react, html
Published: 2020-10-09 07:09:54

Adding a 3D model is super easy and can be added to any project in just a few minutes. This is provided that you have a 3D model. In addition, you can also utilize AR on mobile devices with just a few extra steps. Below I'll explain how to get and running in no time.

One awesome element built by Google is model viewer which can be found at https://modelviewer.dev. It is built upon Three.js and allows you to easily add 3D WebGL models to any page. Though the instructions are on the site.

I'll offer a brief rundown of my experience with it and hopefully give you some pointers to not get stuck where I did.

It can either be imported with a CDN in your header with:

```html
<script
  type="module"
  src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"
></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
```

Or it can be done by using an NPM package by:

```bash
npm i @google/model-viewer
```

You can then import it via:

```js
import '@google/model-viewer';
```

Google recommends using the CDN as the project is still a work in progress and new features are being added quite often. It ensures you have the latest version always running.

One issue that I ran into with imports is that when using a SSR framework like Next.js you might have to use dynamic imports for the model viewer components. Make sure to set them to SSR false for these type of frameworks.

Once you have this all imported you can simply add a `model-viewer` tag and be on your way.

```html
  <model-viewer
    src={../Link/To/Model.gltf}
    ios-src={../Link/To/Model.usdz}
    alt='model name'
    ar
    loading='lazy'
    camera-controls
    poster={../Link/To/Image.png}
    autoplay>
  </model-viewer>
```

In this case this would be basic animated model that starts the animation automatically.  You can go through the docs on https://modelviewer.dev, for a more detailed explanation.

You can use either local models, or ones hosted on something like S3.  One problem that I ran into was using files on Firebase Storage.  They sometimes have CORS problems, and it is an open issue on GitHub.

You will need at GLTF or GLB model in order for this to work.  If you have another model type, there are converters that can be found online to get the right model type working.

This will also allow you to use AR on Android as it will open up in Android's Scene Viewer.  If you want AR on iOS you will also need a second model type called USDZ in order to use AR Quick Look.

You will also need to find a converter for using this type. Apple does have a program that is free to download and will do this for you if you have an iOS developer account.  It is called Reality Converter.

If you are not using AR, you can disregard the `ar` and `ios-src` attributes in the code above.

It is really that easy to get it up and running.  The hard part is making a cool model to go into your site.  That part I will leave up to you.
Top Ten Reasons Why Your Business Needs Content Management System (CMS)
Tags: discuss, wordpress, magento, webdev
Published: 2020-10-09 07:09:00

Digitization is a norm for modern businesses. Globally, many entrepreneurs spend a lot of money to leverage the benefits of digitization. CMS or Content Management System is the first step toward making your business processes digitized and therefore, every enterprise under the sun needs it. Apart from managing content and streamlining business processes, CMS development services can help your business in many ways. All you need to consult a reputed CMS development company

Here we give the top ten benefits of CMS for your business from the perspective of a CMS services provider. After selecting the most suitable CMS platform for your business, you can hire CMS developers to get these business benefits. Let’s start with an efficiency boost.

Top Ten Business Benefits of Content Management System (CMS)

Efficiency

The CMS is designed to publish and edit the content with ease. You can readily modify and manage the content of your enterprise because the CMS does not require any specialized coding knowledge. You can hire WordPress developers to build a portal once, and then you can update it anytime. It makes the entire process simple and cost-saving. It results in higher efficiency and the maximum utilization of content management.
Friday Blast #91
Tags: fridayblast, links, post
Published: 2020-10-13 07:50:02

---
title: Friday Blast #91
published: true
date: 2020-10-09 07:00:00 UTC
tags: fridayblast,links,post
canonical_url: https://horia141.com/friday-blast-91.html
series: "Friday Blast"
---

[OAuth 2.0 and OpenId Connect in plain english (2018) #video](https://www.youtube.com/watch?v=996OiexHze0&feature=youtu.be) - A gentle guide to these protocols for managing authorization / identity and its delegation. It’s one of those things every developer building web applications should know about, but there’s a dearth of good material out there.

[Modern banking in 1500 microservices (2020) #video](https://www.youtube.com/watch?v=t7iVCIYQbgk&feature=youtu.be) - An overview of Monzo’s architecture and a little bit of their tech stack.

[Did you accidentally build a database? (2016) #video](https://www.youtube.com/watch?v=Bz2EXg0Fy98&feature=youtu.be) - one of the founders of CochroachDB talks about various large-scale systems and how they’re essentially poorly implemented databases.

[Understanding statistical error (2020)](https://www.johndcook.com/blog/2020/10/05/understanding-statistical-error/) - many models can be written as `R(X) + \epsilon`, where `\epsilon` is some noise factor with following some distribution and `R(X)` is some deterministic relation. This `\epsilon` is not an error of reality, but of our own modelling.

[Industrial literacy (2020)](https://rootsofprogress.org/industrial-literacy) - a bunch of things to understand about our modern industrial society, before attempting to change anything.
Developers Resource Packed Newsletter
Tags: javascript, node, deno, react
Published: 2020-10-09 06:41:31

Hello Fellow Developers!

I have started my own technical Newsletter on monthly updates on  JavaScript, Node, Deno and React; along with recent and newer technologies evolving.

Doing so will open a scope for staying updated about recent updates on JS, Node, Deno and React.

![OhMyScript Newsletter](https://dev-to-uploads.s3.amazonaws.com/i/e0s84ie9ar4xfd27qkgn.png)

[Please do subscribe my monthly newsletter OhMyScript](https://tinyletter.com/imshravan) 

Thanks for your time. 

Stay tuned. Happy learning.
Have you ever used free domains like .tk, .ml, .ga, .cf and .gq?
Tags: webdev, discuss, domain
Published: 2020-10-09 06:38:36

---
title: Have you ever used free domains like .tk, .ml, .ga, .cf and .gq?
published: true
description: 
tags: webdev, discuss, domain
cover_image: https://hostmayo.com/blog/wp-content/uploads/2018/07/free_domains.jpg
---
Some registrars like [dot.tk](http://www.dot.tk/en/index.html?lang=en) and [freenom.com](https://www.freenom.com/) offer users to get free domain names like .tk, .ml, .ga, .cf and .gq. They work just like any other domain name, tho registrant acts as a user of the domain name, not as a licensee and there are no transfer rights.

Have you ever used them? Or do you stick with free subdomains like sitename.netlify.app or sitename.github.io?
BFE.dev #104. Traverse DOM level by level
Tags: javascript
Published: 2020-10-09 06:36:06

> [BFE.dev](https://bigfrontend.dev) is like a LeetCode for Front End developers. I’m using it to practice my skills.


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

This article is about the coding problem [BFE.dev#104. Traverse DOM level by level](https://bigfrontend.dev/problem/Traverse-DOM-level-by-level)

## Analysis

Level by level, so initial level would be 

```
[div]
```

then the next level is 
```
[p, p, div]
```

then the next level is
```
[button, a, p, div]
```

We could just keeping pulling the elements from left, and push their children in from right, right ? This is a queue.

## Show me the code

The implementation is BFS, not difficult, and we are only required to collect the elements, so doesn't need to care about the boundary of each level.

```js
/**
 * @param { HTMLElement } root
 * @returns { HTMLElement[] }
 */
function flatten(root) {
  if (root === null) return []
  
  const queue = [root]
  
  const result = []
  
  while (queue.length > 0) {
    const head = queue.shift()
    result.push(head)
    queue.push(...head.children)
  }
  
  return result
}
```


## Passed

This is a fairly simple problem.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4vqv4flaiwwem2633s1v.gif)


Hope it helps, you can have a try at [here](https://bigfrontend.dev/problem/Traverse-DOM-level-by-level)
Make Image Loading (React Native)
Published: 2020-10-09 06:27:21

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bkjjbp2gvki201eqz4cj.gif)
Suppose we have array of 10 Objects and every object has a url of image which are multi mb’s like 50mb, 45mb etc, so it take time to display image on screen bcz to fetch image from url it take time’s , here is the solution while image is downloading we can show any default image or loader for every image in loop , let start!
here is our array
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d0zxm8r93idu9u0aownl.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wn1vkda9u1rvr7jnx4gd.png)
here is my main component for render the array with flatlist ,
inside flat list i create a component name ImageItem,
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m9ost362kprdezu6e2p1.png)
i declare loading State for show load or default image , while fetching image
in render method i just made a condition that if loading is true i am showing loader and if loading is false i ll show image
the Image tag have 2 props which will use for this main part , onLoadStart which execute when image fetching start and i update the state loading true,
onLoadEnd will execute when image fetching is complete and ready to display so i update loading false , its that simple,

hope you learn from it , support me on my YouTube channel
Market Subtleties 

Published: 2020-10-09 06:09:07


Today the area served by the 805 area code and its overlay <a href="https://www.208areacode.com/">208 area code</a> incorporates little segments of Monterey and Kern Districts and the greater part of San Luis Obispo, Santa Clause Barbara and Ventura Counties.In Commercial center Weight, We Try to Expand a protected, Comprehensive setting where the entirety of our laborers feel increased in value, heard and regarded. Recent developments offer a straightforward update that heaps of our networks tend not to encounter that inside their lives. The throb and pain being felt in loads of towns are both profound just as dash. Area codes 208 are California phone area codes; 805 was initially part from area code 213 out of 1957. We need to talk at whatever point the value of expansion, resistance, regard, and balance will be broken or set at an expanded chance and furthermore convey a voice to individuals who've now been hushed for very broad term. In any case, giving an operator isn't adequate. 

<a href="https://www.208areacode.com/">208 area code</a> is situated in California and spreads Oxnard, Simi Valley, Thousand Oaks, San Buenaventura (Ventura), and Santa Clause Maria. From what of Desmond Tutu, "on the off chance that you're nonpartisan in circumstances of foul play, at that point you've picked the average side of this oppressor". We need to hold up under in solidarity with all individuals from the organization to acquire other persecution and underestimation. We need to peer out our establishments into the networks where we dwell and furthermore accomplish work and business to promote the value of expansion, resistance, regard, and balance. Our exercises, as leaders, affiliations, or people, is probably going to gain a hole.
Did you lose your internship due to COVID-19?
Tags: computerscience, 100daysofcode
Published: 2020-10-09 06:08:33

You may be one intern among thousands of interns, who lost their internship due to COVID-19. But you know, still, the opportunity is there. COVID-19 only needs social distance. But still, you can do your intern remotely. 

There are many programs which are providing software engineering internships. Google Summer of Code is the most popular event among all of that. So do you know, the Google Summer of Code 2021 is coming? Don't be late. Read this article to learn how to get selected into Google summer of code 2021. 

P.S. 
If you are fed up with the non-paying internships, Google's summer of code is not among them. They provide amazing stipends. Anyway, experience is the best thing you should collect from the event.

Don't be late. If you start ASAP, the opportunity is bigger.

https://medium.com/runtimeerror/path-to-gsoc-2021-e6a81e62308d
How do you deal with legacy projects?
Tags: webdev, discuss, career, beginners
Published: 2020-10-09 06:04:14

---
title: How do you deal with legacy projects?
published: true
description: 
tags: webdev, discuss, career, beginners
cover_image: https://miro.medium.com/max/6528/1*Xg-fL0iUfl0j37vbzvL-XA.jpeg
---
Most of the devs are aspired to learn cutting-edge technologies and develop new, innovative products cause it's fun and adds a lot of value, keeping them excited and inspired.

In reality, tho, the vast majority of the open roles are often seeking devs to maintain their monster-size code-bases often written in outdated frameworks to fix bugs while avoiding damage to major dependencies.

How do you keep motivating yourself to deal with continuous legacy projects? Or do you try to avoid them at all costs?
Resolving Conflicts
Tags: opensource, git, github
Published: 2020-10-08 23:14:14

This week we had practices of git merge. The lab is designed to generate conflicts and we are supposed to solve it.

I created 2 issues and work on them in different branches. The first one is [Add JSON format output](https://github.com/yuanLeeMidori/OSD600.GoodLinkOrBadLink/issues/11) and the second one is [Add --good and --bad filter](https://github.com/yuanLeeMidori/OSD600.GoodLinkOrBadLink/issues/12). I'm supposed to create 2 feature branches based on these 2 new features before I start working on them. **However**, I forgot to do so. I edited the project and did the commit before creating the branches. The master branch was pointing to this commit and I couldn't merge the feature branch to master since the master also has the same commit.

The issue here is the master and the [newly created branch](https://github.com/yuanLeeMidori/OSD600.GoodLinkOrBadLink/tree/issue-11) both point to the same commit, therefore, there is no need to commit since their contents are the same. The difference is I pushed the commit in the feature branch but did not push it to the master branch. 

I could do push in the master branch since these 2 branches are technically *merged* when they were pointing to the same commit. But, what about the second feature and its branch? I'm supposed to merge the second one and solve the foreseen conflicts. 

The solution is to create the [second feature branch](https://github.com/yuanLeeMidori/OSD600.GoodLinkOrBadLink/tree/issue-12) and point to the previous commit where the master branch was supposed to be. The command would be `git checkout -b <newBranchName> <commitNumber>`. In that case, my newly created feature branch would have the old content before I made any changes about adding these 2 new features.

After solving this issue, I worked on adding the new feature and then pushed it remotely. After that, I started the merging. This time, there were supposed to be several conflicts between the master branch and the second feature branch since the master branch already had the changes from the first feature branch.

I use the UI in Visual Studio Code to resolve the conflicts. There are different options such as "keep the upcoming", "keep the current", or "keep both". But, these options don't always do exactly what you expect. Programmers still need to modify the code to resolve the conflicts.

In conclusion, this practical experience of **git merge** gave me more than I expected. I did git merging before when I was doing an internship using Visual Studio. It was not that difficult since Visual Studio provides almost everything about version control in GUI. In this lab practice, I faced some unexpected issues which help me learn more about git.
How to enable OpenSSH Agent to access your github repositories on Windows PowerShell
Tags: git, github, powershell, productivity
Published: 2020-10-09 05:51:16

If you are someone coming from a Linux/Mac developer environment to Windows, you would be missing your old friends `ssh-agent` and `ssh-add` that are commonly used for authentication while using the **SSH** protocol for Git. 

While WSL2 grants you access to a native Linux environment that you are used to, there would be few who prefer to use PowerShell to accomplish some of the tasks. If you are one of them, read on...

For PowerShell users, previously you had to install OpenSSHUtils to get access to ssh-agent. **Windows 10 already ships with OpenSSH Authentication Agent, which is disabled by default**. Hence, if you execute ssh-agent in PowerShell, you will get the following error.

`unable to start ssh-agent service, error :1058`

It's just the matter of enabling the service either from PowerShell(as Admin) or from Services.

# Enabling SSH Agent using PowerShell
_PowerShell should be run as Administrator to be able to execute the below steps_
```
Set-Service -Name ssh-agent -StartupType Automatic
Set-Service -Name ssh-agent -Status Running
```

# Enabling SSH agent from Services
- Open Services(Start Menu -> Type "Services")
- Select OpenSSH Authentication Agent
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/06kocmdzicpyw8qvvjb6.png)
- Set StartupType to Automatic
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7oy1f8tp0jgimuxa9p0h.png)

**That's it!**
You should now be able to execute `ssh-keygen`, `ssh-agent`, and `ssh-add` from PowerShell.

```
PS C:\Users\anoop> ssh-add
Enter passphrase for C:\Users\anoop/.ssh/id_rsa:
Identity added: C:\Users\anoop/.ssh/id_rsa (anoop@DESKTOP-ABCD123)
```
Redshift might be good, but why can't I customize more than that?
Tags: help, linux, darkmode
Published: 2020-10-09 05:48:22

I mean, can I write my own ICC profile, and use here?

![ICC](https://dev-to-uploads.s3.amazonaws.com/i/iojx2vemm31o44iwwjg8.png)

There is also Redshift / Night light, but why not turning it on at all times?

![Redshift](https://dev-to-uploads.s3.amazonaws.com/i/g080795anxxwskey7pge.png)
What is the compiler
Tags: computerscience, 100daysofcode
Published: 2020-10-09 05:35:30

The compiler is a nothing but a source code translator. There are multiple types of compilers according to how they translate source code to another source code. 

When a compiler translates high-level source code into low-level source code we call it a traditional compiler. 

When the compiler translates low-level source code, we call it decompiler.

When the compiler translates high-level language into another high-level language we call it a transcompiler or transpiler.

Would you like to learn more about compilers and their architecture? Read this article. I have briefly explained how compilers work in this article.

https://medium.com/runtimeerror/what-is-the-compiler-62c595a828c9
Scraping Cars.com Product Details with Python and Beautiful Soup
Published: 2020-10-09 05:43:26

Today we are going to see how we can scrape Cars.com product details using Python and BeautifulSoup in a simple and elegant manner.

The aim of this article is to get you started on a real-world problem solving while keeping it super simple so you get familiar and get practical results as fast as possible.

So the first thing we need is to make sure we have Python 3 installed. If not, you can just get Python 3 and get it installed before you proceed.

Then you can install beautiful soup with:

We will also need the libraries requests, lxml, and soupsieve to fetch data, break it down to XML, and to use CSS selectors. Install them using:

Once installed open an editor and type in:

Now let's go to the Cars.com product details listing page and inspect the data we can get.

This is how it looks:
Do you know how the operating system manages to run multiple programs concurrently? 
Tags: computerscience, 100daysofcode
Published: 2020-10-09 05:42:29

Modern operating systems can run multiple programs at one time. Those operating systems are using an operation call context switching to manage to run multiple programs at once. 

Would you like to learn how context switching happens in the operating system? Read this article. I have explained in a very simple manner how context switching happens in a modern operating system.

https://medium.com/runtimeerror/context-switching-in-depth-1d6d4e51ab32
Skills Data Mining Specialists need to Master in 2020

Published: 2020-10-09 05:40:43

Here are a bunch of skills you will need if you want a career in data mining in 2020.

These articles will NOT list ALL the languages, tools, and technologies required. It's not practical. It will only list the main languages and tools that you need to get started and get your feet wet in this industry. We got these answers when we asked ourselves the question, "If we were to restart our education on Web Crawling at Proxies API, knowing what we know, what would be master". So here we go...

Basic skills:
These are table stakes that you will need to have to even begin to feel comfortable in this area.

Basic understanding of database tools like SQL, NoSQL, and Hadoop.
Intermediate-level skills in Python. This is because some of the best scrapers and crawlers are written in Python and have the biggest communities.
Master working on servers on AWS especially Amazon Linux.
Intermediary skills:
For being totally comfortable with extracting data, you will need a working knowledge of Regex, XPath and CSS selectors.

Machine Learning tools:

Get familiar with the Python NLTK library and have the ability to use Naturl Language Tools (NLP) like POS extraction, summarization, sentiment analysis, classification etc.

Understand neural networks: Tools like nn_builder which is a python package that lets you build neural networks in a single line and popular plug and play libraries like Tensorflow.



Advanced-Data mining skills:
For deep data mining projects, a mastery of the above skills and excellence in the following skills is required.

Machine learning skills

Use a specialized language like R which is designed for machine learning.

Understand and master the important machine learning algorithms like...Linear Regression, Logistic Regression, Naive Bayes classification, K-Means clustering.

Statistical Thinking Get acquainted with the basics: hypothesis testing, correlation, regression, types of scales, distributions, etc.

Visualization tools

A good part of data mining work is communicating the inferences effectively. Visualization tools like Tableu, SAS BI, R-Graphics, or even mastering Excel is absolutely invaluable.
What do you use aliases for in terminal?
Tags: terminal, discuss, unix, shell
Published: 2020-10-09 05:32:13

---
title: What do you use aliases for in terminal?
published: true
description: 
tags: terminal, discuss, unix, shell
cover_image: https://miro.medium.com/max/1000/1*SrwjxpGqDUQ2Z94sIMM9Tw.jpeg
---
An alias in the terminal is nothing but a shortcut to commands. The alias command allows the user to launch any command or group of commands by entering a single word.

You can cut down typing time with these aliases, work smartly, and increase productivity at the command prompt.

What are some of the commands you use aliases for?