The Web Design & Development Megathread

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

«‹›361 »

lunar detritus: May 6, 2009

me your dad posted:

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

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

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

Try this: http://jsfiddle.net/8gnK6/4/

# ? Jun 20, 2014 20:10

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 13:33

me your dad: Jul 25, 2006

gmq posted:

Try this: http://jsfiddle.net/8gnK6/4/

Thanks, but I'm getting the same result on mobile:

When viewing it in a browser and resizing the window the gap between columns is now seamless but the mobile part remains a problem. Also, the top of the columns are no longer even in mobile (right column is positioned higher). They look fine on desktop.

# ? Jun 20, 2014 20:28

lunar detritus: May 6, 2009

me your dad posted:

Thanks, but I'm getting the same result on mobile:

When viewing it in a browser and resizing the window the gap between columns is now seamless but the mobile part remains a problem. Also, the top of the columns are no longer even in mobile (right column is positioned higher). They look fine on desktop.

Did you add a viewport=device-width meta tag to the html?

# ? Jun 20, 2014 21:59

Video Nasty: Jun 17, 2003

http://jsfiddle.net/8gnK6/5/

I made each of those tables "two columns" instead of "six columns".
Screenshot is from Chrome window resized for 400x800.

Only registered members can see post attachments!

Video Nasty fucked around with this message at 00:36 on Jun 21, 2014

# ? Jun 21, 2014 00:33

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

v1nce posted:

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

pokeyman posted:

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

Thanks guys. Looks like now I have something to do this weekend.

# ? Jun 21, 2014 00:57

me your dad: Jul 25, 2006

gmq posted:

Did you add a viewport=device-width meta tag to the html?

Here's what's in the head section:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
  </head>

That's copied directly from their site. Is the viewport meta tag there legit?

Jake Blues posted:

http://jsfiddle.net/8gnK6/5/

I made each of those tables "two columns" instead of "six columns".
Screenshot is from Chrome window resized for 400x800.

Thanks, but that's not going to work. The INK boilerplate relies on a twelve column structure. There can be many columns but their sum needs to add up to twelve. That's why I had two six-column elements. In other words, if you used two sets of two columns, you'd need eight more columns to make twelve.

# ? Jun 21, 2014 01:11

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

me your dad posted:

Thanks, but that's not going to work. The INK boilerplate relies on a twelve column structure. There can be many columns but their sum needs to add up to twelve. That's why I had two six-column elements. In other words, if you used two sets of two columns, you'd need eight more columns to make twelve.

Why can't you use two two eight with an empty third column?

# ? Jun 21, 2014 02:01

me your dad: Jul 25, 2006

KARMA! posted:

Why can't you use two two eight with an empty third column?

It'll cram everything to the left, like in the screenshot above. The goal is to have two evenly spaced columns on desktop, which stack vertically without separation on mobile. Having two six column tables *should* make that possible.

EDIT: I just grabbed one of their pre-built templates (Sidebar Hero, here and plugged it into an email and sent it to Litmus for client rendering. It had two columns that failed to stack too. INK just doesn't seem to work.

My template isn't too complicated. I may give it a go from scratch this weekend. I just can't find any reliable boilerplates.

me your dad fucked around with this message at 16:32 on Jun 21, 2014

# ? Jun 21, 2014 02:23

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

I've had a reasonably okay experience with Zurb: http://zurb.com/ink/docs.php

(also, ugh, HTML emails)

# ? Jun 21, 2014 21:59

an skeleton: Apr 23, 2012; scowls @ u

Hey guys I am a big idiot newb trying to set up a node/sails/angular application and am implementing a rudimentary login method into one of the sails controllers. basically it just tries to do user.findOne(object) where object is just the username/password key value pairs. It works fine and returns a user ID if there is indeed a user object with the username and password given. But if there isn't, I don't even get a response and my server crashes. Here is my code from my sails login controller.

code:

   submit: function (req, res) {
    sentUser = req.body.username;
    sentPass = req.body.password;
    User.findOne({
      username: sentUser,
      password: sentPass
    }).done(function (err, user) {
        if (err) {
          res.send('there was an error\n', err);
        } else {
          if (user.id) {
            res.send('congrats im proud of u heres the user id \n' + user.id);
          } else {
            res.send('user not found or user doesnt have an id');
          }
        }
      });

  }

Anyone know what the deal is?

Sorry if this is the wrong place for this. If so, kindly punch me in the face and direct me to the proper coordinates. Thank you

edit: This problem is now solved, but what if I want to send back a response and then redirect the user to a different view? My impression right now is that I can only do one or the other at a time but obviously that has to be wrong.

an skeleton fucked around with this message at 00:27 on Jun 22, 2014

# ? Jun 21, 2014 22:39

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

I'm writing my very first REST API, mostly for the learning experience. I'm using it as a vehicle to learn D3 (and perhaps Crossfilter) and try out Foundation. The idea is to do a little data visualization. I have a basic CRUD example up and running, using Node + Restify. Now, I am trying to think about how to handle "pagination," so to speak. There seems to be a lot of options out there, such as including metadata in the JSON response, sending next/previous headers, and supporting ranged queries. I think, because I ultimately want to the client to manipulate arbitrary bits of information, that I should build the API such that it supports ranges. Does that sound like the right approach?

# ? Jun 22, 2014 05:01

The Insect Court: Nov 22, 2012; by FactsAreUseless

an skeleton posted:

edit: This problem is now solved, but what if I want to send back a response and then redirect the user to a different view? My impression right now is that I can only do one or the other at a time but obviously that has to be wrong.

Nope. HTTP is request driven, the call to .redirect() sets response headers and sends it back to the client, you can't then send another response. There are ways to get the sort of effect you're looking for, connect-flash is one middleware.

# ? Jun 23, 2014 03:31

Boosh!: Apr 12, 2002; Oven Wrangler

cbirdsong posted:

I've had a reasonably okay experience with Zurb: http://zurb.com/ink/docs.php

(also, ugh, HTML emails)

I've been using Foundation, which is great, and am just starting to look into responsive HTML emails. Quick question before I really delve into it: with responsive emails, are we able to go beyond 600px?

# ? Jun 26, 2014 20:01

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

Kobayashi posted:

I'm writing my very first REST API, mostly for the learning experience. I'm using it as a vehicle to learn D3 (and perhaps Crossfilter) and try out Foundation. The idea is to do a little data visualization. I have a basic CRUD example up and running, using Node + Restify. Now, I am trying to think about how to handle "pagination," so to speak. There seems to be a lot of options out there, such as including metadata in the JSON response, sending next/previous headers, and supporting ranged queries. I think, because I ultimately want to the client to manipulate arbitrary bits of information, that I should build the API such that it supports ranges. Does that sound like the right approach?

Yup doing it with the ranges sounds reasonable for what you've described.

# ? Jun 26, 2014 20:03

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

Having just recently begun using SASS, I'm currently going back and reworking the CSS on an existing project. An issue I've run into is with media queries. When I nest an existing selector, I sometimes end up adding specificity that wasn't there before, and media queries related to that selector break. For example,

This media query

code:

@media (max-width: 960px){
   .someElement span{
      // properties
   }	
}

Works with:

code:

.someElement span{
   // properties
}

But not with:

code:

.someContainingElement{
   .someElement{
      span{
         // properties
      }
   }
}

So what is the best practice for nesting when the element you're nesting has a media query associated with it? Should I be nesting the media queries too?

# ? Jun 27, 2014 16:20

ufarn: May 30, 2009

You can definitely nest a media query, if it works for you.

Four levels of nesting are usually seen as a stylistic maximum by linters, but I don't know why it would cause an outright error.

# ? Jun 27, 2014 16:28

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

ufarn posted:

You can definitely nest a media query, if it works for you.

Four levels of nesting are usually seen as a stylistic maximum by linters, but I don't know why it would cause an outright error.

It doesn't cause an error, it just doesn't trigger the media query.

# ? Jun 27, 2014 16:31

kedo: Nov 27, 2007

Protip for media queries:

CSS code:

/* Breakpoints mixin */
$break-small: 768px;
$break-large: 1024px;

@mixin media-query($media) {
  @if $media == mobile {
    @media only screen and (max-width: $break-small) { @content; }
  }
  @else if $media == mobile-and-tablet {
    @media only screen and (max-width: $break-large - 1) { @content; }
  }
  @else if $media == tablet {
    @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
  }
  @else if $media == tablet-and-larger {
    @media only screen and (min-width: $break-small + 1) { @content; }
  }
  @else if $media == desktop {
    @media only screen and (min-width: $break-large) { @content; }
  }
  @else if $media == retina {
    @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { @content; }
  }
}

/* In use */
@include media-query(mobile) {
  /* My Cool Styles */
}

In terms of nesting, I always nest my media queries inside the element. Stuff like this is pretty common in most of my projects:

CSS code:

.button {
  padding: 20px;  
  display: inline-block;
  background: black;

  // States
  &:hover {
    background: white;
  }
  &.inactive {
    opacity: .35;
  }

  // Responsive states
  @include media-query(mobile) {
    padding: 10px;
  }
  @include media-query(tablet-and-larger) {
    float: right;
  }
}

I prefer to nest this way mostly because I can have every single piece of code relating to .button wrapped in one declaration which can easily be collapsed or copied & pasted or what have you.

kedo fucked around with this message at 17:00 on Jun 27, 2014

# ? Jun 27, 2014 16:42

Heskie: Aug 10, 2002

caiman posted:

It doesn't cause an error, it just doesn't trigger the media query.

I don't if it helps, but I nest my media queries in the following way and never have any issues and find it much simpler way to modularise stuff:

code:

$tablet-portrait: 700px;
$widescreen: 1152px;

.parent-class {
  .child-class {
    @include breakpoint($tablet-portrait) {
      font-size: 11px;
    }

    @include breakpoint($widescreen) {
      font-size: 12px;
    }

    font-size: 10px;
  }
}

Breakpoint being my sass mixin for media queries. The breakpoint mixin if you're interested:

code:

// Media query breakpoints
@mixin breakpoint($point) {
  @media (min-width: $point) {
    @content;
  }
}

e: Beaten by kedo as usual :argh:

Heskie fucked around with this message at 16:47 on Jun 27, 2014

# ? Jun 27, 2014 16:43

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

Very helpful guys, thanks.

# ? Jun 27, 2014 16:50

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

Say I want to use media queries to set non-mobile breakpoints in order to adjust, say, font-size for different desktop monitor resolutions. What's the best way to deal with <IE9?

# ? Jun 27, 2014 20:36

kedo: Nov 27, 2007

caiman posted:

Say I want to use media queries to set non-mobile breakpoints in order to adjust, say, font-size for different desktop monitor resolutions. What's the best way to deal with <IE9?

You don't. <IE9 doesn't support media queries. You could probably do it with javascript, or you could just say gently caress IE8 and below.

I choose the latter. :shrug:

e: Wait, I always forget about this: ~~https://code.google.com/p/css3-mediaqueries-js/~~
e2: wtf, you can't download it from that link anymore. Let me find an alternate...
e3: Here it is: https://github.com/livingston/css3-mediaqueries-js

kedo fucked around with this message at 20:47 on Jun 27, 2014

# ? Jun 27, 2014 20:44

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

kedo posted:

You don't. <IE9 doesn't support media queries. You could probably do it with javascript, or you could just say gently caress IE8 and below.

I choose the latter.

e: Wait, I always forget about this: https://code.google.com/p/css3-mediaqueries-js/

A part of me doesn't like the idea of using JS to fix IE issues. In fact I wrote a script that resizes fonts based on a percentage of the size of the containing element... but I'm thinking about scrapping it and just saying gently caress <IE9.

edit: ekk, I just saw how my fonts look in IE8 with no resizing, and they're ridiculous. I think I'll give css3-mediaqueries-js a whirl. Thanks.

Spatulater bro! fucked around with this message at 21:00 on Jun 27, 2014

# ? Jun 27, 2014 20:50

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

Lumpy posted:

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

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

What I want most in a framework is offering functionality like responsive sizing and components, and having a sane layout whether it be grid, long, or whatever. For it to be a good framework, all that needs to be separate from how it looks - I want the framework to help me organize and functionalize what is presented and how it behaves, without laying down any rules about what everything looks like.

I think that's everyone's beef with Bootstrap. Bootstrap has a particular look to it, when it shouldn't have a look at all - just offer the CSS necessary for functionality and defining what a component is, and it's golden. More frameworks need to focus specifically on the toolkit aspect of front-end, because if we don't we get hero units and blue buttons loving everywhere.

# ? Jun 27, 2014 21:08

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

Pollyanna posted:

What I want most in a framework is offering functionality like responsive sizing and components, and having a sane layout whether it be grid, long, or whatever. For it to be a good framework, all that needs to be separate from how it looks - I want the framework to help me organize and functionalize what is presented and how it behaves, without laying down any rules about what everything looks like.

I think that's everyone's beef with Bootstrap. Bootstrap has a particular look to it, when it shouldn't have a look at all - just offer the CSS necessary for functionality and defining what a component is, and it's golden. More frameworks need to focus specifically on the toolkit aspect of front-end, because if we don't we get hero units and blue buttons loving everywhere.

Bootstrap comes with a look. You can change it however you want.

People use the default look because it's easy, but the alternative of no styling at all is a lot of work for developers who will either do a bad job or not bother making whatever product.

I mean, I get sick of seeing default bootstrap styling, but I like it better than the alternative.

# ? Jun 27, 2014 21:22

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

Thermopyle posted:

Bootstrap comes with a look. You can change it however you want.

People use the default look because it's easy, but the alternative of no styling at all is a lot of work for developers who will either do a bad job or not bother making whatever product.

I mean, I get sick of seeing default bootstrap styling, but I like it better than the alternative.

Well to be honest I don't give much of a poo poo about how Bootstrap looks as long as it makes my app not look like fell out of the early 90s. I'm glad there's basic styling at all, I just figured I'd join in on the bandwagon to score brownie points. But my point about frameworks focusing on functionality and components still stands, and as far as I can tell that's what everything does and what everything seems to care about as opposed to "I hate the default style!" because really who cares.

# ? Jun 27, 2014 21:56

EAT THE EGGS RICOLA: May 29, 2008

For something basic, just use bootstrap with a bootswatch theme until your app is worth restyling.

Edit: Skeleton, HTML5 Boilerplate and Foundation are all fine too, it really doesn't matter that much.

# ? Jun 27, 2014 22:16

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

http://jsfiddle.net/LHJrW/

I have a feeling I have asked this question before but...where's my ellipsis?

# ? Jun 28, 2014 00:15

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

Do you want to have an ellipsis at the end of every line? Otherwise white-space: nowrap; will do it

# ? Jun 28, 2014 00:36

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

Gmaz posted:

Do you want to have an ellipsis at the end of every line? Otherwise white-space: nowrap; will do it

No I want it to fill up as much of the square as possible and then end with a ...

# ? Jun 28, 2014 00:42

still a child: Dec 21, 2005; banana moon

fletcher posted:

No I want it to fill up as much of the square as possible and then end with a ...

Unfortunately text-overflow: ellipsis only works on non-wrapping (1 line) of text.

# ? Jun 28, 2014 01:27

nadav: Sep 6, 2005; My last name is actually something very jewish. Like Leibovitz, only longer. And more jewish.

caiman posted:

edit: ekk, I just saw how my fonts look in IE8 with no resizing, and they're ridiculous. I think I'll give css3-mediaqueries-js a whirl. Thanks.

Another option is respond.js, which is a bit lighter and faster: https://github.com/scottjehl/Respond

# ? Jun 29, 2014 13:54

The Dave: Sep 9, 2003

Yeah I've used respond.js with bootstrap to solve those headaches easily.

# ? Jun 29, 2014 17:52

Ahz: Jun 17, 2001; PUT MY CART BACK? I'M BETTER THAN THAT AND YOU! WHERE IS MY BUTLER?!

I'm just getting into picking a front-end framework or widget library for my Django app and so far I like the look of Kendo UI. Even more so for the Visualization components. Is there anything comparable to Kendo for good visualizations and clean UI widgets that don't cost an arm and a leg?

Or is it worth it to just go with a full UI framework from one vendor to avoid duct taping various widgets and components together?

Any other suggestions?

# ? Jun 29, 2014 23:02

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

nadav posted:

Another option is respond.js, which is a bit lighter and faster: https://github.com/scottjehl/Respond

The Dave posted:

Yeah I've used respond.js with bootstrap to solve those headaches easily.

With Bootstrap, I like just creating an IE8-specific .less file and setting up the container width and all the column widths in there. That way, you only have to worry about one breakpoint working correctly in IE 8. I'm sure you could do something similar with other front-end frameworks.

# ? Jun 30, 2014 04:51

fuf: Sep 12, 2004; haha

cbirdsong posted:

With Bootstrap, I like just creating an IE8-specific .less file and setting up the container width and all the column widths in there. That way, you only have to worry about one breakpoint working correctly in IE 8. I'm sure you could do something similar with other front-end frameworks.

How do you check for IE8? Is this still a legit method?

code:

<!--[if lt IE 9]>
<link rel="stylesheet" href="css/ie8.css">
<![endif]-->

A different topic from a while back:

gmq posted:

Try uncss.

Trip report on this: I was initially really impressed because it cut my css file (that included all of Foundation) from over 100kb to like 15kb. But the problem is that it can't check for css rules that are added by js when the page loads. You can specify an array of rules that will always get preserved, but in the end I decided it was too much work to make sure I caught them all.

Brand new question:

Foundation dynamically adds a bunch of a classes to the html element when the page loads, so it looks something like this:

quote:

<html class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

Are those there just so I can check whether a browser supports a certain feature? If I'm not actually checking for them I can safely remove them right?

# ? Jun 30, 2014 13:46

kedo: Nov 27, 2007

fuf posted:

How do you check for IE8? Is this still a legit method?
code:

Yup.

fuf posted:

Are those there just so I can check whether a browser supports a certain feature? If I'm not actually checking for them I can safely remove them right?

It probably has Modernizr built into it, I'd imagine. You could remove them but I don't know why you'd want/need to.

# ? Jun 30, 2014 14:06

lunar detritus: May 6, 2009

That looks like Modernizr's output so yes, they are there to help you fix problems caused by old browsers.

I'm not sure if Foundation actually uses them though considering they removed support for IE8.

# ? Jun 30, 2014 14:09

fuf: Sep 12, 2004; haha

kedo posted:

It probably has Modernizr built into it, I'd imagine. You could remove them but I don't know why you'd want/need to.

yeah sorry you're right - they're coming from modernizr not foundation. I feel like it looks a little messy, but no big deal I guess.

# ? Jun 30, 2014 14:11

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 13:33

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

It's monday, I come into the office, all fresh and roaring to go after a sunny weekend: "Hey Bastard, we need you to transform this design with extruding ribbons, custom fonts etc into an html email. Needs to work in pretty much all mail clients as well"

...

Now I know how deer feel when they see those headlights of impending doom barreling towards them.

# ? Jun 30, 2014 18:46

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

«‹›361 »