Clear rails Better Errors console - ruby-on-rails

How can I clear rails web console?
Image link of better errors web console

I have developed some JavaScript that can be shoved into a bookmarklet and used in the browser to clear the live console.
Verbose Code
var consoleElements = document.querySelectorAll('.console');
var arrayLength = consoleElements.length;
if(arrayLength<1){
console.log("No consoles found to clear.");
} else {
for (var i = 0; i < arrayLength; i++) {
var consoleElement = consoleElements[i];
var consoleHistoryElement = consoleElement.querySelector('pre');
consoleHistoryElement.innerHTML = "";
consoleHistoryElement.style.backgroundColor = "#FF906F";
setTimeout(function() {
consoleHistoryElement.style.transition = "background-color 1.5s";
consoleHistoryElement.style.backgroundColor = "";
setTimeout(function() {
consoleHistoryElement.style.transition = "";
}, 1500);
}, 0);
}
console.log(arrayLength + " consoles cleared.");
}
Bookmarklet
javascript:var consoleElements=document.querySelectorAll('.console');var arrayLength=consoleElements.length;if(arrayLength<1){console.log("No consoles found to clear.");}else{for(var i=0;i<arrayLength;i++){var consoleElement=consoleElements[i];var consoleHistoryElement=consoleElement.querySelector('pre');consoleHistoryElement.innerHTML="";consoleHistoryElement.style.backgroundColor="#FF906F";setTimeout(function(){consoleHistoryElement.style.transition="background-color 1.5s";consoleHistoryElement.style.backgroundColor="";setTimeout(function() {consoleHistoryElement.style.transition = "";},1500);},0);}console.log(arrayLength + " consoles cleared.");}

Related

firefox can't follow the link, in other browsers all right

Ggo to https://codepen.io/anon/pen/pVGXZG hover mouse on NAV and try click on "firefox"
Other browser when you click on "firefox" following link without problem
var btn = document.getElementById("main-btn");
btn.addEventListener("mouseover", function (e) {
var nav = document.getElementById("main-nav");
var sub_btns = document.getElementsByClassName("sub-btn");
var pos = [];
e.className += "main-hover";
console.log(e)
nav.addEventListener("mouseover", function (e) {
var total =0;
for(var x = 0;x<sub_btns.length;x++) {
if(x <2) {
sub_btns[x].style.left = "-"+((x+1)*30)+"%";
pos[x] = ((x+1)*20);
} else {
sub_btns[x].style.right = "-"+((x-1)*30)+"%";
pos[x] = ((x-1)*280);
}
sub_btns[x].style.opacity = "1";
}
nav.style.width = 50+"%";
});
nav.addEventListener("mouseout", function(){
nav.style.width = "100px";
for(var x = 0;x<sub_btns.length;x++) {
sub_btns[x].style.left = "0";
sub_btns[x].style.right = "0";
sub_btns[x].style.opacity = "0";
}
})
});
Spec says, that inside of you can have only phrasing content. That is, the element inside won't be interactive (clickable).

Turbolinks not rendering code on page change

I'm using Segment.io to do tracking on my site. We have a live chat widget that I'd like to be displayed on every page. However I'm unable to figure out how to make this work.
I've created an analytics.js which loads in the body (I've also tried adding the analytics.page(); to the body without any results):
window.analytics = window.analytics || [];
window.analytics.methods = ['identify', 'group', 'track',
'page', 'pageview', 'alias', 'ready', 'on', 'once', 'off',
'trackLink', 'trackForm', 'trackClick', 'trackSubmit'];
window.analytics.factory = function(method){
return function(){
var args = Array.prototype.slice.call(arguments);
args.unshift(method);
window.analytics.push(args);
return window.analytics;
};
};
for (var i = 0; i < window.analytics.methods.length; i++) {
var key = window.analytics.methods[i];
window.analytics[key] = window.analytics.factory(key);
}
window.analytics.load = function(key){
if (document.getElementById('analytics-js')) return;
var script = document.createElement('script');
script.type = 'text/javascript';
script.id = 'analytics-js';
script.async = true;
script.src = ('https:' === document.location.protocol
? 'https://' : 'http://')
+ 'cdn.segment.io/analytics.js/v1/'
+ key + '/analytics.min.js';
var first = document.getElementsByTagName('script')[0];
first.parentNode.insertBefore(script, first);
};
window.analytics.SNIPPET_VERSION = '3.1.0';
window.analytics.load('kYDWuP6nxI');
window.analytics.page();
document.addEventListener("turbolinks:load", function() {
console.log('page change');
analytics.page();
});
When I visit a new page on the app it shows the console log, but analytics.page(); doesn't seem to be rendered except when I do a manual page refresh.
Anybody know how to fix this?

Creating chat "rooms" using Node, Express, Heroku, and Socket.io

So I've been building an app for quite some time and I'm running into problems in terms of scalability. I'm new to Node, and Heroku for that matter. Please bear with me.
I originally followed this tutorial to get my node service up and running. Essentially, it creates a real-time chat service. However, my question now comes with creating 'rooms'. It doesn't make sense to me that I might have 15+ chats going on, yet they all are calling the same functions on the same clientSocket, and I have to determine what UI updates go to which clients on the front end. As of now, I have upwards of 15 clients all trying to interact on different chats, but I'm pushing updates to everyone at once (for example, when a message is posted), then determining who's UI to update based on which room ID I'm cacheing on each device. Seems like a terrible waste of computing power to me.
I'm thinking that the solution involves modifying how each client connects (which is the code snippet below). Is there a way to create location based 'rooms', for example, where the clients connected are the only ones getting those updates? Any idea how to go about this solution? If anyone is also willing to just explain what I'm not understanding about Node, Express, Heroku, Socket.io or others, please do let me know.
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var pg = require('pg');
var userList = [];
var typingUsers = {};
var ActiveQueue = [];
app.get('/', function(req, res){
res.send('<h1>Active RT Queue</h1>');
});
var conString = "postgres://url";
pg.defaults.ssl = true;
var client = new pg.Client(conString);
client.connect(function(err) {
if(err) {
return console.error('could not connect to postgres', err);
}
});
http.listen(process.env.PORT || 5000, function(){
console.log('Listening on *:5000');
});
io.on('connection', function(clientSocket){
console.log('a user connected');
clientSocket.on('disconnect', function(){
console.log('user disconnected');
var clientNickname;
for (var i=0; i<userList.length; i++) {
if (userList[i]["id"] == clientSocket.id) {
userList[i]["isConnected"] = false;
clientNickname = userList[i]["nickname"];
break;
}
}
delete typingUsers[clientNickname];
io.emit("userList", userList);
//io.emit("userExitUpdate", clientNickname);
//io.emit("userTypingUpdate", typingUsers);
});
clientSocket.on("exitUser", function(clientNickname){
for (var i=0; i<userList.length; i++) {
if (userList[i]["id"] == clientSocket.id) {
userList.splice(i, 1);
break;
}
}
io.emit("userExitUpdate", clientNickname);
});
clientSocket.on("connectUser", function(clientNickname) {
var message = "User " + clientNickname + " was connected.";
console.log(message);
var userInfo = {};
var foundUser = false;
for (var i=0; i<userList.length; i++) {
if (userList[i]["nickname"] == clientNickname) {
userList[i]["isConnected"] = true
userList[i]["id"] = clientSocket.id;
userInfo = userList[i];
foundUser = true;
break;
}
}
if (!foundUser) {
userInfo["id"] = clientSocket.id;
userInfo["nickname"] = clientNickname;
userInfo["isConnected"] = true
userList.push(userInfo);
}
io.emit("userList", userList);
io.emit("userConnectUpdate", userInfo)
});
///functions pertaining to transfer of messages and updating the UI follow
I would try something like this:
io.on('connection', function(clientSocket) {
clientSocket.on('room:general', function(data) {
var user = data.user;
var message = data.message;
console.log('%s sent new message: %s',user,message);
io.emit('room:general:newMessage', data);
});
//and so for each room
.........
});
and from front end you need to send JSONObject:
{
user:your_username,
message:user_message
}
,
socket.emit("room:general", json_object);
socket.on("room:general:newMessage", onYourDefinedEmiterListener);
..........
..........
//and so for each room
I never made Chat Application, hope it helps.

How to change get id from url to post method

I have a code like this
var arr = new Array();
var cnt = 0;
var checkboxes = $('.sel');
var emaillist = document.getElementsByName("elist[]");
var selectedContract = [];
var dispflag = false;
var x = 0;
$.each(checkboxes,function(i,r){
if(r.checked){
arr[cnt++] = r.value;
if(emaillist[x].value != "true"){
dispflag = true;
selectedContract.push(r.value);
}
}
x++;
});
var params = selectedContract.join(':');
if(cnt == 0)
{
alert("No contracts selected.");
}
else
{
url = controllerPath + "/getcontract/contract_id/" + arr + "/custom_action/1";
window.open (url,"Contracts","resizable=1,location=1,status=1,scrollbars=1,width=800,height=600");
}
I want to change arr that give result contract_id to POST method cause when the contract_id more than 500 result, the page shows blank due to URL too large/too long.
I still don't understand how to do it.
Anyone can help me to solve it.

Memory Leak with Phonegap Cordova Web Audio

I've seen this question asked here already : Web Audio API Memory Leaks on Mobile Platforms but there doesn't seem to be any response to it. I've tried lots of different variations - setting variables to null once I'm finished with them, or declaring the variables within scope, but it appears that the AudioContext (or OfflineAudioContext ) is not being Garbage collected after each operation. I'm using this with Phonegap, on an IOS, so the browser is safari. Any ideas how to solve this memory leak?
Here is my code:
function readVocalsToBuffer(file){
console.log('readVocalsToBuffer');
var reader = new FileReader();
reader.onloadend = function(evt){
var x = audioContext.decodeAudioData(evt.target._result, function(buffer){
if(!buffer){
console.log('error decoding file to Audio Buffer');
return;
}
window.voiceBuffer = buffer;
loadBuffers();
});
}
reader.readAsArrayBuffer(file);
}
function loadBuffers(){
console.log('loadBuffers');
try{
var bufferLoader = new BufferLoader(
audioContext,
[
"."+window.srcSong
],
createOffLineContext
);
bufferLoader.load()
}
catch(e){
console.log(e.message);
}
}
function createOffLineContext(bufferList){
console.log('createOfflineContext');
offline = new webkitOfflineAudioContext(2, window.voiceBuffer.length, 44100);
var vocalSource = offline.createBufferSource();
vocalSource.buffer = window.voiceBuffer;
vocalSource.connect(offline.destination);
var backing = offline.createBufferSource();
backing.buffer = bufferList[0];
backing.connect(offline.destination);
vocalSource.start(0);
backing.start(0);
offline.oncomplete = function(ev){
vocalSource.stop(0);
backing.stop(0);
vocalSource.disconnect(0);
backing.disconnect(0);
delete vocalSource;
delete backing;
delete window.voiceBuffer;
window.renderedFile = ev.renderedBuffer;
var bufferR = ev.renderedBuffer.getChannelData(0);
var bufferL = ev.renderedBuffer.getChannelData(1);
var interleaved = interleave(bufferL, bufferR);
var dataview = encodeWAV(interleaved);
window.audioBlob = new Blob([dataview], {type: 'Wav'});
saveFile();
}
offline.startRendering();
}
function interleave(inputL, inputR){
console.log('interleave');
var length = inputL.length + inputR.length;
var result = new Float32Array(length);
var index = 0,
inputIndex = 0;
while (index < length){
result[index++] = inputL[inputIndex];
result[index++] = inputR[inputIndex];
inputIndex++;
}
return result;
}
function saveFile(){
offline = null;
console.log('saveFile');
delete window.renderedFile;
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFSSuccess, fail);
}

Resources