teleren/devto huggingface dataset:
Adding Audio to Your App with jQuery
Tags: javascript
Published: 2020-12-11 07:17:22

Want to add some sound effects to your website or game? With HTML5, it’s easy! Here’s a quick tutorial. (If you have your soundbite already and want to get straight to the code, skip to step 4.)


### Step 1: Find a soundbite
You can Google around for the sound you want, but I would suggest signing up for a free sound effect library. I found freesound.org to be very helpful for finding those clicks, pops, and chimes. Alternatively, you can grab sounds from YouTube using an MP3 converter like this one. When you find the sound you want, download it.

### Step 2: Trim the soundbite
For this, you’ll want a free, lightweight audio editor. Audacity is my recommendation. Download it, install it and fire it up. Import your soundbite.
Here’s the fun part. Zoom in really close, and trim off any dead space from the beginning of the sound. This subtle (or sometimes not-so-subtle) improvement will ultimately make your app feel more responsive and satisfying. Notice the straight line at the beginning of the example below. If you see that in your file, highlight it and press delete. Your soundbite is now ready for use.

### Step 3: Import soundbite into your project
Simply use Finder or Windows Explorer to move the freshly trimmed audio file into your app directory. If you will have multiple audio files, it is helpful to make a dedicated audio folder to keep things organized.

### Step 4: HTML
Add an audio element in your HTML file. This will not show up on the page, so you can put it anywhere. It simply needs to exist so you can reference it with jQuery. In our example, we are using a file called pop.wav.
`<audio id="pop">
  <source src="audio/pop.wav" type="audio/mpeg">
</audio>`
(Note: If you want to add an audio player with play, pause, and volume controls, follow the below format. This will, of course, show up on the page.)
`<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
</audio>`

### Step 5: jQuery
In your .js file, wherever you want your soundbite to play, use the following code:
`$('audio#pop')[0].play()`
- `$('audio#pop')` uses jQuery to select all audio elements with an id of ‘pop’.
- This will return an array, so you need to specify the first element by adding [0].
- Finally, `.play()` will play your soundbite.

Note: if you have a long soundbite, you can pause it by calling `.pause()`. There is no “stop” function, so if you’d like it to restart from the beginning, call `.currentTime = 0` on another line.
Altogether, that looks like this:
`$('audio#pop')[0].pause()
$('audio#pop')[0].currentTime = 0`
Understanding Docker: part 21 – Memory and CPU constraints
Tags: docker, devops, beginners, cloud
Published: 2020-12-11 07:13:51

---
title: Understanding Docker: part 21 – Memory and CPU constraints 
published: true
description: Serie of sketchnotes about Docker. Explaining in a visual way Docker principles.
tags: Docker, DevOps, beginners, Cloud
series: Understanding Docker in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/14l27ievyz1ei9vqzoay.jpg
---

Understanding Docker can be difficult or time-consuming. In order to spread knowledge about Cloud technologies I started to create sketchnotes about Docker. I think it could be a good way, more visual, to explain Docker (and other technologies like Kubernetes and Istio).

We continue the series of Docker sketchnotes with a focus about memory and CPU constraints/limits.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/14l27ievyz1ei9vqzoay.jpg)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2zzczi0fuhjwvtlr0lkn.jpg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6pe225yapridadggnque.jpg)

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

It’s my first sketchnote with my new material, if you can tell me what do you think it will be awesome 😎 


As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).

If you are interested, I published all the sketchnotes on Docker (and new ones!) to make a "book" of 93 pages: ["Understanding Docker in a visual way"](https://gumroad.com/aurelievache#YTLzM).
My favourite coding youtube channels
Published: 2020-12-11 06:47:23

Here are some of my favourite coding youtube channels. These channels are not given in any particular order.

#Coding Garden
Coding Garden is hosted my CJ, who is a full stack Javascript developer. CJ builds API's to full fledged websites. I learnt JavaScript from him. Although now a twitch streamer he posts his videos on youtube.

#Tech with Tim 
Tech with Tim is a youtube channel mainly about Python. Tim (the host of the channel) is a Python developer. Tech with Tim techs you many things about Python. At the time of this article written Tech with Tim was doing a series about Django and React. 

#Dev ed
Dev ed is a youtube channel which focuses on mainly frontend development. If you want to make your website look good you should check out Dev ed. Dev ed teaches you animations with css and many other things.

#Freecodecamp
Freecodecamp is the place to go to learn anything. Freecodecamp teaches you thing's from Basic python to Algebra . Free code camp teaches you anything you want.
Advent of Code 2020 Solution Megathread - Day 11: Seating System
Tags: adventofcode, challenge
Published: 2020-12-11 06:36:31

---
title: Advent of Code 2020 Solution Megathread - Day 11: Seating System
published: true
description: Conway would be proud of our seating chart!
tags: adventofcode, challenge
series: Advent of Code 2020
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/bn52cv8cit92fwev3k2v.png
---

Today and yesterday are very different types of puzzles.  This one is a variation on a staple of the AoC series: [Conway's Game of Life](https://playgameoflife.com/).

## The Puzzle

In [today’s puzzle](https://adventofcode.com/2020/day/11), we're modeling seats on a ferry.  Except that this ferry is looking like a 2D grid and these seats are looking like cells, and this puzzle is looking a bit like the Game of Life.  Our job is to simulate seating and wait until things stabilize.

## The Leaderboards

As always, this is the spot where I’ll plug any leaderboard codes shared from the community.

```
Ryan's Leaderboard: 224198-25048a19
```

If you want to generate your own leaderboard and signal boost it a little bit, send it to me either in a DEV message or in a comment on one of these posts and I'll add it to the list above.

## Yesterday’s Languages

Updated 03:09PM 12/12/2020 PST.

| Language   | Count |
|------------|-------|
| JavaScript |     5 |
| Rust       |     2 |
| Ruby       |     2 |
| C#         |     1 |
| C          |     1 |
| COBOL      |     1 |
| Elixir     |     1 |

Merry Coding!
How to set Windows Terminal as GitKraken's default terminal
Published: 2020-12-22 11:33:05

---
title: How to set Windows Terminal as GitKraken's default terminal
published: true
date: 2020-12-11 06:34:00 UTC
tags: 
canonical_url: https://rockdove.uk/blog/gitkraken-and-windows-terminal/
---

GitKraken allows you to open the current repository in the terminal by hitting <kbd>Alt</kbd> + <kbd>T</kbd> but by default, this won't be the new Windows Terminal.

The new Windows Terminal has many benefits over the Command Line or Powershell applications but you won't find Windows Terminal as an option for the default terminal in GitKraken's settings.

There is a simple fix, however. Open up GitKraken's preferences (File > Preferences) and scroll down to and check "Use Custom Terminal Command" (below "Default Terminal" dropdown). Then, in the "Custom Terminal Command" field that appears above, enter:

```
wt -d %d

```

`wt` is the command for Windows Terminal, to which we're passing the `-d` directory parameter. The value of `%d` is then swapped out by GitKraken for the directory of the current repository.

It's as simple as that!

At the time of writing, there is a bug in GitKraken which launches the terminal twice when using the File > Open Terminal option, but <kbd>Alt</kbd> + <kbd>T</kbd> works just fine.
Step One - Release 0.4
Published: 2020-12-11 06:18:35

For Release 0.4, I am supposed to find a proper issue to work on for three weeks. It should not be too easy to complete, nor too hard. I tried hard to target a satisfactory one, but I cannot. 
I was super upset a week ago, and I went to my professor asking if I can skip this assignment since my marks should be enough to get a pass. Professor David is such a nice and patient professor that his words made me feel so much better and dragged me out of the depression that I fell in. He even helped me to find a proper issue to work on. 
[https://github.com/ContactAssistApp/mobile/issues/141](https://github.com/ContactAssistApp/mobile/issues/141) is an issue about localization that David helped me find. I checked on it and found out that this is a project that I need to work on using XCode. My Macbook is too old to run XCode successfully, so I had to give up on this one and tried to find a new one on localization. 

[https://github.com/fontforge/fontforge/issues/4360](https://github.com/fontforge/fontforge/issues/4360) is the one that I think maybe I should try to work on. I left a message to the owner asking if I can try it, the author sent me the link to learn how to contribute. So the next step would be learning how to contribute.
Adding SweetAlert2 to Laravel (The Laravel-Mix Way)
Tags: laravel, webpack, sweetalert, sweetalert2
Published: 2020-12-11 05:42:40

There is a case in any app when you are about to make changes that crucial or dangerous, we tend to confirm the user. There are many ways to display a confirmation dialog to the user, such as using a modal pop-up or simply using a plain javascript confirm alert like this:

```html
<a href="https://dev.to/dendihandian" onclick="return confirm('Do you want to go?')">Link</a>
```

That simple way is too plain or looks ugly if everything else on your app is so fancy. And that's how [SweetAlert](https://sweetalert2.github.io/#examples) comes in handy for this, easy to implement and yet customizable to make it prettier. In Laravel, we could implement it using Laravel-Mix.

## Prerequisites to code along

Prepare your own existing or new ready-to-be-developed laravel app and make sure to have `NodeJS` & `NPM` installed on your machine.

## Installing SweetAlert2

```
npm install sweetalert2 --save-dev
```

## Confirm a delete action using SweetAlert

Let's say we have this button and form (this example may not be accurate, so fix it for your own case) for a product with id `39`. If we click the `DELETE` button, a confirmation dialog should be showing up.

```html
<a href="#" onclick="deleteConfirm('delele-product-form-39')">Delete</a>
<form id="delete-product-form-39" action="http://myapp.test/product/39/delete" method="POST"></form>
```

and then we have to make the `deleteConfirm()` function to show the confirmation dialog. So, in the default laravel `resource/js/app.js` file, let's add this code:

```js

...

import Swal from 'sweetalert2';

window.deleteConfirm = function(formId)
{
    Swal.fire({
        icon: 'warning',
        text: 'Do you want to delete this?',
        showCancelButton: true,
        confirmButtonText: 'Delete',
        confirmButtonColor: '#e3342f',
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById(formId).submit();
        }
    });
}
```

Don't forget to re-build using:

```
npm run development
```

or 

```
npm run production
```


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

And the button and confirmation should be work. You may want to use sweetalert for flash messages too, so have the experiment on it.

_________________________

version used:
```
laravel-mix 5.0.7
sweetalert2 10.10.1

nodejs v14.15.1
npm 6.14.8
```
How PlugXR is different from the current AR development process
Tags: augmentedreality, android, ios
Published: 2020-12-11 05:30:47

The PlugXR Creator helps you build immersive AR experiences on market-leading SDKs like Vuforia, ARKit, and ARCore. You can now create a new white-label app of your own (on Android, iOS, or both), integrate it into your existing app, or the PlugXR app (on Android, iOS, or both), or on WebAR (browser-based cloud experiences). Your app can contain Marker-based AR (image tracking), Markerless AR (surface tracking), or WebAR (browser-based cloud application) experiences.
Website: https://plugxr.com/
Video:https://www.youtube.com/watch?v=4nNZdFJTDHc&ab_channel=PlugXR
Why Should We Use TypeScript
Tags: typescript, react, javascript, webdev
Published: 2020-12-11 05:30:21

<li>Typescript makes code easier to read and understand</li><li>Typescript has ability to add static types to Javascript code</li><li>Typescript is open source</li><li>Typescript simplifies Javascript code</li><li></li>Typescript is Javascript with additinal features<li></li>Typescript support ES5 and ES6<li>Typescript do Compile-Time checking</li><li>Typescript helper classes are available to reduces code</li><li>Typescript code is more readable as compared to Javascript</li><li>Typescript provide compiler that convert Javascript code to TS</li><li>Typescript reduces bugs like null handling,undefined etc</li>

This is my first post on dev. Follow me for more content.
How to Change Font Color in Excel Office 365? – Simple Steps
Tags: excel, excelbasics, changefontcolorinexc, excel365tutorials
Published: 2020-12-14 12:19:21

---
title: How to Change Font Color in Excel Office 365? – Simple Steps
published: true
date: 2020-12-11 05:23:08 UTC
tags: Excel,ExcelBasics,ChangeFontColorinExc,Excel365Tutorials
canonical_url: https://geekexcel.com/how-to-change-font-color-in-microsoft-excel-365/
---

## **Change Font Color:**

To make your data more visible in the worksheet, then changing font color is the best option for you. Here, we come up with steps to finish this task quickly.

You can change the Font Color of the **d**** ata or text **with the help of options available in the** Home Menu **of Excel 365. Just follow the guidelines of this article carefully to** change the Font Color in Excel Office 365**.
## Guidelines to Change Font Style in Excel:

- First, open a new Excel sheet.
- **Enter a text** in any of the cells in Excel.
- Now, **select the cell** (just **left-click** on the cell).

![Enter Text in Excel](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/03/Screenshot_4-15.png)<figcaption id="caption-attachment-4468">Enter Text in Excel</figcaption>

- In the menu tabs, you can find the  **Home option ** on the left top of your Excel sheet.

![Home Menu in Excel](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/03/Screenshot_6-5.png)<figcaption id="caption-attachment-4453">Home Menu in Excel</figcaption>

- In the  **Home Menu, ** you can find several options for formatting font, color, conditional formatting, filter, number type, and more.
- Select the **font color option** in the Font group of the **Home Menu.**

![Font Color Option](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/03/Screenshot_9.png)<figcaption id="caption-attachment-4464">Font Color Option</figcaption>

- Click on the **drop-down arrow**. Now, the list of colors will appear on your screen.

![Different Font Color](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/03/Screenshot_2-18.png)<figcaption id="caption-attachment-4467">Different Font Color</figcaption>

- **Click on any font color** that you want for your text so that the color will be applied to your text automatically.

![Font Color Changed](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/03/Screenshot_3-18.png)<figcaption id="caption-attachment-4466">Font Color Changed</figcaption>

- That’s it. Finally, you have changed the font color of your text.

## Verdict:

We hope this short tutorial on Excel 365 will help you to change the **font color in Excel 365**. Please leave your **queries** and don’t forget to share your **feedback.** Thank you for visiting our website [**GeekExcel**](https://geekexcel.com/).
HTML output element
Tags: html
Published: 2020-12-11 05:18:10

I've seen this element around a couple of times in articles but never needed it or decided to see what it can do.

In general, it's supposed to be used as an output for other input elements.

Sounds pretty cool for certain use-cases.

Let's say we need to build a VAT calculator?

The end result:

![HTML Output element](https://cdn.hashnode.com/res/hashnode/image/upload/v1607258888953/Acjx4CyY4.gif)

## Using the HTML output element

To use this element we can simply write `<output name="output"></output>`.

But that doesn't mean it actually does anything.

To make it work, it needs a form wrapped around it and some inputs to mix values from.

Let's start by doing that.

```html
<form
  onsubmit="return false"
  oninput="output.value = parseInt(inputOne.value) + parseInt(inputTwo.value)"
>
  <input name="inputOne" type="number" value="2" /> +
  <input name="inputTwo" type="number" value="3" /> =
  <output name="output">5</output>
</form>
```

You might think, oh well, but that's cheating you just put some values in there.

The magic comes in running this code. Try and change the input values!

{% codepen https://codepen.io/rebelchris/pen/zYKqjEz %}

As you can see it does rely on JavaScript to actually render a new value in the output element.
In this case we state that `output.value` (the name output) equals a parsed one + two.

> Note: Their names reference the elements used.

## HTML output VAT calculator

Let's say we need an VAT calculator, these general have an input number and a vat percentage.

```html
<form
  onsubmit="return false"
  oninput="output.value = price.valueAsNumber + (price.valueAsNumber * vat.valueAsNumber)"
>
  <input name="price" type="number" value="20" /> +
  <input name="vat" type="number" value="0.2" step="0.1" max="1" /> =
  <output name="output">24</output>
</form>
```

As you can see we are no longer using the `parseInt` method.
Instead we can use the `valueAsNumber` on input types. This makes it easier to use decimals.

Then we define the sum function as follows:

`output = price + (price * vat)`

The names above are all the names used in our HTML.

As you can see, not fancy scripts were needed, and we can fully style this any way we would like!

I hope you learned some good practical use cases for the HTML output element.

Feel free to have a play with this Codepen.

{% codepen https://codepen.io/rebelchris/pen/WNGwJBx %}

## Browser Support

This output element is pretty well supported and goes back to pretty old versions. We do run into issues on IE and Opera mini.

![HTML Output element](https://cdn.hashnode.com/res/hashnode/image/upload/v1607259030517/ty585ebjJ.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
emojicodeのCircleCI Orbを作った
Tags: emoji, emojicode, circleci, circleciorbs
Published: 2020-12-11 05:08:46

---
title: emojicodeのCircleCI Orbを作った
published: true
tags: emoji, emojicode, circleci, circleciOrbs
---

この記事は、雑談Slack Advent Calendar 2020 の6日目の記事です。
遅れての投稿です。

https://adventar.org/calendars/5337

先週はemojicodeをCircleCIで実行するやつについて書きました。

 {% link yutagoto/emojicode-circleci-5egn %} 

毎度毎度インストールコマンドを書くのも大変なのでOrbを作りました。

https://circleci.com/developer/ja/orbs/orb/yutagoto/emojicode

{% github YutaGoto/emojicode-orb %}

基本的な使い方は書くだけで使えるはずです。（もしかしたらGCCも追加させる必要があるかもしれないですが。。）

```yml
# .circleci/config.yml
version: 2.1

orbs:
  emojicode: yutagoto/emojicode@1.0.0

executors:
  cpp:
    docker:
      - image: gcc:latest

jobs:
  run_emojicode:
    executor: cpp
    steps:
      - checkout
      - run: apt update && apt install -y sudo || true
      - emojicode/install
      - run:
          name: build emojicode
          command: emojicodec hello.emojic
      - run:
          name: run
          command: ./hello

workflows:
  version: 2
  build:
    jobs:
      - run_emojicode
```

emojicodeで実装してCircleCIでチェックしたいときにお使いください。

---

GitHub リポジトリのREADMEなどはあとでちゃんと書きます。
Flush your DNS cache with a single easy-to-remember command
Tags: bash, productivity, webdev
Published: 2020-12-11 04:02:44

## The problem 🙄

Has this ever happened to you?

> You're working away merrily on your web project and you've just made a DNS change—maybe you've added a new subdomain or you're now redirecting site traffic through a Web Application Firewall (WAF). But... your browser still thinks it can find your web project at the *old* IP address. You *could* wait until the time-to-live (TTL) expires on the DNS records you changed, but you've got a deadline to meet. Now you'll have to scour the web for another `mac flush dns` article...

Because it happens to me **all the time**!

## The solution 👍

I figured it was time that I made my life just a little easier and create a system-wide bash script that I could invoke from any user account on my Mac.

Now when I want to flush my DNS, all I need to do is open a Terminal window and type:

```bash
$ flush-dns
```

*NOTE: This works on MacOS Catalina and MacOS Big Sur. Be sure to replace the DNS flushing commands in my example with those relevant to your OS and version.*

## How to do it 🧐

1. Open up Terminal.
1. Enter the following commands:

```bash
$ cd /usr/local/bin
$ echo "sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder && echo \"DNS cache flushed successfully\"" > flush-dns
$ chmod +x flush-dns
```

<ol start=3>
  <li>Close and relaunch Terminal.</li>
</ol>

## Testing it out 👨‍🔬

Now the moment of truth!

1. In your freshly opened terminal window, type in `flush-dns` and hit **Enter**.
1. Terminal will prompt you for your password as it needs to elevate privileges via the `sudo` commands—type it in and hit **Enter** again.
1. Terminal will then execute the DNS cache flushing commands we added earlier—perfect!

**Don't forget!** — You might also need to clear your browser cache and restart your browser for the script to take effect!

----

Cover image source: [macrovector @ www.freepik.com](https://www.freepik.com/vectors/business)