behnamazimi

<div class="square"></div>

<style>
    .square {
        width: 300px;
        max-width: 100%;
    }

    .square::after {
        content: '';

behnamazimi

<div class="box">Simple Box</div>

<style>
    .box {
        color: #fff;
        height: 250px;
        margin: 2rem;
        position: relative;
        padding: 1rem;     

behnamazimi

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

behnamazimi

<div id="app"></div>

behnamazimi

let user = { username: "bhnmzm", first_name: 'Behnam', last_name: "Azimi", title: "Front-End Developer" };

user[Symbol.iterator] = function*() {
 for (let key in this) {
   yield [key, this[key]];
 }
};

for (let [key, value] of user) {
 console.log(key + ": ", value)

behnamazimi

const data = {
 items: ["A", "B", "C"],
 [Symbol.iterator]: function* myIterator() {
   this.pointerIndex = 0;
   while (this.pointerIndex < this.items.length)
     yield this.items[this.pointerIndex++];
 }
}

for (let item of data) {

behnamazimi

function * myGenerator() {
 // ... maybe some codes here
 yield 'First Pause';  
 // ... maybe some codes here
 yield 'Second Pause';
}
const it = myGenerator();
console.log(it.next()); //o: {value: "First Pause", done: false}
console.log(it.next()); //o: {value: "Second Pause", done: false}
console.log(it.next()); //o: {value: undefined, done: true}

behnamazimi

const data = {
 items: ["A", "B", "C"],
 pointerIndex: 0,
 next() {
   if (this.pointerIndex < this.items.length) // if done
     return { value: this.items[this.pointerIndex++], done: false }
   else // if not done
     return { value: undefined, done: true };
 },
  [Symbol.iterator]: function() {

behnamazimi

const data = ["A", "B", "C"];
console.log(typeof data[Symbol.iterator]) //o: "function"

const iterator = data[Symbol.iterator]();

console.log(iterator.next()) //o: {value: "A", done: false}
console.log(iterator.next()) //o: {value: "B", done: false}
console.log(iterator.next()) //o: {value: "C", done: false}
console.log(iterator.next()) //o: {value: undefined, done: true}

behnamazimi

const data = {
 items: ["A", "B", "C"],
 pointerIndex: 0,
 [Symbol.iterator]: function () {
   if (this.pointerIndex < this.items.length) // if done
     return { value: this.items[this.pointerIndex++], done: false }
   else // if not done
     return { value: undefined, done: true };
 }
}