The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »

MrMoo: Sep 14, 2000

The Wizard of Poz posted:

Is it normal for a company to insist that their devs do all of their work in a VM?

Seems a perfectly reasonable request, why do you care?

# ? Feb 15, 2016 02:37

Adbot: ADBOT LOVES YOU

# ? May 10, 2024 14:18

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

MrMoo posted:

Seems a perfectly reasonable request, why do you care?

It's a network hosted VM, meaning there's annoying latency and general slowness. I just wanted to get a feel for whether this is normal, I've not worked with enough different companies to know.

# ? Feb 15, 2016 02:58

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

The Wizard of Poz posted:

It's a network hosted VM, meaning there's annoying latency and general slowness. I just wanted to get a feel for whether this is normal, I've not worked with enough different companies to know.

It's coming up more, it makes it a lot easier to deploy new PCs that are consistent, helps remove issues of "works on my machine". Shouldn't really be laggy if it's implemented well though.

# ? Feb 15, 2016 03:01

MrMoo: Sep 14, 2000

Latency and slowness should not be an issue on any LAN or even metropolitan network, you may wish to investigate the tools you are using.

For example for consoles use mosh and Windows UI use RDPv8 with UDP enabled, I always work on remote machines on terrible networks and generally it hasn't been too bad. I do use a local web browser though, and remotely they're not always that great and Java UI is almost always terrible.

MrMoo fucked around with this message at 03:05 on Feb 15, 2016

# ? Feb 15, 2016 03:03

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Skandranon posted:

It's coming up more, it makes it a lot easier to deploy new PCs that are consistent, helps remove issues of "works on my machine". Shouldn't really be laggy if it's implemented well though.

Well that's what I assumed, but now we've been told that we can't duplicate each other's VMs and we each need to separately set our own up from scratch.

We use Visual Studio mainly, and I think the problem must be in the implementation, not the plan itself.

# ? Feb 15, 2016 03:05

MrMoo: Sep 14, 2000

The Wizard of Poz posted:

Well that's what I assumed, but now we've been told that we can't duplicate each other's VMs and we each need to separately set our own up from scratch.

Probably due to licensing if they are Windows VMs, you can always just use non-activated versions and rebuild every 90 days though so idk?

# ? Feb 15, 2016 03:08

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

The Wizard of Poz posted:

It's a network hosted VM, meaning there's annoying latency and general slowness. I just wanted to get a feel for whether this is normal, I've not worked with enough different companies to know.

I'd say VM yes, network not so much.

Why is it slow? Is it not located on the premises? Is file access prohibitively slow? If the method you're using to access it slow?

VMs cut down on the "works for me" garbage and gets everyone on the same playing fields. A good VM is also super easy to up/down/clean, and provides tools to help you get your job done easier and faster.

The Wizard of Poz posted:

Well that's what I assumed, but now we've been told that we can't duplicate each other's VMs and we each need to separately set our own up from scratch.

Doy? You should have a network equivalent of "vagrant up" to provision a production-spec VM in one command. They can't expect you all to each trudge through setting up an environment just-so, surely?

# ? Feb 15, 2016 03:08

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

v1nce posted:

Doy? You should have a network equivalent of "vagrant up" to provision a production-spec VM in one command. They can't expect you all to each trudge through setting up an environment just-so, surely?

That is exactly what they're expecting us to do. My workplace has been an absolute poo poo-show for a while now, this isn't even the stupidest part of it.

(By the way, it's slow because I don't think they've allocated enough resources to the VMs. The network connection itself seems fine.)

# ? Feb 15, 2016 03:13

MrMoo: Sep 14, 2000

Generally a VM needs less memory than a physical server, if you are building the VMs yourself do you have the guest tools appropriate for the VM vendor? They can make a gigantic difference in performance.

# ? Feb 15, 2016 03:18

KoRMaK: Jul 31, 2012

I want my devs to know how to setup their VM and our env. We have it documented though.

# ? Feb 15, 2016 03:19

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

MrMoo posted:

Generally a VM needs less memory than a physical server, if you are building the VMs yourself do you have the guest tools appropriate for the VM vendor? They can make a gigantic difference in performance.

No we are expected to just accept what they give to us.

# ? Feb 15, 2016 03:22

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

The Wizard of Poz posted:

No we are expected to just accept what they give to us.

Sounds like someone at your shitshow of a workplace read half of an article about VMs fixing something and they just threw it at someone to 'get it done' without guidelines or resources.

# ? Feb 15, 2016 03:26

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

The Wizard of Poz posted:

That is exactly what they're expecting us to do. My workplace has been an absolute poo poo-show for a while now, this isn't even the stupidest part of it.

(By the way, it's slow because I don't think they've allocated enough resources to the VMs. The network connection itself seems fine.)

I'm in full agreement that is quite retarded. DevOps or whoever is project lead and knows the production environment should be creating a base VM which is replicatable, or using a system (Packer?) that can make VMs to a spec.

If you just have everyone cooking their own VMs you're going to end up with "works for me!" just as bad as if you ran that poo poo on your local hardware.

KoRMaK posted:

I want my devs to know how to setup their VM and our env. We have it documented though.

I want it documented, but I don't want them to do it by hand. They should understand what's running and how it interfaces at a high level, but not have to go digging around to just fully kill/rebuild their work space.
What I've got right now can bring up a local cluster in ~30 minutes (more like 5 if we had local cache) on a vagrant VM. If it starts acting weird we just do vagrant destroy && vagrant up and we're back to zero in another 30.

Whoever is responsible for the live server needs to be responsible for the dev VM, making sure it stays up-to-date, and making sure its easy for developers to upgrade to the latest matching iteration when the live server is modified, otherwise the exercise is full of holes and soon becomes a pointless time waster.

Skandranon posted:

Sounds like someone at your shitshow of a workplace read half of an article about VMs fixing something and they just threw it at someone to 'get it done' without guidelines or resources.

A lot of people never ask "remind me why we're doing this?"

# ? Feb 15, 2016 03:28

KoRMaK: Jul 31, 2012

v1nce posted:

I'm in full agreement that is quite retarded. DevOps or whoever is project lead and knows the production environment should be creating a base VM which is replicatable, or using a system (Packer?) that can make VMs to a spec.

If you just have everyone cooking their own VMs you're going to end up with "works for me!" just as bad as if you ran that poo poo on your local hardware.

I want it documented, but I don't want them to do it by hand. They should understand what's running and how it interfaces at a high level, but not have to go digging around to just fully kill/rebuild their work space.
What I've got right now can bring up a local cluster in ~30 minutes (more like 5 if we had local cache) on a vagrant VM. If it starts acting weird we just do vagrant destroy && vagrant up and we're back to zero in another 30.

Whoever is responsible for the live server needs to be responsible for the dev VM, making sure it stays up-to-date, and making sure its easy for developers to upgrade to the latest matching iteration when the live server is modified, otherwise the exercise is full of holes and soon becomes a pointless time waster.

A lot of people never ask "remind me why we're doing this?"

It sounds like you have a much bigger environment than I.

# ? Feb 15, 2016 03:33

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

v1nce posted:

I'm in full agreement that is quite retarded. DevOps or whoever is project lead and knows the production environment should be creating a base VM which is replicatable, or using a system (Packer?) that can make VMs to a spec.

If you just have everyone cooking their own VMs you're going to end up with "works for me!" just as bad as if you ran that poo poo on your local hardware.

A lot of people never ask "remind me why we're doing this?"

I've been trying to get an answer to this, and as best I can tell the answer is "no one knows".

Skandranon posted:

Sounds like someone at your shitshow of a workplace read half of an article about VMs fixing something and they just threw it at someone to 'get it done' without guidelines or resources.

This is exactly what I'm thinking. The infrastructure team are not developers, yet have been given full control and autonomy to implement these VMs in whatever way they see fit. We were never consulted about what we would require from a VM, or whether we even thought it was a good idea in the first place.

We are a team of 4 developers with all of our documentation and code hosted on a central server, so I'm really struggling to identify the gains from this that are so convincing as to be worth the headaches. I freely admit I'm not an infrastructure expert, but the only gain I could see was ease of unfucking a dev environment by just resetting it back to a default VM. Now that I know we have no such thing as a default VM, I'm just confused.

putin is a cunt fucked around with this message at 03:38 on Feb 15, 2016

# ? Feb 15, 2016 03:34

KoRMaK: Jul 31, 2012

Yea sounds like your place likes doing stuff out of tradition and not evaluating the current situation and context.

Maybe talk to them about it.

# ? Feb 15, 2016 03:36

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

KoRMaK posted:

Yea sounds like your place likes doing stuff out of tradition and not evaluating the current situation and context.

Maybe talk to them about it.

This has been an ongoing thing for a long time and I'm already looking for work elsewhere (have a phone interview on Wednesday, wish me luck!)

# ? Feb 15, 2016 03:39

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

The Wizard of Poz posted:

This is exactly what I'm thinking. The infrastructure team are not developers, yet have been given full control and autonomy to implement these VMs in whatever way they see fit. We were never consulted about what we would require from a VM, or whether we even thought it was a good idea in the first place.

It sort-of is a good idea, but when all you understand is servers every problem requires a server.

The Wizard of Poz posted:

We are a team of 4 developers with all of our documentation and code hosted on a central server, so I'm really struggling to identify the gains from this that are so convincing as to be worth the headaches.

I assume you develop locally, not reach out to the remote server to make changes? How does VCS work if you're constantly stepping on eachothers dicks? I'm just going to assume that's not the case.

The Wizard of Poz posted:

I freely admit I'm not an infrastructure expert, but the only gain I could see was ease of unfucking a dev environment by just resetting it back to a default VM. Now that I know we have no such thing as a default VM, I'm just confused.

Yes, this. I would expect you to have a base-box that replicates production. If you need to arse about with the spec (o hey we need X software now for Y task) you should be able to crowbar it into your dev VM, try it out, and then get someone to provision it properly for every other developer and on the production box for the next release cycle. Everyone resets to zero, and everyone is happy.

If that's not the case, someone needs to review why your setup is how it is. Project lead should know what's what.

The Wizard of Poz posted:

This has been an ongoing thing for a long time and I'm already looking for work elsewhere (have a phone interview on Wednesday, wish me luck!)

when you get a job lined up you need to tell them their poo poo is whack and why. They can learn to grow or they can fester and fail once you don't have to deal with the fallout.

KoRMaK posted:

It sounds like you have a much bigger environment than I.

Probably true, but I should do an article on it or something because it's totally awesome.

# ? Feb 15, 2016 03:45

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

v1nce posted:

I assume you develop locally, not reach out to the remote server to make changes? How does VCS work if you're constantly stepping on eachothers dicks? I'm just going to assume that's not the case.

Sorry, when I say it's hosted on a central server, I mean via SVN. We check the code out locally, work on it, check it back in when done. Being such a small team we rarely run into conflicts as we normally have our own distinct areas of the project to work on.

v1nce posted:

when you get a job lined up you need to tell them their poo poo is whack and why. They can learn to grow or they can fester and fail once you don't have to deal with the fallout.

Yeah I will definitely be doing this. I'm one of two web developers, the other is more or less a trainee. The other two devs are software devs and not familiar with web stuff, so I think my departure will be a significant blow for them. I've also been with this company for 9 years and things have just gotten progressively worse and worse. So yeah, I'll have a fair few words prepared I imagine haha.

putin is a cunt fucked around with this message at 03:53 on Feb 15, 2016

# ? Feb 15, 2016 03:50

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Leshy posted:

On the earlier topic of CSS variables, I actually have a site that is the perfect use case for them, but I am not quite sure on the best method to implement them with a proper fallback. ....

I essentially need to build in a "Do you support CSS variables? If so, here is <style> --accent-color: [blah] </style>. If not, here is <link src='accent-color.css'>." check. The most straightforward way of doing this that I can see, is doing some browser sniffing and checking the useragent for browser version, then presenting the appropriate solution. However, as browser sniffing is it's own , I could use some input on whether this is a good idea or not or whether there is a better way of approaching this.

You could look at the new-ish '@supports' feature query. So apply your fallback styling by default, then use @supports (in JS or CSS) to see whether native variables are available...

See https://developer.mozilla.org/en/docs/Web/CSS/@supports

# ? Feb 15, 2016 13:03

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

The Wizard of Poz posted:

It's a network hosted VM, meaning there's annoying latency and general slowness. I just wanted to get a feel for whether this is normal, I've not worked with enough different companies to know.

Man, I have a Vagrant VM that I run locally and I can't even connect to it. I'd love to have some lag but all I'm getting is failed connections and timeouts.

It worked last week, apache is running, I can connect via SSH and the IP hasn't changed but no amount of

code:

vagrant reload

helps and I'm at a loss as what to do.

UPDATE: nvm, it just took 4 hours to suddenly decide to work.

nexus6 fucked around with this message at 17:05 on Feb 15, 2016

# ? Feb 15, 2016 13:14

Sedro: Dec 31, 2008

Leshy posted:

On the earlier topic of CSS variables, I actually have a site that is the perfect use case for them, but I am not quite sure on the best method to implement them with a proper fallback.

It is a site with multiple sections, which each have their own accent colour; this affects the font colour of some elements, the background colour of some others, as well as a few border colours here and there. It is currently set up so that the PHP template inserts a <link> tag to a small secondary stylesheet that sets the appropriate colours for that specific section. Works perfectly fine, but it does add several requests and a downloads (albeit very small) when navigating through various sections, and it requires the maintenance of several of these stylesheets in addition to the main one.

With CSS variables, I can simply have the PHP template insert "<style> :root{ --accent-color: [section-colour];} </style>" into the page to replace all of that, which is of course a very enticing prospect. However, as of course wide-spread support of CSS variables is still a while off, I'd like to keep the above method as a fallback for browsers that do not support CSS variables, for the time being. That means I can't rely on the built-in CSS variables fallback.

I essentially need to build in a "Do you support CSS variables? If so, here is <style> --accent-color: [blah] </style>. If not, here is <link src='accent-color.css'>." check. The most straightforward way of doing this that I can see, is doing some browser sniffing and checking the useragent for browser version, then presenting the appropriate solution. However, as browser sniffing is it's own , I could use some input on whether this is a good idea or not or whether there is a better way of approaching this.

You could use CSS.supports('--accent-color', 'blah') but that won't work in IE. If you care about IE you can create some DOM using CSS variables and examine the output with getComputedStyle.

# ? Feb 15, 2016 17:50

DarkLotus: Sep 30, 2001; Lithium Hosting
Personal, Reseller & VPS Hosting
30-day no risk Free Trial &
90-days Money Back Guarantee!

nexus6 posted:

Man, I have a Vagrant VM that I run locally and I can't even connect to it. I'd love to have some lag but all I'm getting is failed connections and timeouts.

It worked last week, apache is running, I can connect via SSH and the IP hasn't changed but no amount of
code:
vagrant reload
helps and I'm at a loss as what to do.

UPDATE: nvm, it just took 4 hours to suddenly decide to work.

I've had this happen on Windows + Vagrant. For some reason if I ssh in and ping the gateway, it starts working...

# ? Feb 15, 2016 18:37

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

nexus6 posted:

Man, I have a Vagrant VM that I run locally and I can't even connect to it. I'd love to have some lag but all I'm getting is failed connections and timeouts.

Because vagrant is a mysterious beast.

My solution to poo poo like this in Vagrant is usually:
- Boot the VM in VirtualBox outside of Vagrant. Log in (vagrant:vagrant). Shut down VM. Try again in Vagrant.
- Reboot my PC
- Check the various networks interfaces setup crap in VirtualBox.

# ? Feb 15, 2016 22:59

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Hey guys I am running a node.js backend server using express, and I'm trying to get post download sorted.

For security reasons, there are files that need to be download via a standard post method (i.e. webservervices/downloadFile.js). The post request is given the file name and express returns the appropriate file if the permissions are acceptable.

However once I get the response (and I do get the full file as a response), I don't get a download prompt or anything. I am actually not too sure how to turn my ajax request response into a downloaded file and searching online has places saying you just "can't" do it, or places that telling me I need to redirect to an actual file url (and in this case none of hte files are accessible in their state, they must be handed off through the script).

Any ideas?

# ? Feb 16, 2016 00:25

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Knifegrab posted:

Hey guys I am running a node.js backend server using express, and I'm trying to get post download sorted.

For security reasons, there are files that need to be download via a standard post method (i.e. webservervices/downloadFile.js). The post request is given the file name and express returns the appropriate file if the permissions are acceptable.

However once I get the response (and I do get the full file as a response), I don't get a download prompt or anything. I am actually not too sure how to turn my ajax request response into a downloaded file and searching online has places saying you just "can't" do it, or places that telling me I need to redirect to an actual file url (and in this case none of hte files are accessible in their state, they must be handed off through the script).

Any ideas?

You can use FileSaver to save javascript objects to disk. http://purl.eligrey.com/github/FileSaver.js/ Below is a snippet of using it. It's in TypeScript but the basic idea is the the same, create a Blob object and then pass it to the saveAs function in FileSaver.

code:

public saveJsonToFile = (name: string, obj: any) => {
            try {
                let blob = new Blob( [angular.toJson(obj, true)], { type: "text/plain" } );
                saveAs(blob, `${name}.json`); 
            }
            catch (exception) {
                this.$log.error("export failed", exception);
            }
}

Skandranon fucked around with this message at 00:34 on Feb 16, 2016

# ? Feb 16, 2016 00:31

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

I may have asked this before, also, there may be a better thread for it:

Do any of you have experience with Email Marketing Software companies? We currently use Silverpop and they seem to be getting worse (since the buyout by IBM??). I know of MailChimp, though I don't think we need help building the email, just managing the send. Any other suggestions?

# ? Feb 16, 2016 20:29

kedo: Nov 27, 2007

The Merkinman posted:

I know of MailChimp, though I don't think we need help building the email, just managing the send.

Just FYI you can use MailChimp purely for sending purposes if you want � you don't need to use their built in templates or editor if you don't want to.

# ? Feb 16, 2016 22:01

fuf: Sep 12, 2004; haha

The Merkinman posted:

I may have asked this before, also, there may be a better thread for it:

Do any of you have experience with Email Marketing Software companies? We currently use Silverpop and they seem to be getting worse (since the buyout by IBM??). I know of MailChimp, though I don't think we need help building the email, just managing the send. Any other suggestions?

I had to fix an email in http://constantcontact.com recently and it seemed pretty neat. Their responsive templates suck though.

They're one of those companies that tracks down your phone number as soon as you register and calls you to try and get you to subscribe to a plan. Seems like everyone does that now. dotcom-monitor.com called me every few days for weeks. It's a little annoying but I can see why it would work for them.

edit:

Lumpy posted:

Flexbox, and change the order of things maybe?

v1nce posted:

From what you're saying my immediate reaction would be; Don't over complicate it, just have two separate nav bars and display one for desktop and one for mobile. If you do that you can do it with really basic CSS positions (I say this because I don't know skeleton).

Forgot to say thanks for these. Yeah I ended up just having two separate elements for the contact details, one in the sidebar and one in the mobile footer.

fuf fucked around with this message at 22:06 on Feb 16, 2016

# ? Feb 16, 2016 22:04

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

kedo posted:

Just FYI you can use MailChimp purely for sending purposes if you want � you don't need to use their built in templates or editor if you don't want to.

Oh good, wasn't sure if emails had to be written in their editor.

fuf posted:

I had to fix an email in http://constantcontact.com recently and it seemed pretty neat. Their responsive templates suck though.

Which is fine, since I'm only looking for the part that sends, not the part that creates.

Someone elsewhere mentioned Sailthru

# ? Feb 16, 2016 22:23

The March Hare: Oct 15, 2006; _{Je r�ve d'un}
Wayne's World 3; Buglord

https://www.mailerlite.com/ these guys are pretty good if all you want to do is send some emails.

# ? Feb 16, 2016 22:59

Leshy: Jun 21, 2004

Sergeant Rock posted:

You could look at the new-ish '@supports' feature query. So apply your fallback styling by default, then use @supports (in JS or CSS) to see whether native variables are available...

See https://developer.mozilla.org/en/docs/Web/CSS/@supports

Sedro posted:

You could use CSS.supports('--accent-color', 'blah') but that won't work in IE. If you care about IE you can create some DOM using CSS variables and examine the output with getComputedStyle.

Thanks a lot both for your suggestion; I didn't know about CSS.supports yet, and it's pretty much the perfect answer to what I needed!

After some Googling, I ended up writing basically this snippet of JavaScript, which sets a CSS variable for browsers that support it, and links a second stylesheet with colour overrides for browsers that do not support it. As MSIE does not and will never support CSS variables anyway, I do not need an alternative solution for it in this case.

code:

  if (window.CSS && window.CSS.supports && window.CSS.supports('--css-variables', 0)){
    var nodetext = document.createTextNode(":root {--color-accent: <?php echo($color); ?>;}");
    document.getElementsByTagName("style")[0].appendChild(nodetext);
  } else {
      var node = document.createElement("link");
      node.setAttribute("rel","stylesheet");
      node.setAttribute("href","accent-<?php echo($color); ?>.css");
      node.setAttribute("media","all");
      document.getElementsByTagName("style")[0].appendChild(node);
  };

Note: I believe it's not considered good practice to insert PHP variables directly into JavaScript like this, but as the variable in this case is being set by the PHP script itself and does not rely on any user input, it seemed to be the most straightforward way of doing it in this particular case.

Leshy fucked around with this message at 16:22 on Feb 17, 2016

# ? Feb 17, 2016 16:19

kedo: Nov 27, 2007

Leshy posted:

After some Googling, I ended up writing basically this snippet of JavaScript, which sets a CSS variable for browsers that support it, and links a second stylesheet with colour overrides for browsers that do not support it.

I went back and read your original post:

Leshy posted:

It is a site with multiple sections, which each have their own accent colour; this affects the font colour of some elements, the background colour of some others, as well as a few border colours here and there. It is currently set up so that the PHP template inserts a <link> tag to a small secondary stylesheet that sets the appropriate colours for that specific section. Works perfectly fine, but it does add several requests and a downloads (albeit very small) when navigating through various sections, and it requires the maintenance of several of these stylesheets in addition to the main one.

I can't help but think this is way overkill. Why are you using multiple stylesheets and writing JS mixed with PHP to do something as simple as changing colors? Why not just do something like this?

code:

<body class="accent-blue">
<!-- or -->
<body class="accent-orange">

CSS code:

.accent-blue h1,
.accent-blue p {
  color: blue;
}
.accent-blue .some-div {
  border-color: blue;
}

.accent-orange h1,
.accent-orange p {
  color: orange;
}
.accent-orange .some-div {
  border-color: orange;
}

Seems like you're using a twenty ton nuclear powered pneumatic hammer to drive a nail.

# ? Feb 17, 2016 17:37

Leshy: Jun 21, 2004

kedo posted:

Seems like you're using a twenty ton nuclear powered pneumatic hammer to drive a nail.

Quite probably, yes. But isn't it a lot more fun to play around with and learn how to operate a twenty ton nuclear powered pneumatic hammer than a regular one, even if you only have a nail?

Your solution would work, but it's not a very efficient one either. As the CSS file for each accent colour consists of over a dozen selectors (text colour, background colour and various border colours across multiple media queries), and there are currently five diffferent colour sets with likely more being added in the future, that would add quite a chunk of CSS to the main stylesheet. Factor in having to declare every colour twice (once by CSS variable, once by fallback colour) and it quickly becomes quite a lot. In addition, it doesn't seem very elegant or efficient to serve visitors all the code for five (or more) colour schemes when they may only need one or two.

The true simple solution would be to simply add a few variations of class='accent-color' throughout the HTML, so that you only need to style and override this handful of classes. However, going through all of the pages to add these classes to every element that needs them is not the most enticing prospect, and I am personally not a fan of the trend to sprinkle the HTML with a million-and-one classes to begin with either.

# ? Feb 17, 2016 19:42

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Leshy posted:

Quite probably, yes. But isn't it a lot more fun to play around with and learn how to operate a twenty ton nuclear powered pneumatic hammer than a regular one, even if you only have a nail?

Your solution would work, but it's not a very efficient one either. As the CSS file for each accent colour consists of over a dozen selectors (text colour, background colour and various border colours across multiple media queries), and there are currently five diffferent colour sets with likely more being added in the future, that would add quite a chunk of CSS to the main stylesheet. Factor in having to declare every colour twice (once by CSS variable, once by fallback colour) and it quickly becomes quite a lot. In addition, it doesn't seem very elegant or efficient to serve visitors all the code for five (or more) colour schemes when they may only need one or two.

You may be trying to prematurely optimize here. How much larger would the CSS file actually be? Are you minimizing your CSS files? You should be aiming to make the code easy to maintain, as that is where the majority of your costs come from.

# ? Feb 17, 2016 20:12

Leshy: Jun 21, 2004

It's a hobby project, so there's no cost involved, and otherwise I wouldn't even start on implementing CSS variables yet

I just quickly checked out of curiosity, and adding in the declarations for all the colours to the main stylesheet would increase the size from ~15KB to 22.5KB (+1.5KB per colour) when compressed. Not much either way in absolute terms, but that's a huge relative increase. I'm pretty okay with a solution that serves an additional 1KB stylesheet when needed and if the browser does not yet support CSS variables, and requires literally only a single CSS declaration in the <head> for browsers that do.

# ? Feb 17, 2016 21:25

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Leshy posted:

Your solution would work, but it's not a very efficient one either. As the CSS file for each accent colour consists of over a dozen selectors (text colour, background colour and various border colours across multiple media queries), and there are currently five diffferent colour sets with likely more being added in the future, that would add quite a chunk of CSS to the main stylesheet. Factor in having to declare every colour twice (once by CSS variable, once by fallback colour) and it quickly becomes quite a lot. In addition, it doesn't seem very elegant or efficient to serve visitors all the code for five (or more) colour schemes when they may only need one or two.

The over engineered approach you've taken is a more pressing concern than the size of your CSS. Also why are you setting colours inside media queries? Are they actually different colours at different display sizes?

# ? Feb 17, 2016 21:33

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Leshy posted:

(+1.5KB per colour)

How? Do you mind posting an example of one of these colour sets?

# ? Feb 17, 2016 21:35

Leshy: Jun 21, 2004

The Wizard of Poz posted:

Also why are you setting colours inside media queries? Are they actually different colours at different display sizes?

There's only one colour for each section, but some elements are differently styled at different display sizes, yes; most notably the menu items.

The Wizard of Poz posted:

How? Do you mind posting an example of one of these colour sets?

Note that the mentioned figure of 1.5KB is based on the notion of having to add both .accent-color to each selector and declaring each color twice (both as a CSS variable and as a fallback colour), which would be required if they were to be merged into the main stylesheet as per the suggestion above, which ends up roughly doubling the CSS output.

This is an example set of SASS styles which compile into a 0,7KB CSS minimised CSS file.

code:

aside, h1, .backtotop, .photogrid span, .pg-previous, .pg-next {
  background-color: $color-accent;
}

.menu-button {
  &.active, &:hover {
    border-color: $color-accent;
  }
}

article>ul:not(.photogrid) li::before, footer a:hover, a, blockquote p, cite, .site-title, .nav-secondary a:hover, .intro, h2::before {
  color: $color-accent;
}
  
@media all and (max-width: 1023px) {
  .nav-primary ul {
    background-color: $color-accent;
  }
  .language-bar a:hover {
    color: $color-accent;
  }
}

@media all and (min-width: 1024px) {
  .nav-primary a:hover {
    color: $color-accent;
  }
  .nav-primary .active a, .language-bar .active {
    background-color: $color-accent;
  }
  .nav-secondary .active a {
    border-color: $color-accent;
  }
  .language-bar a {
    &:hover {
      background-color: darken($color-accent, 10%);
    }
  }
  .prev-link {
    border-top-color: $color-accent;
  }
  .next-link {
    border-bottom-color: $color-accent;
  }
}

# ? Feb 17, 2016 22:03

Adbot: ADBOT LOVES YOU

# ? May 10, 2024 14:18

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Leshy posted:

It's a hobby project, so there's no cost involved, and otherwise I wouldn't even start on implementing CSS variables yet

I just quickly checked out of curiosity, and adding in the declarations for all the colours to the main stylesheet would increase the size from ~15KB to 22.5KB (+1.5KB per colour) when compressed. Not much either way in absolute terms, but that's a huge relative increase. I'm pretty okay with a solution that serves an additional 1KB stylesheet when needed and if the browser does not yet support CSS variables, and requires literally only a single CSS declaration in the <head> for browsers that do.

While the 1.5KB/colour is strange in and of itself, you're still worrying over nothing. That extra 7.5KB takes milliseconds to transfer. There are dozens of other areas you should be more concerned about.

# ? Feb 17, 2016 22:12

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »