teleren/devto huggingface dataset:
Ways to play sounds on browser
Tags: webaudioapi
Published: 2021-02-09 06:20:19


Here are some lightweight code for playing sounds on browser

## Audio element:
- quick and easy setup
- comes with player and controls
<iframe height="265" style="width: 100%;" scrolling="no" title="Playing audio via file upload and audio element" src="https://codepen.io/Tzyinc/embed/wvWKzjb?height=265&theme-id=light&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/Tzyinc/pen/wvWKzjb'>Playing audio via file upload and audio element</a> by Ten Zhi Yang
  (<a href='https://codepen.io/Tzyinc'>@Tzyinc</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## Audio buffer
- better for short audio clips
- easy implementation to take audio from a fetch
- good for sound effects
<iframe height="265" style="width: 100%;" scrolling="no" title="Playing audio via file upload and audio buffer" src="https://codepen.io/Tzyinc/embed/OJXybbP?height=265&theme-id=light&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/Tzyinc/pen/OJXybbP'>Playing audio via file upload and audio buffer</a> by Ten Zhi Yang
  (<a href='https://codepen.io/Tzyinc'>@Tzyinc</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## Media stream
- to receive a stream from somewhere
- can take user devices, including mic and webcam
<iframe height="265" style="width: 100%;" scrolling="no" title="Playing audio via media devices and media stream" src="https://codepen.io/Tzyinc/embed/ZEObBav?height=265&theme-id=light&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/Tzyinc/pen/ZEObBav'>Playing audio via media devices and media stream</a> by Ten Zhi Yang
  (<a href='https://codepen.io/Tzyinc'>@Tzyinc</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## Oscillator
- for manipulating the sound wave directly
- good for creating micro-tonal sounds
<iframe height="265" style="width: 100%;" scrolling="no" title="Playing audio via oscillator" src="https://codepen.io/Tzyinc/embed/dyXYOqB?height=265&theme-id=light&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/Tzyinc/pen/dyXYOqB'>Playing audio via oscillator</a> by Ten Zhi Yang
  (<a href='https://codepen.io/Tzyinc'>@Tzyinc</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
gRPC TL;DR
Tags: grpc, protobuf, rpc
Published: 2021-02-09 06:19:27

---
title: gRPC TL;DR
published: true
description: basic information about gRPC 
tags: gRPC,protobuf, RPC
cover_image: https://cdn-images-1.medium.com/max/800/1*aVKP7wm6JsmpawPbZK74sQ.png
---

- gRPC system initially developed at Google in 2015 for internal use. It is open-sourced in 2016.
- gRPC is an open-source remote procedure call (RPC) framework.
- gRPC is used for a server to server or client to server communication.
- gRPC is preferred when you need low latency, highly scalable and distributed system.
- Most common use case of gRPC is to communication between microservices.
- It can also use in mobile and desktop application to communicate with Server. It is a good alternative to GraphQL and REST API if an application required speed and performance.
- gRPC officially supports C, C++, C#, Go, Dart, Java, Kotlin, Node.js, Objective-C, PHP, Python and Ruby.
- gRPC Web is a JavaScript implementation of gRPC for a web application. gRPC-Web require a special proxy, by default it uses Envoy proxy.
- Protobuf is default and the first implementation of data format or content type.
- gRPC is used by Square, Netflix, CoreOS, Docker, CockroachDB, Cisco, Juniper Networks and many organizations.
- gRPC use Interface Definition Language (IDL) for both service interface and structure or payload.
- gRPC supports unary, server streaming, client streaming, bidirectional streaming.
- Unary RPC is like REST API request and response.
- Server streaming where the client request to the server once and the server sends multiple data back to the client.
- Client streaming where the client sends multiple data to the server.
- Bidirectional streaming where the client and server both send multiple data to each other.
- gRPC also supports synchronous and asynchronous calls.
- gRPC has metadata which is similar to HTTP headers, Metadata is key-value pairs where key and value are always string type. It can also use for authentication.
- gRPC provides simple authentication API which allows a developer to provide necessary auth information as Credentials.
- It supports SSL/TLS, ALTS and Token-based authentication.
- gRPC has standard and rich error models. The standard model includes error code and message. Error information is available to gRPc clients in all supported languages. The rich error model is available if you're using protocol buffers as data format.
- gRPC+Protobuf is 7 to 10 times faster compared to REST+JSON https://medium.com/@EmperorRXF/evaluating-performance-of-rest-vs-grpc-1b8bdf0b22da

Original post: https://kpbird.github.io/post/2021-02-09-grpc-tldr/
Automate Docker build and push using GitLab CI
Tags: cicd, gitlab, docker, devops
Published: 2021-02-09 06:06:25

So you’ve got your dockerized project ready to push to Docker Hub? Let’s automate this process using GitLab CI.

First, sign up or sign in at [https://hub.docker.com/](https://hub.docker.com/) then create an Access Token by going to Settings then Security > New Access Token. Take note of the created token as we’ll need it in the next steps. Visit [https://docs.docker.com/docker-hub/access-tokens/](https://docs.docker.com/docker-hub/access-tokens/) for reference.

Next, you need to create a GitLab project. Then go to `Settings` > `CI/CD`, click on `Expand` in the `Variables` section and add the following variables with corresponding values:

*   `CI_REGISTRY` => `docker.io`
*   `CI_REGISTRY_IMAGE` => `index.docker.io/DOCKER_USERNAME/image_name`
*   `CI_REGISTRY_USER` => Docker Hub username
*   `CI_REGISTRY_TOKEN` => Docker Hub token created on the first step

**Make sure to protect and mask your variables**.

Then set your local project to use this newly created repository.

    git remote add origin GITLAB_PROJECT_REPOSITORY

On your project directory, create a file named `.gitlab-ci.yml` and enter the code below:

    image: docker:19.03.12

    stages:
      - build
      - push

    services:
      - docker:19.03.12-dind

    before_script:
      - echo -n $CI_REGISTRY_TOKEN | docker login -u "$CI_REGISTRY_USER" --password-stdin $CI_REGISTRY

    Build:
      stage: build
      script:
        - docker pull $CI_REGISTRY_IMAGE:latest || true
        - docker build --cache-from $CI_REGISTRY_IMAGE:latest --tag $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA .
        - docker push $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA

    # Tag the "master" branch as "latest"
    Push latest:
      stage: push
      only:
        - master
      script:
        - docker pull $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA
        - docker tag $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA $CI_REGISTRY_IMAGE:latest
        - docker push $CI_REGISTRY_IMAGE:latest

    # Docker tag any Git tag
    Push tag:
      stage: push
      only:
        - tags
      script:
        - docker pull $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA
        - docker tag $CI_REGISTRY_IMAGE:$CI_COMMIT_SHA $CI_REGISTRY_IMAGE:$CI_COMMIT_REF_NAME
        - docker push $CI_REGISTRY_IMAGE:$CI_COMMIT_REF_NAME

Now, `commit` and `push` the changes to `master` branch, as that is what is currently defined on our pipeline. Once finished, your pipeline will run. You can see check it by navigating to your GitLab project then CI/CD > Pipelines.

After the jobs are done, your image will be available at Docker Hub.

Just a side note, don’t use latest or stable docker image in your CI pipeline because you will want reproducibility. Latest images will break things. Always target a version. Hence `image: docker:19.03.12` is used here.

Happy coding!
[Video] Frontend logging and Navigator Beacon
Tags: javascript, webdev, beginners
Published: 2021-02-09 05:31:14

In this post I wanted to talk about why front-end logs are essential and how `Navigator.sendBeacon()` is useful for solving this real-world problem.

# Explanation video

To see this in action please head on to the link below!

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/TPugvA7qC7U/0.jpg)](https://www.youtube.com/watch?v=TPugvA7qC7U)

# Why to log frontend events?

Frontend logging is an essential for many use-cases like,
- identifying how the user is navigating around the website.
- log JavaScript errors on the server to help with debugging, etc.

It depends on the implementer on how they would like to implement their front-end logs. For example, in my react applications I have created an HOC to log the Component mount and un-mount along with the `props` passed to the component.

# Implementation

The implementation is really simple. We will just create an event queue and keep pushing our log events in to the queue. Once the queue threshold breaches, we will push all the events in queue to server and reset our queue.

### Part 1

Below is the simple implementation -

```javascript
let events = [];

const logEvent = (event) => {
  events.push(event);

  // 10 is the event queue threshold
  if (events.length >= 10) {
    const payload = JSON.stringify({
      events: [...events],
    });

    events = []; // reset the queue
    
    fetch('/frontend-log', {
      method: 'POST',
      body: payload
    }).then();
  }
}

``` 

### Part 2

The above implementation works fine, however, the problem is when the the browser is closed and the event threshold is not breached. This would result in undelivered events, which could result is missing some important error logs as well. So, lets handle that case. 

We will add another arg to our `logEvent()` to force push the events in queue to the server. We will also add an event listener to trigger force push on window `unload`.

Another issue is with `fetch`. It doesn't take guarantee of making the request on window close or `unload`. This is when `navigator.sendBeacon()` comes in, as it takes guarantee of making the request even after the window is closed.

So our final implementation is as below - 

```javascript
let events = [];

const logEvent = (event, force = false) => {
  events.push(event);

  // 10 is the event queue threshold
  if (events.length >= 10 || force) {
    const payload = JSON.stringify({
      events: [...events],
    });

    events = []; // reset the queue
    window.navigator.sendBeacon('/frontend-log', payload);
  }
}

window.addEventListener('unload', () => {
  logEvent({
    type: 'INFO',
    message: 'Window closed',
  }, true);
})

``` 

Refer the video explanation for a working example over a sample Sails JS application.
Console.log with style
Tags: console, javascript, ui
Published: 2021-02-09 04:59:08

---
title: Console.log with style
published: true
description: A quick console-style guide
tags: console, JavaScript, UI
---

Ever wondered how do console messages get their colours and styles? Well, it is very simple.
All you have to do in your 'console.log' function is adding some styles.

##How can you do it?
###1st, 
add the '%c' before your message, as so: <code>console.log('%c my cool message');</code>
###2nd, 
after adding %c at the beginning of the message, you now can add a second argument to the console.log function, which is the styles.
So, from a borring <code>console.log('my cool message');</code> we go to:
<code>console.log('%cmy cool message', 'color:cyan; font-size:24px;');</code>
![Before  / After](https://dev-to-uploads.s3.amazonaws.com/i/bjeuocrirt4mvlm7fgtv.JPG)
How do you embed a video from YouTube on your website?
Tags: embedvideo, youtubevideo, youtube
Published: 2021-02-09 04:35:43


Web video has become one of the most common ways for content sharing, tutorials, data, music, entertainment, and much more. For knowledge or entertainment, many people prefer to watch videos rather than read them.

Certainly, the first thing that comes to mind when you think about the subject is [YouTube](https://www.supersavermama.com/youtube-tv-promo-code/), the Internet's most popular video sharing site.

**How to embed videos from YouTube on WordPress?**

The mechanism is quite basic.

**step 1**. On YouTube, enter the URL of the film.

**step 2**. Copy the URL (click Right > Copy or CTRL + C / CMD + C)

**step 3**. Go to an entry or page where you want to show the video. Only right-click> Paste in the WordPress Editor.

When publishing or previewing it... Right there, the video will appear! (It's magic-like: P)

If you need to alter the video's properties, you can insert the code 'Embed' and adjust the dimensions and other properties.

Again, enter the video and click on the "Share" tab.

Copy the code that appears there after you have copied and changed the necessary one.

In the HTML (Text) section of the editor, paste the same code into the post so that the video will appear successfully.

As you can see, it is a very easy and quick process to insert YouTube videos into WordPress.

Have you got any other questions?
Tree shaking goodness
Tags: javascript, performance, webdev, nextjs
Published: 2021-02-09 04:35:06

> Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export. The name and concept have been popularized by the ES2015 module bundler rollup. [Webpack](https://webpack.js.org/guides/tree-shaking/)

We're not going to deep dive in **tree shaking**, just talk about its benefits and examples. If you're an npm package developer, You should check out [Webpack tree shaking](https://webpack.js.org/guides/tree-shaking/) or [Rollup tree shaking](https://rollupjs.org/guide/en/#tree-shaking) to give the users and developers a better experience.

Tree shaking is a simple concept to reduce the size of production build to have faster TTFB (Time To First Byte or page load time).

## Why? 🤔
It allows the bundler to modify some parts of the production code to remove the unused parts. 

Imagine we have a file **meet.js**: 
```js
// meet.js
function hi() {
    ...
}
function bye() {
    ...
}

export { bye, hi }
```
Now import it in another file: 
```js
import { hi } from './meet.js'

hi();
```
Here is the point, maybe you thought we just imported the **hi**, but not, We imported all of the **meet.js**, that means we have **bye** in the production, too. So the production build has unused code, so we don't want that.

In some packages, we do this too, we import the needed parts, but in production, we have unused code when using object destructuring, but there is a way to get rid of the unused code! 

## How? 😬

Here we can use tree shaking, but if the package that we're using implemented the tree shaking feature.
```js
import { chunk } from 'lodash-es/array/chunk'
```
Almost every package has its way to implement its tree shaking, and it's not wildly different!

For bigger packages, see What happens when we don't use tree shaking. 
```js 
import { chunk } from 'lodash-es' // No tree shaking
// 30Kb just for one function, what! 👎

import { chunk } from 'lodash-es/array/chunk' // With tree shaking
// 1Kb for one function, That's awesome 👍

// https://github.com/webpack/webpack/issues/1750
```

## Note
I think you should use or implement this feature because reducing the build size is so important and the users love the speed. In the previous [article](/post/Next-Dynamic-imports), I said to use the dynamic import feature when you have TTFB issues, and if you use it always, It will affect the TTFB and slows it down sometimes, But tree shaking is a great feature, So use it always when you can.

I hope you enjoyed this small article and don't forget to share, and reaction to my article. If you wanted to tell me something, tell me on Twitter or mention me anywhere else. You can subscribe to my newsletter too on my [blog](https://bugged.dev/post/Tree-shaking).
These 5 Cryptocurrency Projects May Surpass Bitcoin
Tags: technology, cryptocurrency, finance, blockchain
Published: 2021-02-09 07:10:11

---
title: These 5 Cryptocurrency Projects May Surpass Bitcoin
published: true
date: 2021-02-09 04:34:21 UTC
tags: technology,cryptocurrency,finance,blockchain
canonical_url: https://medium.com/coinmonks/these-5-cryptocurrency-projects-may-surpass-bitcoin-701159358886
---

[![](https://cdn-images-1.medium.com/max/2600/0*kobQmOMGtXOd1pFa)](https://medium.com/coinmonks/these-5-cryptocurrency-projects-may-surpass-bitcoin-701159358886?source=rss----721b17443fd5---4)

These projects will lead the crypto industry

[Continue reading on Coinmonks »](https://medium.com/coinmonks/these-5-cryptocurrency-projects-may-surpass-bitcoin-701159358886?source=rss----721b17443fd5---4)
Angular Routes Complete Guide | How To Create Routes In Angular
Tags: angular
Published: 2021-02-09 04:03:31

In this tutorial, we learn Angular CLI is a command-line interface tool that can create a project, For Single Page Application, Routing is the one and only tool or we can say module to navigate the pages to pages in routing angular. So, let us get started with angular routes or just angular router Tutorials.

**[Angular Routes Complete Guide | How To Create Routes In Angular](https://www.phpcodingstuff.com/blog/angular-routes-complete-guide-how-to-create-routes-in-angular.html)**

```
// App-Routing.Module.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'dashboard', component: DashboardComponent }
];
export default appRoutes;
```

Source code: *[https://www.phpcodingstuff.com/blog/angular-routes-complete-guide-how-to-create-routes-in-angular.html](https://www.phpcodingstuff.com/blog/angular-routes-complete-guide-how-to-create-routes-in-angular.html)*
URL PROBLEM SOLVED-Android to Window
Tags: beginners, codenewbie, productivity, android
Published: 2021-02-09 03:36:06

If you are a android user who's having a window machine, than you have definetly faced the issue of sharing URL from your android to PC or vice versa.
Most of us uses whatsapp to share url for this this purpose, but whatsapp is not the best way to do so. 
Google designed a app called **google keep** and this app is best for sharing URL.

#How to download -

* firstly download google keep android app on your smartphone📱 from google play store.
* download google keep chrome extension [link](https://chrome.google.com/webstore/detail/google-keep-chrome-extens/lpcaedmchfhocbbapmcbpinfpgnhiddi?hl=en)


#How to use google keep -

* you have the same goolge account on both in android and in chrome to use it.
* to share url from PC's chrome just click on the extension.
* to share url from android chrome browser copy and share it on keep.

google keep **sync** your data from diffrent devices to a single place so that the data can be accessed by any of the device.

save it if you find it's helpful.
which method do you use to share links?
How to build a responsive nav with no Javascript!
Tags: webdev, tutorial, css, codenewbie
Published: 2021-02-11 01:33:41

---
title: How to build a responsive nav with no Javascript!
description: In this video, I'll teach you to build fancy collapsible navigation without using any Javascript. Just HTML and CSS!
published: true
date: 2021-02-09 03:28:53 UTC
tags: webdev,tutorial,css,codenewbie
canonical_url: https://raddevon.com/articles/how-to-build-a-responsive-nav-with-no-javascript/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/l52o48j6wmm5byr02bii.jpg
---
In this video, I’ll teach you to build fancy collapsible navigation without using any Javascript. Just HTML and CSS!

I love that we can make clever use of CSS and HTML to achieve something most people use Javascript for, but you won’t get far as a web developer without Javascript. That’s why I made a cheat sheet with practical examples to help you learn it. Head over to [this post's page on my site](https://raddevon.com/articles/how-to-build-a-responsive-nav-with-no-javascript/) to get your copy.

If you want to work along with the video, start from this [pen](https://codepen.io/raddevon/pen/xxRVmOQ). Open that and click the “Fork” button in the bottom-right so you can get your own copy to work with.

{% youtube tFXbQS0zQe0 %}

The CSS framework I used is [Milligram](https://milligram.io/). I like to use it because it takes just basic HTML and makes it look nice. I don’t have to sprinkle a bunch of wacky classes around to get something that looks decent.

I talk about the “+” selector and refer to it in the video as the “sibling selector.” More accurately, it’s the _adjacent_ sibling selector. It only selects the UL if it is a sibling of the checked checkbox and also if the two are adjacent (meaning no elements between).

Hope you enjoy this tutorial! Comment here or [tweet at me](http://twitter.com/raddevon) if you have questions.
A Tiny List of Useful Commands for Junior Sys-admins
Tags: devjournal, linux, sysdamin
Published: 2021-02-09 03:27:33

---
title: A Tiny List of Useful Commands for Junior Sys-admins
published: true
tags: ["devjournal", "linux", "sysdamin"]
---


### Dependecies:
  * `rsync`
  * `openssh`
  * `sshfs`

### Tested on
  * **Distro**: Headless arch linux (NO_GUI)
  * **Kernel**: `5.10.10-zen1-1-zen` **arch**: `x86_64`
  * **Hardware**: Microsoft Surfacebook 2016 (1st Gen)



### Mount network drives onto local machine (sshfs)
```bash
  function plug(){
   if [[ $(sshfs -o ciphers=aes128-ctr,compression=no,auto_cache,reconnect,kernel_cache,allow_root ${1} ${2}) ]]; then
    echo ${?}
   fi
 }
```

Where: `$1` ==> remote directory, `$2` ==> mount point

Example:
  `plug <user>@<remote-server>:/home/$USER/Desktop/ /home/$USER/Desktop/`


**NOTE:** Make sure to edit `/etc/fuse.conf` so that `user_allow_other` is uncommented



### Synchronize folders and network drives

  `alias sync='rsync --update -vhraz --progress --ignore-existing  --human-readable $1 $2'`

Where: `$1` ==> source directory && `$2` ==> destination folder

Example:
  `sync /home/$USER/Desktop/  <user>@<remote-server>:/home/$USER/Desktop/`


### SSH shortcut alias
```bash
  function link(){
   case $1 in
   *)
    ssh -o "compression=no" -c aes128-ctr $1
   ;;
  }
```
Where: `$1` ==> `<host-username>@<host-ip-addr>`

Example:
  `link pi@raspiberrypi.local`


**NOTE:** If you're are security catious I don't recoment using `compression=no` and `aes128-ctr` for encryption unless you know what you are doing


### source `~/.bashrc` without hustle
  `alias reload='source ~/.bashrc'`




You can find shortcuts on my [repo]: https://github.com/munazhe/bashrc-it