Typedream Mobile V2: Highlight Content and List Products using Cards

https://api.typedream.com/v0/app/collection_content/38894b8b-8fe0-458c-86df-c06c09f3132a_7a8fb22a-0b7c-4aa6-9e5a-82fe0c9cf9ea_collection_rich_content.json

https://api.typedream.com/v0/app/collection_content/38894b8b-8fe0-458c-86df-c06c09f3132a_7a8fb22a-0b7c-4aa6-9e5a-82fe0c9cf9ea_published_collection_rich_content.json

How Link in Bios Prevent User Success According to Creators

https://api.typedream.com/v0/app/collection_content/43b8413b-da0d-4e86-bbaa-aeecccace17e_7a8fb22a-0b7c-4aa6-9e5a-82fe0c9cf9ea_collection_rich_content.json

https://api.typedream.com/v0/app/collection_content/43b8413b-da0d-4e86-bbaa-aeecccace17e_7a8fb22a-0b7c-4aa6-9e5a-82fe0c9cf9ea_published_collection_rich_content.json

Typedream Mobile Week 8: Social Icons Options, Edit, Save & Publish

https://api.typedream.com/v0/app/collection_content/29c87503-860b-48b0-b36b-abd7b80c6853_7a8fb22a-0b7c-4aa6-9e5a-82fe0c9cf9ea_collection_rich_content.json

https://api.typedream.com/v0/app/collection_content/29c87503-860b-48b0-b36b-abd7b80c6853_7a8fb22a-0b7c-4aa6-9e5a-82fe0c9cf9ea_published_collection_rich_content.json

Typedream Mobile Week 4: Cropping Images to Video Background

https://api.typedream.com/v0/app/collection_content/91fcccde-97af-436a-b279-9393db6a1977_7a8fb22a-0b7c-4aa6-9e5a-82fe0c9cf9ea_collection_rich_content.json

https://api.typedream.com/v0/app/collection_content/91fcccde-97af-436a-b279-9393db6a1977_7a8fb22a-0b7c-4aa6-9e5a-82fe0c9cf9ea_published_collection_rich_content.json

Thoughts on The Current State of "Link in Bio" Websites

https://api.typedream.com/v0/app/collection_content/48ca1b01-199c-4683-846e-648cf31d8ab5_7a8fb22a-0b7c-4aa6-9e5a-82fe0c9cf9ea_collection_rich_content.json

https://api.typedream.com/v0/app/collection_content/48ca1b01-199c-4683-846e-648cf31d8ab5_7a8fb22a-0b7c-4aa6-9e5a-82fe0c9cf9ea_published_collection_rich_content.json

Building Typedream’s Mobile Version - 2 Weeks Progress

https://api.typedream.com/v0/app/collection_content/8f719cae-616a-48ff-b503-184d1f5183eb_7a8fb22a-0b7c-4aa6-9e5a-82fe0c9cf9ea_collection_rich_content.json

https://api.typedream.com/v0/app/collection_content/8f719cae-616a-48ff-b503-184d1f5183eb_7a8fb22a-0b7c-4aa6-9e5a-82fe0c9cf9ea_published_collection_rich_content.json

Typedream Mobile

thoughts

TikTok

Twitter ->

Hi, I'm Putri

Sharing my progress, learnings, and behind-the-scenes process of building and designing a Typedream's Mobile Version.

Name

SyncBlock-b4

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="//embed.typeform.com/next/embed.js"></script>

<script>
  let links = document.querySelectorAll("a[data-analytics]");
  for (var i = 0; i < links.length; i++) {
      links[i].addEventListener('click', handleLinkEvent);
      links[i].addEventListener('auxclick', handleLinkEvent);
  }

  function handleLinkEvent(event) {
      var link = event.target;
      var middle = event.type == "auxclick" && event.which == 2;
      var click = event.type == "click";
      while (link && (typeof link.tagName == 'undefined' || link.tagName.toLowerCase() != 'a' || !link.href)) {
          link = link.parentNode;
      }
      if (middle || click) {
          let attributes = link.getAttribute('data-analytics').split(/,(.+)/);
          let events = [JSON.parse(attributes[0]), JSON.parse(attributes[1] || '{}')];
          plausible(...events);
      }
      if (!link.target) {
          if (!(event.ctrlKey || event.metaKey || event.shiftKey) && click) {
              setTimeout(function () {
                  location.href = link.href;
              }, 150);
              event.preventDefault();
          }
      }
  }
</script>

<script>

  window.onload = () => {
    const collections = document.querySelectorAll("div.slate-collection");
    console.log("Col", collections)
    setTimeout(() => {
     collections.forEach((col) => {
        const divs = col.querySelectorAll('div')
        divs?.forEach((div) => {
            if (div.textContent == "Show more") {
                div.innerHTML = "Load more" + `<svg viewBox="0 0 16 16" height="18" width="18" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="_1wmk2022"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>`
            }
        })
    })
    }, 100)
   
  }
</script>

Building Typedream's Mobile Version

Putri Karunia