Only discussing features that are widely available
append() and prepend()
const div = document.createElement('div');
const p = document.createElement('p');
div.appendChild(p);
document.body.insertBefore(div, document.body.firstChild);
Baseline Widely available
append() and prepend()
const div = document.createElement('div');
const p = document.createElement('p');
div.appendChild(p);
document.body.insertBefore(div, document.body.firstChild);
Baseline Widely available
append() and prepend()
const div = document.createElement('div');
const p = document.createElement('p');
div.append(p);
document.body.prepend(div);
Baseline Widely available
append() and prepend()
const div = document.createElement('div');
const p = document.createElement('p');
div.append(p, 'Hello CFCamp!');
document.body.prepend(div);
Baseline Widely available
matchMedia()
const mediaQuery = window.matchMedia('(width >= 1000px)');
if (mediaQuery.matches) {
console.log('Viewport is at least 1000px wide');
} else {
console.log('Viewport is less than 1000px wide');
}
Baseline Widely available
matchMedia()
const mediaQuery = window.matchMedia('(width >= 1000px)');
mediaQuery.addEventListener('change', event => {
if (mediaQuery.matches) {
console.log('Viewport is at least 1000px wide');
} else {
console.log('Viewport is less than 1000px wide');
}
});
Baseline Widely available
requestSubmit()
const form = document.querySelector('form');
const button = document.querySelector('button');
button.addEventListener('click', () => {
form.submit();
});
Baseline Widely available
requestSubmit()
const form = document.querySelector('form');
const button = document.querySelector('button');
button.addEventListener('click', () => {
form.requestSubmit();
});
Baseline Widely available
requestSubmit()
const form = document.querySelector('form');
const button = document.querySelector('button');
button.addEventListener('click', () => {
form.requestSubmit();
});
Baseline Widely available
const user = { name: 'Alice', address: { city: 'Springfield' } };
const city = user?.address?.city;
const phone = user?.phone?.number ?? 'No phone number';
const phone ??= 'Really, no phone number';
console.log(city, ',', phone); // Springfield , No phone number
Baseline Widely available
const event = new CustomEvent('customEvent');
element = document.querySelector('.element');
element.addEventListener('customEvent', (evt) => {
console.log('element');
});
element.dispatchEvent(event);
Baseline Widely available
const event = new CustomEvent('customEvent', {
detail: { key: 'value' },
});
element = document.querySelector('.element');
element.addEventListener('customEvent', (evt) => {
console.log('element', evt.detail.key);
});
element.dispatchEvent(event);
Baseline Widely available
const event = new CustomEvent('customEvent', {
detail: { key: 'value' },
bubbles: true,
});
element = document.querySelector('.element');
element.addEventListener('customEvent', (evt) => {
console.log('element', evt.detail.key);
});
document.body.addEventListener('customEvent', (evt) => {
console.log('body', evt);
});
element.dispatchEvent(event);
Baseline Widely available
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log('Element is intersecting');
}
});
});
observer.observe(document.querySelector('.element'));
Baseline Widely available
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry.intersectionRatio);
});
}, {
rootMargin: '0px 0px -100px 0px',
threshhold: 0.5,
});
observer.observe(document.querySelector('.element'));
Baseline Widely available
const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = re.exec('2025-05-22');
console.log(match.groups.year, match.groups.month, match.groups.day);
Baseline Widely available
document.querySelector('.element').animate([
{ transform: 'rotate(0deg)' },
{ transform: 'rotate(359deg)' }
], {
duration: 10000,
iterations: Infinity
});
Baseline Widely available
navigator.clipboard.writeText('Hello, world!');
Baseline Newly available
navigator.clipboard.write([
new ClipboardItem({
'text/plain':
new Blob(['Hello, world!'], { type: 'text/plain' })
})
]);
Baseline Newly available
navigator.clipboard.readText()
.then((text) => {
console.log(text);
});
Baseline Newly available
const clipboardContents = await navigator.clipboard.read();
for (const item of clipboardContents) {
if (!item.types.includes('image/png')) {
continue;
}
const blob = await item.getType('image/png');
document.querySelector('.profile-picture').src = URL.createObjectURL(blob);
}
Baseline Newly available
Intl APIs
const number = 123456.78;
const enUsFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
const deDeFormatter = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
console.log(enUsFormatter.format(number)); // $123,456.78
console.log(deDeFormatter.format(number)); // 123.456,78 €
Baseline Widely available
URLSearchParams
const params = new URLSearchParams('key1=value1&key2=value2');
params.append('key3', 'value3');
console.log(params.toString());
Baseline Widely available
const utterance = new SpeechSynthesisUtterance(
'Hello CFCamp people!'
);
utterance.lang = 'en-US';
speechSynthesis.speak(utterance);
Baseline Widely available
function createElement() {
console.count('counter');
const div = document.createElement('div');
div.textContent = 'Hello, world!';
document.body.append(div);
}
for (let i = 0; i < 5; i++) {
createElement();
}
Baseline Widely available
console.group('Group');
console.log('Hello, world!');
console.error('Error');
console.groupEnd();
Baseline Widely available
console.table([{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }]);
Baseline Widely available
console.time('Timer');
await fetch('https://www.cfcamp.org/');
console.timeEnd('Timer');
Baseline Widely available
function bar() {
console.trace();
}
function foo() {
bar();
}
foo();
Baseline Widely available