README.md

• Save the index.html file
• Use live-server to open it (http protocol)
• Open file manager and open the file with Chrome or any browser (file protocol)

Why the two renderings http and file are so different?

index.html

<link id="googleidentityservice" type="text/css" media="all" rel="stylesheet" href="https://accounts.google.com/gsi/style"><link id="glyph_link" rel="stylesheet" type="text/css" href="https://glyph.medium.com/css/e/sr/latin/e/ssr/latin/e/ssb/latin/e/title/latin/swap/m2.css" data-rh="true"><style>html { box-sizing: border-box; }*, ::before, ::after { box-sizing: inherit; }body { margin: 0px; padding: 0px; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; color: rgba(0, 0, 0, 0.8); position: relative; min-height: 100vh; }h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form { margin: 0px; }menu, ol, ul { padding: 0px; list-style: none none; }main { display: block; }a { color: inherit; text-decoration: none; }a, button, input { -webkit-tap-highlight-color: transparent; }img, svg { vertical-align: middle; }button { background: transparent; overflow: visible; }button, input, optgroup, select, textarea { margin: 0px; }@-webkit-keyframes k1 { <br>  0% { transform: translateX(-1%); }<br>  20% { transform: translateX(1%); }<br>  40% { transform: translateX(-1%); }<br>  60% { transform: translateX(1%); }<br>  80% { transform: translateX(-1%); }<br>  100% { transform: translateX(1%); }<br>}@keyframes k1 { <br>  0% { transform: translateX(-1%); }<br>  20% { transform: translateX(1%); }<br>  40% { transform: translateX(-1%); }<br>  60% { transform: translateX(1%); }<br>  80% { transform: translateX(-1%); }<br>  100% { transform: translateX(1%); }<br>}@-webkit-keyframes k2 { <br>  0% { opacity: 0.8; }<br>  50% { opacity: 0.5; }<br>  100% { opacity: 0.8; }<br>}@keyframes k2 { <br>  0% { opacity: 0.8; }<br>  50% { opacity: 0.5; }<br>  100% { opacity: 0.8; }<br>}.a { font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; }.b { font-weight: 400; }.c { background-color: rgb(255, 255, 255); }.l { height: 100vh; }.m { width: 100vw; }.n { display: flex; }.o { align-items: center; }.p { justify-content: center; }.q { height: 35px; }.r { fill: rgb(41, 41, 41); }.s { display: block; }.t { position: absolute; }.u { top: 0px; }.v { left: 0px; }.w { right: 0px; }.x { z-index: 500; }.y { box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px; }.ah { max-width: 1192px; }.ai { min-width: 0px; }.aj { width: 100%; }.ak { height: 65px; }.an { flex: 1 0 auto; }.ao { fill: rgb(25, 25, 25); }.ap { flex: 0 0 auto; }.aq { visibility: hidden; }.ar { margin-left: 16px; }.as { color: rgb(235, 48, 29); }.at { fill: rgb(235, 48, 29); }.au { font-size: inherit; }.av { border: inherit; }.aw { font-family: inherit; }.ax { letter-spacing: inherit; }.ay { font-weight: inherit; }.az { padding: 0px; }.ba { margin: 0px; }.bb:hover { cursor: pointer; }.bc:hover { color: rgb(199, 49, 30); }.bd:hover { fill: rgb(199, 49, 30); }.be:disabled { cursor: default; }.bf:disabled { color: rgba(3, 168, 124, 0.5); }.bg:disabled { fill: rgba(3, 168, 124, 0.5); }.bh { border-top: none; }.bi { background-color: rgb(195, 8, 3); }.bk { height: 54px; }.bl { overflow: hidden; }.bm { margin-right: 40px; }.bn { height: 36px; }.bo { width: 276px; }.bp { overflow: auto; }.bq { flex: 0 1 auto; }.br { list-style-type: none; }.bs { line-height: 40px; }.bt { white-space: nowrap; }.bu { overflow-x: auto; }.bv { align-items: flex-start; }.bw { margin-top: 20px; }.bx { padding-top: 20px; }.by { height: 80px; }.bz { height: 20px; }.ca { margin-right: 15px; }.cb { margin-left: 15px; }.cc:first-child { margin-left: 0px; }.cd { min-width: 1px; }.ce { background-color: rgb(255, 159, 135); }.cf { font-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; }.cg { font-weight: 300; }.ch { font-size: 15px; }.ci { line-height: 20px; }.cj { color: rgb(255, 218, 201); }.ck { text-transform: uppercase; }.cl { letter-spacing: 1px; }.cm { color: inherit; }.cn { fill: inherit; }.co:hover { color: rgb(255, 228, 213); }.cp:hover { fill: rgb(255, 228, 213); }.cq:disabled { color: rgb(255, 179, 157); }.cr:disabled { fill: rgb(255, 179, 157); }.cs { margin-bottom: 0px; }.ct { margin-top: 0px; }.cu { height: 119px; }.cx { padding-left: 24px; }.cy { padding-right: 24px; }.cz { margin-left: auto; }.da { margin-right: auto; }.db { max-width: 728px; }.dc { box-sizing: border-box; }.dd { top: calc(100vh + 100px); }.de { bottom: calc(100vh + 100px); }.df { width: 10px; }.dg { pointer-events: none; }.dh { word-break: break-word; }.di { overflow-wrap: break-word; }.dj::after { display: block; }.dk::after { content: ""; }.dl::after { clear: both; }.dm { max-width: 680px; }.dn { line-height: 1.23; }.do { letter-spacing: 0px; }.dp { font-style: normal; }.dq { font-family: medium-content-title-font, Georgia, Cambria, "Times New Roman", Times, serif; }.eg { margin-bottom: -0.27em; }.eh { color: rgb(41, 41, 41); }.ei { margin-top: 32px; }.ej { justify-content: space-between; }.en { border-radius: 50%; }.eo { height: 48px; }.ep { width: 48px; }.eq { margin-left: 12px; }.er { font-size: 16px; }.es { margin-bottom: 2px; }.eu { max-height: 20px; }.ev { text-overflow: ellipsis; }.ew { display: -webkit-box; }.ex { -webkit-line-clamp: 1; }.ey { -webkit-box-orient: vertical; }.ez:hover { text-decoration: underline; }.fa:disabled { color: rgb(117, 117, 117); }.fb:disabled { fill: rgb(117, 117, 117); }.fc { margin-left: 8px; }.fd { padding: 0px 8px; }.fe { background: 0px center; }.ff { border-color: rgb(117, 117, 117); }.fg:hover { color: rgb(8, 8, 8); }.fh:hover { fill: rgb(8, 8, 8); }.fi:hover { border-color: rgb(41, 41, 41); }.fj:disabled { cursor: inherit; }.fk:disabled { opacity: 0.3; }.fl:disabled:hover { color: rgb(41, 41, 41); }.fm:disabled:hover { fill: rgb(41, 41, 41); }.fn:disabled:hover { border-color: rgb(117, 117, 117); }.fo { border-radius: 4px; }.fp { border-width: 1px; }.fq { border-style: solid; }.fr { display: inline-block; }.fs { text-decoration: none; }.ft { color: rgb(117, 117, 117); }.fu { align-items: flex-end; }.gc { padding-right: 6px; }.gd:hover { color: rgb(25, 25, 25); }.ge:hover { fill: rgb(25, 25, 25); }.gf { fill: rgb(117, 117, 117); }.gg { margin-right: 8px; }.gh { margin-right: -6px; }.gi { clear: both; }.gr { max-width: 3264px; }.gx { padding-bottom: 5px; }.gy { padding-top: 5px; }.gz { transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) 0s; }.ha { cursor: zoom-in; }.hb { position: relative; }.hc { z-index: auto; }.hd { opacity: 0; }.he { transition: opacity 100ms ease 400ms; }.hf { height: 100%; }.hg { will-change: transform; }.hh { transform: translateZ(0px); }.hi { margin: auto; }.hj { background-color: rgb(242, 242, 242); }.hk { padding-bottom: 56.25%; }.hl { height: 0px; }.hm { filter: blur(20px); }.hn { transform: scale(1.1); }.ho { visibility: visible; }.hp { margin-top: 10px; }.hq { text-align: center; }.ht { box-shadow: rgb(41, 41, 41) 3px 0px 0px 0px inset; }.hu { padding-left: 23px; }.hv { margin-left: -20px; }.hw { line-height: 1.58; }.hx { letter-spacing: -0.004em; }.hy { font-style: italic; }.hz { font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; }.iu { margin-bottom: -0.46em; }.iv { background-repeat: repeat-x; }.iw { background-image: url("data:image/svg+xml;utf8,<svg preserveAspectRatio=\"none\" viewBox=\"0 0 1 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\" stroke=\"rgba(41, 41, 41, 1)\" /></svg>"); }.ix { background-size: 1px 1px; }.iy { background-position: 0px calc(1em + 1px); }.iz { font-weight: 700; }.ja { font-family: medium-content-slab-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; }.jb { font-size: 28px; }.jc { color: rgb(8, 8, 8); }.jd { border: none; }.je { margin-top: 30px; }.jf::before { content: "..."; }.jg::before { letter-spacing: 0.6em; }.jh::before { text-indent: 0.6em; }.ji::before { font-style: italic; }.jj::before { line-height: 1.4; }.jk { max-width: 1000px; }.jl { padding-bottom: 41.3%; }.jm { }.jn { max-width: 779px; }.jo { padding-bottom: 71.887%; }.jp { max-width: 737px; }.jq { padding-bottom: 76.5265%; }.jr { max-width: 1952px; }.js { padding-bottom: 63.9344%; }.jt { max-width: 2046px; }.ju { padding-bottom: 60.8993%; }.jv { padding: 2px 4px; }.jw { font-size: 75%; }.jx > strong { font-family: inherit; }.jy { font-family: Menlo, Monaco, "Courier New", Courier, monospace; }.jz { list-style-type: decimal; }.ka { margin-left: 30px; }.kb { padding-left: 0px; }.km { box-shadow: rgb(230, 230, 230) 0px 0px 0px 1px inset; }.kn { padding: 0px; }.ko { padding: 16px 20px; }.kp { flex-direction: column; }.kq { flex: 1 1 auto; }.ks { font-weight: 600; }.kt { font-size: 18px; }.ku { line-height: 22px; }.kv { max-height: 44px; }.kw { -webkit-line-clamp: 2; }.kx { margin-top: 8px; }.ky { max-height: 40px; }.kz { margin-top: 12px; }.la { width: 160px; }.lb { background-image: url("https://miro.medium.com/max/320/0*ZutAkeob31S-IpOF"); }.lc { background-origin: border-box; }.ld { background-size: cover; }.le { height: 167px; }.lf { background-position: 50% 50%; }.lg { max-width: 100%; }.lh { line-height: 1.12; }.li { letter-spacing: -0.022em; }.ly { margin-bottom: -0.28em; }.me { list-style-type: disc; }.mf { line-height: 1.18; }.mq { margin-bottom: -0.31em; }.mr { will-change: opacity; }.ms { position: fixed; }.mt { width: 188px; }.mu { left: 50%; }.mv { transform: translateX(406px); }.mw { top: calc(133px); }.mz { top: 159px; }.nb { width: 131px; }.nc { padding-bottom: 28px; }.nd { border-bottom: 1px solid rgb(230, 230, 230); }.ne { padding-bottom: 20px; }.nf { padding-top: 2px; }.ng { max-height: 120px; }.nh { -webkit-line-clamp: 6; }.ni { padding: 4px 12px; }.nj { border-color: rgb(235, 48, 29); }.nk:hover { border-color: rgb(199, 49, 30); }.nl:disabled:hover { color: rgb(235, 48, 29); }.nm:disabled:hover { fill: rgb(235, 48, 29); }.nn:disabled:hover { border-color: rgb(235, 48, 29); }.no { flex-direction: row; }.np { padding-top: 28px; }.nq { margin-bottom: 19px; }.nr { margin-left: -3px; }.nx { outline: 0px; }.ny { border: 0px; }.nz { user-select: none; }.oa { cursor: pointer; }.ob > svg { pointer-events: none; }.oc:active { border-style: none; }.od { user-select: none; }.oe:focus { fill: rgb(117, 117, 117); }.of:hover { fill: rgb(117, 117, 117); }.on button { text-align: left; }.oo { opacity: 0.4; }.op { cursor: not-allowed; }.oq { padding-right: 9px; }.oz { margin-top: 40px; }.pa { border-top: 3px solid rgb(235, 48, 29); }.pb { padding: 32px 32px 26px; }.pc { margin-bottom: 25px; }.pe { padding-top: 4px; }.pf { padding-bottom: 10px; }.pg { padding-top: 8px; }.pr { text-decoration: underline; }.ps { flex-wrap: wrap; }.pt { justify-content: flex-start; }.pu { display: inline; }.pv { height: 56px; }.qc { background: transparent; }.qd { outline: none; }.qe::-webkit-inner-spin-button { appearance: none; }.qf::-webkit-inner-spin-button { }.qg::-webkit-inner-spin-button { appearance: none; }.qh::-webkit-inner-spin-button { margin: 0px; }.qi::-webkit-outer-spin-button { appearance: none; }.qj::-webkit-outer-spin-button { }.qk::-webkit-outer-spin-button { appearance: none; }.ql::-webkit-outer-spin-button { margin: 0px; }.qm { width: 375px; }.qn { font: inherit; }.qo { }.qp { }.qq { text-align: start; }.qr::placeholder { color: rgb(117, 117, 117); }.qs { padding-bottom: 1px; }.qt { border-bottom: 1px solid rgb(168, 168, 168); }.qu { line-height: 24px; }.qv { margin-bottom: auto; }.qx { padding: 8px 20px; }.qy { fill: rgb(255, 218, 201); }.qz { background: rgb(235, 48, 29); }.ra:hover { background: rgb(199, 49, 30); }.rb:disabled:hover { background: rgb(235, 48, 29); }.rd { font-size: 13px; }.re { line-height: 16px; }.rf { margin-bottom: 15px; }.rg { margin-top: 5px; }.rh { display: none; }.ri { margin-top: 25px; }.rj { margin-bottom: 8px; }.rk { border-radius: 3px; }.rl { padding: 5px 10px; }.rm { background: rgb(242, 242, 242); }.rn { max-width: 155px; }.rr { top: 1px; }.sf { margin-left: -1px; }.sg { margin-left: -4px; }.so { padding-right: 8px; }.sp { padding-top: 32px; }.sq { border-top: 1px solid rgb(230, 230, 230); }.ss { margin-bottom: 32px; }.st { min-height: 80px; }.sy { width: 80px; }.sz { padding-left: 102px; }.tb { font-size: 14px; }.tc { line-height: 18px; }.td { letter-spacing: 0.05em; }.te { margin-bottom: 6px; }.tf { font-size: 26px; }.tg { line-height: 32px; }.th { max-width: 555px; }.ti { max-width: 450px; }.tk { max-width: 550px; }.tl { padding-top: 24px; }.tm { height: 40px; }.tn { width: 40px; }.to { font-size: 12px; }.tp { line-height: 15px; }.tq { padding-top: 25px; }.ts { background: rgb(255, 255, 255); }.tt { margin-bottom: 40px; }.tu { margin-top: 24px; }.tv { padding-bottom: 16px; }.tw { margin-bottom: 24px; }.vg { flex-grow: 0; }.vh { padding-bottom: 24px; }.vi { max-width: 500px; }.vm { padding-bottom: 8px; }.vx { padding-bottom: 100%; }.wi { padding: 60px 0px; }.wj { background-color: rgba(0, 0, 0, 0.9); }.wl { padding-bottom: 48px; }.wm { border-bottom: 1px solid rgba(255, 255, 255, 0.54); }.wn { margin: 0px -12px; }.wo { margin: 0px 12px; }.wp { flex: 1 1 0px; }.wq:hover { color: rgba(255, 255, 255, 0.99); }.wr:hover { fill: rgba(255, 255, 255, 0.99); }.ws:disabled { color: rgba(255, 255, 255, 0.7); }.wt:disabled { fill: rgba(255, 255, 255, 0.7); }.wu { font-size: 22px; }.wv { line-height: 28px; }.ww { color: rgba(255, 255, 255, 0.98); }.wx { color: rgba(255, 255, 255, 0.7); }.wy { fill: rgba(255, 255, 255, 0.98); }.wz { height: 22px; }.xa { width: 200px; }.xg { margin-right: 16px; }.xh { background-image: url("https://miro.medium.com/max/160/0*ZutAkeob31S-IpOF"); }.xi { user-select: none; }.xj { }.xk::-webkit-inner-spin-button { appearance: none; }.xl::-webkit-inner-spin-button { }.xm::-webkit-outer-spin-button { appearance: none; }.xn::-webkit-outer-spin-button { }.xo { }.xp { padding: 8px 16px; }.xq { top: calc(100vh + 296px); }.xr { opacity: 1; }.xs { transition: opacity 400ms ease 0ms; }.xt { top: 302px; }.xu { top: 106px; }.xv { transition: visibility 0ms ease 400ms; }.xw { top: 0px; }.xx { left: 0px; }.xy { background-color: rgba(0, 0, 0, 0.08); }.xz { z-index: 510; }.ya { transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s; }.yb { width: 414px; }.yc { z-index: 520; }.yd { background-color: white; }.ye { left: 100%; }.yf { }.yg { box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; }.yh { transform: translateX(0px); }.yi { transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s, opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0s; }.yo { padding-bottom: 18px; }.yp { padding: 24px; }.yq { right: -7px; }.yr { padding: 0px 24px; }.ys { animation: 1.2s ease-in-out 0s infinite normal none running k2; }.yt { padding: 32px 0px; }.yu { border-radius: 100%; }.yv { height: 32px; }.yw { width: 32px; }.yx { margin-top: 4px; }.yy { height: 8px; }.yz { width: 120px; }.za { height: 10px; }.zb { width: 90%; }.zc { fill: rgb(61, 61, 61); }.zd:focus { outline: none; }.ze { padding-left: 12px; }.zf { white-space: pre-wrap; }.zg { padding: 5px 0px; }.zh { margin-top: 14px; }.zi { width: 12px; }.zj { padding-right: 4px; }.zk { top: 2px; }.zs { box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 8px; }.zt { padding-top: 0px; }.zu { padding-bottom: 0px; }.zv { transition: padding-top 400ms ease 0s, padding-bottom 400ms ease 0s; }.zw { align-self: flex-end; }.zx { padding: 0px 14px; }.zy { transition: opacity 400ms ease 0s, max-height 400ms ease 0s; }.zz { max-height: 0px; }.aba button { border: none; }.abb { margin-bottom: 20px; }.abc { padding: 14px; }.abd { color: rgb(255, 255, 255); }.abe { fill: rgb(255, 255, 255); }.abf { background: rgb(3, 168, 124); }.abg { border-color: rgb(3, 168, 124); }.abh:hover { background: rgb(1, 143, 105); }.abi:hover { border-color: rgb(1, 143, 105); }.abj:disabled:hover { background: rgb(3, 168, 124); }.abk:disabled:hover { border-color: rgb(3, 168, 124); }.abl { pointer-events: auto; }.abm { padding-bottom: 0%; }.abn { padding-bottom: 80.7353%; }.abo { padding-bottom: 61.3235%; }.abp { padding-bottom: 103.382%; }.abq { padding-bottom: 83.9706%; }.abr { padding-bottom: 100.147%; }.abs { padding-bottom: 71.0294%; }.abt { padding-bottom: 116.324%; }.abu { padding-bottom: 41.9118%; }.d { display: none; }.ag { margin: 0px 64px; }.ed { font-size: 48px; }.ee { margin-top: 0.55em; }.ef { line-height: 60px; }.gb { margin-left: 30px; }.gq { max-width: 1192px; }.gw { margin-top: 56px; }.iq { font-size: 21px; }.ir { margin-top: 2em; }.is { line-height: 32px; }.it { letter-spacing: -0.003em; }.kg { margin-top: 1.05em; }.kl { margin-top: 32px; }.lv { font-size: 36px; }.lw { margin-top: 1.25em; }.lx { line-height: 40px; }.md { margin-top: 0.86em; }.mo { font-size: 26px; }.mp { margin-top: 1.72em; }.nw { margin-right: 5px; }.om { margin-top: 5px; }.oy { padding-left: 6px; }.pp { font-size: 18px; }.pq { line-height: 24px; }.rt { display: inline-block; }.ry { margin-left: 7px; }.rz { margin-top: 8px; }.se { width: 25px; }.sm { padding-left: 7px; }.sn { top: 3px; }.ul { width: calc(100% + 32px); }.um { margin-left: -16px; }.un { margin-right: -16px; }.vc { padding-left: 16px; }.vd { padding-right: 16px; }.ve { flex-basis: 25%; }.vf { max-width: 25%; }.vu { line-height: 22px; }.wg { min-width: 70px; }.wh { min-height: 70px; }.zq { padding-left: 3px; }.zr { top: 3.5px; }.e { display: none; }.ga { margin-left: 30px; }.hr { margin-left: auto; }.hs { text-align: center; }.nv { margin-right: 5px; }.ol { margin-top: 5px; }.ox { padding-left: 6px; }.rs { display: inline-block; }.rw { margin-left: 7px; }.rx { margin-top: 8px; }.sd { width: 25px; }.sk { padding-left: 7px; }.sl { top: 3px; }.zo { padding-left: 3px; }.zp { top: 3.5px; }.f { display: none; }.fz { margin-left: 30px; }.nu { margin-right: 5px; }.ok { margin-top: 5px; }.ov { padding-left: 6px; }.ow { top: 3px; }.rq { display: inline-block; }.ru { margin-left: 7px; }.rv { margin-top: 8px; }.sc { width: 15px; }.sj { padding-left: 3px; }.vl { margin-right: 16px; }.zn { top: 3.5px; }.g { display: none; }.al { height: 56px; }.am { display: flex; }.bj { display: block; }.cv { margin-bottom: 0px; }.cw { height: 110px; }.el { margin-top: 32px; }.em { flex-direction: column-reverse; }.fx { margin-bottom: 30px; }.fy { margin-left: 0px; }.kr { padding: 10px 12px; }.nt { margin-left: 8px; }.oi { margin-top: 2px; }.oj { margin-right: 8px; }.ot { padding-left: 6px; }.ou { top: 3px; }.pd { padding: 24px 24px 28px; }.pw { padding-top: 16px; }.px { height: 130px; }.py { align-items: flex-start; }.pz { flex-direction: column; }.qb { margin-top: 0px; }.qw { margin-top: 15px; }.rp { display: inline-block; }.sb { width: 15px; }.si { padding-left: 3px; }.sr { padding-top: 0px; }.su { margin-bottom: 24px; }.sv { align-items: center; }.sw { width: 102px; }.sx { position: relative; }.ta { padding-left: 0px; }.tj { margin-top: 24px; }.tr { border-top: none; }.tx { padding-bottom: 12px; }.ty { margin-top: 16px; }.vk { margin-right: 16px; }.vv { margin-left: 16px; }.vw { margin-right: 0px; }.wk { padding: 32px 0px; }.xb { width: 140px; }.xc { margin-bottom: 16px; }.xd { margin-top: 30px; }.xe { width: 100%; }.xf { flex-direction: row; }.yj { left: 0px; }.yk { border-top-left-radius: 20px; }.yl { border-top-right-radius: 20px; }.ym { transform: translateY(100%); }.yn { }.zm { top: 3.5px; }.h { display: none; }.ab { margin: 0px 24px; }.dr { font-size: 34px; }.ds { margin-top: 0.56em; }.dt { line-height: 42px; }.ek { margin-top: 32px; }.et { margin-bottom: 0px; }.fv { margin-bottom: 30px; }.fw { margin-left: 0px; }.gj { margin: 0px; }.gk { max-width: 100%; }.gs { margin-top: 40px; }.ia { font-size: 18px; }.ib { margin-top: 1.56em; }.ic { line-height: 28px; }.id { letter-spacing: -0.003em; }.kc { margin-top: 1.34em; }.kh { margin-top: 24px; }.lj { font-size: 26px; }.lk { margin-top: 0.93em; }.ll { line-height: 32px; }.lz { margin-top: 0.67em; }.mg { font-size: 22px; }.mh { margin-top: 1.23em; }.ns { margin-left: 8px; }.og { margin-top: 2px; }.oh { margin-right: 8px; }.or { padding-left: 6px; }.os { top: 3px; }.ph { font-size: 16px; }.pi { line-height: 20px; }.ro { display: inline-block; }.sa { width: 15px; }.sh { padding-left: 3px; }.tz { width: calc(100% + 24px); }.ua { margin-left: -12px; }.ub { margin-right: -12px; }.uo { padding-left: 12px; }.up { padding-right: 12px; }.uq { flex-basis: 100%; }.vj { margin-right: 16px; }.vn { font-size: 15px; }.vo { line-height: 18px; }.vy { min-width: 48px; }.vz { min-height: 48px; }.zl { top: 3.5px; }.i { display: none; }.af { margin: 0px 64px; }.ea { font-size: 48px; }.eb { margin-top: 0.55em; }.ec { line-height: 60px; }.gp { max-width: 1192px; }.gv { margin-top: 56px; }.im { font-size: 21px; }.in { margin-top: 2em; }.io { line-height: 32px; }.ip { letter-spacing: -0.003em; }.kf { margin-top: 1.05em; }.kk { margin-top: 32px; }.ls { font-size: 36px; }.lt { margin-top: 1.25em; }.lu { line-height: 40px; }.mc { margin-top: 0.86em; }.mm { font-size: 26px; }.mn { margin-top: 1.72em; }.pn { font-size: 18px; }.po { line-height: 24px; }.ui { width: calc(100% + 32px); }.uj { margin-left: -16px; }.uk { margin-right: -16px; }.uy { padding-left: 16px; }.uz { padding-right: 16px; }.va { flex-basis: 25%; }.vb { max-width: 25%; }.vt { line-height: 22px; }.we { min-width: 70px; }.wf { min-height: 70px; }.j { display: none; }.ae { margin: 0px 48px; }.dx { font-size: 48px; }.dy { margin-top: 0.55em; }.dz { line-height: 60px; }.gn { margin: 0px; }.go { max-width: 100%; }.gu { margin-top: 56px; }.ii { font-size: 21px; }.ij { margin-top: 2em; }.ik { line-height: 32px; }.il { letter-spacing: -0.003em; }.ke { margin-top: 1.05em; }.kj { margin-top: 32px; }.lp { font-size: 36px; }.lq { margin-top: 1.25em; }.lr { line-height: 40px; }.mb { margin-top: 0.86em; }.mk { font-size: 26px; }.ml { margin-top: 1.72em; }.pl { font-size: 18px; }.pm { line-height: 24px; }.uf { width: calc(100% + 28px); }.ug { margin-left: -14px; }.uh { margin-right: -14px; }.uu { padding-left: 14px; }.uv { padding-right: 14px; }.uw { flex-basis: 50%; }.ux { max-width: 50%; }.vr { font-size: 15px; }.vs { line-height: 18px; }.wc { min-width: 48px; }.wd { min-height: 48px; }.k { display: none; }.ac { margin: 0px 24px; }.du { font-size: 34px; }.dv { margin-top: 0.56em; }.dw { line-height: 42px; }.gl { margin: 0px; }.gm { max-width: 100%; }.gt { margin-top: 40px; }.ie { font-size: 18px; }.if { margin-top: 1.56em; }.ig { line-height: 28px; }.ih { letter-spacing: -0.003em; }.kd { margin-top: 1.34em; }.ki { margin-top: 24px; }.lm { font-size: 26px; }.ln { margin-top: 0.93em; }.lo { line-height: 32px; }.ma { margin-top: 0.67em; }.mi { font-size: 22px; }.mj { margin-top: 1.23em; }.pj { font-size: 16px; }.pk { line-height: 20px; }.uc { width: calc(100% + 24px); }.ud { margin-left: -12px; }.ue { margin-right: -12px; }.ur { padding-left: 12px; }.us { padding-right: 12px; }.ut { flex-basis: 100%; }.vp { font-size: 15px; }.vq { line-height: 18px; }.wa { min-width: 48px; }.wb { min-height: 48px; }.z { display: none; }.mx { transition: opacity 200ms ease 0s; }.my { display: none; }.na { display: none; }</style><article><section class="cx cy cz da aj db dc s"></section><span class="s"></span><div><div class="t v xq de df dg"></div><section class="dh di dj dk dl"><div class="n p"><div class="ab ac ae af ag dm ai aj"><div><h1 id="27fd" class="dn do dp dq b dr ds dt du dv dw dx dy dz ea eb ec ed ee ef eg eh">Building Your Own Observable Part 3: The Observer Pattern and Creational Methods.</h1><div class="ei"><div class="n ej ek el em"><div class="o n"><div><a rel="noopener" href="/@natelapinski?source=post_page-----334eeffb67f0--------------------------------"><img alt="Nate Lapinski" class="s en eo ep" src="https://miro.medium.com/fit/c/96/96/1*xS2XJZStjrQ6yiToZXazoQ.jpeg" width="48" height="48"></a></div><div class="eq aj s"><div class="n"><div style="flex:1"><span class="cf cg er ci eh"><div class="es n o et"><span class="cf cg er ci bl eu ev ew ex ey eh"><a class="cm cn au av aw ax ay az ba bb ez be fa fb" rel="noopener" href="/@natelapinski?source=post_page-----334eeffb67f0--------------------------------">Nate Lapinski</a></span><div class="fc s ap h"><span><button class="cf cg ch ci eh fd r fe ff fg fh fi bb fj fk fl fm fn fo fp fq dc fr fs">Follow</button></span></div></div></span></div></div><span class="cf cg er ci ft"><span class="cf cg er ci bl eu ev ew ex ey ft"><div><a class="cm cn au av aw ax ay az ba bb ez be fa fb" rel="noopener" href="/angular-in-depth/building-your-own-observable-part-3-the-observer-pattern-and-creational-methods-334eeffb67f0?source=post_page-----334eeffb67f0--------------------------------">Aug 11, 2018</a> <!-- -->·<!-- --> <!-- -->6<!-- --> min read</div></span></span></div></div><div class="n fu fv fw fx fy fz ga gb z"><div class="n o"><div class="gc s ap"><button class="cm cn au av aw ax ay az ba bb gd ge be fa fb" aria-label="Share on twitter"><svg width="29" height="29" class="gf"><path d="M22.05 7.54a4.47 4.47 0 0 0-3.3-1.46 4.53 4.53 0 0 0-4.53 4.53c0 .35.04.7.08 1.05A12.9 12.9 0 0 1 5 6.89a5.1 5.1 0 0 0-.65 2.26c.03 1.6.83 2.99 2.02 3.79a4.3 4.3 0 0 1-2.02-.57v.08a4.55 4.55 0 0 0 3.63 4.44c-.4.08-.8.13-1.21.16l-.81-.08a4.54 4.54 0 0 0 4.2 3.15 9.56 9.56 0 0 1-5.66 1.94l-1.05-.08c2 1.27 4.38 2.02 6.94 2.02 8.3 0 12.86-6.9 12.84-12.85.02-.24 0-.43 0-.65a8.68 8.68 0 0 0 2.26-2.34c-.82.38-1.7.62-2.6.72a4.37 4.37 0 0 0 1.95-2.51c-.84.53-1.81.9-2.83 1.13z"></path></svg></button></div><div class="gc s ap"><button class="cm cn au av aw ax ay az ba bb gd ge be fa fb" aria-label="Share on linkedin"><svg width="29" height="29" viewBox="0 0 29 29" fill="none" class="gf"><path d="M5 6.36C5 5.61 5.63 5 6.4 5h16.2c.77 0 1.4.61 1.4 1.36v16.28c0 .75-.63 1.36-1.4 1.36H6.4c-.77 0-1.4-.6-1.4-1.36V6.36z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10.76 20.9v-8.57H7.89v8.58h2.87zm-1.44-9.75c1 0 1.63-.65 1.63-1.48-.02-.84-.62-1.48-1.6-1.48-.99 0-1.63.64-1.63 1.48 0 .83.62 1.48 1.59 1.48h.01zM12.35 20.9h2.87v-4.79c0-.25.02-.5.1-.7.2-.5.67-1.04 1.46-1.04 1.04 0 1.46.8 1.46 1.95v4.59h2.87v-4.92c0-2.64-1.42-3.87-3.3-3.87-1.55 0-2.23.86-2.61 1.45h.02v-1.24h-2.87c.04.8 0 8.58 0 8.58z" fill="#fff"></path></svg></button></div><div class="gc s ap"><button class="cm cn au av aw ax ay az ba bb gd ge be fa fb" aria-label="Share on facebook"><svg width="29" height="29" class="gf"><path d="M23.2 5H5.8a.8.8 0 0 0-.8.8V23.2c0 .44.35.8.8.8h9.3v-7.13h-2.38V13.9h2.38v-2.38c0-2.45 1.55-3.66 3.74-3.66 1.05 0 1.95.08 2.2.11v2.57h-1.5c-1.2 0-1.48.57-1.48 1.4v1.96h2.97l-.6 2.97h-2.37l.05 7.12h5.1a.8.8 0 0 0 .79-.8V5.8a.8.8 0 0 0-.8-.79"></path></svg></button></div><div class="gg s"><div class="gf"><span><a href="https://medium.com/m/signin?actionUrl=%2F_%2Fbookmark%2Fp%2F334eeffb67f0&amp;operation=register&amp;redirect=https%3A%2F%2Fmedium.com%2Fangular-in-depth%2Fbuilding-your-own-observable-part-3-the-observer-pattern-and-creational-methods-334eeffb67f0&amp;source=post_actions_header--------------------------bookmark_preview-----------" class="cm cn au av aw ax ay az ba bb gd ge be fa fb" rel="noopener"><svg width="25" height="25" viewBox="0 0 25 25"><path d="M19 6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14.66h.01c.01.1.05.2.12.28a.5.5 0 0 0 .7.03l5.67-4.12 5.66 4.13a.5.5 0 0 0 .71-.03.5.5 0 0 0 .12-.29H19V6zm-6.84 9.97L7 19.64V6a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v13.64l-5.16-3.67a.49.49 0 0 0-.68 0z" fill-rule="evenodd"></path></svg></a></span></div></div><div class="gh s an"></div></div></div></div></div></div></div></div><div class="gi"><div class="n p"><div class="gj gk gl gm gn go af gp ag gq ai aj"><figure class="gs gt gu gv gw gi gx gy paragraph-image"><div class="gz ha hb hc aj"><div class="cz da gr"><div class="hi s hb hj"><div class="hk hl s"><div class="hd he t u v hf aj bl hg hh"><img alt="Image for post" class="t u v hf aj hm hn aq xv" src="https://miro.medium.com/max/60/1*tVaKEG8ygZL8hePfzyWC4A.jpeg?q=20" width="3264" height="1836"></div><img alt="Image for post" class="xr xs t u v hf aj c" width="3264" height="1836" src="https://miro.medium.com/max/3264/1*tVaKEG8ygZL8hePfzyWC4A.jpeg" srcset="https://miro.medium.com/max/276/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 276w, https://miro.medium.com/max/552/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 552w, https://miro.medium.com/max/640/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 640w, https://miro.medium.com/max/728/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 728w, https://miro.medium.com/max/816/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 816w, https://miro.medium.com/max/904/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 904w, https://miro.medium.com/max/992/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 992w, https://miro.medium.com/max/1000/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 1000w" sizes="1000px"><noscript><img alt="Image for post" class="t u v hf aj" src="https://miro.medium.com/max/6528/1*tVaKEG8ygZL8hePfzyWC4A.jpeg" width="3264" height="1836" srcSet="https://miro.medium.com/max/552/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 276w, https://miro.medium.com/max/1104/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 552w, https://miro.medium.com/max/1280/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 640w, https://miro.medium.com/max/1456/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 728w, https://miro.medium.com/max/1632/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 816w, https://miro.medium.com/max/1808/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 904w, https://miro.medium.com/max/1984/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 992w, https://miro.medium.com/max/2000/1*tVaKEG8ygZL8hePfzyWC4A.jpeg 1000w" sizes="1000px"/></noscript></div></div></div></div><figcaption class="hp hq db cz da hr hs cf cg er ci ft" data-selectable-paragraph="">Observing the Yurikamome line as it passes through Odaiba at night.</figcaption></figure></div></div></div><div class="n p"><div class="ab ac ae af ag dm ai aj"><blockquote class="ht hu hv"><p id="f4f6" class="hw hx hy hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph=""><a href="https://medium.com/angular-in-depth" class="cm fs iv iw ix iy" rel="noopener"><strong class="hz iz"><em class="dp">AngularInDepth</em></strong></a><strong class="hz iz"><em class="dp"> is moving away from Medium. </em></strong><a href="https://indepth.dev/building-your-own-observable-part-3-the-observer-pattern-and-creational-methods/" class="cm fs iv iw ix iy" rel="noopener nofollow"><strong class="hz iz"><em class="dp">This article</em></strong></a><strong class="hz iz"><em class="dp">, its updates and more recent articles are hosted on the new platform </em></strong><a href="https://indepth.dev/" class="cm fs iv iw ix iy" rel="noopener nofollow"><strong class="hz iz"><em class="dp">inDepth.dev</em></strong></a></p></blockquote><p id="8f2a" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">Welcome to part 3 of the <a class="cm fs iv iw ix iy" rel="noopener" href="/@natelapinski/learning-observables-part-1-arrays-14480816eb61">series</a>. In this installment, we’re going to look at RxJS’s take on the Observer pattern, and start implementing an observable from scratch. Our humble Observable will be nowhere near as sophisticated as what’s going on inside of RxJS, but it will give you a good enough understanding of observables so that you can start digging into the <a href="https://github.com/ReactiveX/rxjs" class="cm fs iv iw ix iy" rel="noopener nofollow">RxJS source code</a> to learn more.</p></div></div></section><hr class="ja cg jb jc jd je hq jf jg jh ji jj"><section class="dh di dj dk dl"><div class="n p"><div class="ab ac ae af ag dm ai aj"><p id="501d" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">To understand Observables, it’s important to start with the <a href="http://www.blackwasp.co.uk/Observer.aspx" class="cm fs iv iw ix iy" rel="noopener nofollow">Observer Pattern</a>.</p><figure class="gs gt gu gv gw gi cz da paragraph-image"><div class="gz ha hb hc aj"><div class="cz da jk"><div class="hi s hb hj"><div class="jl hl s"><div class="hd he t u v hf aj bl hg hh"><img alt="Image for post" class="t u v hf aj hm hn aq xv" src="https://miro.medium.com/max/60/1*X8U0qVEx9MRCQb625BHT1w.png?q=20" width="1000" height="413"></div><img alt="Image for post" class="xr xs t u v hf aj c" width="1000" height="413" src="https://miro.medium.com/max/1000/1*X8U0qVEx9MRCQb625BHT1w.png" srcset="https://miro.medium.com/max/276/1*X8U0qVEx9MRCQb625BHT1w.png 276w, https://miro.medium.com/max/552/1*X8U0qVEx9MRCQb625BHT1w.png 552w, https://miro.medium.com/max/640/1*X8U0qVEx9MRCQb625BHT1w.png 640w, https://miro.medium.com/max/700/1*X8U0qVEx9MRCQb625BHT1w.png 700w" sizes="700px"><noscript><img alt="Image for post" class="t u v hf aj" src="https://miro.medium.com/max/2000/1*X8U0qVEx9MRCQb625BHT1w.png" width="1000" height="413" srcSet="https://miro.medium.com/max/552/1*X8U0qVEx9MRCQb625BHT1w.png 276w, https://miro.medium.com/max/1104/1*X8U0qVEx9MRCQb625BHT1w.png 552w, https://miro.medium.com/max/1280/1*X8U0qVEx9MRCQb625BHT1w.png 640w, https://miro.medium.com/max/1400/1*X8U0qVEx9MRCQb625BHT1w.png 700w" sizes="700px"/></noscript></div></div></div></div><figcaption class="hp hq db cz da hr hs cf cg er ci ft" data-selectable-paragraph="">The classical Observer Pattern. Image taken from the original Gang of Four Design Patterns book.</figcaption></figure><p id="f455" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">The concept is pretty straightforward. There is some object containing state that will change over time. <strong class="hz iz">This is known as the subject in the classical Observer Pattern</strong>. All this subject does is accept callback functions from observers, which are objects that want to be notified whenever the subject’s state changes. Whenever such a state change happens, the subject loops through all of the observer callbacks, and invokes them with the new state as an argument.</p><figure class="gs gt gu gv gw gi"><div class="hi s hb"><div class="abn hl s"><iframe src="https://medium.com/media/e5aee205588cbcd83cc4fadb464b1df2" allowfullscreen="" frameborder="0" height="549" width="680" title="A simple subject and observer" class="t u v hf aj" scrolling="auto"></iframe></div></div><figcaption class="hp hq db cz da hr hs cf cg er ci ft">A very simplified example of the classic Observer Pattern. Observers can subscribe to a subject, in a publisher/subscriber setup.</figcaption></figure><p id="e8d4" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">The classic observer pattern has been a staple of web development for many years. However, it has not been without its shortcomings, or its <a href="https://infoscience.epfl.ch/record/148043/files/DeprecatingObserversTR2010.pdf" class="cm fs iv iw ix iy" rel="noopener nofollow">critics</a>.</p><p id="7093" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">For our purposes, it provides no way of containerizing events, meaning we can’t compose streams out of subject events.</p><p id="64b2" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">RxJS improves upon this classical observer pattern by introducing a more robust interface for observers, one that supports not just a method for publishing data (onNext), but also methods for notifying observers of completion, as well as errors.</p><figure class="gs gt gu gv gw gi cz da paragraph-image"><div class="gz ha hb hc aj"><div class="cz da jn"><div class="hi s hb hj"><div class="jo hl s"><div class="hd he t u v hf aj bl hg hh"><img alt="Image for post" class="t u v hf aj hm hn aq xv" src="https://miro.medium.com/max/60/1*yhgvkHOzKZNbFbY-nBGEvQ.png?q=20" width="779" height="560"></div><img alt="Image for post" class="xr xs t u v hf aj c" width="779" height="560" src="https://miro.medium.com/max/779/1*yhgvkHOzKZNbFbY-nBGEvQ.png" srcset="https://miro.medium.com/max/276/1*yhgvkHOzKZNbFbY-nBGEvQ.png 276w, https://miro.medium.com/max/552/1*yhgvkHOzKZNbFbY-nBGEvQ.png 552w, https://miro.medium.com/max/640/1*yhgvkHOzKZNbFbY-nBGEvQ.png 640w, https://miro.medium.com/max/700/1*yhgvkHOzKZNbFbY-nBGEvQ.png 700w" sizes="700px"><noscript><img alt="Image for post" class="t u v hf aj" src="https://miro.medium.com/max/1558/1*yhgvkHOzKZNbFbY-nBGEvQ.png" width="779" height="560" srcSet="https://miro.medium.com/max/552/1*yhgvkHOzKZNbFbY-nBGEvQ.png 276w, https://miro.medium.com/max/1104/1*yhgvkHOzKZNbFbY-nBGEvQ.png 552w, https://miro.medium.com/max/1280/1*yhgvkHOzKZNbFbY-nBGEvQ.png 640w, https://miro.medium.com/max/1400/1*yhgvkHOzKZNbFbY-nBGEvQ.png 700w" sizes="700px"/></noscript></div></div></div></div><figcaption class="hp hq db cz da hr hs cf cg er ci ft" data-selectable-paragraph="">The Observable abstracts away the underlying data stream, and supports a simple interface that an observer can use to consume the stream.</figcaption></figure><figure class="gs gt gu gv gw gi cz da paragraph-image"><div class="gz ha hb hc aj"><div class="cz da jp"><div class="hi s hb hj"><div class="jq hl s"><div class="hd he t u v hf aj bl hg hh"><img alt="Image for post" class="t u v hf aj hm hn aq xv" src="https://miro.medium.com/max/60/1*DVFisKx8Smn22qjO03gTQg.png?q=20" width="737" height="564"></div><img alt="Image for post" class="xr xs t u v hf aj c" width="737" height="564" src="https://miro.medium.com/max/737/1*DVFisKx8Smn22qjO03gTQg.png" srcset="https://miro.medium.com/max/276/1*DVFisKx8Smn22qjO03gTQg.png 276w, https://miro.medium.com/max/552/1*DVFisKx8Smn22qjO03gTQg.png 552w, https://miro.medium.com/max/640/1*DVFisKx8Smn22qjO03gTQg.png 640w, https://miro.medium.com/max/700/1*DVFisKx8Smn22qjO03gTQg.png 700w" sizes="700px"><noscript><img alt="Image for post" class="t u v hf aj" src="https://miro.medium.com/max/1474/1*DVFisKx8Smn22qjO03gTQg.png" width="737" height="564" srcSet="https://miro.medium.com/max/552/1*DVFisKx8Smn22qjO03gTQg.png 276w, https://miro.medium.com/max/1104/1*DVFisKx8Smn22qjO03gTQg.png 552w, https://miro.medium.com/max/1280/1*DVFisKx8Smn22qjO03gTQg.png 640w, https://miro.medium.com/max/1400/1*DVFisKx8Smn22qjO03gTQg.png 700w" sizes="700px"/></noscript></div></div></div></div><figcaption class="hp hq db cz da hr hs cf cg er ci ft" data-selectable-paragraph="">As data arrives on the event stream (represented as a circle), the Observable calls the onNext method its observer.</figcaption></figure><figure class="gs gt gu gv gw gi cz da paragraph-image"><div class="gz ha hb hc aj"><div class="cz da jr"><div class="hi s hb hj"><div class="js hl s"><div class="hd he t u v hf aj bl hg hh"><img alt="Image for post" class="t u v hf aj hm hn aq xv" src="https://miro.medium.com/max/60/1*8JU5aEGgVUAMpf6Fn0ehFw.png?q=20" width="1952" height="1248"></div><img alt="Image for post" class="xr xs t u v hf aj c" width="1952" height="1248" src="https://miro.medium.com/max/1952/1*8JU5aEGgVUAMpf6Fn0ehFw.png" srcset="https://miro.medium.com/max/276/1*8JU5aEGgVUAMpf6Fn0ehFw.png 276w, https://miro.medium.com/max/552/1*8JU5aEGgVUAMpf6Fn0ehFw.png 552w, https://miro.medium.com/max/640/1*8JU5aEGgVUAMpf6Fn0ehFw.png 640w, https://miro.medium.com/max/700/1*8JU5aEGgVUAMpf6Fn0ehFw.png 700w" sizes="700px"><noscript><img alt="Image for post" class="t u v hf aj" src="https://miro.medium.com/max/3904/1*8JU5aEGgVUAMpf6Fn0ehFw.png" width="1952" height="1248" srcSet="https://miro.medium.com/max/552/1*8JU5aEGgVUAMpf6Fn0ehFw.png 276w, https://miro.medium.com/max/1104/1*8JU5aEGgVUAMpf6Fn0ehFw.png 552w, https://miro.medium.com/max/1280/1*8JU5aEGgVUAMpf6Fn0ehFw.png 640w, https://miro.medium.com/max/1400/1*8JU5aEGgVUAMpf6Fn0ehFw.png 700w" sizes="700px"/></noscript></div></div></div></div><figcaption class="hp hq db cz da hr hs cf cg er ci ft" data-selectable-paragraph="">If the stream ever runs out of data forever, the Observable will call the observer’s onCompleted method.</figcaption></figure><figure class="gs gt gu gv gw gi cz da paragraph-image"><div class="gz ha hb hc aj"><div class="cz da jt"><div class="hi s hb hj"><div class="ju hl s"><div class="hd he t u v hf aj bl hg hh"><img alt="Image for post" class="t u v hf aj hm hn aq xv" src="https://miro.medium.com/max/60/1*323OytUAJ6062NcjTqbCgg.png?q=20" width="2046" height="1246"></div><img alt="Image for post" class="xr xs t u v hf aj c" width="2046" height="1246" src="https://miro.medium.com/max/2046/1*323OytUAJ6062NcjTqbCgg.png" srcset="https://miro.medium.com/max/276/1*323OytUAJ6062NcjTqbCgg.png 276w, https://miro.medium.com/max/552/1*323OytUAJ6062NcjTqbCgg.png 552w, https://miro.medium.com/max/640/1*323OytUAJ6062NcjTqbCgg.png 640w, https://miro.medium.com/max/700/1*323OytUAJ6062NcjTqbCgg.png 700w" sizes="700px"><noscript><img alt="Image for post" class="t u v hf aj" src="https://miro.medium.com/max/4092/1*323OytUAJ6062NcjTqbCgg.png" width="2046" height="1246" srcSet="https://miro.medium.com/max/552/1*323OytUAJ6062NcjTqbCgg.png 276w, https://miro.medium.com/max/1104/1*323OytUAJ6062NcjTqbCgg.png 552w, https://miro.medium.com/max/1280/1*323OytUAJ6062NcjTqbCgg.png 640w, https://miro.medium.com/max/1400/1*323OytUAJ6062NcjTqbCgg.png 700w" sizes="700px"/></noscript></div></div></div></div><figcaption class="hp hq db cz da hr hs cf cg er ci ft" data-selectable-paragraph="">Should anything go wrong with the stream, the Observable will call the observer’s onError method.</figcaption></figure><p id="b9bb" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">Note that an observer’s <code class="hj jv jw jx jy b">onNext</code> method can be called many times, but <code class="hj jv jw jx jy b">onError</code> and <code class="hj jv jw jx jy b">onCompleted</code> indicate that no more data will be arriving from the observable.</p><p id="2ea2" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">As a quick aside, observables and subjects are technically different from one another. In RxJS, subjects are “stateful”, in that they maintain a list of subscribers that they multicast data to, similar to the subject in the classical observer pattern. <strong class="hz iz">By contrast, observables are really just functions that set up a context for observation, without holding onto state</strong>. Each observer will see its own execution of the observable. More on this in a later article, as it’s not too important right now.</p></div></div></section><hr class="ja cg jb jc jd je hq jf jg jh ji jj"><section class="dh di dj dk dl"><div class="n p"><div class="ab ac ae af ag dm ai aj"><p id="0a7e" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">Our simple class must support the Observer interface, which means that any observer that subscribes to our observable will provide the following three methods:</p><ol class=""><li id="ea0a" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu jz ka kb eh" data-selectable-paragraph=""><code class="hj jv jw jx jy b">onNext</code> to be called each time our observable emits data</li><li id="7309" class="hw hx dp hz b ia kc ic id ie kd ig ih ii ke ik il im kf io ip iq kg is it iu jz ka kb eh" data-selectable-paragraph=""><code class="hj jv jw jx jy b">onError</code> to be called if an error happens in our observable</li><li id="49a8" class="hw hx dp hz b ia kc ic id ie kd ig ih ii ke ik il im kf io ip iq kg is it iu jz ka kb eh" data-selectable-paragraph=""><code class="hj jv jw jx jy b">onCompleted</code> to be called when our observable is done producing data</li></ol><p id="66c4" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">For reference, the official Observer interface can be found <a href="https://github.com/ReactiveX/rxjs/blob/master/src/internal/types.ts#L79" class="cm fs iv iw ix iy" rel="noopener nofollow">here</a>.</p><p id="bdd7" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">A simple scenario looks like this:</p><figure class="gs gt gu gv gw gi"><div class="hi s hb"><div class="abo hl s"><iframe src="https://medium.com/media/b0934993f1fa90c210e71bd76f98230c" allowfullscreen="" frameborder="0" height="417" width="680" title="Simple observable example" class="t u v hf aj" scrolling="auto"></iframe></div></div><figcaption class="hp hq db cz da hr hs cf cg er ci ft">Note that line 11 returns a subscription object that an observer can use to unsubscribe from the observable.</figcaption></figure><p id="660f" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">Don’t concern yourself with the details too much just yet, we will implement everything in that example by hand shortly.</p><p id="5d73" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">The Observer interface can be thought of as an analog to the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols" class="cm fs iv iw ix iy" rel="noopener nofollow">Iterator interface</a>. <strong class="hz iz">While iterators let a consumer <em class="hy">pull</em> data from a source, observers let a source <em class="hy">push</em> data to an observer, via </strong><code class="hj jv jw jx jy b"><strong class="hz iz">onNext</strong></code><strong class="hz iz">. </strong>Similar to how Iterators can communicate error and completion information, our Observer has <code class="hj jv jw jx jy b">onError</code> and <code class="hj jv jw jx jy b">onCompleted</code> . In many ways, the two are symmetric. Jafar Husain has a <a href="https://www.slideshare.net/InfoQ/asynchronous-programming-at-netflix" class="cm fs iv iw ix iy" rel="noopener nofollow">great talk</a> on the symmetry between the Iterator pattern, and the Observer pattern. <a href="https://youtu.be/lil4YCCXRYc?t=1555" class="cm fs iv iw ix iy" rel="noopener nofollow">He also talks about it here</a>.</p><p id="a14c" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">Jafar Husain is an excellent resource for <a href="https://www.youtube.com/watch?v=dwP1TNXE6fc" class="cm fs iv iw ix iy" rel="noopener nofollow">understanding reactive programming</a> and observables. He’s also championing the <a href="https://github.com/tc39/proposal-observable" class="cm fs iv iw ix iy" rel="noopener nofollow">TC39 proposal to add observables to Javascript</a>.</p><p id="4df3" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">The first thing to do is create the Observable class.</p><figure class="gs gt gu gv gw gi"><div class="hi s hb"><div class="abp hl s"><iframe src="https://medium.com/media/05b80c9e7f5ceb425bf9dab87de73d89" allowfullscreen="" frameborder="0" height="703" width="680" title="A simple Observable class" class="t u v hf aj" scrolling="auto"></iframe></div></div><figcaption class="hp hq db cz da hr hs cf cg er ci ft">An Observable simply provides a way for observers to subscribe to it.</figcaption></figure><p id="d8a6" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">The class has two functions, a public <code class="hj jv jw jx jy b">subscribe</code>, and an internal <code class="hj jv jw jx jy b">_subscribe</code>. This is pretty similar to how Observable is actually implemented in <a href="https://github.com/ReactiveX/rxjs/blob/master/src/internal/Observable.ts#L36" class="cm fs iv iw ix iy" rel="noopener nofollow">RxJS</a>. The public method is a common way for observers to subscribe by providing <code class="hj jv jw jx jy b">onNext</code>, <code class="hj jv jw jx jy b">onError</code>, and <code class="hj jv jw jx jy b">onCompleted</code> functions. The internal <code class="hj jv jw jx jy b">_subscribe</code> method decides when to call those methods, and will be dependent on the implementation details of the underlying stream being observed, as we will see shortly when we implement <code class="hj jv jw jx jy b">from</code> and <code class="hj jv jw jx jy b">fromEvent</code>.</p><p id="e474" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph=""><strong class="hz iz">By itself, this Observable doesn’t do anything</strong>. It just provides the machinery for setting up observation for observers and their onNext, onError, and onComplete handlers. In order to do that, we need to add some creational methods. We’ll implement three, <code class="hj jv jw jx jy b">of</code>, <code class="hj jv jw jx jy b">from</code>, and <code class="hj jv jw jx jy b">fromEvent</code>.</p><p id="6d5c" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">But before we do that…</p><p id="ea00" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph=""><strong class="hz iz">A quick note on RxJS 6, and pipeable operators</strong></p><p id="f063" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">In the old days of RxJS (v5 and below), creational methods and operators were all put on the Observable prototype. Starting with RxJS 6, this has all changed. <strong class="hz iz">Operators are no longer placed on the Observable prototype, which leads to better tree-shaking, smaller bundle sizes, and better interoperability with third-party libraries</strong>. The chaining syntax for composition, such as:</p><p id="bec0" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph=""><code class="hj jv jw jx jy b">Observable.of(1,2,3).map(x =&gt; x + 1).filter(x =&gt; x &gt; 2);</code></p><p id="0fdc" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">has also been replaced in favor of using the <code class="hj jv jw jx jy b">pipe</code> operator for composition:</p><p id="f6c3" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph=""><code class="hj jv jw jx jy b">of(1,2,3).pipe(map(x =&gt; x + 1), filter(x =&gt; x &gt; 2));</code></p><p id="5388" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">Conceptually, nothing much has really changed, so we’re going to stick to the RxJS 5 style of chaining operators on Observable prototype for composition, just for the sake of simplicity. In a later article, we’ll break things up, and implement a <code class="hj jv jw jx jy b">pipe</code> operator a la RxJS 6. <br>If you’d like to know more about RxJS 6 and pipeable (lettable) operators, head over to the <a href="https://blog.angularindepth.com/rxjs-understanding-lettable-operators-fe74dda186d3" class="cm fs iv iw ix iy" rel="noopener nofollow">RxJS section of AngularInDepth</a>.</p><p id="e4af" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">Now, with that out of the way, let’s implement a creational method, and write some tests for it. You can follow along with this repository:</p><div class="kh ki kj kk kl km"><a href="https://github.com/nathan-lapinski/build-your-own-observable" target="_blank" rel="noopener nofollow"><div class="kn n ap"><div class="ko n kp p kq kr"><h2 class="cf ks kt ku bl kv ev ew kw ey eh">nathan-lapinski/build-your-own-observable</h2><div class="kx s"><h3 class="cf cg er ci bl ky ev ew kw ey ft">Learn the power of RxJS Observables by implementing your own simple observable class! This repository supports my talk…</h3></div><div class="kz s"><h4 class="cf cg ch ci bl ky ev ew kw ey ft">github.com</h4></div></div><div class="la s"><div class="lb s lc ld le la lf lg km"></div></div></div></a></div><p id="139c" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph=""><strong class="hz iz">Observable.of</strong></p><p id="d165" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">This method takes in some arguments, and simply returns an observable that emits each of those values one by one, then completes. Here’s the code:</p><figure class="gs gt gu gv gw gi"><div class="hi s hb"><div class="abq hl s"><iframe src="https://medium.com/media/ae798b389feca0028d4b867b6b6bc5d7" allowfullscreen="" frameborder="0" height="571" width="680" title="Observable of" class="t u v hf aj" scrolling="auto"></iframe></div></div><figcaption class="hp hq db cz da hr hs cf cg er ci ft">Observable.of() calls onNext for each of its arguments, then completes.</figcaption></figure><p id="5f60" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">Notice how on line 6, we start by returning a new Observable. This is a very common pattern that we will see over and over again when implementing this Observable class. <strong class="hz iz">An Observable operation must always return a new Observable, otherwise, composition will not be possible</strong>. For instance, if <code class="hj jv jw jx jy b">Observable.of</code> did not return an Observable, then we would not be able to do things like <code class="hj jv jw jx jy b">Observable.of(5).map(x =&gt; x * 2)</code> because <code class="hj jv jw jx jy b">map</code> expects an Observable in order to be callable. It’d be like if <code class="hj jv jw jx jy b">Array.prototype.filter</code> didn’t return an array, then things like <code class="hj jv jw jx jy b">[1,2,3].filter(x =&gt; x &gt; 1).map(x =&gt; x * 2)</code> would break, because you’d be trying to call <code class="hj jv jw jx jy b">map</code> on something other than an array.</p><p id="2a6f" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">Let’s write a couple of unit tests for <code class="hj jv jw jx jy b">of</code> and see how it does. As a reference, here are the <a href="https://github.com/ReactiveX/rxjs/blob/stable/spec/observables/of-spec.ts" class="cm fs iv iw ix iy" rel="noopener nofollow">official RxJS 5 tests</a>.</p><figure class="gs gt gu gv gw gi"><div class="hi s hb"><div class="abr hl s"><iframe src="https://medium.com/media/9752107174eac8b6e27c630d3f6eddd4" allowfullscreen="" frameborder="0" height="681" width="680" title="observable of unit tests" class="t u v hf aj" scrolling="auto"></iframe></div></div></figure><p id="68f3" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph=""><code class="hj jv jw jx jy b">Of</code> is pretty simple. By default, its execution is going to be synchronous once subscribe is called, so the <code class="hj jv jw jx jy b">unsubscribe</code> method will likely never be called. However, we supply one just in case.</p><p id="dec7" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">Let’s take a look at a similar method, <code class="hj jv jw jx jy b">from</code>, which consumes an iterable.</p><p id="246d" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph=""><strong class="hz iz">Observable.from</strong></p><p id="b3a4" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph=""><code class="hj jv jw jx jy b">from</code> accepts an iterable, and fires onNext for each element.</p><figure class="gs gt gu gv gw gi"><div class="hi s hb"><div class="abs hl s"><iframe src="https://medium.com/media/2b34ea867bfa8ee9a1c23531857f300c" allowfullscreen="" frameborder="0" height="483" width="680" title="Observable.from" class="t u v hf aj" scrolling="auto"></iframe></div></div></figure><p id="b90c" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">Nothing too crazy here. We use a <code class="hj jv jw jx jy b">for...of</code> loop to consume the iterable. Here are some tests:</p><figure class="gs gt gu gv gw gi"><div class="hi s hb"><div class="abt hl s"><iframe src="https://medium.com/media/cacbd5fe34374ab0c311dbd05aad68d3" allowfullscreen="" frameborder="0" height="791" width="680" title="Tests for observable.from" class="t u v hf aj" scrolling="auto"></iframe></div></div></figure><p id="02fe" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">Last but certainly not least, let’s build <code class="hj jv jw jx jy b">fromEvent</code>.</p><p id="037d" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph=""><strong class="hz iz">Observable.fromEvent</strong></p><p id="3a34" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph=""><code class="hj jv jw jx jy b">fromEvent</code> is exciting since it will be our first asynchronous stream. We’ll implement a simplified version which only deals with DOM events, although RxJS’ implementation supports any event source which has <code class="hj jv jw jx jy b">addListener</code> and <code class="hj jv jw jx jy b">removeListener</code> style methods.</p><figure class="gs gt gu gv gw gi"><div class="hi s hb"><div class="abu hl s"><iframe src="https://medium.com/media/f3b0588f4bb813fd2376d91335272ba5" allowfullscreen="" frameborder="0" height="285" width="680" title="fromEvent imp" class="t u v hf aj" scrolling="auto"></iframe></div></div></figure><p id="4c15" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">We take a source DOM element, as well as the name of an event. We then use the browser’s <code class="hj jv jw jx jy b">addEventListener</code> and <code class="hj jv jw jx jy b">removeEventListener</code> functions to manage that subscription.</p></div></div></section><hr class="ja cg jb jc jd je hq jf jg jh ji jj"><section class="dh di dj dk dl"><div class="n p"><div class="ab ac ae af ag dm ai aj"><h1 id="b6d4" class="lh li dp cf ks lj lk ll lm ln lo lp lq lr ls lt lu lv lw lx ly eh" data-selectable-paragraph="">Summary</h1><ul class=""><li id="99a3" class="hw hx dp hz b ia lz ic id ie ma ig ih ii mb ik il im mc io ip iq md is it iu me ka kb eh" data-selectable-paragraph="">Observables are lazy. They don’t emit values until they are subscribed to (unless they are <em class="hy">hot observables. </em>More on that later<em class="hy">).</em></li><li id="ccac" class="hw hx dp hz b ia kc ic id ie kd ig ih ii ke ik il im kf io ip iq kg is it iu me ka kb eh" data-selectable-paragraph="">RxJS improves on the classical Observer pattern by adding methods for error and completion, as well as enabling composition.</li><li id="ce4c" class="hw hx dp hz b ia kc ic id ie kd ig ih ii ke ik il im kf io ip iq kg is it iu me ka kb eh" data-selectable-paragraph="">Observers have <code class="hj jv jw jx jy b">onNext</code>, <code class="hj jv jw jx jy b">onError,</code> and <code class="hj jv jw jx jy b">onComplete</code> methods</li></ul><p id="81cb" class="hw hx dp hz b ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it iu dh eh" data-selectable-paragraph="">That’s it for this article. In the next article we’ll dig into operators such as <code class="hj jv jw jx jy b">map</code> and <code class="hj jv jw jx jy b">filter</code>.</p><h2 id="3f6e" class="mf li dp cf ks mg mh ic mi mj ig mk ml ik mm mn io mo mp is mq eh" data-selectable-paragraph="">Part 4: <a class="cm fs iv iw ix iy" rel="noopener" href="/@natelapinski/build-your-own-observable-part-4-map-filter-take-and-all-that-jazz-40388e2ab2b3">Operators</a></h2></div></div></section></div></article>