Jorge Epuñan juanbrujo

I type code for humans and machines. And browsers, sometimes.

juanbrujo / element-enters-viewport.js

Last active March 23, 2017 21:06

Detect with jQuery if an element enters the viewport ( visible() )

juanbrujo / emailregex.html

Last active December 23, 2015 17:59

Regexp pattern for email validation

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

juanbrujo / makeemailsclickeable.js

Last active December 24, 2015 08:59

Find emails inside a string and transforms them in clickable

	$(".real-content")
	.find (':contains("@")')
	.each (function (index, element) {
	var emailPattern = /[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/;
	var corrected = $(element).html();
	var remainder = corrected;
	while ( emailPattern.test (remainder)) {
	var email = emailPattern.exec (remainder);
	remainder = remainder.replace (email, '');
	corrected = corrected.replace (email, '<a href="mailto:' + email + '">' + email + '</a>');

juanbrujo / mixins.less

Last active December 24, 2015 11:49

My base LESS mixins

	// (¯`·.¸¸.·´¯`·.¸¸.-> COLORS <-.¸¸.·´¯`·.¸¸.·´¯)
	@naranjo: #ff9100;
	@sandia: #f34b4b;
	@azul: #2d3c7b;


	// ¸,ø¤º°`°º¤ø,¸¸,ø¤º° JUST FOR DEBUGGING
	.out(@color:red){outline:1px solid @color;}

	// (¯`·.¸¸.·´¯`·.¸¸.-> MIXINS <-.¸¸.·´¯`·.¸¸.·´¯)

juanbrujo / characterCountdown.js

Created October 8, 2013 01:05

Simple character countdown

	function characterCountdown() {
	var characterLeft = 140 - jQuery('textarea').val().length;
	jQuery('.message').text(characterLeft + ' characters left.');
	}

	$(function() {
	characterCountdown();
	$('textarea').change(characterCountdown);
	$('textarea').keyup(characterCountdown);
	});

juanbrujo / triangle-mixin.less

Last active December 25, 2015 13:19

My own mixin to create all kinds of CSS triangles.

	/*
	Use:
	.triangle(direction,width,height,color);

	Example:
	@square: 50px;
	@color: red;
	.triangle(bottomright,@square,@square/2,@color);
	*/

juanbrujo / jquery.imgPreloader.js

Created October 15, 2013 22:44

jQuery: preloads an array of images. Demo: http://codepen.io/juanbrujo/pen/yIiCs

	(function($) {
	var imgList = [];
	$.extend({
	preload: function(imgArr, option) {
	var setting = $.extend({
	init: function(loaded, total) {},
	loaded: function(img, loaded, total) {},
	loaded_all: function(loaded, total) {}
	}, option);
	var total = imgArr.length;

juanbrujo / loop.css

Last active December 27, 2015 13:59

LESS basic loop

juanbrujo / websafe-fontstack.css

Created January 21, 2014 13:09

List of Web Safe font-stack

	font-family: Arial, Helvetica, sans-serif;
	font-family: 'Arial Black', Gadget, sans-serif;
	font-family: 'Bookman Old Style', serif;
	font-family: 'Comic Sans MS', cursive;
	font-family: Courier, monospace;
	font-family: 'Courier New', Courier, monospace;
	font-family: Garamond, serif;
	font-family: Georgia, serif;
	font-family: Impact, Charcoal, sans-serif;
	font-family: 'Lucida Console', Monaco, monospace;

juanbrujo / gulpfile.js

Last active August 29, 2015 13:55

Basic gulpfile.js to work a basic HTML/JS/LESS/Images project under Gulp.JS/Express

	var gulp = require('gulp');
	var less = require('gulp-less');
	var uglify = require('gulp-uglify');
	var watch = require('gulp-watch');
	var imagemin = require('gulp-imagemin');

	var EXPRESS_PORT = 4000;
	var EXPRESS_ROOT = __dirname;
	var LIVERELOAD_PORT = 35729;