[Release] Better Crowdin Darkmode - a necessary addon for translating nightowls.

in #utopian-io • 6 years ago (edited)

betterbanner.png

Better Crowdin Darkmode

Publisher - Jestemkioskiem
repository

You can install the addon directly from the Chrome App Store! (for review purposes - not anymore, as I've updated it to 0.2.1 - use github)

If the addon didn't work, try reloading the page after enabling Darkmode on Crowdin.

Version 0.1.0

3d78a4c - 951fcbc

The goal of the project

The addon aims to replace the terrible, unusable darkmode of Crowdin with something that is actually easy on your eyes, and will allow you to work for hours before they get tired.

The project was born on a Friday night when tired me tried his best to submit translations to his favorite project. The white color of the page was unbearable, but thankfully the developers included a great option for people like me to utilize - Darkmode. I was eager to try it out up until the very moment it loaded. Unfortunately, the darkmode looks like this (I've decided to keep the screenshots out of the post to make it look better. Sorry for the extra clicks!)

This is.... more than unacceptable. It not only almost hurts my eyes more than the default, it kind of makes me want to puke by looking at those colors.
If we dive deeper into the CSS alterations that this settting makes... it basically only inverts all the colors. Including text - from black, to white. In a dark mode.

I can't work like this, and even just for myself, setting the CSS to what suits me through the developer tools of my browser is too much work on a daily basis. So I'm building an addon. But if I am building one, I am building it the right way - open source, for everyone to use.

Spoiler alert - this is the end result

And a nice gif to showcase the difference, in case it wasn't obvious enough:

beforeafter.gif

What's in the code:

manifest.json

The main configuration file of any browser extension, necesary for it to run.

src/script.js

The main javascript file of the extension - even though it's small, it's been compiled to be this way after literally hours of work (iframes are not fun and websites that set every CSS element to !important by default are the worst).

The CSS properties are a temporary workaround up until I get the background running when I set up the popup.

icons

The logo for the icons (also present in the banner of this post) was inspired by the Crowdin logo, in an obviously darker color scheme. As far as I am concerned, it is temporary and I'm open for contributions in this regard.

Technology Stack

Roadmap

Firefox Support

I wish to maintain Firefox support for every future version. This is unfortunately not an easy port because Mozilla, for whatever reason, fires iframe onload events immediately after the Document Object Model is loaded. There's currently no workaround to this issue in the newest version of the browser.

GUI & Customizability

Further milestone is to create a small GUI enabled by clicking the icon to alter all the text colors and backgrounds to your liking with a HEX color picker. Alternatively, a local website opened in a new tab will do the trick.

How to contribute?

Submit all the Issues & Pull Requests directly to the project repository.

GitHub Information

my github account

#development #crowdin
6 years ago in #utopian-io by
$26.57
  • Past Payouts $26.57
  • - Author $20.17
  • - Curators $6.41
55 votes
Reply 6
Sort:  
  • Trending
    • [-]
     6 years ago 

    Thanks for the contribution, @jestemkioskiem! I really wonder what Crowdin were thinking as their dark mode is really unacceptable like you said. This should definitely help a lot of our translators, great work!

    Some thoughts about the commits (not sure why you linked the two you did, but I'm reviewing this one) made before submitting this contribution (keep in mind I am not an experienced JavaScript developer so take it with a grain of salt):

    • Is there a reason you use var instead of let and const? You could also a for...of statement statement instead.
    • Should add a space before opening brackets, e.g. if() -> if ().
    • Maybe you could just use vanilla JavaScript instead of adding jQuery, or if you really want to use a library/framework you can use something like Vue.js instead? I could be chatting absolute shit, though lol.

    I would also recommend installing ESLint, as that will help for linting (like PEP8 / pylint for Python).

    Also creating pull requests for a feature is great, especially for us reviewers. It immediately makes it clear which commits are relevant to the contribution, but it's not a must of course.

    Looking forward to seeing the GUI and customisation implemented, and seeing this makes me want to create a Chrome extension as well, haha.

    Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

    To view those questions and the relevant answers related to your post, click here.

    Need help? Write a ticket on https://support.utopian.io/.
    Chat with us on Discord.
    [utopian-moderator]

    [-]
     6 years ago (edited)

    Hey! You might not (or you might actually absolutely do so) believe me when I say this, but this is the first thing I ever built in JS. jQuery and Vanilla is all I know, so I use them both to best of my abilities. For now they do more than fine and jQuery came in handy when building the GUI later on, which is now working - although still WIP - and I'll be uploading it soon!

    Here's a small sneak peak to get you motivated - it was really fun to build, actually.

    popupsmall.gif

    I am often guilty of spending 30 minutes making changes without checking if they break anything in-between. I was really surprised that very few updates I made introduced more than a syntax error. I might yet fall in love with this language, I guess.

    Back to your feedback though:

    Is there a reason you use var instead of let and const? You could also a for...of statement statement instead.

    No reason other than lack of experience. I already started using let instead and will change the old ones as well. Will replace the loop too, thanks!

    Should add a space before opening brackets, e.g. if() -> if (). I would also recommend installing ESLint, as that will help for linting (like PEP8 / pylint for Python).

    Note taken, thanks!

    Your feedback is amazing as always and I'm glad to say that I had coded like 3x as much in the same amount of time last night, so you'll get much more to review.

    [-]
     6 years ago 

    Thank you for your review, @amosbastian!

    So far this week you've reviewed 6 contributions. Keep up the good work!

    $0.00
      Reply
      [-]
       6 years ago 

      Thank you for your review, @amosbastian!

      So far this week you've reviewed 6 contributions. Keep up the good work!

      $0.00
        Reply
        [-]
         6 years ago 

        Hi @jestemkioskiem!

        Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
        Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
        Feel free to join our @steem-ua Discord server

        $0.00
          Reply
          [-]
           6 years ago 

          Hey, @jestemkioskiem!

          Thanks for contributing on Utopian.
          We’re already looking forward to your next contribution!

          Get higher incentives and support Utopian.io!
          Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

          Want to chat? Join us on Discord https://discord.gg/h52nFrV.

          Vote for Utopian Witness!

          $0.00
            Reply