The Web Design & Development Megathread

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

«‹›18 »

kedo: Nov 27, 2007

Internet Explorer doesn't deal in absolutes!!! What are you, some sort of number nazi who expects 25 and 25 and 25 and 25 to add up to 100?

Next you'll be telling me you want some sort of reliable box model. :argh:

# ¿ Jul 23, 2013 21:15

Adbot: ADBOT LOVES YOU

# ¿ May 8, 2024 16:07

kedo: Nov 27, 2007

The Merkinman posted:

There is no way to style the options in a select box in Android/iOS, right? I can't find any definitive documentation from Google/Apple
code:
<select>
 <option value="foo">Foo</option>
 <option value="bar" style="color:red">Bar</option>
 <option value="baz" style="font-weight:bold">Baz</option>
</select>
All those look the same on mobile.

e: didn't read your question closely enough, no I think you're stuck.

Macaw is pretty snazzy... watching that video now. I'm unsure if I'd actually use the code it generates for production, but for comps it looks pretty amazing.

kedo fucked around with this message at 14:40 on Jul 24, 2013

# ¿ Jul 24, 2013 14:34

kedo: Nov 27, 2007

CC is a ripoff if you like to A) own the software you pay for and B) skip versions. Otherwise it's fine. iirc they're eventually hoping to do away with selling stand alone versions at all, which a lot of people hate for various/obvious reasons.

Anywho. My whole studio uses the Creative Cloud and it's a-okay. Too bad the pricing sucks.

e: Also I took great pleasure in ripping Adobe a new rear end in a top hat in the satisfaction survey they sent around a few weeks ago. I'm sure my words pierced the heart of some Adobe executive somewhere... "My god, this kedo fellow called our business practices abhorrent. He's so right, how can I continue living this lie?"

Yep. That's totally what happened. I'm sure of it. :shepface:

kedo fucked around with this message at 22:34 on Jul 24, 2013

# ¿ Jul 24, 2013 22:31

kedo: Nov 27, 2007

Oh My Science posted:

It's time to talk about email campaign services! I have used Mailchimp in the past and really liked it, why would I pick someone else?

You wouldn't. They're hands down the best in the industry in pretty much every way.

# ¿ Jul 25, 2013 21:29

kedo: Nov 27, 2007

haakman posted:

I am an idiot. Thank you guys.

Welcome to the wonderful world of coding! Where a single misplaced bracket will break everything on a site.

Protip: When you actually start working on projects, do stuff like this and you will save yourself so many headaches down the road:

JavaScript code:

$(document).ready(function() {
  $(firstbox).fadeOut(1000);
}); // $(document).ready(function() {

It might seem silly or unnecessary, but when you have a couple hundred lines of code in between a simple comment like that can be a life saver.

# ¿ Jul 26, 2013 17:33

kedo: Nov 27, 2007

Oh My Science posted:

So it turns out they were asking if they should renew their contract with Annzo for $300 a month... yeah.

After reviewing their site the HTML structure is a mess, they are missing essential tags, and the only optimization I can see are the meta tags. Oh, and the reason they asked is because an Annzo rep called while I was in the store trying to get them to sign up for another 6 months.

Ask them how they found Annzo. :10bux:

says they contacted your client out of the blue saying things like, "Did you know your Google site ranks lowly in Bing results?" The number of times I've had to refute these emails to clients, it pains me.

If your client is serious about SEO, you want a SEO firm that has more of a marketing/copywriting/adwords management angle imo. The optimization of tags isn't the entire picture, but a lot of crappy tech-heavy firms just stick to that + installing often superfluous and expensive analytics packages.

Wish I knew one, but I don't. If you find someone good, share it?

e: Not to say all analytics packages are superfluous.

kedo fucked around with this message at 00:55 on Jul 27, 2013

# ¿ Jul 27, 2013 00:48

kedo: Nov 27, 2007

Flaggy posted:

Dumb question time, is there a way to forward multiple olds links to a new one?

Example:

(old) info.example.com/example-blah-blah-blah

We have about 100 of those out there in the wild searches, but we needed them forwarded to just 1 domain. I updated the A (Host) to point to the root of the domain. But when I click on the link in a google search I get a 404 error page. Is there a way to redirect all these without setting up each one that I come across?

.htaccess redirects on the old domain would do the trick.

pre:

RedirectMatch 301 ^/(.*)$  http://newsite.com/$1

Should redirect all requests to newsite.com/request

# ¿ Jul 30, 2013 17:04

kedo: Nov 27, 2007

Hmm, maybe I'm not understanding your situation correctly... do you have multiple servers involved, or are you just changing domain names or what?

# ¿ Jul 30, 2013 17:16

kedo: Nov 27, 2007

Flaggy posted:

Yeah I am probably not being clear (sorry) we had a blog here info.example.com (plus all the / we did, each blog got a page) I want to forward them all to example.com, if your example is right that would be awesome haha, seems like alot less work. That way if someone should come across an old link in google like info.example.com/blog title here it would just redirect to the new website.

Ah, gotcha... yeah that's a little out of my redirect-knowledge league. :P But Google turned up this, which seems like it might work to me:

pre:

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} !^example.com$ [NC]
RewriteRule ^(.*)$ http://example.com/$1 [L,R=301]

That'll reroute anything that's after http:// but before example.com (even www.) to example.com.

e: I want to murder whoever thought automatically wrapping [url]http://[/url] in BBcode url tags was a good idea.

kedo fucked around with this message at 17:28 on Jul 30, 2013

# ¿ Jul 30, 2013 17:26

kedo: Nov 27, 2007

Flaggy posted:

Is what mine should look like Im guessing?

Nope, you should be able to use just what I posted. The !^ on the second line targets any subdomain for example.com. Specifically, it's looking for text of any kind between the http:// and example.com. So it'd catch info.example.com, foobar.example.com, yourmom.example.com, etc.

If you change the URL on line 3 to info.example.com, it's instead going to try to match whatever shows up in between the http:// and info.example.com (ie. not the "info" part of the URL), which isn't what you want to do.

# ¿ Jul 30, 2013 18:20

kedo: Nov 27, 2007

akadajet posted:

If you block Javascript then I don't really care about you as a user at all.

Yup. Blocking Javascript is pretty idiotic these days. But last I checked less than 5% of folks block it / have it disabled, so who cares?

\/ \/ Agreed, but only to a point. The number is still so low that it's more or less negligible. I suppose you could make the argument that there might be something wonky with a person's browser that could prevent JS from processing properly, but that's quite an edge case. As long as the absolute core functionality of a site works without JS, that's generally enough imo.

kedo fucked around with this message at 22:14 on Aug 1, 2013

# ¿ Aug 1, 2013 20:50

kedo: Nov 27, 2007

Taima posted:

Does anyone know how to create, through html or (most likely) javascript, a click function or something similar that wouldn't be recognized by mobile touch browsers?

Basically I want the link to be "#" when a touch users activates the link, and an actual link when someone clicks it on a desktop environment.

You could accomplish this with Modernizr (which will add .no-touch or .touch to the body tag) + some basic JS to swap out the href of a link depending on which class the body tag has.

eg.

JavaScript code:

if ($('body').hasClass('touch')) {
  $('a').attr('href','#');
}

Depending on what those links are, you might be better off removing them entirely for touch users. Having links that do nothing sounds like pretty bad usability.

kedo fucked around with this message at 17:09 on Aug 2, 2013

# ¿ Aug 2, 2013 17:07

kedo: Nov 27, 2007

Way, way back in the early days of CSS (like, IE 5 days), rgb wasn't even supported and hex was the only option. But back then hardly anyone was using CSS because it hardly worked for anything more than text styling. Instead, you'd end up using inline bgcolor on table cells and whatnot because it was the only option � and that also only accepted hex. So that's what people used.

These days there's not really any benefit to using hex over rgba except that it requires fewer characters. Also you can mix the two in order to create opacity variations of a color with SASS/LESS. There's a time and a place for each, really.

# ¿ Aug 6, 2013 15:18

kedo: Nov 27, 2007

I'd guess it's to make the pills appear more button-like for touch users. As far as I'm aware there's not any sort of specific principle someone could point to that says "when browsers are > 768px, round things!" But the bootstrap guys probably have access to a lot of user testing data... maybe touch users are more likely to poke things with rounded corners than sharp corners?

# ¿ Aug 6, 2013 21:54

kedo: Nov 27, 2007

In my opinion, yes. Treehouse will is worth the money if you someday hope to get a job as a web designer / developer. They're not going to teach you absolutely every single thing you need to know to make some crazy nuts-o complex website but they're going to give you a very strong grounding in basic design principles and theory along with some practical code know-how.

From there, the world is your digital oyster! The longer you work in the field the more you'll realize you don't know jack poo poo because everything is constantly changing, so having a really solid foundation to build from is important. Depending on how actually rudimentary your rudimentary understanding of Ruby/HTML/CSS is you may not get much from those specific courses (except some best practices), so you could probably glide through a few of them pretty easily. You can also do a few of the video tutorials without paying if you want to test it out.

That all being said, I wouldn't put "Completed X Treehouse course" on your resume or anything.

e: Ha, I haven't watched any of these in ages. These dudes and their "holograms" are kind of hilarious.

kedo fucked around with this message at 22:20 on Aug 7, 2013

# ¿ Aug 7, 2013 22:04

kedo: Nov 27, 2007

Oh My Science posted:

I'll be throwing a big update into the OP this weekend, if I wanted to explore the possibility of an SA web dev IRC channel would people use it?

I'd probably idle in there most days. It'd be handy to have a place to ask quick questions / share stuff.

# ¿ Aug 8, 2013 20:19

kedo: Nov 27, 2007

I know jack poo poo about setting up IRC channels, but I think you can just pick a public server and make a channel...?

Really though, I have no idea.

\/ \/ Seconded. For the type of work you described, Enderzero, I'd expect to pay a freelancer much more than $50/hr. Of course it depends a lot on your skill level in addition to the other things Bognar points out.

kedo fucked around with this message at 20:54 on Aug 8, 2013

# ¿ Aug 8, 2013 20:50

kedo: Nov 27, 2007

Vintersorg posted:

IE stuff

What version of IE is giving you the problem? I'd bet a dollar it's because your container is like one or two pixels too narrow in IE due to rendering inconsistencies, so the third box is getting pushed to the next line (which isn't visible). Try either increasing the container width? ~~or maybe setting overflow-x to visible~~ (nah that probably wouldn't work)

Sadly jsfiddle is like "LALW NOPE" when I try to open it in IE8 and it's working correctly in IE9, so I can't test that for you.

kedo fucked around with this message at 23:11 on Aug 8, 2013

# ¿ Aug 8, 2013 23:06

kedo: Nov 27, 2007

Pilsner posted:

Isn't it quite easy to just disable the button until the call is done?

Might be nice to both disable it and display a pinwheel.

# ¿ Aug 9, 2013 19:05

kedo: Nov 27, 2007

Munkeymon posted:

I have a weird problem. I'm doing a pretty simple jQuery animation on a DIV to set its height. Doing that makes an absolutely-positioned child element invisible in some situations in some browsers. Chrome and iOS Safari both have the problem, but it goes away in Chrome if I run as close the the same code as possible on jsfiddle (haven't tried iOS).

This works as intended on Chrome and IE: http://jsfiddle.net/qC7RM/1/
This breaks (the DIV with the X in it disappears) on Chrome, iOS and IE: http://pastehtml.com/view/dbwi3x6dq.html

Both work on FF. Is this a bug or am I doing something incredibly stupid?

When you animate height (and many other things) jQuery sets overflow: hidden on the animating element. Your child element is outside of the normal, visible bounds of the parent element, so it's getting hidden while the animation occurs.

Possible solutions off the top of my head:
- Move the thing outside of the parent element
- overflow: visible !important (boooo)

e: Another option which I've done before in similar situations is to have the thing that's getting hidden fade out before the animation occurs and then back in once the animation finishes. It's not a perfect solution, but at least then it looks intentional.

kedo fucked around with this message at 19:42 on Aug 9, 2013

# ¿ Aug 9, 2013 19:34

kedo: Nov 27, 2007

Sudden Infant Def Syndrome posted:

Not sure if this is the right place to ask, but I have a problem I'm hoping someone here has dealt with.

I need to put Like buttons on recipes and calendar events on my work's website. For some reason it doesn't get the info (title, picture, etc) when you click it, but if you refresh and click a second time all the info is filled out. If I check the page with the FB Debugger it works just fine. If I use the debugger on a new entry and then Like, it works as well. It looks like it just doesn't scrape right on the first pass.

It looks like when an item is created in the future, I can have FB scrape it at creation, so it will always have the information. Is there a good way to go backwards and automatically scrape all previously created entries?

Using open graph meta tags could help it scrape correctly on the first go around. And if you add those it might help old entries, but I'm not sure about that. I doubt Facebook is doing any retroactive scraping... there's just no point.

# ¿ Aug 9, 2013 20:51

kedo: Nov 27, 2007

Munkeymon posted:

Don't those lazy-load by default? If not, lazy-load them. Nobody's going to be rushing to Like whatever is on your site within half a second of the first request.

I think Google still includes asynchronous requests when it calculates page performance. I'm not aware of a way around that problem though, Scaramouche. Also assuming you've tidied up most everything else, you can probably let 99kb slide.

# ¿ Aug 9, 2013 22:52

kedo: Nov 27, 2007

I found a few unanswered SO questions about it which leads me to believe it's probably not possible. Maybe you could figure out some sort of hack to prevent the script from loading / compress and cache a copy of it on your server and deliver that script up instead (who knows if that would even work), but otherwise I think you're trying to accomplish the impossible. Since it's being requested on page load and is coming from Facebook, even if you could gzip it somehow on your end you'd still have to download it in an uncompressed form first.

That is unless I'm terribly mistaken about something here.

# ¿ Aug 9, 2013 23:09

kedo: Nov 27, 2007

Any particular reason why you're using asp.net?

e: /\ /\

e2: Also, tbh all of the best web development tools these days are on Ruby/PHP/Python and they're also mostly free, while asp.net crap tends to cost $$$ in my experience.

kedo fucked around with this message at 16:39 on Aug 15, 2013

# ¿ Aug 15, 2013 16:36

kedo: Nov 27, 2007

piratepilates posted:

Everyone remember those sites that were made entirely in flash and they came complete with tons of flashy crap that did nothing and constant animations like a sci-fi fake computer only you were expected to actually use it? Dark times.

I am responsible for a few of these which are sadly still around. To this day we have people coming to us saying, "Oh I love [website], it's so fun! Will you make one like that for me?" Nonononononon on onono nononono.

Also PHP is a terrible language. Its only redeeming quality is that some of the biggest and best open source projects use it. I wish there was some sort of magical universal code translating tool so I could convert WordPress over to Python.

# ¿ Aug 15, 2013 21:25

kedo: Nov 27, 2007

Yeah, it's just hard to wrap your brain around. I'm by no means a backend dev, so all of the inconsistencies in naming and syntax drives me insane and prevents me from ever feeling like I really know the language. Of course this could be due to the fact that I'm always comparing it to Javascript which is way easier to comprehend.

All imho of course.

# ¿ Aug 15, 2013 21:34

kedo: Nov 27, 2007

Boner Slam posted:

This might sound paranoid but I don't want to upload my stuff to a cloud service, especially if it is based in the USA, since that would be technically illegal for me.

I want to know about this project.

# ¿ Aug 17, 2013 17:15

kedo: Nov 27, 2007

Mr. Wynand posted:

I know, let's define a new templating structure which is applied as a css attribute in your stylesheets.

The Decorators section of that document is pretty hilarious.

What's even more hilarious is the two named editors on this draft are Google employees.

# ¿ Aug 19, 2013 22:41

kedo: Nov 27, 2007

Anyone know if there's a way to detect whether or not a user's browser can handle tel: links? Modernizr can't seem to do it, which is a huge bummer.

# ¿ Aug 19, 2013 22:55

kedo: Nov 27, 2007

Depressing Box posted:

Modernizr doesn't automatically add a class to the body, but it looks like you can check Modernizr.inputtypes (assuming your build has the HTML5 Input Types tests). So something like this:
JavaScript code:
if ( ! Modernizr.inputtypes.tel) {
  // No tel support
}

Sadly that's for inputs, and I'm talking about these buggers: <a href="tel:1-800-YOUR-MOM">Call your mother</a> :smith:

But thanks anyhow!

# ¿ Aug 20, 2013 00:58

kedo: Nov 27, 2007

Winter is Cuming posted:

Charge more. The full $1000. Welcome to freelance. And beer money.

Basically, you're gonna want:

Project summary

Project features

Timeline for completion

Payment schedule and terms

Make it look nice, no lovely Times New Roman or anything. Other than that, you're set.

Even though this is more of a development gig, consider cribbing some terms from the AIGA standard agreement. Not the whole thing because it's insane, but the most important bits. Include a cover letter (just a normal letter template), and then have the rest be pretty basic headlines + paragraphs. And like Winter said, pretty it up a bit. Make sure the budget is obvious too... have a total + terms page.

Be extremely specific with your project summary and features, mostly the features. Project creep will kill you, especially if you're going to be answering to any sort of committee which seems likely if you're dealing with the university. Specify when and how your involvement with the project ends, but do it in a nice way (eg. "Includes 10 post delivery maintenance" is a killer, just make sure you build it into your budget).

Also yes, charge the full $1000, but if you're serious about freelancing in the future you need to figure out your rate (use this calculator and add what you feel is a comfortable % on the top) and then begin estimating hours for projects and then hopefully tracking them.

And that's basically my Freelancing 101.

In fact, I'm going to put my template up somewhere... you can steal it, I really don't mind. Let me find that thing.

kedo fucked around with this message at 02:01 on Aug 21, 2013

# ¿ Aug 21, 2013 01:35

kedo: Nov 27, 2007

No worries... and I'm actually not going to put one of my unsantized proposals online... it contains way too much crap that doesn't make sense for you. :P But my terms is more or less what I described and that's the most important bit. Good contracts build good projects just like good fences build good neighbors.

e: Also, this is a really great read about what you can charge for freelancing, since you seem so blown away by it. Don't give your time away so cheaply!

kedo fucked around with this message at 02:05 on Aug 21, 2013

# ¿ Aug 21, 2013 01:54

kedo: Nov 27, 2007

Boner Slam posted:

If it includes personal data (also data which might make a person identifyable, which I don't want to rule out), I can not upload it to an unsafe place - which is already the case if the country does not have the same data protection standards (USA). This would literally be a crime here in Germany.

That's not nearly as interesting as I was hoping it would be.

cbirdsong posted:

I do this:
code:
$('a[href^="tel"]').click(function(event){
	if( /Android|webOS|iPhone|iPod|iPad|Blackberry|Windows Phone|Opera Mobi|Opera Mini|Symbian|Fennec|Nokia|Skyfire/i.test(navigator.userAgent) ) {
	}
	else {
		event.preventDefault();
	}
});
I suppose I could do something with Modernizr's 'touch' class instead, but that seems like a sidegrade at best. I'd love to hear about a better way.

By the way delayed thanks for this. Sadly I think you've confirmed my suspicions that there's no real way to detect tel: support... guess I'll just hide the link unless it's a touch user.

# ¿ Aug 21, 2013 19:29

kedo: Nov 27, 2007

Are you using an absolute or relative path for the video? I've had that issue before (not with videoJS specifically, but with video in IE9 generally), and using an absolute path fixed it.

Otherwise: Internet Explorer :argh:

# ¿ Aug 21, 2013 20:46

kedo: Nov 27, 2007

rrrrrrrrrrrt posted:

Is this where we bitch about stupid clients? Just got feedback from a client:

1) Use modernizr
2) Hide that poo poo from no-geolocation users
3) ???
4) Recycle an old joke

# ¿ Aug 22, 2013 21:32

kedo: Nov 27, 2007

rrrrrrrrrrrt posted:

They specifically requested for it NOT to be hidden.

Your client is an irreparable idiot. You may as well take them out back and put them out of their misery.

# ¿ Aug 22, 2013 22:44

kedo: Nov 27, 2007

Generally speaking in ya'lls experience, how reliable is geolocation data for people on traditional internet connections (ie. everything that's not going through a cell tower)? I have a "find the nearest location" function on a site I'm building and am wondering if I should hide it for no-touch users.

I ask because on my work connection instead of finding my actual location it just plops me right in the middle of DC, and at home it plops me up in Maryland somewhere. Granted both are business accounts with static IPs and other weird stuff that most normal users won't need to worry about, so not sure how much that has to do with it.

# ¿ Aug 22, 2013 22:54

kedo: Nov 27, 2007

Scaramouche posted:

I don't find it super reliable to tell the truth. Depending how you're doing it (e.g. simple WHOIS) you're only going to get the registered block for the owner. So in the case of the mega bigs it's not that useful. For example, roadrunner/comcast/aol/etc. will generally show either their corporate headquarters, or maybe their NOC the next state/city over if you're lucky.

Well I'm using the geolocation API which is usually pretty reliable, but what you're talking about sounds similar to the issue I'm having. Luckily you can check for accuracy with the api. I tested it out on both my work connection and home connection and both came back with a 43km radius (loooool), while on my phone or on a neighbors normal cable connection the accuracy was about 25 meters.

Winter is Cuming posted:

Good enough, not like GPS or anything. Always of course supply an option to supply the location, and use the geolocation as a default.

This may be what I end up doing if I'm not feeling lazy.

to whoever creates a 3D CSS animated flying penis that I can drop into projects for dick clients.

kedo fucked around with this message at 15:16 on Aug 23, 2013

# ¿ Aug 23, 2013 15:12

kedo: Nov 27, 2007

So apparently iOS Safari doesn't like applying a background-size (or -webkit-background-size) to items which have background-attachment: fixed.

Anyone know why this is and if there's a workaround that doesn't involve JS?

# ¿ Aug 31, 2013 20:26

Adbot: ADBOT LOVES YOU

# ¿ May 8, 2024 16:07

kedo: Nov 27, 2007

Alright I'm being forced to dive into a little more backend work than I've done previously, so I'm looking for some recommendations.

I have a restaurant client who has a catering request form on their site. Previously it was just dumping everything into an email and sending it off, but now the client would like it to dump into a database instead (they're getting more requests than they can keep up with w/ email). The form itself is designed to be super-pretty and interactive, so using something like Formstack or Wufoo is unfortunately not an option because they cannot be customized as much as we'd like.

Any suggestions? Site is built on WordPress, but I don't really care about using a plugin. I feel like what I'm looking for is more or less a pretty simple PHP widget with a nice gui that ties into an SQL database (or something), but I'm not entirely sure where to start. A secure login, ability to sort entries, export a CVS, etc. would all be nice options.

Ideas?

e: Also, I should say that an easy to use gui is pretty important ��the client isn't the sort who'll want to muck around with some really developerly, confusing interface.

kedo fucked around with this message at 22:41 on Oct 11, 2013

# ¿ Oct 11, 2013 22:34

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

«‹›18 »