UPDATE users SET first_name = ELT(FLOOR(RAND()*97)+1, 'Aidan','Alexander','Asher','Andrew','Aaron','Adam','Adrian','Austin','Anthony','Braden','Benjamin','Brody','Blake','Brandon','Cayden','Caleb','Connor','Cole','Colin','Carter','Christopher','Carson','Cameron','Colton','Cooper','Dylan','Dominic','Daniel','Damien','David','Ethan','Elijah','Elliot','Evan','Emmett','Edward','Finn','Gabriel','Gavin','Grayson','Gage','Holden','Hayden','Hunter','Henry','Harry','Isaac','Ian','Isaiah','Jackson','Jacob','James','Jayden','Jack','Joshua','Jasper','Jonah','Joseph','Jonathan','Joel','John','Jude','Jason','Liam','Logan','Landon','Lucas','Levi','Luke','Mason','Matthew','Michael','Micah','Max','Miles','Maddox','Noah','Nathan','Nicholas','Nathaniel','Nolan','Oliver','Owen','Parker','Ryan','Ryder','Samuel','Sebastian','Seth','Tristan','Tyler','Thomas','William','Wyatt','Xavier','Xander','Zachary'), last_name = ELT(FLOOR(RAND()*37)+1, 'Smith','Johnson','Williams','Jones','Brown','Davis','Miller','Wilson','Moore','Taylor','Anderson','Thomas','Jackson','White','Harris','Martin','Thompson','Garcia','Martinez','Robinson','Clark','Rodriguez','Lewis','Lee','Walker','Hall','Allen','Young','Hernandez','King','Wright','Lopez','Hill','Scott','Green','Adams','Baker') WHERE 1
July 06, 2012
Fake Names in MySQL
Here's a fun mysql snippet to replace real names with fake names on the fly.
June 04, 2008
XHTML 1.0 Strict
Everyone needs to be denied freedom at some point. Here is your chance.
It would be sin to leave you without the corresponding TextMate snippet:
It would be sin to leave you without the corresponding TextMate snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>${1:Title}</title>
${2:<link rel="stylesheet" href="/css/base/base.css" type="text/css" media="screen" charset="utf-8" />}
<style type="text/css" media="screen">
<!--
body { background-color: #f0f0f0; color: #333; font: 12px 'trebuchet ms', sans-serif; }
h1 { font: 300% 'trebuchet ms', verdana; }
a { color: #3875D7; font-size: 14px; }
a:hover { color: orange; }
pre { width: 100%; }
-->
</style>
${3:<script type="text/javascript" src="/js/base/base.js"></script>}
${4:<script type="text/javascript">
<!--
$0
//-->
</script>}
</head>
<body>
<div id="doc">
<div id="hd">
<h1>$1</h1>
</div>
<div id="bd">
</div>
<div id="ft">${5:
<a href="http://blog.polyesterhat.com">Polyesterhat's Blog</a>
}</div>
</div>
</body>
</html>
The Basic XHTML Strict template is already built into TextMate; that's where I got it.
March 11, 2008
CSSStyleRule DOM Object Helpers
"Totally PWN CSS with Javascript"
I found this article after realizing that EXT-JS's CSS class really was not what I wanted. There was some problem in the IE's (of course I forget now what it was). I found this guy Patrick Hunlock who writes some awesome code (I would suggest reading the article I linked to, and not stopping there). I like really clean-looking code, sorry Pat; so I cleaned it a bit and minimized it for you all.
Here is the file.
Here is the class api:
So, when you say:
pBold will literally be a CSSStyleRule (as the DOM calls it). Furthermore to modify it:
I found this article after realizing that EXT-JS's CSS class really was not what I wanted. There was some problem in the IE's (of course I forget now what it was). I found this guy Patrick Hunlock who writes some awesome code (I would suggest reading the article I linked to, and not stopping there). I like really clean-looking code, sorry Pat; so I cleaned it a bit and minimized it for you all.
Here is the file.
Here is the class api:
var CSS = {
[CSSStylerule] addCSSRule : function([selector]),
[CSSStylerule] getCSSRule : function([selector]),
[boolean] killCSSRule : function([selector])
};
So, when you say:
var pBold = CSS.addCSSRule('p.bold');
pBold will literally be a CSSStyleRule (as the DOM calls it). Furthermore to modify it:
Hunlock has even more examples on his original post; I also will urge you to Go Forth In Style!
pBold.style.fontWeight = 'bold';
pBold.style.fontSize = '115%';
February 16, 2008
Console dot what?
By now we have all began to use console.log. Today, I want to remind you that there is more to Firebug's console function. Here is a list from the documentation. Joe Hewitt has provided us with a treasure chest of web development goodies; but not everyone has firebug. I like to test my scripts on other browsers in parallel with Firefox, and sometimes my console statements stay in the code. Calling console.log will give a fatal error if console is not found, so put this snippet somewhere in your base javascript file:
However, this does not work, as it tries to access console before his custom object, giving fatal errors in browsers such as IE 6.
I encourage you to find new ways to let firebug help you, because to become great, you must build on the work of others.
From what I have seen, it is the most reliable way to accomplish this. If you use such methods as console.count, simply add that function into my snippet. I got this idea from dustin diaz in this post in his comment to Felix. He said to use:
/*****************************
*
* window.console fix
*
****************************/
window.console = (typeof console == 'undefined') ? {
log: function(t) { alert(t); },
info: function() { },
debug: function() { }
} : console;
window.console = console || {
log: function() { },
info: function() { },
debug: function() { }
};
However, this does not work, as it tries to access console before his custom object, giving fatal errors in browsers such as IE 6.
I encourage you to find new ways to let firebug help you, because to become great, you must build on the work of others.
February 13, 2008
Exciting Frontend Form Validation
This is part one in my new series, The Living Web: bringing the boring to life
Here is my idea. When a user enters information into a contact form, or some other form, (like a survey) if they screw up, I want red arrows to fly down and show them what they messed up on. This will happen every time they hit the submit button until they figure out what the crap they are doing wrong.
The design pattern:
Here is the code I came up with:
A working example. My questions for you:
Thank you!
Here is my idea. When a user enters information into a contact form, or some other form, (like a survey) if they screw up, I want red arrows to fly down and show them what they messed up on. This will happen every time they hit the submit button until they figure out what the crap they are doing wrong.
The design pattern:
- The form submit button gets hi-jacked by custom validation methods
- Each input is assigned a new red arrow which is hidden from view
- User hits submit button
- The form submit event is stopped with YAHOO.util.Event.stopEvent(e);
- Each input's value is checked against a unique validation method
- If they all check out, the form is submitted
- If even one input's value is invalid, the red arrow flies down
- The input flashes red
- A new event is made waiting for focus on the input box
- When the new event is fired, the arrow disappears, we assume user will fix problem
- The arrow is reset
- The new event waiting for focus on that input box must be deleted
- The user "fixes" the problem
- The user tries submitting the form again
Here is the code I came up with:
(function(el) {
/* GLOBAL Variables
* invalid : will be an array of id's of inputs which did not validate
* form: will contain name of form i.e. document.formName */
var invalid, form;
/* these are the properties of our red arrow image */
var arrowImage = {
'url' : 'images/arrow.png',
'width' : 66,
'height' : 28
}
/* inputs is the set of unique validation methods */
var inputs = {
'input_1': {
'message': 'string',
'validates': function(value) {
return (value.length > 0);
}
},
'input_2': {
'message': 'string',
'validates': function(value) {
return (value.length > 0);
}
},
'input_3': {
'message': 'must be an email address',
'validates': function(value) {
/* taken from http://www.quirksmode.org/js/mailcheck.html, thankyou! */
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return filter.test(value);
}
}
};
var validateForm = function(e) {
/* we can't have the form submitting yet */
Event.stopEvent(e);
/* reset this array, because each time the
* user clicks submit, we assume there is
* nothing wrong */
invalid = [];
for(var i in inputs) {
/* save a reference to actual html element */
inputs[i]['el'] = $(i);
/* clearly, this is the value of the curent input */
var value = inputs[i]['el']['value'];
/* this is where we test each input's value with that
* input's specific validation method */
if(!inputs[i]['validates'](value)) {
invalid.push(i);
}
}
/* if invalid is empty
* i.e. it's length is 0,
* there was nothing wrong,
* meaning form can be submitted */
if(invalid.length > 0) {
/* announce is another word meaning
* red arrows will fly down */
announceErrors();
}
else {
/* we got the form name in the
* Event.onAvailable callback earlier (below),
* so submit the form */
document.eval(form).submit();
}
};
var announceErrors = function() {
for(var i = 0; i < invalid.length; i++) {
/* get the id of the input which has the invalid value */
var input = inputs[invalid[i]];
var region = Dom.getRegion(input['el']);
/* begin to show the arrow to the user */
Dom.setStyle(input['arrow'], 'visibility', 'visible');
/* use math to figure out where the arrow should go */
var slideArrow = new Anim(input['arrow'], {
'top' : { 'to' : region['top'] - (arrowImage['height'] * 3/4)},
'left' : { 'to' : region['left'] - arrowImage['width']}
}, 0.25, YAHOO.util.Easing.bounceOut);
/* when the arrow stops sliding, the input box should flash red */
slideArrow.onComplete.subscribe(flashInputs, i);
slideArrow.animate();
/* here is where we make the new
* event to wait for user's focus
* please study what is happening here
* we are saying, when the html element gets focus,
* call fadeArrow, because the arrow should go away not,
* because we assume the user will fix the issue
* Then we say, when you call fadeArrow, give it some stuff
* give it an object with two things,
* 1) the html element itself
* (so we can remove it's focus listener)
* 2) give it the arrow element
* then the true signifies that that object
* with the two things should be the scope of
* fadeArrow, in other words, when fadeArrow gets
* called, this['arrow'] will be same as saying,
* input['arrow'] here, whew */
Event.on(input['el'], 'focus', fadeArrow, {
'obj': input['el'],
'arrow': input['arrow']
}, true);
}
};
var flashInputs = function(e, o, i) {
/* we allow e,o, and i,
* only because we need to use i,
* can you figure out why we did not want
* i to be the scope aka, 'this' ? */
var id = invalid[i];
var red = new ColorAnim(inputs[id]['el'], {
'backgroundColor': { 'to' : '#B91309' },
'color' : {'to' : '#FFF'}
}, 0.2);
red.onComplete.subscribe(function() {
var white = new ColorAnim(inputs[id]['el'], {
'backgroundColor': { 'to' : '#FFF' },
'color' : {'to' : '#000'}
}, 0.2);
white.animate();
});
red.animate();
};
var fadeArrow = function() {
/* input box has recieved focus,
* recall that 'this' refers to
* the object with 'obj' and 'arrow'
* remove that listener */
Event.removeListener(this['obj'], 'focus', fadeArrow);
var fadeOut = new Anim(this['arrow'], {
'opacity' : { 'to' : 0 }
}, 0.5);
fadeOut.onComplete.subscribe(resetArrow, this['arrow'], true);
fadeOut.animate();
};
var resetArrow = function() {
setStyles(this, {
'top' : '0px',
'left': '0px',
'visibility': 'hidden',
'opacity' : 1
});
};
var setStyles = function(el, styles) {
for(var s in styles) {
Dom.setStyle(el, s, styles[s]);
}
};
/* basically the constructor */
Event.onAvailable(el, function() {
for(var i in inputs) {
/* give each input its own arrow element */
var arrow = document.createElement('div');
$('doc').appendChild(arrow);
Dom.addClass(arrow, 'arrow');
setStyles(arrow, {
'width': arrowImage['width'] + 'px',
'height': arrowImage['height'] + 'px',
'backgroundImage' : 'url(\''+ arrowImage['url'] +'\')'
});
inputs[i]['arrow'] = arrow;
}
/* note that el is html element id (a string)
* of the submit button, but we temporarily
* reference it with form, this save a tiny bit
* of processing time */
form = $(el);
Event.on(form, 'click', validateForm);
/* bubble up the dom tree to find the html form element
* starting at the submit button */
while(form.tagName.toUpperCase() != 'FORM') {
form = form.parentNode;
}
/* get name of form */
form = form['name'];
});
/* this anonymous function self-invokes itself, and gives itself a string
* this string becomes el, which is the html element id of the submit button */
}('submit_button'))
A working example. My questions for you:
- Why is the whole thing an anonymous function?
- If it were not anonymous, what public properties or methods could it offer for interaction with other javascript classes?
- What css rules would need to be applied to the arrow, for the class div.arrow?
- Do you like the way I got the name of the form in order to call the submit() method, is there a better way?
- How could the code be modified to enable multiple forms?
- How could the code be modified to allow abstracted validation methods?
- What would you have done differently?
Thank you!
Subscribe to:
Posts (Atom)