Chrome Dev Summit 2017



our favourite bits of the web our favourite bits of the web our favourite bits of the web

๐Ÿ‘ปโค๏ธ๐Ÿ‘Œ

Did you know?


<style>
  .๐ŸŒˆ {
    display: inline-block;
    background-image: linear-gradient(...);
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .๐Ÿ“ฆ { display: block; }
  .๐Ÿ‘ป { display: none; }
</style>
<h1 class="๐ŸŒˆ">Hai frands!</h1>
<div class="๐Ÿ‘ป">You can't see me!</div>
  

But also


'๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘ฆโ€๐Ÿ‘ฆ'.replace('๐Ÿ‘ฆโ€', '๐Ÿ‘งโ€') // ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ
'๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘ฆโ€๐Ÿ‘ฆ'.replace('๐Ÿ‘ฆโ€', '')   // ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘ฆ
'๐Ÿ™…๐Ÿป'.replace('๐Ÿป', '๐Ÿฟ')  // ๐Ÿ™…๐Ÿฟ
  

variable fonts

font-variation-settings


    @keyframes animate-font {
      0% {
        font-variation-settings:
            'BLDA' 0, 'BLDB' 0, 'SKLB' 0;
      }
      50% {
        font-variation-settings:
            'BLDA' 600, 'BLDB' 1000, 'SKLB' 1000;
      }
      100% {
        font-variation-settings:
            'BLDA' 0, 'BLDB' 0, 'SKLB' 1000;
      }
    }
      
$ Zycon font by David Berlow

Intersection observers YAY!

no Math, no fuss!



const observer = new IntersectionObserver(
  changes => { /* Do something */},
  { threshold: [0.1, 0.2, 0.3...] }
);

observer.observe(element);

        

score:

$ Rocket Ship By Andrew, Meteor By Chanut is Industries

Gyroscope

$ Smartphone By UNiCORN

deviceorientation yeah!


window.addEventListener('deviceorientation',
  ev => {
    const Z = ev.alpha
    const X = ev.beta
    const Y = ev.gamma
  },
  true
);
      

Free ideas




<3