I use then to automate annoying workflows for FE development. Sometimes you need to click through a series of things to get the UI into the state you need. A bookmarklet is a perfect solution.

Check out Facebook’s Storybook if you haven’t already. It’s life changing when you don’t have to click through an app to get the state you need.

Storybook is awesome. Just wanted to clarify is has nothing to do with Facebook or Meta.

It is also trivial to turn storybook into visual regression tests.

Do you have a link? I have a really hard time googling this.

  javascript:if (typeof e!=='undefined') e.style.background='#ccc';
  e=Array.from(document.querySelectorAll('.age%20a:not(.s)')).sort().at(-1);
  e.style.background='#ff0';e.classList.add('s');
  e.scrollIntoView({behavior:"smooth",block:"center",});{}

Looks like the code got mangled in the Twitter post, in particular the curly braces at the end. And the line order, "e=" should be at the beginning logically.

  javascript:e=Array.from(document.querySelectorAll('.age%20a:not(.s)')).sort().at(-1); if (typeof e!=='undefined') { e.style.background='#ccc'; e.style.background='#ff0'; e.classList.add('s'); e.scrollIntoView({behavior:"smooth",block:"center"}); }

It is all one line. Yes, Twitter formats it in a way that makes it impossible to copy just the text. Because it thinks that .style is a toplevel domain and #ccc is a hashtag.

Here is a repo from which it is easy to copy:

https://github.com/no-gravity/hn-bookmarklet

Ah that's nice, thank you. Sorry I mis-rewrote when I tried to correct what was copied from Twitter. It addeded some extraneous "https://" too.

  javascript:if (!location.href.match('ycom')) {location.href='https://news.ycombinator.com'};if (typeof e!=='undefined') e.style.background='#c0c0c0';e=Array.from(document.querySelectorAll('.age%20a:not(.seen)')).sort().at(-1);e.style.background='#ff0';e.classList.add('seen');e.scrollIntoView({behavior:"smooth",block:"center",inline:"nearest"});{}

I see, that {} at the end is intentional, as you described in another comment.

And accessing the variable e before assigning it a value, now I see that probably serves a practical purpose too.

Did you write this? If so, why did you add the "{}" at the end? Also, can't you use newlines in bookmarklets?

Yes, I wrote it.

The {} prevents the code from evaluating to a value that the browser then would use as the new value for the DOM, overwriting the existing page.

Try bookmarking javascript:123 and see what happens when you click it.

Bookmarklets are URLs, so a newline in the code would be urlencoded as %0A. So you could do:

javascript:alert(1)%0Aalert(2)

But I would prefer:

javascript:alert(1);alert(2)

This has me really confused. The example you shared in that tweet is very misformed code that I cannot get to run anywhere.

That looks great. Is there something similar for comments ?

The HN structure is the same for top level posts and comments. So the bookmarklet works for both.

last I checked archive.is had killed its bookmarklet, which is very annoying

haven't checked in a while though, maybe there are workarounds