The Web Design & Development Megathread

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

«‹›361 »

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

Sails is not what I'd consider finished software, especially in the database department. When I did a thing with it there was a lot of fundamental disparities between documentation and behaviour. I'd file a ticket.

# ? Dec 31, 2014 07:01

Adbot: ADBOT LOVES YOU

# ? May 13, 2024 23:36

Chris!: Dec 2, 2004; E

jQuery question!

I have some fading background images as the background of a hero section. It works fine, but when I change tabs and look at something else for a while, then come back to the page, it freaks out and does a bunch of fades at once until it catches up. The fades are nesting in the browser memory.

Here's the jquery:

$('img.bgfade').hide();
function anim() {
$(".index-hero-images img.bgfade").first().appendTo('.index-hero-images').fadeOut(1500);
$(".index-hero-images img").first().fadeIn(300); // the first image has a fast subtle fadein
setTimeout(anim, 5000);
}
anim();

How would I prevent this build up of events from occurring?

# ? Dec 31, 2014 11:33

5pitf1re: Oct 4, 2014; space ninja in space

Basically you listen for focus and blur events and enable or disable the timeout based on those events. I can show you some example code later on if you need more explanation.

# ? Dec 31, 2014 12:13

Chris!: Dec 2, 2004; E

5pitf1re posted:

Basically you listen for focus and blur events and enable or disable the timeout based on those events. I can show you some example code later on if you need more explanation.

Hey, thanks for your reply. Have been reading up on the visibility API, I'm pretty new to using jQuery so sorry if I'm making obvious mistakes.

The MDN has an example, which I'm trying to use to get this to work, but I'm not there yet. This is what I have so far, if you could let me know where I'm going wrong that would be great:

code:

	
$('img.bgfade').hide();
		
		function anim() {
		$(".index-hero-images img.bgfade").first().appendTo('.index-hero-images').fadeOut(1500);
		$(".index-hero-images img").first().fadeIn(300); // the first image has a subtle fadein
		var fading = setTimeout(anim, 2000);
		}
	anim();


  var hidden, visibilityState, visibilityChange;

  if (typeof document.hidden !== "undefined") {
    hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState";
  } else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden", visibilityChange = "mozvisibilitychange", visibilityState = "mozVisibilityState";
  } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState";
  } else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden", visibilityChange = "webkitvisibilitychange", visibilityState = "webkitVisibilityState";
  } // if

  var document_hidden = document[hidden];

  document.addEventListener(visibilityChange, function() {
    if(document_hidden != document[hidden]) {
      if(document[hidden]) {
		      	
			  clearTimeout(fading);

} else {				      	
		$('img.bgfade').hide();
		function anim() {
		$(".index-hero-images img.bgfade").first().appendTo('.index-hero-images').fadeOut(1500);
		$(".index-hero-images img").first().fadeIn(300); // the first image has a subtle fadein
		var fading = setTimeout(anim, 2000);
		}
		anim();


  } // if

      document_hidden = document[hidden];
    } // if
  });

I've not gotten any further with this - can any jquery geniuses point me in the right direction as to what I'm doing wrong? Thank you!

Chris! fucked around with this message at 11:52 on Jan 8, 2015

# ? Dec 31, 2014 16:05

fuf: Sep 12, 2004; haha

Can someone explain how the moving stars background on this site works? Is that a video file or some clever animation or what? I can't work it out.
http://webdingo.net/zoo-min/

# ? Jan 3, 2015 17:05

down with slavery: Dec 23, 2013; STOP QUOTING MY POSTS SO PEOPLE THAT AREN'T IDIOTS DON'T HAVE TO READ MY FUCKING TERRIBLE OPINIONS THANKS

fuf posted:

Can someone explain how the moving stars background on this site works? Is that a video file or some clever animation or what? I can't work it out.
http://webdingo.net/zoo-min/

html5 video http://webdingo.net/zoo-min/wp-content/uploads/2014/01/Lapse2-7.mp4

# ? Jan 3, 2015 17:11

fuf: Sep 12, 2004; haha

Oh, cool, thanks

# ? Jan 3, 2015 17:21

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

fuf posted:

Can someone explain how the moving stars background on this site works? Is that a video file or some clever animation or what? I can't work it out.
http://webdingo.net/zoo-min/

Unrelated, but that site scrolls like poo poo for me in Chrome 40.0.2214.45 beta-m (64-bit) on Windows.

# ? Jan 3, 2015 18:56

nintendo65: Oct 16, 2008; Two universes separated by a membrane! It causes gravity! I have a uni degree in SCIENCE!!1!

Can anyone recommend a good php based free storefront that is customizable and trustworthy? I hate magento, I've tried zen cart but its pretty cheesy, and I'm not 100% sure I can trust open cart... I'd appreciate any suggestions before I go crazy and make my own. Only caveat is that it has to support paypal.

# ? Jan 3, 2015 19:20

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

nintendo65 posted:

Can anyone recommend a good php based free storefront that is customizable and trustworthy? I hate magento, I've tried zen cart but its pretty cheesy, and I'm not 100% sure I can trust open cart... I'd appreciate any suggestions before I go crazy and make my own. Only caveat is that it has to support paypal.

Every single one either already has a plugin for paypal gateways or you can buy them from some hobbyist coder for a small fee. Don't know which one is 'the best', though.

# ? Jan 3, 2015 19:43

vOv: Feb 8, 2014

Thermopyle posted:

Unrelated, but that site scrolls like poo poo for me in Chrome 40.0.2214.45 beta-m (64-bit) on Windows.

Doesn't scroll for me at all in Chrome 39.0.2171.95 on OS X. Great job!

# ? Jan 3, 2015 21:41

Mister Chief: Jun 6, 2011

I'm trying to do some CSS3 animations where I'm flipping elements over. They should either be visible or flipped and hidden. I've got it working fine with some elements but with others as soon as they finish flipping over they reappear.

Here's a jsfiddle that demonstrates both the working and non-working elements: http://jsfiddle.net/u6gkqyh8/6/

The only thing I can think of is that the first example is in a header. :shrug:

# ? Jan 5, 2015 12:21

Shy: Mar 20, 2010

Mister Chief posted:

The only thing I can think of is that the first example is in a header.

It's also inlined

# ? Jan 5, 2015 12:35

Mister Chief: Jun 6, 2011

Yeah, I didn't know you couldn't use transforms on elements that display inline. Changing to inline-block fixes it.

# ? Jan 5, 2015 13:07

socialsecurity: Aug 30, 2003

I work for a msp we are looking to implement a Web based easy to use documentation system. We have used docuwiki in the past but wanted something a little more robust I was looking a the phoca extension for Joomla but was wondering if anyone had a better suggestion.

# ? Jan 5, 2015 16:54

yoyomama: Dec 28, 2008

I have a question, since I haven't found a lot of info from googling: does anyone have experience using Assembly? https://assembly.com

I was thinking it'd be a nice way to get a chance to work on some projects with a group, but I wanted to know a bit more about what it's like before I try it.

# ? Jan 5, 2015 17:10

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

socialsecurity posted:

I work for a msp we are looking to implement a Web based easy to use documentation system. We have used docuwiki in the past but wanted something a little more robust I was looking a the phoca extension for Joomla but was wondering if anyone had a better suggestion.

Maybe check out Confluence? https://www.atlassian.com/software/confluence

# ? Jan 5, 2015 20:24

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

nintendo65 posted:

Can anyone recommend a good php based free storefront that is customizable and trustworthy? I hate magento, I've tried zen cart but its pretty cheesy, and I'm not 100% sure I can trust open cart... I'd appreciate any suggestions before I go crazy and make my own. Only caveat is that it has to support paypal.

If you're desperate you can try OSCommerce; note that I'm not recommending it, but I do know that it 'works' based on a client consults in the past. Shopify and Wordpress/Woocommerce are nice if you aren't dealing with millions of products and/or deep categorization.

# ? Jan 5, 2015 20:40

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

Lumpy posted:

Maybe check out Confluence? https://www.atlassian.com/software/confluence

Another vote for confluence. It's got a few issues here and there but overall it's very powerful and I'm quite happy with it

# ? Jan 5, 2015 20:57

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

nintendo65 posted:

Can anyone recommend a good php based free storefront that is customizable and trustworthy? I hate magento, I've tried zen cart but its pretty cheesy, and I'm not 100% sure I can trust open cart... I'd appreciate any suggestions before I go crazy and make my own. Only caveat is that it has to support paypal.

Scaramouche posted:

If you're desperate you can try OSCommerce; note that I'm not recommending it, but I do know that it 'works' based on a client consults in the past. Shopify and Wordpress/Woocommerce are nice if you aren't dealing with millions of products and/or deep categorization.

I talked to the guy that works on developing gateway plugins here, and he said if he had to choose it would be also be woocommerce. Prestashop was also mentioned.

# ? Jan 5, 2015 22:03

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

So, what do I need for a web app with paid accounts?

I mean, the technical side is no problem, but I have no clues about credit card processing. Surely there's services that handle that, that I can communicate with via an API or some such poo poo, I just don't know what to look for to find something good.

It's a django backend served off of heroku right now if for some extremely stupid reason that matters.

# ? Jan 5, 2015 23:55

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

Pretty sure ~~Swipe~~Stripe is the way to go for that.

# ? Jan 6, 2015 00:07

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

Thermopyle posted:

So, what do I need for a web app with paid accounts?

I mean, the technical side is no problem, but I have no clues about credit card processing. Surely there's services that handle that, that I can communicate with via an API or some such poo poo, I just don't know what to look for to find something good.

It's a django backend served off of heroku right now if for some extremely stupid reason that matters.

It depends almost entirely on who your payment processor ends up being. Paypal has a different implementation than Chase Manhattan than Litle&Co etc etc. They're all going to consist of basically the same thing:
- A gateway address with associated credentials (usually username/pass but can include one time token, GUID, etc.)
- Submit payment info to said gateway, via PUT/cURL/XML/etc.
- Response back that you have to interpret as either 'good', 'guy's a deadbeat' or 'didn't work don't know why'

Django has a bunch of plugins but I've never even touched it so I can't vouch for any of them:
https://www.djangopackages.com/grids/g/payment-processing/

# ? Jan 6, 2015 00:30

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

Wow, Stripe is sweet stuff.

I mean, I've got a whole hour (I'm an expert!) of Googlin' under my belt and it certainly seems like there's close to zero reasons to use other payment processors unless you can work out the convoluted math to figure out fees and they're significantly lower for some other processor.

# ? Jan 6, 2015 00:53

MasterSlowPoke: Oct 9, 2005; Our courage will pull us through

I'm writing a little single page rails app to teach myself ajax, and I have a question. My app returns data as json objects. I'm supposed to plug this data into a template, but I don't want a placeholder template to show on the screen. Where is the conventional place to store the template's markup? Should it be in a data attribute, or a hidden element of the page? Or somewhere more obvious that I'm not seeing?

# ? Jan 6, 2015 00:55

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

Thermopyle posted:

Wow, Stripe is sweet stuff.

I mean, I've got a whole hour (I'm an expert!) of Googlin' under my belt and it certainly seems like there's close to zero reasons to use other payment processors unless you can work out the convoluted math to figure out fees and they're significantly lower for some other processor.

Heaps of other guys have comparable APIs these days, pin.net.au in Australia, BrainTree, the list will only grow.

Personally I'd always try to keep the payment method pluggable, in terms of how you store tokens on your end. That way if for any reason you need to add a payment provider or drop one, its not a big deal because you've already done the leg work to some degree, at least for the database side of things.

# ? Jan 6, 2015 01:00

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

Thermopyle posted:

Wow, Stripe is sweet stuff.

I mean, I've got a whole hour (I'm an expert!) of Googlin' under my belt and it certainly seems like there's close to zero reasons to use other payment processors unless you can work out the convoluted math to figure out fees and they're significantly lower for some other processor.

At the entry level basically all of those guys are going to be about the same price unless you can tie your merchant processing to a high volume account of some kind (e.g. brick and mortar going online and using the same account); for large volume I'd suggest holding out for one of the bigs like Chase, Litle&Co, NCR, Monex, etc. If you're doing less than $100,000/mo Stripe/PayPal/Braintree are going to be as good as you're going to get. We're stuck with PayPal because of years of history/volume but if given a choice to start over (which we might this quarter actually) I'd switch to Stripe in a hot minute, and that's probably how long it'd take to code too.

If you go with stripe they have a JS library that handles encryption/submission/etc all on-page and in-session, meaning that you don't have to store any PCI-sensitive data which is kind of handy.

# ? Jan 6, 2015 01:07

nintendo65: Oct 16, 2008; Two universes separated by a membrane! It causes gravity! I have a uni degree in SCIENCE!!1!

KARMA! posted:

I talked to the guy that works on developing gateway plugins here, and he said if he had to choose it would be also be woocommerce. Prestashop was also mentioned.

Thanks, went with Prestashop and it is in another league entirely than its competition.

# ? Jan 6, 2015 01:18

Ksi: May 1, 2007; "Hasta la victoria siempre"

Hi guys, i'm a graphic designer that has been focused on photography for most of his career.
I got a job doing web design for the past 5 months and i've been learning to code on html/css and using bootstrap for some basic websites.
I want to get better at coding and i've been looking for some online resources, recently i found out about this course.

https://www.udemy.com/complete-web-developer-course/?couponCode=KICKOFF2015

It's 10 bucks right now but i'm not sure if it is worth it (yeah i mean they're 10 bucks but still). Anyone has taken that course by anychance?

# ? Jan 6, 2015 02:58

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

MasterSlowPoke posted:

I'm writing a little single page rails app to teach myself ajax, and I have a question. My app returns data as json objects. I'm supposed to plug this data into a template, but I don't want a placeholder template to show on the screen. Where is the conventional place to store the template's markup? Should it be in a data attribute, or a hidden element of the page? Or somewhere more obvious that I'm not seeing?

Depends. If you're using a library like Knockout, they have a nifty thing where you can put templates in script nodes and bind to them and it looks like the (probably) more popular Handlebars does the same thing. So probably use one of those and do it that way.

# ? Jan 6, 2015 16:53

aBagorn: Aug 26, 2004

Cross posting from the front end dev thread, because it probably belongs here instead.

I'm using bootstrap to layout a site, and I came across this tutorial to implement an off canvas menu.

http://blog.themearmada.com/off-can...-for-bootstrap/

Seemed simple enough, and I have it working in its basic form. However my client has indicated that he would rather (on desktop) the menu slideout shrink the main content div as opposed to overlaying it (though on tablet and mobile displays it should behave as normal) and now I'm kind of lost.

e: \/ thanks, that's a great starting point!

2nd e: Those are still "pushing" the canvas as opposed to "shrinking" the canvas, but I still think I can tweak the concept

aBagorn fucked around with this message at 17:29 on Jan 6, 2015

# ? Jan 6, 2015 17:15

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

aBagorn posted:

Cross posting from the front end dev thread, because it probably belongs here instead.

I'm using bootstrap to layout a site, and I came across this tutorial to implement an off canvas menu.

http://blog.themearmada.com/off-can...-for-bootstrap/

Seemed simple enough, and I have it working in its basic form. However my client has indicated that he would rather (on desktop) the menu slideout shrink the main content div as opposed to overlaying it (though on tablet and mobile displays it should behave as normal) and now I'm kind of lost.

Look at all these nifty things and figure out how they did them: http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/

# ? Jan 6, 2015 17:17

kedo: Nov 27, 2007

Ksi posted:

Hi guys, i'm a graphic designer that has been focused on photography for most of his career.
I got a job doing web design for the past 5 months and i've been learning to code on html/css and using bootstrap for some basic websites.
I want to get better at coding and i've been looking for some online resources, recently i found out about this course.

https://www.udemy.com/complete-web-developer-course/?couponCode=KICKOFF2015

It's 10 bucks right now but i'm not sure if it is worth it (yeah i mean they're 10 bucks but still). Anyone has taken that course by anychance?

As long as the lessons themselves aren't crap, it looks like that course covers the basics. You might also want to check the education section in the OP for some other options. Treehouse is usually the favorite.

# ? Jan 6, 2015 19:28

BlackMK4: Aug 23, 2006; wat.; Megamarm

What is the best way to go about making my site more search engine friendly? I think using POST/GET make most of the pages inaccessible, but I'm not too sure, as it's the first time I've really put something up that was more than basic HTML.
http://desmoduck.com/index.php

Should I be looking in to mod rewrite or should I redo the front end of the site to not use POST/GET (I have no idea how I'd go about this right now)?

I know I need to make a mobile friendly version. It's on 'the list.'

Thanks guys

BlackMK4 fucked around with this message at 05:09 on Jan 7, 2015

# ? Jan 7, 2015 05:03

Spraynard Kruger: May 8, 2007

Google's Webmaster Tools would probably be a good place to start.

# ? Jan 7, 2015 05:55

BlackMK4: Aug 23, 2006; wat.; Megamarm

I've submitted it for indexing, but nothing as of yet. I've also got analytics going but it only shows realtime updates, and not history, which kinda makes sense since I just added it about twenty four hours ago.

# ? Jan 7, 2015 06:01

Chris!: Dec 2, 2004; E

Chris! posted:

code:

	
$('img.bgfade').hide();
		
		function anim() {
		$(".index-hero-images img.bgfade").first().appendTo('.index-hero-images').fadeOut(1500);
		$(".index-hero-images img").first().fadeIn(300); // the first image has a subtle fadein
		var fading = setTimeout(anim, 2000);
		}
	anim();


  var hidden, visibilityState, visibilityChange;

  if (typeof document.hidden !== "undefined") {
    hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState";
  } else if (typeof document.mozHidden !== "undefined") {
    hidden = "mozHidden", visibilityChange = "mozvisibilitychange", visibilityState = "mozVisibilityState";
  } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState";
  } else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden", visibilityChange = "webkitvisibilitychange", visibilityState = "webkitVisibilityState";
  } // if

  var document_hidden = document[hidden];

  document.addEventListener(visibilityChange, function() {
    if(document_hidden != document[hidden]) {
      if(document[hidden]) {
		      	
			  clearTimeout(fading);

} else {				      	
		$('img.bgfade').hide();
		function anim() {
		$(".index-hero-images img.bgfade").first().appendTo('.index-hero-images').fadeOut(1500);
		$(".index-hero-images img").first().fadeIn(300); // the first image has a subtle fadein
		var fading = setTimeout(anim, 2000);
		}
		anim();


  } // if

      document_hidden = document[hidden];
    } // if
  });

I've not gotten any further with this - can any jquery geniuses point me in the right direction as to what I'm doing wrong? Thank you!

# ? Jan 8, 2015 11:53

Withnail: Feb 11, 2004

Sorry this isn't a technical question, but when did the de facto web re-design turn into massive images that you have to scroll through to get to any actual content? Am I having a senior moment?

# ? Jan 8, 2015 15:15

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

Withnail posted:

Sorry this isn't a technical question, but when did the de facto web re-design turn into massive images that you have to scroll through to get to any actual content? Am I having a senior moment?

It works for the right type of site that is more about advertising something in a memorable way than a site that's about serving you content.

I agree it's overused for the latter type. Web design goes through these stages where a trend comes along and then everyone tries to shoehorn it into everything.

# ? Jan 8, 2015 15:22

Adbot: ADBOT LOVES YOU

# ? May 13, 2024 23:36

yoyomama: Dec 28, 2008

Withnail posted:

Sorry this isn't a technical question, but when did the de facto web re-design turn into massive images that you have to scroll through to get to any actual content? Am I having a senior moment?

I thought I was the only one that hated this poo poo. It makes sense for advertising something visual, but if I click on a link for an article, I want to see words. I don't want to see some image take up my entire screen and then have all this stuttering and slowdown as I scroll past it with all of the added text animations they just had to include.

# ? Jan 8, 2015 17:16

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

«‹›361 »