The Web Design & Development Megathread

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

«‹›7 »

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

Depressing Box posted:

It looks like Safari has remote Web Inspector support as of iOS 6.

Yep, shits me cause I work on Ubuntu, but basically the only way to get good info out of the iPhone beyond alerts now, is USB + Safari. Can't even get at debug messages with just the phone now.

# ¿ Jul 9, 2013 08:47

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 04:44

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

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

Vintersorg posted:

Yeah, we use mailchimp here and it's loving awesome to work with.

I'm just a light campaign monitor user here, found their interface a lot better than Mailchimps, but that was before the redesign. How're you finding the new setup?

# ¿ Jul 25, 2013 22:49

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

Either way, it's a rather peculiar choice to, in a book about practical application of typographic conventions, decide to throw away the two primary conventions for recognising inline links, colour and underline.

# ¿ Jul 28, 2013 02:23

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

hayden. posted:

There's that and also you're one of those websites I hate and leave because you require JS to load images (I use NotScripts). Can't you do this in the PHP or whatever backend you're using?

This is not perfect but I really think this is the best way to approach images with current standards, drop in solution for PHP, that takes an image request and serves up a device appropriate image size. It uses either screen size information from a cookie (JS, first case), or a roughie using UserAgent if it doesn't make it.

http://adaptive-images.com/

# ¿ Aug 1, 2013 16:20

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

Pseudo-God posted:

And what about building apps with backbone.js and the rest of the front-end libraries, which obviously don't work without JavaScript? Are we supposed to code our business logic twice, just to support a tiny minority of users?

That's an entirely different thing. If your website is about sales conversion, not high level interaction, the front end shouldn't lock up cause the Javascript hasn't loaded up yet. Modern web applications have prerequisites, they're not the same kettle of fish.

# ¿ Aug 2, 2013 10:09

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

Just as a note, part of my comment was that by erring on the side of caution with Javascript, you can have a website that is accessible and USABLE even if the user is on some lovely bad reception 3G connection. It's pretty easy to get carried away with JS bloat, and it severely impacts the experience you may be trying to create. It doesn't hurt to develop with a 'default' state in mind, and that means genuinely thinking about the lack of Javascript as a potential occurrence and not dismissing it.

# ¿ Aug 2, 2013 14:55

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

Scaramouche posted:

This might be coming at it from the wrong end, and feel free to disagree with me everyone else, but generally I find if you're relying on z-index to render a 'normal' layout properly you are probably doing Something Wrong. I've have CSS elements layered 4 deep and never had to rely on it, and every time I've 'had' to use it, it didn't work and I ended up re-doing things so I didn't have to.

Yeah, z-index is pretty hard to use in any modular design because it's unscoped, just a number. It'd be a poo poo load more useful if it was possible to create z-index groups and manually control the layering within that group without having an element pop up and out of the group unless you were specifically asking it to. As it is, especially in a recent app I'm working on where we have multiple stacking pages, document order is more reliable rather than forcing it through z-index, because then you start needing to manually place every element in the stack and it just gets hard to maintain.

# ¿ Aug 27, 2013 12:19

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

Death Himself posted:

Is there a downside to using an image-map? I got handed some graphics heavy pages and I could slice it up to make a bunch of parts, align them all with html/css and so on but then I realized that I could do a whole page with an image-map in like 5 minutes since nothing on it needs to be reactive to the mouse rolling over it or anything like that.

I have never used image-maps on a serious website though and I don't see them in the wild that much. So I'm wondering if there is some problem with them I am not aware of.

Using HTML/CSS is a much more accessible setup that gives you more control to ensure a screen reader can access it the way you want them to. You have to put a shade more thought into how you do the click zones based on your use case, but invariably you're gonna end up with a more accessible end result for keyboard/screen reader/etc users.

Maluco Marinero fucked around with this message at 10:46 on Aug 29, 2013

# ¿ Aug 29, 2013 10:42

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

Blinkz0rz posted:

I'm partial to this one:

http://slipsum.com/

http://www.boganipsum.com is not bad either if you want an Aussie slant.

# ¿ Oct 13, 2013 02:24

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

Fella in my co-working space showed me a great way to handle aspect ratio in responsive designs recently. In a nutshell:

HTML code:

<ul>
  <li>
    <div class="ratio">
      <div class="content">
	Here be the content
      </div>
    <div>
  </li>
</ul>

CSS code:

.ratio {
  display: block;
  position: relative;
  padding-bottom: 75%;
  overflow: hidden;
  width: 100%; # unnecessary, but there to make the point
}

.ratio .content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

You now have a block that will be locked at 4:3 ratio no matter what you throw at it, because the vertical padding when given a percentage actually calculates off the horizontal space, not the vertical.

You can turn this into a swell mixin too:

CSS code:

@mixin ratio($aspect-ratio) {
  display: block;
  position: relative;
  padding-bottom: 100% / ($aspect-ratio);
  overflow: hidden;
  width: 100%;
}

.ratio {
  @include ratio(16/9);
}

Might be nothing new to people here but I liked it, really nice way to handle the problem, and finds a way to make use of the odd vertical percentage behaviour that I always knew about but never really understood when it would have an application.

# ¿ Nov 7, 2013 10:45

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

fletcher posted:

I don't know a whole lot about CoffeeScript so this may be a dumb question, but is it hard to debug since you have to step through JavaScript but it was written as CoffeeScript?

Its not too bad but if you don't take the time to learn JavaScript properly first it can be hard work. Even using source maps is difficult because you can't breakpoint inline one line functions very well and you end up with multiples steps per line.

To be honest often I prefer to debug in js even if I write in Cs.

# ¿ Nov 8, 2013 00:40

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

jackpot posted:

Another question: this guy's SSL is expiring in a month, long before we'll have his new site ready, wherever it is (might stay at Volusion, might move, I don't know). If he renews his Symantec SSL through Volusion, I assume that would transfer if he were to move to a new web host? Surely, right?

Certificates are generated from certificate signing requests that are created by the hosting server. You'd have to check that they can regenerate a certificate when migrating it to a new host.

# ¿ Nov 13, 2013 08:09

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

You want to use CSS3 multiple backgrounds when you can't just use a colour to cover the repeating section. Unfortunately not supported by IE8 and below, so if you want to do that you'll need multiple divs, using absolute positioning to move them around so they each take one of the backgrounds.

http://caniuse.com/multibackgrounds
http://www.css3.info/preview/multiple-backgrounds/
http://css-tricks.com/stacking-order-of-multiple-backgrounds/

Have a gander at that and see how you go.

# ¿ Nov 17, 2013 23:13

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

Thermopyle posted:

Make something. Think of something you like and make a web app dealing with that.

Yep, I've posted this before, but may as well repeat it. I started from scratch 2 years ago, and I decided to build a thing I gave a poo poo about whilst being a full time daddy day care. (solving a problem from my previous industry)

Now I'm a fulltime contractor, I work on my own projects but also have more than enough work through my front end and back end dev experience to support my family.

Once you're well on your way and building the thing you want, start getting involved in the local community if you can, dev meetups, coworking, whatever you can make work for you. This is for two reasons, you'll learn heaps by sharing what you've done, including communicating the work which is a CRITICAL skill if you want to get paid for this. Secondly, you'll be making contacts who will potentially turn into or lead you to potential employers.

If I had done the second part sooner I would've grown as a developer much quicker. Don't be afraid of showing your work even at early stages because the only way to improve and stop bad habits setting in is to seek effective feedback.

Tldr: go make some poo poo and talk about it.

# ¿ Nov 26, 2013 07:44

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

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

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

Oh My Science posted:

Wordpress multi-site is what you're looking for, it will allow you to administrate multiple Wordpress installs with one admin account. Each site in your network can have a different theme and they do not share media uploads.

As for the domain question, I would encourage them to setup their own domains now.

Just one thing to take into account with multi site is the fact that user accounts are global within the multi site network. Thats okay if you intend that, but if there needs to be a clear functional split don't use WordPress multisite and do independent installs instead.

# ¿ Dec 17, 2013 20:59

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

pipes! posted:

It's funny how web technology is finally starting to catch up with print. Ligatures, grid systems, alignment, text flowing, etc.

Globally scoped variables

But the CSS spec for variables has selector scoped variables.

That said though, I think its pretty dumb to tout future proof code as a feature as if they know that the spec will definitely conform to the current iteration. Future proofing CSS seems to me a dumb fools errand, like assuming that a version 0.1 API won't require code changes in the future.

At least with SASS if the spec changes you just change the output, and fire deprecation warnings if required.

# ¿ Dec 18, 2013 06:21

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

samglover posted:

I've been re-writing the stylesheet for Lawyerist.com to use rem units, but I still need to support IE 8. Sucks, but our readers are lawyers, and a ridiculous number are still on IE 8.

Is there a script or something I can feed my stylesheet into that will spit out an IE 8–compatible stylesheet? I'd rather not do it all manually, if I can avoid it.

Have you used sass or something? Maybe myth.io can put pixel polyfills in for rems, but otherwise a sass mixin that does the conversion and puts in a pixel fallback is what you'll need.

If you setup a good regular expression you could even automate the majority of the change.

# ¿ Dec 21, 2013 01:44

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

pipebomb posted:

His concern, rightly, is that he has a specific config, others may as well. Money talks, ego walks.

And as an aside, a responsible web developer should be using the analytics and expected audience to inform these decisions, not dogma. If you have an abnormally high IE8 browser share for your website, well you should support it to a reasonable degree.

# ¿ Dec 27, 2013 09:09

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

pipebomb posted:

That's a great point Maluco - in this case, the client is a lawyer who handles clients with little or no money. That demographic might not have the latest technology, so it's certainly something to consider.

Come on now, it can also features a large amount of stuck in the mud people who still use internet explorer because thats all they've known on the desktop, even if the rest is iPhones and iPads. I think the snark is hardly necessary mate.

# ¿ Dec 27, 2013 18:11

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

pipebomb posted:

I Intended no snark, I was serious.

Oh okay sorry. Low bandwidth text and all that, perceived sarcasm where there was none. Certainly depends on the segment of law whether the clients have no money or not.

# ¿ Dec 27, 2013 18:52

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

Pollyanna posted:

Are browsers like Firefox or Chrome not available at all on older systems/laptops? Seems to me like if that isn't the case, then you can't say it's only because of that. Although you should still allow for it...

Its not a case of what's available, but what is conveniently available. The base version of Internet Explorer distributed with Windows will be good enough for a significant portion of certain demographics. They will not even realise the difference between latest tech and IE8 unless they end up with an iPhone or iPad where the default browser is modern.

Even in that case, if the site is then broken it will be the websites fault, and not the browser's. You can train clients the difference, and certainly there is more room to drop lower versions when you are building web applications, but for sales pathways you can't expect to engage in customer education about better browsers.

If someone is just browsing looking for a particular service, if you throw up an 'install something else' popup rather than doing a best effort to deliver the page, you will probably bounce that user and not see them again. That's why you must judge your supported list based on demographics and use case.

For example, I'm building a web based maintenance system for ships. A big part of the sell is that even though it's a web app, it can work offline. This is possible only with technology in IE10+ and all of the other modern browsers. I am comfortable with this because the sales process is already going to require customer education, and once they've committed to using the app they will be sold and be willing to make that jump. It also helps that I'll be targeting small operators which means less restrictive IT policies regarding browsers and intranets and what not.

The public sales pages however, will definitely be supporting IE8, no question about it. That may not mean pixel perfect replication, but it will be attractive and usable for what its intended. There is no wiggle room here as I know for a fact that a lot of the target demographic will be on base install, maybe not the end users but definitely the decision makers at that company.

Anyway, that's a lot of :words:

for, its situational.

# ¿ Dec 27, 2013 19:07

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

kedo posted:

Anyone aware of a image sprite tool that'll output SASS mixins? Compass apparently does something similar, but I don't want to introduce an entirely new framework into my project just for easy sprite generation.

Glue is the closest I've found, but it only outputs CSS classes and it'll be a pain in the rear end to change them all to mixins.

e:

By the way thanks for this!

Failing that you could use @extend instead, which will be essentially the same thing with the added bonus of not repeating all the CSS lines, only expanding the selector.

# ¿ Jan 3, 2014 20:00

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

subx posted:

Hey I have an SSL question too! I'm not sure if anyone here will know or not, but I don't know which thread is best.

So we have a tray application that does some fancy printing stuff. It shoots over a request to a local web server that the tray app runs, and it works fine over http. When you try to do it over https, you get the error:

Is the only way to get this to work with https to make the tray work with an https request? Is there any other way to do this that wouldn't require me learning a whole bunch about ssl that I don't really want to learn at the moment?

The point of SSL is that there is a guaranteed handshake encryption between your server and the web browser.

That guarantee means that all the elements that constitute the page are securely delivered over SSL meaning they cannot be tampered with or listened to. ANY elements loaded with http breaks this guarantee and is a potential vulnerability to listening, or modification.

If you're going to make a page or request in SSL, you need to go all the way to be genuine about it.

# ¿ Jan 14, 2014 05:30

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

Yeah. Its a bit hard to follow the end result here. Hell, if its client to localhost why do you need SSL? And even so, wouldn't a self signed certificate work in that case? Bit beyond my usual ballpark.

# ¿ Jan 14, 2014 10:03

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

My standpoint is that for web applications it makes sense, where the user is expected to keep that page as their hub to external links, but for general content websites, browsing contexts, don't use it.

# ¿ Jan 18, 2014 02:51

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

Pollyanna posted:

What's the deal with programs like Grunt, Bower, Node, etc.? Are they all independent things or is there something I can download that will take care of them all?

Node is a webserver written in JavaScript.
Node has packages that give it more functionality.

Grunt is one such package that let's you create tasks, such as running a local development server with live reload, compiling scss, jade, near anything you need in the course of development.

Bower is a poor mans package manager for JavaScript on the client side. It fetches dependencies like jquery, angular, ember, etc and puts them in a folder called 'components' by default.

It's not particularly good and it doesn't handle things like customised builds of dependencies. Some package maintainers are really bad at semantic versioning too which can break your builds.

# ¿ Jan 21, 2014 05:38

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

MonkeyMaker posted:

Node is not a web server. Node is a non-browser implementation of the Javascript programming language. It *can* run a web server, but it can also just be used for file management or anything else you want to do on a computer.

Yeah, sorry, you're right, I used my words very inaccurately.

# ¿ Jan 21, 2014 20:14

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

Edit: double post

# ¿ Jan 21, 2014 20:15

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

Pollyanna posted:

Okay, I'm a bit lost on the whole Nodejs thing. What usually happens when you decide to make a new webapp? Is there an article that covers the typical development of a web app using not-necessarily-Node? Is Node necessary if I'm planning to use a framework like Flask?

So what people are usually using node for on the kind of web app you're thinking of, is to build the front end using tools like grunt, jade, a front end web app framework(like Angular or Ember) and so forth. It generally makes sense because in the end of the day, a front end has to run on the browser, so JavaScript has to be the end result.

The front end has to talk to an API to be useful in most cases, though, so you need a backend web server for that. That bit CAN be done using Node with Express, but you can just as easily have it talk to a Flask application, and since that is where your experience up to this point lies, you're probably better off sticking with it.

A lot of people pushing to write all JavaScript back end and front end are saying so because then you can potentially reuse code and not have to rewrite business logic twice. Its not a necessity.

# ¿ Jan 23, 2014 07:37

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

ufarn posted:

Have to use Drupal for a project, but don't have the time to read a book on it. What is non-awful resource for picking up the basics - for a simple blog-like site - in a short while?

Google doesn't show anything, and the hits are from a time where the United States hadn't had a black president.

Buckle up for a wild ride through a lovely ecosystem. I started there long ago and sometimes the only decent docs you could get were a poorly narrated screen cast. Plugins are terribly maintained aside from the mainstays as well.

I don't do Drupal anymore.

# ¿ Feb 13, 2014 04:01

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

Blinkz0rz posted:

This is my experience, except with Wordpress.

Yeah. I do a little WordPress dev for some of my contract work (I try to avoid that though), and you can basically take the lovely parts of WordPress dev and then amplify them to get the pain for Drupal dev.

You have to take on too many dependencies to get good results for even slightly complicated requirements, and you can't rely on those dependencies to be maintained so if you have to come back to the project it feels like a house of cards.

# ¿ Feb 13, 2014 07:04

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

Furthermore, you cannot reliably detect whether a browser is capable of hover or 0not. Touch devices simulate mouse events, and some desktop browsers support touch so just touch detection doesn't work either.

CSS4 media queries draft promise pointer & hover media queries which can detect whether or not a browser can do it, but that's a long way off.

The key thing about hover is how iOS behaves on touch. If the hover class results in something being unhidden (display or visibility I think), iOS will instead of trigger a click, trigger a mousemove in the region instead. Second tap would then trigger a click.

This was done this way to make it compatible with the majority of the hover dependant web, but can be really nasty behaviour to code for, especially as Android chrome does not work the same way.

Either way, make sure you have test devices or browserstack or something to really figure out how it will work cross device.

# ¿ Feb 27, 2014 03:47

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

kedo posted:

Does anyone have recent experience using self-hosted fonts from myfonts.com?

I'm currently working on a project where load time is crucial, and Typekit occasionally slows things down to a crawl when their server (licensing server, I believe) is overloaded. I'm thinking that switching over to MyFonts, which allows self-hosting, is going to be our solution but I'm curious if there will be similar hangups. They license by and track page views so there must be some sort of tracking code. They don't go into detail about this on their site, of course.

The key is whether the font delivery is tied to that tracking. Typekit fronts with JavaScript that blocks the pageload, all to avoid the flash of unstyled text. Can't stand it personally, but it's the cheapest way to get webfonts. If you are self hosting then I imagine the license is simply you get the font files and deliver them yourself. In that case, you own the show.

If they are adding a tracking code, you should just be able to put that in the footer to stop it blocking.

Oh, also, typekit has an asynch embed that I haven't had a chance to work with yet http://blog.typekit.com/2012/07/19/new-improved-embed-code/ maybe that would do the trick?

Maluco Marinero fucked around with this message at 08:54 on Mar 11, 2014

# ¿ Mar 11, 2014 08:48

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

Anyone have experience with optimising layer compositing in Chrome for Android? I've moved a lot of an app I'm working on over to using translate3d to prevent layout paints where they aren't wanted, and performance is excellent on iOS, desktop chrome and Firefox. On Chrome for Android however, I'm hitting a composite layer calls lasting a full second. Firefox on Android has no such problem.

Anyone got suggestions on how to get Chrome behaving well with 3dTranslate.

# ¿ Mar 18, 2014 06:38

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

EAT THE EGGS RICOLA posted:

Generally unenforceable depending on a bunch of stuff, talk to a lawyer, this is important.

Yeah, if its trying to tell you not to work on your time in contexts completely unrelated to their own IP, they're asking for a lot more than an employee.

A Professionals union membership might be worth thinking about, as they will generally have contract lawyers on demand, which can turn out to be a shade cheaper if you need/want to do it with any regularity.

# ¿ Apr 1, 2014 21:57

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

IANAL but do get one thing straight. You are not, and never will be the bad guy for arguing your side of a contract. You are a worker who deserves a fair contract, and it sound alike the employer is biting off more than they are entitled.

# ¿ Apr 2, 2014 07:20

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 04:44

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

You're harping on about a tutorial where you are clearly not the target audience. Go look at the automatic admin source, or the Django Rest Framework, or something and stop whinging about the tutorial not dropping first timers into a world of complexity straight off the bat.

For many people Django will be their entry point into doing any web dev at all, it was for me too, so I'm glad for that.

# ¿ Apr 5, 2014 03:33

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

«‹›7 »