4 ms·

Why is it a Chrome extension instead of just a bit of CSS in one of the many custom CSS extensions that already abound?

by BugsJustFindMe 9y ago

ttsda 9y ago
found the css https://github.com/carolinehermans/HNcute https://github.com/carolinehermans/HNcute
- caroherm 9y ago
  ^^
e12e 9y ago
Indeed. Appears the "stylish" extension and/or https://userstyles.org https://userstyles.org would be a natural fit for this?
- smt88 9y ago
  https://malwaretips.com/threads/stylish-browser-add-on-2-million-users-impacted-by-new-data-collection-policy.67191/ https://malwaretips.com/threads/stylish-browser-add-on-2-mil...
  - auscompgeek 9y ago
    Stylus is the community fork of Stylish from before it was bought out.
carlosdp 9y ago
idk, cause the one-click install is easier to distribute than telling people to install a generic plugin they might only use for this 1 mod anyways.
- reificator 9y ago
  But on the other hand a user who is already interested in overriding the styling for one site is a likely candidate for wanting to install more. Furthermore, having one extension to trust for security's sake is much nicer than having one for each and every site you want to custom theme. Especially since the general theme is going to want to build up a library of themes and requires user trust to do so, phoning home secret information would eventually destroy that trust. But an extension that only themes Google.com is a more likely candidate for harvesting credentials, for instance. Creating an extension is also a browser specific process. If there's one browser extension for all sites backed by a repository of plain CSS themes, then users on multiple browsers can benefit from theming with minimal porting effort on the part of the theme author.
  - Woberto 9y ago
    I had no idea it was possible to override site stylings, and though I may look into it, I may not do anything more about it and just keep on accepting sites as they come, even if they're unappealing. So this is a great option - I can change HN to a more pleasant appearance without having to know about the details. Those are good ideas for improvements, but I'm glad just to have the possibility for change, even if the first draft isn't perfect.
    - reificator 9y ago
      I don't have any issues with that. But if you do want to learn more, https://userstyles.org https://userstyles.org is the place to go.
caroherm 9y ago
Mostly because I'm familiar with developing Chrome extensions, and appreciate the freedom and ease of distribution. I also used a bit of Javascript to rework some of the text areas, like the bar at the top. And injecting the favicon is done in JS as well. I'll look into custom CSS extensions though! I'm not familiar with them. The repo is at https://github.com/carolinehermans/HNcute https://github.com/carolinehermans/HNcute – it could definitely be organized better, I didn't expect to be sharing!
- maddyboo 9y ago
  I reaaalllyy like this theme! As others have said, it would be great to have it in the UserStyles library.
  - caroherm 9y ago
    I'll look into it, thanks for the info!
- chrismorgan 9y ago
  You can change the colour of the logo with CSS filters, something like this: [href="https://news.ycombinator.com"] > img { filter: hue-rotate(-50deg) brightness(150%); } … but that doesn’t fix the favicon. Some of the other bits done in JS can be done in CSS; this snippet, for example: for (let i = 0; i < document.getElementsByTagName("font").length; i++) { if (document.getElementsByTagName("font")[i].getAttribute("color") === "#ff6600") document.getElementsByTagName("font")[i].setAttribute("color", "#FF83C6") } This is very inefficient (though document.getElementsByTagName is probably O(1) due to its return type HTMLCollection being live, so the end result is probably still only O(n) on the number of <font> elements in the document; it’d be O(n²) with document.querySelectorAll); you should only get the <font> elements once, like this: const fontElements = document.getElementsByTagName("font"); for (let i = 0; i < fontElements.length; i++) { if (fontElements[i].getAttribute("color") === "#ff6600") fontElements("font")[i].setAttribute("color", "#FF83C6") } It can still be made more efficient, but all I wanted to do was rewrite it in CSS anyway: font[color="#ff6600"] { color: #ff83c6; } Same deal on the table cells just above it: for (let i = 0; i < document.getElementsByTagName("TD").length; i++) { if (document.getElementsByTagName("TD")[i].getAttribute("bgcolor") === "#ff6600") document.getElementsByTagName("TD")[i].setAttribute("bgcolor", "#fbbfdf") } Use this CSS instead: td[bgcolor="#ff6600"] { background-color: #fbbfdf; } On the performance matter, a rule of thumb: don’t call getElementsByTagName, getElementsByClassName, querySelector and querySelectorAll more than you absolutely have to. Or anything, really. Cache things in temporary variables aggressively. Take these two lines, for example: document.getElementsByClassName("pagetop")[0].innerHTML = document.getElementsByClassName("pagetop")[0].innerHTML.split("|").join(" ") document.getElementsByClassName("pagetop")[1].innerHTML = document.getElementsByClassName("pagetop")[1].innerHTML.split("|").join(" ") You’ve evaluated `document.getElementsByClassName("pagetop")` four times instead of once. const pagetops = document.getElementsByClassName("pagetop"); pagetops[0].innerHTML = pagetops[0].innerHTML.split("|").join(" ") pagetops[1].innerHTML = pagetops[1].innerHTML.split("|").join(" ") Even then, this indexes pagetops twice as often as is necessary, but that operation is quite a bit cheaper than getElementsByClassName. I’d say then to use for..of or forEach or similar, or assign temporaries.

Why is it a Chrome extension instead of just a bit of CSS in one of the many custom CSS extensions that already abound?

ttsda 9y ago

found the css https://github.com/carolinehermans/HNcute https://github.com/carolinehermans/HNcute

caroherm 9y ago
^^

e12e 9y ago

Indeed. Appears the "stylish" extension and/or https://userstyles.org https://userstyles.org would be a natural fit for this?

smt88 9y ago
https://malwaretips.com/threads/stylish-browser-add-on-2-million-users-impacted-by-new-data-collection-policy.67191/ https://malwaretips.com/threads/stylish-browser-add-on-2-mil...
- auscompgeek 9y ago
  Stylus is the community fork of Stylish from before it was bought out.

carlosdp 9y ago

idk, cause the one-click install is easier to distribute than telling people to install a generic plugin they might only use for this 1 mod anyways.

reificator 9y ago
But on the other hand a user who is already interested in overriding the styling for one site is a likely candidate for wanting to install more. Furthermore, having one extension to trust for security's sake is much nicer than having one for each and every site you want to custom theme. Especially since the general theme is going to want to build up a library of themes and requires user trust to do so, phoning home secret information would eventually destroy that trust. But an extension that only themes Google.com is a more likely candidate for harvesting credentials, for instance. Creating an extension is also a browser specific process. If there's one browser extension for all sites backed by a repository of plain CSS themes, then users on multiple browsers can benefit from theming with minimal porting effort on the part of the theme author.
- Woberto 9y ago
  I had no idea it was possible to override site stylings, and though I may look into it, I may not do anything more about it and just keep on accepting sites as they come, even if they're unappealing. So this is a great option - I can change HN to a more pleasant appearance without having to know about the details. Those are good ideas for improvements, but I'm glad just to have the possibility for change, even if the first draft isn't perfect.
  - reificator 9y ago
    I don't have any issues with that. But if you do want to learn more, https://userstyles.org https://userstyles.org is the place to go.

caroherm 9y ago

Mostly because I'm familiar with developing Chrome extensions, and appreciate the freedom and ease of distribution. I also used a bit of Javascript to rework some of the text areas, like the bar at the top. And injecting the favicon is done in JS as well. I'll look into custom CSS extensions though! I'm not familiar with them. The repo is at https://github.com/carolinehermans/HNcute https://github.com/carolinehermans/HNcute – it could definitely be organized better, I didn't expect to be sharing!

maddyboo 9y ago
I reaaalllyy like this theme! As others have said, it would be great to have it in the UserStyles library.
- caroherm 9y ago
  I'll look into it, thanks for the info!
chrismorgan 9y ago
You can change the colour of the logo with CSS filters, something like this: [href="https://news.ycombinator.com"] > img { filter: hue-rotate(-50deg) brightness(150%); } … but that doesn’t fix the favicon. Some of the other bits done in JS can be done in CSS; this snippet, for example: for (let i = 0; i < document.getElementsByTagName("font").length; i++) { if (document.getElementsByTagName("font")[i].getAttribute("color") === "#ff6600") document.getElementsByTagName("font")[i].setAttribute("color", "#FF83C6") } This is very inefficient (though document.getElementsByTagName is probably O(1) due to its return type HTMLCollection being live, so the end result is probably still only O(n) on the number of <font> elements in the document; it’d be O(n²) with document.querySelectorAll); you should only get the <font> elements once, like this: const fontElements = document.getElementsByTagName("font"); for (let i = 0; i < fontElements.length; i++) { if (fontElements[i].getAttribute("color") === "#ff6600") fontElements("font")[i].setAttribute("color", "#FF83C6") } It can still be made more efficient, but all I wanted to do was rewrite it in CSS anyway: font[color="#ff6600"] { color: #ff83c6; } Same deal on the table cells just above it: for (let i = 0; i < document.getElementsByTagName("TD").length; i++) { if (document.getElementsByTagName("TD")[i].getAttribute("bgcolor") === "#ff6600") document.getElementsByTagName("TD")[i].setAttribute("bgcolor", "#fbbfdf") } Use this CSS instead: td[bgcolor="#ff6600"] { background-color: #fbbfdf; } On the performance matter, a rule of thumb: don’t call getElementsByTagName, getElementsByClassName, querySelector and querySelectorAll more than you absolutely have to. Or anything, really. Cache things in temporary variables aggressively. Take these two lines, for example: document.getElementsByClassName("pagetop")[0].innerHTML = document.getElementsByClassName("pagetop")[0].innerHTML.split("|").join(" ") document.getElementsByClassName("pagetop")[1].innerHTML = document.getElementsByClassName("pagetop")[1].innerHTML.split("|").join(" ") You’ve evaluated `document.getElementsByClassName("pagetop")` four times instead of once. const pagetops = document.getElementsByClassName("pagetop"); pagetops[0].innerHTML = pagetops[0].innerHTML.split("|").join(" ") pagetops[1].innerHTML = pagetops[1].innerHTML.split("|").join(" ") Even then, this indexes pagetops twice as often as is necessary, but that operation is quite a bit cheaper than getElementsByClassName. I’d say then to use for..of or forEach or similar, or assign temporaries.