The Web Design & Development Megathread

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

«‹›361 »

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

nexus6 posted:

I've developed a simple HTML5 app designed for use on an iPad. It is used to collect data and, since the client couldn't guarantee that it would always have an internet connection, stores data in localstorage which can be later AJAX'ed into a database.

Since these devices are out and about, and offline, is there a good way I can store/view JavaScript logs? There seems to be a few options for remote JS error logging, but they all require the client application to be online.

Is there a way I can store console.log or console.error messages for later viewing without having to remake my localstorage saving?

override console.log and console.error to write to your localstorage as well.

# ? Mar 3, 2014 17:57

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 04:44

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

I have some scripts I'm writing for work that operate directly on the (static) DOM. What's a good solution for testing my JS to ensure it's acting as I want? I'm currently writing manual tests into an HTML test page, it's a massive ballache. I've played around with Jasmine, but it's not giving me much joy here

# ? Mar 3, 2014 20:32

Oh My Science: Dec 29, 2008

RobertKerans posted:

I have some scripts I'm writing for work that operate directly on the (static) DOM. What's a good solution for testing my JS to ensure it's acting as I want? I'm currently writing manual tests into an HTML test page, it's a massive ballache. I've played around with Jasmine, but it's not giving me much joy here

Maybe https://qunitjs.com/ is what you're after.

# ? Mar 3, 2014 20:49

PleasantDilemma: Dec 5, 2006; The Last Hope for Peace

Anyone ever had to benchmark google maps? I need to figure out how many icons I can put on the map before the browser really starts to slow down. But "slows down" isn't something I can really test in code. And I don't know how I would really set something up in jsperf for this since i would have to time things like panning and zooming the map.

# ? Mar 4, 2014 02:16

Oh My Science: Dec 29, 2008

I don't know the limit but here is what Google has to say on the subject.

https://developers.google.com/maps/articles/toomanymarkers

Performance is entirely dependant on the device and browser I think, which would make it hard to give an exact number.

# ? Mar 4, 2014 03:25

substitute: Aug 30, 2003; you for my mum

glompix posted:

That sucks, man! You could always run a local git repository and just never put it anywhere except your machine. There's still lots of value in that for change tracking.

Thanks everyone for the sympathy. I've seen this idea tossed around before, and I started testing it last night with git and mercurial to see how it would fit into my workflow.

Also, to further illustrate the sort of jackassery I have to put up with on a monthly/weekly/daily/hourly(?) basis -- the graphic designer (not a front-end expert by any means) sent me, at 4:50pm today, an example of his NEW! custom grid system/base CSS he'd like to start using for sites. I open the code after looking at the test page and I'm greeted with this sort of fuckery:

code:

...

.the-worst-grid-system-item.span_1_1, 
.the-worst-grid-system-item.span_1_2, 
.the-worst-grid-system-item.span_1_3, 
.the-worst-grid-system-item.span_2_3, 
.the-worst-grid-system-item.span_1_4, 
.the-worst-grid-system-item.span_2_4, 
.the-worst-grid-system-item.span_3_4, 
.the-worst-grid-system-item.span_1_5, 
.the-worst-grid-system-item.span_2_5, 
.the-worst-grid-system-item.span_3_5, 
.the-worst-grid-system-item.span_4_5, 
.the-worst-grid-system-item.span_1_6, 
.the-worst-grid-system-item.span_2_6, 
.the-worst-grid-system-item.span_3_6, 
.the-worst-grid-system-item.span_4_6, 
.the-worst-grid-system-item.span_5_6, 
.the-worst-grid-system-item.span_1_7, 
.the-worst-grid-system-item.span_2_7, 
.the-worst-grid-system-item.span_3_7, 
.the-worst-grid-system-item.span_4_7, 
.the-worst-grid-system-item.span_5_7, 
.the-worst-grid-system-item.span_6_7, 
.the-worst-grid-system-item.span_1_8, 
.the-worst-grid-system-item.span_2_8, 
.the-worst-grid-system-item.span_3_8, 
.the-worst-grid-system-item.span_4_8, 
.the-worst-grid-system-item.span_5_8, 
.the-worst-grid-system-item.span_6_8, 
.the-worst-grid-system-item.span_7_8, 
.the-worst-grid-system-item.span_1_9, 
.the-worst-grid-system-item.span_2_9, 
.the-worst-grid-system-item.span_3_9, 
.the-worst-grid-system-item.span_4_9, 
.the-worst-grid-system-item.span_5_9, 
.the-worst-grid-system-item.span_6_9, 
.the-worst-grid-system-item.span_7_9, 
.the-worst-grid-system-item.span_8_9, 
.the-worst-grid-system-item.span_1_10, 
.the-worst-grid-system-item.span_2_10, 
.the-worst-grid-system-item.span_3_10, 
.the-worst-grid-system-item.span_4_10, 
.the-worst-grid-system-item.span_5_10, 
.the-worst-grid-system-item.span_6_10, 
.the-worst-grid-system-item.span_7_10, 
.the-worst-grid-system-item.span_8_10, 
.the-worst-grid-system-item.span_9_10 {
	width: 100%;
}

...


@media all and (min-width: 640px) {

/*------(the-worst-grid-system) DEFAULTS------*/

.the-worst-grid-system-item.span_1_1 {width:100%;}
.the-worst-grid-system-item.span_1_2 {width:50%;}
.the-worst-grid-system-item.span_1_2 {*width:49.5%}
.the-worst-grid-system-item.span_1_3 {width:33.33%;}
.the-worst-grid-system-item.span_2_3 {width:66.66%;}
.the-worst-grid-system-item.span_1_4 {width:25%;}
.the-worst-grid-system-item.span_2_4 {width:50%;}
.the-worst-grid-system-item.span_3_4 {width:75%;}
.the-worst-grid-system-item.span_1_5 {width:20%;}
.the-worst-grid-system-item.span_2_5 {width:40%;}
.the-worst-grid-system-item.span_3_5 {width:60%;}
.the-worst-grid-system-item.span_4_5 {width:80%;}
.the-worst-grid-system-item.span_1_6 {width:16.66%;}
.the-worst-grid-system-item.span_2_6 {width:33.33%;}
.the-worst-grid-system-item.span_3_6 {width:50%;}
.the-worst-grid-system-item.span_4_6 {width:66.66%;}
.the-worst-grid-system-item.span_5_6 {width:83.33%;}
.the-worst-grid-system-item.span_1_7 {width:14.28%;}
.the-worst-grid-system-item.span_2_7 {width:28.57%;}
.the-worst-grid-system-item.span_3_7 {width:42.85%;}
.the-worst-grid-system-item.span_4_7 {width:57.14%;}
.the-worst-grid-system-item.span_5_7 {width:71.42%;}
.the-worst-grid-system-item.span_6_7 {width:85.71%;}
.the-worst-grid-system-item.span_1_8 {width:12.5%;}
.the-worst-grid-system-item.span_2_8 {width:25%;}
.the-worst-grid-system-item.span_3_8 {width:37.5%;}
.the-worst-grid-system-item.span_4_8 {width:50%;}
.the-worst-grid-system-item.span_5_8 {width:62.5%;}
.the-worst-grid-system-item.span_6_8 {width:75%;}
.the-worst-grid-system-item.span_7_8 {width:87.5%;}
.the-worst-grid-system-item.span_1_9 {width:11.11%;}
.the-worst-grid-system-item.span_2_9 {width:22.22%;}
.the-worst-grid-system-item.span_3_9 {width:33.33%;}
.the-worst-grid-system-item.span_4_9 {width:44.44%;}
.the-worst-grid-system-item.span_5_9 {width:55.55%;}
.the-worst-grid-system-item.span_6_9 {width:66.66%;}
.the-worst-grid-system-item.span_7_9 {width:77.77%;}
.the-worst-grid-system-item.span_8_9 {width:88.88%;}
.the-worst-grid-system-item.span_1_10 {width:10%;}
.the-worst-grid-system-item.span_2_10 {width:20%;}
.the-worst-grid-system-item.span_3_10 {width:30%;}
.the-worst-grid-system-item.span_4_10 {width:40%;}
.the-worst-grid-system-item.span_5_10 {width:50%;}
.the-worst-grid-system-item.span_6_10 {width:60%;}
.the-worst-grid-system-item.span_7_10 {width:70%;}
.the-worst-grid-system-item.span_8_10 {width:80%;}
.the-worst-grid-system-item.span_9_10 {width:90%;}

/*------END the-worst-grid-system DEFAULTS------*/


#respond .the-worst-grid-system-item.span_1_8 {width:50%;}

}

I, I just...

# ? Mar 4, 2014 04:01

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

That's not a grid system, it's a plea for euthanasia.

# ? Mar 4, 2014 04:26

ConanThe3rd: Mar 27, 2009

As in 960gs kidna grid?

# ? Mar 4, 2014 12:01

kedo: Nov 27, 2007

That looks like any of a billion commonly used grid systems I've seen previously. :confused:

# ? Mar 4, 2014 16:05

Authentic You: Mar 4, 2007; Listen now this is your
captain calling:
Your captain is dead.

substitute posted:

Also, to further illustrate the sort of jackassery I have to put up with on a monthly/weekly/daily/hourly(?) basis -- the graphic designer (not a front-end expert by any means) sent me, at 4:50pm today, an example of his NEW! custom grid system/base CSS he'd like to start using for sites. I open the code after looking at the test page and I'm greeted with this sort of fuckery:
code:
the worst grid system
I, I just...

What the gently caress is even going on in there? Is that like an inverse media query? I mean, I use media queries here and there to make sure my (already mostly responsive) stuff plays nice with phones, like handling collapsing menus, but... why is it backwards with the defaults inside? Also, when would you ever use a 7-column grid??

I've seen some more of this guy's poo poo in the Coding Horrors, and it's pretty horrific.

# ? Mar 4, 2014 16:53

pipes!: Jul 10, 2001; Nap Ghost

if you're managing your grid with grid-specific classes on your markup

# ? Mar 4, 2014 17:05

Vulture Culture: Jul 14, 2003; I was never enjoying it. I only eat it for the nutrients.

pipes! posted:

if you're managing your grid with grid-specific classes on your markup

He could always be using these as SASS mixins, right?

...right?

...guys?

# ? Mar 4, 2014 17:07

substitute: Aug 30, 2003; you for my mum

Authentic You posted:

What the gently caress is even going on in there? Is that like an inverse media query? I mean, I use media queries here and there to make sure my (already mostly responsive) stuff plays nice with phones, like handling collapsing menus, but... why is it backwards with the defaults inside? Also, when would you ever use a 7-column grid??

I've seen some more of this guy's poo poo in the Coding Horrors, and it's pretty horrific.

No, see that's the consultant's code in the coding horrors thread. This CSS is from the "senior" graphic designer.

Misogynist posted:

He could always be using these as SASS mixins, right?

...right?

...guys?

Hahahabahahhahahahahahahahah that would be assuming this person has any sort of clue about industry wide practices.

I tried showing him Less the other week, to illustrate how much simpler life could be. And then I get this in my inbox yesterday.

substitute fucked around with this message at 17:30 on Mar 4, 2014

# ? Mar 4, 2014 17:25

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Misogynist posted:

He could always be using these as SASS mixins, right?

...right?

...guys?

Enjoy the buffet!

Let's all just pretend this is that guy's first foray into thinking about this stuff, and he'll soon realize the errors of his ways. The alternative is just too awful.

# ? Mar 4, 2014 17:32

Authentic You: Mar 4, 2007; Listen now this is your
captain calling:
Your captain is dead.

substitute posted:

No, see that's the consultant's code in the coding horrors thread. This CSS is from the "senior" graphic designer.

Oh poo poo...

# ? Mar 4, 2014 17:40

Vulture Culture: Jul 14, 2003; I was never enjoying it. I only eat it for the nutrients.

I'm still laughing at "@media all and"

# ? Mar 4, 2014 17:58

substitute: Aug 30, 2003; you for my mum

But you see guys, it's mobile first...

Update: I have what looks like Moby Dick sized email response about how this system is better than all other grid systems/frameworks tested.

substitute fucked around with this message at 18:21 on Mar 4, 2014

# ? Mar 4, 2014 17:59

kedo: Nov 27, 2007

What's the name of the grid system anyways? Also:

substitute posted:

This CSS is from the "senior" graphic designer.

there's your problem right there. Five bucks says that entire Moby Dick sized email could be replaced with "I'm a designer and anything beyond basic CSS is frightening to me!"

# ? Mar 4, 2014 18:33

Heskie: Aug 10, 2002

kedo posted:

That looks like any of a billion commonly used grid systems I've seen previously.

Same. Its pretty funny but its really not that different from many I've seen.

I've never seen the benefit personally, especially if you've adopted something like SMACSS.

# ? Mar 4, 2014 18:34

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

substitute posted:

Hahahabahahhahahahahahahahah that would be assuming this person has any sort of clue about industry wide practices.

I tried showing him Less the other week, to illustrate how much simpler life could be. And then I get this in my inbox yesterday.

I once tried to do the same thing at one of the largest banks in the United States. The development team looked at me like I was an alien. Now granted, I don't know what kind of technical considerations there are for a trillion dollar bank, but to not even comprehend what I, as a designer, am pitching? Ugh.

Heskie posted:

I've never seen the benefit personally, especially if you've adopted something like SMACSS.

Is that similar to atomic CSS?

# ? Mar 4, 2014 19:27

substitute: Aug 30, 2003; you for my mum

Heskie posted:

Same. Its pretty funny but its really not that different from many I've seen.

I've never seen the benefit personally, especially if you've adopted something like SMACSS.

The benefit for us would be one agreed upon standard, with ANY sort of documentation, that jump starts development and solves many common problems up front (like still supporting IE8, and I don't know why IE7). Currently it's the wild west up in here from site to site.

From the designer's explanation email though, the system he's devised is not a grid system at all. It may look like it, but it's completely different, and based on the "group model". I don't know what that is, I guess because I'm a server-side developer?

Here are the packages he sent in the email to compare against, with several points on how they're wrong: Golden Grid system, Responsive grid system, The Square Grid, Less Framework, 960 grid.

http://goldengridsystem.com/
http://www.responsivegridsystem.com/
http://thesquaregrid.com/
http://lessframework.com/
http://960.gs/

I only know of 960 from that list, but again I'm a developer.

kedo posted:

What's the name of the grid system anyways? Also:

Well it has "responsive" in the title, but that's all I'm giving away in an open forum.

substitute fucked around with this message at 20:20 on Mar 4, 2014

# ? Mar 4, 2014 20:13

Nebulon Gate: Feb 23, 2013

substitute posted:

The benefit for us would be one agreed upon standard, with ANY sort of documentation, that jump starts development and solves many common problems up front (like still supporting IE8, and I don't know why IE7). Currently it's the wild west up in here from site to site.

From the designer's explanation email though, the system he's devised is not a grid system at all. It may look like it, but it's completely different, and based on the "group model". I don't know what that is, I guess because I'm a server-side developer?

Here are the packages he sent in the email to compare against, with several points on how they're wrong: Golden Grid system, Responsive grid system, The Square Grid, Less Framework, 960 grid.

http://goldengridsystem.com/
http://www.responsivegridsystem.com/
http://thesquaregrid.com/
http://lessframework.com/
http://960.gs/

I only know of 960 from that list, but again I'm a developer.

Well it has "responsive" in the title, but that's all I'm giving away in an open forum.

What the gently caress? What were this chucklefuck's points exactly?

# ? Mar 4, 2014 20:37

Oh My Science: Dec 29, 2008

That guy sounds crazy, anything with .span_blah_blah in it is clearly a grid system of some kind and I have never heard of the "group model" either.

If designers don't understand the benefits of using a CSS preprocessor I don't know what to say. You don't even have to use full fledged front-end frameworks, things like bourbon and neat exist if you don't want to start from scratch. Semantic UI for the Less folks is growing quickly.

Maybe show them Thoughtbot's guides as an example of proper documentation. It's one of the best examples of open sourced team guides available and it covers everything from setting up a new development machine to coding Sass.

# ? Mar 4, 2014 20:42

substitute: Aug 30, 2003; you for my mum

Nebulon Gate posted:

What the gently caress? What were this chucklefuck's points exactly?

To sum up, they all have some combination of the following problems:

* IE specific fixes like 
* Pseudo elements like :before / :after / :first-child
* Uses float for alignment
* <div class="clearfix"> after every row
* Hard coded break points

* Not mobile first
* Not responsive

Which the last two if this were explained in a meeting (with our manager(s) present) would have me cutting this person off to say "Then why did you even look at any of these systems after realizing that?"

# ? Mar 4, 2014 20:50

lunar detritus: May 6, 2009

SASS + Susy and you're done. Responsive, as semantic as you want it to be, etc.

However, grid-specific classes still have their use, mainly forms.

# ? Mar 4, 2014 21:09

Nebulon Gate: Feb 23, 2013

substitute posted:

To sum up, they all have some combination of the following problems:

* IE specific fixes like 
* Pseudo elements like :before / :after / :first-child
* Uses float for alignment
* <div class="clearfix"> after every row
* Hard coded break points

* Not mobile first
* Not responsive

Which the last two if this were explained in a meeting (with our manager(s) present) would have me cutting this person off to say "Then why did you even look at any of these systems after realizing that?"

Some of these are valid (though do any use clearfix at *all* anymore? We kind of had that wrapped up years ago with :after or even just plain old 'overflow: hidden'), most are not. You can adjust the breakpoints in the grids at your leisure. It's not like they're loving DRMed or anything. What the hell is his issue with pseudo-elements? Is he doing the .span-1-last poo poo?

I also assume he's using 'inline-block' and probably using the -4px margin-left trick and acting like he's a superstar, right?

I'd just like to know his argument for not using Bootstrap or Foundation's grid. You can, in fact, do that quite easily without any CSS pre-processor.

# ? Mar 4, 2014 21:10

substitute: Aug 30, 2003; you for my mum

gmq posted:

SASS + Susy and you're done. Responsive, as semantic as you want it to be, etc.

However, grid-specific classes still have their use, mainly forms.

Thanks. (Edit: oh poo poo you're assuming we even have a Ruby/Rails system in place. Well think again.) And speaking of forms, aka the sort of interactive development stuff I'm usually responsible for, it's awesome to start coding up a page and load it to see invisible inputs (etc., labels, h2-3-4, whatever) -- because the person responsible for styling has destroyed every single CSS element using Eric Meyer's reset, without providing any basic defaults.

Seriously though, I have to say to everyone, sorry for venting so much in this thread. I watch it to better myself, and rarely post. But I've had a bad last few days/weeks dealing with this sort of poo poo at work. I left early today after dealing with all the emails that I've been posting about.

substitute fucked around with this message at 21:56 on Mar 4, 2014

# ? Mar 4, 2014 21:19

substitute: Aug 30, 2003; you for my mum

Nebulon Gate posted:

Some of these are valid (though do any use clearfix at *all* anymore? We kind of had that wrapped up years ago with :after or even just plain old 'overflow: hidden'), most are not. You can adjust the breakpoints in the grids at your leisure. It's not like they're loving DRMed or anything. What the hell is his issue with pseudo-elements? Is he doing the .span-1-last poo poo?

I also assume he's using 'inline-block' and probably using the -4px margin-left trick and acting like he's a superstar, right?

I'd just like to know his argument for not using Bootstrap or Foundation's grid. You can, in fact, do that quite easily without any CSS pre-processor.

Yeah I agree as well, which is why I don't understand using the poor examples provided either.

And I have mentioned investigating ANY sort of framework (CSS, JS, PHP) to help us all, for about a year or less now. And that's usually met with silent to half-hearted responses. After a design conference last year (An Event Apart), I dropped a few major front-end frameworks in my dev web space for everyone to check out, and my encouraging email to everyone to investigate didn't get a single reply, or any casual discussion afterwards.

# ? Mar 4, 2014 21:44

kedo: Nov 27, 2007

How big is your firm, and is there anything to stop you from just using one?

The easiest way to sell people on this will be to talk to whoever makes the decisions / stands the most to gain from reducing project cost and saying something like this: "If we use a front end framework we will be able to cut down on development time at all stages of the project and increase or profitability."

# ? Mar 4, 2014 21:55

substitute: Aug 30, 2003; you for my mum

kedo posted:

How big is your firm, and is there anything to stop you from just using one?

The easiest way to sell people on this will be to talk to whoever makes the decisions / stands the most to gain from reducing project cost and saying something like this: "If we use a front end framework we will be able to cut down on development time at all stages of the project and increase or profitability."

Oh I'm in direct contact with the person/people over the team, like next door or down the hall, and it's very relaxed environment. But it's a private and very large worldwide company (not a well known corp.) and the core web team is basically just 5-6 people, depending on how you would define roles.

I think my only route at this point after my constant complaining and being the rear end in a top hat of the entire group, is to provide detailed examples of how people are wasting time re-inventing the wheel, instead of producing results / content for our projects.

# ? Mar 4, 2014 22:04

pipes!: Jul 10, 2001; Nap Ghost

I would eschew grid-specific classes in favor of more descriptive OOCSS approach for both performance and accessibility reasons, but this really sounds like a case of an inflexible design prima donna, coming from a former inflexible design prima donna.

# ? Mar 4, 2014 22:08

substitute: Aug 30, 2003; you for my mum

pipes! posted:

I would eschew grid-specific classes in favor of more descriptive OOCSS approach for both performance and accessibility reasons, but this really sounds like a case of an inflexible design prima donna, coming from a former inflexible design prima donna.

Honestly though, it's all from a very likeable guy personally -- who is not an expert in web-dev obviously, and is by all accounts planning ahead to take over the department, I think. So I'm at odds of trying to be a practical team player, but dealing with people that are playing (semi-relaxed) office/career politics.

drat it, I am not posting again for at least a week. Sorry everyone.

# ? Mar 4, 2014 22:29

Oh My Science: Dec 29, 2008

If he is that ignorant as an underling imagine what it will be like when he leads the team. Take Kedo's last post to heart and you might just win that lead position without playing office politics.

Bitch all you want here, I'm sure people are picking up useful information by reading between the lines. Lots of good advice being tossed around.

# ? Mar 4, 2014 22:34

kedo: Nov 27, 2007

You should keep posting because if nothing else it's amusing.

Anyhow speaking of grids, anyone aware of a SASS grid system that uses percentages instead of columns and spans like Neat? I can't wrap my brain around 12 columns.

# ? Mar 4, 2014 22:35

Oh My Science: Dec 29, 2008

kedo posted:

I can't wrap my brain around 12 columns.

Can't you just override the defaults ala the documentation.

code:

@import "neat/neat-helpers"; // or "neat-helpers" when in Rails

// Change the grid settings
$column: 90px;
$gutter: 30px;
$grid-columns: 10; // change this to whatever the hell you want
$max-width: em(1088);

// Define your breakpoints
$tablet: new-breakpoint(max-width 768px 8);
$mobile: new-breakpoint(max-width 480px 4);

Also, http://susy.oddbird.net/

# ? Mar 4, 2014 22:39

kedo: Nov 27, 2007

... yes.

Also Susy looks great. I've heard people mention it previously (on this page, even) but never took the time to look into it. @include span(%) is exactly what I'm looking for.

kedo fucked around with this message at 22:42 on Mar 4, 2014

# ? Mar 4, 2014 22:40

pipes!: Jul 10, 2001; Nap Ghost

Oh My Science posted:

Bitch all you want here, I'm sure people are picking up useful information by reading between the lines. Lots of good advice being tossed around.

It's also kind of a weird thing because in a lot of ways he's ahead of where a lot of designers currently are with their skills. It's great he's thinking about grids and class-based application of reusable stuff, just he's got a little more learning to do, and has to be open to it. This poo poo moves so freaking fast these days, in a lot of ways it's easier to just rest on your laurels.

# ? Mar 4, 2014 22:52

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

I have a bit of a mess to clean up and part of that has been moving poo poo that used to be done with jQuery animations to CSS. In order to effect changes, I'm toggling classes on a container element and making CSS rules that look like this:

code:

#container #someStupidThing {
   display: none;
}
#container.state1 {
   display: inline-block-or-whatever-I-have-to-do;
}

Some of these can get deep enough (like 5 to 6 elements in from the container) that constructing that in SASS gets kind of annoying because all of the state cases end up living apart from their parents:

code:

#container {
  #a {
    #b {
      #c {
        #d {}
      }
      #e {
        #f {}
      }
    }
  }
  &.state1 {
    @extend #d {
      //where the hell am I from, again? 100 lines up? 150?
    }
    @extend #c {
      // hope nobody forgets this is here!
    }
  }
}

I haven't used SASS a lot, so if I'm making some obvious newbie mistake, that's why. Is there a better way?

Edit: changing the example before someone tells me this is a non-problem because I'm only changing one element

Munkeymon fucked around with this message at 23:14 on Mar 4, 2014

# ? Mar 4, 2014 23:07

kedo: Nov 27, 2007

Munkeymon posted:

Some of these can get deep enough (like 5 to 6 elements in from the container)

This is really the core of your problem right there. This, coupled with what looks like an excessive use of IDs is going to make your code hard to maintain.

Look at this:

CSS code:


// SCSS
#container {
  color: red;

  &.active {
    color: green;
  }
}

.button {
  height: 10px;

  .active & {
    height: 20px;
  }
}

.widget {
  background: blue;

  .active & {
    background: yellow;
  }
}


// CSS OUTPUT

#container {
  color: red; }
  #container.active {
    color: green; }

.button {
  height: 10px; }
  .active .button {
    height: 20px; }

.widget {
  background: blue; }
  .active .widget {
    background: yellow; }

By using a trailing & and since I haven't nested things so deeply, it's easy for me to say "if the parent of X has the class .active, do a thing," and all my code for each element is one easy to read location.

e: If you ever nest something more than three deep, you should stop and reconsider what you're doing because you're probably just going to make your life miserable down the road!

e2: Based on your heavy use of ids, I'd also recommend you take a look at SMACSS. The short version of that entire book/site is "the majority of your CSS should be reusable, not specific to a single page or part of your site."

kedo fucked around with this message at 23:57 on Mar 4, 2014

# ? Mar 4, 2014 23:47

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 04:44

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

I'm being (overly?) defensive because the end goal is to make this usable by mostly-clueless people* as a widget on a page I don't fully control and I think I'd rather deal with complicated CSS than mysterious UI bugs that only happen during certain phases of the moon on the second Tuesday of the month when observed by an octagenarian with cateracts. It is explicitly not meant to be re-usable elsewhere in a site.

*think about the average Square Space user

Edit: maybe it'd be enough to slather everything in a prefix like

code:

$pfx: my-dumb-widget-name-gently caress-off;

.{$pfx}-contianer{
   //etc
}

hmm

Munkeymon fucked around with this message at 00:14 on Mar 5, 2014

# ? Mar 5, 2014 00:02

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

«‹›361 »