An awesome list of awesome things

awesome.md

Development

Animation & Interactivity

• IntersectionObserver - get notified when element properties change, e.g. when an element becomes visible or invisible

Authentication

• One-tap sign in / sign up

Components

• Web components - encapsulate HTML / CSS / JS components and use them across the whole web

Features

TODO: Chat

TODO: Notifications

HTML

• Use contenteditable attribute and oninput event to make any HTML element's content editable

Interactivity

• Device orientation

window.addEventListener('deviceorientationevent', (e) => console.log(e.alpha, e.beta, e.gamma))

Media

• Media session API - MediaMetadata
  • title, artist, album, artwork, etc.;
  • setActionHandler('play'), pause, etc.

Metrics

• When has autocomplete been used?

document.addEvenListener('input', (e) => {
  const el = e.target.matches(':-webkit-autofill');
  if (el) {
    // Autocompleted!
  }
});

Mixed Reality

• A-Frame - https://aframe.io

Payments

• Stripe
• PaymentRequest API

Performance

• Workbox to fine-tune service workers
• WASM for performance-intensive cases like WebGL
• Lighthouse - audit web pages via Chrome devtools, or use the headless CLI in CI
• WebPageTest - test performance on real devices
• If load time is critical, try Google AMP
• Performance budgets
• Get battery level & status

if ('getBattery' in navigator) {
  const battery = await navigator.getBattery();
  if (!battery.charging && battery.level < 0.2) {
    // Save some power by skipping some expensive operation
  }
}

• Detect memory size in GB - useful for low-end devices

if ('deviceMemory' in navigator) {
  if (navigator.deviceMemory < 1) {
    // Low end device, skip some expensive operation
  }
}

• Available device storage size

if ('storage' in navigator) {
  const videoSizeInBytes = 12345678;
  const { quota, usage } = await navigator.storage.estimate();
  if (quota - usage < videoSizeInBytes) {
    // Not enough storage space, skip preload
  }
}

• Provide users with a way to clear all data from your website
• Connection

if ('connection' in navigator) {
  if (navigator.connection.type === 'cellular') {
    // Skip some network intensive operation
  }
}

• Pause video when page is hidden:

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    video.pause();
  }
});

• Mute video when user scrolls down using IntersectionObserver

Search

• Lunr - https://github.com/olivernn/lunr.js
• Elasticlunr - https://github.com/weixsong/elasticlunr.js

SVG

• Image Trace Loader - https://www.npmjs.com/package/image-trace-loader

Testing

• Puppeteer - headless Chrome

Video

• Detecting how much of a video has been buffered

<video id="video" preload="auto" src="video.mp4" controls></video>
<script>
  document.querySelector('#video').addEventListener('loadedmetadata', () => {
    var bufferedSeconds = video.buffered.end(0) - video.buffered.start(0);
    console.log(`${bufferedSeconds} of video are ready to play!`);
  });
</script>

• Preload a video

<link rel="preload" as="video" href="https://somecnd.com/small-video.mp4">
<video id="video" controls></video>
<script>
  const video = document.querySelector('#video');
  video.src = 'https://somecnd.com/small-video.mp4';
  video.play().then(() => {
    // If preloaded video is already cached, playback starts immediately
  });
</script>

• Preload a part of a video

<link rel="preload" as="video" href="https://somecnd.com/video.webm">
<video id="video" controls></video>
<script>
  const mediaSource = new MediaSource();
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', async () => {
    const sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs=vp9');
    const response = await fetch('https://somecnd.com/video.webm');
    const data = await response.arrayBuffer();
    sourceBuffer.appenduuffer(data);
  });
</script>

• Detect orientation: if ('orientation' in screen) - request full screen when landscape, otherwise exit fullscreen

Management

Sources:

• How Facebook's VP of Product Finds Focus and Creates Conditions for Intentional Work

Focus

• What is the main problem this product is solving?
• Who are the people we are solving this problem for?
• What is the emotion/feeling that we want our product to create or evoke?
• Is this particular implementation aligned with the problem we're solving?
• Is this the product/feature most likely to successfully solve that problem?

Clarity

Goal: to answer the following questions:

• Are these intentions still the correct ones?
• Are my recent decisions in line with these intentions?

Agenda:

• List the broader team or organization's top priorities.
• Check that your personal priorities for the week still align with those priorities.
• Check for any new information or data that requires a shift in priorities.
• Check priorities against your time allocation, meetings and commitments that week.
• Make any adjustments to your calendar to better reflect your priorities.
• Note any priority adjustments that impact or need to be communicated to your team.

Postponing & Delegating

• When something can wait: "I'm focused 100% on X this week, so if this isn't an urgent issue, let's re-evaluate next week."
• When you need a little time: "I'm fully focused on X right now, so I can't meet about that this week. But if you send me an email, I will get back to you with an answer by Y."
• When someone else can handle it: "This week, I need to focus all my time on X, but if you need an urgent answer, you can reach out to my team lead, Z, who is focused on that issue."