Hi, I'm Miguel Mota.
A software developer and open source contributor. Learn more »

iPhone and iPad Web App Startup Images

07 Apr 2013 ・1 min read

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

06 Apr 2013 ・2 min read

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

22 Jul 2012 ・1 min read

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

20 Feb 2012 ・1 min read

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

Ant task to compress HTML files

14 Oct 2011 ・2 min read

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

Display latest delicious bookmarks with jQuery

11 Oct 2011 ・2 min read

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

HTML5 Reset Stylesheet

09 Aug 2011 ・1 min read

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

Make an Awesome Tooltip with jQuery

24 May 2011 ・5 min read

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

Hello World

30 Mar 2011 ・0 min read

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!

Previous Page 3 of 3

Subscribe