next »

[InfiniteStateMachine]

Anyone have much client side web experience? I want to essentially define some CSS consts for colors I use so changing colors later would be easier. Maybe even via some script/gui.

The thing is that it doesn't seem like you can really do that in CSS. So I looked up an answer and was introduced to LESS via stackoverflow. I have a couple questions.

1) Do I really have to install node.js and a bunch of stuff to use a CSS pre-processor? I thought node.js was a interactive javascript implementation primarily for programming network related backend stuff. Why would it be involved in a CSS pre-processor?

2) While LESS is cool, it also seems a little overkill when all I need to do is just define some color constants. Is there something less heavyweight I could use?


EDIT : I've thought about maybe making a class that only defines a color then having various other classes inherit from it but I'm worried about weird side effects or implications of using inheritance in CSS that I don't understand.

[oahda]

All you should need is the LESS program/compiler, but it seems it was incorporated in some bigger thing later on tho and now isn't available on its own anymore... That's weird. And dumb.

I can send you the program if you're on Mac. If not, isn't there another one that's pretty much the same thing called SASS? Check that out in that case.

[InfiniteStateMachine]

Unfortunately I'm on windows but thanks for the offer

SASS seems to be the next generation of LESS but it requires me to install Ruby! bwaahhhhh

I guess i'll try to single-value inheritance idea for now but I might return to this down the line because I notice they have functionality to change the style depending on resolution. I'm doing a wordpress template so I'm hoping they have the functionality change templates based off of screen size or device. Mainly because I'd like to do large structural changes based off screen size rather than only styling changes.

[oahda]

Maybe you can find someone who has the standalone LESS compiler for Windows. Or find it online somewhere.

Gah, why didn't they just leave it as a standalone alongside the bigger deal? t-t Or at least provide the old download.

[valrus]

A quick-n-dirty way would be to serve CSS through PHP.  Like:

Code:

<?php
header("Content-type: text/css");
$customColor = "#123456";
?>

.navDivLeft {
  color: <?php echo $customColor;?>;
}

[Cheesegrater]

1) Do I really have to install node.js and a bunch of stuff to use a CSS pre-processor? I thought node.js was a interactive javascript implementation primarily for programming network related backend stuff. Why would it be involved in a CSS pre-processor?

node.js was designed and is used for that purpose, but it is also used as a general purpose non-browser runtime for javascript. Since client side web dev guys are javascript guys, you will find that a lot of their build tools and helper scripts are written in javascript and need node.js to run.

Mainly because I'd like to do large structural changes based off screen size rather than only styling changes.

They call this responsive design. If you are interested in that, you can save yourself a lot of trouble by starting from a responsive framework instead of starting from scratch. I used bootstrap for mine - I'm sure if you google around you can find a tutorial to get it working with wordpress.

[InfiniteStateMachine]

A quick-n-dirty way would be to serve CSS through PHP.  Like:

Code:

<?php
header("Content-type: text/css");
$customColor = "#123456";
?>

.navDivLeft {
  color: <?php echo $customColor;?>;
}

hmm then I would have to put all that styling info directly in my html file though right?

1) Do I really have to install node.js and a bunch of stuff to use a CSS pre-processor? I thought node.js was a interactive javascript implementation primarily for programming network related backend stuff. Why would it be involved in a CSS pre-processor?

node.js was designed and is used for that purpose, but it is also used as a general purpose non-browser runtime for javascript. Since client side web dev guys are javascript guys, you will find that a lot of their build tools and helper scripts are written in javascript and need node.js to run.

Mainly because I'd like to do large structural changes based off screen size rather than only styling changes.

They call this responsive design. If you are interested in that, you can save yourself a lot of trouble by starting from a responsive framework instead of starting from scratch. I used bootstrap for mine - I'm sure if you google around you can find a tutorial to get it working with wordpress.

I have used bootstrap in the past. It was pretty good but I didn't like it's structural design constraints with the 12-column stuff. I know I may regret this but I'm going to try to do each layout myself.

[valrus]

hmm then I would have to put all that styling info directly in my html file though right?

Nope, you can just link it like a normal stylesheet.  (That's why the header command is in there, to tell the server "yeah, this  file is php but serve it as if it's css.")

But I noticed you said you're using WordPress; the following link suggests that WordPress (at least at the time of writing) doesn't like this, and needs some further massaging to get it to work: https://css-tricks.com/css-variables-with-php/

[valrus]

A hacky but fun solution: treat declared colors as indices into a color table, and then assign them the real colors at load time with javascript.  For example, the code below would treat the blue value of the declared color as an index into color table of up to 256 colors.  (This code is a bit silly and will run into problems, but illustrates the idea.  NB: At least some IEs return computed colors as hex rather than rgb, so in real code it would be necessary to parse and normalize them.)

Code:

.leftNavBar {
   color: #000001;
}

.rightNavBar {
   color: #000002;
}

Code:

var colormap = { '1' : '#990099', 
                 '2' : '#009900', 
                 '3' : '#000099' };

$.each(colormap, function(key, value) {
    $('*').filter(function() {
      return $(this).css('color').indexOf("0, 0, " + key + ')') > -1;
    }).css('color', value);
});

[InfiniteStateMachine]

hmm then I would have to put all that styling info directly in my html file though right?

Nope, you can just link it like a normal stylesheet.  (That's why the header command is in there, to tell the server "yeah, this  file is php but serve it as if it's css.")

But I noticed you said you're using WordPress; the following link suggests that WordPress (at least at the time of writing) doesn't like this, and needs some further massaging to get it to work: https://css-tricks.com/css-variables-with-php/

Ah interesting. Thanks for the info!

[oahda]

Well, do check out how to write responsive design from scratch. It's not that difficult. It can become quite a hassle without something like LESS tho, so do try to solve that first.

I will never be able to use vanilla CSS again.

[InfiniteStateMachine]

I THINK I've been reading up on responsive design but I'm not actually sure. Does it just mean the page resizes? I'm referring to this webpage

http://www.w3schools.com/html/html_responsive.asp

I thought responsive was more than that. I thought it was actually swapping out css files depending on certain conditions such as resolution or screen size.

That said. I actually want to profoundly change the layout depending on device screen size. My current wordpress site does that with its theme. If I look at it on my phone the menus are actually different and the layout is quite different. I suppose that might be possible to do with css but I would prefer to simply reauthor the layout for the mobile version of the site.

So the pseudo code might look like this :

if (mobile || screensize < 8 inches) use this css and php file
else use this css and php file.

Is that a wordpress thing or is this something you can do in general?

[Cheesegrater]

On newer browsers you do something like this:

Code:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

Older browsers (Say, IE before 9) it gets more involved and needs javascript.

Responsive stuff is typically client side, so if you wanted to sub in a different php file you would need to do a redirect, or some kind of ajax pull of the new HTML.

[oahda]

Or just use media queries in the CSS file itself. No need to copy 80% of your file three times.

[InfiniteStateMachine]

ah sweet! that's very cool


Unfortunate about not being able to swap on php easily. Hopefully WP has some convienince stuff. I can take a look at the current them I use and see how it's done. Often these theme files are pretty ugly and hard to read though.

[indie11]

Is it possible to produce a SMB like character controller using "Variable Time Step" ?
I am implementing one, but there is always a very minute difference in min and max jump heights because of variable step

[ThemsAllTook]

Is it possible to produce a SMB like character controller using "Variable Time Step" ?
I am implementing one, but there is always a very minute difference in min and max jump heights because of variable step

How does your acceleration formula work? I have this one written down in my notes:

Code:

position += velocity * timestep + 0.5 * acceleration * timestep * timestep;
velocity += acceleration * timestep;

[Katsusiro_7]

I`ve got one quick question.
What is the best (and not very difficult) way of securing data sent through UDP sockets?

[Billy Ninja]

(Not sure if quick or simple, but I think it might be very recurrent or uninteresting to have its own thread)

What is the best way to develop: simple, 2D games, cross-platform (Linux, Windows and Mac) in C? (C++ is out of question, I want to play with simple, small, straight forward, stuff)

Where:

1) I don't have to write very very basic stuff (or platform specific code)
2) I don't want to use a dev kit like Unreal or Game Maker or anything like that.

(maybe something at the abstraction level of XNA is what I'm looking for, or maybe something that goes further presenting some toolkit for thinks like tiling and 2d animation and physics)

PS: It's not for anything serious, it's mainly for educational purpose, to get a hang of lower level programming (since I work with Python and now I'm learning/working with Golang as well, but there's no game engine or libraries for it yet).

[Billy Ninja]

Anyone have much client side web experience? I want to essentially define some CSS consts for colors I use so changing colors later would be easier. Maybe even via some script/gui.

The thing is that it doesn't seem like you can really do that in CSS. So I looked up an answer and was introduced to LESS via stackoverflow. I have a couple questions.

1) Do I really have to install node.js and a bunch of stuff to use a CSS pre-processor? I thought node.js was a interactive javascript implementation primarily for programming network related backend stuff. Why would it be involved in a CSS pre-processor?

2) While LESS is cool, it also seems a little overkill when all I need to do is just define some color constants. Is there something less heavyweight I could use?


EDIT : I've thought about maybe making a class that only defines a color then having various other classes inherit from it but I'm worried about weird side effects or implications of using inheritance in CSS that I don't understand.

man, just don't use server-side LESS (or similar) compilation unless you really need dynamic and complex css operations. We use this process in the company I work at, and it's  such a pain in the ass... Because it's too much of a dependency to manage for something so trivial (like write a bunch of straight-forward CSS rules) and the processing time required for compilation escalates very quickly along with the CSS file-size, which can be troublesome in scenarios with many users or where you have to re-generate the css constantly.

I don't know your project or your problem well enough, but I would consider even writing a separate CSS files "manually" like a "player_colors.css" and include it in your DOM separately, just having to watch out for browser cache invalidation every time the content is edited.