Skip to content

Instantly share code, notes, and snippets.

@weblancaster
weblancaster / simple-step-how-browsers-works
Last active October 9, 2015 21:37
How modern browsers works in simple steps.
The beauty of how modern browsers works in simple steps.
- Loading resources (img, external css/js, etc).
- Parsing the HTML.
- Creating the DOM Tree (nodes, etc).
- Creating the Render Tree.
- Layout of the render tree.
- Painting.
The science behind the scenes!
@weblancaster
weblancaster / px to em
Created October 18, 2012 17:28
Function to transform px to em using SASS
// formula/function to transform px to em.
@function calc-em($target-px, $context) {
@return ($target-px / $context) * 1em;
}
//use like this
selector {
padding-left: calc-em(20px, 16px);
}
@weblancaster
weblancaster / readme example
Last active December 12, 2015 05:48
Read me example
# ${1:Project Name}
TODO: Write a project description
## Installation
TODO: Describe the installation process
## Usage
@weblancaster
weblancaster / px-to-em
Created September 22, 2013 18:18
px to em
// It strips the unit of measure and returns it
@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}
// Converts "px" to "em" using the ($)em-base
@function convert-to-em($value, $base-value: $em-base) {
$value: strip-unit($value) / strip-unit($base-value) * 1em;
@if ($value == 0em) { $value: 0; } // Turn 0em into 0
@return $value;
@weblancaster
weblancaster / instagram-real-time-steps
Created March 10, 2014 18:04
Instagram real time steps
As a heads up make sure you have these things listed below.
1. Make sure that you have everything set up on Instagram with your Key https://github.com/weblancaster/instagram-real-time/blob/master/server.js#L21
2. You have your url's set up https://github.com/weblancaster/instagram-real-time/blob/master/server.js#L29
3. Subscribing your code to Instagram Real Time https://github.com/weblancaster/instagram-real-time/blob/master/server.js#L123
4.To change the hashtag you will need to change "object_id" https://github.com/weblancaster/instagram-real-time/blob/master/server.js#L40
@weblancaster
weblancaster / javascript-image-preloader
Last active August 29, 2015 13:58
Snippet to how to preload images assets using javascript.
function preloadimages(arr) {
var newimages = []
, loadedimages = 0
, postaction = function() {}
, arr = ( typeof arr != "object" ) ? [arr] : arr
, i = 0;
function imageloadpost(){
loadedimages++;
if ( loadedimages == arr.length ) {
@weblancaster
weblancaster / javascript-mobile-device-detection
Created May 15, 2014 20:38
Javascript Mobile device detection
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code..
}
@weblancaster
weblancaster / javascript-ie-and-ie11-detection
Created July 2, 2014 18:26
javascript IE and IE11 detection
function isIE() { return ((navigator.appName == 'Microsoft Internet Explorer') || ((navigator.appName == 'Netscape') && (new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null))); }
@weblancaster
weblancaster / javascript-is-element-visible
Last active August 29, 2015 14:06
javascript snippet for "is element visible"
function isElementInViewport (el) {
//special bonus for those using jQuery
if (el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
@weblancaster
weblancaster / Javascript-find-second-string-occurrence
Created October 27, 2014 00:15
Javascript find second string occurrence
str.indexOf("is", str.indexOf("is") + 1);