Prev: Help with a Table Wanted
Next: background shorthand
From: David Mark on 8 Dec 2009 10:04
On Dec 8, 3:53 am, Mark Smith <marksmith5...(a)jungle-monkey.com> wrote:
> On Dec 7, 7:58 pm, David Mark <dmark.cins...(a)gmail.com> wrote:
>
>
>
> > On Dec 7, 8:51 am, Mark Smith <marksmith5...(a)jungle-monkey.com> wrote:
>
> > > On Dec 7, 1:49 pm, David Mark <dmark.cins...(a)gmail.com> wrote:
>
> > > > On Dec 7, 8:31 am, Mark Smith <marksmith5...(a)jungle-monkey.com> wrote:
>
> > > > > On Dec 7, 1:16 pm, "rf" <r...(a)z.invalid> wrote:
>
> > > > > > Mark Smith wrote:
> > > > > > > On Dec 7, 11:54 am, Stefan Weiss <krewech...(a)gmail.com> wrote:
> > > > > > > If it's doable in jQuery, as jQuery is just a framework, it must be
> > > > > > > possible to do with pure JavaScript also.
>
> > > > > > And just what do you think jQuery is? Not pure javascript? Just what do you
> > > > > > think jQuery is?
>
> > > > > Yes it is just javascript, a framework not liked round these parts,
> > > > > but it is just javascript - that was my point.
>
> > > > It's not a framework.  It's around 70-100K (depending on version) of
> > > > badly designed and implemented JS, largely centering on a CSS selector
> > > > query engine.  The idea is that it is somehow simpler (and cooler) to
> > > > replace:-
>
> > > > var el = document.getElementById('d');
> > > > doSomething(el);
> > > > doSomethingElse(el);
>
> > > > ...with this sort of gobbledygook:-
>
> > > > $('#d').doSomething().doSomethingElse();
>
> > > > Now, if you are trying to save keystrokes (assuming you haven't heard
> > > > of macros), this might seem appealing, until you find out it requires
> > > > 100K of shifty JS to (almost) work, complicates debugging, arbitrarily
> > > > excludes users, etc.  Not to mention the pattern creates a new jQuery
> > > > object on every line.  Look at the code in that object and you'll find
> > > > it's a horror show.  But the typical jQuery-indoctrinated Web
> > > > developer is not a programmer, so they never look at the code (and
> > > > wouldn't be able to spot its shortcomings anyway).
>
> > > > It's all based on blind faith, which has never been rewarded.
> > > > Requiring constant upgrades just to tread water in the very latest
> > > > browsers is hardly an indication of cross-browser success, nor is it
> > > > practical as unit testing starts over with each revision.  For those
> > > > who don't know, I guess any result can seem like a reward.
>
> > > That's nice.
>
> > > Tell it to someone who is advocating jquery.
>
> > This is a discussion group.  You may well view the messages in your
> > mail client, but they are not posted exclusively for you.  ;)
>
> I didn't see anyone advocate jQuery, your anti jquery rant just seemed
> out of context.
>

It's always a good day to bash jQuery. And it leaves a trail for the
lost to follow. You can find out a lot more about the consequences of
that most dubious script here than in the jQuery lists.
From: David Mark on 8 Dec 2009 10:07
On Dec 8, 3:57 am, Mark Smith <marksmith5...(a)jungle-monkey.com> wrote:
> On Dec 7, 7:55 pm, David Mark <dmark.cins...(a)gmail.com> wrote:
>
> > On Dec 7, 8:39 am, Mark Smith <marksmith5...(a)jungle-monkey.com> wrote:
>
> > > > Border and outline have no effect (in FF)
>
> > > * Meant to say borders and padding don't work. - outline does.
>
> > Best not to change any of those for inputs.  Their characteristic
> > borders (however defined by the UA/OS) identify them as inputs.
> > Changing their padding can be a usability concern (think mobile
> > devices).  Removing outlines (fairly common flourish) breaks
> > accessibility (think keyboard users).
>
> Oh yeah, and WIDTH can't be set either....

Good. Leave it alone. You have no idea how wide the button needs to
be. The UA does. ;)

>
> Best not to use border and padding to style my inputs? Ha, thats
> funny, you must have very undemanding clients.

You are supposed to be the expert. You have to explain to clients
what is practical and what is not.

>
> My iphone handles these attributes fine btw.

So? All you can do is make the buttons harder to identify and
possibly harder to touch.
From: "Michael Haufe ("TNO")" on 8 Dec 2009 10:47
On Dec 4, 7:57 am, Mark Smith <marksmith5...(a)jungle-monkey.com> wrote:

> This works in IE6, IE7 and Safari but unfortunately not Firefox.

If bored enough, here's the bug report for FireFox:
https://bugzilla.mozilla.org/show_bug.cgi?id=52500
From: Mark Smith on 8 Dec 2009 10:49
On Dec 8, 3:07 pm, David Mark <dmark.cins...(a)gmail.com> wrote:
> On Dec 8, 3:57 am, Mark Smith <marksmith5...(a)jungle-monkey.com> wrote:
>
> > On Dec 7, 7:55 pm, David Mark <dmark.cins...(a)gmail.com> wrote:
>
> > > On Dec 7, 8:39 am, Mark Smith <marksmith5...(a)jungle-monkey.com> wrote:
>
> > > > > Border and outline have no effect (in FF)
>
> > > > * Meant to say borders and padding don't work. - outline does.
>
> > > Best not to change any of those for inputs.  Their characteristic
> > > borders (however defined by the UA/OS) identify them as inputs.
> > > Changing their padding can be a usability concern (think mobile
> > > devices).  Removing outlines (fairly common flourish) breaks
> > > accessibility (think keyboard users).
>
> > Oh yeah, and WIDTH can't be set either....
>
> Good.  Leave it alone.  You have no idea how wide the button needs to
> be.  The UA does.  ;)
>

Lets just do away with styling all together then. Just serve raw text
- let the UA decide how it should look.

Next you'll be telling me not to use placeholders. "The UA knows best
where things should go..." Ridiculous.

>
>
> > Best not to use border and padding to style my inputs? Ha, thats
> > funny, you must have very undemanding clients.
>
> You are supposed to be the expert.  You have to explain to clients
> what is practical and what is not.
>

Despite that we 'experts' know that functionality and appearance are
two seperate things. Form elements with differently sized, differently
styled inputs just looks bad and unprofessional.

Leaving everything unstyled as you are recommending does not look very
'Web 2.0'.


>
> > My iphone handles these attributes fine btw.
>
> So?  All you can do is make the buttons harder to identify and
> possibly harder to touch.

This is a red herring, we have a seperate front end for mobile users.
From: David Mark on 8 Dec 2009 10:59
On Dec 8, 8:10 am, Andrew <val...(a)gmail.com> wrote:

[...]

>
> Hi,

Hi!

>
> First, I would like advise you to forget about styling upload buttons
> if you
> are using them in a regular forms.

That's (sort of) what I said. Perhaps you are trying to address the
OP?

> They look different in each
> browser, and
> users get used to the way they look like.

Exactly.

> I believe that native
> controls
> are always better than some styled ones.

That seems a bit non-committal. :)

>
> Now about my componenthttp://valums.com/ajax-upload/

Okay.

/**
* AJAX Upload
* Project page - http://valums.com/ajax-upload/
* Copyright (c) 2008 Andris Valums, http://valums.com
* Licensed under the MIT license (http://valums.com/mit-license/)
*/
(function(){

var d = document, w = window;

/**
* Get element by id
*/
function get(element){
if (typeof element == "string")
element = d.getElementById(element);
return element;
}


That's a worthless pattern.


/**
* Attaches event to a dom element
*/
function addEvent(el, type, fn){
if (w.addEventListener){


Bad inference.


el.addEventListener(type, fn, false);


That's not a window.


} else if (w.attachEvent){


Bad feature detection. Use typeof.


var f = function(){
fn.call(el, w.event);

Don't preserve references to host objects (especially window). Will
lead to memory leaks in IE.


};
el.attachEvent('on' + type, f)


Oh, it leaks anyway. Well, you could cut down on that a bit.

}
}


/**
* Creates and returns element from html chunk
*/
var toElement = function(){
var div = d.createElement('div');
return function(html){
div.innerHTML = html;
var el = div.childNodes[0];

firstChild?


div.removeChild(el);
return el;
}
}();


Some browsers will choke on this pattern (missing paranthesis around
the function expression).


function hasClass(ele,cls){
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}


Why match? You aren't doing anything with the match.


function addClass(ele,cls) {
if (!hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');


I don't think so. :(


}

// getOffset function copied from jQuery lib (http://jquery.com/)


Do _not_ copy jQuery code. We'll skip this one.

[...]

/**
* Crossbrowser mouse coordinates
*/
function getMouseCoords(e){
// pageX/Y is not supported in IE
// http://www.quirksmode.org/dom/w3c_cssom.html


Do _not_ copy code from quirksmode.org.


if (!e.pageX && e.clientX){


// In Internet Explorer 7 some properties (mouse coordinates) are
treated as physical,
// while others are logical (offset).




var zoom = 1;
var body = document.body;

if (body.getBoundingClientRect) {
var bound = body.getBoundingClientRect();
zoom = (bound.right - bound.left)/body.clientWidth;
}


That looks suspiciously like bullshit.


return {
x: e.clientX / zoom + d.body.scrollLeft +
d.documentElement.scrollLeft,
y: e.clientY / zoom + d.body.scrollTop +
d.documentElement.scrollTop


This is definite bullshit. :)


};
}

return {
x: e.pageX,
y: e.pageY
};

}

[...]

/**
* Cross-browser way to get xhr object
*/


There's nothing cross-browser about this script.


var getXhr = function(){
var xhr;

return function(){
if (xhr) return xhr;


Waste of time and space.


if (typeof XMLHttpRequest !== 'undefined') {
xhr = new XMLHttpRequest();
} else {
var v = [
"Microsoft.XmlHttp",
"MSXML2.XmlHttp.5.0",
"MSXML2.XmlHttp.4.0",
"MSXML2.XmlHttp.3.0",
"MSXML2.XmlHttp.2.0"

Too many.


];

for (var i=0; i < v.length; i++){
try {
xhr = new ActiveXObject(v[i]);

Where's the detection of ActiveXObject?


break;
} catch (e){}
}

Well, at least it won't bomb in IE6 when ActiveX is disabled
(something jQuery never figured out).

}

return xhr;
}
}();

// Please use AjaxUpload , Ajax_upload will be removed in the next
version


Okay.


Ajax_upload = AjaxUpload = function(button, options){
if (button.jquery){
// jquery object was passed
button = button[0];
} else if (typeof button == "string" && /^#.*/.test(button)){
button = button.slice(1);
}


More waste. Why would you pass "#id" to this? It's a string or an
object. If it is a string, it's an ID.


button = get(button);

this._input = null;
this._button = button;
this._disabled = false;
this._submitting = false;
// Variable changes to true if the button was clicked
// 3 seconds ago (requred to fix Safari on Mac error)


That sounds mystical. :)


this._justClicked = false;
this._parentDialog = d.body;

if (window.jQuery && jQuery.ui && jQuery.ui.dialog){


window.jQuery?!


var parentDialog = jQuery(this._button).parents('.ui-dialog');
if (parentDialog.length){
this._parentDialog = parentDialog[0];
}

Whatever.


[...]

// Fixing problem with Safari
// The problem is that if you leave input before the file select
dialog opens
// it does not upload the file.
// As dialog opens slowly (it is a sheet dialog which takes some
time to open)
// there is some time while you can leave the button.
// So we should not change display to none immediately
addEvent(input, 'click', function(){
self._justClicked = true;
setTimeout(function(){
// we will wait 3 seconds for dialog to open
self._justClicked = false;
}, 2500);
});


In other words, you couldn't make it work, so you added a flimsy hack
based on timing. :(


[...]


response = window["eval"]("(" + response + ")");


Stop copying from Resig. He doesn't have a clue. ;)


// method, enctype must be specified here
// because changing this attr on the fly is not allowed in IE 6/7
var form = toElement('<form method="post" enctype="multipart/form-
data"></form>');

Mystical incantation.

Anyway, you were saying...

> It was meant to
> be
> used in js web applications, that require different file upload
> strategy,
> not in simple forms, which are better with the select->browse->submit.
> (Think of google docs -> open file from pc)

Whatever. I don't care to think of "google docs".

>
> And here are comments to other things about AJAX Upload you got wrong.

Huh?

>
> > Did you look at how this was actually implemented? Apart from requiring
> > JQuery.

I didn't say that. Is this your first time on Usenet?

>
> Look more closely, it doesn't require jQuery, it just uses it for the
> demo,
> as it's the most popular js library among the users of my component.

So? Your users are ignorant. They'd almost have to be to use this
"solution". ;)

>
> > they initiate the upload as soon as a file has been selected (before the
> > user submits the form).
>
> This can be changed in the options.

Great! But I didn't say that either.

>
> > Now try turning off CSS and/or JavaScript -> upload fields are broken or
> > missing :-(
>
> You should just add a normal file input to the markup, and then
> replace it
> with any div or link you want to style. And then create an instance of
> my plugin.

I should? It's _your_ demo.

>
> Also, I'm just curios why you don't like jQuery so much? It has some
> flaws, but it does what it promises really well.

It does not.

> Quote from jquery.com

There's an impartial source!

>
> jQuery is js library that simplifies HTML document traversing,
> event handling, animating, and Ajax interactions for rapid web
> development.
>
> There are the things jQuery can really help with, making your code
> more readable.

That's nonsense. Document traversing? It can't even _read_
documents.

http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/d2c0407a7fc2e33a#

Event handling is simple to begin with and their (very simple)
animations are known to be third-rate, even by the most devoted jQuery
junkies.

The idea is that you don't want to mash all of these things together
in one monolithic script that you then have to swap out every year
just to tread water in the latest versions of major browsers. It's
just a stupid strategy for browser scripting. A million code monkeys
_can_ be wrong.
First  |  Prev  |  Next  |  Last
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Prev: Help with a Table Wanted
Next: background shorthand