The Web Design & Development Megathread

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

«‹›361 »

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

This is a pretty good article about writing CSS for the long term. It has plenty of rationale for the resulting guidelines too, well worth a look even if you don't agree with every point.

http://benfrain.com/enduring-css-writing-style-sheets-rapidly-changing-long-lived-projects/

# ? Aug 9, 2014 10:13

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 05:17

Heskie: Aug 10, 2002

Maluco Marinero posted:

This is a pretty good article about writing CSS for the long term. It has plenty of rationale for the resulting guidelines too, well worth a look even if you don't agree with every point.

http://benfrain.com/enduring-css-writing-style-sheets-rapidly-changing-long-lived-projects/

Thanks for this, he also has a bunch of other posts that look really useful. Definitely going into my RSS feed.

Heskie fucked around with this message at 10:54 on Aug 9, 2014

# ? Aug 9, 2014 10:49

Pollyanna: Mar 5, 2005; Milk's on them.

I've got a video button that when pressed, hides part of its parent element and inserts a div with a video. Basically, it's "replacing" what's in the original parent element. This changes the height of the parent element. I don't like how the resize is abrupt, so I wanted to add a little transition to make the parent div smoothly shrink in height. However, I tried putting `transition: height 2s` under the parent's styling, but when the contents are hidden and a video is added, it doesn't do the transition thingy. Will it not work if the new height of the element is determined by something other than a stylesheet?

# ? Aug 12, 2014 20:45

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

Pollyanna posted:

I've got a video button that when pressed, hides part of its parent element and inserts a div with a video. Basically, it's "replacing" what's in the original parent element. This changes the height of the parent element. I don't like how the resize is abrupt, so I wanted to add a little transition to make the parent div smoothly shrink in height. However, I tried putting `transition: height 2s` under the parent's styling, but when the contents are hidden and a video is added, it doesn't do the transition thingy. Will it not work if the new height of the element is determined by something other than a stylesheet?

Correct. They are called "CSS Transitions" for exactly that reason.

# ? Aug 12, 2014 23:17

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

Yeah. To be exact, you cannot transition to any property that is auto, the only way to do it is to use JavaScript to measure the desired height, then set the height back to what it was and then in the next frame (using requestAnimationFrame or setTimeout for 20ms) set the height to the measured height.
When that transition finishes you could then turn the height back to auto to clean up.

# ? Aug 12, 2014 23:22

Kenishi: Nov 18, 2010

Cross posting from General question thread since I'm blind.
--

First the live page: http://aberdynic.appspot.com/?id=test

When this page is at full screen it looks great but when the window is smaller the two top blocks #message and #photo overflow onto the rest of the content below pushing stuff around. The lower content is wrapped in its own div though, so I thought the content would simply be pushed down. Everything is positioned statically. Is there something I'm missing? Is it because the top div (the one overflowing) is set to 100% height?

# ? Aug 14, 2014 00:26

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

It's because Height: 100% inheritable all the way to <HTML> is setting the initial viewport as the height, since that is the parent element. When the content reaches this limit it just spills on down over. On a full screen, depending on resolution, you can see that #message and #photo aren't actually filling the space they're given, and resume is always below the fold.

If you want to retain that behaviour, just add a clear: left rule to #resume to force it below any spillover content.

# ? Aug 14, 2014 01:29

Pivo: Aug 20, 2004

If anyone's in Toronto we're hiring front-end people (drink beer and play ping-pong at work! write awesome code that goes to prod in a day or three! work with me and I'm ridiculous!)

http://www.jobscore.com/jobs2/uberflip/back-end-php-front-end-developer/dl-jbsi0ar5ikXiGalqWdr?ref=rss&sid=68

PM me if you apply plz

# ? Aug 14, 2014 02:25

Kenishi: Nov 18, 2010

Ghostlight posted:

It's because Height: 100% inheritable all the way to <HTML> is setting the initial viewport as the height, since that is the parent element. When the content reaches this limit it just spills on down over. On a full screen, depending on resolution, you can see that #message and #photo aren't actually filling the space they're given, and resume is always below the fold.

If you want to retain that behaviour, just add a clear: left rule to #resume to force it below any spillover content.

Awesome, thanks! I had tried clear at one point, but had it on the wrong element.

# ? Aug 14, 2014 03:22

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

What's the consensus on using data-attributes to populate pseudo-elements? Par example, specifying what the delimiter should be in an inline list. Or specifying icons to support text links.

# ? Aug 14, 2014 13:58

pipes!: Jul 10, 2001; Nap Ghost

There's decent support, but if you want something more bulletproof I'd go the classes and attribute selectors route. The other thing I've run into is teaching people that data-attributes exist/how to use them.

# ? Aug 14, 2014 18:19

The Dave: Sep 9, 2003

How weird does this sound? I have a html5 video tag I'm using, with autoplay on the tag, but the autoplay isn't working. I can't figure out why. However, if I load the page with firebug open, the video autoplays. This is on a wordpress site and I'm wondering if that is somehow messing with something. ( I've used the code chunk before and it has autoplayed fined. )

# ? Aug 15, 2014 01:51

Mister Chief: Jun 6, 2011

Have you tested it in other browsers?

# ? Aug 15, 2014 01:53

The Dave: Sep 9, 2003

Yeah the behavior is the same in FF and Chrome. Open dev tools, hit refresh, video autoplays.

# ? Aug 15, 2014 02:52

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

Just did a quick google for what you mentioned, and some people pointed to autoplay="true" not being the same as using just autoplay or autoplay="autoplay". What does the the HTML look like for your video player element?

Also check your firebug console for warnings or messages. Anything at all. There could be something interfering with it in the periphery, even if it doesn't look suspicious.

If none of that works, try cutting parts of the page out altogether until it works properly.

# ? Aug 15, 2014 04:56

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Even if you get it resolved, note that autoplay will not work on iOS or Android

# ? Aug 15, 2014 05:56

Mister Chief: Jun 6, 2011

Does anyone here have any experience with using princeXML to convert HTML to PDFs?

# ? Aug 15, 2014 06:43

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

pipes! posted:

There's decent support, but if you want something more bulletproof I'd go the classes and attribute selectors route. The other thing I've run into is teaching people that data-attributes exist/how to use them.

Yeah, attribute selectors might be more useful. No issue with teaching people what the data-attributes are: For context, I'm building a small framework for my company that'll be packaged up as a Gem and dropped into every project. Which is fine, the only problem being that the main developer refuses to countenance not using the asset pipeline for Sass, which effectively wipes out variables, mixins, extends and functions unless they're defined on a per-file basis, and I need alternative methods of providing configuration. fun fun fun

# ? Aug 15, 2014 11:09

Pollyanna: Mar 5, 2005; Milk's on them.

What do people think of SMACSS? I've had success with it in frameworks like Middleman, but Rails works a little differently. How should I best integrate these practices?

# ? Aug 15, 2014 17:42

fuf: Sep 12, 2004; haha

gently caress me is there some universal law that if you make a website for someone they will only ever look at it on IE8? :negative:

# ? Aug 15, 2014 18:34

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

fuf posted:

gently caress me is there some universal law that if you make a website for someone they will only ever look at it on IE8?

Murphy's?

# ? Aug 15, 2014 19:14

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

fuf posted:

gently caress me is there some universal law that if you make a website for someone they will only ever look at it on IE8?

So you don't check your work in IE8 is what you are saying?

# ? Aug 15, 2014 19:23

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

The Merkinman posted:

Even if you get it resolved, note that autoplay will not work on iOS or Android

IIRC this changed for iPads on iOS 7, so I think most iPads will autoplay. I'd check but our test pad is missing, probably because one of our BAs thinks it's his in spite of all the sharpy BRING THIS BACK WHEN YOU'RE DONE messages on the back

# ? Aug 15, 2014 19:31

fuf: Sep 12, 2004; haha

Lumpy posted:

So you don't check your work in IE8 is what you are saying?

Well yeah, pretty often I don't ( :shobon:

), but no in this case it was something else. I made a separate stylesheet for ie8 that makes the site way uglier (but at least makes it work). Then as I was checking nginx logs today I realised my client has only ever seen the ie8 version.

# ? Aug 15, 2014 20:02

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

Pollyanna posted:

What do people think of SMACSS? I've had success with it in frameworks like Middleman, but Rails works a little differently. How should I best integrate these practices?

By works differently, do you mean 'RoR scaffolds me Sass files that match my controller names', because if so, just delete those files/don't generate them in the first place. Anyway, it works exactly the same as it does with MM, or Sinatra, or whatever.

# ? Aug 15, 2014 21:33

fuf: Sep 12, 2004; haha

Is there a way to check if a photograph has a copyright? This one in particular. How careful do I have to be if I use it on a site?

# ? Aug 15, 2014 22:13

Valeyard: Mar 30, 2012; Grimey Drawer

So I have a Django powered website, with its set of Users. I am thinking of letting users of my site connect/authenticate their Github account on their account on my site. And then I would like to pull information from their Github account once the authentication is, permanently, in place.

How easy would this be to do? I don't need specifics just now just thinking of high level

# ? Aug 15, 2014 23:38

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

Valeyard posted:

So I have a Django powered website, with its set of Users. I am thinking of letting users of my site connect/authenticate their Github account on their account on my site. And then I would like to pull information from their Github account once the authentication is, permanently, in place.

How easy would this be to do? I don't need specifics just now just thinking of high level

Googling, I'd say have a look at django-social-auth and see how much all this makes sense to you, it has a github back end and I imagine you explore the github API more depending on what it is you need to pull.

http://django-social-auth.readthedocs.org/en/latest/configuration.html

# ? Aug 15, 2014 23:53

Valeyard: Mar 30, 2012; Grimey Drawer

Maluco Marinero posted:

Googling, I'd say have a look at django-social-auth and see how much all this makes sense to you, it has a github back end and I imagine you explore the github API more depending on what it is you need to pull.

http://django-social-auth.readthedocs.org/en/latest/configuration.html

I did see this, but my thought was it would only work like...it would enable people to create new accounts on my site using their github creds, but not link their current accounts with their github. Maybe I need to look more closely though

# ? Aug 15, 2014 23:54

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

Maluco Marinero posted:

Googling, I'd say have a look at django-social-auth and see how much all this makes sense to you, it has a github back end and I imagine you explore the github API more depending on what it is you need to pull.

http://django-social-auth.readthedocs.org/en/latest/configuration.html

Use python-social-auth instead:

quote:

NOTE: THIS LIBRARY IS DEPRECATED IN FAVOR OF python-social-auth. RIGHT NOW THIS LIBRARY DEPENDS DIRECTLY ON python-social-auth AND SHOULD BE CONSIDERED AS A MIGRATION STEP

Valeyard posted:

I did see this, but my thought was it would only work like...it would enable people to create new accounts on my site using their github creds, but not link their current accounts with their github. Maybe I need to look more closely though

python-social-auth can handle this: http://python-social-auth.readthedocs.org/en/latest/use_cases.html#associate-users-by-email

# ? Aug 16, 2014 00:06

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

fuf posted:

Is there a way to check if a photograph has a copyright? This one in particular. How careful do I have to be if I use it on a site?

Unless it says otherwise, you should assume that you have no rights to use a photo you find. Asking the photographer often yields permission, though, in exchange for credit.

# ? Aug 16, 2014 01:29

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

fuf posted:

Is there a way to check if a photograph has a copyright? This one in particular. How careful do I have to be if I use it on a site?

It'll take some detective work, given it just looks like it was scanned once then that original image has just been copied/copied/copied/etc.

Lampedusa died in '57, and he's late 40s/early 50s there, so the photograph's maybe, what, 5-10 years prior to his death? guess 1950-ish maybe? Assuming Italian media photo? Which would generally mean copyright still likely resides with the photographer's employer/the photographer unless it's been explicitly revoked - Euro CP laws (I assume the photo's European in origin) set minimum duration at 70 years from death of the author.

The risk of using the image is proportional to how visible the site is. Lower end of the scale (personal site), a proviso explaining what owner/you are doing & stating you'll take the image down immediately if requested won't do anything to protect owner/you if a copyright holder decides to be protective, but 99.9% of the time no bad things will happen. If it's a public facing [business] organisation's site, just don't use the image if you can't ascertain.

If you're worried and it's essential you know, contact Lampedusa's estate (they're not likely to be the copyright holders, but are much more likely to be able to help than anyone else); Google gives Gioacchino Lanza Tomasi, his cousin, as the executor, and he teaches at the University of Genoa, so would be fairly simple to contact. Also look for biographies of Lampedusa with photos.

RobertKerans fucked around with this message at 10:23 on Aug 16, 2014

# ? Aug 16, 2014 10:00

fuf: Sep 12, 2004; haha

RobertKerans posted:

Lampedusa photo

wow, thanks for your effort!

I think you're right about the date, and I think it's probably an Italian photo. Italian copyright distinguishes "works of photographic art" (copyright 70 years) from "simple photographs" (20 years). I'm not sure which one the image falls under, but the Italian wikipedia page for Lampedusa is using the image and claiming it is a "simple photograph".

I also discovered that Paris Match uses the image here with a Droits r�serv�s message, which means it's an "orphan work" whose copyright can't be established (and so can be used).

# ? Aug 16, 2014 10:33

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

fuf posted:

wow, thanks for your effort!

I think you're right about the date, and I think it's probably an Italian photo. Italian copyright distinguishes "works of photographic art" (copyright 70 years) from "simple photographs" (20 years). I'm not sure which one the image falls under, but the Italian wikipedia page for Lampedusa uses the image and claims it is public domain (with some qualifications).

I also discovered that Paris Match uses the image here with a Droits r�serv�s message, which means it's an "orphan work" whose copyright can't be established (and so can be used).

Ah, I was just looking at the Paris Match site while i was editing my answer, and was wondering what the DR copyright was.

# ? Aug 16, 2014 10:35

-JS-: Jun 1, 2004

Mister Chief posted:

Does anyone here have any experience with using princeXML to convert HTML to PDFs?

Yes! Used it quite a bit - what do you want to know?

# ? Aug 16, 2014 21:44

Mister Chief: Jun 6, 2011

-JS- posted:

Yes! Used it quite a bit - what do you want to know?

Nothing right now really but I'm going to be starting to use it next week so I'll shoot you a PM once I have concrete questions.

# ? Aug 17, 2014 00:11

NovaLion: Jun 2, 2013; REMEMBER

I've made up my mind to learn to do web development stuff myself instead of paying someone else (I can't really afford what I would like done).

The Django Framework seems really interesting. I'm told I should learn HTML5, WebGL and Java. I have two primary projects in mind. One is a band/solo music type website that I would really like to learn parallax scrolling for. The other is a sort of "adventure blog" type deal that would feature frequent posting of medium-length articles and pictures. Later down the road I would like to learn how to have the same web site detect a mobile device and direct a visitor to the mobile version, or vice versa.

Given the above, where should I start? Some minor Googling leads me to a series of random, even incomplete tutorials that don't really explain the "how and why" of a function. I'd really like to learn and get a handle on this stuff, so that I could do things as I'd like later on.

# ? Aug 19, 2014 00:09

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

NovaLion posted:

I've made up my mind to learn to do web development stuff myself instead of paying someone else (I can't really afford what I would like done).

The Django Framework seems really interesting. I'm told I should learn HTML5, WebGL and Java. I have two primary projects in mind. One is a band/solo music type website that I would really like to learn parallax scrolling for. The other is a sort of "adventure blog" type deal that would feature frequent posting of medium-length articles and pictures. Later down the road I would like to learn how to have the same web site detect a mobile device and direct a visitor to the mobile version, or vice versa.

Given the above, where should I start? Some minor Googling leads me to a series of random, even incomplete tutorials that don't really explain the "how and why" of a function. I'd really like to learn and get a handle on this stuff, so that I could do things as I'd like later on.

You don't need (or want) to learn WebGL or Java. Maybe webGL someday if you need it, but not for a while, most likely.

Do the Django tutorial, then read / do one of these: http://www.tangowithdjango.com/book/ or pick up the book "Two Scoops of Django". Then ask lots of questions in the Django thread so people much smarter than me can answer them.

# ? Aug 19, 2014 00:33

Gmaz: Apr 3, 2011; New DLC for Aoe2 is out: Dynasties of India

I'm guessing he thought Javascript and not Java. Anyway here is a good project driven website for web development, it teaches ruby on rails instead of django though.

# ? Aug 19, 2014 01:16

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 05:17

Ether Frenzy: Dec 22, 2006; Nap Ghost

This is a SEO/server management question regarding 301 redirects from an old domain to a new domain.

I've got a pretty decent index ranking for searches relevant to this site and want to keep this intact;
I have moved over all the assets (everything's staying the same hierarchy on new domain), and I've set the .htaccess file on the old domain with:

code:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^olddomain.com [NC,OR]
RewriteCond %{HTTP_HOST} ^[url]www.olddomain.com[/url] [NC]
RewriteRule ^(.*)$ [url]http://newdomain.com/[/url]$1 [L,R=301,NC]

So far, so good - my old site redirects to my new site!

My questions: To optimize/keep my search rankings intact, what is my next step?

Do I need to do anything using Google Webmaster tools to identify to Google/indexers that this switchover has happened? (I run google analytics on these pages).. Or will the 301 redirect make this happen automatically?

Should I set the new domain's pages as 'noindex,nofollow' until I do whatever else I need to do to optimize this switchover showing up in search results, or will that mess up the 301 permanent redirects? I just don't want overlapping indexing.

If it makes any difference, I think we're going to switch the google analytics account that manages this site once it's fully operational on the new domain - unless this will cause search problems.

Thanks for any insight!

# ? Aug 19, 2014 21:14

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

«‹›361 »