Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
fletcher
Jun 27, 2003

ken park is my favorite movie

Cybernetic Crumb

The Merkinman posted:

How does everyone deal with client-side caching when rolling out new .css or.js? We just rolled out a facelift so some files are cached and others aren't, creating a broken Frankenstein's Monster of a site. I've seen appending ?dateOfEdit to the end of the file, but in that case I'd have to update every .html page too (or at least the most popular ones).

I use django-pipeline to combine and minify static resources at deployment time. One of the options it has is to stick a random alphanumeric string in the filename so it becomes something like mysite.dk3993ksk2d.min.js and mysite.39kd29kdkm2.min.css.

Adbot
ADBOT LOVES YOU

cbirdsong
Sep 8, 2004

Commodore of the Apocalypso
Lipstick Apathy
A highly disconcerting chart:



Why are IE 7, 8 and 9 on an upswing all of a sudden? Some kind of change in how the stats are compiled?

Oh My Science
Dec 29, 2008
Might have something to do with XP finally biting the bullet.

kedo
Nov 27, 2007

Yeah, 8 is the default version when you install Windows 7, so if people are finally beginning to drop XP that could be the reason. Doesn't really explain the uptick in 7, though.

Either way I give zero fucks and still plan on dropping support for 8 in a few months.

Spatulater bro!
Aug 19, 2003

Punch! Punch! Punch!

The more pertinent question is why is Chrome going down?

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

caiman posted:

The more pertinent question is why is Chrome going down?
I wonder if a new version of Chrome is bring incorrectly identified as older versions of Internet Explorer.

kedo
Nov 27, 2007

The Merkinman posted:

I wonder if a new version of Chrome is bring incorrectly identified as older versions of Internet Explorer.

You know what, that actually makes sense.

The first version of Chrome to use the Blink engine was 28, and version 28 was released around the middle of July.

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Chrome's user agent hasn't changed significantly, though:
code:
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.71 Safari/537.36
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.76 Safari/537.36
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.34 Safari/537.36

Funking Giblet
Jun 28, 2004

Jiglightful!

fletcher posted:

I use django-pipeline to combine and minify static resources at deployment time. One of the options it has is to stick a random alphanumeric string in the filename so it becomes something like mysite.dk3993ksk2d.min.js and mysite.39kd29kdkm2.min.css.

It's usually a hash of the file contents.

kedo
Nov 27, 2007

Munkeymon posted:

Chrome's user agent hasn't changed significantly, though:
code:
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.71 Safari/537.36
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.76 Safari/537.36
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.34 Safari/537.36

:iiam:

I really can't believe IE 7 is regaining marketshare. That would mean people were installing Vista, which is hahahahaha

jackpot
Aug 31, 2004

First cousin to the Black Rabbit himself. Such was Woundwort's monument...and perhaps it would not have displeased him.<
Yeah, we noticed the same thing at work here a few months ago - figured that if Chrome was falling as IE7 is rising, it has to be some fuckery in how things are being counted.

kedo posted:

Either way I give zero fucks and still plan on dropping support for 8 in a few months.
We're in the process of dropping it now (our IE8 audience is at something like 2%, and falling fast), and I for one can't wait because man I am sick to loving death of having to make .png fallbacks for all my svg files.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Well, if the theory that people are dropping XP is true, then it could be that they used Chrome on XP and when they switched to a newer operating system they didn't bother to go back because, while it still sucks, newer versions of IE are better.

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Thermopyle posted:

Well, if the theory that people are dropping XP is true, then it could be that they used Chrome on XP and when they switched to a newer operating system they didn't bother to go back because, while it still sucks, newer versions of IE are better.

Yeah, and 7 could be coming back because they look around and see that Vista was 'next' so clearly that's the one to 'upgrade' to. At least I think that's how normal people think.

Oh My Science
Dec 29, 2008

Munkeymon posted:

At least I think that's how normal people businesses think.

Fixed that for you.

Most normal home users are having Windows 8 stuffed down their throat. You can't even buy a consumer PC with windows 7 anymore.

bobua
Mar 23, 2003
I'd trade it all for just a little more.

Could it be that a LOT of oem pc's were bought in the vista era but with an XP downgrade. Maybe companies are reimaging them and using the vista media now?

me your dad
Jul 25, 2006

What do brackets indicate in a CSS file, as seen below in the table id?

code:
table[id="Container"]{
	max-width:550px !important;
	width:100% !important;
		     }

Spatulater bro!
Aug 19, 2003

Punch! Punch! Punch!

me your dad posted:

What do brackets indicate in a CSS file, as seen below in the table id?

code:
table[id="Container"]{
	max-width:550px !important;
	width:100% !important;
		     }

Brackets are for targeting a certain attribute of the element, such as href, alt, etc.

VVVV I assume he means the "[]"s, not the "{}"s.

Spatulater bro! fucked around with this message at 22:01 on Nov 1, 2013

fletcher
Jun 27, 2003

ken park is my favorite movie

Cybernetic Crumb

me your dad posted:

What do brackets indicate in a CSS file, as seen below in the table id?

code:
table[id="Container"]{
	max-width:550px !important;
	width:100% !important;
		     }

That's a declaration block. Those properties will be applied to anything that matches the selector, meaning it would be applied to an element <table id="Container"></table>.

You can read more about CSS syntax here: https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax?redirectlocale=en-US&redirectslug=CSS%2FSyntax

fletcher
Jun 27, 2003

ken park is my favorite movie

Cybernetic Crumb
Any way to get the ellipsis on the first li here?

http://jsfiddle.net/fnb9g/

cbirdsong
Sep 8, 2004

Commodore of the Apocalypso
Lipstick Apathy

caiman posted:

Brackets are for targeting a certain attribute of the element, such as href, alt, etc.

As far as examples go, this is a pretty weird use of that selector, since table#Container or just #Container would do the exact same thing.

I've found this to be a pretty good overview of the weirder CSS selectors: http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/

Spatulater bro!
Aug 19, 2003

Punch! Punch! Punch!

cbirdsong posted:

As far as examples go, this is a pretty weird use of that selector, since table#Container or just #Container would do the exact same thing.

The only reason I could imagine using "id" in an attribute selector would be to select all elements whose ids contains a certain string. Like say you have a div with an id of "section_main", a div with an id of "section_sub", and one with an id of "section_footer", you could use
code:
div[id*="section"]
to target all of them (the asterisk makes it match if the id attribute contains "section" anywhere in it).

Depressing Box
Jun 27, 2010

Half-price sideshow.

fletcher posted:

Any way to get the ellipsis on the first li here?

http://jsfiddle.net/fnb9g/

The rules need to be on the element that contains the overflowing text. Try this:

CSS code:
li, li h1 {
    overflow: hidden;
    text-overflow: ellipsis;
}
Since the h1 is the container, though, the ellipses will use the h1's styling.

fletcher
Jun 27, 2003

ken park is my favorite movie

Cybernetic Crumb

Depressing Box posted:

The rules need to be on the element that contains the overflowing text. Try this:

CSS code:
li, li h1 {
    overflow: hidden;
    text-overflow: ellipsis;
}
Since the h1 is the container, though, the ellipses will use the h1's styling.

Thank you <3

Uziel
Jun 28, 2004

Ask me about losing 200lbs, and becoming the Viking God of W&W.
Using Bootstrap 3's responsive tables, is there an easy way to make the first column fixed?
http://getbootstrap.com/css/#tables-responsive

Oh My Science
Dec 29, 2008
http://sidebar.io introduced me to http://www.livesurface.com/ a few days ago, it's really cool. It requires Adobe Illustrator and it allows you to put your ideas on a number of real world canvases, great for lazy people like me who don't want to muck around in Photoshop. Not sure if I want to pay for it yet, but I already have a few use cases to justify it.

Pollyanna
Mar 5, 2005

Milk's on them.


This is prolly a dumb-assed question, but...where do I learn how to make slick-looking websites like sidebar.io? Right now my poo poo looks like this. Is there a compendium of design tips somewhere?

edit the answer is sidebar.io isn't it :(

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Pollyanna posted:

This is prolly a dumb-assed question, but...where do I learn how to make slick-looking websites like sidebar.io? Right now my poo poo looks like this. Is there a compendium of design tips somewhere?

edit the answer is sidebar.io isn't it :(

Yes. Read all the design links like this: http://www.visualmess.com/

Make your site with nothing but black & white typography and whitespace. Once it looks good then, add colors.

me your dad
Jul 25, 2006

caiman posted:

Brackets are for targeting a certain attribute of the element, such as href, alt, etc.

VVVV I assume he means the "[]"s, not the "{}"s.

Thanks!

cbirdsong posted:

As far as examples go, this is a pretty weird use of that selector, since table#Container or just #Container would do the exact same thing.

I've found this to be a pretty good overview of the weirder CSS selectors: http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/


And thanks! I'll read up on that Smashing page.

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 have two, completely different questions. One design one development.

Design:
Say a new site is being worked on by a designer. Should it first go to other designers for input/approval and then User Testing, or User Testing and then other designers?

Development:
I recently updated a page with HTML5 schema, however Google's Rich Snippets Tool isn't seeing it. Any idea why?

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

The Merkinman posted:

I have two, completely different questions. One design one development.

Design:
Say a new site is being worked on by a designer. Should it first go to other designers for input/approval and then User Testing, or User Testing and then other designers?


Do you mean User Interface Design, or Graphic Design? I assume the former, since you mention User Testing, but in my experience, you do designer review first, then user testing, and then more designer review in most cases. Designers will be able to quickly point out stuff that's "obvious" and offer suggestions on the product before you stick it in front of users. This should be on-going through out the design process preferably. Once other designers say "good enough", you do the more involved user testing bit, and you see where the pain points are. Then you work on those, and show your solutions to other designers who quickly point out obvious stuff...

As with most "design" things, there's no absolute right way to do it, other than to make sure you do it.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Lumpy posted:

Do you mean User Interface Design, or Graphic Design?
I think that's part of the problem, we don't have a UI designer (but are looking) so UI would be done by a graphic designer (most of which have a print background, not web). As such I'd want to make sure the process is clear since the people involved aren't ideal.
I'm no designer, I'm the front end developer, and also the "owner" of any front end changes to the site.
Thanks for the input though!

I need to get back to answering questions in this thread, I feel like I've asked too many.

DreadCthulhu
Sep 17, 2008

What the fuck is up, Denny's?!
Has anybody else found procedural PDF generation and formatting to be a bit of a pita if you're trying to get the layout just right, like you would do in a browser? Is it just me?

GreatJob
Jul 6, 2008

You did a Great Job™!
I have some front-end layout questions. I'm only experienced enough to get into trouble!

I would like to make my dinosaur website header look like this:


It currently looks like this:


I'm hosting this site on Tumblr because the audience is huge and I want the comics to be easily shared across the site. I am using the Optica theme by http://blog.k-create.com/ and editing it, because I love the fixed header while the rest of the page scrolls down, as well as the user icon's (the raptor head) position and shape. To me it looks like tumblr themes have a lot of editable CSS and HTML elements, and the only special note to them is the tumblr 'block' code additions, which are highly descriptive in and of themselves.

I figured the easiest way to make this layout shine a little more was to get this transparent image:


...To sit on top of the icon in the code, and be relative to the rest of the stuff on the page, while the 'RAWR!' stays fixed in the background for that cool scrolling effect.

My best attempt resulted in this:

To do that, I used this CSS styling:
code:
<style type="text/css">
#picture
{
position:relative;
z-index:100
}
...Plus sticking the following in random places.

code:
<img src="http://24.media.tumblr.com/7cb93f3d77c7401349473d0eb125de25/tumblr_mvpe47lwpW1sfhs9ko1_1280.png" id="picture">
I barely understand what I did to even get the picture to show up. Can anyone help me, or are there different ways to make this do?

GreatJob fucked around with this message at 22:29 on Nov 3, 2013

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



You want position:absolute rather than relative (relative means it is the anchor to position things in relation to)

At best inference from the K-Create blog, if your <img src> is placed next to the existing dinosaur head then it should position itself somewhere underneath the dinosaur head, at which point you just add in top: -100px and left: 1px to position it correctly over the existing elements.

So
code:
<style type="text/css">
#picture
{
position:absolute;
z-index:100;
top: -100px;
left: 1px;
}
But you may need to fiddle with the placement numbers until it lines up correctly if it's not being positioned against the blog-title-content block.

GreatJob
Jul 6, 2008

You did a Great Job™!
Ghostlight, that was the best possible help. I got the look I was trying to achieve, and now I'm all excited to put cute dinosaur comics all up in this sucker. Thank you so much.

I'll note for those who might stumble on this via search engine and want to edit their Optica tumblr theme similarly, here's the exact coordinates:

code:
#picture
{
position:absolute;
z-index:100;
top: -43px;
left: -316px;
}
I'll probably pop back in with more questions as I wrestle with putting columns in the custom Tumblr pages, and getting a pagination block to appear in the header below the menu items, but I want to give my best shot at figuring it out for myself, first.

darthbob88
Oct 13, 2011

YOSPOS
ETA: The site in question sells corsets, FYI, so it might possibly be :nws:

Got a float-type problem. My company provides the recommendations on this site, and they look great. Except for the acre of white space above our recs on some pages. I've been asked to fix that, but can't see any good way to do it. The element I'm trying to work with, .PD14T, is in one element that's floated and I'm trying to align it with the bottom of .ProductAside, another floated element next to its container. I am well aware that the design is retarded, but I can't do much about that. I'm limited to jQuery and CSS for moving things around. Currently the best solution I have is to give .PD14T 80px of top-margin to ensure it's below .ProductAside, but that leads to the acre of whitespace problem. Is there a good solution, or should I just ask the client to unfuck their site design?

darthbob88 fucked around with this message at 01:58 on Nov 5, 2013

Bognar
Aug 4, 2011

I am the queen of France
Hot Rope Guy

darthbob88 posted:

Got a float-type problem. My company provides the recommendations on this site, and they look great. Except for the acre of white space above our recs on some pages.

Note that some people might consider this :nws:. I was planning on offering some advice, but I had to close it out as soon as I realized what it was.

Fuck them
Jan 21, 2011

and their bullshit
:yotj:
Is there a good best practice or strategy out yet for dealing with small monitors (1024px wide for the viewport) and having a left hand nav in the page? Thoughts that occurred to me were the transparent show/hide overlapping scroll bar like on the right hand side of a facebook profile page, a show/hide left hand nav entirely, or a drop down left hand nav from a top hand nav having a bit arrow to mouse over.

I've only recently gotten into the front end of things with my current full-stack job, having come from the back end.

I suppose another option is to just tell people "Hey, so, guess what? There's only so much room. 5 lbs of bologna won't fit in a 3lb bag!"

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

2banks1swap.avi posted:

Is there a good best practice or strategy out yet for dealing with small monitors (1024px wide for the viewport) and having a left hand nav in the page? Thoughts that occurred to me were the transparent show/hide overlapping scroll bar like on the right hand side of a facebook profile page, a show/hide left hand nav entirely, or a drop down left hand nav from a top hand nav having a bit arrow to mouse over.

I've only recently gotten into the front end of things with my current full-stack job, having come from the back end.

I suppose another option is to just tell people "Hey, so, guess what? There's only so much room. 5 lbs of bologna won't fit in a 3lb bag!"
The site I work for now is only 990-1000px wide and most pages have a left nav. I think it really depends on what is in the left nav and what takes up the reast, so context.
Also, I usually say "you can't fit a gallon of milk in a shot glass"

Adbot
ADBOT LOVES YOU

Oh My Science
Dec 29, 2008

2banks1swap.avi posted:

I suppose another option is to just tell people "Hey, so, guess what? There's only so much room. 5 lbs of bologna won't fit in a 3lb bag!"

Maybe an off-canvas menu is what you're after? If you make the link to open it obvious enough it might work.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply