Hi, I'm Miguel Mota.
A software developer from sunny Southern California. Learn more »

StackOverflow

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. Read more...

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. Read more...

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. Read more...

Getting Started with Backbone.js

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. Read more...

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. Read more...

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: Read more...

Node.js 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. Read more...

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. Read more...

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. Read more...

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.stopButton = document. Read more...

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. Read more...

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! Read more...

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; } } }

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. Read more...

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. Read more...

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. Read more...

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. Read more...

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. Read more...

mig.gs™ — 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. Read more...

How To Survive a Zombie Outbreak

Illustration by Tony Moore Illustration Ever wondered what to do if a zombie outbreak actually occurred one day? I bet you have, and you should be worried. The zombie apocalypse is near as we know it, but the question is, are you ready for it? You wake up on a gloomy Monday morning, only to find your deceased yet viable emotionless little sister munching savagely on your mother’s juicy, bloody human flesh. Read more...

Subscribe

Receive updates on new posts.