The Web Design & Development Megathread

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

«‹›361 »

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

Pollyanna posted:

I certainly learned a lot by tinkering around by myself, yeah. But there's a point where I need structure to get any farther. I just don't have very good self-discipline, sense of structure or executive functions Even something easy like "I want you to make me this" from someone else is enough to get me going. There's only so much I need, and I've never been the type to really want for much.

That's why I keep bugging for advice, I keep running into this wall. I suppose the best thing I can do is offer my services for anyone who needs it.

Anyway...I suppose I'll start on another project idea I had: a simple game written in Javascript. JS has graphics libraries, doesn't it? Problem solved.

Don't just tinker around. Come up with an idea and carry it through to completion. Tinkering around is great and all and will teach you about disparate parts, but the hard part is taking an idea from inception to completion.

Note that on these very forums, I've espoused the virtues of trying lots of different things without worrying about making a complete project ready for the world, but that's not instead of actually completing anything.

So, maybe you decide this JS game is what you want to make a complete project out of. Buckle down and do it.

If you really have to have someone tell you what to make, I hereby tell you to make this JS game you're thinking about.

# ? Nov 27, 2013 01:21

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 06:34

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

Thermopyle posted:

If you really have to have someone tell you what to make, I hereby tell you to make this JS game you're thinking about.

Also, if poo poo gets hard don't drop the project. Your job is to not let knowledge gaps stop you from making this thing. You have Google, forums and stack overflow, so get out there and solve your problems as they come up.

Deal with the fact that your project will not be a perfectly engineered snowflake, and focus on delivering something that can be used, learning from your mistakes will come with time.

# ? Nov 27, 2013 01:44

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

Thermopyle posted:

Don't just tinker around. Come up with an idea and carry it through to completion. Tinkering around is great and all and will teach you about disparate parts, but the hard part is taking an idea from inception to completion.

Note that on these very forums, I've espoused the virtues of trying lots of different things without worrying about making a complete project ready for the world, but that's not instead of actually completing anything.

So, maybe you decide this JS game is what you want to make a complete project out of. Buckle down and do it.

If you really have to have someone tell you what to make, I hereby tell you to make this JS game you're thinking about.

Then I will report to you on its progress

(figuratively, I mean - I'm not gonna bug you about it)

Maluco Marinero posted:

Also, if poo poo gets hard don't drop the project. Your job is to not let knowledge gaps stop you from making this thing. You have Google, forums and stack overflow, so get out there and solve your problems as they come up.

Deal with the fact that your project will not be a perfectly engineered snowflake, and focus on delivering something that can be used, learning from your mistakes will come with time.

One good thing you can say for ADD hyperfocus is that I rarely give up on something.

Wait a minute, I just had massive deja vu...didn't I post that sentence before?

Pollyanna fucked around with this message at 02:48 on Nov 27, 2013

# ? Nov 27, 2013 01:57

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

This is a dumb problem to have, I'm assuming there's a simple fix. I'm using a web font in a Wordpress theme - the site I'm working on has two domains that can be used to access the same site.

In my CSS I have used the font-squirrel format to declare the fonts:

code:

@font-face {
    font-family: 'Oswald';
    src: url('oswald-regular-webfont.eot');
    src: url('oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('oswald-regular-webfont.woff') format('woff'),
         url('oswald-regular-webfont.ttf') format('truetype'),
         url('oswald-regular-webfont.svg#Oswald') format('svg');
    font-weight: normal;
    font-style: normal;
}

This works fine when I go to one of the domains, but when I go to the site via the other domain the font fails to load because it's considered to be a "cross-site" request. Basically when I go to domain1.com the request looks like this:
http://www.domain1.com/fonts/oswald-regular-webfont.ttf

But when I go to domain2.com the request STILL looks like that. Why? Since I'm using relative paths, shouldn't domain2.com be requesting:
http://www.domain2.com/fonts/oswald-regular-webfont.ttf

Anyone know what I've screwed up here? Is Wordpress injecting full paths into the CSS somehow?

Edit: It works in Chrome, but not in Firefox or IE10.

putin is a cunt fucked around with this message at 02:42 on Nov 28, 2013

# ? Nov 28, 2013 02:34

kedo: Nov 27, 2007

If you're linking that stylesheet with an absolute URL (which I'd assume your WP theme is), that's why. Try this? Pretty common fix.

e: Slightly more informative answer: WordPress is probably using the original domain for functions like get_template_directory();, which is how I'd guess your style sheet is linked. The above fix won't change the link, but it'll allow your fonts to work across both domains.

kedo fucked around with this message at 03:28 on Nov 28, 2013

# ? Nov 28, 2013 03:18

Mister Chief: Jun 6, 2011

a_big_dog posted:

As an aside, whatever it is you're making, I need it.

This is what I have been working on.

# ? Nov 30, 2013 11:08

Sudden Infant Def Syndrome: Oct 2, 2004

That is some nice work. Good job

# ? Nov 30, 2013 12:52

jackpot: Aug 31, 2004; First cousin to the Black Rabbit himself. Such was Woundwort's monument...and perhaps it would not have displeased him.<

First off, does anybody know how to disable this goddamn Quick Reply in Chrome? It's annoying as hell, but I can't find where to turn it off.

SEO question: I've got a bunch of html files that use the same nav on every page, so rather than having to change it everywhere when I add or remove a link, I'd like to replace my nav with something like this:

<script src="nav.js"></script>

where nav.js contains the following:

document.write('\
<div class="nav">\
<ul>\
<li><a href="index.html">home</a></li>\
<li><a href="about.html">about us</a></li>\
<li><a href="services.html">services</a></li>\
<li><a href="contact.html">contact</a></li>\
</ul>\
</div> \
');

But I'm afraid to do it, because I think I'd get penalized when crawlers have a hard time finding it - am I right? This site I'm working on is very well placed as far as Google's concerned - I can't risk loving it up.

# ? Dec 1, 2013 06:55

Mister Chief: Jun 6, 2011

Do the same thing but with a server side include. Since I use PHP I have an include for header.php and footer.php on each page.

# ? Dec 1, 2013 07:40

Dominoes: Sep 20, 2007

Does anyone know a way to directly print something from the Google Maps API, or just something from a web page in general. I found some info on using ActiveX controls - are there other ways? I'm drawing/writing on the maps using the API, so the image-only API trick won't work. I'm new to programming and web development. In my current implementation, users have to screenshot the web browser, and paste in PowerPoint, which is messy.

# ? Dec 1, 2013 11:31

I R SMART LIKE ROCK: Mar 10, 2003; I just want a hug.; Fun Shoe

In chrome at least when you print out a page you have the option to save it as a PDF instead.

Not sure how that'll work out with maps API but hopefully it's better than screen shots.

# ? Dec 1, 2013 21:31

Dominoes: Sep 20, 2007

Printing a PDF would be fine. However, doing so (or printing in general) doesn�t seem to let me select what area to print; ie it prints an arbitrarily cropped area spanned across 4 pages.

# ? Dec 1, 2013 22:23

Mister Chief: Jun 6, 2011

Unless I'm missing something you should be able to use CSS to solely print the map using @media print.

# ? Dec 2, 2013 01:09

Dominoes: Sep 20, 2007

Mister Chief posted:

Unless I'm missing something you should be able to use CSS to solely print the map using @media print.

The guides I'm finding mostly show text scaling, removing CSS elements etc. I can set the google map view up with a specific resolution/aspect ratio. How can I use @media print to print that view to a single page?

edit: It looks like when I set the map area aspect ratio to that of a portrait page, it prints as expected without doing anything else. I'm still curious if there's a more flexible and robust way.

Dominoes fucked around with this message at 22:59 on Dec 2, 2013

# ? Dec 2, 2013 19:56

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

I want to write some automated tests for a REST API, what's a good tool/library to use to do that? Rest of the project is in Python, if there's something out there to keep it in the same ecosystem.

# ? Dec 3, 2013 00:43

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

fletcher posted:

I want to write some automated tests for a REST API, what's a good tool/library to use to do that? Rest of the project is in Python, if there's something out there to keep it in the same ecosystem.

I would just use Django's TestCase and client if you're using Django (just guessing since you post in the Django thread).

There might be something else purpose-built, I have no idea, but it seems like a pretty simple thing to just do with TestCase.

# ? Dec 3, 2013 00:46

Oh My Science: Dec 29, 2008

^^^ what he said.

fletcher posted:

I want to write some automated tests for a REST API, what's a good tool/library to use to do that? Rest of the project is in Python, if there's something out there to keep it in the same ecosystem.

Unit Testing? Almost every major language uses it, and pyUnit is a thing.

# ? Dec 3, 2013 00:50

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

Thermopyle posted:

I would just use Django's TestCase and client if you're using Django (just guessing since you post in the Django thread).

There might be something else purpose-built, I have no idea, but it seems like a pretty simple thing to just do with TestCase.

Yup I'm using Django. That looks pretty sweet, thanks for the link.

Oh My Science posted:

^^^ what he said.

Unit Testing? Almost every major language uses it, and pyUnit is a thing.

More of integration tests I suppose, I have some unit tests but now I want a suite of tests that hit the API on an external server over HTTP.

# ? Dec 3, 2013 00:55

Oh My Science: Dec 29, 2008

fletcher posted:

More of integration tests I suppose, I have some unit tests but now I want a suite of tests that hit the API on an external server over HTTP.

Maybe you should checkout Apiary.

# ? Dec 3, 2013 01:02

DreadCthulhu: Sep 17, 2008; What the fuck is up, Denny's?!

I need to slap together a way for users to draw stuff on screen with the mouse, drag raster images onto it, perhaps resize on the fly too. I have never worked in this area before and am wondering what the best bang for my buck would be if I just want to get poo poo done and not spend the rest of my life refining this. I could go straight to canvas, but there are apparently tons of libraries out there that *supposedly* might make it unnecessary to reinvent the wheel. There's Raphael, Paper.js, Processing.js etc. Do you guys have any experience with those?

Does anybody have a preference, or words of wisdom on what would preserve sanity the most here?

# ? Dec 3, 2013 01:26

Safe and Secure!: Jun 14, 2008; OFFICIAL SA THREAD RUINER
SPRING 2013

fletcher posted:

Yup I'm using Django. That looks pretty sweet, thanks for the link.

More of integration tests I suppose, I have some unit tests but now I want a suite of tests that hit the API on an external server over HTTP.

Why not just take any unit-testing framework and use its test runner to execute your tests? You don't have to go nuts mocking and stubbing to write something that makes an HTTP request and is run by a test runner. Just use your favorite one.

# ? Dec 3, 2013 11:43

FamDav: Mar 29, 2008

Another disgusting html question:

I have a row of sprites which I want to evenly space within a fixed width container. What is a nice way to do this?

# ? Dec 3, 2013 20:09

karms: Jan 22, 2006; by Nyc_Tattoo; Yam Slacker

code:

.container {margin:0 0 10px 10px;}
.sprite {display:block; float:left; margin:10px 10px 0 0;}

edit: wait you mean you want the space to be variable, depending on the width of the sprites? Well, that's impossible without js afaik.

karms fucked around with this message at 20:34 on Dec 3, 2013

# ? Dec 3, 2013 20:32

Depressing Box: Jun 27, 2010; Half-price sideshow.

FamDav posted:

Another disgusting html question:

I have a row of sprites which I want to evenly space within a fixed width container. What is a nice way to do this?

How about this (adapted from this)? Kind of an uncomfortably hacky way to do it, but it's the closest CSS-only solution I've found.

Actually, if the sprites are all the same width you could probably use "display: table-cell" inside a "display: table-row" container, or do the math and put a left-margin on .sprite + .sprite.

# ? Dec 3, 2013 21:18

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

KARMA! posted:

code:
.container {margin:0 0 10px 10px;}
.sprite {display:block; float:left; margin:10px 10px 0 0;}
edit: wait you mean you want the space to be variable, depending on the width of the sprites? Well, that's impossible without js afaik.

You could potentially use justify and inline block, that will evenly space all the elements regardless of width. Theres some more details in implementation, such as adding a ghost element with full width to force justification to occur, find a full rundown at http://www.barrelny.com/blog/text-align-justify-and-rwd/

# ? Dec 3, 2013 21:39

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

Flexbox bitches!

# ? Dec 4, 2013 03:18

EAT THE EGGS RICOLA: May 29, 2008

I need something that someone with no clue how anything technical works can use to show me how they want a site to look like.

Does anyone have any recommendations or other suggestions to help me avoid "oh that's not what i meant"?

# ? Dec 4, 2013 20:15

kedo: Nov 27, 2007

EAT THE EGGS RICOLA posted:

I need something that someone with no clue how anything technical works can use to show me how they want a site to look like.

Does anyone have any recommendations or other suggestions to help me avoid "oh that's not what i meant"?

An in person meeting + pencil and paper. Pull up a bunch of sites and talk through what they like and dislike. Sketch out some super basic ideas and get their buy-in. Once you finish the meeting, type up your notes and email it to them and asking for feedback.

If you can't meet with them in person, try to do something similar on a phone call. Also it never hurts to remind someone that how they want the site to look matters very little ��how their users want the site to look matters an awful lot. While this is just a plain fact, it can also be a helpful piece of ammunition if you need to shoot down their bad ideas.

e: Also get their written approval at literally every stage of the project. Specifically say the word "approval." That way if you get a ways into the project and they start saying "oh that's not what I meant," you can point to the email where they approved something. This gives you grounds to start renegotiating stuff (timeline, budget, etc).

kedo fucked around with this message at 21:11 on Dec 4, 2013

# ? Dec 4, 2013 21:07

EAT THE EGGS RICOLA: May 29, 2008

kedo posted:

An in person meeting + pencil and paper. Pull up a bunch of sites and talk through what they like and dislike. Sketch out some super basic ideas and get their buy-in. Once you finish the meeting, type up your notes and email it to them and asking for feedback.

If you can't meet with them in person, try to do something similar on a phone call. Also it never hurts to remind someone that how they want the site to look matters very little ��how their users want the site to look matters an awful lot. While this is just a plain fact, it can also be a helpful piece of ammunition if you need to shoot down their bad ideas.

e: Also get their written approval at literally every stage of the project. Specifically say the word "approval." That way if you get a ways into the project and they start saying "oh that's not what I meant," you can point to the email where they approved something. This gives you grounds to start renegotiating stuff (timeline, budget, etc).

That's basically what I already had in mind, I just wanted to be able to say HEY LOOK THIS IS WHAT YOU DID and point to a specific thing that they produced.

# ? Dec 4, 2013 23:49

supermikhail: Nov 17, 2012; "It's video games, Scully."
Video games?"
"He enlists the help of strangers to make his perfect video game. When he gets bored of an idea, he murders them and moves on to the next, learning nothing in the process."
"Hmm... interesting."

Being an almost complete web-dev newbie, I have a question regarding HTML+CSS:

code:

<div id="sidebar">

<div id="slider-area">
    <div id="slider">&gt</div>
</div>

<div id="scale">
    <p>10</p>
    <p>9</p>
    <p>8</p>
    <p>7</p>
    <p>6</p>
    <p>5</p>
    <p>4</p>
    <p>3</p>
    <p>2</p>
    <p>1</p>
    <p>0</p>
</div>

</div>

Hopefully, this is enough. Anyway, in CSS I "display" all divs as inline-block and give the slider-area height of 100% which should make it as tall as the scale which doesn't happen and for some reason slider-area behaves as if it's limited by the bottom "p" in the completely unrelated div, and it's stuck at the bottom of the scale. I can increase the height manually, but it will only go down. In other words, I want to expand slider-area to the height of scale, but can't. What am I missing?

# ? Dec 5, 2013 01:31

Oh My Science: Dec 29, 2008

supermikhail posted:

Hopefully, this is enough.

I can't visualize the problem, can you post the source code in codepen or jsfiddle? Also, consider making a rough sketch of what you want the layout to look like.

# ? Dec 5, 2013 01:43

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

supermikhail posted:

Hopefully, this is enough. Anyway, in CSS I "display" all divs as inline-block and give the slider-area height of 100% which should make it as tall as the scale which doesn't happen and for some reason slider-area behaves as if it's limited by the bottom "p" in the completely unrelated div, and it's stuck at the bottom of the scale. I can increase the height manually, but it will only go down. In other words, I want to expand slider-area to the height of scale, but can't. What am I missing?

Heights unfortunately don't work like that as they are calculated differently to widths. While #sidebar is correctly displayed as the height of all its content, when #slider-area queries for how high "100%" of #sidebar is it gets told the height is undefined so it defaults to #slider's content. If you want to use 100% height you have to use 100% height all the way up to a parent element that has a defined height, even if that's the <html> tag.

It goes down because inline-blocks share the baseline of the last inline element, so you need to set vertical-align: top; for #slider-area.

# ? Dec 5, 2013 02:40

supermikhail: Nov 17, 2012; "It's video games, Scully."
Video games?"
"He enlists the help of strangers to make his perfect video game. When he gets bored of an idea, he murders them and moves on to the next, learning nothing in the process."
"Hmm... interesting."

Ghostlight posted:

Heights unfortunately don't work like that as they are calculated differently to widths. While #sidebar is correctly displayed as the height of all its content, when #slider-area queries for how high "100%" of #sidebar is it gets told the height is undefined so it defaults to #slider's content. If you want to use 100% height you have to use 100% height all the way up to a parent element that has a defined height, even if that's the <html> tag.

It goes down because inline-blocks share the baseline of the last inline element, so you need to set vertical-align: top; for #slider-area.

Yes.

I think I currently have the height of scale defined only by the paragraphs. So I have to do it manually in any case. Thanks.

# ? Dec 5, 2013 02:59

Ethereal: Mar 8, 2003

fletcher posted:

Yup I'm using Django. That looks pretty sweet, thanks for the link.

More of integration tests I suppose, I have some unit tests but now I want a suite of tests that hit the API on an external server over HTTP.

What does your API spit out? If it spits out JSON then using Node.js + mocha would be pretty easy to do.

Otherwise, I'd just continue writing Python with your favorite assertion framework.

# ? Dec 5, 2013 03:26

etcetera08: Sep 11, 2008

Uhh, don't introduce more dependencies. Just use Django. That's why it's there.

# ? Dec 5, 2013 05:56

Tots: Sep 3, 2007

I'm making a small personal website for myself and would like to know if anyone could point me in the direction of getting a menu in the style of the one found here:

http://code.octopuscreative.com/fancyselect/

It looks like it's going to be easy to do. It's just fading content in and out of a div (or the whole div?) when you click the corresponding link.

Any ideas?

# ? Dec 6, 2013 01:23

Sudden Infant Def Syndrome: Oct 2, 2004

You mean like the "Basic Usage / Updating Options"?

If you use jQuery it can be as easy as something like this:

Have two hidden divs with the content you want, and one that will hold the content.

code:

$("#link1").on("click", function() {
	$("#div").fadeOut( 500, function() { $(this).html( $("#item1).html() ).fadeIn(500) });
});
$("#link2").on("click", function() {
	$("#div").fadeOut( 500, function() { $(this).html( $("#item2).html() ).fadeIn(500) });
});

# ? Dec 6, 2013 02:02

Tots: Sep 3, 2007

Sudden Infant Def Syndrome posted:

You mean like the "Basic Usage / Updating Options"?

If you use jQuery it can be as easy as something like this:

Have two hidden divs with the content you want, and one that will hold the content.
code:
$("#link1").on("click", function() {
	$("#div").fadeOut( 500, function() { $(this).html( $("#item1).html() ).fadeIn(500) });
});
$("#link2").on("click", function() {
	$("#div").fadeOut( 500, function() { $(this).html( $("#item2).html() ).fadeIn(500) });
});

Thanks! I have jQuery installed, but I haven't used it for anything. I'll check this route out.

# ? Dec 6, 2013 02:11

me your dad: Jul 25, 2006

HTML email question (hooray)

I'm sending a test email to Outlook 2013.

code:

 <p>
<span style="color:#635D9D !important; font-size:16px; font-weight:bold; letter-spacing:normal; 
margin-top:0;margin-right:0;margin-bottom:15px !important;margin-left:0;text-align:left;">
This text should be a shade of purple</span><br />

...more stuff... and then </p>

That purple text in the span is coming out black in Outlook 2013. The 'View in web browser mode' displays it purple. Gmail displays it correctly as well.

Here's a snippet from the style in the <head> for the paragraph tag. There are no rules set up dictating <span> elements.

code:


p {
font-family:Helvetica, Arial, Sans-Serif;
line-height:150%;
padding-bottom: 5px;
}

loving Outlook.

Does anyone know how I might fix that?

[edit: broke code lines up to avoid breaking tables]

me your dad fucked around with this message at 18:37 on Dec 6, 2013

# ? Dec 6, 2013 18:31

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 06:34

Sudden Infant Def Syndrome: Oct 2, 2004

Good luck with Outlook and HTML.

# ? Dec 6, 2013 19:39

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

«‹›361 »