Skip to main content

Google+ Comments on your non-blogger site

Today +Google published a +Google+ based commenting system on +Blogger . This is what I expected so long. I hate when I need to read minified JavaScript but now I could get more stamina to this “awesome” digging. Finally I found the call with parameters 🙂

Read More

Related Posts:

Why I Use CoffeeScript

Yeah this is a reply post to Oscar Godson’s Why I Don’t Use CoffeeScript. I don’t have any problems with people who don’t like CoffeeScript or other similar solutions but I don’t like if someone cuts in the air with fake reasons and self made generalities.

Read More

Related Posts:

browserify – write client-side javascript server-side

thechangelog:

Unifying your front-end and back-end codebases can be a harrowing experience. Regardless of your web technology stack of choice, you’ve probably created some server-side component which generated some front-end JavaScript for you at some point. I’ve created and used many tools that do such code generation, and I’ve hated all of them. This is why I’m soo excited to see node-browserify by prolific Node.js module author,James Halliday.

browserify is a node.js library which helps you share your back-end code to the front-end by enabling such features as:

  • a client-side require() method
  • being able to load npm packages
  • a middleware system for code generation:
    • minify
    • uglify
    • ES5 compatibility
    • fileify ( wrap static files or directories in JavaScript methods )
  • a CLI tool for creating stand-alone bundles
  • full integration with node’s httpServer and Express
  • browser-versions of certain core node modules such as path, events, and vm

Browserify does a great job of simplifying the process of sharing code between the browser and server by building on top of existing infrastructure and providing some great new features that play very nice with node.js

I needed to build a library that would operate dual-sided ( front-end and back-end ), and I choose to build it server-side first and then use the browserify CLI tool to port it to the client ( and work as a standalone with no server dependencies ). The entire process worked out much better then expected and I’d recommend trying it out for your next JavaScript project.

If you’d like to see an example of node-browserify in production, you can check out Browserling, Mr. Halliday’s very own company which allows you to test websites cross-browser, in your own browser! I can only imagine what crazy libraries SubStack will think up next.

Related Posts:

prettify into Tumblr

Open your own Tumblr dashboard and here click to the Customize.
In the Theme menu click to Custom HTML… It will load code of the current template… Find the `<body>` string and replace it with this lines:

<body onload="prettyPrint()">

Then insert these lines befor `</head>`:

<link rel="stylesheet" type="text/css" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css">
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-sql.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-yaml.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-hs.js"></script>

ok… the installation is ready. (see http://google-code-prettify.googlecode.com/svn/trunk/src/ for other additional supported languages)

To modify default style click the Advanced menu and write your own style under the `Add custom CSS` label. Eg:

 

pre .str, code .str { color: #65B042 !important; }
pre .kwd, code .kwd { color: #E28964 !important; }
pre .com, code .com {
  color: #AEAEAE !important;
  font-style: italic !important;
}
pre .typ, code .typ { color: #89bdff !important; }
pre .lit, code .lit { color: #3387CC !important; }
pre .pun, code .pun { color: #fff !important; }
pre .pln, code .pln { color: #fff !important; }
pre .tag, code .tag { color: #89bdff !important; }
pre .atn, code .atn { color: #bdb76b !important; }
pre .atv, code .atv { color: #65B042 !important; }
pre .dec, code .dec { color: #3387CC !important; }

pre.prettyprint, code.prettyprint {
  background-color: #000 !important;
  -moz-border-radius: 4px !important;
  -webkit-border-radius: 4px !important;
  -o-border-radius: 4px !important;
  -ms-border-radius: 4px !important;
  -khtml-border-radius: 4px !important;
  border-radius: 4px !important;
}

pre.prettyprint {
  width: 95% !important;
  margin: 1em auto !important;
  padding: 1em !important;
  white-space: pre-wrap !important;
}

ol.linenums {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #AEAEAE !important;
}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 {
  list-style-type: none !important
}
li.L1,li.L3,li.L5,li.L7,li.L9 { } 

pre { padding: 5px; font-size: 1em !important; }

hr {
  border: none;
  border-top: 1px dotted #AA2200;
  width: 80%;
  margin-left: 0;
}

Now if you want insert any code snippet into your post you need to edit as HTML (right side of the editor icon set) and put it into a `pre` tag (or `code`). Eg:

<pre class="prettyprint lang-php">
  <!--?php echo 'Test' ?-->
</pre>

Where lang-XXX is the language what you want to use.

If you have any questions feel free to ask.

Related Posts: