If you have to extend an existing object with additional property, always prefer Vue.set()
over Object.assign()
(or spread operator).
Example below explains implications for different implementations.
.ios-body-fixed { | |
position: fixed; | |
width: 100%; | |
height: 100%; | |
} |
// Find max used z-index | |
[...document.querySelectorAll('*')].map(e => ~~getComputedStyle(e,null).getPropertyValue('z-index')) | |
// Find elements with z-index | |
[...document.querySelectorAll('*')].filter(e => getComputedStyle(e,null).getPropertyValue('z-index') > 0) |
export const getSuggestions = (input) => { | |
return new Promise((resolve, reject) => { | |
const empty = input.length < 3 || !window || !window.google || !window.google.maps | |
if (empty) resolve([]) | |
try { | |
const service = new window.google.maps.places.AutocompleteService() | |
service.getQueryPredictions({ input }, (suggestions) => { | |
resolve(suggestions || []) | |
}) |
.element.collapsed { | |
height: 90px; | |
width: 100%; | |
} | |
.element.expanded { | |
top: 0; | |
bottom: 0; | |
left: 0; | |
width: 100%; |
<!doctype html> | |
<html lang="de"> | |
<head> | |
<meta charset="utf-8" /> | |
<title>Panorama</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
</head> | |
<body> | |
<div class="image-wrapper"> | |
<img class="image" src="http://lorempixel.com/1920/200" alt="Just a Placeholder Image"> |
function idle(action) { | |
return new Promise((resolve, reject) => { | |
requestIdleCallback(timing => resolve(action(timing))); | |
}); | |
} | |
async function init() { | |
criticalPath(); | |
await idle(lessImportant); | |
await idle(nonCritical); |
(() => { | |
const q = (e, s) => e.querySelector(s); | |
const qA = (e, s) => e.querySelectorAll(s); | |
const num = e => parseInt(e.nextSibling.wholeText.trim()) | |
const d = document.querySelector('.js-discussion.js-socket-channel'); | |
/* uncomment one of these to sort by */ | |
const sortBy = '+1'; | |
// const sortBy = '-1'; | |
// const sortBy = 'smile'; |