Snippet Zone

console.log Hijack

```
const log = console.log;
```

const consoleUI = document.body.appendChild(

```
  document.createElement('div')
```
```
);
```
```
document.body.style.margin = 0;
```
```
Object.assign(consoleUI.style, {
```
```
  position: 'fixed',
```
```
  bottom: 0,
```
```
  width: '100%',
```
```
  height: '30%',
```
```
  maxHeight: '450px',
```
```
  minHeight: '200px',
```
```
  background: 'rgb(68, 68, 81)',
```
```
  overflow: 'scroll'
```
```
});
```
```
function consoleRow(str) {
```

  const row = document.createElement('div');

```
  consoleUI.prepend(row);
```
```
  row.innerText = str;
```
```
  Object.assign(row.style, {
```
```
    padding: '.5em',
```
```
    fontFamily: 'sans-serif',
```
```
    color: 'white',
```

    borderBottom: '1px solid rgba(255, 255, 255, .1)',

```
    whiteSpace: 'pre-wrap'
```
```
  });
```
```
}
```
```
 
```
```
console.log = (...args) => {
```
```
  const formatted = args.map(val => {
```
```
    return typeof val === 'object' ? 
```

      JSON.stringify(val, null, 2) : val;

```
  });
```
```
  consoleRow(formatted.join(' '));
```
```
  log.apply(console, args);
```
```
};
```
```
 
```
```
// test it out
```
```
 
```
```
console.log(1, 2, 3, 4);
```
```
console.log(new Date());
```
```
 
```
```
const someObject = {
```
```
  test: 123,
```
```
  testing: { x: 1, y: 2, z: 3 }
```
```
};
```
```
console.log(someObject);
```
```
 
```
```
console.log(3, 2, 1, 0);
```

I’m thinking about adding a little fake console to the Snippet Zone Quick Editor – just whipped this up as a proof of concept – something like this should work…

August 30, 2021

// css // hacks // javascript // meta // strings // tricks // ui

Set Multiple Attributes (hack)

// hacky way to set many attributes - just for fun

```
const el = document.body.appendChild(
```
```
  document.createElement('button'));
```
```
let i, a;
```
```
el.innerHTML = 'hello';
```
```
for (i in a = {
```
```
  id: 'xyz',
```
```
  title: 'hi there...',
```
```
  style: `
```
```
    background: red; 
```
```
    color:white;
```
```
    font-size: 1.4em;
```
```
  `
```
```
}) el.setAttribute(i, a[i]);
```

Chances are you don’t want to use this unless you are just speed coding, prototyping or playing around

If you do want to set multiple attributes, you’ll likely be doing so in an abstract way with one of the many popular js libs or frameworks.

In my personal projects I usually don’t use DOM related libs or frameworks, so I do this or something like it:

```
function attrs(el, attrs) {
```
```
  for (let i in attrs) {
```
```
    el.setAttribute(i, attrs[i])
```
```
  }
```
```
}
```

I’ll always miss jQuery, used it for many years and found it extremely intuitive and a huge time saver… The above attrs function is just a crappier version of the jQuery attr method. Read more about that here in the docs.

August 24, 2021

// dom // hacks // javascript

Newer Posts

console.log Hijack

Set Multiple Attributes (hack)

Recent

Archive