teleren/devto huggingface dataset:
sendBeacon vs xmlhttp (keeping the page unload and visibility out of picture)
Tags: javascript, browser, threading, analytics
Published: 2020-09-05 04:27:36

>Is using **sendBeacon** in place of **xmlhttp** more _performant_ is the confusion I was trying to resolve for few days. Any pointer would be really helpful.

So, the use case is what happens when sendbeacon is used in place of xmlhttp(async) for requests made from a page's javascript _in general_ (Various resources seem to focus only on the **unload and visibility change** part of it, where you want to send some data and there sendbeacon performs better). 

####Few questions here:

1. The javascript code from where I fire the request, is executed in the **main thread of render process of browser**, when it makes the xmlHttp send (async) call with an _onreadystatechange_ listener, the request is delegated to the _network process_ and the main thread can continue with its work in parallel (what happens in case of synchronous xmlhttp?) ? and the _onreadystatechange_ listener code is run again by main thread and it will eat up CPU cycles from main thread?

2. How is the above process different if I use _sendBeacon_ ? The _sendBeacon_ queue and it processing is managed by which process and thread? It doesn't have the listener overhead and the browser can schedule and execute it entirely on a separate thread (is this a thread in the network process? ) ?

3. In which case **fps** will be high ? (it's directly related to how much _main thread and compositor_ is free and not blocked by javascript either in the same thread or response on an IPC between _main thread and compositor_ correct?

Some refs that I looked into:
1. [Chrome multithreading](https://developers.google.com/web/updates/2018/09/inside-browser-part4)
2. [Using sendBeacon] (https://www.smashingmagazine.com/2018/07/logging-activity-web-beacon-api/)
Photography masking service
Tags: imagemasking
Published: 2020-09-05 04:25:44

 <a href="https://clippasia.com/image-masking-services">image masking service</a> is going to be image-painting on a new canvas. A complicated representation of taken care of transparency in shot masking service manipulates the image artistically. Hence, image exemplifies an important sensation change in the images and so appraised from the product marketing internet business.
Finding your "Why"
Tags: beginners, career, practice, projects
Published: 2020-09-05 03:59:15

As a developer, many of us struggle with choosing our own projects. We run into questions like:
  - What project should I choose? 
  - What language should I learn? 
  - What API should I implement?
    
## Finding My Own
My take on answering that question for myself goes back to the reason of "why" I choose software development in the first place. When setting out to build my most recent personal project - [postpandemic](https://postpandemic.herokuapp.com/) - my goal was to somehow make a difference. I wanted to create something more than just an app, but I wanted to give users a little more joy in their day, a little hope while enduring one of the more difficult times of many people's lives. 

![postpandemic](https://imgur.com/ASuoc72.png)


When I think about "why" I chose to learn to code, I think about all of the possibilities I could use it for.  _*What Can Be Done*_ , and *_What Do People Need_*. More specifically, **I think about making something that is going to make that big difference, and be meaningful for somebody.**

![Hmmm](https://media.giphy.com/media/10bDoTtJhtcHu0/source.gif)

## Finding Meaning
I know, I know. There are tons of websites and apps out there, how can I come up with one that hasn't been done before!? Some of the best tips I have found for aspiring new developers looking for their first coding job is to practice by moving from coding tutorials to building your own simple projects [app ideas](https://daveceddia.com/react-practice-projects/). This will help them learn, stay fresh, and keep their github active. 

I love it. 
I think this TOTALLY makes sense! 
But how do you make them unique? 

Well...

## What is **_YOUR_** "Why"?
My suggestion when looking through lists of project ideas, or when getting stuck coming up with your own, is to find your "why". What would be YOUR goal you would like to see come from the project? Can you find something in them that might be helpful in some way? Can you make the project be more meaningful to someone? 

## OK...but really...Why
Alright, so you might be wanting some more specific examples. 
Here are just a few ways that finding your own "why" might just help improve someone else's app idea, or better your own:
  - More User Friendly
    - improved layout, user flow, error messages
  - More Accessible
    - bigger buttons, larger font, better color contrasts, screen reading, dark mode
  - New/improved functionality
    - example - providing text alerts when pizza is at your door
  - Putting a new spin to the current functionality that might provide new meaning
    - example - a trail map application that might be useful for other recreational users

I would love to hear more about your own "why", and what makes you want to code!
I quit my job as an Engineering Manager to be an Entrepreuneur (again)!
Tags: career, productivity
Published: 2020-09-05 03:15:26

It's been a month since I quit my job as an Engineering Manager to be an entrepreneur again.

*I was working remotely.
I had flexible hours.
My pay allowed me to save more than half of my income.*

**But I nevertheless decided to do it.**

I was promoted to Manager in less than two years, from a Software Developer position and I was really excited about it, however I realized I fell into the *Paradox of Success*:

the success I built by working deeply as a Frontend/React developer on a codebase that served more than 100 million users was because I was able to be very productive with my time.

In my two years I contributed to more than 500 commits to production code, by far more than anyone else.

However, as a Manager, I was literally forced to attend many meetings where my contribution was less than 5 minutes out of the whole hour. Every day of the week, multiple times a week. We have a little one at home, and we all suffered the consequences of being so distracted and having to spend extra time to make up for all the shallow work. My mental and physical health was hitting rock bottom.

Now, fast-forwading to where I am, I am hurting from losing my income and taking over a behemoth of a project, but I am proud of what I did and working better than ever.

Physically, I'm feeling great and mentally slowly getting there (I have off days, but they are the no longer the majority of my days).

I've learned more than I would have if I didn't quit; I am currently reading an Advanced Mysql book (my weak point in CS so far) and working heavily on the Figma designs:

![image](https://user-images.githubusercontent.com/3508123/92296356-7234ff80-ef66-11ea-9ff6-026b7f746f99.png)
*(Note: I am not a designer! So for me, simple designs like this are already a big milestone).*

Now, if anyone asked me whether it makes sense or not to quit... I trully don't know, all I know is that it is important not to become *more* stressed.

We do have about 8 to 10 months saved in the bank.

It's not my first time as an entrepreneur on a big project, and funny enough it's the second time I quit my job at this company. But if anyone has experience being in a similar situation I'm happy to hear your thoughts and experience!

**Currently reading:**
- ["Essentialism"](https://www.amazon.com/Essentialism-Disciplined-Pursuit-Greg-McKeown/dp/0804137382) by Greg McKeown.
- ["Deep Work"](https://www.amazon.com/Deep-Work-Focused-Success-Distracted/dp/1455586692) by Cal Newport (reading of for the second time -- a must read for entrepreneurs!).
- ["High Performance MySQL"](https://www.amazon.com/High-Performance-MySQL-Optimization-Replication-ebook/dp/B007I8S1TY/ref=sr_1_1?dchild=1&keywords=high%20performance%20mysql&qid=1599274823&s=digital-text&sr=1-1).
IONIC Como funciona?
Published: 2020-09-05 03:11:36

En IONIC 4 cambiamos de Cordova a Capacitor, 
Una aplicacion hibrida es una aplicaicon que es programada en HTML, CSS, Javascript; pero se envuelve en un contenedor para correr en el dispositivo IOS o Android. 

IONIC en su version 4 tenia un cambio fundamental de cordova a capacitor, otra cosa es que no solo angular es el unico framework disponible para el desarrollo web.  Una ultima cosa es que cambio la forma de su navegacion, hacia un router nativo.

#Instalacion
Debe tener una version superior a la version 10 de Node; npm debe ser la version 6 o superior.

```
ionic start
```
Con este comando te pide crear un nombre para la aplicacion.  En este momento aparecen los templates, para un proyecto vacio seria blank.

Otros templates son:
- Side Menu: En el que se presenta un menu lateral.
- Tabs: Projecto en blanco con 3 tabs y su navegacion.
Se pueden ver los templates disponibles
```
ionic start --list
```

Se crea una estructura similar a angular.  Se puede verificar con ionic serve como esta el estatus de la aplicacion.
Tracery + Ink
Tags: if, interactivefiction, tracery, ink
Published: 2020-09-05 02:49:45

---
title: Tracery + Ink
published: true
description: link context free grammars with an interactive fiction language 
tags: if,interactivefiction, tracery, ink
//cover_image: https://direct_url_to_image.jpg
---

https://videlais.com/2019/06/08/tracery-ink/

A discussion of creating a javascript based interactive fiction work using Tracery and Ink.
The Day I Wanted to Give Up
Tags: motivation, devpride, codenewbie, csharp
Published: 2020-09-05 02:34:45

Day 26/100 #100daysofcodechallenge  "The day I wanted to give up"
(Hopefully the video isn't too laggy) 
I just had to share what I learned today on video.

I've shared a lot of my wins lately. But it's not all wins. Every day isn't going to be flawless, but if you keep going especially through the struggles, you will come out a better programmer/person/etc.

 {% youtube T3n5DKG_kEU %}

Cliffnotes: 
"Don’t give up.
I didn’t give up today and now I have this game to share with you all. 
If you are getting frustrated, breathe, step away, clear your head and come back to it.
Just don’t give up."
Promedio movil en TradingView Pine
Tags: tradingview, pine, programming
Published: 2020-09-05 02:11:18

Vamos a ver como graficar un promedio móvil usando el lenguaje Pine de TradingView

1 Abra el Pine editor 
2 Introduzca el siguiente codigo
3 Anexe el Script al gráfico que usted desee Analizar


// This source code is subject to the terms of the Mozilla Public License 2.0 at https://mozilla.org/MPL/2.0/
// © twitter @charlygarcia120

//@version=4
//Multi EMA
study(title="Multi SMA", shorttitle="Multi SMA  charlygarcia120", overlay=true)
src = close, 
len4 = input(10, minval=1, title="SMA 1")
sma1 = ema(src, len4)
plot(sma1, title="SMA 1",  linewidth=1, color=color.red)

Si desea cambiar el numero de elementos sobre los cuales se toma el promedio movil, debe cambiar el primer parametro a la siguiente funcion:

input(10, minval=1, title="SMA 1")

Grafico

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

Espero les sea de utilidad
How to use self-hosted fonts in Nextjs
Tags: nextjs, javascript, react, webdev
Published: 2020-09-05 01:35:25

[Nextjs](http://nextjs.org/) is a React framework that gives you pretty much everything you need for production out of the box including hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching. Super fun tool to play with and I am a big fan now.

The recent project I worked on used Nextjs. It was fairly simple and straightforward, however, I found using self-hosted fonts on Nextjs a bit tricky.

Maybe I didn't do a good job searching but there wasn't much info on how to add fonts in Nextjs. Turned out, it works just like using regular self-hosted fonts ( font-face ) in a traditional way but with some extra steps.

First, you need to create a `/fontsfolder` inside `/publicfolder` and add all the fonts you wish to use( .eot, .woff, .woff2, .ttf ). Then, create a CSS file in the same folder as these font files ( `/public/fonts/fonts.css` ).

Once fonts.css is created, you can import your font(s) in there using `@font-facelike` so:

```javascript
// fonts.css
@font-face {
  font-family: 'your-font';
  src: url('your-font.eot');
  src: url('your-font.eot?#iefix') format('embedded-opentype'),
    url('your-font.woff2') format('woff2'),
    url('your-font.woff') format('woff'),
    url('your-font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
...
...
```

In a typical web build, you link this fonts.css file in HTML file using `<head>` tag, but in Nextjs, you need to add it to `_document.js` like this:

```javascript
// _document.js
export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link rel="stylesheet" href="/fonts/fonts.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
```

Usually, `_document.js` file is located under `/pages` folder.

Once that's done, you are good to go! All you do is just reference the font-family in your CSS.

##Opinionated: Be more efficient

To make things more efficient and flexible, I like making constant files for page data and import it as needed. By doing this, you can update/change data without going into each file. Here's an example for font constant file:

```javascript
// constant/fonts.js
export const MAIN_REGULAR = 'your-font-regular'
export const MAIN_BOLD = 'your-font-bold'
export const SECONDARY_REGULAR = 'your-secondary-font-regular'
```

Then in your project ( assume you are using CSS-in-JS, below is an example using Material-UI ), use it like this:

```javascript
// SomeComponent.js
import { makeStyles } from '@material-ui/core/styles'

import * as Font from '../../../constant/fonts'

const useStyles = makeStyles((theme) => ({
  text: {
    fontFamily: Font.MAIN_REGULAR,
    fontSize: '32px',
  },
  ...
  ...
}))
```

That's it! You can do this with all other data like URLs, theme colors etc.

Hope some of you find this helpful:)

Please share if you like what you just read. Thank you!
Learn git commands in 3 minutes
Tags: github, git, amannvl
Published: 2020-09-05 01:13:17

Refer the below Youtube Video link for better understanding.

https://youtu.be/4hLeQ6FEquY


Commands are -

For push-
 git init

git remote add origin https://gitlab.com/crew-chief-systems/bot

git remote -v (for checking current repository)

git add -A(add all files)

git commit -m 'Added my project'

git pull --rebase origin master

git push  origin master

For Global registratrtion-
 git config --global user.email "you@example.com"
 git config --global user.name "Your Name"


/// For pushing updates to Repo ---

git fetch origin master

git pull origin master

git add .

git commit -m 'your commit message'

git push origin master
How to deploy Django Web App on Ubuntu AWS EC2 with nginx Configuration
Tags: aws, django, webdev, ubuntu
Published: 2020-09-05 00:57:40

Hey you can deploy your website by following this link.

Here's a Youtube Video link

https://youtu.be/L8-8b8BBR5U

Just follow the exact steps and you'll do it within 30 minutes.

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install python3-venv
python3 -m venv venv
source venv/bin/activate
pip3 install django
git clone 'Your repo'
cd /yourRepo
pip3 install gunicorn
sudo apt-get install -y nginx
gunicorn --bind 0.0.0.0:8000 aoo.wsgi:application { to view the running app }

sudo apt-get install supervisor
cd /etc/supervisor/conf.d
sudo touch gunicorn.conf
data to enter -

[program:gunicorn]
directory=/home/ubuntu/resume/djangoResume
command=/home/ubuntu/venv/bin/gunicorn --workers 3 --bind unix:/home/ubuntu/resume/app.sock djangoResume.wsgi:application

autostart=true
autorestart=true
stderr_logfile=/var/log/gunicorn/gunicorn.err.log
stdout_logfile=/var/log/gunicorn/gunicorn.out.log

[group:guni]
programs:gunicorn

sudo mkdir /var/log/gunicorn
sudo supervisorctl update
sudo supervisorctl reread

cd /etc/nginx/sites-available
sudo touch django.conf
paste below code there-

server {
server_name yourIp;
server_name www.yourDomain;
server_name yourDomain;

    location / {
            include proxy_params;
            proxy_pass http://unix:/home/ubuntu/path/app.sock;

    }

     location /static/ {
            autoindex on;
            alias /home/ubuntu/path/static/;
            }
    location /media/ {
            autoindex on;
            alias /home/ubuntu/path/media/;
sudo ln django.conf /etc/nginx/sites-enabled/
sudo nginx -t

►Website (created using Django) - https://www.amannvl.me
►Facebook - https://www.facebook.com/amannvl
►Instagram - https://www.instagram.com/amannvl/
►Twitter - https://twitter.com/amannvl
How to start with PostgreSQL
Tags: postgres, webdev, django, sql
Published: 2020-09-05 01:09:17

You can refer to the below youtube link for better understanding.

https://youtu.be/nuVYte2Mu9Y

Commands are -

sudo -u postgres psql

CREATE DATABASE yourdbname;
CREATE USER youruser WITH ENCRYPTED PASSWORD 'yourpass';
GRANT ALL PRIVILEGES ON DATABASE yourdbname TO youruser;
How to shift from SQLite to PostgreSQL
Tags: postgres, django, webdev
Published: 2020-09-05 01:03:16

Here's the youtube video link.

https://youtu.be/nuVYte2Mu9Y

Here are the commands to do so.

CREATE DATABASE yourdbname;
CREATE USER youruser WITH ENCRYPTED PASSWORD 'yourpass';
GRANT ALL PRIVILEGES ON DATABASE yourdbname TO youruser;
How to integrate AWS S3 and AWS RDS PostgreSQL on Django Web App
Tags: django, aws, webdev, amannvl
Published: 2020-09-05 01:00:03

Hey you can deploy your website by following this link.

Here's a Youtube Video link

https://youtu.be/L8-8b8BBR5U

Just follow the exact steps and you'll do it within 30 minutes.

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install python3-venv
python3 -m venv venv
source venv/bin/activate
pip3 install django
git clone 'Your repo'
cd /yourRepo
pip3 install gunicorn
sudo apt-get install -y nginx
gunicorn --bind 0.0.0.0:8000 aoo.wsgi:application { to view the running app }

sudo apt-get install supervisor
cd /etc/supervisor/conf.d
sudo touch gunicorn.conf
data to enter -

[program:gunicorn]
directory=/home/ubuntu/resume/djangoResume
command=/home/ubuntu/venv/bin/gunicorn --workers 3 --bind unix:/home/ubuntu/resume/app.sock djangoResume.wsgi:application

autostart=true
autorestart=true
stderr_logfile=/var/log/gunicorn/gunicorn.err.log
stdout_logfile=/var/log/gunicorn/gunicorn.out.log

[group:guni]
programs:gunicorn

sudo mkdir /var/log/gunicorn
sudo supervisorctl update
sudo supervisorctl reread

cd /etc/nginx/sites-available
sudo touch django.conf
paste below code there-

server {
server_name yourIp;
server_name www.yourDomain;
server_name yourDomain;

    location / {
            include proxy_params;
            proxy_pass http://unix:/home/ubuntu/path/app.sock;

    }

     location /static/ {
            autoindex on;
            alias /home/ubuntu/path/static/;
            }
    location /media/ {
            autoindex on;
            alias /home/ubuntu/path/media/;
sudo ln django.conf /etc/nginx/sites-enabled/
sudo nginx -t

►Website (created using Django) - https://www.amannvl.me
►Facebook - https://www.facebook.com/amannvl
►Instagram - https://www.instagram.com/amannvl/
►Twitter - https://twitter.com/amannvl
How to deploy your Django Web App on AWS EC2 Instance
Tags: django, aws, webdev, python
Published: 2020-09-05 00:50:58

Hey you can deploy your website by following this link.

Here's [a Youtube Video link](https://youtu.be/L8-8b8BBR5U)

Just follow the exact steps and you'll do it within 30 minutes.

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install python3-venv
python3 -m venv venv
source venv/bin/activate
pip3 install django
git clone 'Your repo'
cd /yourRepo
pip3 install gunicorn
sudo apt-get install -y nginx
gunicorn --bind 0.0.0.0:8000 aoo.wsgi:application { to view the running app }

sudo apt-get install supervisor
cd /etc/supervisor/conf.d
sudo touch gunicorn.conf
data to enter - 

[program:gunicorn]
directory=/home/ubuntu/resume/djangoResume
command=/home/ubuntu/venv/bin/gunicorn  --workers 3 --bind unix:/home/ubuntu/resume/app.sock djangoResume.wsgi:application

autostart=true
autorestart=true
stderr_logfile=/var/log/gunicorn/gunicorn.err.log
stdout_logfile=/var/log/gunicorn/gunicorn.out.log

[group:guni]
programs:gunicorn


sudo mkdir /var/log/gunicorn
sudo supervisorctl update
sudo supervisorctl reread

cd /etc/nginx/sites-available
sudo touch django.conf
paste below code there- 


server {
        server_name yourIp;
        server_name www.yourDomain;
        server_name yourDomain;

        location / {
                include proxy_params;
                proxy_pass http://unix:/home/ubuntu/path/app.sock;

        }

         location /static/ {
                autoindex on;
                alias /home/ubuntu/path/static/;
                }
        location /media/ {
                autoindex on;
                alias /home/ubuntu/path/media/;



sudo ln django.conf /etc/nginx/sites-enabled/
sudo nginx -t


►Website (created using Django) - https://www.amannvl.me
►Facebook - https://www.facebook.com/amannvl
►Instagram - https://www.instagram.com/amannvl/
►Twitter -  https://twitter.com/amannvl
What is Yellow Duck? How do we use Yellow duck?
Tags: webdev, beginners
Published: 2020-09-05 00:07:45



If you try to live stream into Instagram from your desktop, you would not be able to. For that you can use a live streaming software called OBS. 



OBS uses a unique `streaming key` and a `server link` to live stream into your account but Instagram doesn't offer these.  

Now comes Yellow Duck to your rescue. 

##How do you use the yellow duck in OBS?

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

You login to Yellow Duck using your Instagram account, and voila! 

You get your account's `stream key` and `server link`

>Now, you can use these in OBS and you'll able to live stream into your Instagram account from your desktop.



OBS also used for live streaming into Facebook or YouTube and many other social links simultaneously.

*(there are other live streaming software as well, OBS is just the most popular)*  


I hope this helped !!
Happy to learn

_______

Visit my page that I have recently started to share and help others with learning to program. 
 **[Progressive Programmer](https://www.facebook.com/Progressive-Programmers-League-116342093426883)**