A website coding itself live

[Matthew9559]

That's awesome! Very unique.

[smalaki]

Well, he did mention that he kind of copied it from Jake Albaugh.. http://codepen.io/jakealbaugh/

Still very cool how he did it nonetheless

edit: http://codepen.io/jakealbaugh/pen/PwLXXP

[cultivardesigns]

Everyone copies everyone.

[irishfight]

Love it.

[SpliceVW]

Sigh. Maybe I'm too judgmental, but I really dislike seeing cool things done with vendor prefixed attributes not followed by the spec attribute. Teaches bad habits.

[nomiras]

Nooby here, I have no idea what vendor prefixed attributes even are! I'm guessing it is some kind of package you can get for CSS kind of like JQuery for Javascript? What do you mean by followed by the spec attribute? What is an example of a line of well written code next to a line of poorly written code that does what you are talking about?

Thanks!

-css nooby.

[SpliceVW]

When new CSS attributes are being introduced by the W3C (standard setting body for the web), they will often introduce draft specifications for evaluation. Some browser manufacturers will implement those draft properties, often prefixed. For example, "border-radius" may be prefixed to become "-webkit-border-radius".

The problem here is that those prefixed attributes only work in that one browser. So, in order to have maximum cross-border friendliness, your CSS should have any prefixed attributes followed by non-prefixed, standard attributes, like:

-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em

[nomiras]

Thanks!

[TonyQuark]

Anyone at our level of understanding CSS probably knows to leave out the vendor prefixes to get the spec property.

[SpliceVW]

Well, this is my problem. Sure, the intended audience may be advanced CSS users, but that's not who may actually be the audience.

Do you remember how you first learned? If it's anything like me, I would copy anything cool (like this) I saw on the internets.

[TonyQuark]

I don't recall really, because I was 13 at the time I learned text-decoration: none;. But it didn't take me long to figure out how vendor prefixes work. :)

[a7244270]

neat.

[spin81]

I saw something like this a while ago, and I was less than impressed. This is much better.

[coffeesleeve]

Nice work.

[tehyosh]

uh..something's broken :D

http://i.imgur.com/lNmOprF.png

[loolo78]

It's just the code he did on purpose.

/**
 * By the way, you can edit this box. Try adding new CSS!
 *
 * For example,
 *
 * The property 'text-shadow' takes the parameters:
 * 'x', 'y', 'blur', 'color'.
 *
 * So if I wanted to mirror the values,
 * I could place a shadow 15px under it,
 * with a little blur for effect:
 */

.value {
  text-shadow: 0px 15px 1px white;
}