Add SSR (Server-side rendering) checker #596
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
That's interesting and could be quite handy for non-tech folks. Could we fix the mobile styles before merging? Looks a bit "wonky". 🫣 
|
|
Thanks for taking the time to review this, Stefan. I shall fix and get back. Thanks! |
|
@stefanjudis Update - the issue is now fixed - check this url on a mobile device or the screenshot below: 
Since the mobile screen is narrow and I absolutely want to provide synchronized scroll for comparison - there isn't a way for me to fit both screens side-by-side yet within the mobile viewport. So, I'm displaying a little part of the second screen for the user to scroll horizontally + vertically as needed. But the screens getting on top of each other has been addressed. Thanks for taking the time to report this. |
|
Sure. Happy to provide feedback. 
I understand the idea, however, it still looks broken, though, doesn't it? 🤔 |
|
So, this is how it looks when you horizontally scroll the bottom overflowing section (containing the two browser windows) to visually compare the two windows. While it may look broken, it is more useful than having the two browser windows one below the other (where concurrent scrolling of windows and their visual comparison cannot be done). Thoughts? |
|
I'm not sure I understand. This is a pure CSS issue that makes it appear to be broken layoutwise. The only fix required is to keep the comparison scroll container full width (and not going beyond). The scroll area should remain the same? |
|
Ahh, I think I now understand what you've been asking. Do you mean to say why it isn't like the following on mobile screen? 
The reason the comparison container has been set to horizontally overflow is because the comparison items aren't easy to compare visually if the browser windows will be as small as in the screen above (it may look ok in the above screenshot, but when someone is trying to decipher a specific link / image / text between the two screens on actual mobile device, it is very small). I tested a lot of urls with SSR issues on actual mobile devices before settling on the overflow approach. Also, the issue worsens when someone's comparing the desktop version of their pages - eg below 
|
|
This is not what I'm saying. I understand that tiny comparison screens are not helpful. I'm referring to these breaking out "comparison container". It shouldn't be possible to reach this borken layout state if the scroll containers would be correct. 👇 
If I discover a tool, that allows me to "scoll into this broken state", I immediately think it's broken and/or not done with care. But maybe we can also close this conversation, because, yday, I saw that you sometimes put the tool behind a login, and I usually don't take tools behind a login wall. 🫣 |
|
Ah, got it. That makes sense now. Apologies for taking this long to understand what you meant. I'll address this - it makes sense. And yes, the tool requires login after first five uses (is free for unlimited use though). It loads Chromium on the server to give output and was getting abused by folks submitting very large number of requests. If that breaks the policy of the tools you list on your directory, please exclude it. |
|
Hi Stefan, 
Thanks for being patient and giving this so much time. |
|
Yes! This looks much better (and it doesn't look "CSS-broken"). 🎉 Thanks
for considering my feedback. :)
That said though, I'll close this PR because I usually don't accept tools
gated behind a login wall (even if it only shows up eventually). I hope
that's understandable.
…On Tue, Jul 15, 2025 at 1:36 PM Punit Sethi ***@***.***> wrote:
*geeky-biz* left a comment (stefanjudis/tiny-helpers#596)
<#596 (comment)>
Hi Stefan,
Can you please review the change one last time (even if you may close this
PR). I understood what you were mentioning all along and have fixed it.
Screenshot below and here's a ready result url
<https://www.crawlably.com/ssr-checker/?run_id=b5e58909319a6adbd730fe01b73668ae555b23f7075c9cc5ff93ca39940fa8ae>
if you want to check without having to run yourself.
***@***.*** (view on web)
<https://github.com/user-attachments/assets/54b5b8cd-3a34-4298-ac25-a26034808cf1>
Thanks for being patient and giving this so much time.
—
Reply to this email directly, view it on GitHub
<#596 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAHK4M4HYGE3IP7FT72WPXL3ITRUBAVCNFSM6AAAAACAWQXRZSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTANZTGI3DGOJRGI>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
--
Stefan Judis
Developer Relations [image: Logo] <https://www.stefanjudis.com>
stefanjudis.com
***@***.***
twitter.com/stefanjudis
github.com/stefanjudis
Psst! I write a weekly newsletter <https://www.stefanjudis.com/newsletter/>
all around web development.
|
2 participants
Thank you for opening a pull request to tiny-helpers.dev ❤️
Before you submit your PR, please take a look at the contributing guidelines. :)
To make it easier for us to review and merge your PR, please make sure …
descfield includes an "actionable sentence" (e.g. "Create something great" or "Transform something into something else").maintainersare valid GitHub user names🚨 If you don't follow these rules or didn't tick the checkboxes, I'll close your PR immediately. This might seem harsh, but the amount of "useless" PRs sneaking into my notifications is more than I want to tolerate.
Thank you! 🙇♂️