https://miguelmota.com/Recent content on Miguel Mota | Software DeveloperHugo -- gohugo.ioen-usThis work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.Sat, 17 Jul 2021 00:00:00 +0000https://miguelmota.com/blog/understanding-stableswap-curve/Sat, 17 Jul 2021 00:00:00 +0000https://miguelmota.com/blog/understanding-stableswap-curve/Disclaimer: These are my notes on learning about StableSwap and may contain errors. Please do your own research and cite the official whitepaper. Intro StableSwap is an autonomous market-maker (AMM) for stablecoins. The StableSwap AMM aims to provide low slippage and low fees when trading stablecoins (such as USDC, DAI, USDT, etc). A starting point for understanding the StableSwap protocol is to look at a simple linear invariant and existing AMMs like Uniswap since the StableSwap bonding curve is a more sophisticated combination of these curves.https://miguelmota.com/blog/rooting-a-fire-tv-stick-4k/Sat, 12 Sep 2020 00:00:00 +0000https://miguelmota.com/blog/rooting-a-fire-tv-stick-4k/This tutorial will walk you through the high-level process of rooting an Amazon Fire TV Stick 4K (3rd generation of Fire TV Stick, released in 2017). Rooting the stick is possible thanks to an exploit uncovered by user xyz on the XDA forums and user k4y0z who created a nice package for executing the exploit. They called this package kamakiri. Why root Unlocking the Fire TV Stick with root access allows us to install anything we want on it and circumvent the limitations of the stock operating system.https://miguelmota.com/blog/getting-started-with-wireguard/Sun, 05 Apr 2020 00:00:00 +0000https://miguelmota.com/blog/getting-started-with-wireguard/WireGuard is a relatively new VPN tunnel protocol that aims to be very fast and easy to setup. It follows the Unix Philosophy closely in that it only does one thing (creating secured VPN tunnels) and does it well. If you’ve ever set up an VPN service such as OpenVPN before then you know that it can get complicated because of all the steps you have to go through such as generating certificate authorities, issuing server and client keys and certificates, setting up multiple configuration files, configuring firewall rules, setting up route traffic forwarding, etc.https://miguelmota.com/blog/kubernetes-explained-like-im-five/Sun, 22 Sep 2019 00:00:00 +0000https://miguelmota.com/blog/kubernetes-explained-like-im-five/This was originally posted on “Explain Kubernetes to me like I’m Five” on dev.to ELI5: Kubernetes Docker images: think of them as blueprints, for example a blueprint for creating a cow. Docker daemon: think of it as corral for letting the cows run wild. Docker swarm (and Kubernetes): think of it as a rancher that manages the cows. Let’s say you create many cows (docker containers) with the same blueprint (docker image) and let the cows do their thing in the corral (docker daemon).https://miguelmota.com/blog/understanding-cross-origin-resource-sharing-cors/Fri, 20 Sep 2019 00:00:00 +0000https://miguelmota.com/blog/understanding-cross-origin-resource-sharing-cors/Cross-Origin Resource Sharing (CORS) is a way of making HTTP requests from one place to another. Historically browsers have only allowed requests in JavaScript to be made from the same domain enforced by the same-origin policy which prevents cross-origin type of requests. CORS gives the server authority of who can make requests and what type of requests are allowed. Browsers are the clients that enforce CORS policies. The server can configure:https://miguelmota.com/blog/checkpoint-git-commit-objects-to-ethereum-and-verify-using-merkle-proofs/Wed, 19 Jun 2019 00:00:00 +0000https://miguelmota.com/blog/checkpoint-git-commit-objects-to-ethereum-and-verify-using-merkle-proofs/In this guide we’ll go through creating a smart contract on Ethereum that notarizes git commits only if the commit date is within the allocated window of time and offer the ability to verify that a commit was published by verifying with merkle proofs composed from commit hash logs. Then we’ll be using git pre-push hooks to publish the commit on-chain on every tagged release. Here’s some schematics to help visualize the processes:https://miguelmota.com/blog/migrating-from-jekyll-to-hugo/Sat, 25 May 2019 00:00:00 +0000https://miguelmota.com/blog/migrating-from-jekyll-to-hugo/This post will go over how I migrated my Jekyll blog over to Hugo. Top reasons for moving to Hugo are: Faster compile time (it’s the fastest static site generator) Awesome documentation and community Go based templating (biased here) Dependency free (no dealing with ruby versions and gems) Robust theming support and content model Getting started First I created my hugo site: hugo new site mysite Then installed the blank theme:https://miguelmota.com/blog/evolution-of-blockchain-components-to-off-chain-models/Sun, 10 Mar 2019 00:00:00 +0000https://miguelmota.com/blog/evolution-of-blockchain-components-to-off-chain-models/The major components of blockchain are: Consensus Networking Record keeping Computation A blockchain is a shared state database that records outputs from transactions. The inputs for these computations are new inputs and current state from previously computed results. State transition updates are broadcasted via peer-to-peer networking and each node validates the incoming state updates to reach consensus. Blockchain brings the ability to execute programs in a trustless fashion by having every participating node in the network perform the computation and reach consensus on resulting output, where the output is then recorded into an immutable ledger.https://miguelmota.com/blog/undetected-screen-captures-on-macos/Thu, 28 Feb 2019 00:00:00 +0000https://miguelmota.com/blog/undetected-screen-captures-on-macos/Sometimes I get paranoid about people hacking into my computer, and as a way to protect myself I try to think like them. I was wondering the other day how I can detect someone taking screen captures (screenshots) of my computer. After some experimenting, I’ve determined that it’s not so easy to detect this. This post will walk you though some of the ways I was able to take screen captures of my macOS computer without being easily detected (in the shoes of a “hacker”) as I was trying to figure some of the possible ways a hacker might go about it in order for me to try to detect such behavior.https://miguelmota.com/blog/getting-started-with-secure-scuttlebutt/Sun, 24 Feb 2019 00:00:00 +0000https://miguelmota.com/blog/getting-started-with-secure-scuttlebutt/Scuttlebutt was started in May 2014 by Dominic Tarr (dominictarr) as an alternative offline-first invite-only social network that allows users to gain total control of their data and privacy. Secure Scuttlebutt (ssb) was released shortly after which puts privacy at the forefront with more encryption features. If you’re wondering where the heck the name Scuttlebutt came from: This 19th century term for a gossip comes from the nautical Scuttlebutt: “a barrel of water kept on deck, with a hole for a cup”.https://miguelmota.com/blog/subtle-psychological-tricks/Thu, 14 Feb 2019 00:00:00 +0000https://miguelmota.com/blog/subtle-psychological-tricks/Note: These are some “tricks” I’ve read about and thought it be interesting to share. For focusing Chewing gum helps your brain focus. Blood flow is increased to the brain resulting in an improved ability to focus. Chewing gum while taking a test can help you concentrate better. Look from right to left when scanning a room to slow down search and find what you’re looking for. You’re most likely to miss things when scanning from left to right because your eyes are use to always looking in that direction.https://miguelmota.com/blog/how-unix-programmers-at-restaurants-search-menus-for-their-favorite-plate/Thu, 13 Dec 2018 00:00:00 +0000https://miguelmota.com/blog/how-unix-programmers-at-restaurants-search-menus-for-their-favorite-plate/A Unix programmer heads over to the local diner to get something to eat for lunch. He, or Bob as he prefers, knows better than to manually scan the entire menu with his eyeballs because it’s inefficient. Bob knows that there’s a better way to automate the process in searching for what he wants to eat. Last time he was here he had a pretty good pasta-and-shrimp plate for under 10 bucks.https://miguelmota.com/blog/introducing-cointop/Tue, 15 May 2018 00:00:00 +0000https://miguelmota.com/blog/introducing-cointop/cointop is a fast and lightweight interactive terminal based UI application for tracking and monitoring cryptocurrency coin stats in real-time. The interface is inspired by htop and shortcut keys are inspired by vim. Cointop in action Features Quick sort shortcuts Custom key bindings configuration Vim inspired shortcut keys Fast pagination Charts for coins and global market graphs Quick chart date range change Fuzzy searching for finding coins Currency conversion Save and view favorite coins Portfolio tracking of holdings 256-color support Custom colorschemes Help menu Offline cache Supports multiple coin stat APIs Works on macOS, Linux, and Windows It’s very lightweight; can be left running indefinitely Try it out brew install cointop For other platforms, check out the releases page or read the installation instructions in the README.https://miguelmota.com/bytes/openssl-cheatsheet/Thu, 27 Apr 2017 00:00:00 +0000https://miguelmota.com/bytes/openssl-cheatsheet/A cheatsheet of common OpenSSL commands. Generate 512 bit RSA private key openssl genrsa Generate 1024 bit RSA private key openssl genrsa 1024 Generate 1024 bit RSA private key and save to file openssl genrsa -out private.key 1024 Check private key openssl rsa -in private.key -check Generate 1024 bit RSA private key with passphrase openssl genrsa -des3 -out private.key 1024 Generate certificate authority (CA) key openssl genrsa -out ca.key 1024 Generate a CA certificate signing request (CSR) using CA keyhttps://miguelmota.com/bytes/download-blob/Mon, 02 May 2016 00:00:00 +0000https://miguelmota.com/bytes/download-blob/An example of example of how to download a blob object in JavaScript. var a = document.createElement('a'); document.body.appendChild(a); a.style.display = 'none'; var blob = new Blob([audio], {type: 'audio/mpeg'}); var url = window.URL.createObjectURL(blob); a.href = url; a.download = 'file.mp3'; a.click(); window.URL.revokeObjectURL(url);https://miguelmota.com/blog/getting-started-with-rxjs/Fri, 22 Apr 2016 00:00:00 +0000https://miguelmota.com/blog/getting-started-with-rxjs/A guide in to the world of Functional Reactive Programming with RxJS.https://miguelmota.com/bytes/xmlhttprequest-multipart-post/Sun, 10 Apr 2016 00:00:00 +0000https://miguelmota.com/bytes/xmlhttprequest-multipart-post/Here’s an example of how to send a multipart POST containing binary data using XMLHTTPRequest: const xhr = new XMLHttpRequest(); const url = 'https://example.com'; // (assume dataView contains binary audio data) const dataView = new DataView(buffer); xhr.open('POST', url, true); xhr.responseType = 'arraybuffer'; xhr.onload = (event) => { console.log(xhr.response); }; xhr.onerror = (error) => { console.error(error); }; const BOUNDARY = 'BOUNDARY1234'; const BOUNDARY_DASHES = '--'; const NEWLINE = '\r\n'; const AUDIO_CONTENT_TYPE = 'Content-Type: audio/L16; rate=16000; channels=1'; const AUDIO_CONTENT_DISPOSITION = 'Content-Disposition: form-data; name="audio"'; const postDataStart = [ NEWLINE, BOUNDARY_DASHES, BOUNDARY, NEWLINE, AUDIO_CONTENT_DISPOSITION, NEWLINE, AUDIO_CONTENT_TYPE, NEWLINE, NEWLINE ].https://miguelmota.com/blog/exploring-decorators-in-javascript/Mon, 07 Mar 2016 00:00:00 +0000https://miguelmota.com/blog/exploring-decorators-in-javascript/In Object Oriented Programming, The Decorator Pattern is a popular design pattern that allows behavior to be added, removed, or modified from an object dynamically at runtime. In the latest iteration of the ES2016/ES7 specification, there is a proposal for JavaScript Decorators which lets us annotate and modify classes and properties at design time. I will be going over examples of decorators and how we can start using decorators in our code today.https://miguelmota.com/blog/alexa-voice-service-authentication/Sun, 28 Feb 2016 00:00:00 +0000https://miguelmota.com/blog/alexa-voice-service-authentication/Here I am going to walk you through on how to retrieve an access token in order to be able to interact with the Alexa Voice Service by using cURL. I have been getting a lot of requests on how to do this step from people reading the Alexa Voice Service with cURL blog post. Set up AVS Device Type If you haven’t already, go into the Alexa Developer Console and register a new Device as Product Type:https://miguelmota.com/bytes/gpg-encryption/Sun, 21 Feb 2016 00:00:00 +0000https://miguelmota.com/bytes/gpg-encryption/Here are example of how to encrypt, decrypt, and manage PGP keys using GPG. Generate a new key pair $ gpg --gen-key gpg (GnuPG) 1.4.19; Copyright (C) 2015 Free Software Foundation, Inc. This is free software: you are free to change and redistribute it. There is NO WARRANTY, to the extent permitted by law. Please select what kind of key you want: (1) RSA and RSA (default) (2) DSA and Elgamal (3) DSA (sign only) (4) RSA (sign only) Your selection?https://miguelmota.com/bytes/pocketsphinx-continuous-multiple-keywords/Sat, 20 Feb 2016 00:00:00 +0000https://miguelmota.com/bytes/pocketsphinx-continuous-multiple-keywords/Create a dictionary file containing all the words that will be used. You can use the CMU Sphinx Pronouncing Dictionary to get the phonemes for English dictionary words. keyphrase.dic: CAT K AE T DOG D AO G FISH F IH SH Create a keyphrase list file with a threshold for each phrase. Defaults to 1. Lower thresholds increase the number of matches but might also increase the number of false alarms.https://miguelmota.com/blog/getting-started-with-service-workers/Wed, 27 Jan 2016 00:00:00 +0000https://miguelmota.com/blog/getting-started-with-service-workers/Service Workers enables the ability to cache files for offline use, serve as a network proxy, enable the ability for push notification, and even background data sync. AppCache was an attempt to solve this problem but it made many assumptions about intended uses and in the end just caused more fustration than anything, so it became deprecated. Service Workers is AppCache’s successor, which greatly superceeds it by giving the developer a lot more granular control.https://miguelmota.com/bytes/git-blame/Wed, 20 Jan 2016 00:00:00 +0000https://miguelmota.com/bytes/git-blame/Git blame from the command line. Command format: git blame -L<LINE_NUMBER>,+<NUMBER_OF_LINES> [<COMMIT>] -- <FILE> Git blame a file: git blame -L100,+10 -- file.txt Git blame on a specific commit: git blame -L100,+10 fe25b6d^ -- file.txthttps://miguelmota.com/blog/alexa-voice-service-with-curl/Sun, 17 Jan 2016 00:00:00 +0000https://miguelmota.com/blog/alexa-voice-service-with-curl/The Alexa Voice Service (AVS) is an Amazon service which lets you interact with Alexa by sending requests in audio format. This means that we can create our own Amazon Echo by just having a microphone and a speaker available. The easiest way to get started is with a hello world example using cURL. But before we jump to it cURL we have to generate our test audio first. Generate sample audio The audio MUST be mono channel, sampled at 16k Hz, and signed 16 bit PCM encoding.https://miguelmota.com/bytes/canvas-glowing-particles/Fri, 15 Jan 2016 00:00:00 +0000https://miguelmota.com/bytes/canvas-glowing-particles/Create glowing particles in canvas. Particle.js: (function(root) { 'use strict'; function Particle(options) { var defaults = { ttl: 8000, maxXSpeed: 5, maxYSpeed: 2, maxRadius: 20, xVelocity: 4, yVelocity: 4, random: false, blink: true, speed: 30, containerWidth: window.innerWidth, containerHeight: window.innerHeight, context: null }; var settings = merge(defaults, options); for (var name in settings) { this[name] = settings[name]; } this.xStart = this.containerWidth / 2; this.yStart = this.containerHeight / 2; if (!(this.context instanceof Object)) { throw new Error('Canvas `context` is required.https://miguelmota.com/blog/set-up-raspberry-pi-as-a-network-server/Sun, 10 Jan 2016 00:00:00 +0000https://miguelmota.com/blog/set-up-raspberry-pi-as-a-network-server/The Raspberry Pi has an infinite amount of uses and one of them is using it as a network server. This is handy because people in your home network can connect to this network server and access shared files, such as movies and music, which can be streamed to your TV. I will be going over how to set this up on a fresh RPi. Install Raspbian Raspbian is a light-weight Debian based Linux distro tailored for the RPi.https://miguelmota.com/blog/summary-of-think-and-grow-rich/Sat, 02 Jan 2016 00:00:00 +0000https://miguelmota.com/blog/summary-of-think-and-grow-rich/This past weekend I decided to read the book Think and Grow Rich by Napolean Hill. If you are not familiar with Hill, he interviewed hundreds of men with tremendous amounts of wealth, over the span of many years in the early 20th century, to figure out what it takes to bring in riches and fortunes. The findings of his research is what became the book. After reading it I must say that it is one of best books I have ever read in the sense that the value of the information presented is absolutely pricless.https://miguelmota.com/bytes/buffer-to-arraybuffer/Tue, 29 Dec 2015 00:00:00 +0000https://miguelmota.com/bytes/buffer-to-arraybuffer/Convert a Buffer to ArrayBuffer. var isArrayBufferSupported = (new Buffer(0)).buffer instanceof ArrayBuffer; var bufferToArrayBuffer = isArrayBufferSupported ? bufferToArrayBufferSlice : bufferToArrayBufferCycle; function bufferToArrayBufferSlice(buffer) { return buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength); } function bufferToArrayBufferCycle(buffer) { var ab = new ArrayBuffer(buffer.length); var view = new Uint8Array(ab); for (var i = 0; i < buffer.length; ++i) { view[i] = buffer[i]; } return ab; } Usage var b = new Buffer(12); b.write('abc', 0); var ab = bufferToArrayBuffer(b); String.https://miguelmota.com/bytes/arraybuffer-to-buffer/Tue, 29 Dec 2015 00:00:00 +0000https://miguelmota.com/bytes/arraybuffer-to-buffer/Convert an ArrayBuffer to Buffer. var isArrayBufferSupported = (new Buffer(new Uint8Array([1]).buffer)[0] === 1); var arrayBufferToBuffer = isArrayBufferSupported ? arrayBufferToBufferAsArgument : arrayBufferToBufferCycle; function arrayBufferToBufferAsArgument(ab) { return new Buffer(ab); } function arrayBufferToBufferCycle(ab) { var buffer = new Buffer(ab.byteLength); var view = new Uint8Array(ab); for (var i = 0; i < buffer.length; ++i) { buffer[i] = view[i]; } return buffer; } Usage var ab = new ArrayBuffer(12); var v = new DataView(ab); [].slice.call('abc').forEach(function(s, i) { v[i] = s.https://miguelmota.com/blog/generate-self-signed-ssl-certificate/Sun, 29 Nov 2015 00:00:00 +0000https://miguelmota.com/blog/generate-self-signed-ssl-certificate/Using HTTPS for your web application is a no-brainer, but sometimes it is not intuitively clear on how to get started on using SSL for your website. I’m going to be going over step-by-step on generating a self-signed certficate and testing it out on a Node.js web server. Generating Private Key First let’s generate a private key. The private key is used to decrypt the data encrypted by the public key.https://miguelmota.com/bytes/slice-audiobuffer/Sat, 28 Nov 2015 00:00:00 +0000https://miguelmota.com/bytes/slice-audiobuffer/Slice out a portion of an AudioBuffer. var audioContext = new (window.AudioContext || window.webkitAudioContext); function AudioBufferSlice(buffer, begin, end, callback) { if (!(this instanceof AudioBufferSlice)) { return new AudioBufferSlice(buffer, begin, end, callback); } var error = null; var duration = buffer.duration; var channels = buffer.numberOfChannels; var rate = buffer.sampleRate; if (typeof end === 'function') { callback = end; end = duration; } // milliseconds to seconds begin = begin/1000; end = end/1000; if (begin < 0) { error = new RangeError('begin time must be greater than 0'); } if (end > duration) { error = new RangeError('end time must be less than or equal to ' + duration); } if (typeof callback !https://miguelmota.com/bytes/babylonian-method/Sun, 25 Oct 2015 00:00:00 +0000https://miguelmota.com/bytes/babylonian-method/Babylonian method for calculating square root of a number. function sqrt(n) { if (!(typeof n === 'number' && n >= 0 && !isNaN(n))) { return NaN; } else if (n === 0) { return 0; } else if (n === Infinity) { return Infinity; } var val = n; while(true) { var last = val; val = (val + n / val) * 0.5; if (Math.abs(val - last) < 1e-9) { break; } } return val; } Usage:https://miguelmota.com/bytes/array-balance-points/Fri, 23 Oct 2015 00:00:00 +0000https://miguelmota.com/bytes/array-balance-points/A balance point is where the left side of the index is equal to the right side of the index. This function returns an array of indices of balance points. function balancePoints(array) { if (!Array.isArray(array)) { return []; } var totalSum = array.reduce(sum, 0); var leftSum = 0; return array.reduce(function(points, current, i) { if (i > 0) { leftSum += array[i-1]; } var rightSum = totalSum - leftSum - current; if (leftSum === rightSum) { points.https://miguelmota.com/bytes/array-difference/Fri, 23 Oct 2015 00:00:00 +0000https://miguelmota.com/bytes/array-difference/Returns an array of unique values that is the symmetric difference of the provided arrays. function arrayDifference(/* arrays */) { var arrays = [].slice.call(arguments); var complement = []; for (var i = 0; i < arrays.length; i++) { var array = arrays[i]; if (Array.isArray(array)) { for (var j = 0; j < array.length; j++) { var value = array[j]; var atIndex = complement.indexOf(value); if (atIndex === -1) { complement.push(value); } else { complement.https://miguelmota.com/bytes/base-log/Fri, 23 Oct 2015 00:00:00 +0000https://miguelmota.com/bytes/base-log/Find the logarithm of a number (y) with specified base (x). logxY function baseLog(x, y) { return Math.log(y) / Math.log(x); } Usage: console.log(baseLog(5, 25)); // 2 console.log(baseLog(7, 49)); // 2 console.log(baseLog(2, 8)); // 3 console.log(baseLog(4, 64)); // 3 console.log(baseLog(2, 16)); // 4https://miguelmota.com/bytes/digit-sum/Fri, 09 Oct 2015 00:00:00 +0000https://miguelmota.com/bytes/digit-sum/Algorithm to sum the digits of a number. function digitSum(n) { if (!(typeof n === 'number' || n instanceof Number)) { return 0; } if (n <= 0) { return 0; } else if (n < 10) { return n; } else if (n === Infinity) { return Infinity; } return (n % 10) + digitSum((n / 10)>>0); } Usage: console.log(digitSum(1234)); // 10 console.log(digitSum(3890)); 20 console.log(digitSum(Infinity)); // Infinity console.log(digitSum(-1234)); // 0 console.https://miguelmota.com/bytes/array-without/Fri, 14 Aug 2015 00:00:00 +0000https://miguelmota.com/bytes/array-without/Create an array excluding provided value. /** * arrayWithout * @param {array} array - original array * @param {array} without - collection to omit * @example * arrayWithout(['a','b','c'], ['a','b','c']); // ['a'] */ function arrayWithout(a, w) { /* * Allows extension of prototype. * @example * Array.prototype.without = arrayWithout; * ['a','b','c'].without(['a','b','c']); // ['a'] */ if (Array.isArray(this)) { return arrayWithout.apply(null, [this].concat([].slice.call(arguments))); } a = Array.isArray(a) ? a.slice(0) : []; w = flatten([].slice.call(arguments, 1)); for (var i = 0; i < w.https://miguelmota.com/bytes/jshintrc/Tue, 02 Jun 2015 00:00:00 +0000https://miguelmota.com/bytes/jshintrc/A .jshintrc boilerplate example. .jshintrc { "node": true, "browser": true, "esnext": true, "bitwise": true, "camelcase": true, "curly": true, "eqeqeq": true, "immed": true, "indent": 4, "latedef": true, "newcap": true, "noarg": true, "quotmark": "single", "regexp": true, "undef": true, "unused": true, "strict": true, "trailing": true, "smarttabs": true, "jquery": true, "globals": { "define": true, "require": true, "module": true, "export": true, "$": true, "_": true } }https://miguelmota.com/bytes/webgl-detect/Mon, 25 May 2015 00:00:00 +0000https://miguelmota.com/bytes/webgl-detect/Detect if browser supports WebGL. function webglDetect() { var canvas = document.createElement('canvas'); var contextNames = ['webgl','experimental-webgl','moz-webgl','webkit-3d']; var context; if (navigator.userAgent.indexOf('MSIE') > -1) { try { context = WebGLHelper.CreateGLContext(canvas, 'canvas'); } catch(e) {} } else { for (var i = 0; i < contextNames.length; i++) { try { context = canvas.getContext(contextNames[i]); if (context) { break; } } catch(e) {} } } return !!context; } Usage: if (webglDetect()) { // WebGL is supported } On github at miguelmota/webgl-detect.https://miguelmota.com/bytes/array-max/Fri, 22 May 2015 00:00:00 +0000https://miguelmota.com/bytes/array-max/Find the maximum value in an array. function max(col, fn) { var top = -Infinity; var index; if (Array.isArray(col)) { for (var i = 0; i < col.length; i++) { var result = col[i]; if (typeof fn === 'function') { result = fn(col[i]); } else if (typeof fn === 'string') { result = col[i][fn]; } if (result >= top) { top = result; index = i; } } } return typeof index !https://miguelmota.com/bytes/array-min/Fri, 22 May 2015 00:00:00 +0000https://miguelmota.com/bytes/array-min/Find the minimum value in an array. function min(col, fn) { var bottom = Infinity; var index; if (Array.isArray(col)) { for (var i = 0; i < col.length; i++) { var result = col[i]; if (typeof fn === 'function') { result = fn(col[i]); } else if (typeof fn === 'string') { result = col[i][fn]; } if (result <= bottom) { bottom = result; index = i; } } } return typeof index !https://miguelmota.com/blog/k-means-clustering-in-javascript/Wed, 25 Feb 2015 00:00:00 +0000https://miguelmota.com/blog/k-means-clustering-in-javascript/Clustering is grouping of data or dividing a large data set into smaller data sets of some similarity. A well known clustering algorithm in unsupervised machine learning is K-Means clustering. The K-Means algorithm takes in n observations (data points), and groups them into k clusters, where each observation belongs to a cluster based on the nearest mean (cluster centroid). The distance between a data point and cluster centroid is calculated using the Euclidean distance.https://miguelmota.com/blog/naive-bayes-classifier-in-javascript/Mon, 16 Feb 2015 00:00:00 +0000https://miguelmota.com/blog/naive-bayes-classifier-in-javascript/The Naive Bayes classifier is a pretty popular text classification algorithm because of it’s simplicity. You’ll often see this classifier used for spam detection, authorship attribution, gender authentication, determing whether a review is positive or negative, and even sentiment analysis. The Naive Bayes classifier takes in a corpus (body of text) known as a document, which then a stemmer runs through the document and returns a “bag or words” so to speak.https://miguelmota.com/blog/pixelate-images-with-canvas/Sun, 01 Feb 2015 00:00:00 +0000https://miguelmota.com/blog/pixelate-images-with-canvas/There may be cases in which you want to pixelate an image, such as creating 8-bit style pixel art themed games or you simply want to give a hint of what an image is about without exposing too much. Turns out that it’s not complicated at all to do pixelation with canvas. View demo » The main methods needed from the canvas context are imageSmoothingEnabled for rendering crisp pixels and drawImage for drawing those pixels on to the canvas context.https://miguelmota.com/bytes/battery-status/Thu, 08 Jan 2015 00:00:00 +0000https://miguelmota.com/bytes/battery-status/Battery Status API wrapper: function Battery() { observable(this); if (typeof navigator.getBattery !== 'function') { navigator.getBattery = function () { return new Promise(function (resolve, reject) { if (navigator.battery) { resolve(navigator.battery); } else { reject(new Error('Battery Status API not implemented.')); } }); }; } navigator.getBattery().then(function(batteryManager) { this._battery = batteryManager; this.trigger('ready', this); this._battery.addEventListener('chargingchange', function() { this.trigger('chargingChange', this.isCharging()); }.bind(this)); this._battery.addEventListener('chargingtimechange', function() { this.trigger('chargingTimeChange', this.getChargingTime()); }.bind(this)); this._battery.addEventListener('dischargingtimechange', function() { this.trigger('dischargingTimeChange', this.getDischargingTime()); }.bind(this)); this._battery.addEventListener('levelchange', function() { this.https://miguelmota.com/bytes/validate-domain-regex/Sun, 04 Jan 2015 00:00:00 +0000https://miguelmota.com/bytes/validate-domain-regex/Using a regular expression to check if it is a valid domain. function isValidDomain(v) { if (!v) return false; var re = /^(?!:\/\/)([a-zA-Z0-9-]+\.){0,5}[a-zA-Z0-9-][a-zA-Z0-9-]+\.[a-zA-Z]{2,64}?$/gi; return re.test(v); } Usage isValidDomain('example.com') // true isValidDomain('foo.example.com') // true isValidDomain('bar.foo.example.com') // true isValidDomain('exa-mple.co.uk') // true isValidDomain('exa_mple.com') // false isValidDomain('example') // false isValidDomain('ex*mple.com') // false isValidDomain(3434) // false On github at miguelmota/is-valid-domainhttps://miguelmota.com/bytes/base64-mime-regex/Thu, 04 Dec 2014 00:00:00 +0000https://miguelmota.com/bytes/base64-mime-regex/Extract the MIME type from a base64 string using a regular expression. function base64MimeType(encoded) { var result = null; if (typeof encoded !== 'string') { return result; } var mime = encoded.match(/data:([a-zA-Z0-9]+\/[a-zA-Z0-9-.+]+).*,.*/); if (mime && mime.length) { result = mime[1]; } return result; } Usage: var encoded = 'data:image/png;base64,iVBORw0KGgoAA...5CYII='; console.log(base64Mime(encoded)); // "image/png" console.log(base64Mime('garbage')); // null On github at miguelmota/base64mimehttps://miguelmota.com/bytes/open-terminal-tab-programatically/Mon, 20 Oct 2014 00:00:00 +0000https://miguelmota.com/bytes/open-terminal-tab-programatically/Open a Terminal tab programatically in Node.js. index.js: var exec = require('child_process').exec; var through = require('through'); var os = require('os'); var child; var args = process.argv; function openTab(cmd, cb) { if (os.platform() !== 'darwin') { throw new Error('No support for this operating system but feel free to fork the repo and add it :)'); } var open = ['osascript -e \'tell application "Terminal" to activate\' ', '-e \'tell application "System Events" to tell process "Terminal" to keystroke "t"', 'using command down\' ', '-e \'tell application "Terminal" to do script', '"', cmd, '"', 'in selected tab of the front window\''].https://miguelmota.com/bytes/sass-cheatsheet/Wed, 01 Oct 2014 00:00:00 +0000https://miguelmota.com/bytes/sass-cheatsheet/A Sass cheatsheet. Watching sass --watch sass:css source Comments // I will not show when compiled /* I will be shown when compiled */ source Imports @import 'foo'; source Variables $foo: #000 !default; $bar: baz qux quux corge; source Nesting Selector nesting .foo { .bar { // .foo .bar { } } } source Property nesting .foo { text: { align: center; // .foo { text-align: center; } } } sourcehttps://miguelmota.com/blog/bitwise-operators-in-javascript/Sat, 19 Jul 2014 00:00:00 +0000https://miguelmota.com/blog/bitwise-operators-in-javascript/Bitwise operators act on the level of individual bits which allows for fast comparisons and calculations. I’ll be going over a couple of ways to use bitwise opeartors in JavaScript since it’s not entirely clear at first. Some of the examples shown are from various sources which I’ve accumlated over time in which I’m going to elaborate on them. Bitwise AND Return a one if the two bits are both one.https://miguelmota.com/blog/es6-examples/Fri, 20 Jun 2014 00:00:00 +0000https://miguelmota.com/blog/es6-examples/If you’ve been up-to-date with what’s going on in the JavaScript world then you know that ES6 is currently the new hotness in town. I’m going to be showing examples of some of the nicest features in ES6, which include: Modules Classes Arrow Functions Destructuring Generators Promises Proxies Defaults Maps Weak Maps Sets Symbols Shorthand Objects Spread Operator Rest operator Constants Block Scoping Template Strings Modules Export example (math.https://miguelmota.com/bytes/ansible-git-example/Fri, 13 Jun 2014 00:00:00 +0000https://miguelmota.com/bytes/ansible-git-example/Basic Ansible example on deploying with git. vars.yml ---# Update this to your own settingsproject_name:testproject_root:/var/www/testproject_repo:git@github.com:miguelmota/test-repo.githandlers.yml: ---- name:restart web serveraction:command echo "do something"sudo_user:rootdeploy.yml: ---- hosts:serversvars_files:- vars.ymlgather_facts:falsesudo:truesudo_user:rootuser:roottasks:- name:Pull sources from the repository.git:repo={{project_repo}} dest={{project_root}} version={{branch}}notify:- restart web serverhandlers:- include :handlers.ymlhosts: # Replace 0.0.0.0 with your server ip [remote:children] production staging [servers:children] production staging local [production] 0.0.0.0 nickname=production vm=0 branch=stable [staging] 0.0.0.0 nickname=staging vm=0 branch=staging [local] localhost nickname=local vm=0 branch=development ansible: #!/bin/bash # Run with: # .https://miguelmota.com/blog/deployment-with-git/Fri, 14 Mar 2014 00:00:00 +0000https://miguelmota.com/blog/deployment-with-git/A Git hook allows you to execute custom scripts when an action occurs, such as when a commit or push is performed. Before I discovered git hooks, my deployment process consisted of pushing changes to my remote repository, SSH’ing into the server, navigating to the site directory, pulling the changes, and restarting the webserver. It wasn’t efficient at all and a waste of time doing that several times a day. I’ll explain how to set up a simple git hook making the deployment process a bit more effortless, but first I want to give credit to this how-to article which got me started.https://miguelmota.com/blog/intro-to-redis/Thu, 23 Jan 2014 00:00:00 +0000https://miguelmota.com/blog/intro-to-redis/Redis is an in-memory, key-value store that is fast. Really fast. Redis can hold hundreds of millions of keys in memory and handle tens of thousands of requests per second without breaking a sweat. It’s useful for caching data, maintaining sessions, keeping counters, queues, publish/subscribe real time notifications, and so on. There are many use cases for Redis due to it’s simple dictionary model that maps keys to values, but what one should be aware of is that it’s focus is not long-term data persistance.https://miguelmota.com/bytes/object-serialization/Tue, 10 Dec 2013 00:00:00 +0000https://miguelmota.com/bytes/object-serialization/Serialize an object in JavaScript. function serialize(obj, prefix) { var s = function(obj, prefix) { var str = []; for(var p in obj) { var k = prefix ? prefix + '[' + p + ']' : p, v = obj[p]; if (v !== undefined && v !== null) { var set; if (v instanceof Object) { set = s(v, k); str.push(set); } else if (Array.isArray(v)) { v.forEach(function(n) { set = encodeURIComponent(k) + '=' + encodeURIComponent(n); str.https://miguelmota.com/blog/getting-started-with-backbonejs/Sat, 30 Nov 2013 00:00:00 +0000https://miguelmota.com/blog/getting-started-with-backbonejs/In this tutorial I will go over Backbone.js main components: Models, Collections, Views, and Routes. We will not be building an application but instead we will be going over a number of simple examples of each Backbone compoment, that hopefully after we are done you will have a firm understanding of Backbone.js and be able to put it all together. Models Models are a key component of Backbone applications. With model objects you can easily keep track of your data and update as needed.https://miguelmota.com/blog/memoization-caching-function-results-in-javascript/Wed, 30 Oct 2013 00:00:00 +0000https://miguelmota.com/blog/memoization-caching-function-results-in-javascript/Memoization (based on the word memorable) is technique that caches the result of a function in order to avoid recalculation the next time the same function is called. Initially when the function is executed, the result gets added to an object holding the calculated results. When the function is called again, it checks the results object to see if already contains the result and if it does then return it. If it’s not cached, then calculate and store it.https://miguelmota.com/blog/set-up-ssh-keys/Mon, 30 Sep 2013 00:00:00 +0000https://miguelmota.com/blog/set-up-ssh-keys/Having to type in a password in order to SSH into your server every single time is tedious and not the way to go. I will show you how to set up SSH keys so that you can elimate an extra step from your workflow. Generating keys On your local maching, generate a new SSH key with the command: # Generate new key. ssh-keygen -t rsa When asked for the file to save the key in, enter:https://miguelmota.com/blog/nodejs-and-nginx-on-ubuntu/Thu, 26 Sep 2013 00:00:00 +0000https://miguelmota.com/blog/nodejs-and-nginx-on-ubuntu/In this tutorial I will show how to install and configure Node.js and Nginx on you Ubuntu server. Installing Dependencies The only dependency we really need is the build-essential package in order to be able to compile the Node.js source code. # Make sure to download the latest repos. sudo apt-get update # Required to run `make` command. sudo apt-get install build-essential # If you need to use https. sudo apt-get install libssl-dev # My favorite text editor.https://miguelmota.com/blog/raspberry-pi-camera-board-video-streaming/Wed, 25 Sep 2013 00:00:00 +0000https://miguelmota.com/blog/raspberry-pi-camera-board-video-streaming/Raspberry Pi camera board So you got your Raspberry Pi and decided to get a Camera Board to do something awesome with it. Why not turn it a simple video streamer? That’s what I thought too. I wanted to set up a simple security camera for my home so that I can see spy on whoever is lurking around from wherever I am through a web browser.https://miguelmota.com/blog/screenshots-with-getusermedia-api/Sat, 31 Aug 2013 00:00:00 +0000https://miguelmota.com/blog/screenshots-with-getusermedia-api/With the getUserMedia API, it is now possible to access the user’s webcam and microphone using just JavaScript. What this means is that we can finally get rid of those nasty Flash plugins and use this native approace instead. At the writing of this post, only Firefox 17+ and Chrome 21+ have support for getUserMedia. Give credit where credit is due. The code is heavily inspired by HTML5 Rocks' article Capturing Audio & Video in HTML5.https://miguelmota.com/blog/basic-html5-audio-manipulation/Sun, 07 Jul 2013 00:00:00 +0000https://miguelmota.com/blog/basic-html5-audio-manipulation/Using JavaScript, we can create an audio object and manipulate it very easily. Below is some code (gist) to help you get started. You can play, stop, pause, and loop the audio. <!-- Audio Control Buttons --> <button id="play-button">Play</button> <button id="stop-button">Stop</button> <button id="pause-button">Pause</button> <button id="loop-button">Loop</button> // Basic HTML5 audio manipulation (function () { 'use strict'; // Set namespace. var NS = {}; // Control buttons. NS.playButton = document.getElementById('play-button'); NS.https://miguelmota.com/blog/slide-out-navigation-using-css3-translate/Fri, 07 Jun 2013 00:00:00 +0000https://miguelmota.com/blog/slide-out-navigation-using-css3-translate/There are many ways to create a navigation menu for a mobile site, but the kind that seems to be most popular at the time is a slide out menu, such as the one you see on the Facebook app. The advantages of using this type of menu is that it is easily accessible and there is a lot of room for list items since the user can scroll within the menu.https://miguelmota.com/blog/call-and-apply-methods-in-javascript/Fri, 10 May 2013 00:00:00 +0000https://miguelmota.com/blog/call-and-apply-methods-in-javascript/The call and apply methods in JavaScript might look complicated at first glance, but they are actually easy to wrap your head around. Suppose we have an object called square with a few properties: var square = { color: "red", getColor: function () { return "I am the color " + this.color + "!"; }, getArea: function (width, height) { return "My area is " + (width * height) + " feet!https://miguelmota.com/blog/sass-triangles/Sat, 04 May 2013 00:00:00 +0000https://miguelmota.com/blog/sass-triangles/Creating CSS triangles shouldn’t be hard. Here’s a handy little mixin for creating triangles in Sass (gist): @mixin triangle($size:24px, $color:#000, $direction:up, $trim:false, $transparent:false) { content: ""; display: inline-block; width: 0; height: 0; border: solid $size; @if $direction == up { border-color: transparent transparent $color transparent; @if $transparent { border-color: $color $color transparent $color; } @if $trim { border-top-width: 0; } } @if $direction == right { border-color: transparent transparent transparent $color; @if $transparent { border-color: $color $color $color transparent ; } @if $trim { border-right-width: 0; } } @if $direction == down { border-color: $color transparent transparent transparent; @if $transparent { border-color: transparent $color $color $color; } @if $trim { border-bottom-width: 0; } } @if $direction == left { border-color: transparent $color transparent transparent; @if $transparent { border-color: $color transparent $color $color; } @if $trim { border-left-width: 0; } } }https://miguelmota.com/blog/understanding-prototype-in-javascript/Thu, 25 Apr 2013 00:00:00 +0000https://miguelmota.com/blog/understanding-prototype-in-javascript/A prototype is an object from where other objects inherit properties from. All objects in JavaScript are descended from Object, a global object. Why this matters I’ll explain later, but for now let’s jump in to some code. Constructor and Methods Let’s define a functional object constructor called Quadrilateral and have width and height as parameters. // Define our constructor var Quadrilateral = function(width, height) { this.width = width; this.height = height; return this; } Traditionally if we wanted to have a method we would define it something like this:https://miguelmota.com/blog/responsive-video/Fri, 19 Apr 2013 00:00:00 +0000https://miguelmota.com/blog/responsive-video/Dealing with responsive video can be quite troublesome. Here is a simple script you might find useful: (function() { // Responsive Video function responsiveVideo(selector) { // Get videos var videos = document.querySelectorAll(selector); // Loop through videos for (var i = 0; i < videos.length; i++) { var video = videos[i]; // Get aspect ratio var videoRatio = (video.height / video.width) * 100; // Stretch video video.https://miguelmota.com/blog/iphone-and-ipad-web-app-startup-images/Sun, 07 Apr 2013 00:00:00 +0000https://miguelmota.com/blog/iphone-and-ipad-web-app-startup-images/In order to avoid having a blank white screen when launching a web app, you can use a apple-touch-startup-image. This is displayed momentarily while the web app is loading. There are a number of link tags to target all iPhone and iPad devices which you must use. But there’s also a very important thing to not do, and that is to not use width=device-width on the viewport meta tag because this will letterbox the viewport and it will not work.https://miguelmota.com/bytes/sass-px-to-em/Sat, 06 Apr 2013 00:00:00 +0000https://miguelmota.com/bytes/sass-px-to-em/Sass function to convert pixels to em. $em-base: 16px !default; @function emCalc($pxWidth) { @return $pxWidth / $em-base * 1em; } Usage: body { color: emCalc(20px); } Compiles to: body { color: 1.25em; }https://miguelmota.com/blog/sass-media-queries/Sat, 06 Apr 2013 00:00:00 +0000https://miguelmota.com/blog/sass-media-queries/There are various methods of setting breakpoints in Sass. The first method, which I use, is heavility inspired by Chris Eppstein’s selector hacks. The second method is how ZURB’s Foundation 4 breakpoints are set. Here is the gist: // Sass Media Query Breakpoints // // METHOD 1 // // Inspired by http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32 // // Usage: // // div { // color: blue; // // @include respond-to(mobile) { // color: red; // } // // } // $break-mobile: 640px; $break-desktop: 1024px; @mixin respond-to($media) { @if $media == mobile { @media only screen and (max-width: $break-mobile) { @content; } } @else if $media == tablet { @media only screen and (min-width: $break-mobile + 1) and (max-width: $break-desktop - 1) { @content; } } @else if $media == desktop { @media only screen and (min-width: $break-desktop) { @content; } } } // // METHOD 1 (extended) // // Inspired by https://gist.https://miguelmota.com/bytes/extensive-gitignore/Thu, 04 Apr 2013 00:00:00 +0000https://miguelmota.com/bytes/extensive-gitignore/There are .gitignore templates suited for pretty much any project. I’m going to share the .gitignore that I recently been using for my web projects. It’s and extended verison of github’s global .gitignore. Here is the gist: //this will affect all the git repos git config --global core.excludesfile ~/.gitignore //update files since .ignore won't if already tracked git rm --cached <file> # Compiled source # ################### *.com *.class *.dll *.exe *.https://miguelmota.com/blog/css3-filters/Sun, 22 Jul 2012 00:00:00 +0000https://miguelmota.com/blog/css3-filters/Webkit has implemented CSS filters, which can spice up the way your photos look without the hassle of having to deal with software like Photoshop. Currently there are 10 CSS filters available, which are: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate and sepia. In the meantime you must use the -webkit- vendor prefix, like so (gist): img { -webkit-filter: blur(2.5px); /* values: 0px - 25px */ -webkit-filter: brightness(5%); /* values: -100% - 100% */ -webkit-filter: contrast(1.https://miguelmota.com/blog/miggs-url-shortener/Mon, 20 Feb 2012 00:00:00 +0000https://miguelmota.com/blog/miggs-url-shortener/Everyone now-a-days seems to have their own url shortening service, such as goo.gl, t.co, youtu.be, fb.me, git.io, and so on. So I thought I’d have my own as well, and therefore mig.gs was born. mig.gs offers basic analytics using Google Charts API to display daily clicks and generate a QR code. It also displays a Google map of your link visitors by using their IP Address. You can make an account to save your links or use a custom word instead of a random code if you’d like, kind of like bit.https://miguelmota.com/blog/ant-task-to-compress-html-files/Fri, 14 Oct 2011 00:00:00 +0000https://miguelmota.com/blog/ant-task-to-compress-html-files/I will show you how to compress your HTML files using the Java library HtmlCompressor. So let’s say your html code looks something like this: <!doctype html> <html> <head> <title>htmlcompressor</title> </head> <body> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida suscipit lectus. <!-- comment --> </body> </html> After we compress it, it’ll look like this: <!doctype html> <html> <head> <title>htmlcompressor</title> </head> <body> Lorem ipsum dolor sit amet, consectetur adipiscing elit.https://miguelmota.com/blog/display-latest-delicious-bookmarks-with-jquery/Tue, 11 Oct 2011 00:00:00 +0000https://miguelmota.com/blog/display-latest-delicious-bookmarks-with-jquery/If you look below you see my three most recently saved bookmarks from (delicious)[http://delicious.com/miguelmota]: fetching bookmarks... var niceTime = (function(){ var ints = { second: 1, minute: 60, hour: 3600, day: 86400, week: 604800, month: 2592000, year: 31536000 }; return function(time){ time = +new Date(time); var gap = ((+new Date()) - time) / 1000, amount, measure; for (var i in ints){ if (gap ints[i]){ measure = i; } } amount = gap / ints[measure]; amount = gap ints.https://miguelmota.com/blog/html5-reset-stylesheet/Tue, 09 Aug 2011 00:00:00 +0000https://miguelmota.com/blog/html5-reset-stylesheet/I couldn’t find an HTML5 reset stylesheet that suited my needs so I decided to modify HTML5 Doctors' CSS reset a bit. Here is the gist: html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } body { line-height: 1; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } a { text-decoration: none; } ins { text-decoration: none; } mark { font-style: italic; font-weight: bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } hr { border: 0; border-top: 1px solid #ccc; display: block; height: 1px; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } What CSS reset do you use?https://miguelmota.com/blog/make-an-awesome-tooltip-with-jquery/Tue, 24 May 2011 00:00:00 +0000https://miguelmota.com/blog/make-an-awesome-tooltip-with-jquery/I will attempt to show you how to make a simple yet awesome tooltip using jQuery and CSS3. Ok so first let’s set up the HTML: <a class="awesometooltip" href="http://www.miguelmota.com" title="Hello, I am a tootip!">hover over me</a> All we did was make a link with the class of awesometooltip (that’s what I decided to call this mini plugin) and gave it a title attribute. Now let’s move on to the fun stuff.https://miguelmota.com/blog/hello-world/Wed, 30 Mar 2011 00:00:00 +0000https://miguelmota.com/blog/hello-world/Why hello there, and welcome to my blog. I am using jekyll, a static site generator, and it is being hosted on GitHub Pages. I will blog about all things web, usually about code and design tips, tricks and techniques. So yep, that’s pretty much it!