Survey: Web browsers

coolprofessor — Sat, 16 Oct 2021 15:44:48 +0000

What features like document editing or customizing would be awesome to have on a web browser?

Reply in the discussion below:

JS Snippets

coolprofessor — Thu, 14 Oct 2021 23:30:14 +0000

I often find myself on stackoverflow looking for these snippets of code, so I put it all in one place.

mouse cursor

//This code is required for Firefox.
document.documentElement.style='height:100%;width:100%;padding:0';
//use this to change the CSS cursor
document.documentElement.style.cursor = 'pointer'

sound

audio.play(new Audio('audio_file.mp3'));

download

function download(name,contents){var c=document.createElement("a");c.download=name;var t=new Blob([contents],{type:"text/plain"});c.href=window.URL.createObjectURL(t);c.click()}

user-highlighted text

function highlightedText(){var text="";if(window.getSelection){text=window.getSelection().toString()}else if(document.selection&&document.selection.type!="Control"){text=document.selection.createRange().text}return text}

copy

function copy(copytext){navigator.clipboard.writeText(copytext)};

random

function random(min,max){return min+Math.random()*(max-min)};

distance

const distance = (x1,y1,x2,y2) => Math.hypot(x1 - x2, y1 - y2);

angle

function angle(x1,y1,x2,y2){var theta=Math.atan2((y2-y1),(x2-x1))*(180/Math.PI);if(theta<0){theta=360+theta}return theta}

wait

wait=(ms)=>{forever();refresh();let now=Date.now(),end=now+ms;while(now<end){now=Date.now()}};

This is not recommended, because it stops the entire JS engine.

repeat

repeat=(times,what)=>{for(i=0;i<times;i+=1){what()}}

make editable

document.getElementById('el').contentEditable = 'true'

keyboard

key={pressed:false,up:function(){},down:function(){},name:"",code:null};keyList={num8:"backspace",num9:"tab",num13:"enter",num16:"shift",num17:"ctrl",num18:"alt",num19:"pause",num20:"caps",num27:"exit",num32:" ",num33:"pgup",num34:"pgdn",num35:"end",num36:"home",num37:"left",num38:"up",num39:"right",num40:"down",num45:"insert",num46:"del",num48:0,num49:1,num50:2,num51:3,num52:4,num53:5,num54:6,num55:7,num56:8,num57:9,num65:"a",num66:"b",num67:"c",num68:"d",num69:"e",num70:"f",num71:"g",num72:"h",num73:"i",num74:"j",num75:"k",num76:"l",num77:"m",num78:"n",num79:"o",num80:"p",num81:"q",num82:"r",num83:"s",num84:"t",num85:"u",num86:"v",num87:"w",num88:"x",num89:"y",num90:"z",num91:"win",num92:"win",num93:"select",num96:0,num97:1,num98:2,num99:3,num100:4,num101:5,num102:6,num103:7,num104:8,num105:9,num106:"*",num107:"+",num109:"-",num110:".",num111:"/",num112:"F1",num113:"F2",num114:"F3",num115:"F4",num116:"F5",num117:"F6",num118:"F7",num119:"F8",num120:"F9",num121:"F10",num122:"F11",num123:"F12",num144:"numlock",num145:"scroll lock",num186:";",num187:"=",num188:",",num189:"-",num190:".",num191:"/",num192:"`",num219:"[",num219:"-",num220:"\\",num221:"]",num222:"'"};window.addEventListener("keypress",(keyIsPressed)=>{key.name=eval("keyList.num"+keyIsPressed.keyCode);if(key.name===undefined){key.code=""}key.pressed=true;key.down()});window.addEventListener("keyup",(event)=>{key.pressed=false;key.up()});

This creates a key object that holds keyboard info.

name	type	value
name	str	name of last key pressed
pressed	bool	whether key up or down
up	func	function triggered on keyup
down	func	function triggered on keydown
num	int	JS keycode

Mouse

mouse={x:0,y:0,scroll:function(){},scrollX:0,scrollY:0,down:function(){},up:function(){},moved:function(){},pressed:false,button:undefined};window.addEventListener("mousedown",(event)=>{mouse.pressed=true;mouse.down();mouse.button=event.button});document.addEventListener('mousemove',(event)=>{mouse.moved();mouse.px=mouse.x;mouse.px=mouse.x;mouse.x=event.clientX+mouse.scrollX;mouse.y=event.clientY+mouse.scrollY});window.addEventListener('touchstart',function(e){mouse.pressed=true;mouse.x=e.changedTouches[0].pageX;mouse.y=e.changedTouches[0].pageY},false);window.addEventListener('touchmove',function(e){mouse.x=e.changedTouches[0].pageX;mouse.y=e.changedTouches[0].pageY;},false);window.addEventListener('touchend',function(e){mouse.pressed=false},false);window.addEventListener("mouseup",(event)=>{mouse.pressed=false;mouse.up()});window.addEventListener("scroll",function(){mouse.scroll();mouse.x+=window.scrollX-mouse.scrollX;mouse.y+=window.scrollY-mouse.scrollY;mouse.scrollX=window.scrollX;mouse.scrollY=window.scrollY});

This creates a mouse object that holds mouse info.

name	type	value
x	int	horizontal mouse position
y	int	vertical mouse position
scrollX	int	horizontal scroll position
scrollY	int	vertical scroll position
up	func	function triggered on mouseup
down	func	function triggered on mousedown
up	func	function triggered on keyup
scroll	func	function triggered on scroll
button	int	button number pressed

I hope this was helpful!

DEV Community: coolprofessor