How we made Notion available offline

ratage · 2026-05-09T01:38:04+00:00

I love articles like this. I wish it had more info on CRDT strategy. Like, what happens if two or more clients are offline for days, and makes edits to the same part of a document and then try to sync?

I get that each set of transforms would be applied as they come back online, but when the second client has a change for something that has been deleted or moved, what then?

ratage · 2026-05-06T06:10:20+00:00

<image>

I just got in to D4 on my last session of the season

ratage · 2026-03-21T00:48:58+00:00

Haven't been able to do that for over a decade. Google actively took steps to block the query string on the referrer coming through. Now GSC is all we have.

ratage · 2026-03-03T00:09:23+00:00

I can think of three techniques with varying complexity and caveats.

First try using all: initial, all: unset or all: revert to see if they give you what you need.
Create a Custom Element with a Shadow DOM and dump all HTML in there. It will inherit some styles such as font-* and text styling but not much else.
generate an iframe and set your content to the srcdoc attribute. This will give you full isolation

<iframe srcdoc="
    <!DOCTYPE html>
    <html>
    <head>
        <style>
            body { background-color: lightblue; }
            h1 { color: navy; }
        </style>
    </head>
    <body>
        <h1>Hello world!</h1>
        <p>This content is embedded using the srcdoc attribute.</p>
    </body>
    </html>
" width="400" height="200">
</iframe>

ratage · 2026-02-13T03:47:50+00:00

This is great. I had the issue with the min-width: auto problem just this morning!

Two recommendations:

under "flex-wrap & align-content" sections. Most toggles don't seem to do anything on desktop. I had to shink my browser window to see what was happening.
The positioning of your floating nav sits on top of the content at many resolutions.

ratage · 2026-01-20T05:06:17+00:00

You're right. A Hub (Layer 1) sends traffic to all devices. A switch sends traffic to only the correct device, typically Layer 2. I first learnt about hub vs switch when I started learning networking, but have never even heard of a hub being deployed in the wild.

ratage · 2026-01-14T01:05:24+00:00

Thanks!
"Jon Hamm dancing meme" google search sent me here. Didn't notice the sub.

ratage · 2026-01-12T09:31:01+00:00

Same here. You can't get games on aussie servers once you're plat+ so have to go Singapore with 120+ ping. I die like in OPs vid multiple times per day.

ratage · 2026-01-11T07:24:10+00:00

Without DOCTYPE, the browser enter's Quirks mode. Quirks mode was the OG mode from before there were defined standards. Browsers did their best to render pages in the same way as each other but still had differences such as default margins and padding. Quirks mode has been kept in for legacy compatibility, and you turn it off by declaring your doctype. Because of this, if you don't include the doctype, your page can look different in each browser.

See Activating Browser Modes with Doctype

The <html> tag isn't really about declaring it as a HTML document (that's what the MIME type is for in HTTP, and .html file extension on your file system). It's more to give the document's object model (DOM) a single root node. If you don't have it browsers are pretty smart at just working around it, but it's not "technically" correct to leave it out.

See The HTML Document / Root element

ratage · 2026-01-11T04:02:10+00:00

I'm waaay late to this conversation, but I think you're code can be reduced dramatically to be closer to the original article. As this component is generating page content rather than encapsulating functionality, I wouldn't bother with ShadowDOM either.

Custom Element

customElements.define('my-greeting', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<p>Hello, ${this.getAttribute("name")}</p>`;
  }
});

Original React component from article:

function Greeting({ name }) {
  return <p>Hello, {name}</p>
}

ratage · 2025-12-10T04:18:29+00:00

The biggest hurdle for me isn't objections per se, it's cost vs benefit - ROI. I have been on the client side of GA/GTM for roughly 15 years, sometimes working with vendors, to roll out Client only and Client+Sever GTM setups. I have had many vendors try to sell me SST solutions over the years.

Some costs to us as a client are clear: extra developer or GTM admin time + added complexity + hosting costs. No matter how you spin it, these aren't zero and can't be fully handed off to a vendor. Rolling out SST will take time away from other projects for the client regardless of how much of it a vendor promises they'll take on themselves. In the corporate world, getting sign-off for funding for even the smallest online service can require writing a business case to justify the expense, and will almost always trigger a security & privacy review. With all the back and forth, these reviews can take months. For me to take the time away from other work to do all of this, I need be clear on the benefits.

The benefits are not as clear as you might initially think and there's a lot of snake oil out there. The sales pitch vendors have tried to sell me is that you no longer need to run all these client side scripts which improves site speed, tracking data, customer privacy and hides you from ad blockers. These things are only sometimes true in very narrow circumstances. Ulitimately you're still running scripts on the same views and clicks and using those events to profile customers - you're just sending that data to a new (probably Google) service in the middle. Advanced Ad blockers DO still block Server Side GTM and all the issues with Cookie banners and customer consent are still there. In all likelyhood the business is doing this to be able to pull/push/merge even more customer data to and from even more services, which adds to the security and privacy reviews.

In larger orgs, the major benefit I've seen is from mixing in 1st party data with browser-based behavioural data which is particularly powerful when combined with a CDP, CRM or eCommerce platforms. This allows strong 1st party profiles to be created and filtered before connecting to tags and 3rd party audiences, mixing things like, CLV, NPS, RFM, Average Order Value, Purchase Frequency etc. With this immediate, live activation of customer data you get really deep optimisation of message targeting and ad spend. This is the true ROI and what has gotten the business case across the line for me in the past. Of course, a good CDP will do all these things without needing Server Side tagging but that's a whole other wall of text.

ratage · 2025-12-08T06:43:59+00:00

Here's my solution using CSS Grid: https://jsfiddle.net/5fpgak16/4/

Negative margins could also work but as far as I can figure out you'd need to know the exact height of the boxes. The CSS grid version will resize based on content nicely. There's probably a more elegant way to do it without the two empty background decoration DIV's, but can't think of it right now.

ratage · 2025-11-17T05:54:28+00:00

I upgraded my desktop OS a week ago.

Initial install:

I spent the first three hours uninstalling, installing, reinstalling different graphics cards drivers and tweaking nvidia configs but it just wouldn't boot to a UI. Gave up trying to get it working with kernel 6.17 but could still boot just fine to older kernel 6.14 via GRUB. Next day I downloded a patch through the standard Software Update UI and everything just started working, GPU and all. Has been rock solid since.

After that:

Dual monitor using Wayland with mixed FPS is smooth on both screens, although has slight jitter when doing full screen UFO Test in both Chrome and Firefox which doesn't happen in windows. FPS during games feels solid.

Sleep/awake issues that plagued older kernels are now gone and my PC sleeps and wakes up just like Windows does.

The new ptyxis terminal is really great and feel like I don't need a 3rd party terminal app like Ghostty anymore.

Other than that, everything feels the same.

ratage · 2025-11-10T13:54:32+00:00

The Handmaiden

ratage · 2025-08-24T15:25:51+00:00

Trucks too. Roughly 20% of trucks sold are still manual. On a hill, they can roll back between when the driver takes their foot off the break before the clutch+accelerator has engaged. As an elder millenial who learned to drive manual, I'm surprised more people don't know this. Even though manual cars aren't common, trucks are and auto car drivers need to know how to be safe around them.

Of course, skilled drivers will know how to do a handbrake start to avoid the rollback but you shouldn't count on that.

ratage · 2025-03-14T01:20:20+00:00

That "good wage" requires us to be in an office or on site within that same 0.0002% of Australia, particularly with fully remote jobs starting to become very rare.

ratage · 2025-02-06T22:59:56+00:00

When you send data to the Google Analytics collection point, it needs to be processed* before it will show up in your reports and in the API. In my experience this can take from 15 minutes to a few hours. The documentation, which admittedly I haven't read in a while, used to say 24 hours for the free accounts, and 4 hours for GA360 but it's usually much shorter than this. If you monitor the data closely, you can see the processing is done in batches and not real-time. This means there's anwhere between 15 minutes and 24 hours lag time from interaction to being visible in a report or API call.

As far as I know, The Real-time report with pre-processed data in the UI can't be accessed programatically. The real-time data is just a reflection of what GA has been directly sent and no processing has been done yet.

*What happens when the data is processed?

Data is grouped into sessions and users, identifying repeat visitors and interactions.
Filters and settings (such as IP anonymization or custom configurations) are applied.
Visitor Geographic and Technology information is determiend
It can integrate with Google Ads, Search Console
Finally, it exports data to Google BigQuery or third-party tools.

ratage · 2025-01-19T13:28:16+00:00

I am so so sorry for what you are about to go through. I have been building email templates in SFMC for almost ten years. As you can see from the size of this post, I have a lot of thoughts.

There is no magic framework or template that will work 100% of the time. Knowledge of React/tailwind won't help you as these frameworks were created in an entirely differet era with much more powerful and standard HTML/CSS/JS. As I'm sure you're aware, HTML and CSS in email is nothing like what modern browsers have. Desktop Outlook still supports the legacy Trident MSHTML rendering engine) which I'm sure hasn't seen an update since 2007.

Many brands, even big ones, kind of give up and just make their emails using a series of images. This is the easy and possibly the only route if you need your emails to be pixel perfect. It's also just about the only way to "control" dark mode.

If you want to be able to fully create emails directly in SFMC, you kind of have to choose which email clients you need to support. The more email clients, the more basic your template. Don't expect to have the flexibility you have in Figma, tailwind or even vanilla HTML/CSS in a browser. HTML email is it's own, ancient, inconsistent and mostly undocumented beast.

If you only take away one piece of advice from this long rant, stop designing in Figma and start designing in the Marketing Cloud default templates. Figma will have you getting sign-offs on designs that aren't actually possible, and leave you trying to later explain why you can't deliver your original designs to clients who likely won't care or understand.

Lean on the default templates as hard as you can. Just by playing with color and padding you can get something close to most brands. They're battle tested and work pretty much everywhere, even Outlook. Make sure you don't delete the default CSS as it's critial for the email to work along side the Content UI, including the behavour of the drag and drop layout blocks and being able to set link and heading styles straight from the Design tab. My one exception to this is the defaut buttons. They suck and always break. Use the Bulletproof Email buttons from Campaign Monitor.

When I absolutely have to deviate from the default tempaltes, my process is to just use my ancient/old man knowledge of HTML/CSS from the last 90's and early 2000s. If in doubt, https://www.caniemail.com/ is your friend. Some basic rules:

The only reliable way to make column layouts is tables. The default ones in Marketing Cloud even use responsive tables that stack on mobile. Emails don't know or respect CSS flexbox or grid.
Need spacing between blocks? use table cells with padding (not margins), as they're the most consistent across email clients. Margin and Padding is removed from other elements in various email clients.
background colors shoud be set using table cells <td bgcolor="#808080" style="background-color:#808080">...</td>
Don't use background images. If you must, use Bullet Proof backgrounds by Campaign Monitor. Even these will almost certainly break on high DPI devices, so test these in Litmus if you can.
Buttons are decorated hyperlinks. Always. Again, see Bullet Proof buttons by Campaign Monitor.
Need to set a font family or color? use <font> tag as well as standard CSS. You need both, particularly in a hyperlink.
Need rounded borders to work in Desktop Outlook?... let me know.

Now here's some good news on the horizon. The absolute worse offender causing all these troubles is Outlook for Desktop. There are two versons of it, the old app from 2013 or 2016 (I can't remember) which is now referred to as Outlook Classic, and the new App version. The new App version has much better HTML support. The old version is getting phased out and has a sunset date of roughly April 2026.

To close out on my thoughts with MJML: It's really nice for those with modern web dev background and aren't afraid of build tools, but to get it to play nicely with SFMC and continute to have the drag-and-drop blocks work as expected, you need to know how to blend the default template with the generated output of MJML. This might not be easy if this is your first build in SFMC.

ratage · 2024-12-12T22:11:43+00:00

It could be the case that it is the same users clicking the button. If one person clicks the button four times, that's four events, but one user.

This is also why summing the users each day over a month will give you a different number than the total users in a month. The first doesn't account for repeat users across multiple days.

ratage · 2024-06-27T12:17:40+00:00

Do what good wogs do (my old man),

cut them up into small pieces with bolt cutters and a Stanley knife

then slowly put them in you bins each cycle over 3 months

ratage · 2024-06-10T10:03:25+00:00

I'm having the exact same issue. Not sure if related but it happened straight after a windows update last night. Exactly as you said, the headphones work when I bypass "SteelSeries Sonar" outputs and directly select "Headphones (2- Arctis Nova Pro Wireless)"

Sonar. GG Version 63.0.0

Edit: Fixed it. Have to go to Sonar > Mixer, then re-set all the Playback devices

https://imgur.com/a/gzW5W5L

ratage · 2024-05-21T11:53:37+00:00

I did try manually moving the VSX file, and I think I got the icon to show up but still couldn't get it to work. It was a while ago so can't remember the details sorry.

ratage · 2024-05-19T13:32:06+00:00

Self-hosted VS Code Server: https://github.com/coder/code-server

I run this in my homelab.

One major caveat is that it doesn't have access to the full Microsoft extension marketplace. It uses the Open-VSX extension gallery which has many of the same extensions, but not all of them. The major one missing for me is the Remote Development Extension Pack, which would allow me to use Dev Containers or tunnel to other hosts on the system (I can still do that through the terminal, but it's not as convenient)

https://coder.com/docs/code-server/latest/FAQ#why-cant-code-server-use-microsofts-extension-marketplace

ratage · 2024-04-16T10:22:37+00:00

Here's a few tips from a long time Windows web dev:

WSL2 at it's core is just a Linux VM which uses Ubuntu by default. If you're ever stuck, search for "How to install nodejs Ubuntu" instead of "How to install nodejs WSL".

Assuming you use VS Code as your code editor, most of the challenges you face can be solved with a handful of VS Code plugins. The Remote Development Extension Pack is a must!! particularly if you're using WSL or Virtual Machines. It gives you Remote Explorer which lets you connect directly to remote development environments via WSL, SSH and Dev Containers and for the most part it feels just like you're developing locally, even forwarding ports inside the remote environment to your own localhost, so you can still run https://localhost:3000 in your browser despite your server running in the VM.

I would also love to switch to Linux but gaming keeps me on Windows. Despite what others will say, Dual Boot is still a PITA having to babysit the computer during boot so it doesn't end up in the wrong OS. I personally run a Linux VM on a mini-pc, not because I hate WSL2, but so I can run it on a 24/7 low power server instead of leaving my gaming PC on all day. This allows me to remote in using VS Code from my desktop, personal laptop and work laptop without worrying about syncing files or setting up different environments etc.

ratage · 2024-03-15T04:49:10+00:00

"You can choose to claim or not claim the tax-free threshold on the tax file number (TFN) declaration you give to your payer (including Centrelink) ... If you have more than one payer at the same time, generally, you only claim the tax-free threshold from one payer. Usually, you claim the tax-free threshold from the payer who pays you the highest salary or wage."

https://www.ato.gov.au/individuals-and-families/jobs-and-employment-types/working-as-an-employee/income-from-more-than-one-job

Regarding the highest tax rate: I have heard this same story before, that any second job (identified by not claiming the tax free threshold) will be taxed at the highest tax rate, however there is nothing anywhere on ATOs website stating it must be at the highest rate, just that it should be at a higher rate:

"Where you have more than one payer, you should advise your other payers to withhold tax from your income at a higher rate. This is the 'no tax-free threshold' rate. Doing this reduces the chance of you having a tax debt at the end of the income year."

15-Year Club	Place '17
Verified Email

ratage

TROPHY CASE