The Web Design & Development Megathread

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

«‹›361 »

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

Anony Mouse posted:

I think iOS prevents playing of audio/video elements unless they're triggered by user input so could be that. Try checking if the audio is even playing and/or manually play it from the console. Debugging on iOS is actually pretty easy, just connect your device via USB, open Safari on your Mac, and look under the "Develop" menu.

My audio effects are already triggered by touch so I'm not sure what's going on there. Also lol - you think I have a mac to debug an iPad with. Clients and project managers aren't aware that web developer != iOS developer nor that there are other kinds of tablets.

# ? Jan 28, 2016 13:35

Adbot: ADBOT LOVES YOU

# ? May 10, 2024 19:48

kedo: Nov 27, 2007

Funking Giblet posted:

Garbage. There is a tinypng gulp plugin.

ImageOptim is pretty baller as well.

# ? Jan 28, 2016 16:33

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

What's the quickest and cheapest way to get a temporary WordPress installation up and running? A designer in our company wants to play around with a WP template but it turns out Wordpress.com's hosting doesn't give you full access to the template's CSS files. I'm looking into getting WP running on Heroku but it sounds less than optimal.

# ? Jan 28, 2016 16:43

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

Does anyone have much experience with appcache? I know that if I keep a comment field in my manifest file I can change that to trigger the browser to re-download the cached files but in Chrome, even though I see it downloading files in the console and refresh the page after, I never see any changes unless I open an incognito window. This is really annoying when, say, viewing the contents of localStorage because I lose it with a new incognito window.

Why does it download the new copies of files to cache then keep using the previous cache?

# ? Jan 28, 2016 16:50

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

nexus6 posted:

Does anyone have much experience with appcache? I know that if I keep a comment field in my manifest file I can change that to trigger the browser to re-download the cached files but in Chrome, even though I see it downloading files in the console and refresh the page after, I never see any changes unless I open an incognito window. This is really annoying when, say, viewing the contents of localStorage because I lose it with a new incognito window.

Why does it download the new copies of files to cache then keep using the previous cache?

http://alistapart.com/article/application-cache-is-a-douchebag will probably answer your questions. Short answer is: appcache is a douchebag, start moving to Service Workers.

# ? Jan 28, 2016 16:58

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

Skandranon posted:

Short answer is: appcache is a douchebag, start moving to Service Workers.

Yeah, but

Don't you have to be using Google Canary or Firefox Nightly to even use Service Workers?

# ? Jan 28, 2016 17:12

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

nexus6 posted:

Yeah, but

Don't you have to be using Google Canary or Firefox Nightly to even use Service Workers?

You can either use a stable (and often dumb) spec, or an unstable but promising one. Neither are perfect.

# ? Jan 28, 2016 17:30

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

Skandranon posted:

http://alistapart.com/article/application-cache-is-a-douchebag will probably answer your questions. Short answer is: appcache is a douchebag, start moving to Service Workers.

This is still a bad answer if you want to ship something today. Another dev team I've been talking to still had to use app cache to get their work over the line because it's supported.

The answer is the files from the newly downloaded won't be available until you either swap the cache or refresh the page.

Use window.applicationCache.swapCache() to cause the swap to happen, keeping in mind that the page won't redownload files that it already fetched from the previous cache.

All this means in practice is that your resources loading for the page should be kicked off by a self contained script that will usually work whether it's the old version or the new version, so you'd have a loader.js and then an app.js + app.css that you'd load after confirming the cache up to date and/or swapped.

This is me loving around with some ideas to make it work with both Single Page Apps and Partially Server Rendered Apps (isomorphic) if you want an idea of the events you should be listening to:

https://github.com/weareoffsider/happy-cache/blob/master/src/api.js

# ? Jan 28, 2016 17:46

kedo: Nov 27, 2007

Karthe posted:

What's the quickest and cheapest way to get a temporary WordPress installation up and running? A designer in our company wants to play around with a WP template but it turns out Wordpress.com's hosting doesn't give you full access to the template's CSS files. I'm looking into getting WP running on Heroku but it sounds less than optimal.

Install WP locally. There are a slew of different ways to do this, but here's what the WP codex has to say.

# ? Jan 28, 2016 18:01

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

Maluco Marinero posted:

This is still a bad answer if you want to ship something today. Another dev team I've been talking to still had to use app cache to get their work over the line because it's supported.

Yeah, I have a project using appcache that will be used from March to July - I don't think (hope) appcache is suddenly going to be dropped in that period, and even if it is there's not a whole lot I can do about it at that point.

I agree the spec isn't perfect and my usual answer (oft ignored) is don't rely on stuff working offline. If you want that - hire an app developer.

# ? Jan 28, 2016 18:06

substitute: Aug 30, 2003; you for my mum

Karthe posted:

What's the quickest and cheapest way to get a temporary WordPress installation up and running? A designer in our company wants to play around with a WP template but it turns out Wordpress.com's hosting doesn't give you full access to the template's CSS files. I'm looking into getting WP running on Heroku but it sounds less than optimal.

For a local dev install, try downloading Ampps and then do a WordPress install from the Ampps admin panel. This is assuming they don't already have a local server setup like MAMP/WAMP/XAMP etc.

# ? Jan 28, 2016 18:32

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

kedo posted:

Install WP locally. There are a slew of different ways to do this, but here's what the WP codex has to say.

substitute posted:

For a local dev install, try downloading Ampps and then do a WordPress install from the Ampps admin panel. This is assuming they don't already have a local server setup like MAMP/WAMP/XAMP etc.

These are both correct answers, and ones I would pursue personally if I were the designer in this scenario. However the fact that our designer turned to WordPress.com to mock up templates left me with the sinking suspicion that setting up a local dev server was beyond their abilities. I guess I'll point her in this direction and hope it doesn't somehow blow up in her face :suicide:

# ? Jan 28, 2016 18:57

The Dave: Sep 9, 2003

Really cheap route would be like starting a trial account for wpengine.com.

# ? Jan 28, 2016 19:42

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

Any good services for using with a contact form on a really low volume static site? I'd be ecstatic if I got 50 people to fill out the form.

Probably just going to host it on github.

# ? Jan 28, 2016 21:30

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

You could just make one in Google docs and shove it in an iframe

# ? Jan 28, 2016 21:51

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

The Merkinman posted:

Yes, the one I solved was where the way Handlebars was compiling, it would completely freeze Chrome on iOS (but not Safari, nor Chrome on other OSs ) This new one, on a different project, looks like it might be returning a different value for jqXHR.status resulting in an error being shown the user, even when everything is ok once it is dismissed.

Looks like the major update to Chrome fixed this issue for some reason :dance:

# ? Jan 28, 2016 21:56

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Thermopyle posted:

Any good services for using with a contact form on a really low volume static site? I'd be ecstatic if I got 50 people to fill out the form.

Probably just going to host it on github.

A site called SmartAddon offers a hosted contact form, but the only way to find it is to Google for it - there's absolutely no link on their main site to it: http://www.smartaddon.com/contact_form.html

I currently use it on a site I host through Github, but I don't think it's supported anymore becuase I had to modify and host one of their Javascript files due to it missing a critical function that prevented it from actually sending any e-mails. If you're interested PM me and I can share my code with you.

# ? Jan 28, 2016 23:01

The Dave: Sep 9, 2003

MailChimp?

# ? Jan 28, 2016 23:18

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

I just read Rachel Andrew's book on CSS Grid Layout. I've been playing around with Grids for a couple days and it's absolutely incredible. Once this gets implemented it's going to be a big game changer. Anyone else gotten a chance to mess around with it?

# ? Jan 29, 2016 21:58

FateFree: Nov 14, 2003

Thermopyle posted:

Any good services for using with a contact form on a really low volume static site? I'd be ecstatic if I got 50 people to fill out the form.

Probably just going to host it on github.

I recently hosted a site with https://www.jotform.com for the same purpose, seem to work fine.

# ? Jan 30, 2016 01:11

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

caiman posted:

I just read Rachel Andrew's book on CSS Grid Layout. I've been playing around with Grids for a couple days and it's absolutely incredible. Once this gets implemented it's going to be a big game changer. Anyone else gotten a chance to mess around with it?

Yep. Between this (intended for large-scale layouts, as I understand it, like entire pages) and flexbox (intended for use inside widgets and smaller layouts), we've finally, finally got real power in web layout.

You can play around with Grid in Chrome, after enabling the Experimental Web Features flag. Looks like they have the most complete implementation out there at the moment.

NB: I'm also using FF45 Beta. The dev release notes refer to Grid being available by default (not behind a flag), but that doesn't seem to be the case. Don't suppose anyone knows what's going on?

# ? Jan 30, 2016 11:34

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

Sergeant Rock posted:

Yep. Between this (intended for large-scale layouts, as I understand it, like entire pages) and flexbox (intended for use inside widgets and smaller layouts),

Another way to think about it is that grid is for two-dimensional layouts and flexbox is for one-dimensional layouts.

# ? Jan 30, 2016 21:43

a very nice paella: Oct 12, 2012; Kapitalism

What's the nicest way to handle authorization and access tokens to an API in javascript?

Right now I authorize myself to the API with PHP and just put this in the <head>

code:

<script>
        var token = "<?=$token?>";
</script>

So I can use the token in the javascript to make calls. This way my client id and client secret are hidden. In order to get around the same-origin policy I have a PHP page that I use as a middleman to make calls to the api, I send the token and the request to this page and it gives me back the response.
Is this good? What design patterns do you use to get around the same-origin policy? I would rather not run any more PHP then necessary.

# ? Jan 31, 2016 16:51

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

Thermopyle posted:

Any good services for using with a contact form on a really low volume static site? I'd be ecstatic if I got 50 people to fill out the form.

Probably just going to host it on github.

I found something for this: http://formspree.io/

You just set the action on your form to http://formspree.io/your@email.com and on submit the form gets sent to your@email.com.

Works well and is free up to 1000 emails.

# ? Jan 31, 2016 18:46

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

Krokerik posted:

What's the nicest way to handle authorization and access tokens to an API in javascript?

Right now I authorize myself to the API with PHP and just put this in the <head>
code:
<script>
        var token = "<?=$token?>";
</script>
So I can use the token in the javascript to make calls. This way my client id and client secret are hidden. In order to get around the same-origin policy I have a PHP page that I use as a middleman to make calls to the api, I send the token and the request to this page and it gives me back the response.
Is this good? What design patterns do you use to get around the same-origin policy? I would rather not run any more PHP then necessary.

If the API can do CORS requests, then there is no middleman needed. If they can't then jsonp could be a middleman-less option as well.

# ? Jan 31, 2016 20:05

an skeleton: Apr 23, 2012; scowls @ u

Hey guys, still working on our MEAN stack app. Have a question regarding the implementation of a pricing system... We have a table form where each row is a product and you input quantities for an order. There are some complicating factors, the main one being that products an have different "methods" -- i.e. first 4 are free, prices get broken at certain quantities (buying more than 20? you get a discount. etc.). This is all fine but we want to have, obviously, a high amount of consistency between how prices are displayed on the front-end when users are inputting quantities(AngularJS if it matters) and when they're calculated on the backend (Node/Express/Mongo)... Does anyone have advice on creating a javascript package that can be shared between the frontend/backend so that we don't have to maintain two packages? Thanks!

# ? Jan 31, 2016 20:07

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

an skeleton posted:

Hey guys, still working on our MEAN stack app. Have a question regarding the implementation of a pricing system... We have a table form where each row is a product and you input quantities for an order. There are some complicating factors, the main one being that products an have different "methods" -- i.e. first 4 are free, prices get broken at certain quantities (buying more than 20? you get a discount. etc.). This is all fine but we want to have, obviously, a high amount of consistency between how prices are displayed on the front-end when users are inputting quantities(AngularJS if it matters) and when they're calculated on the backend (Node/Express/Mongo)... Does anyone have advice on creating a javascript package that can be shared between the frontend/backend so that we don't have to maintain two packages? Thanks!

If there are no node or browser specific calls in the business logic (and there shouldn't be), then congrats! You have code that works on both. Are you having a specific issue? Otherwise separate your concerns and you are in a happy place.

# ? Jan 31, 2016 20:16

a very nice paella: Oct 12, 2012; Kapitalism

Lumpy posted:

If the API can do CORS requests, then there is no middleman needed. If they can't then jsonp could be a middleman-less option as well.

No CORS available and I can't set Authorization header with JSONP. Maybe I should email them about CORS, shouldn't be difficult to set up from my understanding.

# ? Jan 31, 2016 21:22

PirateBob: Jun 14, 2003

I'm in need of a solution where I can give out one URL to people and have that address re-direct, at random, to one of 3 other URLs. Is this possible?

# ? Feb 1, 2016 15:53

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

PirateBob posted:

I'm in need of a solution where I can give out one URL to people and have that address re-direct, at random, to one of 3 other URLs. Is this possible?

Yes

# ? Feb 1, 2016 16:02

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

Munkeymon posted:

Yes

I passed up making that reply, and now you're making me regret it.

# ? Feb 1, 2016 16:09

PirateBob: Jun 14, 2003

Great. How? What do I need?

# ? Feb 1, 2016 16:12

FateFree: Nov 14, 2003

You could do it with a server in any language or you can just host a single html file with some javascript that redirects the page.

code:

window.location.replace("http://stackoverflow.com");

# ? Feb 1, 2016 16:15

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

PirateBob posted:

Great. How? What do I need?

You'd have to give us more information about the environment you're trying to do this on so we can narrow down the options from the nigh-infinite to a number that's enumerable in a post with quick and dirty code samples.

# ? Feb 1, 2016 16:44

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

PirateBob posted:

Great. How? What do I need?

This is simple. You write a program that creates a page for all possible routes (starting with /, /a, /aa, etc) and have that route to one of your random routes. Easy peasy.

# ? Feb 1, 2016 17:23

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

If you aren't using any sort of routing and just want a simple redirect, you can just store all the URLS you want to be picked at random in an array and randomly choose one to be redirected to.

code:


var url = ['http://url1.com', 'http://url2.com', 'http://url3.com']
var rand = Math.floor(Math.random() * limit);
window.location.replace(url[rand]);

Edit: Take this advice with caution, I just started learning JS, so my way might be super lovely.

# ? Feb 1, 2016 17:59

PirateBob: Jun 14, 2003

Munkeymon posted:

You'd have to give us more information about the environment you're trying to do this on so we can narrow down the options from the nigh-infinite to a number that's enumerable in a post with quick and dirty code samples.

I have
a) no server, and no knowledge about servers
b) no coding skills whatsoever
c) the target URLs for which to randomly distribute visitors to.

This is for a survey where I need randomly distributed visitors to each of 3 variations of the survey.

So I need some simple hosting, and the code.

Thanks ddiddles.

I'll try that out. What's the best place to get some cheap hosting for a couple of months?

# ? Feb 1, 2016 18:33

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

PirateBob posted:

I have
a) no server, and no knowledge about servers
b) no coding skills whatsoever
c) the target URLs for which to randomly distribute visitors to.

This is for a survey where I need randomly distributed visitors to each of 3 variations of the survey.

So I need some simple hosting, and the code.

Thanks ddiddles. I'll try that out. What's the best place to get some cheap hosting for a couple of months?

How are people getting to your survey? It might be easier to just randomly divide your groups into 3 and send them to the appropriate url.

# ? Feb 1, 2016 18:52

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

PirateBob posted:

I have
a) no server, and no knowledge about servers
b) no coding skills whatsoever
c) the target URLs for which to randomly distribute visitors to.

This is for a survey where I need randomly distributed visitors to each of 3 variations of the survey.

So I need some simple hosting, and the code.

Thanks ddiddles. I'll try that out. What's the best place to get some cheap hosting for a couple of months?

In that case, drop this code into a text editor and save it as index.html

code:

<!doctype html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <script>
      var url = ['http://url1.com', 'http://url2.com', 'http://url3.com']
      var rand = Math.floor(Math.random() * url.length);
      window.location.replace(url[rand]);
    </script>
  </head>
  
  <body></body>
  
</html>
</html>

Change the urls between the single quotes to wherever you want people to go.

Get some cheap hosting (I use apisnetworks, run by goons I think http://forums.somethingawful.com/showthread.php?threadid=577837) and drop that index.html file in the root, or any subfolder you want and point your participants to that url. You dont have to include the index.html in the url, if you put it in your hostings root folder, it'll be http://yourdomain.com/

Or if you make a subfolder, http://yourdomain.com/subfolder/

# ? Feb 1, 2016 19:37

Adbot: ADBOT LOVES YOU

# ? May 10, 2024 19:48

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

ddiddles posted:

In that case, drop this code into a text editor and save it as index.html
code:
<!doctype html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <script>
      var url = ['http://url1.com', 'http://url2.com', 'http://url3.com']
      var rand = Math.floor(Math.random() * url.length);
      window.location.replace(url[rand]);
    </script>
  </head>
  
  <body></body>
  
</html>
</html>
Change the urls between the single quotes to wherever you want people to go.

Get some cheap hosting (I use apisnetworks, run by goons I think http://forums.somethingawful.com/showthread.php?threadid=577837) and drop that index.html file in the root, or any subfolder you want and point your participants to that url. You dont have to include the index.html in the url, if you put it in your hostings root folder, it'll be http://yourdomain.com/

Or if you make a subfolder, http://yourdomain.com/subfolder/

You can probably get away with no hosting at all, if you can get users to open the html file from a network drive or email

# ? Feb 1, 2016 19:58

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

«‹›361 »