teleren/devto huggingface dataset:
Using camera in the browser for dummies
Tags: navigator, javascript, basics, tutorial
Published: 2019-11-27 09:19:43

---
title: Using camera in the browser for dummies
published: true
description: My journey with navigator.mediaDevices
tags: navigator, javascript, basics, tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/538tqlsbvq5j4dswv809.jpg
---

For a <a href="https://youseum.nl/" target="_blank">recent project</a> I had to access the camera and take a picture on users’ request. This made me stumble upon the weird restrictions, shortcomings and defaults of this functionality.
I created a simplified Codepen, but using the camera will only work on codepen itself:
{% codepen https://codepen.io/Sidstumple/pen/VwwJWaJ %}


## Only available over https or localhost
A lot of articles about getting access to the media devices were written before most browsers added constraints to using a user's camera. I found out, for example, that it's necessary to be on a https connection.

I developed this website in Vue/Nuxt which tells you to visit the website through your IP address in stead of localhost. I didn't immediately remember that most browsers do allow you to use those functionalities while on localhost and spent some time searching alternatives (google flags was the answer btw). So after I switched to localhost things were much easier😅.

![Man looking in mirror very happily](https://media.giphy.com/media/326aSJHSRzCQ3K2cEk/giphy.gif) 
## The camera isn't a mirror like we're used to
The camera doesn't work like a mirror when you access it from the browser, this was a bit of a mind fuck until I just flipped the screen with `transform: scaleX(-1)`.

## The camera on mobile is portrait
While I was very happy that on mobile the browser automatically accessed the front camera the orientation was portrait in stead of landscape. This makes a lot of sense of course, but it made it very hard to test the positioning of the video for mobile. Since this functionality doesn't work on IP address I kept having to deploy to test it.

## IOS doesn't allow Chrome to access the camera
I haven't been able to get it to work at least, I think it has something to do with the Apple policy to force other browsers to use their version of webkit. If anyone knows what I'm doing wrong I'd love to hear it!

## You can't actually take a picture
I had to kind of fake taking a picture by first pausing the video stream and asking the user if they wanted to take the picture again (in which case I would just hit play, haha) or if they wanted to use this picture.
If they liked their picture it got a bit more complicated, the only way to capture the image made in the browser is to kind of print it on a canvas element. Printing it on the canvas is possible with `drawImage()`, see the codepen above.
Looking for AWS Questions List!
Published: 2019-11-27 08:59:45

Hello Everyone,

I have scheduled my upcoming aws interview next to next week and I want to know which types of questions I will face? Can anyone help me to crack my aws interview, I have cleared the written test now it's my 2nd round which is technical round. Anyone here aws developer? I have research on google to find list and I have found https://hackr.io/blog/aws-interview-questions Can anyone knows is it enough to crack the interview?
bb: a simple process viewer
Tags: rust, tools
Published: 2019-11-27 08:48:05

---
title: "bb: a simple process viewer"
published: true
description: A featureful but simple process viewer written in Rust
tags: rust, tools
---

There's always a place for another process viewer and recently one of my favourites has been [bb](https://nessuent.xyz/bb.html).

The basic visualisation has been all I need to figure out where problems are occurring so far (Firefox, Chrome and Docker being the top three culprits) but a set of simple keyboard shortcuts allows you to switch to tree views and freeze the display while you look at things and have a think.

It's written in Rust but like the best Rust CLI's there's a lot of practical experience embedded into the tool. The design matters more than the language. [Cargo](https://crates.io/) makes it simple to install and remove so experimenting with it is easy.
JavaScript Dates in SQL
Tags: javascript, beginners, sql
Published: 2019-11-27 08:44:57

SQL and JS dates are not that compatible.

for the `datetime` type of MySQL for example you need a date in the following format

`"2018-04-21 12:11:01"`


The suggestions that you usually find on the internet aren't correct, because they don't tate timezones into consideration.

So this does not work correctly!

```js
new Date().toISOString().slice(0, 19).replace('T', ' ');
```

You can easily solve the problem by using moment.js

```js
require('moment')().format('YYYY-MM-DD HH:mm:ss');
```

If you don't want to go this route, you can also solve it without an additional library - it just doesn't read as nicely.

```js
const d = new Date(); 
d.toISOString().split('T')[0]+' '+d.toTimeString().split(' ')[0];
```
The game changer: React or Angular or Vue?
Tags: react, angular, vue
Published: 2019-11-27 07:39:53

**F**or a front-end web developer, it is always a tough choice to choose between the various technologies that he/she are provided with. A few years back, the w3 organisation has made the JavaScript as the client-side script that has to be used by default by any browser.
{% twitter 1199948299886829568 %}
 
###### 1) Having information about users of each of the technology is quite helpful in the comparison done here. The Angular has the defaulter as Google itself, accompanied by Wix, weather.com, healthcare.gov and the infamous Forbes website. The happy clients of React are Uber, Twitter, Paypal and the list goes on. When it comes to Vue, the satisfied customers are Alibaba, the popular Baidu, and GitLab.
{% link https://dev.to/anjankant/visual-studio-learn-free-webscriping-in-easy-10-steps-data-mining-htmlagilitypack-linq-618 %}

######2) There are bigger hands that uplift the developments of Angular and React whereas Vue is composed of a relatively small team. This is somewhat a peculiar condition as the code can be expected to be a lot cleaner when the size is lesser, while the length of each stride is more when backed by giants.

######3) In a survey conducted by stackoverflow.com, it was found that around 67% of the developers who used React technology are in true love with it while 52% of the Angular developers are actually satisfied to continue further. Vue was accepted by 89% if they would use it again while the numbers are 92 for React and 65 for Angular.
{% link https://dev.to/anjankant/free-video-library-be-an-expert-in-web-scraping-with-free-15-awesome-video-1oin %}

######4) The updating and upgrading policies have been quite problematic for Vue dependent developers when it comes to a large scale application while people are comfortable with React and Angular.

######5) It should be noted that the React uses the ES6 standard of Javascript and Vue is in between of ES5 and ES6. Angular is quite typical here, as it largely bases itself on Typescript. The disadvantage here is that the typescript itself may disappear completely over the time. Consistency is one good thing angular has got.
{% link https://dev.to/anjankant/status-codes-http-status-codes-21k5 %}

######6) Template flow is one big concern that these three have got for their developers. React literally breaks this custom by mixing up the Js code into HTML and this is actually what was tried to prevent in HTML coding. The other two are at par in this case.

######7) The learning curve is yet another factor which helps for the best comparison between Angular or React or Vue. React requires you to have prior knowledge about JavaScript while the Angular demands you to learn the entirely new syntax that is specific to it. Vue, on the other hand, doesn't tease you much.

[>>> Source Article &#8594;](https://www.technologycrowds.com/2018/05/the-game-changer-react-or-angular-or-vue.html)
Understanding delegates in C# - did I get it right?
Tags: csharp, delegates, javascript, help
Published: 2019-11-27 07:09:06

I was astounded recently to have someone from overseas ask for my advice. (Hey, I've got imposter syndrome as bad as anyone.) The young man is studying at Technical University of Chemnitz in Germany. Here's what he said [edited],
 
> I am sharing the code with you. Here in the GiveAction() Method, I am passing the reference of Method1(). Although Method1() is non-static method, still I am able to invoke this method via Action. How is the compiler doing implicit conversion? Could you please share your views on that. As far as I know non-static methods always needs an instance on which these methods are invoked.

This is the code he sent [edited]
```csharp
	class Program
    {
        int i = 4;
        static void Main(string[] args)
        {
            Program p = new Program();
            Action y1 = p.GiveAction();
            y1();
            y1();
            Console.WriteLine();
        }
        private  Action GiveAction()
        {
            return new Action(Method1);
        }
        public  void Method1()
        {
            this.i++;
        }
    }
```
This was my response:

I've been messing with Action and Func lately (I've got some articles about it on [Dev.to](https://dev.to/bugmagnet/func-delegates-in-c-3l29)) 

I've not seen this thing of instantiating the Program class in its own Main method before. I can readily see that it can be done I just never thought of doing it.

Right, 
 * `GiveAction` and `Method1` are both methods of the class called `Program`. 
 * `p` is pointed to an instance of `Program`. `p` therefore now has methods `GiveAction` and `Method1`.
 * `y1` is given the result of running `p`'s instance of `GiveAction` which in this case is an Action, a function pointer, to `p`'s `Method1` method.
 * `y1` is evaluated twice, causing the Action, the function pointer to `p`'s `Method1` to be evaluated twice thus incrementing the instance variable of `p` from 4 to 6.

Actions are a bit like JavaScript anonymous functions. That would appear to be the way in which you're using them here.

This is almost equivalent to
```javascript
function Program() {
    var i = 4;
	return {
        Main: function () {
	    var p = new Program();
            var y1 = p.GiveAction();
            y1();
            y1();
            print(i);
        },
        GiveAction: function () {
            return this.Method1;
        },
        Method1: function () {
            this.i++;
        }
    }
}

debugger;
var P = new Program();
P.Main();
```
However, the `i` in this implementation doesn't get incremented, so it's not an exact translation. 

---

Okay, community, is what I wrote correct? And how *do* I get the JavaScript to behave like the C#?
FlutterVN newsletter #5
Tags: fluttervnnewsletter, flutter, androiddev, iosdev
Published: 2019-11-27 07:08:15

Flutter Q4 survey, Flutter vs. React Native comparison, Google Maps, Firebase Firestore and Storage, build app using Fastlane. And more…

For more details, read this articles on Medium: https://medium.com/fluttervn/fluttervn-newsletter-5-3fa45a4ecb68?source=friends_link&sk=5d99cdbb3c727293e04e95992ce6a377
Tips To Choose The Best Transportation Management System
Published: 2019-11-27 06:55:45

An excellent Transportation Management System for your logistics and transport company is a must have a tool. The software aims to help the trucking company to efficiently manage its logistics supply chain. Transportation Management System helps them in tracking and coordinating and the movements of the materials and products. A quality transportation system also assists the business owners in handling inbound, outbound the shipment schedule, selection of transportation modes, final payment and processing of damage, loss and claims and choice of transportation modes. Some of the basic functions and benefits of Automobile Transport Software are load preparation, implementation management, fleet charge invoicing, tracking of shipment etc. Transportation management system comes generally in the form of hosted software and licensed software. 

The hosted application software comes in SSAS environment. They can be implemented quickly and without any large investment. Using fleet sophisticated and optimization rating, fantastic excellent transportation management system can identify and exploit huge cost saving opportunities such as LTL consolidation and continuous move routing. Auto Transport Software gives users fingertip access to various transport management tools. This is a comprehensive program that assists the logistics professionals to optimize, route, construct, assign and monitor the shipments through a computer and good online connection. This program software is totally secure to use all layers of safety. It offers global access to the logistic data within a completely secure environment. A most efficient system of transportation management also includes endless invoicing and reporting choice. Users can pick the data from the library of standard reports or also can make the ad-hoc reports. 

The more complex reporting tools make it easier for the users to facilitate precise, quick and insightful analysis of each and every segment of your operation for transportation management. The routing management and shipment load planning optimization feature help in load planning. It also helps the businesses to find optimise and appropriate routes as their requirements. It is the best cost-saving method as here we're saving the time. It assists the owners to control time according to the schedule. This software is known as logistic management program. The software automatically judges the best and shortest route. For accurate fleet management, <a href="http://fleminglease.com/trucking-management/trucking-software/">auto transport Software</a> is the perfect option. For accurate trucking management, auto transport Software is the best option you have in the market. However, the implementation of the transportation management system can make their work easier. 

This software is completely safe, secure and licensed so that you will get an only accurate and authentic result. The software can save the data on the machine and can access later in the emergencies. With growing business and technology, most trucking companies using the software for their business.
Building React Components
Tags: help, react
Published: 2019-11-27 06:46:24

I have a React project, created with `npx create-react-app` where I implemented a handful React Components. I don't really see this project as an "React application", as it's just a personal library of Components I consume in another project, an HTML web application rendered using server-side technologies. My goal  is to gradually replace parts of this application with React components. I don't really envision it becoming a single React application, my plan is just to replace the parts I think make sense to be developed with React.

I have no issue implementing these components - I'm using Storybook to organize the independent modules. But I'm struggling with the build process.

If I run `npm run build` I create a single application, based on the original React application code bootstrapped by `create-react-app`, which I essentially abandoned in favor of the Storybook setup. If I add the files generated by `npm run build` my project, I can't get React to render my components properly.

I managed to get a manual build process to work:

- In my HTML project I add https://unpkg.com/react@16/umd/react.production.min.js and https://unpkg.com/react-dom@16/umd/react-dom.production.min.js
- For each of my React components source files, I run `npx babel --presets react-app/prod src/MyComponent.js -o build/mycomponent.js`
- Then I combine all the `npx babel` outputs in a single `components.js` file, adjusting some repeated functions that appear on the top of all files, and suppressing the `import` and `export` statements.
- I load the `component.js` file in my HTML project, and I can create my components using plain JS:

```
ReactDOM.render(
    React.createElement(MyComponent, {param: value}, null),
    document.getElementById('myComponent')
);
```

Is there a better process to build my components to a single JS file I could consume in my HTML application?
Best Web Developer Accounts to Follow on Twitter?
Tags: watercooler, discuss
Published: 2019-11-27 06:16:39

I have recently been trying to increase my social media presence in the web developer community, but am having trouble gaining traction. I tweet on a regular basis but without any followers yet I feel as if I am shouting into the void.

I have been following loads of "programmers" but I thought I'd ask the DEV community who they follow. Any and all recommendations would be greatly appreciated!


Also, I have linked my DEV profile below so feel free to give me a follow or a shout!

{% user ajtruex %}
Monit Issues
monit error Execution failed | Does not exist
Published: 2019-11-27 05:05:58

conda activate pricer_env

echo "pricer_env activated"

this is how i'm trying to activate conda env inside start.sh file

the code inside monitrc is as shown bellow

check process pricer with pidfile /var/run/pricer.pid

    start program = "/home/project/pricer/start.sh arguements" with timeout 60 seconds

    stop program = "/home/project/pricer/stop.sh arguements"
why i'm unable to start the process and why monit is not activating conda env .

[IST Nov 15 11:32:35] error : 'pricer' failed to start (exit status 0) -- '/home/project/pricer/start.sh uat pricer': /home/archana/project/pricer/start.sh: line 14: activate: No such file or directory

can someone help me in this issue #monit
3 ferramentas para analisar o site de seus concorrentes
Tags: tech
Published: 2019-11-27 05:22:06

---
title: 3 ferramentas para analisar o site de seus concorrentes
published: true
date: 2019-11-27 04:27:16 UTC
tags: Tech
canonical_url: https://marquesfernandes.com/2019/11/27/3-ferramentas-para-analisar-o-site-seus-concorrentes/
---

Já me perguntaram mais de uma vez se era possível saber a visitação de um site, embora para o público mais geek essa pergunta pareça ser besta, é um questionamento válido e normalmente é concluido com: “Gostaria de analisar o site de um concorrente”. Embora não seja possível ter acesso aos dados exatos sem ser o proprietário do site podemos com a ajuda de algumas ferramentas ter uma estimativa de visitação e até estratégias de palavras-chaves que os concorrentes estão utilizando.

> Mantenha seus amigos perto, mas seus inimigos mais perto ainda.

Confira abaixo algumas ferramentas que utilizo para analisar meus competidores.

## **[Similar Web](https://www.similarweb.com/pt)**

[![SimilarWeb](https://marquesfernandes.com/wp-content/uploads/2019/11/image-10-1024x503.png)](https://www.similarweb.com/pt)

[SimilarWeb](https://www.similarweb.com/pt) é uma ferramenta excelente para analisar quanto trafego seus competidores estão gerando.

Algumas funcionalidades:

- Estimativa de trafego
- Estimativa de tempo gasto no site
- Estimativa de taxa de rejeição
- Sites de referencia
- Estimativa de trafego por redes sociais

O serviço é gratuito, porém a quantidade de informação acaba sendo limitada mas vale a pena para uma estimativa inicial.

## **[Alexa](https://www.alexa.com/)**

[![Alexa](https://marquesfernandes.com/wp-content/uploads/2019/11/image-11-1024x503.png)](https://www.alexa.com/)

[Alexa](https://www.alexa.com/) é uma ferramenta dinossauro da internet, está entre nós há muito tempo gerando análises e rankings de sites desde que me conheço por programador. Não tão informativa quanto a SimilarWeb, oferece apenas algumas estimativas brutas, porém seu ranking de sites é um dos mais confiáveis da internet.

## [SEMRush](https://pt.semrush.com/)

[![SEMRush](https://marquesfernandes.com/wp-content/uploads/2019/11/image-12-1024x503.png)](https://pt.semrush.com/)

[SEMrush](https://pt.semrush.com/) é uma ferramenta versátil para analisar seus concorrentes e com uma interface bem intuitiva, excelente para monitorar seus concorrentes.

Algumas funcionalidades:

- Estimativa de trafego orgânico e pago
- Variação de resultados em buscas
- Palavra-chave que seus concorrentes estão rankeados
- Principais concorrentes

A ferramenta é gratuita porém limitada em 5 pontos de dados para suas análises.

O post [3 ferramentas para analisar o site de seus concorrentes](https://marquesfernandes.com/2019/11/27/3-ferramentas-para-analisar-o-site-seus-concorrentes/) apareceu primeiro em [Henrique Marques Fernandes](https://marquesfernandes.com).
Angular 8 - How to Add Dynamic Class?
Published: 2019-11-30 04:48:49

---
title: Angular 8 - How to Add Dynamic Class?
published: true
date: 2019-11-27 04:11:25 UTC
tags: 
canonical_url: https://www.itsolutionstuff.com/post/ngclass-how-to-add-dynamic-class-in-angular-8example.html
---

In this Angular 8 NgClass Example i will show you how to add dynamically add class in angular 8 using ng class we will apply dynamic CSS classes to the HTML element using the NgClass directive in angular 8 you can learn angular 8 add class dynamically using bellow examplesThere are several way
Priority Queues
Tags: computerscience, algorithms, datastructures, csharp
Published: 2019-11-27 04:09:36

## Resources

1. [Priority Queue Overview](https://www.interviewcake.com/concept/java/priority-queue)
1. [Short paragraph overview/why to use binary heap for implementation](https://runestone.academy/runestone/books/published/pythonds/Trees/PriorityQueueswithBinaryHeaps.html)

Takeaways:

* **Priority Queues** are often implemented using **binary heaps**. 
* Accessing the highest priority item (front of the queue) is _fast_. `O(1)` (constant).
* However, enqueuing/dequeueing (adding/removing) items is slower than regular queues at `O(log n)` (logarithmic). This is due to items having a priority - so each time an item is introduced/removed behind the scenes a reshuffling/ordering of the items might take place.
* Priority queues often get used in graph algorithms (like [Dijkstra's algorithm](https://en.wikipedia.org/wiki/Dijkstra%27s_algorithm) or [Prim's algorithm](https://en.wikipedia.org/wiki/Prim%27s_algorithm)). They can be useful for scheduling things as well - such as jobs/tasks. There is also an interesting [Microsoft Azure article](https://docs.microsoft.com/en-us/azure/architecture/patterns/priority-queue) explaining the use cases/patterns for priority queues.
* Space is `O(n)`.


As [I had just learned binary heaps](https://dev.to/jjb/part-7-learning-about-binary-heaps-289h), priority queues were straightforward. All I needed to do to implement one was alter my previous min-heap and add a thin class for the queuing operations.


Here's the finished implementation, with test code, of a priority queue with a min-heap (smaller means higher priority). For readability, I moved the min-heap code _below_ the priority queue and `Main()` method:

{% gist https://gist.github.com/jbolton209/192bbabb1484a16f0626aae931bcaf4e %}

As always, if you found any errors in this post please let me know!