teleren/devto huggingface dataset:
HTML5 Video Picture-in-Picture Mode
Tags: javascript, video
Published: 2021-07-28 15:43:31

---
title: HTML5 Video Picture-in-Picture Mode
published: true
tags: javascript, video
cover_image: https://res.cloudinary.com/dzynqn10l/image/upload/v1627445548/JS%20Bits/Picture-in-Picture_-_Cover_dev-to_vqrzz1.webp
---

The native Picture-in-Picture API allows you to create a floating, pinned HTML5 video that overlays on top of your workspace. This API is seamlessly integrated into the `HTMLVideoElement` interface and is super simple to use:

```html
<video id="vid" src="my-video.mp4"></video>

<button id="pip-btn">Enter PIP</button>
```

```js
const vid = document.querySelector('#vid');
const pipBtn = document.querySelector('#pip-btn');

// On click of button, enter PIP mode
pipBtn.addEventListener('click', () => {
  vid.requestPictureInPicture();
});
```

And that's it! By calling `requestPictureInPicture` on the video element, our video will enter PIP mode:

<img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1627417689/JS%20Bits/rDRkgGNc2B_lledce.webp" alt="pip" width ="613" />

If required, this API also exposes the `enterpictureinpicture` and `leavepictureinpicture` events which you can leverage to run callbacks:

```js
vid.addEventListener('enterpictureinpicture', () => {
  pipBtn.textContent = 'Vid is now PIP';
  pipBtn.disabled = true;
});

vid.addEventListener('leavepictureinpicture', () => {
  pipBtn.textContent = 'Enter PIP';
  pipBtn.disabled = false;
});
```

Picture-in-Picture is supported in all modern browsers except Firefox, which has a similar proprietary feature.

#### Here's a quick tutorial video of me using the Picture-in-Picture API:
<a href="https://www.tiktok.com/@js_bits/video/6989996588286364934" target="_blank">
  <img src="https://res.cloudinary.com/dzynqn10l/image/upload/v1627418420/JS%20Bits/pip-vid_kcdxb9.webp" alt="pip-vid" width ="619" />
</a>

<b>Yo!</b> I post byte-sized tips like these often. Follow if you want more! 🍿

----------
Check out more #JSBits at my blog, [jsbits-yo.com](http://jsbits-yo.com/). Or follow me on [Twitter](https://twitter.com/JS_Bits_Bill) and [TikTok](https://www.tiktok.com/@js_bits?lang=en).
First Fullstack Web App
Tags: javascript, ruby, rails
Published: 2021-07-28 15:32:35

After separately learning Ruby on Rails and then Javascript, it was finally time to bring the two together for a fullstack project. Using JS/HTML/CSS for the frontend and a Ruby on Rails API for the backend, I built a fully functioning note taking app. A user can create, read, and delete notes. They can then create, read, and delete the relevant tags to each of their published notes.

One interesting thing I gained from working on this project was a greater appreciation for the websites I encounter on the daily. I learned that building an application that can digest a variety of events and correctly assume the behavior of users is definitely more complex than I had initially thought. And then furthermore, being able to organize and build the code such that it is flexible for scaling is super impressive.  

Some of the challenges I faced were with regards to organizing the JS code. At first, I had written all the code in one file and separated the blocks of associated code into sections delineated by a comment that described that section of the code. After I had the full application successfully running, I wanted to extract some of the repeated code into class object files associated to each of the models: Note and Tag. Once I had these multiple files working together, I had trouble determining how to distinguish the purpose of each file. Should the class object be responsible for fetching data from the backend or should it be responsible for rendering the data to the frontend? None of the actual coding was all that challenging once I knew what I needed to do, but tackling this last question was definitely the hardest part. But I figure this will likely be solved with personal experience and from reading others' codes.

Looking forward to continuing to grow!

Here's the link to my repo:
https://github.com/sallyman128/mod4-final-project
The const keyword does not create immutable variables
Tags: javascript, react
Published: 2021-07-28 15:25:02

## An introduction to the `const` keyword

The value of a variable created with the `const` keyword can't be changed. Although this statement is true in the case of primitive values, it is complicated when it comes to objects and arrays.

For objects and arrays, only the reference to the memory location that contains the data is stored in the variable. So the data underneath can be changed without changing the reference

Example:

```javascript
const foodsILike = ['Shwarma']
foodsILike.push('Jalebi')
console.log(foodsILike) // => ["Shwarma", "Jalebi"]
```

In this example, we created an array with the `const` keyword and were still able to add items to it

## What is immutability and why is it important?

Functional programming techniques and design patterns are very common in the Javascript world. We have tools like RxJS which bring reactivity to Javascript. Redux also depends on its state to be immutable. As a JS developer, you must take care that you do not mutate the state directly while updating it. [In Redux, **our reducers are _never_ allowed to mutate the original / current state values!**](https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers).

To prevent issues like these from occurring, you want to make your data immutable.

## Using the `Object.freeze()` method

The `Object.freeze()` method `freezes` an object (duh!). What does this exactly mean? A frozen object cannot be edited. New properties cannot be added and existing properties cannot be removed or modified in any way.

```javascript
'use strict'
const obj = {
  prop: 42,
}

Object.freeze(obj)

obj.prop = 33
// => TypeError: "prop" is read-only
// => will fail silently in non strict mode
```

There is however, a flaw to this approach

```javascript
'use strict'
const obj = {
  prop: 42,
  propObject: {
    name: null,
  },
}

Object.freeze(obj)

obj['propObject']['name'] = 'Burhan'

console.log(obj)

/**
{
  prop: 42,
  propObject: {
    name: "Burhan"
  }
}
*/
```

This works perfectly fine since we are not modifying any properties of the frozen object directly.

You could use the [deep-freeze](https://github.com/substack/deep-freeze) package that recursively freezes all your objects

```javascript
var deepFreeze = require('deep-freeze')

deepFreeze(Buffer)
Buffer.x = 5
console.log(Buffer.x === undefined)

Buffer.prototype.z = 3
console.log(Buffer.prototype.z === undefined)

/**
true
true
*/
```

This will help you prevent issues with mutations

## Conclusion

The `const` keyword creates a read-only reference to a value. It does not mean that the value itself is immutable. It's just that the variable identifier cannot be reassigned

If you plan on using immutable objects with React or Redux, check out [ImmerJS](https://github.com/immerjs/immer). It enables you to create new objects without writing extra code for deep clones. It also has some great utility hooks to use with React
Covid Data Visualisation App Three JS - [Code Overview]
Tags: javascript, webdev
Published: 2021-07-28 15:24:43


{% youtube ZQ3vgnMgbUQ %}
3D visualisation tool showing daily cases for covid in England - uses threejs-starter-kit and gov.uk api

Try it out 
https://drnoir.github.io/3D-Covid-Visualisaton/

Source 
https://github.com/drnoir/3D-Covid-Visualisaton
Getting to know Flutter: Pull to refresh with online data
Published: 2021-07-28 15:15:35

Hi there! How you're doing? Everything's all right? Good. Today we 'll be doing a pretty easy task, a **pull to refresh**, while using a **CMS** in order to have online data and having more control on our example. Let's start!
 

## What we'll need

Our ingredients will be:

- A CMS account (we'll be using **MBurger** as it is free to start)
- Android Studio
- **Flutter** basic knowledge

I think it's a pretty easy recepie but it will also be very juicy!

Check the [full article here](https://theotherdevs.com/getting-to-know-flutter/getting-to-know-flutter-pull-to-refresh-with-online-data/)!
Hello World
Published: 2021-07-28 15:03:47

hello guys!!! I'm new here. I intend to switch from being an Urban Planner to a Web developer. I really need help and encouragement from you guys. I started already with HTML & CSS, now I wanna know more about JavaScript and Python. It's really tough, you know!! 

I really don't know which materials I need and how to go about it. And I really need a mentor. Please any reference?
Security guard service in Dhaka
Published: 2021-07-28 15:02:16

We offer our security service fees as under:

24 hours duty Security Guard two persons 24000/= including Vat.

On signing the security service contract, two months security service bill to be paid in advance which shell be adjusted/refunded at the time of expiry/termination of the contract.
 
A security service contract to be signed for a minimum period of two years.

After one year the service charge will be increased by 10%. Minimum 15 days time to be allowed for deployment.

Therefore, we shall remain obliged if you kindly allow us to serve you/your esteemed organization in near future. We shall exert our commitment to protect you and your valuables with highest level of professionalism and dedication as per your requirements.
For further queries or security need kindly call us at 0161772277 
                                                or visit-
                                   www.security.com.bd
Automated converter for convert among Figma, Xd and Sketch 
Tags: ux, design
Published: 2021-07-28 14:45:51

Hello everyone,
There are three main desing platforms figma, xd and sketch for ui/ux designers. I will be glad to know if anyone feels the need of a automated converter that can convert a design among figma, xd and sketch within a few seconds.

Thank you
What software should I use for designing my website?
Tags: websitedesign, webdesign, website
Published: 2021-07-28 14:39:58

The software which you can use for designing your website are as follow:

1. Adobe XD

It offers the best environment for digital projects under the Adobe Creative Cloud suite. Along with its vector and wire frame tool the additional auto-animation makes this software perfect.


2. WordPress

This software offers thousands of themes and is one of the widely used software and also the most popular one. It’s easy and straightforward to publish content in the blink of an eye with an amazing Content Management System (CMS).


3. Sketch

Sketch is also one of the most widely used web design software been used. It is a highly powerful vector based tool for building interfaces and prototypes in a collaborative way. Sketch is faster and more efficient and also there is no unnecessary features cluttering the interface.


4. Webflow

Webflow is a no-code platform making it perfect for those who are not at all in coding with all-in-one responsive web design.


5. Figma

Figma is an interface design tool that enables multiple designers to collaborate in real-time. It is similar to Sketch with an exception of being cross-platform.


Do you know want to create a new design or want to re-design an existing one. We are there to help you with all your concerns.

Contact us to get the help of our expert web designers and check out our website design services today!

Need help in designing your website or you need any other website or marketing services.

Pixel Street | Best Web Design Company In Kolkata
We are the new age web design company offering creative web design solutions to companies.
https://pixelstreet.in/
How to add Images to Our page ?
Tags: css, vscode, html, webdev
Published: 2021-07-28 14:38:03

Hello Guy's 😊

Here I am with one more topic that is "How to add Images ?". Images in web pages makes it more attractive to users. 

In this post we will learn to add images to your webpage.

Let's Start 👩‍💻👩‍💻

Image is added using <b>img tag</b> in HTML. It consist of two attributes <b> "src" </b> and <b> "alt" </b>. <b> "src" </b> attribute is used to specify the path of image. If your image is in the same folder then you need to write"./" and select the image from the option. If your image is at a different location then you provide the complete path to the image. If you want to fetch image from some website then just provide the link in src attribute.

<b> "alt" </b> attribute is used to add alternate text. Sometimes it happens that your image is not loaded. At that time you can add alternate text to the image.  You can see the code and follow it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01442lgnkice6lh000sq.PNG)


Output : 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2h7ubs4roj33k9kl718i.PNG)

You Can also give height and width to the image. To do so you just need to add height and width inside img tag. You can refer the code below

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

You can add more styling to your image by writing style in img tag and add styling to your image.

So that's it for today. I know that this is a very small post but is an important topic. Try this at your end. 

Meet you in the next post till then Happy Coding 👩‍💻👩‍💻👩‍💻
Test your MongoDB connectivity with mongoose
Tags: mongoose, mongodb, node
Published: 2021-07-28 14:36:46

I was building an app in which I need to switch database from the UI. In that situation we need to update the parameters of connexion and validate them, we need to test if the connexion can be etablished.

using mongoose

```shell
$ npm install mongoose
```
In your testing code file

```js
const mongoose = require("mongoose");
const server = "127.0.0.1";
const authDb = "admin";
const database = "purgenie";
const user = "memel";
const password = "yourP@ssword";
const port = "127017";

let options  = {};
password = encodeURIComponent(password);
const uri = "mongodb://"+user+":"+password+"@"+server+ ":" +port+"/"+database+"?authSource="+authDb;

mongoose.createConnection(uri, options).then(()=>{
	console.log("Connexion succeed");
}).catch((err) =>{
	console.error(err);
});

```
Best Chrome Extension Which can help you while you are coding.
Published: 2021-07-28 13:52:31

I have seen some of the article on google chrome extensions and as usual sharing it with you guys...


As a designer/developer we use google chrome in daily life. That's why I brought the top 10 google extensions to make your work easy, We have a modern browser that is always upgraded by developers. I have brought 10 browser extensions today that will help you in coding.

[8 Best Google Chrome Extensions for Web Designers And Developers in 2021](https://cmsinstallation.blogspot.com/2021/04/10-best-google-chrome-extensions-for.html)


As developers, I can bet that you already have a nice collection of daily go-to tools. After all, they are there to make your life easier and improve productivity. Chrome is pretty awesome with built-in tools and matching it with these Chrome extensions will only make developers’ lives that little bit easier. This is why I have collected some of Anima’s engineer teams’ favorite Chrome extensions and put them together to share with you.

[5 essential Chrome extensions for developers](https://www.animaapp.com/blog/industry/5-essential-chrome-extensions-for-developers/)


A couple of months ago, we reviewed the new Firefox browser designed for developers. Since then most of our developers kept Google Chrome as their primary browser. Working with Chrome offers access to an immense repository of Chrome extensions and tools which make our daily tasks less of a chore. With the built-in developer tools, there seems to be no further need for more tools. However, I’d like to present you with 16 of the best Google Chrome extensions for developers.
[16 extremely useful Chrome extensions for developers](https://usersnap.com/blog/chrome-extensions-for-developers/)

If you’re a developer, you will likely already have a collection of favourite Chrome extensions you use on a daily basis. Extensions that make life easier, make you more productive or perform an essential task better than a dedicated tool. This list may build on that collection.

[28 of the Best Chrome Extensions for Developers in 2021](https://wpastra.com/chrome-developer-extensions/)
Django with whitenoise.storage.CompressedManifestStaticFilesStorage on Heroku
Tags: django, python, heroku
Published: 2021-07-28 13:46:41

I had been having trouble deploying the Django app to Heroku with "whitenoise.storage.CompressedManifestStaticFilesStorage."

# Premise

* Use docker
* Django 3.2.4
* whitenoise 5.3.0

## Deploying flow

1. Push to GitHub
2. Build a container image from a Dockerfile in CircleCI
3. Push the container image to Heroku

In this time, mistakes were in the flow 2.

# Mistakes

`settings.py` was below:

```python
# ...

DEBUG = os.getenv('APP_DEBUG', 'true') == 'true'
APP_ENV = os.getenv('APP_ENV', 'dev')

# ...

MIDDLEWARE = [
    # ...
    # @see https://devcenter.heroku.com/articles/django-assets
    'whitenoise.middleware.WhiteNoiseMiddleware',
]

# ...

STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
# STATIC_URL = '/static/'
STATIC_URL = '/assets/'
# STATICFILES_DIRS = [
#     BASE_DIR / "static",
# ]

if APP_ENV == 'prod':
    # Error!
    STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
    # OK. Why?
    # STATICFILES_STORAGE = 'whitenoise.storage.CompressedStaticFilesStorage'
```

It was OK to run on Heroku with "whitenoise.storage.CompressedStaticFilesStorage", but Error500 raised when using "whitenoise.storage.CompressedManifestStaticFilesStorage".

# Cause

The cause was in Dockerfile. `APP_ENV=prod` and `DEBUG=false` were set in Heroku, but these environment variables were not added in CircleCI. Therefore the correct container image didn't run on Heroku.

# Fixed

Fixed `Dockerfile` as follow:

```yaml
# ...

# Added lines below.
# Django: Collect static
ENV APP_ENV=prod APP_DEBUG=false
RUN rm -rf assets && python manage.py collectstatic --no-input

# ...
```
PSA: Stop using Streams and Reader/Writers to Convert Strings/ByteArrays
Tags: csharp, codequality, dotnet
Published: 2021-07-28 13:16:37

Stop doing this :

```csharp
using (var memory = new MemoryStream())
{
    using (StreamWriter writer = new StreamWriter(memory, Encoding.ASCII))
    {
        foreach (var lineData in dataLines)
        {
            writer.WriteLine(lineData);
        }
        
        writer.Flush();
        return memory.GetBuffer();
    }
}
```

Just... do this instead :

```csharp
return Encoding.ASCII.GetBytes(lineData.Join("\n\r"));
```

Trust me, it's not worth using streams unless you **explicitly** need to.
UI Dev Newsletter #67
Tags: html, css, javascript, beginners
Published: 2021-07-28 13:10:36

- [Resource inlining in JavaScript frameworks](https://web.dev/aurora-resource-inlining/)
Minko Gechev shows how to improve Largest Contentful Paint across the JavaScript ecosystem by inlining Critical CSS.


- [Detecting media query support in CSS and JavaScript](https://kilianvalkhof.com/2021/web/detecting-media-query-support-in-css-and-javascript/)
Kilian Valkhof shows how to detect support for media queries regardless of if they are turned on.


- [Using the Specificity of :where() as a CSS Reset](https://css-tricks.com/using-the-specificity-of-where-as-a-css-reset/)
Mojtaba Seyedi explains how to use the 'where()' selector to reset the weight of the selector for easier overriding.


- [Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property](https://www.bram.us/2021/07/23/prevent-unwanted-layout-shifts-caused-by-scrollbars-with-the-scrollbar-gutter-css-property/#classic-vs-overlay)
Bramus Van Damme explains how developers could control a side-effect when showing scrollbars on the web to avoid layout shifts.


- [The Ultimate Cheat sheet List For Web Developers](https://dev.to/insha/the-ultimate-cheat-sheet-list-for-web-developers-2i9i)
Insha Ramin shares some quick and helpful cheat sheets that'll save you hours in wasted time each week.


- [Chrome DevTools: Easily control typography with the CSS Font Editor](https://umaar.com/dev-tips/244-font-editor/)
Umar Hansa shows how to use the font editor within the styles pane to change typography on a web page quickly.


- [How To Learn Stuff Quickly](https://www.joshwcomeau.com/blog/how-to-learn-stuff-quickly/)
Josh Comeau shares what he has learned about learning and shows how he pick up new skills lickety-split.


- [PageSpeed Compare](https://pagespeed.compare/)
Sander Heilbron shares a project that allows you to compare performance metrics of your pages against each other or your competitors using Google PageSpeed Insights.



Happy coding!

[Subscribe to the newsletter here!](https://buttondown.email/starbist)
AMP, já era?
Tags: amp, seo, web, html
Published: 2021-07-28 13:09:18

AMP é um framework HTML criado pelo google para criação de páginas otimizadas para um carregamento instantâneo em dispositivos móveis. Em maio de 2021, o Google avisou que vai parar de priorizar sites AMP nos mecanismos do ranking de busca.

Mesmo com essa notícia, o PWA ainda é muito utilizado, tem muito espaço e muitas vantagens. É na parte das vantagens que vou focar nessa postagem.

O principal resultado do uso dessa tecnologia é a melhora da experiência do usuário em utilizar sites e também melhorias no ranking de buscas para SEO.

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

O ganho expressivo de velocidade de carregamento de páginas em um site com AMP se deve a utilização de um conjunto de especificações no HTML, que são impulsionadas pelo uso de Javascript, mas o principal fator é devido a rede de cache do próprio Google que funciona como uma [CDN](https://www.gocache.com.br/cdn/), que guarda uma versão daquela página para acesso imediato.

O AMP não é apenas um framework para performance. Seus [componentes HTML](https://amp.dev/support/faq/platform-and-vendor-partners), fáceis de usar, também auxiliam na criação de páginas com elementos dinâmicos e funcionalidades como outros sites. Como é um projeto aberto para comunidade, surgem novos componentes e melhorias constantemente.

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

Muitos sites de notícias e conteúdos em geral estão utilizando AMP, como [The Washington Post](https://www.washingtonpost.com), ecommerces como [Ebay](https://www.ebay.com), sites de eventos, como [EventBrite](https://www.eventbrite.com) etc.

Mais recentemente o AMP tem expandido para outras áreas como páginas HTML por [email](https://amp.dev/about/email) e [ads](https://amp.dev/about/ads). Com essas novas expansões, ele pode levar as vantagens que são aplicadas no sites, para novos serviços que demandam renovação tecnológica.

Enfim, se seu site é mais rápido, logo ele é mais competitivo e converte mais vendas/visitas. Pesquisas mostram que páginas lentas podem aumentar em mais de 100% a taxa de rejeição e desistência de pessoas a esperar uma página de carrega lentamente.

---

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀
Basic React Component Layout
Tags: react, javascript, html, css
Published: 2021-07-28 13:08:37

React js one of the trendy programming languages, comes defaultly with Class based component...
Today we'll be going through the structure of  the basic Function Component Layout in react Js..

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

Firstly this here is very simple , and I love it because by code looks more clearer ..
This is an alternative for Class based component and they work the same way..
One of the major difference between the two ways is that the Class based component has a method called render()... which sometimes is the fastest way to differentiate them and this depicts a lifecycle method.. whereas 
Functional based components has no render()..


As I said earlier.. functional based components
makes code structuring more understanding.