38
\$\begingroup\$

I've written a Code Review design using Userscripts and CSS.

It works by fetching the CSS from my GitHub repo, and using the built in gm_addStyle function to add it to the page.

The CSS that's fetched is minimised, also.

This is what it looks like:

main

I was looking at some of the other Stack Exchange sites for inspiration, namely Physics, Arqade, Stack Overflow and SciFi.

I had a few questions/issues that I was looking at refactoring, in particular:

  • Am I abusing the CSS selectors?
  • Would it be better to provide the icons as Base64 in the CSS instead of image links?
  • Usage of the Dark colour scheme, does it visually 'work'?
  • Am I [ab|mis]using the @match scheme? Would a regex @include be better?
  • I had the url check explictly type out the colon to check if the site was Meta or not. I would've used .contains('meta'), but then in the off-chance a question had the word 'meta' in the title, it wouldn't render as a meta question. For example, a title like 'Timetable generator'. Could this be improved?

This is also on GitHub.

JavaScript:

// ==UserScript==
// @name        CodeReview dark theme
// @namespace   https://github.com/The-Quill/Code-Review-Design
// @version     1.0
// @description A new Code Review theme.
// @author      Quill
// @match       *://codereview.stackexchange.com
// @match       *://codereview.stackexchange.com/*
// @match       *://meta.codereview.stackexchange.com
// @match       *://meta.codereview.stackexchange.com/*
// @grant       GM_addStyle
// @grant       GM_getResourceText
// @resource    theme     https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/min.design.css
// @resource    main_skin https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/min.main.css
// @resource    meta_skin https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/min.meta.css
// ==/UserScript==

GM_addStyle(GM_getResourceText('theme'));

GM_addStyle(
    GM_getResourceText(
        (window.location.href.contains('://meta.codereview')
        ? 'meta'
        : 'main') + '_skin')
);

main.css:

#hlogo a {
    background: transparent url(https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/images/main-logo.png) no-repeat left top;
    width: 400px;
    margin-top: 5px;
    height: 164px;
    background-size: 87% 50%;
    font-size: 0;
}
.youarehere {
    color: #FF6700;
}
#tabs a:hover,
.tabs a:hover,
.nav ul a:hover,
#tabs a.youarehere,
.tabs a.youarehere,
.nav li.youarehere a,
.nav ul .youarehere a {
    color: #FF6700;
    border-bottom: 2px solid #FF6700;
}

meta.css:

#hlogo a {
    background: transparent url(https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/images/meta-logo.png) no-repeat left top;
    width: 400px;
    margin-top: 5px;
    height: 164px;
    background-size: 87% 50%;
    font-size: 0;
}
.youarehere {
    color: black;
}
#tabs a:hover,
.tabs a:hover,
.nav ul a:hover,
#tabs a.youarehere,
.tabs a.youarehere,
.nav li.youarehere a,
.nav ul .youarehere a {
    color: black;
    border-bottom: 2px solid black;
}

design.css:

body {
    background-color: #5A5A5A;
}
#hlogo {
    margin: 0px 0 0 0;
}
#header {
    height: 165px;
}
.container {
    box-shadow: #404040 0 120px 0 inset;
}
#footer {
    background-color: #404040;
}
.tagged-interesting {
    background-color: rgba(255, 245, 222, 0.4);
}
.question-summary {
    border-bottom: 0px;
}
.footerwrap {
    padding: 15px 10px 70px 10px;
    background: rgba(0, 0, 0, 0) url(https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/images/footer.png) no-repeat center bottom;
}
#tabs a.youarehere,
.tabs a.youarehere {
    font-weight: bold;
}

#svnrev,
#copyright,
#footer #svnrev,
#footer #copyright,
#footer #additional-notices {
    text-align: left;
    color: #FFF;
}

#footer,
.footer a,
#footer th,
#footer-sites a,
#footer #svnrev a,
.top-footer-links a,
#footer #copyright a,
#footer #footer-sites a,
#footer #svnrev a:visited,
.nav li:not(.youarehere) a,
#footer #copyright a:visited,
#footer #additional-notices a,
#footer #footer-sites a:visited,
#footer #additional-notices a:visited {
    color: #FFF;
}

This is influenced by the designs from this Meta post

\$\endgroup\$
  • 5
    \$\begingroup\$ You will break Code Review with your design, in the sense that it's awesome. I'll need to try the design it looks great! \$\endgroup\$ – Marc-Andre Sep 15 '15 at 14:33
  • 5
    \$\begingroup\$ @Quill does it change the looks of code blocks/posts much? Might be worth posting a second screenshot perhaps of an actual post? Great job :) \$\endgroup\$ – Phrancis Sep 15 '15 at 14:37
  • 2
    \$\begingroup\$ It doesn't particularly touch the inner content, but I could if you like \$\endgroup\$ – Quill Sep 15 '15 at 14:40
  • 2
    \$\begingroup\$ Absolutely amazing mate. I wish I could +1 this 10 times. :-) \$\endgroup\$ – Ethan Bierlein Sep 15 '15 at 15:50
  • 1
    \$\begingroup\$ @EthanBierlein, 'Why not?' was really my line of reason behind that. Arqade has a footer, so I just imitated the style and changed the image location \$\endgroup\$ – Quill Sep 16 '15 at 14:09
18
\$\begingroup\$
// @resource    theme     https://raw.githubusercontent.com

Github isn't a CDN so availability might be a problem if you want to share this to people. Github can go down any time due to maintenance or attack response.

Suggesting you have a high-availability, low-latency server somewhere. On every update of a code, it kicks off a CI serve build. After a successful build, it deploys it to the server for everyone to enjoy. Something like Travis+Heroku.

Additionally, you might want to bust caches after each update. Not sure how to do that in a user script, but the idea is you want to cache the styles when there's no change, yet update it when there is.

#footer,
.footer a,
#footer th,
#footer-sites a,
#footer #svnrev a,
.top-footer-links a,
#footer #copyright a,
#footer #footer-sites a,
#footer #svnrev a:visited,
.nav li:not(.youarehere) a,
#footer #copyright a:visited,
#footer #additional-notices a,
#footer #footer-sites a:visited,
#footer #additional-notices a:visited {
    color: #FFF;
}

This can be simplified using CSS pre-processors with the help of mixins. You can define the style once, and have all these anchor "include" that white style. Suggesting SCSS. For compilation, a build step (suggested above) would do it for you.

Additionally, you have double IDs on your selector. IDs are assumed to be unique on the page. Thus you can safely "root" your selector to that later ID instead. In this case, you can drop #footer from most of the selectors above.

As for your questions:

Am I abusing the CSS selectors?

I believe so. But this can be solved by SCSS to reduce the actual CSS you touch. Additionally, I believe SE sites run off the same framework. If you can just get that right selector that changes everything (like the selector that gets everything colored peach), then that would greatly shorten your styles.

Would it be better to provide the icons as Base64 in the CSS instead of image links?

Base64 strings are often 2-3 times larger than their raw counterparts. I think an extra HTTP request wouldn't hurt. Additionally, if you have multiple images, you can use sprites to reduce it to one HTTP request.

Usage of the Dark colour scheme, does it visually 'work'?

It's just another one of those "light-over-dark vs dark-over-light" debates. Really depends. Any, as long as I can still review code, I guess.

Am I [ab|mis]using the @match scheme? Would a regex @include be better?

I had the url check explictly type out the colon to check if the site was Meta or not.

No comment. Not much userscript experience.

As for the theme in general, that question is more on-topic over at Meta since meta sites are for talking about it's parent site. Not sure who gets to decide on the theme once the site graduates. But then again, orange on black... Looks good.

\$\endgroup\$
  • \$\begingroup\$ Actually Base64 strings are exactly log(256) / log(64) = 4 / 3 larger than their raw counterparts, by definition of Base64 encoding. \$\endgroup\$ – Benoit Esnard Jan 6 '16 at 14:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.