Back to Blog

Hello World

Mar 30 · 3min

Batman

Hello there, I have been procrastinating setting up a personal site since the first year of university and now in my last semester I have finally bought the domain so I have to do it ¯\_(ツ)_/¯

Why

In the past year somehow my surname has been turned into a unanymous adjective for blubbering absolute nonsense, this felt like a good opportunity to start a blog and hence a personal site.

What

I'm gonna use this space as my sandbox for all sorts of dev stuff, experiments, and to share cool things I stumble upon. But meanwhile in my last semester, I am currently busy @ rolodeck a platform made for founders, by founders.

Rolodeck

It has been odd to take helm of how and what to build at rolo, so I thought I would share a little on my most recent feature.

A complete revamp of the marketplace

On load, the hero section automatically plays a video of the company through an embed YouTube link. To pre-load the other videos in the array, I had to 'trick' the YouTube player into loading the next few frames, so the user would not have to wait for a spinner before these frames are freshly loaded in.

  useEffect(() => {
    // Preload the video
    if (iframeRef.current) {
      iframeRef.current.contentWindow?.postMessage(
        JSON.stringify({
          event: 'command',
          func: 'playVideo',
        }),
        '*'
      )
      if (!autoPlayFirst) {
        setTimeout(() => {
          iframeRef.current?.contentWindow?.postMessage(
            JSON.stringify({
              event: 'command',
              func: 'pauseVideo',
            }),
            '*'
          )
        }, 1000)
      }
    }
  }, [autoPlayFirst])
  • Forcing all videos to play so frames would be loaded in first load.
  • Pausing the video after 1 second so the user would not have to wait for the spinner.
  • The end result is a (simpler) way to preload and autoplay videos much like NetFlix's hero banners.

Overall, I am quite happy with result for the amount of effort we put in (at least for this video-thumbnail component). The hover card effect was created with createPortal() though I am not entirely pleased with the results.

The rest of my time were spent on improving the filtering, ensuring that our query does take bloody long to load and of course a totally unnecessary but really cool lookin loading spinner (filled with all the swisshhh swisshh animations)

GIF

Demo

Personal Site

This was supposed to be a weekend project, but I ended up spending a little more than 2 weeks on and off for this site. Holding back myself on spamming as many prebuilt components as possible but this is where I think I will be satisfied (for now). Anyway, the site itself is built with Next, but all markdown content under /blog is rendered with MDX.

Have also been trying to configure my dev-tools to make it more personalized, if anyone is interested: config

What's next

Hopefully automating this website more, using a markdown editor for example for these blog posts, dynamically fetching certifications, job experience I have etc. If you ever need a site just fork and submit a YC application /s. Some subdomains for projects I have in mind:

  1. ui.jasony.xyz
  2. meet.jasony.xyz
  3. blog.jasony.xyz - for when this eventually becomes its own site.