40 comments

[ 2.7 ms ] story [ 111 ms ] thread
Check out Better Internet. It allows you to do and share it too without an extension.

http://betterinternet.co/

Oh, that's interesting. All the content is on *.betterinternet.me, though. I feel an extension keeps the content on the owner's site, while simultaneously allowing the custom design that one wants.

Perhaps this model can provide further customization options, though.

Oh, no I haven't. Looks like they beat me to it in terms of features and sharing.

It seems like they could make it easier to use, though. You have to go to their custom styles page and add CSS without seeing its effects directly. Their userstyles.org website also needs some help (perhaps someone should make a stylish style for userstyles.org itself). Nevertheless, the sharing features are quite nice. I wanted to add such sharing capability myself.

Your project is still pretty good. Thanks for sharing (especially, for putting it up on github, so others can use some of this if necessary)
>without seeing its effects directly

Nope, Stylebot has live CSS editing, it shows you the results as you type.

Or make a Stylish script and share with others.
For firefox users, dotjs(https://addons.mozilla.org/en-us/firefox/addon/dotjs/) does roughly the same thing but with custom js support as well.
for firefox and js, I always used http://en.wikipedia.org/wiki/Greasemonkey

for custom css... I clearly remember that old firefox version could let me set custom css, no plugin needed...

Most vanilla browsers lets you add your own user style into cascade. In Firefox it is userContent.css and userChrome.css [1] (loaded at startup), in Google Chrome custom.css [2](this file is 'live'). IE [3] and Opera [4] have something like this as well.

[1] http://www-archive.mozilla.org/unix/customizing.html [2] http://code.google.com/p/chromium/issues/detail?id=2393 [3] http://windows.microsoft.com/en-US/windows7/Use-your-own-sty... [4] http://www.opera.com/docs/usercss/#user-mode

Windows keyboards don't usually have a 'meta' key. I suppose you should consider changing the shortcut.
Yes, event.altKey would seem a better choice as it maps to Alt on Windows and Option on the Mac. Not sure about Chromebooks (which don't even have any modifier keys other than Shift) or Linux though. Or mobile browsers.
I always thought that the key with the Windows logo was the meta key. Does it map out to something different?
You make a good point. I'll fix this ASAP. I was also under the impression that the meta key mapped to the Windows key, but perhaps I'm wrong.

Edit: Just updated the shortcut to control + m. Let me know if you continue to experience troubles.

I like that it immediately shows changes as I type. I could use this for web development, by loading up an unstyled HTML template and applying CSS from here.
That's great to hear. Thanks for the feedback.
I see that you've invented Greasemonkey. Unfortunately, it has already been around for the last 8 years. What's more, Chrome actually has native support for Greasemonkey scripts – no plugin needed.

http://blog.chromium.org/2010/02/40000-more-extensions.html

EDIT: My comment has been misunderstood by some, so let me try to be clearer: I like your plugin, I just wanted to let you know a plugin with similar functionality has been around for a long time, in case you were planning on spending a lot of time on it.

No need to be a jerk about it. And, I particularly like how it makes it easy to tweak the page in real-time.
Does Greasemonkey make it easy to modify styles as well? This is simple if you can insert arbitrary JS, but it'll be annoying if you need to write JS to insert CSS for every site you want to edit. I just wanted a simple way to edit CSS without having to go to my editor or a different web page, especially for sites that I visit often. Perhaps the tool I was looking for did already exist.
Greasemonkey (+ userscript) and your plug in attack two different parts of the problems.

While "my style" it's great for "live" css editing, greasemonkey+userscript have a community and shines for the "share your modification" thing.

May I suggest you to get in touch with gm/us developers? It would be awesome to be able to write a custom css for a site and share it!

What's your point? Maybe he did it because it was an itch he wanted to scratch. It would be more useful to critique his project and maybe offer some constructive criticism, than to offer this snark.
Even if he is planning on spending a lot of time on it, he will probably:

1. Be doing something he loves 2. Gain experience and improve his skills 3. Expand his portfolio 4. Makes friends and connections and get valuable feedback 5. Learn what it's like to try to beat a competing product 6. Maybe fail, and learn from it 7. etc.

"similar functionality has been around for a long time"

That doesn't matter to a lot of people in a lot of situations. We just keep on coding.

If this thread was entitled "Show HN: The new karthikv OS" or "Show HN: Introducing the Google Search killer", then yeah, spending a lot of time on that kind of thing (especially for free) might be foolish.

"try to beat a competing product" ?
You should probably edit your comment a 2nd time and delete the first two sentences because they make you sound like an ass. And, you not only mock the guy, but you refer to the wrong plugin... incredible. Are you not ashamed to have such comments linked to a username which personally identifies you?
"you not only mock the guy, but you refer to the wrong plugin"

Neither of those statements are true.

"Are you not ashamed to have such comments linked to a username which personally identifies you?"

Anything I write, I should be willing to sign with my name, otherwise it's probably not worth writing. I didn't write the comment with malicious intent, but when I saw it could be interpreted that way, I clarified it.

Downvoted for unnecessary snark and the non-apology in your edit (disagreement with tone is not misunderstanding). There are gentler and better ways to express this, e.g.:

Have you had a look at Greasemonkey or Stylish?

Because you can use greasemonkey to do the same thing doesn't make this worthless, and even if this replicated what greasemonkey does exactly (which it doesn't), it might still be an interesting take on an old problem. Reinvention is a great way to learn, and not very damaging for anyone else, so why not do it now and then? As long as you're willing to admit other versions might be better than your attempt, I see nothing wrong with it.

As a good example of reinvention which actually solved a lot of real world problems, see Linux (reinventing MINIX, but eventually diverged hugely), which started thus:

I'm doing a (free) operating system (just a hobby, won't be big and professional like gnu) for 386(486) AT clones. This has been brewing since April, and is starting to get ready. I'd like any feedback on things people like/dislike in minix, as my OS resembles it somewhat (same physical layout of the file-system (due to practical reasons) among other things).

Greasemonkey kind of stinks for injecting CSS -- you get a flash of the original content before your userscript is injected into the site and it just looks bad compared to using Stylish.
I agree, I chose to mention Greasemonkey because it's been around the longest, not because it's the best.

I also think the plugin he wrote serves a niche, and since writing my initial comment, I've been using it. I like it.

Any recommendations for this kind of thing on iOS? I wanted to use a custom style on a web page on my iPad but couldn't find anything
You could probably use a bookmarklet to inject the css via javascript.
Great for practical jokes and April Fools Day tricks I might add.
Make it work in the same fashion as Readability (with a bookmarklet or something) and I'm sold.
I wish someone would write an alternative to Stylish for Firefox (I would try if I knew where to even start...).

Looks good though. I don't use Chrome, so can't test it, but judging from the screenshot, perhaps some syntax highlighting?

Nice and simple though. Guess a sharing feature would be the next step?

How do you backup the CSS files that you create? The github pages says localstorage. Is there an easy way to extract CSS and put it in a directory, say in git repo for backup and version control?
This could be useful for low-vision people, who might like to optimize fonts and foreground/background colors for readability. It would be nice to be able to have toggleable presets.
Where are the css files stored?