The Web Design & Development Megathread

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

«‹›361 »

The Dave: Sep 9, 2003

Instead of having all 3 of those items floated to the left individually, wrap them in something that is floated to the left. So then you just have the two floated objects. At that point it doesn't matter if your sidebar is floated left or right, or not floated at all: http://jsfiddle.net/54buabx3/1/

If the page is going to start getting complex though look into an already established grid framework that will handle responsiveness in an easy way. ( IMO )

# ? Feb 12, 2015 13:46

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 17:19

fuf: Sep 12, 2004; haha

The Dave posted:

Instead of having all 3 of those items floated to the left individually, wrap them in something that is floated to the left. So then you just have the two floated objects. At that point it doesn't matter if your sidebar is floated left or right, or not floated at all: http://jsfiddle.net/54buabx3/1/

If the page is going to start getting complex though look into an already established grid framework that will handle responsiveness in an easy way. ( IMO )

Thanks man. That was really obvious. Sometimes I lament the fact my brain can't solve these basic logical problems.

# ? Feb 12, 2015 14:36

kedo: Nov 27, 2007

darthbob88 posted:

It does, and that's actually half the problem. According to my boss, our internal tracking isn't matching the GA data as far as visits from desktop/tablet/phone/telepathy are concerned, so he wants to beef up our tracking to find out where the mismatch comes from. Which means I have to know and log whether somebody's visiting from desktop/tablet/phone/tin cans on a string. I am quite happy to tell him it's impossible/impractical, but if there is a quick and easy way, fuckit, let's add it.

Do you know how your internal tracking works? It sounds to me like that's probably the issue. GA is fairly reliable. If it's some custom written system someone in your position previously baked up on their own, it's probably pretty crappy.

# ? Feb 12, 2015 16:52

darthbob88: Oct 13, 2011; YOSPOS

kedo posted:

Do you know how your internal tracking works? It sounds to me like that's probably the issue. GA is fairly reliable. If it's some custom written system someone in your position previously baked up on their own, it's probably pretty crappy.

I do not, and yeah it probably is messed up, most likely someplace where I can't easily fix it.

Maluco Marinero posted:

There really isn't. A web browser can pretend to be whatever the gently caress it wants to be. Chrome calls itself "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36" in its user agent string. The best you can get is rough metrics based on things you can generally measure, and its unlikely you'll find a way to be more accurate than what analytics tells you.

Impossible/impractical, then. Good to hear, I'll let my bosses know and move on to other tasks.

# ? Feb 12, 2015 17:19

hayden.: Sep 11, 2007; here's a goat on a pig or something

Whenever I go to my site, it loads completely but the favicon in my browser remains the spinning circle like it's still loading. It also makes my browser much slower and the page is laggy. I'm not sure what's going on, anyone got feedback?

http://www.besiegedownloads.com/

The timeline in Chrome shows it takes about 3 seconds to long, but doesn't show anything going on after that. I know part of the slowness is that I have huge images, I'm working on the PHP to auto-size the images people upload.

Also, when you google "besiege downloads", it links to a random page on my site that has no content. What's up with that?

hayden. fucked around with this message at 05:15 on Feb 14, 2015

# ? Feb 14, 2015 04:59

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

I don't get that myself. Usually checking the console or net tab will reveal what's going on. Chrome, IE11, Firefox, I even registered, and it didn't occur.

You need a 404 page that works:
http://www.besiegedownloads.com/this-not-giving-me-a-404-page-you-idiot

I'm assuming that because your homepage content is being served instead of 404s, google is seeing that as duplicate content, freaks out, and down-ranks your index page as duplicate content. Only pages deeper into your site are being ranked nicely as a result.
Also try adding some more text, call-to-action type poo poo to your homepage, and its ranking will improve.

Also your PNG images are enormous (~1.2mb). You should probably fix that and re-parse them to JPG's with a lower quality.

Edit: You can do something like that with either Assetic or Munee.

v1nce fucked around with this message at 06:19 on Feb 14, 2015

# ? Feb 14, 2015 06:16

hayden.: Sep 11, 2007; here's a goat on a pig or something

It also probably doesn't help that my test site, on a different domain, somehow got a couple users instead of my live site. Which means Google probably indexed the test site too, and was like "welp this is identical". No idea how people managed to find it, I even emailed a guy who used it asking him how he found it and he said "youtube" but I have no referral traffic from Youtube so I don't know man. You'll be happy to learn that as a result of this, I finally made the transition to developing locally (XAMP) instead of doing everything remotely on test domains (which was already an improvement over just doing live updates [lol])

I'm working on the comment system now, so hopefully that will add more unique content to make Google happy. Thanks for the 404 heads up, never realized it mattered much.

Also the site isn't doing the infinite load for me either anymore, not sure what was up.

hayden. fucked around with this message at 07:33 on Feb 14, 2015

# ? Feb 14, 2015 07:00

Leshy: Jun 21, 2004

Chris! posted:

Hey, thank you for taking a look at this for me! That makes total sense and is a huge help.

No problem, good to hear it's working. The code you pasted seems to work fine.

quote:

But if the window size is small, and I hit the Maximize window button (or double click the title bar or whatever), the leftnav doesn't resize at all / it stays small. If I then resize the window manually, it resizes as required. The window.resize event is definitely being recognised, if I put an alert in there it fires as a window.resize event, but it's not resizing the content to match the image height. Any idea what I'm missing here?

Not sure about this one, though. By all rights, it should work - and the codepen example seems to behave just fine for me on the browsers I checked it in (IE, FF, Chrome, Opera, Vivaldi). Not sure what's going on if it isn't working properly for you.

# ? Feb 14, 2015 13:20

revmoo: May 25, 2006; #basta

hayden. posted:

It also probably doesn't help that my test site, on a different domain, somehow got a couple users instead of my live site. Which means Google probably indexed the test site too, and was like "welp this is identical". No idea how people managed to find it

I'd love to know how Google does this. I've had it index development sites that were running on my cable modem and I was the only person to ever access them.

# ? Feb 14, 2015 15:33

hayden.: Sep 11, 2007; here's a goat on a pig or something

In my case I left the analytics code in there, so I assume that's how.

# ? Feb 14, 2015 18:05

Leshy: Jun 21, 2004

I'm reminded of a question of my own.

Recently, I redesigned my personal website and took the step of building the CSS using SASS, which is indeed pretty awesome. Of course I did fall into the beginner trap of nesting styles too much, thinking more about organizing my SASS file neatly than the CSS output, which became needlessly verbose. I was also still using ids as styling hooks rather than classes, which I learned is somewhat frowned upon these days (or at the very least advocated against by a sizeable group).

So after some reading up, I decided to rebuild my SASS file and see whether I could reduce the resulting CSS file size. Using class selectors instead of ids did allow me to remove some code to deal with specificity issues and coupled with better nesting the file size came down nicely. I then wondered whether I could leverage SASS' @extend for further efficiency. Unfortunately, I didn't have (m)any elements which were similar enough to really make good use of them.

I did realise that I had quite a lot of font and color declarations sprinkled throughout my stylesheet and figured that making placeholders for those and extending these individual declarations might be more efficient. So I gave it a go, ending up with a SASS file that looks roughly like this:

code:

$serif:               'Georgia', 'Times New Roman', serif;
$sans-serif:          'Helvetica', 'Arial', sans-serif;
$color-default:       #111;
$color-page:          #eee;
$color-accent:        rgb(0,150,250);

[...]

%serif-regular        {font: 400 1rem/1.5rem $serif;}
%serif-large          {font: 400 1.25rem/1.5rem $serif;}
%sans-serif           {font-family: $sans-serif;}
%bold		      {font-weight: 600;}
%italic		      {font-style: italic;}

%bgcolor-default      {background-color: $color-default;}
%bgcolor-page         {background-color: $color-page;}
%bgcolor-accent       {background-color: $color-accent;}

%color-page           {color: $color-page;}
%color-accent         {color: $color-accent;}

[...]

nav {
  a {
    @extend %serif-regular;
    @extend %color-page;
    display: block;
    padding: 10px 20px;
    &:hover {
      @extend %color-accent;
    }
  }
  .active a {
    @extend %bgcolor-default;
    @extend %italic;
    @extend %bold;
    padding-left: 13px;
    border-left: 7px solid $color-page;
  }
}

h2 {
  @extend %serif-regular;
  @extend %sans-serif;
  @extend %bold;
  @extend %color-accent;
}

At first sight, this seemed like a terrible misuse of the extend functionality, but it does seem to work rather well. As long as the selectors are shorter than the declaration and the declaration is used several times throughout the stylesheet, you end up with a smaller CSS file. With the intended use of @extend, you still have to check the properties of a different element to see what styles are being extended, but in this way you still see what's happening as easily as with regular CSS.

In this example, you can tell at a glance that the h2 has the font settings applied for the regular serif font, which is changed to the sans-serif font, has bold applied and the accent color applied. With h2 being a very short selector, adding it to four declarations is more efficient than the other way around. It also makes it easy to apply multiple styles to an element without having to litter the HTML with classes as OOCSS does (which I'm not a big fan of) and it doesn't violate the DRY principle.

Admittedly, it does lead to a horrible CSS output where the styles for the h2 are spread across four different declaration statements, but most CSS these days tends to be viewed through a document inspector and I figure that ease-of-use is more important for the actual SASS file than for the minified output anyway.

Having said all of this, I still feel like I'm overlooking the reason why the above way of doing this is a terrible idea. I've Googled, but don't really come across any articles where this sort of use is discussed. All @extend examples seem to be about extending a full set of declarations for a standard item and then adding a few individual rules to it.

So yeah, to sum up: why is this a terrible idea and shouldn't I be doing this, or alternatively, why is this a pretty good idea and aren't people (discussing) doing this?

Leshy fucked around with this message at 18:13 on Feb 14, 2015

# ? Feb 14, 2015 18:11

chami: Mar 28, 2011; Keep it classy, boys~; Fun Shoe

Leshy posted:

I'm reminded of a question of my own.

Recently, I redesigned my personal website and took the step of building the CSS using SASS, which is indeed pretty awesome. Of course I did fall into the beginner trap of nesting styles too much, thinking more about organizing my SASS file neatly than the CSS output, which became needlessly verbose. I was also still using ids as styling hooks rather than classes, which I learned is somewhat frowned upon these days (or at the very least advocated against by a sizeable group).

So after some reading up, I decided to rebuild my SASS file and see whether I could reduce the resulting CSS file size. Using class selectors instead of ids did allow me to remove some code to deal with specificity issues and coupled with better nesting the file size came down nicely. I then wondered whether I could leverage SASS' @extend for further efficiency. Unfortunately, I didn't have (m)any elements which were similar enough to really make good use of them.

I did realise that I had quite a lot of font and color declarations sprinkled throughout my stylesheet and figured that making placeholders for those and extending these individual declarations might be more efficient. So I gave it a go, ending up with a SASS file that looks roughly like this:
code:
$serif:               'Georgia', 'Times New Roman', serif;
$sans-serif:          'Helvetica', 'Arial', sans-serif;
$color-default:       #111;
$color-page:          #eee;
$color-accent:        rgb(0,150,250);

[...]

%serif-regular        {font: 400 1rem/1.5rem $serif;}
%serif-large          {font: 400 1.25rem/1.5rem $serif;}
%sans-serif           {font-family: $sans-serif;}
%bold		      {font-weight: 600;}
%italic		      {font-style: italic;}

%bgcolor-default      {background-color: $color-default;}
%bgcolor-page         {background-color: $color-page;}
%bgcolor-accent       {background-color: $color-accent;}

%color-page           {color: $color-page;}
%color-accent         {color: $color-accent;}

[...]

nav {
  a {
    @extend %serif-regular;
    @extend %color-page;
    display: block;
    padding: 10px 20px;
    &:hover {
      @extend %color-accent;
    }
  }
  .active a {
    @extend %bgcolor-default;
    @extend %italic;
    @extend %bold;
    padding-left: 13px;
    border-left: 7px solid $color-page;
  }
}

h2 {
  @extend %serif-regular;
  @extend %sans-serif;
  @extend %bold;
  @extend %color-accent;
}
At first sight, this seemed like a terrible misuse of the extend functionality, but it does seem to work rather well. As long as the selectors are shorter than the declaration and the declaration is used several times throughout the stylesheet, you end up with a smaller CSS file. With the intended use of @extend, you still have to check the properties of a different element to see what styles are being extended, but in this way you still see what's happening as easily as with regular CSS.

In this example, you can tell at a glance that the h2 has the font settings applied for the regular serif font, which is changed to the sans-serif font, has bold applied and the accent color applied. With h2 being a very short selector, adding it to four declarations is more efficient than the other way around. It also makes it easy to apply multiple styles to an element without having to litter the HTML with classes as OOCSS does (which I'm not a big fan of) and it doesn't violate the DRY principle.

Admittedly, it does lead to a horrible CSS output where the styles for the h2 are spread across four different declaration statements, but most CSS these days tends to be viewed through a document inspector and I figure that ease-of-use is more important for the actual SASS file than for the minified output anyway.

Having said all of this, I still feel like I'm overlooking the reason why the above way of doing this is a terrible idea. I've Googled, but don't really come across any articles where this sort of use is discussed. All @extend examples seem to be about extending a full set of declarations for a standard item and then adding a few individual rules to it.

So yeah, to sum up: why is this a terrible idea and shouldn't I be doing this, or alternatively, why is this a pretty good idea and aren't people (discussing) doing this?

Here's a good set of guidelines to look at.

For one, extend doesn't work in media queries at all. They're also a pain in the butt to debug even with document inspectors, and it creates weird relationships between otherwise disparate elements that might confuse anyone who has to maintain/work on the same project. Personally I would just use mixins with default arguments; I can use those in media queries as far as I recall.

chami fucked around with this message at 19:41 on Feb 14, 2015

# ? Feb 14, 2015 19:36

Leshy: Jun 21, 2004

chami posted:

Here's a good set of guidelines to look at.

Thanks, I knew there had to be some good arguments why the above isn't a good idea. I think there's some points to be made against the relationship argument, insofar that this relationship only ends up existing in the output CSS file, which isn't something that anyone maintaining the project should be working on anyway.

The media query limitation equally isn't that much of an issue (for me), but I wasn't aware that gzip compression was so efficient in nullifying the duplicate statements as to nearly negate the file size savings. That pretty much makes the @extend method pretty much useless in itself, especially considering the drawbacks.

Thanks for the link, much appreciated. It contained links to a couple other good articles on the subject, so now I'm a little bit wiser than I was before!

# ? Feb 14, 2015 23:35

hayden.: Sep 11, 2007; here's a goat on a pig or something

Font Awesome seems to mess up sometimes on my site:

but it's weird because it acts like it completely does not have the font with a few exceptions (the bug, cog, shield, etc) and if I just move my cursor over the error square, the font pops back normal. Any ideas?

hayden. fucked around with this message at 01:30 on Feb 15, 2015

# ? Feb 15, 2015 01:27

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

hayden. posted:

Font Awesome seems to mess up sometimes on my site:

but it's weird because it acts like it completely does not have the font with a few exceptions (the bug, cog, shield, etc) and if I just move my cursor over the error square, the font pops back normal. Any ideas?

Does your :hover styling change the font characteristics at all? It's possible that the font doesn't have a particular character with the default font styling for your site, but does have it for the hover styling.

# ? Feb 15, 2015 02:12

hayden.: Sep 11, 2007; here's a goat on a pig or something

Hovering doesn't do anything other than change the background color the pill. I can't reliably replicate it despite plenty of trying. It also seems to happen more on my local copy running on XAMP.

If I uncheck the "font" attribute in this screenshot and recheck it, it also fixes the problem (for everything on the page of that class).

hayden. fucked around with this message at 03:23 on Feb 15, 2015

# ? Feb 15, 2015 03:19

chami: Mar 28, 2011; Keep it classy, boys~; Fun Shoe

I googled your site and it displayed the font-awesome icons without any problem. Not sure what's going on with it.

# ? Feb 15, 2015 14:40

ArcticZombie: Sep 15, 2010

I have some elements which need to be 100% of the width/height of the page, including when you scroll horizontally/vertically. As an example, this black bar is set to 100% width:

What kind of CSS wizardry do I have to pull to get it to work correctly?

# ? Feb 15, 2015 15:59

Chris!: Dec 2, 2004; E

ArcticZombie posted:

I have some elements which need to be 100% of the width/height of the page, including when you scroll horizontally/vertically. As an example, this black bar is set to 100% width:

What kind of CSS wizardry do I have to pull to get it to work correctly?

If you set the black bar to position: fixed; it will be fixed in position even when you scroll, hope this is what you're after? And if you set it to 100vw this will be 100% of the viewport width which I think will be 100% of the initial viewport width even with a horizontal scrolling website (haven't tried that though and I'm on mobile right now so can't test, sorry).

Chris! fucked around with this message at 19:10 on Feb 15, 2015

# ? Feb 15, 2015 19:07

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

Note that vm has limited browser support:

http://css-tricks.com/viewport-sized-typography/ posted:

IE 10+, Firefox 19+, Chrome 34+, Safari 7+, Android 4.4+, iOS 6+ - Supported

Chrome 20-34, Safari 6 - Supported but has repaint issue

Chris! already got it with the position:fixed, but here's a jsfiddle example of the whole shebang:
http://jsfiddle.net/127d4y0x/

Interestingly it doesn't matter where you place the fixed element, it still attaches to the absolution position and size of the body:
http://jsfiddle.net/127d4y0x/1/

# ? Feb 16, 2015 04:27

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Be warned that that isn't universally true. If transform is used on any parents of a fixed element, it resets the context to that transformed element.

# ? Feb 16, 2015 07:02

caberham: Mar 18, 2009; by Smythe; Grimey Drawer

Hello everyone, super newbie here hope this is the right thread and I have been lurking a bit. I was going to ask a silly question but fixed it myself. However, are ID tags under <div> constrained by scope? And what is the verdict of polymer to create your own elements?

Thanks again. Oh and I really ought to learn and use github for easy version control rollback. Hopefully one day I will be more competent and help out github projects.

caberham fucked around with this message at 10:32 on Feb 16, 2015

# ? Feb 16, 2015 10:24

Kekekela: Oct 28, 2004

caberham posted:

However, are ID tags under <div> constrained by scope?

ID's are not scoped to the elements in which they appear, no. They are unique to the document.*

* _{I think this is probably not semantically/technically true in html5 but for all intents and purposes here you don't need to worry about that}

# ? Feb 16, 2015 15:42

kedo: Nov 27, 2007

Kekekela posted:

* _{I think this is probably not semantically/technically true in html5 but for all intents and purposes here you don't need to worry about that}

Pretty sure IDs are not constrained any scope other than window in the HTML 5 dom.

# ? Feb 16, 2015 18:35

caberham: Mar 18, 2009; by Smythe; Grimey Drawer

Yeah, that's what I thought as well. It's just that my bootstrap modal window wasn't popping out properly when the <div> tag was nested in another tabbable pane :iiam:

The screen was still listening to another java event and leaving the page gave me an alert message. Anyways...

That's why people started automating CSS with Sass, less and other frameworks/tools right? I kind of shiver about the thought of managing multiple id tags. So how do the Pro's do it? Just make a class out of a bunch of id's? At what point do you make more classes or switch from Id's? Sorry if my questions are more on the abstract end, I guess I will figure things out the more I practice and learn from other resources.

Any has anyone here worked with Django and made Open ERP or Odoo modules? How hard is it working with 3rd party API's for "basic" functionality? Signed up for coursera "An Introduction to Interactive Programming in Python (Part 1)" course. Hopefully I can stick to the end and get something out of it

# ? Feb 16, 2015 19:10

Clark Nova: Jul 18, 2004

An ID *should* be unique within a document. Libraries like jQuery will just grab the first element and ignore the rest if you have multiple with the same ID. If you need to attach the same behavior to multiple elements, just give them a class. An element can have multiple classes, and you need not specify styling in CSS for every class that exists.

# ? Feb 16, 2015 19:27

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

caberham posted:

Yeah, that's what I thought as well. It's just that my bootstrap modal window wasn't popping out properly when the <div> tag was nested in another tabbable pane The screen was still listening to another java event and leaving the page gave me an alert message. Anyways...

Was the other tab pane hidden? You can't show something thing (modal) that's hidden by the parent being display:none or visibility:hidden. Modal HTML usually sits as far outside the main page content as possible for this reason.

caberham posted:

That's why people started automating CSS with Sass, less and other frameworks/tools right? I kind of shiver about the thought of managing multiple id tags. So how do the Pro's do it? Just make a class out of a bunch of id's? At what point do you make more classes or switch from Id's? Sorry if my questions are more on the abstract end, I guess I will figure things out the more I practice and learn from other resources.

There's probable an article on this somewhere and I am not a designer, but here I go anyway.

As Clark Nova said, IDs can (should) only appear once on a page, meaning they are unique to the element they are attached to. Common examples might be "#body-content", "#sidebar-left", "#footer" to name a few.
They're also used to connect some basic elements together, like inputs and labels, or tables and headers:

code:

<label for="my-input">Input Thing</label>
<input id="my-input" type="text">

<table>
	<tr>
		<th></th>
		<th id="alpha">Properties</th>
		<th id="bravo" colspan="2">Costs</th>
	</tr>
		<th id="item1">My Item</th>
		<td headers="alpha item1">Big, Red</td>
		<td headers="bravo item1">1200</td>
		<td headers="bravo item1">1500</td>
	<tr>
</table>

Classes on the other hand can appear multiples times, and can be stacked. Stacking basically concatenates the rules together for that one element.

code:

<button class="btn btn-warning">Kill all humans</button>

This kind of declaration is intended for re-use. You add the .btn class to every "button" element you want to look like that particular type of button. You then modify that .btn default style by augmenting it with .btn-something variants, like danger, warning, primary, etc.

In raw CSS you can end up writing a lot of crap like this:

code:

#sidebar-left nav.main-menu > ul > li a {
    color: black;
}
#sidebar-left nav.main-menu > ul > li:hover a {
    color: red;
}

Somewhere along the lines someone went "this could be optimised a lot, and give us some programmatic control of our CSS", and LESS/SCSS/SASS age began.
The CSS can then look something like this, in SCSS (reader beware: I'm rusty):

code:

#sidebar-left {
	nav.main-menu {
		> ul {
			> li {
				color: black;
				&:hover {
					color: red;
				}
			}
		}
	}
}

Advantages: You're not repeating yourself in every declaration, leading to less typing, less typos, less bugs, quicker working. Changing the struture doesn't mean you have to change a thousand declarations.
LESS/SCSS/SASS is still just an intermediate language - it's still compiled out to raw CSS declarations.

Various frameworks exist (Foundation, Bootstrap) to make your life easier getting off the ground. They also standardise the various browsers and environments to look and behave as similarly as possible, and they're maintained so any changes to those environments get fixed and everything continues to work as desired.
If you're doing it right then you'll come to restyle the framework you're using, giving your site a more unique feel, rather than just another bootstrap clone. You'll also come to dig deeper into the underlying CSS and add changes, tweaks, and new CSS declarations as needs be.

When you're writing new CSS rules, namespacing your CSS is one of the most important factors to not making a complete mess, and avoiding the need to use !important all over the place. Personally I find the use of !important an indicator that the designer didn't appropriately constrain their rules, and are fighting their own lack of planning.
You can namespace your rules in a variety of ways. The most obvious is by a parent ID, where your CSS is only intended to appear in one specific location on your site, such as in the footer:

code:

#footer .column {
	width: 50%;
	float: left;
}

Be aware that when you're working in the body content, it's rare that an ID namespace is ever appropriate. Defining poo poo like #body-content nav ul li helps nobody, cause the next person to use a <ul> inside a <nav> will want to hurt you.

Another super obvious option is by a container class:

code:

.btn .btn-danger{
	background: red;
}

Or a sibling class, so they must be used in conjunction for the rule to apply. This is handy if you need/want to use a common name (save, row, column, button, whatever) and usually appears for global-reuse rules.

code:

.icon.save {
	// uh..?
}

And finally, if you want to define a common class for use in a variety of places, but avoid stepping on your or anyone else's dick, there's the classic text namespacing:

code:

.autobots-column-left {
	width: 70%;
	float: left;
}
.autobots-column-right {
	width: 30%;
	float: left;
}

This makes maintaing your CSS pretty easy, provided you don't do anything retarded. Also comment your god drat code.

code:

/*
 * Main nav styles
 * Remember what I said about this kind of poo poo?
 */
#body-content nav ul li {
	font-size: 20px;
	color: red;
}

You also don't need to over declare your CSS, like #body-content div.sidebar ul.menu li.active a should be more like .sidebar .menu .active a because while this avoids interference, you badly harm your ability to re-use styles, which is what CSS is all about.
I realise I've just made a huge post about suitable approaches to basic CSS. I sure hope that's what you were asking about.

caberham posted:

Any has anyone here worked with Django and made Open ERP or Odoo modules? How hard is it working with 3rd party API's for "basic" functionality? Signed up for coursera "An Introduction to Interactive Programming in Python (Part 1)" course. Hopefully I can stick to the end and get something out of it

You might want to try more specific questions in the Django thread in case it catches someones eye over there. I'm not sure all those guys check this thread.

# ? Feb 17, 2015 00:11

Zero The Hero: Jan 7, 2009

I'm looking for some advice wrt javascript frameworks, and maybe more. I work developing websites using ASP.NET Web Forms with DevExpress controls. They're for other companies to submit and manage data and view reports. It's nothing overly complex, but we have some very large pages for data submission with a lot of validation and error messaging events as well as other controls that need to be shown/hidden/otherwise manipulated based on the user's input. Using the current setup, it's very hard to centralize any of the logic, since much of it needs to be executed in code behind as well as javascript, for multiple controls, and multiple pages. It's also difficult to manage the pages' lifecycles and we end up with unintended postbacks and page refreshes that slow the page down considerably.

We're about to start a new project doing very similar work, but we have the opportunity to update our technology. We have a lot of freedom in our choice. ASP.NET MVC is the obvious segue, but we have discussed Ruby on Rails too. My question now, though, is about javascript frameworks. None of us have any experience with them, and I'm fairly new to web development as a whole. If we stick with ASP.NET MVC, we won't need something overly complex, so I'm leaning towards React. On the other hand, we'll be dropping DevExpress controls, so it may be swifter to use something like Ember with its handlebars, I think they're called. We'd had Angular in the back of our head based solely on its popularity until the news of Angular 2.0 came out, and it seems too late for us to adopt 1.x, and too early to adopt 2.0.

I've been reading the topic and you guys have already discussed frameworks a good bit, I'm just hoping for some more suggestions. I know the problems I'd like to avoid, and my priorities are getting more of our logic onto the clientside, and allowing for more reuse and centralization of code. A move to MVC will already be a big help, as will the inclusion of HTML5 and JQuery, but if we're going to update, we may as well be as cutting edge as we can.

# ? Feb 17, 2015 05:30

caberham: Mar 18, 2009; by Smythe; Grimey Drawer

Man you guys are so nice, thanks for being so informative. Yeah, you are right, the other tab pane was hidden. Really appreciate the simple approach to CSS. I will be working my way up to sass / less /scss in the future. This is a bit out of the blue, but is it possible to make some sort of spreadsheet/sql/database for CSS styles and just load that up? I'm using http://bootstrap-live-customizer.com/ and it's a bit fun. I do worry that if I over-customize bootstrap then it's no bootstrap anymore and everything breaks. The tutorial I'm using claimed to be boot-strap 3 but the class definitions for the <navba> are really off. Anyways, so much learning so much fun.

Bootstrap is a decent framework, making everything responsive and all, but hopefully I can learn how to customize and style it. I'm no designer or artist, but I have a gut feeling that all barebones bootstrap look kind of the same - Navbar, sliders, Well, feature items, contact button, footer. Everything is just so boxy and rectangular. Oh well, I'm just average i guess.

I just did a random search for "top websites" and found these guys:

http://tribalmedia.co.uk/

Looks snazzy, but their collapsed menu doesn't work :laffo:

Maybe it's just me being a goony goon and spending too much time on the internet to notice these things about web pages.

# ? Feb 17, 2015 05:32

Zero The Hero: Jan 7, 2009

Also, what do people think about two-way data binding? That was one of the main draws of Angular / Ember, but it seems it won't be included in future versions of either technology. It sounds so useful, though, is there any particular reason it's falling out of favor?

# ? Feb 17, 2015 06:43

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Because keeping your state well separated becomes more maintainable. The flux architecture is not just popular because it runs fast, its easier to control change and build big applications without getting wires crossed and messing things up.

# ? Feb 17, 2015 06:48

Sedro: Dec 31, 2008

Zero The Hero posted:

Also, what do people think about two-way data binding? That was one of the main draws of Angular / Ember, but it seems it won't be included in future versions of either technology. It sounds so useful, though, is there any particular reason it's falling out of favor?

I haven't heard anything like that about ember. Source?

# ? Feb 17, 2015 07:08

Zero The Hero: Jan 7, 2009

Sedro posted:

I haven't heard anything like that about ember. Source?

I don't have a source, it was just mentioned in a couple of articles I read recently. I could be wrong, but I did see it more than once, so I just assumed it was true. Like I said earlier, I don't know very much about javascript frameworks.

# ? Feb 17, 2015 07:16

consensual poster: Sep 1, 2009

Zero The Hero posted:

I don't have a source, it was just mentioned in a couple of articles I read recently. I could be wrong, but I did see it more than once, so I just assumed it was true. Like I said earlier, I don't know very much about javascript frameworks.

And where are you getting that 2-way binding won't be in future versions of Angular? I've seen nothing to indicate that is true.

# ? Feb 17, 2015 09:07

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

Sedro posted:

I haven't heard anything like that about ember. Source?

I can't find the relevant HN thread, but one of the maintainers stated a couple of weeks ago that future versions would have it disabled by default; not removed entirely though.

# ? Feb 17, 2015 12:39

syrup: Jul 18, 2003; I HAVE TAMED THE BEAST

RobertKerans posted:

I can't find the relevant HN thread, but one of the maintainers stated a couple of weeks ago that future versions would have it disabled by default; not removed entirely though.

The core team proposed this in their The Road to Ember 2.0 RFC

Highly recommend you give that a look if you haven't seen it as it elaborates exactly where the core team sees Ember going. Some of the items in the proposal have already been implemented and many more are on the way.

# ? Feb 17, 2015 15:34

ArcticZombie: Sep 15, 2010

Chris! posted:

If you set the black bar to position: fixed; it will be fixed in position even when you scroll, hope this is what you're after? And if you set it to 100vw this will be 100% of the viewport width which I think will be 100% of the initial viewport width even with a horizontal scrolling website (haven't tried that though and I'm on mobile right now so can't test, sorry).

I guess I wasn't too clear. If you go to the website, you can see the problem in 2 ways. If you make the window narrow enough so you have to scroll horizontally to see the entire board, when you scroll to the right you'll notice the black bar does not extend to cover this area. Likewise, if you make the page short enough that you need to scroll vertically and then press the help button, you'll notice the white background does not extend down into that area.

# ? Feb 17, 2015 20:12

kedo: Nov 27, 2007

I have a project moving into development that needs to be WCAG 2.0 AA compliant. I'm already aware of all of the requirements and have a few checklist resources, but are there any tools out there to which I can submit pages to see if they meet the standard?

# ? Feb 17, 2015 22:28

Sab669: Sep 24, 2009

This is probably an impossible question, but I've started a new project at work and I haven't touched web design & development in about 4 years.

This website has a huge horizontal scrollbar in IE9 and Chrome, a tiny horizontal scrollbar in IE11 and none (intended) in Firefox. I'm digging through the Master Page and CSS to see if anything immediately catches my eye but I really have no idea. Kind of just hoping this is some sort of remotely common issue and someone might have a suggestion where to start? :saddowns:

# ? Feb 17, 2015 22:48

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 17:19

kedo: Nov 27, 2007

Sab669 posted:

This is probably an impossible question, but I've started a new project at work and I haven't touched web design & development in about 4 years.

This website has a huge horizontal scrollbar in IE9 and Chrome, a tiny horizontal scrollbar in IE11 and none (intended) in Firefox. I'm digging through the Master Page and CSS to see if anything immediately catches my eye but I really have no idea. Kind of just hoping this is some sort of remotely common issue and someone might have a suggestion where to start?

CSS code:

body {
  overflow-x: hidden;
}

is probably the easiest solution. I'd also check the widths of elements on the page... if you have a horizontal scrollbar something is wider than the window. If you can figure out what that is, slapping a max-width on it could also help. But the overflow property, regardless of what element you have to put it on, is likely going to be your silver bullet.

# ? Feb 17, 2015 22:53

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

«‹›361 »