8 replies to this topic

[HeartDesign]

Hello Guys

 

This is my 1st post on codecall.

I would like to hear your feedback about my works.

 

my work

 

Thanks.

 

 

[RhetoricalRuvim]

I do believe this may be the wrong forum to post this in. The "JavaScript and CSS" forum is for help with your JavaScript and/or CSS code. If you want to introduce yourself, there is the Introductions forum, and if you want to discuss off-topic, non-help-me things like "hey, what do you think about ..." , then The Lounge would be the right place. If you have something specific in mind (e.g. "can you please help me find why ... doesn't work in this code?" or "I want to write ... in JavaScript, but I don't know where to start"), then this would be the right place to post the topic, but you don't seem to be asking anything specific.


Regarding your button maker, however, I do have a comment: are you ever going to implement support for JavaScript DOM code generation? I mean, you have the "Give Me My Code" button which throws HTML and CSS at the user, but why not add another code box with a JavaScript function?

For example, here's the code it produces for a basic "button" :

<a href='#' id='btn'>Button</a>

, and CSS:

#btn{
background:-webkit-linear-gradient(#00a6fc,#1734d6);
display:block;
width: 205px;
text-align:center;
height: 61px;
line-height: 61px;
border-radius: 25px;
}

; why not add another field that would output an arbitrary function?:

function (){ 
	var btn= document.createElement ("a"); 
	btn.href= "#"; 
	// no need for id= because everything's run in the DOM 
	// the programmer can add 'id' if they want to, though 
	btn.style.background= "-webkit-linear-gradient(#00a6fc,#1734d6)"; 
	btn.style.display= "block"; 
	btn.style.width= "205px"; 
	btn.style.height= "61px"; 
	btn.style.lineHeight= "61px"; 
	btn.style.borderRadius= "25px"; 
	btn.appendChild (document.createTextNode ("Button")); 
	return btn; 
} 

. I think people who prefer to work with DOM would like this better than the HTML + CSS output. Notice that there is no function name between the 'function' keyword and the argument acceptance parentheses; the function name is optional, and it's perfectly fine to do 'var f= function (x){ return x + 1; };' or something similar, at least in JavaScript.

I don't think that should be very difficult to implement, considering that you pretty much have everything else ready in your app.

Edited by RhetoricalRuvim, 06 September 2013 - 08:33 PM.

[HeartDesign]

Thank you RhetoricalRuvim

for explain where to post in future.

and Thank you about your great feedback it's really helpful

 

i'm sorry to choose wrong forum to post in.

it's my first post so i don't know much where should post.

 

Thanks

[HeartDesign]

Hi RhetoricalRuvim

the javascript function dose not work with out this line:

 document.body.appendChild(btn);

it's will be like this:

function myFunction(){ 
var btn= document.createElement ("a");
  document.body.appendChild(btn);
btn.href= "#"; 
// no need for id= because everything's run in the DOM 
// the programmer can add 'id' if they want to, though 
btn.style.background= "-webkit-linear-gradient(#00a6fc,#1734d6)"; 
btn.style.display= "block"; 
btn.style.width= "205px"; 
btn.style.height= "61px"; 
btn.style.lineHeight= "61px"; 
btn.style.borderRadius= "25px"; 
btn.appendChild (document.createTextNode ("Button")); 
return btn; 
}

Also if i don't put name for the function, 

How could i call it ?

[JasonKnight]

@RhetoricalRuvim -- Why the devil would you do that from javascript in the first place?!? Rule #1 of good scripting, NEVER replicate CSS functionality given the lack of scripting off graceful degradation? Separation of presentation from content? The whole 'ability to restyle without changing markup or scripting' thing?!? Ringing any bells?

If I were to do that from scripting, it would probably go:

function makeButton(txt){ 
	var
		d=document,
		button = d.createElement('a');
	button.className = 'button';
	button.appendChild(d.createTextNode(txt));
	return button;
}

Style on a HTML element has no malfing business in the scripting any more than it does the markup -- well, unless it's behavior. EVEN on elements that only work scripting on (the only legitimate time to generate elements in the scripting) that's just sloppy/bad coding practice that just makes the lives of people trying to reskin later (and that WILL happen sooner or later) harder. Admittedly, I'm one of the nutters who wants to see STYLE made obsolete as a tag and deprecated as an attribute!

It would also be nice to see an auto-width padding version instead of the fixed width fixed-height garbage. Now, the term "garbage" might sound harsh, but fixed size elements are the antithesis of accessible design. Switching to a dynamic metric for elastic layouts is kind-of a must-have if you care about people actually using the page.

Getting an error code on the site now, but took a look last night. I assumed it was incomplete/nonfunctional since the 'give me the code' thing wasn't a button, didn't do anything and the site was hemorrhaging scripting errors like crazy... When/if you get it back up I'll take a closer look.

Of course from the output pasted into the posts above, it would be nice if the gradient was ACTUALLY CSS3 instead of the Safari/Chrome -webkit vendor prefixed version.

...that Chrome no longer uses. BIG TIP, Google, Mozilla and Opera have all DROPPED vendor prefixes - just in time for IE to start using them.

Oh, also be sure to use class instead of ID for this, someone might want to use it more than once on a page!

Edited by JasonKnight, 07 September 2013 - 02:43 PM.

[BenW]

I do believe this may be the wrong forum to post this in. The "JavaScript and CSS" forum is for help with your JavaScript and/or CSS code. If you want to introduce yourself, there is the Introductions forum, and if you want to discuss off-topic, non-help-me things like "hey, what do you think about ..." , then The Lounge would be the right place. If you have something specific in mind (e.g. "can you please help me find why ... doesn't work in this code?" or "I want to write ... in JavaScript, but I don't know where to start"), then this would be the right place to post the topic, but you don't seem to be asking anything specific.

 

I think "Projects and Site Reviews" fits best, so I've moved the thread there. Or here, rather.

 

Anyway, if you find other threads in the wrong place, just hit the 'report to mod' button and mention it there, that way a staff member can review the topic. We don't necessarily read every thread in every forum, so it's helpful to get threads reported... an incorrect report or a report for a thread that needs moving won't get anyone banned or punched in the face or anything

[JasonKnight]

Ok, seems to be live again, so some thoughts...

First, would be nice if it worked in something other than just Chrome. It's even buggerred in Safari, and that's not good. The layout falls apart at most smaller screen sizes, so it's a bomb on my netbook or even my laptop. (disturbing since it's a 1920x1080 lappy, though I'm running taskbar and tabs in portrait)

Would be nice if it showed the code all the time, instead of the 'give me my code' button... particularly since the markup for this would be static. Updating the code wouldn't take all that long if it's placed properly inside <pre><code></code></pre> since you could make <span id="whatever"></span> or manually attach the span as needed in the scripting to make easy targets for the values.

Might even be cool to somehow put the controls ON the CSS -- this way it would teach people what to change in the CSS instead of them being 100% reliant on the tool all the time.

Does codepen support external CSS? Really have a dislike for services like that since they tend to ** all over anything done in them... I would SERIOUSLY look at getting the CSS and the scripting out of the markup so people aren't re-downloading static elements every time they visit. It's also often easier to maintain and develop since not only do you end up with everything separated and not in the way of each-other, you can also open them in separate windows to view your code side-by-side.

I would advise AGAINST using that massive reset -- lemme guess, Eric Meyer's influence? Waste of code... there are far smaller and effective resets.

The massive amount of fragile positioning, and oddball positioning of elements (or copies of elements?) off the right side of the screen seems quite odd for such a simple layout.

You also are using far, far too much innerHTML IMHO. DOM Manipulation would give it much better performance.

I'd also swing an axe at the HTML 5, partly because CSS3 can be used with older doctypes so you want lowest common denominator -- partly because I see no legitimate advantages to the use of HTML 5 apart from perhaps in this case INPUT[range]. Generating those INPUT from the scripting might allow you to swap to a text input for older browsers that don't support type="range" (or even load a polyfill -- though I often dread doing that).

I would probably also generate all the INPUT that require scripting to function in the script, and get a NOSCRIPT in there as a warning.

One other observation -- there is no reason to make the MAX on a border be more than HALF the height/width of an element (whichever is smaller) -- it's ignored in most browsers, and can screw up in... gah, I forget which browser... Safari I think? I forget now. Might even have been fixed, hard to say these days with everything moving so fast

Still, how long have you been doing this? For all it's faults it's still pretty solid in concept -- it just needs some tweaks for compatibility, accessibility and efficiency.

Oh, in addition to padding instead of width/height, you could retain the width slider but use min-width instead. Since it's all CSS3 anyhow, what's in matter if legacy IE (6/lower) can't handle it? INPUT[radio] on each of the sliders to choose what metric to use (PX, EM, PT), and a slider for line-height would be nice... Also be cute if it could handle word-wrap with a max-width or width. Just some ideas.

Edited by JasonKnight, 07 September 2013 - 04:04 PM.

[RhetoricalRuvim]

Hi RhetoricalRuvim
the javascript function dose not work with out this line:

 document.body.appendChild(btn);

it's will be like this:

function myFunction(){ 
var btn= document.createElement ("a");
  document.body.appendChild(btn);
btn.href= "#"; 
// no need for id= because everything's run in the DOM 
// the programmer can add 'id' if they want to, though 
btn.style.background= "-webkit-linear-gradient(#00a6fc,#1734d6)"; 
btn.style.display= "block"; 
btn.style.width= "205px"; 
btn.style.height= "61px"; 
btn.style.lineHeight= "61px"; 
btn.style.borderRadius= "25px"; 
btn.appendChild (document.createTextNode ("Button")); 
return btn; 
}

Also if i don't put name for the function, 
How could i call it ?

Oh, no, that's not what I meant. Here is more like it:

var myfunction= function (){ 
	var btn= document.createElement ("a"); 
	btn.href= "#"; 
	// no need for id= because everything's run in the DOM 
	// the programmer can add 'id' if they want to, though 
	btn.style.background= "-webkit-linear-gradient(#00a6fc,#1734d6)"; 
	btn.style.display= "block"; 
	btn.style.width= "205px"; 
	btn.style.height= "61px"; 
	btn.style.lineHeight= "61px"; 
	btn.style.borderRadius= "25px"; 
	btn.appendChild (document.createTextNode ("Button")); 
	return btn; 
} 

, and then do something like this:

document.body.appendChild (myfunction ()); 

; I was thinking more of a 'you-make-the-button--I-will-put-it-anywhere-I-like' type of thing.
 
 

@RhetoricalRuvim -- Why the devil would you do that from javascript in the first place?!? Rule #1 of good scripting, NEVER replicate CSS functionality given the lack of scripting off graceful degradation? Separation of presentation from content? The whole 'ability to restyle without changing markup or scripting' thing?!? Ringing any bells?

If I were to do that from scripting, it would probably go:

function makeButton(txt){ 
	var
		d=document,
		button = d.createElement('a');
	button.className = 'button';
	button.appendChild(d.createTextNode(txt));
	return button;
}

Style on a HTML element has no malfing business in the scripting any more than it does the markup -- well, unless it's behavior. EVEN on elements that only work scripting on (the only legitimate time to generate elements in the scripting) that's just sloppy/bad coding practice that just makes the lives of people trying to reskin later (and that WILL happen sooner or later) harder. Admittedly, I'm one of the nutters who wants to see STYLE made obsolete as a tag and deprecated as an attribute!

It would also be nice to see an auto-width padding version instead of the fixed width fixed-height garbage. Now, the term "garbage" might sound harsh, but fixed size elements are the antithesis of accessible design. Switching to a dynamic metric for elastic layouts is kind-of a must-have if you care about people actually using the page.

Getting an error code on the site now, but took a look last night. I assumed it was incomplete/nonfunctional since the 'give me the code' thing wasn't a button, didn't do anything and the site was hemorrhaging scripting errors like crazy... When/if you get it back up I'll take a closer look.

Of course from the output pasted into the posts above, it would be nice if the gradient was ACTUALLY CSS3 instead of the Safari/Chrome -webkit vendor prefixed version.

...that Chrome no longer uses. BIG TIP, Google, Mozilla and Opera have all DROPPED vendor prefixes - just in time for IE to start using them.

Oh, also be sure to use class instead of ID for this, someone might want to use it more than once on a page!

How would you explain the fact that there even is HTML DOM in existence? Maybe for 95% of the time the HTML+CSS thing should work, but it is useful to have code that dynamically makes things.

The main thing I didn't like about the HTML+CSS w/ ID attribute is that - as far as I can tell - there is no way of specifying an ID for the button in that button maker program, and the program just uses 'btn' for every button made. That is not very convenient because a person may want multiple buttons with different styles (or even with the same style) while the ID attribute can only be used on one element at a time in order for the page to be "valid."

Changing 'id' to 'class' can perhaps work, but it would also be helpful to have a separate input field on that page for the button class name.

Also it would be nice to have a "button code importer" for going the other way around (the "inverse" of "Give Me My Code"), which would be helpful for editing a button's style later on in the development process.


Though it's still not very difficult to make some functionality that would make a piece of JavaScript dynamic HTML DOM code. How about this?:

function SetCSS (element_array, style_string /* brackets are optional */){ 
	var outer= ""; 
	var inner= ""; 
	var block; 
	var arr= style_string.split (""); 
	var lvl= 0; 
	var a, b; 
	var i, j; 
	var name, value; 
	var elems= (!element_array.nodeType)? element_array: [element_array]; 
	for (i= 0; i < arr.length; i++){ 
		if (lvl) inner += arr[i]; 
		if (arr[i] == "{") lvl++; 
		else if (arr[i] == "}"){ 
			lvl--; 
			if (!lvl) break; 
		} else if (!lvl) outer += arr[i]; 
	} 
	if (inner) block= inner; 
	else block= outer; 
	arr= block.split (";"); 
	for (i= 0; i < arr.length; i++){ 
		a= arr[i].split (":"); 
		if (a.length < 2) continue; 
		name= a[0].trim (); 
		value= a[1].trim (); 
		if (!name) continue; 
		b= name.split ("-"); 
		j= 1; 
		if (!b[0]) j++; 
		for (; j < b.length; j++){ 
			b[j]= b[j].substr (0, 1).toUpperCase () + b[j].substr (1); 
		} 
		name= b.join (""); 
		for (j= 0; j < elems.length; j++) elems[j].style[name]= value; 
	} 
} 
function MakeButton (name, opt_id, style_string){ 
	var btn= document.createElement ("a"); 
	if (opt_id) btn.id= opt_id; 
	if (style_string) SetCSS (btn, style_string); 
	btn.appendChild (document.createTextNode (name)); 
	return btn; 
} 

I have not tested it thoroughly, but, ideally, you pass the button "name" (or button text, rather), a (optional) button id in case of CSS, and a (also optional) CSS style string to initialize the "button" to. So something like:

var mybutton= MakeButton ("My Button Text", false, "#btn{ background:-webkit-linear-gradient(#00a6fc,#1734d6); display:block; width: 200px; text-align:center; text-decoration:none; color:#fff; font-family:arial; font-size:24px; height: 50px; line-height: 50px; border-radius: 10px; }"); 
document.body.appendChild (mybutton); 

should work.

@JasonKnight: Are you at least okay with that type of DOM CSS?

Here's a test HTML file that uses the dynamic method while still using the "CSS" stuff:

<!DOCTYPE HTML><html><head><meta http-equiv="content-type" content="text/html;charset=us-ascii">
	<title> Test </title></head><body><script type="text/javascript" src="SetCSS.js"></script> 
<div id="mycss" style="display: none;"> 
	#btn{
		background:-webkit-linear-gradient(#ffa6fc,#1734d6);
		display:block;
		width: 200px;
		text-align:center;
		text-decoration:none;
		color:#fff;
		font-family:arial;
		font-size:24px;
		height: 50px;
		line-height: 50px;
		cursor: pointer; 
		border: 1px black solid; 
		border-radius: 10px;
	}
</div> 
<script type="text/javascript">
var mybutton= MakeButton ("My Button Text", false, "#btn{ background:-webkit-linear-gradient(#00a6fc,#1734d6); display:block; width: 200px; text-align:center; text-decoration:none; color:#fff; font-family:arial; font-size:24px; height: 50px; line-height: 50px; border-radius: 10px; }"); 
document.body.appendChild (mybutton); 
var secondbutton= MakeButton ("Button 2 Text", false, document.getElementById ("mycss").textContent); 
document.body.appendChild (secondbutton); 
</script></body>

The SetCSS.js file just has the two functions I defined earlier (SetCSS () and MakeButton ()).

[HeartDesign]

Hi guys

 

You are really awesome and skilled.

i'm so happy to be here with you

 

Thank you all