Skip to content

Instantly share code, notes, and snippets.

View hibuno's full-sized avatar
🌙
Working at Night

Muhibbudin Suretno hibuno

🌙
Working at Night
223 followers · 25 following
View GitHub Profile
@hibuno
hibuno / PreventCaching.js
Created September 4, 2017 01:34
function createHash() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 32; i++)
text += possible.charAt(Math.ceil(Math.random() * possible.length));
return text;
}
@hibuno
hibuno / button.css
Created October 14, 2017 00:20
CSS Vendor prefix example
.button {
padding: 14px 20px;
line-height: normal;
background-color: #2C483D;
color: white;
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
@hibuno
hibuno / button.css
Created October 14, 2017 00:27
CSS vendor prefix with multiple property example
.button {
padding: 14px 20px;
line-height: normal;
-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background-color: #2C483D;
color: white;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
@hibuno
hibuno / gulp_autoprefixer.js
Created October 14, 2017 00:41
Example gulp autoprefixer from https://github.com/postcss/autoprefixer
gulp.task('autoprefixer', function () {
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('autoprefixer');
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([ autoprefixer() ]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dest'));
@hibuno
hibuno / webpack_autoprefixer.js
Created October 14, 2017 00:45
Example webpack autoprefixer from https://github.com/postcss/autoprefixer Raw
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
]
}
@hibuno
hibuno / index.html
Last active November 11, 2017 02:08
Script for Audio Context Tutorial at my medium account (https://medium.com/@muhibbudins)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SoundWave</title>
<style>
canvas {
background-color: #101010;
width: 600px;
@hibuno
hibuno / script.js
Last active November 11, 2017 02:11
Script for Audio Context Tutorial at my medium account (https://medium.com/@muhibbudins)
const
source = document.getElementById('source'),
player = document.getElementById('player'),
canvas = document.getElementById('visualizer'),
name = document.getElementById('song_name'),
format = document.getElementById('song_format'),
blob = window.URL || window.webkitURL,
color = ['#1abc9c','#2ecc71','#3498db','#9b59b6','#34495e','#16a085','#27ae60','#2980b9','#8e44ad'];
// Check if blob is exist in this browser
@hibuno
hibuno / script.js
Created November 11, 2017 02:12
Script for Audio Context Tutorial at my medium account (https://medium.com/@muhibbudins)
// Load song to player
source.addEventListener('change', (e) => {
let
file = e.target.files[0],
fileURL = blob.createObjectURL(file);
name.innerHTML = file.name;
format.innerHTML = file.type;
player.src = fileURL;
@hibuno
hibuno / script.js
Created November 11, 2017 02:16
Script for Audio Context Tutorial at my medium account (https://medium.com/@muhibbudins)
function stream() {
const
audio = new(window.AudioContext || window.webkitAudioContext)(),
analyser = audio.createAnalyser();
player.addEventListener('canplay', (e) => {
let source = audio.createMediaElementSource(player);
source.connect(analyser);
@hibuno
hibuno / script.js
Created November 11, 2017 02:19
Script for Audio Context Tutorial at my medium account (https://medium.com/@muhibbudins)
// Prepare Canvas
const context = canvas.getContext('2d');
// Draw wave
function draw() {
requestAnimationFrame(draw);
analyser.getByteFrequencyData(frequency);
context.fillStyle = '#101010';
context.fillRect(0, 0, canvas.width, canvas.height);