Hello World
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
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:
- ui.jasony.xyz
- meet.jasony.xyz
- blog.jasony.xyz - for when this eventually becomes its own site.