The Web Design & Development Megathread

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

«‹›360 »

tarepanda: Mar 26, 2011; Living the Dream

kedo posted:

I'm not sure if it's intentional or not, but the carousel on that site is fast enough that I couldn't finish reading half the quotes. Are they just being meta? I don't know!

\/ \/

That was the conclusion on HN a few days ago when it was posted.

# ? Jul 18, 2013 06:41

Adbot: ADBOT LOVES YOU

# ? Apr 18, 2024 21:42

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

hayden. posted:

Another CodeIgniter question. It's a simple to-do list app, and I have pages for viewing tasks, editing a task, and creating a task.

Is it acceptable practice to have each of these pages have their own function within the controller for displaying them? They each require somewhat unique coding, and for example the view page has no need for all code used in forms on the editing and creating pages.

I know the tutorial shows just having a single "view" function for displaying multiple pages regardless of the content, but all those pages are pretty much the same format and nothing unique about them other than the content being displayed.

"It depends" :v:

A pattern I use frequently is a single edit/create view (since they are the same thing, really... one just happens to be editing something that's not in the DB yet) and a detail view. As with anything, there are exceptions based on use case (i.e lots of required info on create that you cannot later edit might lead you to separate 'create' and 'edit') but having two Views for that is how I would personally do that.

What you described is:

1. getting a list of tasks
2. Presenting a list of tasks
3. getting data for one task
4. presenting single task data in an editable form
5. presenting an empty form for single task creation
6. handling user input for an existing task
7. handling user input for a new task

1, 3, 6, and 7 are "Controller Things"
2, 4, 5 are "View Things"

4 & 5 are so similar they probably are the same thing.
6 & 7 are so similar they probably are the same thing.

The question then is are there three controller things, two, or one? Two Views seem "obvious" here (list presentation and create/ edit) so you're left with how to break up controllers. I'd probably go with two, one for the collection, one for handling individual Task stuff, but there are arguments for other solutions.

Also, if you want to read up on object-oriented design and how to structure applications, the book Practical Object-Oriented Design in Ruby: An Agile Primer is astoundingly good. Don't let the 'Ruby' in the title worry you; it just happens to be the language the examples are in, but if you've never programmed in Ruby before (like me) the syntax is so simple and the explanation so good (and there's not really all that much *code* in the book) that it's not a concern. I really can't recommend that book enough no matter what you are coding in.

# ? Jul 18, 2013 17:00

hayden.: Sep 11, 2007; here's a goat on a pig or something

Thanks a bunch Lumpy. I'll give that book a look. I will probably need clarification soon but I'm too burned out at the moment to keep thinking about it.

# ? Jul 19, 2013 03:28

blugbee: Mar 1, 2004; hi c-fut

What's a good way to write out a software spec for a webapp? I've written out the relevant parts out of IEEE830 but there's probably a better way to do it. I'm going to outsource some coding locally and would like something easily understandable to show potential contractors. Should I just write out url routes and describe what they are supposed to do?

# ? Jul 19, 2013 14:06

jiggerypokery: Feb 1, 2012; ...But I could hardly wait six months with a red hot jape like that under me belt.

Wow what a beautiful op. I just got a job on a graduate scheme for a web development firm, total career change for me. Just out of interest, why no SQL mention? Is this more of a front end thread or may I ask whatever web development related here?

# ? Jul 19, 2013 20:49

kedo: Nov 27, 2007

jiggerypokery posted:

Wow what a beautiful op. I just got a job on a graduate scheme for a web development firm, total career change for me. Just out of interest, why no SQL mention? Is this more of a front end thread or may I ask whatever web development related here?

There's actually an entire thread dedicated to SQL, hence the reason why we're not talking about it much here. But you can of course try asking anyways!

# ? Jul 19, 2013 21:02

Oh My Science: Dec 29, 2008

Looks like I get to work with a restaurant to replace their old site, and they want some kind of reservation system. I could make it myself, but I would prefer to use an existing service in order to save time and potential headaches on my end. Anyone have a suggestion? Ideally it would have some sort of API.

If you know of an amazing restaurant website feel free to share, I have a lot of creative freedom on this project. If it helps, it's a traditional indian / tandoori restaurant.

Oh My Science fucked around with this message at 20:20 on Jul 22, 2013

# ? Jul 22, 2013 20:12

kedo: Nov 27, 2007

Oh My Science posted:

Looks like I get to work with a restaurant to replace their old site, and they want some kind of reservation system. I could make it myself, but I would prefer to use an existing service in order to save time and potential headaches on my end. Anyone have a suggestion? Ideally it would have some sort of API.

If you know of an amazing restaurant website feel free to share, I have a lot of creative freedom on this project. If it helps, it's a traditional indian / tandoori restaurant.

OpenTable and CityEats are the two most popular/widely used reservation systems. Sadly, as far as I'm aware neither have APIs. You just have to embed their little widgets.

# ? Jul 22, 2013 20:52

Oh My Science: Dec 29, 2008

kedo posted:

OpenTable and CityEats are the two most popular/widely used reservation systems. Sadly, as far as I'm aware neither have APIs. You just have to embed their little widgets.

I just found seatme.com, looks like a compelling option after reading about their services. Check it out, let me know what you think.

# ? Jul 22, 2013 21:02

me your dad: Jul 25, 2006

I'm putting together a dead simple landing page for a friend to serve as placeholder while he gets me some additional content. This is the first time I've tried to adapt a site to a mobile layout, and I'm hitting a puzzling roadblock.

My goal is to expand the #container div to 100% width and height of the window in both portrait and landscape view, with all content centered. I currently have the body color set to brown just to distinguish it from the container. I've tried various things and the only thing that will expand the container div is using a specific pixel width. But that defeats the purpose of a fluid layout.

There also seems to be a horizontal line in the body beneath the #container div. I have no idea where it's coming from.

I'm testing using the Chrome browser on a Galaxy S3. I ran an iPhone emulator and the results were even worse.

This is what I see on the S3:

What am I doing wrong?

Site: http://trailstrim.com/

Relevant CSS:

code:

@media (max-device-width: 600px) {
body {
background-image:none;
background-color:#633B1C;
}
#container {
width:100%;
border:none;
background-color:#343839;
}
#logo {
width:100%;
margin:0 auto;
padding:20px 0;
}
#logo img {
margin:0 auto;
}
#header h2  {
color:#D0E0EB;
font-size:2.5em;
font-family: 'Fjord One';
letter-spacing:7px;
text-align:center;
font-weight:bold;
text-transform:uppercase;
}
}

# ? Jul 23, 2013 02:42

Oh My Science: Dec 29, 2008

me your dad posted:

What am I doing wrong?

I'm pretty sure the offending element is the img, try setting its width to a percentage when viewing in portrait or landscape mode.

I even made a thing, http://mobilelanding.herokuapp.com/, which I think does exactly what you want minus any fancy styling. It uses the portrait and landscape media queries to target mobile devices. Note that it doesn't do anything when using your desktop browser.

# ? Jul 23, 2013 05:39

PT6A: Jan 5, 2006; Public school teachers are callous dictators who won't lift a finger to stop children from peeing in my plane

kedo posted:

OpenTable and CityEats are the two most popular/widely used reservation systems. Sadly, as far as I'm aware neither have APIs. You just have to embed their little widgets.

OpenTable is pretty much the industry standard, at least everywhere I've ever been. The sad part isn't the APIs, it's the exorbitant loving fees. I wish I'd come up with that poo poo, because they're literally making something like a dollar per diner reserved (yes, per diner, not per table), in addition to insane monthly fees. I have no idea how they maintain market share at that price, but they're certainly doing something right.

# ? Jul 23, 2013 06:54

Oh My Science: Dec 29, 2008

PT6A posted:

OpenTable is pretty much the industry standard ...

Yup, I spent my day researching reservation services and OpenTable's prices are indeed insane. I'll for sure bring them up as an option but after reviewing seatme.com I think they are the better choice. $99 flat fee, no charge per confirmed registration, and their website / product doesn't look like poo poo.

# ? Jul 23, 2013 06:59

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

PT6A posted:

OpenTable is pretty much the industry standard, at least everywhere I've ever been. The sad part isn't the APIs, it's the exorbitant loving fees. I wish I'd come up with that poo poo, because they're literally making something like a dollar per diner reserved (yes, per diner, not per table), in addition to insane monthly fees. I have no idea how they maintain market share at that price, but they're certainly doing something right.

This is second hand from books and blogs but OpenTable basically set themselves up as a racket. They got in first, and set things up so they'd own the customers, not the restaurant. They've established a re-donkey-kong market share from that, and now essentially hold a lot of restaurants over a barrel because they have control over the customer details and points of contact.

OpenTable is a pretty ironic name considering.

# ? Jul 23, 2013 07:41

me your dad: Jul 25, 2006

Oh My Science posted:

I'm pretty sure the offending element is the img, try setting its width to a percentage when viewing in portrait or landscape mode.

I even made a thing, http://mobilelanding.herokuapp.com/, which I think does exactly what you want minus any fancy styling. It uses the portrait and landscape media queries to target mobile devices. Note that it doesn't do anything when using your desktop browser.

Thanks - I used your media queries for the screen size and now things are looking better.

But for some reason the img inside the #logo div won't center in portrait or landscape.

And a weird thing - when I go from landscape to portrait, the phone doesn't recognize the media query and uses the default styles. A page refresh sets it back to the mobile css.

# ? Jul 23, 2013 12:04

cbirdsong: Sep 8, 2004; Commodore of the Apocalypso; Lipstick Apathy

To use margin: 0 auto on an <img> tag, you have to make it a block-level element. You could also just apply text-align: center to the #logo div, or in your case, the entire body tag, not just the elements containing text.

You should also add max-width: 100% to the #logo img style, so this doesn't happen:

# ? Jul 23, 2013 13:46

Flaggy: Jul 6, 2007; Grandpa Cthulu needs his napping chair; Grimey Drawer

What is everyone's thoughts on CDNs? Is there one people prefer over others if its worth it?

# ? Jul 23, 2013 14:18

kedo: Nov 27, 2007

Flaggy posted:

What is everyone's thoughts on CDNs? Is there one people prefer over others if its worth it?

Amazon S3 unless you just don't like their pricing structure. It's hard to argue with their infrastructure, no one else really compares. After that, maybe Rackspace.

Oh My Science posted:

I just found seatme.com, looks like a compelling option after reading about their services. Check it out, let me know what you think.

That's pretty nifty, hadn't heard of it before! Looks like the main downside is that it's tied to Apple products and not every restaurant will want to change their entire system over from Micros, which is what probably 90% of restaurants use. However if your client is open to it, I say go for it.

The few restaurant clients we get these days I usually push towards CityEats and it's certainly not a hard sell (mostly due to price). They also just have much nicer widgets.

# ? Jul 23, 2013 14:37

Flaggy: Jul 6, 2007; Grandpa Cthulu needs his napping chair; Grimey Drawer

Amazon's pricing structure seems pretty reasonable, unless I am missing something.

# ? Jul 23, 2013 15:23

kedo: Nov 27, 2007

Flaggy posted:

Amazon's pricing structure seems pretty reasonable, unless I am missing something.

Nah, it's very reasonable. Some people just don't want to pay per GB and would rather have a standard monthly fee. I run into that problem with clients who have strict budgets and an intense desire to control costs.

# ? Jul 23, 2013 15:25

Transmogrifier: Dec 10, 2004; Systems at max!; Lipstick Apathy

Seems some developers are working on a new web design app that will function more as a designer tool than a coding tool. They just posted a sneak peek of the app in action, starting from a blank canvas to the actual HTML and CSS output. It's called Macaw and it's looking really promising.

# ? Jul 23, 2013 16:31

me your dad: Jul 25, 2006

cbirdsong posted:

To use margin: 0 auto on an <img> tag, you have to make it a block-level element. You could also just apply text-align: center to the #logo div, or in your case, the entire body tag, not just the elements containing text.

You should also add max-width: 100% to the #logo img style, so this doesn't happen:

Thanks - I can't believe I didn't think to use text-align on the body.

Regarding this problem:

I set #logo img to max-width:100% and it's still exhibiting that behavior when I go from landscape to portait. From portrait view, I go to the site and it looks fine. I rotate to landscape and it looks fine. I rotate back to portait and it seems to ignore the media query, producing what is pictured above. The mobile version doesn't have the wood background or the border, and the body background is set to the slate color.

Sorry to have so many stupid/annoying questions. I'm still pretty new to all this.

# ? Jul 23, 2013 16:34

kedo: Nov 27, 2007

me your dad posted:

Thanks - I can't believe I didn't think to use text-align on the body.

Regarding this problem:

I set #logo img to max-width:100% and it's still exhibiting that behavior when I go from landscape to portait. From portrait view, I go to the site and it looks fine. I rotate to landscape and it looks fine. I rotate back to portait and it seems to ignore the media query, producing what is pictured above. The mobile version doesn't have the wood background or the border, and the body background is set to the slate color.

Sorry to have so many stupid/annoying questions. I'm still pretty new to all this.

#logo has a static width of 450px which is allowing that image to break outside the borders of the design at small sizes.

Do this:

CSS code:

#logo {
  width: auto;
  margin: 0 auto;
  padding: 20px 0;
  text-align: center
}
#logo img {
  max-width: 100%;
}

e: If this isn't quite what you're looking for sorry � I admittedly have not read up on what other folks have been telling you to do

But this fixes the problem in your screen shot!

# ? Jul 23, 2013 17:11

cheese eats mouse: Jul 6, 2007; A real Portlander now

Anyone run into a bug with Sublime Text2 where it doesn't save your files? I had that happen to me on Friday with a site. Made me switch back to Coda. =/

# ? Jul 23, 2013 17:28

Oh My Science: Dec 29, 2008

me your dad posted:

Sorry to have so many stupid/annoying questions. I'm still pretty new to all this.

I threw the source code for my example up on github here. You will notice that I used text-align:center; and removed those extra divs which are unnecessary for such a simple design.

I didn't notice any problems with the layout upon first load on a mobile device but you could always wrap the desktop styles in a separate media query.

# ? Jul 23, 2013 17:41

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

I'm more looking for some ideas on how to organize some information and less looking for critiques, so maybe this should go here instead of the super (un)popular critique thread?

This is just early stages of a toy site I made and on which I was really just concerned with writing the backend, but currently I'm kinda stumped with how to organize the info that appears when you click any of the movie titles. Right now I have it all just kinda dumped in a Bootstrap well, but I'm not married to that idea.

I just don't really have any ideas about how else to display it, and it looks kinda blah as is.

Any ideas or sources of inspiration that you think would match up with the type of info I'm trying to display?

http://www.trailerthingy.com/
password: imagoon

# ? Jul 23, 2013 17:45

fuf: Sep 12, 2004; haha

How come when I have 4 divs with:

code:

float:left
width:25%

they line up in a nice little row except on Internet Explorer where the last one gets shoved down a row?

e: Thanks MonkeyMaker

fuf fucked around with this message at 20:25 on Jul 23, 2013

# ? Jul 23, 2013 20:08

MonkeyMaker: May 22, 2006; What's your poison, sir?

fuf posted:

How come when I have 4 divs with:
code:
float:left
width:25%
they line up in a nice little row except on Internet Explorer where the last one gets shoved down a row?

IE doesn't like 100%. Give them 24.9999999%

# ? Jul 23, 2013 20:12

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

substitute: Aug 30, 2003; you for my mum

cheese eats mouse posted:

Anyone run into a bug with Sublime Text2 where it doesn't save your files? I had that happen to me on Friday with a site. Made me switch back to Coda. =/

I haven't, but give it another try with this package enabled:

https://github.com/joelpt/sublimetext-automatic-backups

# ? Jul 23, 2013 23:38

Scaramouche: Mar 26, 2001; SPACE FACE! SPACE FACE!

I'm having an odd problem with Firefox where it's having trouble with the nyroModal floating window. What makes it more frustrating is that the client is experiencing this problem, and not me, and I haven't been able to duplicate it. The floating window is meant to be a shopping cart. This is what is should look like approximately:

That is, a nice little window floating over the greyed out background. This is how it works for me and everyone else I can test.

The nyro call is pretty straightforward (despite having custom in the name this is a minified version of the most recent nyroModal, same with jquery.min.js):

code:

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="jquery.nyroModal.custom.min.js"></script>
<link rel="stylesheet" href="nyroModal.css" type="text/css" media="screen" />

(bunch of code)
<div><a class='nyroModal' rel="nofollow" 
href="add-to-cart.aspx?productid=blahblah&qty=blahblah&etc querystring stuff">
<img src="/img/btnAddToCart.jpg" /></a></div>

This is what it ends up looking like on the client's computer (they've sent me screenshots):

The shopping cart doesn't 'float' over the page at all, it takes up the entire page. The white background is the contents of the modal being stretched to fill the entire screen. It's almost like the browser is rendering "add-to-cart.aspx" in the main window and ignoring all of the nyroModal directives.

I >have< made it look like this, but to do so I disabled Javascript entirely. The customer claims they have javascript enabled, but are still having this problem. They are running FireFox 22 on Windows 7 32x Home Basic.

So my questions are:
- Anyone ran into this? I scoured the nyroModal github and google code areas and can't find someone having an equivalent problem.
- Am I barking up the wrong tree by thinking it's a nyro problem at all? The behavior just seems to be that it's not popping the nyro modal when clicked, instead loading it in the main frame. Is there a way for someone to have configured a Firefox browser to cause this other than Javascript disabled?

EDIT-Editing to say that nothing strange shows up in the development console, which is why I didn't post this in the jQuery thread.

Scaramouche fucked around with this message at 00:40 on Jul 24, 2013

# ? Jul 24, 2013 00:13

cheese eats mouse: Jul 6, 2007; A real Portlander now

substitute posted:

I haven't, but give it another try with this package enabled:

https://github.com/joelpt/sublimetext-automatic-backups

I'll try it tomorrow. Thanks!

# ? Jul 24, 2013 01:01

Scaramouche: Mar 26, 2001; SPACE FACE! SPACE FACE!

Scaramouche posted:

I'm having an odd problem with Firefox where it's having trouble with the nyroModal floating window. What makes it more frustrating is that the client is experiencing this problem, and not me, and I haven't been able to duplicate it. The floating window is meant to be a shopping cart.

Son of a @#$$#@@#$!@#!@#!!@##!@#@!. Some bright spark added another jquery script (1.4) definition to the master page when I wasn't looking. Guess it was a jquery problem after all.

# ? Jul 24, 2013 02:13

Nebulon Gate: Feb 23, 2013

http://macaw.co/peek/

So this is loving impressive.

# ? Jul 24, 2013 03:50

spacebard: Jan 1, 2007; Football~

Thermopyle posted:

I'm more looking for some ideas on how to organize some information and less looking for critiques, so maybe this should go here instead of the super (un)popular critique thread?

This is just early stages of a toy site I made and on which I was really just concerned with writing the backend, but currently I'm kinda stumped with how to organize the info that appears when you click any of the movie titles. Right now I have it all just kinda dumped in a Bootstrap well, but I'm not married to that idea.

I just don't really have any ideas about how else to display it, and it looks kinda blah as is.

Any ideas or sources of inspiration that you think would match up with the type of info I'm trying to display?

If you're planning on making it public, then I would organize it semantically. Maybe with the Movie schema?

Maybe have a main trailer (hero class?) and then some related ones underneath as an aside.

# ? Jul 24, 2013 04:12

Oh My Science: Dec 29, 2008

Thermopyle posted:

I'm more looking for some ideas on how to organize some information and less looking for critiques...

I think there are two things that stand out most to me.

1. You cant click on the entire row to expand the content, I found myself being stupid on an iPad having to click the link.

2. The expanded content looks out of place inside the .well, having a different color background than the title looks awkward. You also need more white space.

I played around with bootstrap on codepen and came up with http://cdpn.io/rfgdJ. It addresses both issues. Please note the mock up is incredibly rough and that you may want to refine how I nested the rows if you choose to do something similar.

Oh My Science fucked around with this message at 05:28 on Jul 24, 2013

# ? Jul 24, 2013 04:59

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

Transmogrifier posted:

Seems some developers are working on a new web design app that will function more as a designer tool than a coding tool. They just posted a sneak peek of the app in action, starting from a blank canvas to the actual HTML and CSS output. It's called Macaw and it's looking really promising.

As a non-designer I'd love to sell this to our non-coding designers so that they could do all the layout work and leave me to tidying up their semantic definitions and doing content delivery.

# ? Jul 24, 2013 05:58

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

Winter is Cuming posted:

http://macaw.co/peek/

So this is loving impressive.

PHP code:


            <div class="text">Macaw is coming soon to the App Store! Want updates?</div>
            <form class="sign-up fluid-span-4 clearfix" id="signup" action="<?=$_SERVER['PHP_SELF']; ?>" method="get">
              <input class="email-field" type="text" id="email" placeholder="your email">
              <button class="sign-up-button">sign up</button>
            </form>
            <div id="response" class="notice"><? require_once('/inc/store-address.php'); if($_GET['submit']){ echo storeAddress(); } ?></div>

lol

# ? Jul 24, 2013 06:05

Mister Chief: Jun 6, 2011

Why is that happening?

# ? Jul 24, 2013 06:55

Adbot: ADBOT LOVES YOU

# ? Apr 18, 2024 21:42

Cawd Rud: Mar 12, 2009; Salad Prong

Well, they have PHP code in a .html page and it's not being handled. The form still works if javascript is enabled since that takes over, but it's obviously broken without javascript enabled. Someone screwed up.

# ? Jul 24, 2013 07:37

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

«‹›360 »