Stream

I have this little shortcut that takes an URL, gets HTML of the page, takes a screenshot, tags it based off some heuristics and saves it to Notion. The most frustrating part has been to use my trackpad to click done. Well, apparently you can press fn + return or 🌐 + return to do it! And no, ⌘ + return or just return doesn’t work here.

Side note: Accepting text replacement on MacOS doesn’t happen with tab or return; it happens with space.

Today I learnt that Tailwind doesn’t automatically scale base font sizes based off screen or viewport sizes. Sure there are plugin options and complicated stuff, but I am not a front end wizard, and adding this to my global.css helped. You check out the difference in font size for this website on mobile and desktop.

html {
    font-size: 14px;
    @media screen(sm) {
      font-size: 16px;
    }
  }

If you are like me and use CapsLock as your hyperkey and sometimes wonder why it didn’t get triggered, apparently there is a built in delay. You can turn it off by using the following command in your terminal.

hidutil property --set '{"CapsLockDelayOverride":0}'

TIL: You can set an accent color in CSS and it magically updates across your HTML user-interface controls! Just one line: accent-color and your whole app gets a color refresh!

Just like this →

body {
  accent-color: #ffc0cb;
}

Below are test html iframes with different accent colors

For some time, I had Kiko card on my list of apps that I would recommend to anyone . Then I decided to download it on the teeny tiny iOS device I have — iPhone SE3 for the sole purpose of airtag tracking and using Mela. And while it is nice, the lifetime plan is pretty expensive at $30 for what is basically a text → image app (pretty similar to Typeshare). And while the split text is pretty nice, it is “not intelligent”, aka it splits more poorly than LaTeX does, which isn’t a compliment. I do love the options bar though, and it renders really pretty images, so if the free plan templates are enough for you, give it a shot.

It was Sunday, and for the first time since November when I started working on Webtrotion , I decided to run npm run format. This would ensure the code was properly formatted rather than the mess it had become after my extensive changes.

When I saw the beautifully formatted code, I thought, "What if I launch it on Product Hunt?" To be clear, this wasn't my ideal first launch on Product Hunt, the first time I had put much more effort in, but ended up not launching in the end (the failed launch tweet that I had to specifically ask for removal).

Look at those screenshots (on larger screens only)!

For Webtrotion , the entire process, from the idea of launching to actually doing it, took about four hours with effort ranging from 5 to 15 minutes. Incredibly, I woke up this afternoon to find myself in the top 15 for the day with 100 upvotes, and I'm still in disbelief about how it happened. Some comments and reposts on my Twitter post definitely helped.

It's astonishing how something I worked on for myself and decided to launch in a matter of 15 minutes, with hastily scraped together screenshots annotated using Shottr , ended up being such an amazing moment compared to a launch I had prepared and planned for. I guess one of the main differentiating factors is the freedom I felt. This was an open-source GitHub repo with no money to be made, no Lemonsqueezy link, and no tiers—just a passion project. It solidifies the one thing I know about myself: passion projects and figuring stuff out drive me more than money. Wanting something often cripples me, but because Webtrotion is a free-for-all niche project, I had nothing to lose and everything to gain. And I gained 😊.

Support me on product hunt!

One reason I believe I was having trouble getting pages indexed was due to the DOM size. This assumption is based on two observations: (a) when I had the same site in Quatro, it was much easier to get indexed; and (b) Notion returns a very shell-based HTML to Google's crawler (no images, colors, or icons). Most of my pages are stuck in "Discovered - currently not indexed." While I can't guarantee this will help, one major factor contributing to the large DOM size was the popovers I was creating.

So, I asked Claude and GPT-4, and they told me about the <template> tag. I never knew about it before, but it reduced the DOM size from around 2000 to about 1200 (see here ). Not sure if it would make a difference, but a smaller DOM size always helps!

So, Notion's got these new site versions, right? And now we gotta think about whether to stick with Notion or go for something external. Let's break it down.

First up, pricing and domains. You need a Plus plan for custom domains, which is free for education but costs extra otherwise. Notion charges you $8 for the custom domain thing, and you get five sites or however many domains you want. Sounds cool, but it might be a pain if you're trying to host a bunch of project sites with custom domains. Webtrotion , works with Notion's free plan. You can host a site from a single database on GitHub Pages for free, which is neat but has its limits. And you can host on subpaths as well, aka, example.com/blog.

Notion sites are great if you want sub-pages inside posts, inline databases, table row colors, cropped images, post display options (Webtrotion has either a stream or a list view) or those fancy new preview cards. Webtrotion can't do that stuff unless you get into some complicated scraping business. But here's where Webtrotion shines: consistent URLs (Notion's URLs go crazy if you change titles), custom tag pages, no unnecessary property visibility, better custom headers, custom persistent footers, floating table of contents on mobile, stream view, custom styling, theming and colors, add html embeds, actually useful (sortable and searchable) simple tables and it can pull out references, block mentions, post comments using giscus (you need to be signed into Notion to comment), and even make RSS feeds. Oh, and it's got this cool Shiki transform for code blocks that I added recently.

When it comes to hosting and SEO, Webtrotion on GitHub Pages can be a bit iffy with Google indexing. Notion's got the upper hand here with their new Google Analytics and SEO stuff. But Webtrotion auto-generates those social media (OG) sharing images, while with Notion, you gotta do it manually every time. Update-wise, Notion sites are instant. Webtrotion on GitHub? Every eight hours, but you can tweak that to be 10 minutes, but not instant.

So, why am I sticking with Webtrotion? Because I want and prefer traditional website, and using Notion as my CMS. I want to be able to provide people with a URL and know where it lands, not having to worry about link rot, or add redirects, and change some fonts, pin posts etc. But honestly, it depends on what you need. I wish someday Notion lets us embed blocks into public websites. That'd be the best of both worlds.

MaxFocus is a new-ish extension focussing on creating link previews on any link you hover on. It works on apps that do not allow for iframe embeds (like Notion), and hence is different than the majority extensions out there. You really do not need the PRO option with this one, unless you really want AI summaries of the page, but I can usually skim the page faster than the AI can generate a good summary of. The looks and feel are customizable and you can make it look just like Arc, which is a feature that I always missed when I switched back to Chrome.

The features setting is a bit messy, but this quick guide should probably help.

And this is how the popup looks like

Something you might find frustrating is, you cannot access right click menu inside this popup. When I open articles like these, I often want to save them to reader. But because clicking on the top link opens it in a new tab, and I cannot access right click to use the Save to Reader option, I often end up needing to copy link address and then saving it in Reader. I wish the share option copied or provided MacOS or custom share menu than the QR code it has at the moment.

Sidenote Jun 17, 2024: Chrome is testing native Link Previews too, and it would be fun to see what they entail

This is what the native Chrome link previews look like. They are basically a headless window, always on bottom right, if you click on them you open the site on a new tab. Not a huge fan at the moment.

If you miss the vertical tabs from Arc, check out the modded Polychrome extension for the same utility Give Your Chrome the Vertical Tabs It Deserves!

So, like everyone else, I have too wandered down the roads of using doodle, when2meet, zcal and all other 800 alternatives to the problem. Until 5 months back that is, when I found, schej.it; and trust me, it is the best app ever (in my opinion) for finding a time to meet. Allows you to overlay your google calendar, restrict participant visibility, send google calendar invite based on the decided time, everything you can think of.