teleren/devto huggingface dataset:
Video processing with VR/AR in the browser
Tags: javascript, opensource, computerscience
Published: 2020-07-31 11:22:12

AlterWorld is an open source real-time video processing project based on OpenCV for JavaScript (front-end). It has several interesting features such as different image filters and effects, VR/AR capabilities and audio/music generation.

![javascript video processing](https://dev-to-uploads.s3.amazonaws.com/i/lxvwxxicyka7otnz7hes.png)

Live demo: https://nevolin.be/alterworld/

Use a budget VR headset (such as Google Cardboard VR) with your smartphone, the experience is awesome!

![javascript VR and AR](https://dev-to-uploads.s3.amazonaws.com/i/k8oelxc5d6khyv4n6fym.png)

There are a ton of built-in filters and effects available. Use the dropdown box to select a desired filter. The Time Delay and Glitch effect can be used to create dizzy, funny or scary effects, these are messing around with the frames.

There is a special feature "maestro" which is the button at the very bottom. The basic idea is to brainstorm musical beats from images, which conceptually could be useful to musicians. This uses a certain algorithm to generate basic electronic beats based on the pixel values on the image. You can tweak the algorithm or implement your own.

For more info and YouTube demos go to Github (and star us ❤): https://github.com/healzer/AlterWorld

## AlterWorld in Video Production

The capabilities provided by OpenCV can be used for creating custom and unique scenes for films, music videos and art:

YouTube video:

[![https://www.youtube.com/watch?v=pEJJ3V9Xj20](http://i3.ytimg.com/vi/pEJJ3V9Xj20/hqdefault.jpg)](https://www.youtube.com/watch?v=pEJJ3V9Xj20)

YouTube video:

[![https://www.youtube.com/watch?v=_tJR69mexgc](http://i3.ytimg.com/vi/_tJR69mexgc/hqdefault.jpg)](https://www.youtube.com/watch?v=_tJR69mexgc)

YouTube video:

[![https://www.youtube.com/watch?v=nTPr-cHSumU](http://i3.ytimg.com/vi/nTPr-cHSumU/hqdefault.jpg)](https://www.youtube.com/watch?v=nTPr-cHSumU)

YouTube video:

[![https://www.youtube.com/watch?v=T5qy3fP7LZk](http://i3.ytimg.com/vi/T5qy3fP7LZk/hqdefault.jpg)](https://www.youtube.com/watch?v=T5qy3fP7LZk)

YouTube video:

[![https://www.youtube.com/watch?v=9hYuiqnYNEQ](http://i3.ytimg.com/vi/9hYuiqnYNEQ/hqdefault.jpg)](https://www.youtube.com/watch?v=9hYuiqnYNEQ)

YouTube video:

[![https://www.youtube.com/watch?v=PwOEMtuf5Q8](http://i3.ytimg.com/vi/PwOEMtuf5Q8/hqdefault.jpg)](https://www.youtube.com/watch?v=PwOEMtuf5Q8)

YouTube video:

[![https://www.youtube.com/watch?v=3pNXoRaPlPg](http://i3.ytimg.com/vi/3pNXoRaPlPg/hqdefault.jpg)](https://www.youtube.com/watch?v=3pNXoRaPlPg)

The shots from these videos have been rendered using OpenCV in Python and then edited in Adobe Premiere Pro.
YouTube Video | CSS Grid Course for Beginners - 4
Tags: css, html, youtube, webdev
Published: 2020-07-31 11:19:26

In this series we will learn CSS Grid . With the creation of CSS Grid, we can create a modern day website with ease and ditching CSS frameworks like bootstrap.

This is the final part of the series.

{% youtube MPdJnbcC4GA %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
New Alexa dev tools by Amazon
Tags: news, alexa, machinelearning
Published: 2020-07-31 11:06:49

### Amazon rolling out new features for Alexa

#### Alexa conversations

It is a new dialogue system built to help engineers and developers create more realistic consumer interactions.

* Uses deep learning
* Reduces the amount of backend code 
* Reduces the amount of training needed

#### Skill Resumption

Skills can now be kept running in the background so the end-user can return to it after using Alexa for some other task.

#### Deep Neural Networks (DNN)

* Amazon expects 15% increased accuracy
* DNNs will improve Alexa's Natural Language Understanding

#### Web API for Games

This feature makes it easier for game developers to leverage Alexa.
Possible use cases:

* WebGL
* JS & CSS
* Canvas 2D

#### Quick Links

* Increased customer engagement
* Driving traffic from a website / mobile apps to their Alexa skill

## Some Alexa projects/guide which might be helpful

{% github https://github.com/alexa/alexa-cookbook %}

{% github https://github.com/amzn/alexa-skills-kit-js %}

Hope this helped 💖
An easier way into open source!
Tags: showdev, opensource, github, javascript
Published: 2020-07-31 10:53:53

Contributing to open source is an intimidating task. It includes learning the language of implementation, familiarising with the codebase and setting up the build on your machine. For a newcomer, this is a tough task, pushed further away from his grasp by unfamiliarity with using Github. 

The process of searching for issues to contribute to in open source for me involves finding an interesting repo, searching for a beginner-friendly issue to acclimate myself with the codebase, finding the issue already assigned to somebody else and crying in desperation. This ultimately becomes a very frustrating and fruitless exercise. I found this sentiment echoed in Reddit and twitter. With this in mind, I decided to find a way to simplify this process.

First Contrib was my solution. A way to search for issues relevant to you that has not been assigned to anyone and free for taking, also with the option to distinguish beginner-friendly issues.

It works based on a user's starred repo, I made an assumption here, a user would want to contribute to the repos he has starred. 

I would love to get your feedback on this!

Check out first contrib [here](https://firstcontrib.herokuapp.com/)  
Repo [here](https://github.com/krishnanunnir/opensource-first-contrib-search)
Get HTTPS support in just one line
Tags: todayilearned, webdev, react
Published: 2020-07-31 10:50:44

In your **react web app**, if you need `HTTPS` support while running on your localhost, just add this in your start script in your `package.json` file. 


```json
{
  "start": "HTTPS=true react-scripts start"
}
```

Then just run `npm start`.

You'll see something like this:
![Not secured](https://dev-to-uploads.s3.amazonaws.com/i/fqzwrbx8b6zg3r6hfnz9.png)


But that's acceptable, till your site is getting served over HTTPS. 

Bingo! 
No need to take efforts of creating an SSL certificate!
Which is better for a CRM? Django with PSQL or NodeJS with MongoDB?
Tags: help, django, node, discuss
Published: 2020-07-31 10:49:26

Which one is better? Considering following:

- Realtime Updates on client [ For Eg. a Contact is updated ]
- Database Schema could change as per new requirements.
- Database might need to be sharded in future.
- REST API for clients.
- Less[No] Vulneribilities.
- Easily Integratable with other systems like hubspot.
- Scheduling and Queue Management.
- Better Coding experience.
- Distributed System.
- Millions of requests per minute.
Customizing Github Profile Page
Tags: github
Published: 2020-07-31 10:41:13

### What is GitHub Profile Page?
A github profile page like any other social media profile page  displays the user your public repositories and your contributions to all the repositories by day, month and year wise.  A person can also see who you are following on github and how many people are following you. Apart from this it also shows the repositories you have starred.  

However till now it was not possible to customize this page since there was no customization available. But now it is possible to customize your github profile page by modifying a README.md in a username repo.

So lets get started:
- **Step 1: Create a repository**
Login into github and create a new repository with the same name as your github user name. Make sure to keep this repository public and initialize it with README.md file as shown in below screenshot.

![Create a repository](https://vaghelabhavesh.github.io//images/2020-07-06/1.CreateRepo.png)


- **Step 2: Edit README.md file**
Once the repository is created, open the README.md file and start editing it. You can add anything in this file - eg your twitter profile link, your linkedin profile link etc. You can also add your biography or description about your interest, hobbies, technologies you like etc as you can see in below screen shot.

![Edit README.md file](https://vaghelabhavesh.github.io//images/2020-07-06/2.EditReadMe.png)


- **Step 3: Commit README.md file**
When you have completed making the change and you are ready, preview your changes and make sure to commit your changes.

![Commit README.md file](https://vaghelabhavesh.github.io//images/2020-07-06/3.CommitReadMe.png)


- **Step 4: Verify your changes on your Github Profile Page**
Next and final step is to go to your github profile page and verify that  your changes are showing up there.

![Verify your changes on your Github Profile Page](https://vaghelabhavesh.github.io//images/2020-07-06/4.CheckProfile.png)


### Wrap up
Hopefully you learn something new today and like this post

Happy Coding.

###### This post was first posted on -  [https://vaghelabhavesh.github.io/blog/2020/07/06/customizing-github-profile-page.html(https://vaghelabhavesh.github.io/blog/2020/07/06/customizing-github-profile-page.html)
How to access DVA Store in UMI application?
Tags: umi, react, redux, dva
Published: 2020-07-31 10:39:39

Hi most of the react developers would find `dvaJS` and `umiJS`, heaven for state management and application development. Dva is elm based state management tool that use `react-redux` for state management.

Q: How to access DVA Store in UMI application, outside the component or without `connect`?

Q: How to dispatch DVA Store in UMI application, outside the component or without `connect`?


# Answer

Q: How to access DVA Store in UMI application, outside the component or without `connect`?

A: https://v2.umijs.org/guide/with-dva.html#how-to-access-store-or-dispatch

It says use:

    window.g_app._store


Q: How to `dispatch` DVA Store in UMI application, outside the component or without `connect`?

A: https://v2.umijs.org/guide/with-dva.html#how-to-access-store-or-dispatch

It says use:

    window.g_app._store.dispatch('namespace/action')


# Bonus: 

Q: How to `get state of` DVA Store in UMI application, outside the component or without `connect`?

A: https://v2.umijs.org/guide/with-dva.html#how-to-access-store-or-dispatch

It says use:

    window.g_app._store.getState()


Available Functions:

    asyncReducers: {}
    dispatch: ƒ ()
    getState: ƒ f()
    replaceReducer: ƒ (n)
    runSaga: ƒ ()
    subscribe: ƒ subscribe(listener)


Recommended: Instead of directly using it, write a Util that exports these functions.

Refer to https://stackoverflow.com/questions/63073047/how-to-access-dva-store-in-umi-application/63073048#63073048 for discussion on StackOverflow
How do you keep your NPM packages update?
Tags: npm
Published: 2020-07-31 10:17:38

You have multiple projects going on and if you keep them always update to the last version, sometimes you expend some precious time trying to figure it out what and why your build broke (after the update).

Normally when I update I run npm-update, which it's a package that search for all last versions from your dependencies.

I don't know if this is a good practice, but I like to keep my dependencies always at the last version.

So... how do you manage this?
Identity and Access Control (Management) module for NestJS
Tags: nestjs, iam, module, opensource
Published: 2020-07-31 10:17:25

Hey folks,

Just published a NestJS module for Identity and Access Control which is highly inspired by AWS IAM. The module is still WIP and looking forward to contributors in case it might fit your or your employer/organization needs.

Link: https://github.com/AlexanderC/nestjs-iacry

Cheers.
Advantages of hiring an Outsource Magento developers

Tags: magento2migrationservices, magento2upgradeservices, magento2developmentservices, magento2developmentcompany
Published: 2020-07-31 10:15:25

Looking for the best eCommerce solutions for business needs online? Or do you think why to hire Magento Certified Developer? Then we have to say you are right in the right place. This article is meant to share the benefits and benefits of hiring Magento Developers.

First, go for simple, easy to use, user friendly & advance eCommerce solutions for Magento Development services. Magento is the world's most famous open-source platform used to oversee and control businesses from big business to small businesses nowadays. It can really improve your presence online and also help to boost sales.

Read More:- https://www.awaysomearticle.com/advantages-of-hiring-an-outsource-magento-developers/
C# SDK for Event Hub: Read stream from the latest message
Tags: azure, eventhub
Published: 2020-07-31 10:04:43

The [official documentation](https://docs.microsoft.com/en-us/azure/event-hubs/event-hubs-about) explains Azure Event Hub as:

>Azure Event Hubs is a big data streaming platform and event ingestion service. It can receive and process millions of events per second

There is C# (and many other) SDK to use the service. I am using [dotnet core SDK](https://docs.microsoft.com/en-us/azure/event-hubs/get-started-dotnet-standard-send-v2)

# Issue

I need to get messages since I subscribed to the event hub, but by default, event hub retains data for 1 day and the sample code gets all the old messages. I can use checkpoint to remember where I last read the message for next time, but I always want to get data from the point I open connection.

# Resolution

Sample application shows how to subscribe events.

```csharp
// Register handlers for processing events and handling errors
processor.ProcessEventAsync += ProcessEventHandler;
processor.ProcessErrorAsync += ProcessErrorHandler;
```
In addition to above, I just needed to subscribe **PartitionInitializingAsync** event.

```csharp
processor.PartitionInitializingAsync+= ProcessInitializingHandler;

static async Task ProcessInitializingHandler(PartitionInitializingEventArgs eventArgs)
{
    eventArgs.DefaultStartingPosition = EventPosition.Latest;
}
```
That's it! You can also set **FromOffset**, **FromEnqueuedTime** for more granular control.

# Reference

You can find official sample [in GitHub](https://github.com/Azure/azure-sdk-for-net/blob/master/sdk/eventhub/Azure.Messaging.EventHubs.Processor/samples/Sample05_InitializeAPartition.cs)
How to setup prettier for WebStorm ?
Tags: codenewbie
Published: 2020-07-31 10:01:40

Prettier is amazing code formatter and help to don't be worried about your own code style. 

Prettier allow us to define a set of formatter rules but we can write our code as wherever we want but when you save the formatter apply these rules.

The good news is that Prettier it works like a charm with [vscode](https://code.visualstudio.com/ "vscode") but for WebStorm need some extra clicks.

These are my steps for work with prettier with WebStorm.

1- Be sure you have prettier in your project or install it globally.

```bash
npm install -g prettier
```

2- Go to File | Settings | Languages & Frameworks | JavaScript | Prettier 
and check options.

[*:white_check_mark:] On code reformat.
[*:white_check_mark:] On save.


### Sass and SCSS 
Thanks [@dinaelurdaneta](https://twitter.com/dinaelurdaneta "@dinaelurdaneta") we can use prettier with sass or scss files using stylelint and extra setup for prettier.

1- Install stylelint local or globally.
```bash
npm install -g stylelint
```
2- Add scss and sass extension into __Run for file glob pattern. __

![include sass extension for prettier support] (https://danywalls.com/wp-content/uploads/2020/07/Capture.png)

Enjoy Prettier!

Photo by <a href="https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Markus Spiske</a> on <a href="https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Observations from my first week as full-time IndieHacker after seven years of 9-5 coding
Tags: productivity, programming, career
Published: 2020-07-31 10:01:18

---
title: Observations from my first week as full-time IndieHacker after seven years of 9-5 coding
published: true
description: Do you want to play CS:GO for 10 hours? Ok. Do you want to work for 16 hours? Ok.
tags: productivity,programming,career
---

Hi there,

2020 is the year of everyone going crazy on indie hacking, building bootstrapped products, starting paid newsletters, and launching podcasts.

I jumped on this boat myself, but this time with full steam ahead. Full time. I quit my job to [teach blockchain programming](https://twitter.com/Web3Coach) - no more hobbies or side projects.

![Last day at work](https://dev-to-uploads.s3.amazonaws.com/i/62y7od7x616lo5255o4v.jpg)

> I want to share my top two findings from the first week as an indie-hacker with you.

## 1. There are no rules
I find myself surprisingly lost - in a good way. As someone who loves structures and rules, waking up at 9 am for the stand-up, for years, it feels peculiar NOT to HAVE TO.

- When do you want to wake up? **Up to you!**
- What do you want to work on? **Up to you!**
- How are you going to implement this product? **Up to you!**

Do you want to play CS:GO for 10 hours? Ok. Do you want to work for 16 hours? Ok.

**This sounds fantastic until you realize that your day's structure has a direct impact on your earnings :)**

Exciting because there is no cap on how much you can earn, but also a bit stressful because you may earn 10 000$ this month, or 0.

## 2. You are the entire company

When you start indie hacking, you will probably be a solo founder. A developer with a good idea? Well, congratulation! You are now also a product team, marketing team, sales team, and potentially a legal team.

You soon realize that the tech is probably the least of your problems :) Coding is the easiest part! You already have experience in solving technical challenges. But that's now only 30% of your workweek compared to the previous 100% as a dev employee (depending on what you are building ofc).

**Ultimate freedom comes with the ultimate responsibility - as superman would say.**

## Why becoming an IndieHacker?

Well, the answer will vary from person to person. That's the beauty of it - there are no rules.

I left my comfy job bc I want to acquire a new marketing, business skills, and bring more devs into the blockchain ecosystem.

Follow me on Twitter if you are considering this journey or want to learn more about self-employment, indie-hacking, and my **current obsession with blockchain programming**:

https://twitter.com/Web3Coach

What about you? Did you try entrepreneurship? Are you considering it?
Techniques Implemented to Make Online Education More Effective
Tags: essay, education, blog, online
Published: 2020-07-31 09:43:32

Online education has emerged as one of the most significant forms of imparting education. The career aspirants who do not have much time to devote in attending their regular campus classes can easily pursue their course though this mode of learning. To make this means of [boomessays writers](https://essaywriterservices.net/reviews/boomessays-com-review/), a modern educational arrangement in a true sense, several contemporary techniques have been initiated. Some of these techniques have been mentioned below:
Web Conferencing: Lack of direct interaction between the instructor and learners was one of the basic defects of online education arrangement. But the facility of web conferencing has helped this mode of [learning to overcome](https://www.tetongravity.com/community/profile/m9f85b/) its one and only drawback.
Social networking and Online Live Chat: Utilizing the social networking and online live chat facility gives the career aspirants a fair chance of exploring their ideas on a particular topic by exchanging their views with the students of the same discipline. Online education system, thus, works more efficiently for the career-oriented individuals.
🚀10 Trending projects on GitHub for web developers - 31st July 2020
Tags: javascript, react, webdev, html
Published: 2020-07-31 09:27:12

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. Draft.js

Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.

{% github facebook/draft-js %}

---

### 2. PeerJS: Simple peer-to-peer with WebRTC

PeerJS provides a complete, configurable, and easy-to-use peer-to-peer API built on top of WebRTC, supporting both data channels and media streams.

{% github peers/peerjs %}

---

### 3. Shoelace

A forward-thinking library of web components.

{% github shoelace-style/shoelace %}

---

### 4. JavaScript obfuscator

JavaScript Obfuscator is a powerful free obfuscator for JavaScript, containing a variety of features which provide protection for your source code.

{% github javascript-obfuscator/javascript-obfuscator %}

---

### 5. Macintosh.js

This is Mac OS 8, running in an Electron app pretending to be a 1991 Macintosh Quadra. Yes, it's the full thing.

{% github felixrieseberg/macintosh.js %}

---

### 6. Formik

Build forms in React, without the tears.

{% github formium/formik %}

---

### 7. Awesome Profile README templates

The aim of this repository is to collect awesome READMEs that developers around the world are using on their own profiles to act as an inspiration for others.

{% github kautukkundan/Awesome-Profile-README-templates %}

---

### 8. Docsify 

A magical documentation site generator.

{% github docsifyjs/docsify %}

---

### 9. Nerd Fonts

Nerd Fonts is a project that patches developer targeted fonts with a high number of glyphs (icons). Specifically to add a high number of extra glyphs from popular 'iconic fonts' such as Font Awesome, Devicons, Octicons, and others.

{% github ryanoasis/nerd-fonts %}

---

### 10. html2canvas

The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser.

{% github niklasvh/html2canvas %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.