The Web Design & Development Megathread

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

«‹›361 »

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Goon posted:

React definitely seems like an attractive option. The website lists it as being at v0.10.0. Am I reading this wrong, or is it still short of a production ready release?

React is in production on Facebook and Instagram, and I think now Reddit as well. It's just conservatively numbered because that's how the team rolls. Edit: also, I think, because it's still possible there could be incompatible API changes, though I think that's relatively unlikely at this stage.

# ? Jun 16, 2014 18:53

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 18:24

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

fuf posted:

What I really want to know is if Node is actually significantly slower, less reliable, or less secure or something, because that would be a good reason to change.

I have little experience with Node, but I do not know of any problems with it in those areas.

fuf posted:

You mean like managing a server? I've been doing that for a while with just bash.
What else might I need?

(not trying to be defensive or anything, these are genuine questions! )

I don't know what I really meant by that!

I guess what I really was doing was using the "only-knows-one-language-and-it-is-js" fact as a proxy for "has thoroughly evaluated the available options".

# ? Jun 16, 2014 18:57

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Subjunctive posted:

React is in production on Facebook and Instagram, and I think now Reddit as well. It's just conservatively numbered because that's how the team rolls. Edit: also, I think, because it's still possible there could be incompatible API changes, though I think that's relatively unlikely at this stage.

Basically the opposite of the Facebook.app team.

"Version 12.0
What's new in this version:

* Minor bug fixes."

# ? Jun 16, 2014 23:49

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

pokeyman posted:

Basically the opposite of the Facebook.app team.

"Version 12.0
What's new in this version:

* Minor bug fixes."

Yeah. I got sick of arguing about whether something was a major or minor release based on what made the cut and stuck, so I decreed that it would be integers and they would increase monotonically until the end of days. I stand by it. :colbert:

# ? Jun 17, 2014 00:16

Lord Windy: Mar 26, 2010

I'm really new to all this (not programming in general though) and was wondering, what do these frameworks offer?

I was looking up Django, Node and others on Wikipedia but I couldn't quite work out what they did. So I installed the latest version of OpenBSD that comes with Nginx installed by default, put on MySQL and the latest version of PHP 5.4. Is that all a framework is basically, just using different languages?

# ? Jun 17, 2014 07:10

Anarkii: Dec 30, 2008

If you have reservations about React not being mature enough, Backbone + Marionette + Handlebars + Bootstrap is perfectly suitable for creating "modern" UIs.

If you're looking at Angular, you should wait till 2.0 because a lot of stuff is changing in that.

# ? Jun 17, 2014 07:14

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

Lord Windy posted:

I'm really new to all this (not programming in general though) and was wondering, what do these frameworks offer?

I was looking up Django, Node and others on Wikipedia but I couldn't quite work out what they did. So I installed the latest version of OpenBSD that comes with Nginx installed by default, put on MySQL and the latest version of PHP 5.4. Is that all a framework is basically, just using different languages?

So, you've got a programming language, a database, and a Web server.

You're now about 1 million steps away from actually working on your app because you've got to write code to map your data onto the database, manage Web browser sessions, create user registration systems, cache views, develop a system to get data from database to HTML, a thousand other things, and a hundred sub parts of each.

Or you could use a framework.

# ? Jun 17, 2014 07:55

Lord Windy: Mar 26, 2010

Thermopyle posted:

So, you've got a programming language, a database, and a Web server.

You're now about 1 million steps away from actually working on your app because you've got to write code to map your data onto the database, manage Web browser sessions, create user registration systems, cache views, develop a system to get data from database to HTML, a thousand other things, and a hundred sub parts of each.

Or you could use a framework.

So a web framework is basically a collection of code that handles a significant amount of the mundane backend (in particular, backend that looks easy to break) for a developer? Similar to how a game framework like LibGDX takes over for things like drawing sprites to the screen, pushing audio through speakers and other backend stuff like that?

I can see how that would make them very useful in that case. I just had trouble working out what they did as I knew next to nothing about what they did.

# ? Jun 17, 2014 08:11

Chris!: Dec 2, 2004; E

The next version of Zurb Foundation (a front end framework I much prefer to Bootstrap) sounds like it will be pretty great. There will be two versions, one for websites and one specifically for web apps.

# ? Jun 17, 2014 08:37

Skiant: Mar 10, 2013

Lord Windy posted:

So a web framework is basically a collection of code that handles a significant amount of the mundane backend (in particular, backend that looks easy to break) for a developer? Similar to how a game framework like LibGDX takes over for things like drawing sprites to the screen, pushing audio through speakers and other backend stuff like that?

I can see how that would make them very useful in that case. I just had trouble working out what they did as I knew next to nothing about what they did.

Yes, except you have frameworks for pretty much anything and everything (ie: Bootstrap, Angular, etc.).

# ? Jun 17, 2014 09:07

The Dave: Sep 9, 2003

Yeah in a nut shell frameworks, front end or back end, provide shortcuts to get what you want instead of recreating the wheel.

Or for front end, as I say, it's so engineers can actually make good looking websites

# ? Jun 17, 2014 12:26

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

The Dave posted:

Or for front end, as I say, it's so engineers can actually make ~~good looking websites~~ sites that all look the same.

Slight update.

# ? Jun 17, 2014 13:09

The Dave: Sep 9, 2003

Yeah that's fair. The default bootstrap blue button haunts my dreams.

# ? Jun 17, 2014 13:21

Robot Arms: Sep 19, 2008; R!

v1nce posted:

Then, once you've done one of those, you'll probably end up in one of 3 camps:
1. Writing bespoke code because "frameworks are hard", and churning out god awful garbage

This is totally me. I built the theme for Lawyerist.com from scratch because hacking my way through the WordPress Codex was hard enough, and Bootstrap seemed ridiculously over-complicated.

I feel like I've built a pretty good theme, but I'm also sure I'm missing little things I never even thought of that could help refine the design and speed up the site. Plus, I've got a few ideas for web apps I'd like to try building. I've started a few Codecademy courses, but it sounds like I'm not going to learn frameworks from there. Should I just be looking for intermediate classes at a community college?

# ? Jun 17, 2014 14:56

Chris!: Dec 2, 2004; E

samglover posted:

This is totally me. I built the theme for Lawyerist.com from scratch because hacking my way through the WordPress Codex was hard enough, and Bootstrap seemed ridiculously over-complicated.

I feel like I've built a pretty good theme, but I'm also sure I'm missing little things I never even thought of that could help refine the design and speed up the site. Plus, I've got a few ideas for web apps I'd like to try building. I've started a few Codecademy courses, but it sounds like I'm not going to learn frameworks from there. Should I just be looking for intermediate classes at a community college?

samglover posted:

This is totally me. I built the theme for Lawyerist.com from scratch because hacking my way through the WordPress Codex was hard enough, and Bootstrap seemed ridiculously over-complicated.

I feel like I've built a pretty good theme, but I'm also sure I'm missing little things I never even thought of that could help refine the design and speed up the site. Plus, I've got a few ideas for web apps I'd like to try building. I've started a few Codecademy courses, but it sounds like I'm not going to learn frameworks from there. Should I just be looking for intermediate classes at a community college?

Front end frameworks really aren't too complicated to learn - especially if you already have a decent understanding of HTML and CSS, you should only need to spend a few hours before you're up and running. Tons of people use Bootstrap and there are many resources and videos out there for that, I prefer Zurb Foundation and there are tons of resources and an active forum for that as well.

Whichever you choose, it's as easy as downloading the sample zip file and reading through a tutorial to get to grips with the grid system... But it shouldn't take long until you're away, for prototyping especially it saves so much time and energy.

# ? Jun 17, 2014 15:06

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Anarkii posted:

If you have reservations about React not being mature enough, Backbone + Marionette + Handlebars + Bootstrap is perfectly suitable for creating "modern" UIs.

One of the nice things about React is that it's so easy to get going that you can pretty quickly tell if it's going to work for you. (I also think that its state-containment model makes it pretty friendly for beginners, because IME complexity grows more slowly.)

Scrolling question: are there any events that fire reliably during inertial scroll on iOS (for lazy loading of images in my case)? I haven't found any yet, but thought I'd see if anyone had a magic trick before I resorted to bridging from native or iScroll.

# ? Jun 17, 2014 16:05

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

Subjunctive posted:

Scrolling question: are there any events that fire reliably during inertial scroll on iOS (for lazy loading of images in my case)? I haven't found any yet, but thought I'd see if anyone had a magic trick before I resorted to bridging from native or iScroll.

Nope, not that I've been able to find.

# ? Jun 17, 2014 16:09

fuf: Sep 12, 2004; haha

Chris! posted:

I prefer Zurb Foundation

Finally checked this out today thanks to your posts and you're not wrong, it's a lot nicer than bootstrap. The SASS files are a lot easier to read through. gently caress a bootstrap.

# ? Jun 17, 2014 18:00

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

Question that I hope you guys can help me with: I'll do my best to describe the situation. My home page uses JavaScript to display one of three content sections, depending on which menu item is currently selected. When a user clicks a link within the content section they're taken to another page. When they return to the home page, I want the same content section to be displayed that was there when they left. document.referrer works pretty well if the user clicks my "Home" button on the site to return to the home page, but I want it to work when they click the browser's back button as well.

So I came up with a solution using hash tags; when the user first clicks the link from the home page, I quickly change the home page URL to include a specialized hash (i.e. "homepage.php#categoryA"), then take the user to the page. This way when the user hits the back button, they're returned to "homepage.php#categoryA" and I can use the hash to display whichever content section I want. Ok, awesome.

But there's a glitch. When the user clicks the link from the home page, the hash change creates a very quick but noticeable page jump. This bugs me. So I've been looking into other options. I'm essentially needing a way for a variable to persist from the home page to the inner page and back to the home page. I could use a PHP session variable, but how do I pass it to JavaScript? Same question for GET variables. Maybe a cookie is a better option? Query string? I basically need you guys to tell me which option is best suited for my situation before I waste too much time attempting to implement it.

EDIT: And before anyone says it, yes I know displaying page content via JavaScript is usually a bad idea. This is a personal project that I'm doing for learning and experimentation purposes.

Spatulater bro! fucked around with this message at 18:51 on Jun 17, 2014

# ? Jun 17, 2014 18:47

Heskie: Aug 10, 2002

The simplest solution I can think of would just be declaring the PHP variable inline as a javascript variable.

For example:

code:

<script>
  var category = <?php echo $category; ?>;
</script>

Its perhaps not the most elegant, but its easiest way I can think of to shift variables between PHP and JS.

# ? Jun 17, 2014 19:00

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

Heskie posted:

The simplest solution I can think of would just be declaring the PHP variable inline as a javascript variable.

For example:
code:
<script>
  var category = <?php echo $category; ?>;
</script>
Its perhaps not the most elegant, but its easiest way I can think of to shift variables between PHP and JS.

Hmm, would you suggest using this along with a session variable? So basically I would set the session variable when the user first clicks the link:

code:

$_SESSION['category']='categoryA';

and then on return to the home page I'd do something like:

code:

var category = <?php $_SESSION['category']; ?>;

# ? Jun 17, 2014 19:13

kedo: Nov 27, 2007

Can you not just event.preventDefault() when you set the URL hash to prevent the page jumping? Sounds like you might be over thinking it.

caiman posted:

EDIT: And before anyone says it, yes I know displaying page content via JavaScript is usually a bad idea. This is a personal project that I'm doing for learning and experimentation purposes.

This stopped being a problem long, long ago. Pretty much every big site in the world presents content with JS these days. It's still good to have a fallback of course. Also I'd recommend reading this if you care about your hashed URLs getting indexed.

# ? Jun 17, 2014 19:55

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

kedo posted:

Can you not just event.preventDefault() when you set the URL hash to prevent the page jumping? Sounds like you might be over thinking it.

I actually am using preventDefault() (in order to sneak the hash in there before leaving the page). I'll check my code when I get home tonight to see if there's some other reason the page might be jumping.

# ? Jun 17, 2014 20:00

ProSlayer: Aug 11, 2008; Hi friend

I'm having this ASP.NET cookie issue which is driving me nuts. It only affects Internet Explorer, and happens intermittently.

When a user logs in, we use ASP.NET Profile provider to authenticate via SQL. After we verify his credentials, we store the user's name/address in the Profile provider properties. The issue we are having is that sometimes in IE the Profile information does not pass from the login page after authenticating, to the index home screen where we load / display the Profile information we set in the login. The only way to fix the issue is to ask the user to clear his cookies.

I think this has something to do with not being able to overwrite old cookies because the domain is not set in the web config. I was also thinking of deleting all the users from the aspnet_Users table so it clears out all the old data.

# ? Jun 17, 2014 20:31

PleasantDilemma: Dec 5, 2006; The Last Hope for Peace

Heskie posted:

The simplest solution I can think of would just be declaring the PHP variable inline as a javascript variable.

For example:
PHP code:
<script>
  var category = <?php echo $category; ?>;
</script>
Its perhaps not the most elegant, but its easiest way I can think of to shift variables between PHP and JS.

Is this not a good idea? I do this at lot. The backend will generate a bunch of data and javascript picks it up like your example instead of doing an ajax call on load.

# ? Jun 17, 2014 20:46

Heskie: Aug 10, 2002

PlesantDilemma posted:

Is this not a good idea? I do this at lot. The backend will generate a bunch of data and javascript picks it up like your example instead of doing an ajax call on load.

The purest in me likes to avoid inline JS (and CSS) as much as possible, but other than my own OCD I'd say its totally fine and I've seen it a lot.

# ? Jun 17, 2014 21:36

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

caiman posted:

I actually am using preventDefault() (in order to sneak the hash in there before leaving the page). I'll check my code when I get home tonight to see if there's some other reason the page might be jumping.

Oh man, the solution was even simpler and I feel stupid for having overlooked it. I had document.location.hash set to the text inside the menu item (i.e. the category name) which also happens to be the id of that same item. So it was using the menu item as an anchor. The "page jump" I was experiencing was simply the page scrolling down slightly to the anchored tag. :doh:

# ? Jun 17, 2014 21:57

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

Subjunctive posted:

Scrolling question: are there any events that fire reliably during inertial scroll on iOS (for lazy loading of images in my case)? I haven't found any yet, but thought I'd see if anyone had a magic trick before I resorted to bridging from native or iScroll.

This is impossible to do unless you have completely control of the scroll. During a native inertia scroll iOS does not fire any setInterval, setTimeout, or requestAnimationFrame calls. JavaScript just stops for all listening purposes so yeah, managing the scroll with iScroll or equivalent is your only option to track on the move.

# ? Jun 17, 2014 22:29

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Maluco Marinero posted:

This is impossible to do unless you have completely control of the scroll. During a native inertia scroll iOS does not fire any setInterval, setTimeout, or requestAnimationFrame calls. JavaScript just stops for all listening purposes so yeah, managing the scroll with iScroll or equivalent is your only option to track on the move.

Does it defer timer delivery, or actually block all JS execution, such as triggered by a call from native code? I thought the former, but that might have been more hope than realism.

I'll have to try it tonight, I guess.

# ? Jun 18, 2014 00:11

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

Subjunctive posted:

Does it defer timer delivery, or actually block all JS execution, such as triggered by a call from native code? I thought the former, but that might have been more hope than realism.

I'll have to try it tonight, I guess.

Like from a phonegap or webview? Beyond the scope of my current work (web app with no container). You'd need to test more thoroughly for your use case (and I'd love to know how it goes), as I'm developing from a position (at least for now) where the browser capabilities are my limit.

# ? Jun 18, 2014 01:08

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Maluco Marinero posted:

Like from a phonegap or webview? Beyond the scope of my current work (web app with no container). You'd need to test more thoroughly for your use case (and I'd love to know how it goes), as I'm developing from a position (at least for now) where the browser capabilities are my limit.

Yeah, from the native side of Awful.app's UIWebView. We shall see!

# ? Jun 18, 2014 01:24

Chris!: Dec 2, 2004; E

Can anyone recommend any resources for learning about SVG animation? I spent most of yesterday afternoon reading through things and watching videos, but they seem either too simple or too complicated for what I need - the site I'm working on at the minute, I've got an animated digger / crane which looks like one image, but actually has three separate components to it - the base, the bottom of the "arm" and the top of the "arm" (this is created and grouped into 3 components in Illustrator).

I'd like it to all slowly move across the screen, and then the components to appear as though they're moving together - i.e. the top and bottom of the arm to move as one, rotating upwards, then the top of the arm to rotate around the point where it connects to the bottom of the arm.

I've got everything moving across the screen fine, and the components moving separately, I just don't know how to specify where the rotation is centered - having them both centered around the point where the bottom of the arm and top of the arm meet. I'm using something like this:

<animateTransform attributeName="transform" type="rotate" from="0 0 0" to="0 10 20" begin="0s" dur="10s" fill="freeze" />

But it seems that only the first of the 3 numbers has any effect on the animation (so from="0 90 50" to="0 150 120" animates in the same way as from="0 0 0" to="0 10 20").

What am I doing wrong?

Here's a rough image of what I mean.

fuf posted:

Finally checked this out today thanks to your posts and you're not wrong, it's a lot nicer than bootstrap. The SASS files are a lot easier to read through. gently caress a bootstrap.

Great! Yeah I think Foundation is a lot better and more style agnostic too, so you don't end up with sites that are obviously using Foundation styles.

# ? Jun 18, 2014 09:27

fuf: Sep 12, 2004; haha

Foundation does some clever adjusting of padding depending on the height of the nav bar, which changes with page width. But it only updates the padding on a page refresh, not dynamically as the browser window is resized.

Does that still count as "responsive"? Is it good enough that a site looks good at any width when it first loads, or should it adjust 'live'? I mean how often are people resizing their browser windows anyway?

# ? Jun 18, 2014 13:37

Chris!: Dec 2, 2004; E

fuf posted:

Foundation does some clever adjusting of padding depending on the height of the nav bar, which changes with page width. But it only updates the padding on a page refresh, not dynamically as the browser window is resized.

Does that still count as "responsive"? Is it good enough that a site looks good at any width when it first loads, or should it adjust 'live'? I mean how often are people resizing their browser windows anyway?

Hmm this doesn't sound right - it should all adjust when the browser window is resized (for example the topbar on the Foundation site itself, or on the examples here http://foundation.zurb.com/docs/components/topbar.html - works fine in Chrome), unless I'm misunderstanding what you mean?

# ? Jun 18, 2014 13:42

fuf: Sep 12, 2004; haha

Chris! posted:

Hmm this doesn't sound right - it should all adjust when the browser window is resized (for example the topbar on the Foundation site itself, or on the examples here http://foundation.zurb.com/docs/components/topbar.html - works fine in Chrome), unless I'm misunderstanding what you mean?

I made a little demo:

http://fuf.pw/foundation/

At around 750px wide the list drops down onto a second line, so the nav bar is twice as high, but the site content doesn't adjust and gets hidden. If you refresh the page it adjusts and moves down. (at least that's how it works for me)

# ? Jun 18, 2014 14:30

Skiant: Mar 10, 2013

fuf posted:

I mean how often are people resizing their browser windows anyway?

I'd say "Not often unless you're a developer specifically testing out responsive stylesheet" but it's an assumption based on zero data at all and thus it may well be 100% wrong.

# ? Jun 18, 2014 14:34

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

Rotating a tablet between portrait and landscape is probably a real-world use case for crossing that particular width.

# ? Jun 18, 2014 14:42

Chris!: Dec 2, 2004; E

fuf posted:

I made a little demo:

http://fuf.pw/foundation/

At around 750px wide the list drops down onto a second line, so the nav bar is twice as high, but the site content doesn't adjust and gets hidden. If you refresh the page it adjusts and moves down. (at least that's how it works for me)

Ahh I see what you mean. Yeah, for that I guess you'd either have to adjust the break-point at which the main menu gets hidden (but with so many menu items it would be swapped for the mobile menu at like 750px) or manually adjust the padding with media queries.

Just realised what you meant about padding - the content drops down when you refresh but doesn't do it "live". Truth be told I've never used the top-bar, I always use Foundation's off-canvas for my mobile menu, so I've not noticed that before!

# ? Jun 18, 2014 14:46

fuf: Sep 12, 2004; haha

cbirdsong posted:

Rotating a tablet between portrait and landscape is probably a real-world use case for crossing that particular width.

Very good point!

Chris! posted:

Ahh I see what you mean. Yeah, for that I guess you'd either have to adjust the break-point at which the main menu gets hidden (but with so many menu items it would be swapped for the mobile menu at like 750px) or manually adjust the padding with media queries.

Just realised what you meant about padding - the content drops down when you refresh but doesn't do it "live". Truth be told I've never used the top-bar, I always use Foundation's off-canvas for my mobile menu, so I've not noticed that before!

So it turns out Foundation has a JS function which adds padding to <body> depending on the height of the topbar when the page loads. This overrides any media queries I set.

The only solution I've come up with is to use jquery to call the same Foundation function every time the window changes size:

code:

$(window).resize(function(){
   Foundation.libs.topbar.init();
});

Now the body padding changes as soon as the topbar gets taller. Not exactly efficient, but it works.

# ? Jun 18, 2014 16:49

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 18:24

Chris!: Dec 2, 2004; E

So after I posted about SVG animations this morning, I've spent a few hours (all day) getting to grips with it, and finally have a reasonable v1 of my animation which does (pretty much) everything I want it to.

But then I went and tested it in IE, and it doesn't animate at all, just sits there, not moving, making me look ridiculous for wasting so much time. I know that my client uses IE as their primary browser as well

Any ideas on how to get inline SVG animations to work in IE? Or do I have to do the whole thing again as CSS animations or something? I've tried a couple of ready made scripts from online - Rapha�l and fakesmile - and neither seem to make a difference. loving hell.

fuf posted:

The only solution I've come up with is to use jquery to call the same Foundation function every time the window changes size:
code:
$(window).resize(function(){
   Foundation.libs.topbar.init();
});
Now the body padding changes as soon as the topbar gets taller. Not exactly efficient, but it works.

That is very smart!

# ? Jun 18, 2014 17:51

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

«‹›361 »