The Web Design & Development Megathread

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

«‹›361 »

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Chris! posted:

Any ideas on how to get inline SVG animations to work in IE? Or do I have to do the whole thing again as CSS animations or something? I've tried a couple of ready made scripts from online - Rapha�l and fakesmile - and neither seem to make a difference. loving hell.

Unfortunately it looks like the answer is no

http://msdn.microsoft.com/en-us/library/gg193979%28VS.85%29.aspx

quote:

In order to view the examples contained within the topic, you must use a browser, such as Windows Internet Explorer 9 or later, that supports the SVG element.
...
Although not supported in Windows Internet Explorer (as described below), basic animation is straightforward when you use SVG�s declarative animation constructs
...
Although declarative animation is straightforward, it can also be limiting. In the words of David Eisenberg, author of SVG Essentials: "If you choose to use scripting to do animation, you will then have available all the interactivity features of scripting; you can make animation dependent on mouse position or complex conditions involving multiple variables."

That is, script-based animation opens the door to simple as well as complex animation possibilities. Because of this, and for other reasons (such as CSS animations), Internet Explorer does not support declarative animation. Undeniably, there can be more work associated with script-based animation, but once these scripting techniques have been mastered, you can implement animations impossible using purely declarative animation techniques. The following example, which is the JavaScript version (in HTML5) of Example 1, shows some of these techniques:

loving Internet Explorer :argh:

# ? Jun 18, 2014 19:16

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 04:24

daggerdragon: Jan 22, 2006; My titan engine can kick your titan engine's ass.

The Web Design & Development Megathread: loving Internet Explorer :argh:

# ? Jun 19, 2014 06:01

Chris!: Dec 2, 2004; E

fletcher posted:

Unfortunately it looks like the answer is no

http://msdn.microsoft.com/en-us/library/gg193979%28VS.85%29.aspx

loving Internet Explorer

Thanks for the reply. Fuuucking hell what a waste of time. I might just leave the client not knowing that their splash image subtly animates for anyone with a better browser. Maybe it'll be a nice surprise if they ever upgrade beyond ie.

# ? Jun 19, 2014 07:58

The Dave: Sep 9, 2003

Do you have access to any analytics? Nothing's better than seeing IE as a small fraction of users.

# ? Jun 19, 2014 12:02

Chris!: Dec 2, 2004; E

The Dave posted:

Do you have access to any analytics? Nothing's better than seeing IE as a small fraction of users.

Unfortunately, the company I'm building the site for runs IE 11 on their office computers, and while I might recommend they change browser anyway, I'll probably still have to remake the animation from scratch, when I can muster the willpower. loving Internet Explorer :argh:

Edit: Or maybe I'll just leave it, and if they ever upgrade and discover that it animates, I'll call it an Easter Egg.

Chris! fucked around with this message at 12:21 on Jun 19, 2014

# ? Jun 19, 2014 12:19

The Dave: Sep 9, 2003

IMO unless you're getting paid extra for the time it takes, ditch it.

# ? Jun 19, 2014 12:39

Heskie: Aug 10, 2002

Chris! posted:

runs IE 11

I hate you

*Goes back to debugging IE7*

# ? Jun 19, 2014 12:59

ProSlayer: Aug 11, 2008; Hi friend

ProSlayer posted:

I'm having this ASP.NET cookie issue which is driving me nuts. It only affects Internet Explorer, and happens intermittently.

When a user logs in, we use ASP.NET Profile provider to authenticate via SQL. After we verify his credentials, we store the user's name/address in the Profile provider properties. The issue we are having is that sometimes in IE the Profile information does not pass from the login page after authenticating, to the index home screen where we load / display the Profile information we set in the login. The only way to fix the issue is to ask the user to clear his cookies.

I think this has something to do with not being able to overwrite old cookies because the domain is not set in the web config. I was also thinking of deleting all the users from the aspnet_Users table so it clears out all the old data.

So more information regarding the same issue. We decided to put all the Profile information into session variables and re-populate them on the index page if they're missing. When we do this, we still lose the Profile information as soon as we leave the index page. It's as if the Profile information is written to once on the page that is loaded, and then immediately lost when going to a new page.

# ? Jun 19, 2014 17:29

ufarn: May 30, 2009

I'm helping a non-technical mate with some Joomla stuff, and poo poo's the most abominable CMS I've ever laid eyes on. The thing I can't figure out are these:

1) I can't get DocMan to sort uploaded files how I want (filename or upload date). I *somehow* managed to sort some files for one page, probably after changing their post date - or the display order in the control-panel display - but I can't reproduce the fix.

2) For some reason, one page shows a list of URLs representing what I think is the sitemap. No idea how to remove it, and whether this is a bug in the underlying template, or something that can be wrangled in the admin control panel.

3) I have to enable general users to upload using DocMan for some select pages, but I can't figure out where and how to do it.

4) The person also wants to let users add links to a navigate themselves, but I don't know if this is even possible in Joomla, and whether I should just write a (complicated) guide for doing it as an admin.

I'm sorry if this sounds like me asking you to do the work for me, but I'm just trying to help out someone who's already struggled to figure it out, and it's no surprise that this has been futile up until this point, given what a mess Joomla is to work in.

No one he knows has managed to figure it out, and it ends up eating a lot of people's time, when none of us know Drupal and what it is and isn't capable of.

# ? Jun 19, 2014 20:34

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

So I've finally jumped on the SASS bandwagon and am considering trying out organizing my CSS into multiple stylesheets (which'll be compiled into a single stylesheet for production). Do any of you do this? Are there any definite advantages?

# ? Jun 19, 2014 21:45

ufarn: May 30, 2009

caiman posted:

So I've finally jumped on the SASS bandwagon and am considering trying out organizing my CSS into multiple stylesheets (which'll be compiled into a single stylesheet for production). Do any of you do this? Are there any definite advantages?

It's just easier to get an overview of things.

Imagine a heatmap of the parts of your stylesheet that you peruse and update; now focus on the most active - contiguous - part and try to factor out the rest.

Obviously mix-ins, variables/constants, reset.scss, general settings, and media queries are things that come to mind. Print, accessibility, too, if you don't spin them into separate CSS files already.

As a result, my current project has a style.scss with <150 lines of code, which fits into two vertical screens. Makes it so much easier to update and manage.

# ? Jun 19, 2014 22:00

kedo: Nov 27, 2007

caiman posted:

So I've finally jumped on the SASS bandwagon and am considering trying out organizing my CSS into multiple stylesheets (which'll be compiled into a single stylesheet for production). Do any of you do this? Are there any definite advantages?

I do. The definite advantage is poo poo is 1000% easier to find. When you come back to a project several months down the road and say to yourself, "now where the hell did I put the CSS for the header for articles," you can go find partials/articles/_header.scss, as opposed to scrolling through a massive styles.scss doc.

Here's a screenshot of the way I organize my SCSS for basic projects. It is beautiful. Based loosely on this article and then modified to suit my needs. For complex projects I have a ton of sub directories within the partials folder.

# ? Jun 19, 2014 22:00

ufarn: May 30, 2009

kedo posted:

I do. The definite advantage is poo poo is 1000% easier to find. When you come back to a project several months down the road and say to yourself, "now where the hell did I put the CSS for the header for articles," you can go find partials/articles/_header.scss, as opposed to scrolling through a massive styles.scss doc.

Here's a screenshot of the way I organize my SCSS for basic projects. It is beautiful. Based loosely on this article and then modified to suit my needs. For complex projects I have a ton of sub directories within the partials folder.

That's a lot of files, though, but of course, if you're dealing with a ridiculous code base - especially one you're breaking down to understand - it's probably not the worst idea to have a rule stating that you shouldn't have any one SCSS file over X lines of code.

# ? Jun 19, 2014 22:03

kedo: Nov 27, 2007

Yeah, it's a lot of files and many of them end up not being all that full, but honestly I'd rather deal with a bunch of files than fewer huge files that are hard to navigate. Jumping between files and directories is easy, navigating a several thousand line text file is hard. It's also nice because I can create lazy workarounds (like having $color-100, $color-95, $color-90, etc. to 0 opacities for all my colors) because I simply have the space to do it.

Also at the end of the day it's all compressed into a single main.css, so what do I care! :downs:

e: Now that I think of it, I could change my colors to a more intelligent mixin... @include color(red,50) ... brb

kedo fucked around with this message at 22:09 on Jun 19, 2014

# ? Jun 19, 2014 22:05

Heskie: Aug 10, 2002

Thats not actually a lot of files in my opinion. Pretty much the usual amount for every project I do.

As kedo said each file is usually not that large. Using Sublime I can cmd+p to fuzzy search straight to the file I want (as they're all named appropriately) rather than scrolling hundreds of lines down a file.

# ? Jun 19, 2014 22:10

Bastard: Jul 13, 2001; We are each responsible for our own destiny.

ufarn posted:

That's a lot of files, though, but of course, if you're dealing with a ridiculous code base - especially one you're breaking down to understand - it's probably not the worst idea to have a rule stating that you shouldn't have any one SCSS file over X lines of code.

I wish most of the projects I work on have as few files as that one. Another nice advantage of using a lot of files with little content instead of a few big ones: less chance of pesky merge conflicts :argh:

# ? Jun 19, 2014 22:20

pipes!: Jul 10, 2001; Nap Ghost

420 make each component its own sass partial 'erryday

# ? Jun 19, 2014 23:25

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

kedo posted:

I do. The definite advantage is poo poo is 1000% easier to find. When you come back to a project several months down the road and say to yourself, "now where the hell did I put the CSS for the header for articles," you can go find partials/articles/_header.scss, as opposed to scrolling through a massive styles.scss doc.

Here's a screenshot of the way I organize my SCSS for basic projects. It is beautiful. Based loosely on this article and then modified to suit my needs. For complex projects I have a ton of sub directories within the partials folder.

Yesterday I used that article as well as this one as a guide for reorganizing my LESS files. I think the state it is in now is much better than it was before, still not quite where I want it to be though. Everything right now is kind of split up into little widgets.

For example I've got a file called _lightbox.less that looks like this:

code:

.lightbox-content {
    img {
        border-radius: 6px;
    }

    a.comment-link {
        font-size: 24px;
        position: absolute;
        opacity: 0.6;
        text-shadow: none;
        color: black;
        background-color: white;
        min-width: 30px;
        height: 30px;
        padding: 3px;

        &:hover {
            text-decoration: none;
        }
    }

    .user-full-name {
        font-weight: bold;
    }
}

There's more stuff along those same lines, all contained inside that .lightbox-content selector. Am I really supposed to split up the a.comment-link stuff out into separate files like typography/colors/layout/etc? It seems so counter-intuitive.

# ? Jun 20, 2014 00:26

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Also, once I started moving things into subdirectories inside my /css/ folder, I had to adjust image paths and such so my IDE wouldn't complain.

So I've got ./css/style.less that contains:

code:

@import './modules/_whatever.less';

And ./css/modules/_whatever.less contains:

code:

.whatever {
  background: url('../../img/icon.png') repeat scroll left top #000000;
}

But when style.css is built, the relative image path is no longer valid. How do I please both the IDE inspections and LESS compiler with these relative image paths?

fletcher fucked around with this message at 00:50 on Jun 20, 2014

# ? Jun 20, 2014 00:48

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

kedo posted:

Any reason all those filenames are prefixed with an underscore?

# ? Jun 20, 2014 00:51

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Kobayashi posted:

Any reason all those filenames are prefixed with an underscore?

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials

quote:

If you have a SCSS or Sass file that you want to import but don�t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.

# ? Jun 20, 2014 00:54

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

Ahh OK, that makes sense. I use LESS so I'm not as familiar with the details of SASS.

# ? Jun 20, 2014 01:17

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Kobayashi posted:

Ahh OK, that makes sense. I use LESS so I'm not as familiar with the details of SASS.

I thought LESS was supposed to follow that convention as well but I can't seem to find any official documentation about it

# ? Jun 20, 2014 01:32

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

fletcher posted:

I thought LESS was supposed to follow that convention as well but I can't seem to find any official documentation about it

Yeah as far as I know, LESS doesn't have a whole lot to say about build process, project structure, best practices, etc.

# ? Jun 20, 2014 02:31

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

This conversation made me want to point out that a good IDE can jump straight to the CSS defining a class or id or whatever from the HTML, so that helps with finding poo poo too. In JetBrains products like PyCharm or WebStorm you can Ctrl click or press Ctrl-B to jump to the declaration in the CSS. I assume other IDE's can do that to.

# ? Jun 20, 2014 03:31

Monday_: Feb 18, 2006; Worked-up silent dork without sex ability seeks oblivion and demise.; The Great Twist

I have a website for my comic strip that you guys have helped me with in the past. Right now I'm wondering, is there a way I can put the dialog in some sort of metadata that will show up in search engines? Right now I'm making a separate page for each strip with a transcription and a link to the page that has the actual JPG, but I'd rather not do this anymore.

Edit: What if I put the transcription text on the same page as the JPG, but have it as white text on the white background? I guess that would work but would it look funky if people have funny browser settings?

Monday_ fucked around with this message at 04:00 on Jun 20, 2014

# ? Jun 20, 2014 03:50

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

Seems to me you're describing the alt attribute of the img element. If it's a transcript of the text contained in the image, you're actually following accessibility guidelines for un-sighted users! Congratulations!

code:

<img src="myimage.png" alt="June 15th 2014
Exposition
Landon: We did it. We survived high school.
etc" />

That should all be perfectly OK, line breaks and all.

# ? Jun 20, 2014 10:56

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

v1nce posted:

Seems to me you're describing the alt attribute of the img element. If it's a transcript of the text contained in the image, you're actually following accessibility guidelines for un-sighted users! Congratulations!
code:
<img src="myimage.png" alt="June 15th 2014
Exposition
Landon: We did it. We survived high school.
etc" />
That should all be perfectly OK, line breaks and all.

Just make sure to escape ampersands with &, non-breaking spaces with  , and quotes with " and you should be fine. Might be smart to automate this escaping, though you'll probably find out pretty quick if you forget.

# ? Jun 20, 2014 11:17

fuf: Sep 12, 2004; haha

Is there a clever way of comparing my html files to my compiled main.css file to see which rules never get applied anywhere?

Right now I'm importing all the Foundation SASS files directly into my main.scss file so I can edit the Foundation rules directly instead of overwriting them (maybe a bad idea), but it means I'm also compiling a whole bunch of components that never get used (progress-bars, breadcrumbs, etc.).

I could manually remove the 'import @progress-bars' lines, but with some of them it's not obvious whether they're doing anything.

# ? Jun 20, 2014 12:35

lunar detritus: May 6, 2009

fuf posted:

Is there a clever way of comparing my html files to my compiled main.css file to see which rules never get applied anywhere?

Try uncss.

# ? Jun 20, 2014 12:42

fuf: Sep 12, 2004; haha

gmq posted:

Try uncss.

oh hell yeah, this looks perfect thanks!

Could the same thing be done with js files? :shobon:

Like instead of needing a full version of jquery you could just extract the bits that actually get used? It would be really cool to only have a single css file and a single js file with everything you need, instead of separately including full versions of jquery and modernizr etc.

# ? Jun 20, 2014 12:53

Chris!: Dec 2, 2004; E

fuf posted:

Is there a clever way of comparing my html files to my compiled main.css file to see which rules never get applied anywhere?

Right now I'm importing all the Foundation SASS files directly into my main.scss file so I can edit the Foundation rules directly instead of overwriting them (maybe a bad idea), but it means I'm also compiling a whole bunch of components that never get used (progress-bars, breadcrumbs, etc.).

I could manually remove the 'import @progress-bars' lines, but with some of them it's not obvious whether they're doing anything.

Hey, I don't know how to compare your html files to the compiled css file, but you could always make a customized download of Foundation: http://foundation.zurb.com/develop/download.html#customizeFoundation if you know which components you'll want to use and which you won't; shouldn't be too much hassle to add anything in later if you need to.

Personally I just use the full download and comment out any imports that I don't want to use before I go live, but that means you need to manually check that you've not accidentally turned off everything that's being used (I've personally never had a problem though).

I always just copy settings.scss as _settingsCustom.scss and edit that - rather than risking having any changes being blown out when I update.

edit:

gmq posted:

Try uncss.

This looks good!

# ? Jun 20, 2014 12:55

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

fuf posted:

oh hell yeah, this looks perfect thanks!

Could the same thing be done with js files?

Like instead of needing a full version of jquery you could just extract the bits that actually get used? It would be really cool to only have a single css file and a single js file with everything you need, instead of separately including full versions of jquery and modernizr etc.

I just read this very thing the other day: http://developer.telerik.com/featured/jquery-using-only-what-you-need/

# ? Jun 20, 2014 13:32

kedo: Nov 27, 2007

I have a client who's interested in developing a site that would be primarily funded by ads. She's asking some high level strategy questions (eg. "Should I go ad-free for a bit until I build traffic and can approach potential advertisers with impression stats?") to which I do not know the answer.

Can anyone recommend some good reading for me to read myself and then pass along?

# ? Jun 20, 2014 14:00

substitute: Aug 30, 2003; you for my mum

Google released a CSS boilerplate yesterday. Thoughts?

https://developers.google.com/web/starter-kit/

http://readwrite.com/2014/06/19/google-launches-starter-kit-for-a-more-consistent-web#awesm=~oHJxTsrOOt99zy

# ? Jun 20, 2014 14:54

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

Thermopyle posted:

This conversation made me want to point out that a good IDE can jump straight to the CSS defining a class or id or whatever from the HTML, so that helps with finding poo poo too. In JetBrains products like PyCharm or WebStorm you can Ctrl click or press Ctrl-B to jump to the declaration in the CSS. I assume other IDE's can do that to.

SharePoint Designer can do this, which is about the only thing I like about SharePoint Designer.

Anyone know of a way to get Sublime Text to behave similarly? I know Sublime isn't an IDE, but it sure does have a bunch of great functionality so I wouldn't be surprised if there's a way to do this.

# ? Jun 20, 2014 16:07

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

substitute posted:

Google released a CSS boilerplate yesterday. Thoughts?

https://developers.google.com/web/starter-kit/

http://readwrite.com/2014/06/19/google-launches-starter-kit-for-a-more-consistent-web#awesm=~oHJxTsrOOt99zy

They didn't recommend VIM as the editor. Unacceptable.

But for reals, I'll take a gander at it, as they seem to be using some sane defaults and introducing a "modern" dev environment. Gone are the days of TextEdit and Netscape being your entire dev stack. (Or using pico on the live server, which is how we did all our dev work in my first job :v:

)

# ? Jun 20, 2014 17:11

Robot Arms: Sep 19, 2008; R!

kedo posted:

I have a client who's interested in developing a site that would be primarily funded by ads. She's asking some high level strategy questions (eg. "Should I go ad-free for a bit until I build traffic and can approach potential advertisers with impression stats?") to which I do not know the answer.

Can anyone recommend some good reading for me to read myself and then pass along?

This thread might help: http://forums.somethingawful.com/showthread.php?threadid=3447030

# ? Jun 20, 2014 18:19

kedo: Nov 27, 2007

samglover posted:

This thread might help: http://forums.somethingawful.com/showthread.php?threadid=3447030

Thanks much!

# ? Jun 20, 2014 18:46

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 04:24

me your dad: Jul 25, 2006

I give up and I'm desperate and I could really use some help :cry:

I created a simple email newsletter using the INK boilerplate but for some reason the two columns at the bottom just won't stack when tested for mobile viewing through Litmus. Instead of stacking they just cram together.

It stacks when viewed in Firefox when manually resizing the window. The original INK media query had a max-width of 600px and I changed it to 320px, thinking that was the problem but it's still not working.

Also, when they stack in the browser, a gap appears between them. Is there a way to eliminate this gap so the list looks seamless when stacked?

I have a JSFiddle here: http://jsfiddle.net/8gnK6/3/

I'm under pressure to get this working and I'd appreciate any help. ~~I'll buy the first person to get it stacking with no gap between them a forum upgrade of your choice or Paypal you $10.~~ Edit: I worked out a solution on my own.

EDIT: Here's how the columns look on an iPhone when viewed in Litmus:

me your dad fucked around with this message at 20:55 on Jun 21, 2014

# ? Jun 20, 2014 19:08

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

«‹›361 »