teleren/devto huggingface dataset:
Music Markup - Web Components for Web Audio
Tags: webcomponents, opensource, javascript, showdev
Published: 2017-12-18 23:09:11

---
title: Music Markup - Web Components for Web Audio
published: true
description: A new set of vanilla web components for creating audio experiences
tags: webcomponents, opensource, javascript, showdev
---

Today I'm releasing [Music Markup](https://github.com/tanepiper/mm-components) as set of vanilla web components for creating audio experiences.

The first two components released are `<mm-keyboard>` and `<mm-key>`.  With this I have created a keyboard component:

![A keyboard created with mm-components](https://thepracticaldev.s3.amazonaws.com/i/n0no4bpimqinv0ha12mu.png)

The code is very declarative:

```html
  <mm-keyboard oscillator-type="sawtooth">
      <mm-key class-name="white b" frequency="174.614" time="1"></mm-key>
      <mm-key class-name="black as" frequency="184.997" time="1"></mm-key>
      <mm-key class-name="white a" frequency="195.998" time="1"></mm-key>
      <mm-key class-name="black gs" frequency="200.000" time="1"></mm-key>
      <mm-key class-name="white g" frequency="207.652" time="1"></mm-key>
      <mm-key class-name="black fs" frequency="233.082" time="1"></mm-key>
      <mm-key class-name="white f" frequency="246.942" time="1"></mm-key>
      <mm-key class-name="white e" frequency="261.626" time="1"></mm-key> <!-- Middle c -->
      <mm-key class-name="black ds" frequency="277.183" time="1"></mm-key>
      <mm-key class-name="white d" frequency="293.665" time="1"></mm-key>
      <mm-key class-name="black cs" frequency="311.127" time="1"></mm-key>
      <mm-key class-name="white c" frequency="329.628" time="1"></mm-key>
  </mm-keyboard>
```

Obviously you can easily generate this with code, but I went with creating a hard coded keyboard for version 1.  It's based on an earlier app I wrote called [Browser Band](https://github.com/tanepiper/browser-band) for a work hack day and I intend to use some of the existing code from there.

Key features I'll be looking to add are:

- Adding support for MP3 Audio / WAV files
- Provide theme support (Design different skins)
- Add a visualiser for control
- Support nested tags that provide node pass throughs

Any thoughts or comments would be appreciated.
TIL: JSON.stringify() can do formatted output.
Tags: javascript, console, browser, todayilearned
Published: 2017-12-18 22:27:51

---
title: "TIL: JSON.stringify() can do formatted output."
published: true
description: Formatting the output from JSON.stringify is amazing.
tags: #javascript #console #browser #todayilearned
---

TIL JSON.stringify can do formatted and indented output. `JSON.stringify(yourJSObjectHere, null, 1)`. This is awesome when you want JSON formatted output that is not all run together. Such as:
```
"impressions": [
   {
    "name": " + Holiday Bundle: Dragon Ball Z - Seasons One - Season Nine ",
    "id": "FUN-33201",
    "price": "159.99",
    "category": "SALE",
    "list": "Home: New Shop Arrivals",
    "position": 1
   },
   {
    "name": "Attack on Titan + Funko Pop - 6&#39;&#39; Colossal Titan",
    "id": "FUN-00183",
    "price": "17.99",
    "category": "Figures & Collectibles",
    "list": "Home: New Shop Arrivals",
    "position": 2
   },
   {
    "name": "Fairy Tail + Collection Five",
    "id": "BLD-00199",
    "price": "49.99",
    "category": "Home Video",
    "list": "Home: New Shop Arrivals",
    "position": 3
   },
   {
    "name": "High School DxD + Asia &amp; Koneko Drawstring Bag",
    "id": "FUN-25211",
    "price": "17.99",
    "category": "Accessories",
    "list": "Home: New Shop Arrivals",
    "position": 4
   },
   {
    "name": "Case Closed + Countdown to Heaven",
    "id": "DVD-00058",
    "price": "11.24",
    "category": "Home Video",
    "list": "Home: New Shop Arrivals",
    "position": 5
   },
   {
    "name": "Attack on Titan",
    "id": "17847",
    "price": "",
    "category": "shows",
    "list": "Home: Home Simuldubs",
    "position": 1
   },
   {
    "name": "My Hero Academia",
    "id": "124389",
    "price": "",
    "category": "shows",
    "list": "Home: Home Simuldubs",
    "position": 2
   },
   {
    "name": "Monster Hunter Stories Ride On",
    "id": "155585",
    "price": "",
    "category": "shows",
    "list": "Home: Home Simuldubs",
    "position": 3
   },
   {
    "name": "One Piece",
    "id": "20224",
    "price": "",
    "category": "shows",
    "list": "Home: Home Simuldubs",
    "position": 4
   }
  ],
```

Right in the browser console! #mind-blown
Adding URL Rewrite for an Angular app deployed to Azure App Service
Tags: angular, azure
Published: 2021-10-16 02:08:10

---
title: Adding URL Rewrite for an Angular app deployed to Azure App Service
published: true
date: 2017-12-18 21:53:00 UTC
tags: angular,azure
canonical_url: https://waiholiu.blogspot.com/2017/12/adding-url-rewrite-for-angular-app.html
---

When deploying an Angular app onto Azure App Service, the routing is not going to work because Angular uses client side routing whereas by default, on an App Service, the routing is going to be server side. As a result, anything that's not the root domain is not going to point to index.html.   
  
In order to fix this, you need to set up the App Service so that any route points back to index.html.

  

Azure App Service runs on IIS in the background so you need a web.config file to do a URL rewrite. To do this, you need to create a web.config file.

  
```
<configuration>

  <system.webServer>

    <rewrite>

      <rules>

        <rule name="angularjs routes"

        stopProcessing="true">

          <match url=".\*" />

          <conditions logicalGrouping="MatchAll">

            <add input="{REQUEST\_FILENAME}"

            matchType="IsFile" negate="true" />

            <add input="{REQUEST\_FILENAME}"

            matchType="IsDirectory" negate="true" />

            <add input="{REQUEST\_URI}"

            pattern="^/(api)" negate="true" />

          </conditions>

          <action type="Rewrite" url="/" />

        </rule>

      </rules>

    </rewrite>

  </system.webServer>

</configuration>

  ```

  

  

Then you need to add it to the angular-cli.json file in the Assets bit

  ```

{

"$schema": "./node\_modules/@angular/cli/lib/config/schema.json",

"project": {

"name": "quiz"

},

"apps": [

{

"root": "src",

"outDir": "dist",

"assets": [

"assets",

"favicon.ico",

"web.config"

],

  ```

  

When you run " **ng build"** now, it'll save web.config to the dist folder.
Explain DNS TTL Like I'm five
Tags: explainlikeimfive
Published: 2017-12-18 19:32:45

---
title: Explain DNS TTL Like I'm five
published: true
description: I've never really understood this 'time-to-live' nonsense
tags: explainlikeimfive
---

When changing DNS settings, I'll sometimes see a TTL ("time to live") field.  When I'm adding new records or changing settings, I'm usually warned that "full propagation can take 2-3 days," so I _always_ set the TTL to the lowest possible time.

Why choose 1 day when I can choose 2 minutes?

What's happening "under the hood" and when should I choose a short TTL versus a long TTL?  

Please, explain it like I'm five!
Making the world more beautiful
Tags: tenminutes, questions, writing
Published: 2018-09-14 22:18:38

---
title: Making the world more beautiful
published: true
tags: ten minutes,questions,writing
canonical_url: http://designfrontier.net/making-the-world-more-beautiful
---

Prompt: "You are tasked with making the world most beautiful. Where do you start?"

My first reaction is that I start with furniture. I believe that our perception of quality and beauty, which I don’t think are separable, are largely shaped by the environment that surrounds us. I’d love to say architecture, the thing that defines our environments, but good architecture is inaccessible to the majority people. But if we can shape the furniture, the objects that occupy that space to be more beautiful and of higher quality then we can inculcate a higher sense of beauty into society.

As for what I would do with that furniture... I would drive it aesthetically towards the Japanese traditional and the Scandinavian contemporary. Why these two? Because they both espouse simplicity of form and honesty in materials. Both of which are things that are generally lacking in the modern sense of aesthetic beauty.

How much more satisfied with ourselves could we be if we acknowledged that imperfections in the surface of a piece of wood furniture were in fact marks of beauty, that the wear of use represented the love placed on an object. That a work bench and a table with dings in it represent the highest form of praise for design?

Of course this all falls apart if experiencing Japanese wabi-sabi, the aesthetic of use and decay, in our surroundings does not instill an acceptance of wabi-sabi as beauty in ourselves and other people. If we could accept that honesty as a source of beauty in our furniture was truth, perhaps we could accept that honesty in our person and in the person of others was beauty.

That last part would dramatically shift the world, as we accepted that maybe beauty is something we innately posses, something that needs little augmentation, and that the process of becoming over time is true beauty indeed.
How does the dark web or deep web work?
Tags: anonymous, discuss
Published: 2017-12-18 17:51:44

---
title: How does the dark web or deep web work?
published: true
description: 
tags: anonymous, discuss
---

_This is an anonymous question sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough questions to ask and answer._

I know a lot of bad things happen on the dark web, and that the deep web is different in that it might not be suspicious activity (i.e. legit banking activity) -- but how do these sites work?

Do they just throw on this meta tag to 'disappear'? 

`<META NAME="robots" CONTENT="noindex,nofollow">`

I imagine there's more to it..

Anyway, just curious! Not trying to do anything evil 😅
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2017-12-18 15:12:53

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xsr1z6iqv0pd7p3s6ns3.png
---

#1. Hypermodern, feature-packed, and jamstacked!

This post gives a quick introduction and overview of GatsbyJS, a static site generator based on React. The author walks us through some important features, along with his thoughts on them. 

{% link https://dev.to/ardennl/taking-gatsby-for-a-spin-4je %}

#2. Source code --> Machine Code

A great post from the #BaseCS series -- Vaidehi explains how our code is actually read by our machines and the similarities/differences between compilers and interpreters. 

{% link https://dev.to/vaidehijoshi/a-deeper-inspection-into-compilation-and-interpretation-8bp %}


#3. DIY Blockchain

In an effort to better understand Blockchain, Damien decided to build his own. In this post, he walks us through all the necessary steps.

{% link https://dev.to/damcosset/trying-to-understand-blockchain-by-making-one-ce4 %}

#4. What do you wish you had?

Through working on the Advent of Code 2017 challenges, Ryan figures out a way to stay focused on a problem without getting distracted by other issues along the way. 

{% link https://dev.to/rpalo/wishful-coding-dpj %}

#5. An AMA w/ Henry Zhu!

Henry maintains Babel, the popular javascript compiler. In this ask me anything, we learn more about open source and how Henry splits his time between Babel and his work as an engineer at Behance. 

{% link https://dev.to/hzoo/im-the-maintainer-of-babel-ask-me-anything-282 %}

#6. VS Code Users: must-have extensions ✅

A recommended list of VS Code extensions (and a vote for Vim in the comments 🙃)

{% link https://dev.to/chrisvasqm/must-have-extensions-for-vs-code-according-to-me-dho %}

#7. Who has the upper hand?

In this post, our author explains why he gives interviewees a two-player card simulation game as a code challenge, and what he learns about the interviewee based on their decisions. 

{% link https://dev.to/mortoray/interview-question-a-two-player-card-game-67i %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
Why is The "alt" attribute so important for images?
Tags: webdev, beginners, html
Published: 2017-12-18 14:47:18

---
title: Why is The "alt" attribute so important for images?
published: true
description: 
tags: #webdev #beginners #html 
---

Maybe it seems basic, but I remember when I used to ignore this attribute when Writing an image tag. You shouldn't do that for the following reasons: 

# It is shown when the image doesn't exist [really basic]

Sometimes you copy the link of an image from another site and you put it in the source attribute(src)  like this from example 
```html
<img src="https://scontent.ftun3-1.fna.fbcdn.net/v/t1.0-

9/23844430_1595292810569743_8608995995175264766_n.jpg?

oh=4ec53eb36555985367848ef693bd824f&oe=5ABD4CDC" >
```
This is my cover picture of [my Facebook profile](https://www.facebook.com/belhassen07) , and let's I used it in my website, then I want to delete  it from facebook, so t would be deleted too in my website, it will give me something like this: 

![image not found](https://thepracticaldev.s3.amazonaws.com/i/3drxlbd8t5ubut0x7t9e.PNG)
The user won't even know what the missing is even describing so  we need to add the "alt" property like this

```html
<img src="https://scontent.ftun3-1.fna.fbcdn.net/v/t1.0-

9/23844430_1595292810569743_8608995995175264766_n.jpg?

oh=4ec53eb36555985367848ef693bd824f&oe=5ABD4CDC" 

alt="minimal design"> 
```

this gives this: 

![minimal design](https://thepracticaldev.s3.amazonaws.com/i/o3fybhlhwlvjjyj83c50.PNG)

so it doesn't save your life but at least the users knows what's hidden.

# Accessibility matters 

"web accessibility means that people with disabilities can use the web" 
So, we should work on accessibility when making websites, it's just awesome to provide EQUALITY in this world. 

The alt attribute has to be there in the image tag and it should be describing so  people with disabilities know what's there with screen readers. 
Facebook uses AI to recognize what does the image contain and puts the description automatically in the value of the alt attribute.

For example, this is an image one year ago with two of my friends : 

![with my friends](https://scontent.ftun3-1.fna.fbcdn.net/v/t1.0-9/16473183_979309875534963_475963488166732354_n.jpg?oh=f12eabea3c13ec07fe4f152cb522ab8c&oe=5AD202B3) 

in the alt attribute I found : 'Image may contain: 3 people, eyeglasses'. and yeah, the eyglasses are mine. This was auto-generated after the image was being uploaded, and this is awesome, everyone can know what's in there and it will be more awesome if you provide the alt yourself, you the human.

# For Search engine optimization sake

Search engine loves alt, that means they want to know information about your image, so they look at alt attribute value; so if you care about SEO, add the alt.
you can learn more basic things about SEO [in this youtube playlist course](https://www.youtube.com/watch?v=bpE-bIX1z9M&list=PLWjCJDeWfDddFOJYmcgNnUIhUHcsNEBTd)

## So yes, alt matters.
Join Zeroqode on Slack
Tags: developmentmeetup, nocodetools, startup
Published: 2017-12-18 14:08:06

---
title: Join Zeroqode on Slack
published: true
description: Zeroqode is launching a no-code slack channel 
tags: development meetup, no-code tools, startup 
---

[Zeroqode](https://zeroqode.com/) is launching a [no-code slack channel](https://join.slack.com/t/zeroqode/shared_invite/enQtMjg3OTEwMTE0NTE3LTY2MThlYmFhOTA5ZTI3ZDM5NDI5MWY3NjU1OWNkMjgyYzM4Mzk2ODExMzc1YWFjMzU3YWFhZDkwYzlhNTNmNTk) which will be a place to discuss all things about creating startups and products without code. We'll be talking about no-code platforms, app templates, courses, plugins, integrations and much more. Join the no-code community now 🙂
Is Writing Good Content Alone Enough To Run Successful Wordpress Blog ? 
Tags: wordpress, blogger, contentmarketing, blog
Published: 2017-12-18 13:34:05

---
title: Is Writing Good Content Alone Enough To Run Successful Wordpress Blog ? 
published: true    
description: Writing good content alone is not enough to run a successful blog in today's competitive online environment. Writing content is just the tip of an iceberg.
tags: Wordpress, Blogger, Content Marketing, Blog
---

Writing good content alone is not enough to run a successful blog in today's competitive online environment. Writing content is just the tip of an iceberg. There is more too much more to run a successful blog. 

First you need to have a good social presence. With social presence you can share your content with good number of people. If this presence is created intelligently and most of your follower / fans are genuinely interested in what you are writing, you can get a really good head start. These people will read your content with interest and share it with their friend circle. Also if it reaches to a good influencer, it will worth you gold. If you are using Wordpress for your blog you can use these <a href="https://wpsitex.com/top-social-media-websites-increase-reach-blog/">top social media websites to increase your reach.</a>  

Second you should create a genuine Email Subscriber list, where you can send newsletter. It can give a massive push to your blog as you can reach directly to your audience's mail box. Here are few <a href="https://wpsitex.com/things-to-remember-while-sending-newsletter-to-subscribers-of-blog/">things to remember while sending a newletter to your subscribers</a>

Third, you should optimise your blog to make it perform well in all aspects. If you are working with Wordpress, you are lucky. You get a number of plugins on Wordpress using which you can use to make your website Superhit. Here is a list of <a href="https://wpsitex.com/most-popular-must-have-wordpress-free-plugins-tools/">must have Wordpress plugins.</a>
What are some courses I should absolutely take in University as a Software Developer major?
Tags: discuss, webdev, beginners, career
Published: 2017-12-18 12:35:25

---
title: What are some courses I should absolutely take in University as a Software Developer major?
published: true
description: 
tags: discuss, webdev, beginners, career
---
Hi, so I'm going to begin my university in a month (Bachelor of Information Technology). I hope to major in software development. There are no compulsory maths courses in this major, but it's recommended. So in the first semester, I've taken Discrete Maths for Computer Science (as an elective).

Some other courses I've enrolled in for the first year:

1. Introduction to Interactive Media
2. Introduction to computer science 
3. An extra programming course (in addition to compulsory ones)

I'm interested in motion graphics, web design and development, human computer interaction, computational neuroscience and AI as well. 

**But to cut straight to the point, what are some courses I should take that will complement my Software Development major and help me get the most out of college education? I also want to keep my options open as a possible career in multimedia or Artificial intelligence.**

Hoping to get some valuable tips from the developer community xoxo
How To: Create a Simple Alert System Using Tag Helpers In Asp.Net Core Mvc
Tags: dotnet, tutorial
Published: 2018-04-05 11:32:52

---
title: "How To: Create a Simple Alert System Using Tag Helpers In Asp.Net Core Mvc"
published: true
tags: dotnet,tutorial
canonical_url: https://www.matheus.ro/2017/12/18/how-to-create-a-simple-alert-system-using-tag-helpers-in-asp-net-core-mvc/
---

In this post I’m gonna show you how to create an alert system using the tag helpers feature from the asp.net core mvc.

During this tutorial, I’ll be using a simple to do list project that I build, in order to experiment new stuff, [you can download or clone this git repository](https://github.com/mrodrigues1/SimpleToDo).

## **The Problem**

Feedback is important for the user, usually, is in form of messages on the screen. We could follow the client-side approach, by, creating an ajax request and showing a message after the response, or instead, follow the server-side approach, storing a message on a view bag, or even return a model with the message.&nbsp;

The asp.net core mvc has a new feature called tag helper, enabling us to create an alert system on the server-side.

[Continue Reading...](https://www.matheus.ro/2017/12/18/how-to-create-a-simple-alert-system-using-tag-helpers-in-asp-net-core-mvc/)
describe My React Native project's package.json
Tags: javascript, reactnative
Published: 2017-12-18 07:34:28

---
title: describe My React Native project's package.json
published: true
description: 
tags: javascript,reactnative
---


```javascript
{
	"name": "missus",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"start": "node node_modules/react-native/local-cli/cli.js start",
		"test": "jest",
		"flow": "node node_modules/flow-bin/cli.js",
		"devtool": "react-devtools"
	},
	"dependencies": {
		"react": "16.0.0",
		"react-native": "0.50.4",
		"react-native-message-bar": "^2.0.7",
		"react-native-router-flux": "^4.0.0-beta.24",
		"react-native-vector-icons": "^4.4.2",
		"react-redux": "^5.0.6",
		"redux": "^3.7.2",
		"redux-logger": "^3.0.6"
	},
	"devDependencies": {
		"babel-jest": "21.2.0",
		"babel-plugin-transform-class-properties": "^6.24.1",
		"babel-preset-es2015": "^6.14.0",
		"babel-preset-react-native": "4.0.0",
		"babel-preset-stage-3": "^6.24.1",
		"flow-bin": "^0.59.0",
		"jest": "21.2.1",
		"react-test-renderer": "16.0.0",
		"reactotron-react-native": "^1.13.2",
		"reactotron-redux": "^1.13.0",
		"remote-redux-devtools": "^0.5.12"
	},
	"jest": {
		"preset": "react-native"
	}
}

```