Skip to content

Commit

Permalink
Merge pull request uglyjs#5 from mathiasbynens/master
Browse files Browse the repository at this point in the history
New blog post + some random tweaks from mathias bynens
  • Loading branch information
padolsey committed Sep 20, 2011
2 parents 421e65a + 785ca06 commit ca1b494
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 48 deletions.
32 changes: 32 additions & 0 deletions _posts/2011-09-20-useless-document-write.md
@@ -0,0 +1,32 @@
---
title: Useless use of <code>document.write</code>
layout: post
author: Mathias Bynens
authorurl: http://mathiasbynens.be/
---

While reviewing some [enterprise JavaScript](http://enterprise-js.com/) for a client I came across a couple of these inside `if` clauses:

{% highlight javascript %}
document.write("<scr"+"ipt language=javascript>var some_var = 'some value'<" + "/scr"+"ipt>");
{% endhighlight %}

There’s definitely some room for improvement here. For one, the `language` attribute on the `<script>` element is obsolete in HTML; it can safely be omitted.

{% highlight javascript %}
document.write("<scr"+"ipt>var some_var = 'some value'<" + "/scr"+"ipt>");
{% endhighlight %}

Next, there’s no need to concatenate the string like that — you can just write it out all at once, as long as you [escape the `</script>` end tag](http://mathiasbynens.be/notes/etago "Technically, this isn’t needed if you’re certain the JavaScript will never be used inline in the HTML."):

{% highlight javascript %}
document.write("<script>var some_var = 'some value'<\/script>");
{% endhighlight %}

There are only few good reasons to ever use `document.write`. Writing out `<script>` elements _can_ be one of them, but in this case? Not so much. Believe it or not, the intention of this code snippet was to **create a global variable**. (Polluting the global scope with variables is something that should be avoided whenever possible; however, in this case, the variable really needed to be global.)

Of course, there’s a better way to do that in client-side JavaScript:

{% highlight javascript %}
window.some_var = 'some value';
{% endhighlight %}
Binary file modified assets/bg.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 32 additions & 32 deletions assets/pyg.css
@@ -1,53 +1,53 @@
.highlight .hll { background-color: #333333 }
.highlight pre { background: #111111; color: #ffffff }
.highlight .hll { background-color: #333 }
.highlight pre { background: #111; color: #fff }
.highlight .c { color: #FFFDB8; font-style: italic; background-color: #0f140f } /* Comment */
.highlight .err { color: #ffffff } /* Error */
.highlight .g { color: #ffffff } /* Generic */
.highlight .err { color: #fff } /* Error */
.highlight .g { color: #fff } /* Generic */
.highlight .k { color: #fb660a; font-weight: bold } /* Keyword */
.highlight .l { color: #ffffff } /* Literal */
.highlight .n { color: #ffffff } /* Name */
.highlight .o { color: #ffffff } /* Operator */
.highlight .x { color: #ffffff } /* Other */
.highlight .p { color: #ffffff } /* Punctuation */
.highlight .l { color: #fff } /* Literal */
.highlight .n { color: #fff } /* Name */
.highlight .o { color: #fff } /* Operator */
.highlight .x { color: #fff } /* Other */
.highlight .p { color: #fff } /* Punctuation */
.highlight .cm { color: #FFFDB8; font-style: italic; background-color: #0f140f } /* Comment.Multiline */
.highlight .cp { color: #ff0007; font-weight: bold; font-style: italic; background-color: #0f140f } /* Comment.Preproc */
.highlight .c1 { color: #FFFDB8; font-style: italic; background-color: #0f140f } /* Comment.Single */
.highlight .cs { color: #FFFDB8; font-style: italic; background-color: #0f140f } /* Comment.Special */
.highlight .gd { color: #ffffff } /* Generic.Deleted */
.highlight .ge { color: #ffffff } /* Generic.Emph */
.highlight .gr { color: #ffffff } /* Generic.Error */
.highlight .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #ffffff } /* Generic.Inserted */
.highlight .go { color: #444444; background-color: #222222 } /* Generic.Output */
.highlight .gp { color: #ffffff } /* Generic.Prompt */
.highlight .gs { color: #ffffff } /* Generic.Strong */
.highlight .gu { color: #ffffff; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #ffffff } /* Generic.Traceback */
.highlight .gd { color: #fff } /* Generic.Deleted */
.highlight .ge { color: #fff } /* Generic.Emph */
.highlight .gr { color: #fff } /* Generic.Error */
.highlight .gh { color: #fff; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #fff } /* Generic.Inserted */
.highlight .go { color: #444; background-color: #222 } /* Generic.Output */
.highlight .gp { color: #fff } /* Generic.Prompt */
.highlight .gs { color: #fff } /* Generic.Strong */
.highlight .gu { color: #fff; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #fff } /* Generic.Traceback */
.highlight .kc { color: #fb660a; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #fb660a; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #fb660a; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #fb660a } /* Keyword.Pseudo */
.highlight .kr { color: #fb660a; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #cdcaa9; font-weight: bold } /* Keyword.Type */
.highlight .ld { color: #ffffff } /* Literal.Date */
.highlight .ld { color: #fff } /* Literal.Date */
.highlight .m { color: #0086f7; font-weight: bold } /* Literal.Number */
.highlight .s { color: #FFEF73 } /* Literal.String */
.highlight .na { color: #ff0086; font-weight: bold } /* Name.Attribute */
.highlight .nb { color: #ffffff } /* Name.Builtin */
.highlight .nc { color: #ffffff } /* Name.Class */
.highlight .nb { color: #fff } /* Name.Builtin */
.highlight .nc { color: #fff } /* Name.Class */
.highlight .no { color: #FFEF73 } /* Name.Constant */
.highlight .nd { color: #ffffff } /* Name.Decorator */
.highlight .ni { color: #ffffff } /* Name.Entity */
.highlight .ne { color: #ffffff } /* Name.Exception */
.highlight .nd { color: #fff } /* Name.Decorator */
.highlight .ni { color: #fff } /* Name.Entity */
.highlight .ne { color: #fff } /* Name.Exception */
.highlight .nf { color: #ff0086; font-weight: bold } /* Name.Function */
.highlight .nl { color: #ffffff } /* Name.Label */
.highlight .nn { color: #ffffff } /* Name.Namespace */
.highlight .nx { color: #ffffff } /* Name.Other */
.highlight .py { color: #ffffff } /* Name.Property */
.highlight .nl { color: #fff } /* Name.Label */
.highlight .nn { color: #fff } /* Name.Namespace */
.highlight .nx { color: #fff } /* Name.Other */
.highlight .py { color: #fff } /* Name.Property */
.highlight .nt { color: #fb660a; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #fb660a } /* Name.Variable */
.highlight .ow { color: #ffffff } /* Operator.Word */
.highlight .w { color: #888888 } /* Text.Whitespace */
.highlight .ow { color: #fff } /* Operator.Word */
.highlight .w { color: #888 } /* Text.Whitespace */
.highlight .mf { color: #0086f7; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0086f7; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0086f7; font-weight: bold } /* Literal.Number.Integer */
Expand All @@ -63,7 +63,7 @@
.highlight .sr { color: #FFEF73 } /* Literal.String.Regex */
.highlight .s1 { color: #FFEF73 } /* Literal.String.Single */
.highlight .ss { color: #FFEF73 } /* Literal.String.Symbol */
.highlight .bp { color: #ffffff } /* Name.Builtin.Pseudo */
.highlight .bp { color: #fff } /* Name.Builtin.Pseudo */
.highlight .vc { color: #fb660a } /* Name.Variable.Class */
.highlight .vg { color: #fb660a } /* Name.Variable.Global */
.highlight .vi { color: #fb660a } /* Name.Variable.Instance */
Expand Down
42 changes: 26 additions & 16 deletions assets/ugly.css
@@ -1,7 +1,7 @@
body {
background: #292929 url(/assets/bg.png);
color: #FFF;
font-family: calibri,tahoma,arial,sans-serif;
background: #292929 url(/assets/bg.png);
color: #FFF;
font-family: calibri,tahoma,arial,sans-serif;
}

#c {
Expand All @@ -17,24 +17,24 @@ h1 {
}

h1 a {
text-shadow:
text-shadow:
-1px -1px 1px #111,
1px -1px 0 #FF8000,
-1px 1px 1px #EEE,
1px 1px 1px #EEE;
1px -1px 0 #FF8000,
-1px 1px 1px #EEE,
1px 1px 1px #EEE;
color: inherit;
font-weight: normal;
letter-spacing: 0em;
letter-spacing: 0;
font-family: "Consolas","Lucida Console",Courier,mono;
}

h1 a:hover, h1 a:focus {
text-decoration: none;
text-shadow:
-1px -1px 1px #111,
1px -1px 0 #FFF,
-1px 1px 1px #EEE,
1px 1px 1px #EEE;
-1px -1px 1px #111,
1px -1px 0 #FFF,
-1px 1px 1px #EEE,
1px 1px 1px #EEE;
}

a {
Expand All @@ -49,17 +49,27 @@ a:hover, a:focus {
}

pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
border-radius: 3px;
box-shadow: 0 0 5px #666;
overflow-x: auto;
}

p code, li code, h2 code {
padding: 3px;
}

pre, code {
border-radius: 3px;
box-shadow: 0 0 5px #666;
font-size: .93em;
font-family: "Consolas","Lucida Console",Courier,mono;
}

pre code {
box-shadow: none;
}

.info {
text-align: center;
color: #EEE;
Expand Down Expand Up @@ -103,7 +113,7 @@ pre, code {
border-radius: 5px;
border-top: 2px solid #111;
border-right: 1px solid #111;
background: rgba(0,0,0,0.15);
background: rgba(0, 0, 0, .15);
}

h2.title {
Expand Down

0 comments on commit ca1b494

Please sign in to comment.