MyCave
Multi-size style refresh

IMAGE ALT TEXT HERE

I started looking a easy way to test multiple resolution tests. So my current solution.

  1. Nodejs server Running a simple websocket server
  2. Start-Stop server bash script
  3. A refresher page. Used when opened to broadcast a major refresh signal.
  4. Custom sublime builder command
  5. A simple snippet for the current page that's under development

1 - Server Must be visible to all browsers + Editor machine


"use strict";
// used for start-stop script
process.title = 'nodejscurrent';


var app = require('http').createServer(handler),
io = require('socket.io').listen(app),
fs = require('fs');


app.listen(7777);


function handler (req, res) {
fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}


res.writeHead(200);
res.end(data);


});
}


io.sockets.on('connection', function (socket) {
socket.on('do-refresh', function (data) {
socket.broadcast.emit('refresh');
});


io.sockets.on('message', function(data) {
    console.log("MSG", data);
});


});

  1. Start-Stop bash script
#!/bin/bash
ps aux | grep nodejsrefresher | awk '{ system("kill -9 "$2)}'; nodejs server.js
  1. The refresher page. Must be visible for the sublime-editor



    <!-- REFRESHER -->

  1. Custom sublime builder command
    • Create from Tools -> Build System -> New Build System


{
"shell_cmd": "google-chrome http://REFRESHER-VISIBLE-URL/refresh.html"
}

  1. A simple snippet for the current page that's under development Add in head section. Put the client socket.io.min.js for example in 'static' folder.

Maybe not a perfect solution but works really good for many browser windows + devices. Added in chrome "responsiView" plugin for testing standard resolutions.