###### tags: `jptw` `thesis` `technology` `html/css/js` `webpage`
# Notes for HTML/CSS/JavaScript

## Waveform & Spectrogram
**Framework** | [wavesurfer.js](https://wavesurfer-js.org/)

var wavesurfer = WaveSurfer.create({
    // your options here
    plugins: [
        WaveSurfer.spectrogram.create({
            wavesurfer: wavesurfer,
            container: "#wave-spectrogram",
            labels: true
        })
    ]
});

wavesurfer.load('../media/demo.wav');

> Tutorial:
> [1] [wavesurfer.js + Spectrogram](http://wavesurfer-js.org/example/spectrogram/index.html)
> [2] [WaveSurfer.js - spectrogram with frequency labels](https://www.codeseek.co/entonbiba/wavesurfer-js---spectrogram-with-frequency-labels-Bpmqrq)

## Select Box
> Ref: [How TO - Custom Select Box](https://www.w3schools.com/howto/howto_custom_select.asp)

## Button "Close" upon Hover

<div class="hide-button"><a href="#">x</a></div>

.hide-button {
    float: right;
    margin-top: -13px;
    font-size: 11px;
    font-family: helvetica;
    color: tray;
    display: none;
}

> Ref: [Displaying a “close” icon upon hover](https://stackoverflow.com/questions/6879823/displaying-a-close-icon-upon-hover)

## Read YAML File
**Module** | [nodeca/js-yaml](https://github.com/nodeca/js-yaml)

(function () {
"use strict";
    $(document).ready(function () {
        $.get('/common/resources/LessonContentsLv01Ln01.yml')
        .done(function (data) {
          console.log('File load complete');
          console.log(jsyaml.load(data));
          var jsonString = JSON.stringify(data);
          console.log(jsonString);
          console.log($.parseJSON(jsonString));
      });
    });
}());

> Ref:
> [1] [Reading from YAML File in Javascript](https://stackoverflow.com/questions/13785364/reading-from-yaml-file-in-javascript/22671960)
> [2] [JavaScript YAML Parser](https://stackoverflow.com/questions/4335804/javascript-yaml-parser)

## Resizable DIV
Make element resizeable

.resizeable {
  resize: both;
  overflow: auto;
  border: 2px solid black;
}

Detect dimension changed

<script src="css-element-queries/src/ResizeSensor.js"></script>
<script src="css-element-queries/src/ElementQueries.js"></script>

new ResizeSensor(jQuery('#divId'), function(){ 
    console.log('content dimension changed');
});

> Ref:
> [1] [How can I resize a DIV by dragging just ONE side of it?](https://stackoverflow.com/questions/6219031/how-can-i-resize-a-div-by-dragging-just-one-side-of-it)
> [2] [How to detect DIV's dimension changed?](https://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed)
> [3] [CSS-Element-Queries-ResizeSensor](http://marcj.github.io/css-element-queries/)

## Others
[1] [Convert css width string to regular number](https://stackoverflow.com/questions/3530127/convert-css-width-string-to-regular-number)

var width = parseInt(element.style.width,10); // always use a radix

[2] [SASS教學 ＋SCSS：CSS 再進化，掌握語法攻略！](https://frankknow.com/sass-tutorial/)

[3] [Notes for JavaScript | Cosine](/@ahglab/thesis-tech-js)
[4] [Frontend Bookmarks | Cosine](/@cosine/bookmark-frontend)