Loading blog entries.. loading


Blogs which referenced tag: [Web Development]

 

WTF?IBM Lotus and Domino Server?

 
Written by Wayne Ye  Sunday, February 3, 2013

Technical tags: IBM, Domino, AIX, LotusScript, ODBC/JDBC, ADO, OLE DB,

Assume we are now in Jurassic period, the technologies above are in Cambrian period, developers who has less than 4 years experience probably never heard about any of the above terminologies... No choice, I was dealing with them during the passes few weeks, I met ODBC as soon as I graduated while I was development ASP website using VBScript, but it was soon replaced by ADO, and after half a year I started studying .NET so I used ADO.NET, nowadays we usually talk to Entity Framework which abstracts ADO.NET interfaces... Now 8 years passes for me whereas I picked all of them back and started "exploring"...


View Post»



Permalink:http://wayneye.com/Blog/WTF-IBM-Lotus-and-Domino-Server
Tag:

Cache Reverse Proxy - Varnish

 
Written by Wayne Ye  Friday, January 11, 2013

Introduction

Varnish is an HTTP accelerator, the official page is: https://www.varnish-cache.org/.

Varnish stands in front of the web application server to be a cache reverse proxy (also can be a load balancer), it can simply cache all the static resources in memory, and can also be powerfully configed using VCL (Varnish Configuration Language, a DSL for Varnish configuration) to cache dynamic content, in addition, Varnish implements ESI (Edge Side Include) standards to provide ability to cache static parts of the page.


View Post»



Permalink:http://wayneye.com/Blog/Cache-Reverse-Proxy-Varnish
Tag:

Cache Reverse Proxy - nginx

 
Written by Wayne Ye  Thursday, January 10, 2013

Introduction

On the homepage of nxing wiki, there used to be one sentence which really impressed my very much when I first time to take a look at it and learn it three years ago:

Apache is like Microsoft Word, it has a million options but you only need six. Nginx does those six things, and it does five of them 50 times faster than Apache.  --Chris Lea


View Post»



Permalink:http://wayneye.com/Blog/Cache-Reverse-Proxy-nginx
Tag:

Observation on CDN

 
Written by Wayne Ye  Sunday, October 7, 2012

Motivation

Leveraging CDN (Content Delivery Network) to speed up static files loading time is one of the most important fact which affects a website's loading time, CDN was emphasized in many articles related with improving website's performance, for example:


View Post»



Permalink:http://wayneye.com/Blog/Observation-On-CDN
Tag:

Make your HTML5 Video support all browsers

 
Written by Wayne Ye  Monday, November 7, 2011

Introduction

HTML5 video tag gave us the following advantages:

  1. No plugin required, directly play.
  2. Visible & controllable for Browser and search engine, not a "black box" such as Flash or SilverLight.
  3. Cross-platform, in theory all PC/mobile browsers as well as Ipad/Windows 8/Android tablet PC. 
  4. Downward compatibility. Which is very important, but W3C had made it simple and works, we can smoothly fall back to flash if the user agent does not recognize "<video>" tag.

So it is simple and pretty cool! However, there is still issues within a not short period: the browser support - each concrete browser and the company (ies) behind it supports different formant of videos, to be more specific, refer the table below stole from about.com:

 AndroidChromeFirefoxInternet ExploreriOSOperaSafari
Codec WinMacWinMacWin WinMacWinMac
MP4 or H.264 3.0 9 7 X X 9 3 X X 5 5
ogg/Theora 2.3 9 7 3.6 3.6 X X 10.63 10.63 X X
WebM 2.3 9 7 3.6 3.6 9 (withcomponents) X 10.63 10.63 X X

So to support all browsers: IE 6.0+, Firefox, Chrome, Safari, Opera, etc, what should we do?

Cross All Browser Implementation

By searching on the google and half a day investigation, I found the solution, sample code pasted below:

 <video controls="controls" preload="auto" poster="napshot.png">
    <source src="My Video.mp4" type="video/mp4" />
    <source src="My Video.webm" type="video/webm" />
    <source src="My Video.ogv" type="video/ogg" />
    <!--
        Flash
    -->
</video>

The code above results in IE 9.0+/Safari will load mp4, Chrome/Firefox and Opera will load webm, and IE 6.0 ~ 8.0 will load flash.

Note: as browsers may change its attitude on the video format support, so my code & comments might not right in the future.  

Few tips


View Post»



Permalink:http://wayneye.com/Blog/Make-Your-HTML5-Video-Support-ALL-Browsers
Tag:

Print partial web content

 
Written by Wayne Ye  Wednesday, September 28, 2011

Per project needs we need print part of a web page, which I have no idea when I saw this requirement, I googled and I read this post: http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/printing.htm, it basically use document.write to write the content you want to print to a new window by window.open, it works, however I really don't like the opened window.

Occasionally I tried to find out whether CSS can achieve such function, seemed I was on the right way: CSS media types is to control different display settings on different "media", controled completely by your own. What a shame to myself! CSS media types definiton from W3C official page:

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.

We can define print style by few ways:

  1. Make a seperate css file to define print style and link it by specifying media=print, <link rel="stylesheet" type="text/css" href="print.css" media="print" />
  2. Insert a <style media="print"> snippet into the <head>.
  3. Define @media print rule inline with our CSS code: @media print {#text_print:display:visible;}.

I'd reccomended option 1 or 3 if the project is small.

In additional I occasionally found that the Web Development extetion for Chrome already support this, we don't have to waste many pieces of papersSmile.

Web Development Tool

See also:

Print Button

W3C School: CSS Media types


View Post»



Permalink:http://wayneye.com/Blog/Print-Partial-Web-Content
Tag:

nodejs+express+jade+socket.io on Ubuntu 11.04

 
Written by Wayne Ye  Monday, August 29, 2011

Introduction

socket.io is a brilliant project which perfectly supports HTML5 WebSocket, in additional, it can fall back to flash or long polling when the client web browser does not support WebSocket, I explored it today on Ubuntu, I summarized the process in this post.

 

Install nodejs

I used nodejs v0.4.11, the latest stable version, by mannually compile/make/install.

sudo curl http://nodejs.org/dist/node-v0.4.11.tar.gz -o ~/Desktop/WayneDevLab/node.tar

sudo tar -xf node.tar cd node-v0.4.11

./configure

make

sudo make install

In the "./configure" step above if it prompted "libssl-dev" not found, please install libssl-dev (sudo apt-get install libssl-dev) which is required by node for hosting HTTPs server.

Install npm

curl http://npmjs.org/install.sh | sh

Install express

express is an insanely fast and high performance server-side JavaScript web development framework built on node, hosting a real web server based on node will be much harder without it:)

$ npm install -g express
$ express /tmp/foo && cd /tmp/foo
$ npm install -d 

Install socket.io

npm install socket.io

Setting up the Web server!!

I've modified my app.js as below:

 var express = require('express');

var app = module.exports = express.createServer(),
    io = require('socket.io').listen(app);

// Configuration
app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.set('view options', {layout: false});
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

// Routes

app.get('/', function(req, res){
  res.render('index', {
      title: 'Wayne Express Hello World',
      youAreUsingJade: true,
      domain: '192.168.1.4'
  });
});

app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

And below is my index.jade:

!!! 5
html(lang="en")
  head
    title= title
    script(src='http://'+ domain + ':3000/socket.io/socket.io.js')
    script(type='text/javascript')
      var socket;
      socket =  io.connect('http://192.168.1.4:3000');

      socket.on('news', function (data) {
       console.log(data);
       socket.emit('my other event', { my: 'data' });
             });
  body
    h1 Wayne WebSocket Demo using Socket.io
    #container
      - if (youAreUsingJade)
        p You are amazing
      - else
        p Get on it!

    p Powered By a(href='http://socket.io') Socket.io

    footer Copyright©2011 http://wayneye.com

Testing everything up

Start the server by:

$ node app.js

It works:)

I tested the combination above by using google Chromoum Dev 12 and Dev 15, they seperately adhere WebSocket protocol draft-hixie-thewebsocketprotocol-76 and draft-ietf-hybi-thewebsocketprotocol-10, the connection details for hybi10 is showing below:

socket.io

socket.io will print out useful information on console when running:

socket.io console

 

Wish that helps:)


View Post»



Permalink:http://wayneye.com/Blog/nodejs-express-jade-socketio-On-Ubuntu
Tag: