JS Suggestions

[ducky]

Hey bud, I saw you pinged me in another post, so I peeked through some code. Since you're going to be doing some changes with your JS, I'd probably start with trying to wean yourself off of jQuery (or kill it entirely). Also, in the code snippet below I saw you kind of mixed JS and jQuery, which you could technically do with just JS.

Also, I saw that you were changing the body background, and then doing some weird regex replace on it, but doesn't the result in value end up being the same as img1?

Here's an example of the same code with just JavaScript and no regex replace (assuming it's not doing something that I missed).

$(css1).click(function() {
  $('body').css('background', 'url('+img1+')');
    var value = document.querySelectorAll("body")[0].style.background.replace(/(url\(|\)|")/g, '');

    chrome.storage.sync.set({'background': value}, function(){
      // alert('Success!');
    });
});

Becomes

// I've also used a few ES6 things here you may want to check out:
// https://webapplog.com/es6/

// This method becomes partially applied, so you pass the image url in
// then once the second method is called, the appropriate cached variable
// would be set
const setBackground = (background = '') => {
  return () => {
    body.style.background = `url('${background}')`; // Template Literal (ES6)
    chrome.storage.sync.set({ background }, () => {
      console.log(`background set to ${background}`);
    });
  };
};

// Typically these would be generated from some sort of config
css1.addEventListener('click', setBackground(img1));
css2.addEventListener('click', setBackground(img2));
css3.addEventListener('click', setBackground(img3));

Just my two cents!

[Marmatee]

@chrisxclash thank you so much for the pointers! I will admit I struggled a lot with this exercise. The regex replace is there to tidy the following result leaving me with just the URL:

document.querySelectorAll("body")[0].style.background
"url("http://i.imgur.com/DYm1aqo.jpg")"

I'm still finding my feet with JavaScript and anything to help me learn is hugely appreciated.

[ducky]

No worries, I figured you were still learning things and wanted to give some pointers that helped me when I was starting out!

Does the replace actually need to be there though? Because you're actually setting the body background first (to img1 in our case) then you're taking the url of the body background (which would be identical to img1 since you just set it). Couldn't you just use the variable img1 in this case?

Always happy to help! Appreciate you checking out Play Midnight. :)

[Marmatee]

You're absolutely right, however I'm going to use that same replace down the line when I introduce the ability to set custom backgrounds.

Regarding Play Midnight - Yeah absolutely, really big fan of not just the extension, but that you've clearly taken the UX seriously into consideration. I want to eventually achieve a pleasing UX with daylight, and that's what inspires me.

[ducky]

Gotcha, gotcha. I suppose that makes sense then. I've only used the iCloud Dashboard like twice ever, but I might have to check out your extension when you're done.

And I appreciate it! I don't consider myself a designer, but I've always been really big on making sure any design decisions make sense to me, and don't confuse/annoy the user. Glad to hear that's what you're looking for, and good luck on finishing! Looks like it's coming along well so far.