Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›234 »

Skiant: Mar 10, 2013

fuf posted:

I've been using angular and ngRoute to make very basic static sites. Basically my only logic is a list of routes like:
code:
  .when('/about', { 
       templateUrl: 'templates/about.html'
   }
Basically doing the same thing I used to do with
code:
<?php include 'templates/about.php' ?> 
etc.

Is there another JS framework that is good for this kind of thing? Maybe a little more lightweight? I want to try something other than angular.

e: I guess backbone with LayoutManager?

e2: actually ember looks a lil easier

Ember is amazing if you can fit the use case they invented it for, but it's a death trap if you wanna do anything else.

# ? Sep 4, 2014 15:30

Adbot: ADBOT LOVES YOU

# ? Apr 27, 2024 18:07

Vulture Culture: Jul 14, 2003; I was never enjoying it. I only eat it for the nutrients.

If you do end up with Backbone, look into Marionette over LayoutManager. The model seems a lot saner to me, though it might feel a tiny bit bloated (by Backbone standards) if you don't want any of the messaging pieces.

# ? Sep 4, 2014 19:44

fuf: Sep 12, 2004; haha

I'm actually kinda enjoying ember so far.

But I just got stuck trying to conditionally add a css class (<header> has class "fullpage" when url is "/"). Can someone tell me the simplest way to do this or point to the right documentation (surprisingly hard to google)? I optimistically tried to just start using jQuery but I can't 'select' anything except <body> for some reason:

code:

App.IndexRoute = Ember.Route.extend({
   activate: function(){
      console.log("this is the home page lol"); // works
      $('body').addClass('fullpage'); // works
      $('header').addClass('fullpage'); // doesn't work 
   }
});

# ? Sep 4, 2014 19:57

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

I think what you're trying to do would be better suited to the view, particularly the "didInsertView" hook. Maybe something like?

code:

App.IndexView = Ember.View.extend({
  didInsertView: function() {
    // jQuery!
  }
});

# ? Sep 4, 2014 20:19

fuf: Sep 12, 2004; haha

Couldn't find anything on didInsertView but I think you meant didInsertElement - and that works! Thanks

# ? Sep 4, 2014 20:48

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

For anyone who just wants to ajaxify a more simple website to behave like a single page app try http://sennajs.com , I haven't used it but looking at the API it seems more geared towards that use case.

# ? Sep 4, 2014 21:44

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

What's a fairly simple way to take a form with a number of identical fields say a questionnaire and javascript them into separate pages for the users point of view?

Q1 - answer ->submit (animation or whatever to next Q2)

By the way, I'm already using JQuery (which I know nothing about) and Bootstrap for layout. But since I'm using Django to generate templates server-side, I don't mind injecting whatever code so long as it doesn't bloat me too much.

I haven't committed heavily to my front-end yet, so I'm fairly flexible as my front-end is mostly stateless.

# ? Sep 4, 2014 22:30

Sedro: Dec 31, 2008

fuf posted:

Couldn't find anything on didInsertView but I think you meant didInsertElement - and that works! Thanks

There are also some methods on Function.prototype which can be chained together

JavaScript code:

App.IndexView = Ember.View.extend({
  doStuff: function() {
    // Ember will call the function
    //  1. after the view is added to the DOM
    //  2. before the view is removed from the DOM
    //  3. whenever `someProperty` changes
    // You can also invoke it yourself e.g. this.doStuff()
  }.on('didInsertElement', 'willDestroyElement').observes('someProperty')
});

# ? Sep 4, 2014 22:32

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Ahz posted:

What's a fairly simple way to take a form with a number of identical fields say a questionnaire and javascript them into separate pages for the users point of view?

Q1 - answer ->submit (animation or whatever to next Q2)

By the way, I'm already using JQuery (which I know nothing about) and Bootstrap for layout. But since I'm using Django to generate templates server-side, I don't mind injecting whatever code so long as it doesn't bloat me too much.

I haven't committed heavily to my front-end yet, so I'm fairly flexible as my front-end is mostly stateless.

Put the 'pages' in separate divs and show/hide them maybe?

# ? Sep 5, 2014 03:41

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

Chenghiz posted:

Put the 'pages' in separate divs and show/hide them maybe?

Any tips on an easy way to do that? Or the best way to add some type of transitions?

# ? Sep 5, 2014 04:28

Ochowie: Nov 9, 2007

Is there a way to catch an event when an Angular app is completely unloaded? Basically, I'm storing a authentication status in sessionStorage which means that if I open a new tab I have to log in again. If I switch to localStorage that issue goes away but I have no way of clearing localStorage out after I close the tabs so when I reopen them I don't get another login screen. If there is a better way to handle this sort of thing I would be open to that as well.

# ? Sep 6, 2014 02:47

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Ahz posted:

Any tips on an easy way to do that? Or the best way to add some type of transitions?

Just set up an event liostener for the 'next page button/link' and when it's clicked use jQuery to select the current div and use .hide() or .fadeOut() or .slideUp() to hide it, and select the next div and do the opposite. Quick and dirty example:

JavaScript code:

$('#my-form .div1').on('click', '.btn-next', function () {
	$('#my-form .div1').hide();
	$('#my-form .div2').show();
)};

HTML code:

<form id="my-form">
	<div class="div1">
		<!-- form elements -->
		<a class="btn-next">Next Page</a>
	</div>
	<div class="div2" style="display:none">
		<!-- form elements -->
		<a class="btn-next">Next Page</a>
	</div>
	<!-- etc. -->
</form>

# ? Sep 7, 2014 02:58

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

Ochowie posted:

Is there a way to catch an event when an Angular app is completely unloaded? Basically, I'm storing a authentication status in sessionStorage which means that if I open a new tab I have to log in again. If I switch to localStorage that issue goes away but I have no way of clearing localStorage out after I close the tabs so when I reopen them I don't get another login screen. If there is a better way to handle this sort of thing I would be open to that as well.

Wait, so if you open the app in a new tab/window at all, you have to login again? Why not just store the credentials in a variable in a service that's not persisted on the client side? When the app is reloaded, they won't have their credentials.

If you have server-side authentication using session and you want to keep using that, you could just add an extra "token" credential that's generated at login and shared between client/server, but don't keep the token in persistent storage on the client side. If the request from the client doesn't include the token, then they're not logged in, and you can trash the server session for the user.

If you do that, be aware that the session persistence will be to the cookie (browser session), so if you want to be logged in on two tabs and use session credentials too, you might need a way of storing multiple tokens and to never destroy a users session, or you'll only be able to log into one tab at a time.

# ? Sep 8, 2014 05:13

fuf: Sep 12, 2004; haha

Maluco Marinero posted:

For anyone who just wants to ajaxify a more simple website to behave like a single page app try http://sennajs.com , I haven't used it but looking at the API it seems more geared towards that use case.

I tried this today but it's not quite what I was expecting. It really is for converting existing static sites, because each page needs to be a full html page with its own <head> and nav menus etc etc.

Really I want something that loads page snippets into my main index.html, and which also allows for routing so people can hit me.com/about etc. and get the right page. Anything lightweight that does that or should I stick with ember?

# ? Sep 9, 2014 16:11

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

fuf posted:

I tried this today but it's not quite what I was expecting. It really is for converting existing static sites, because each page needs to be a full html page with its own <head> and nav menus etc etc.

Really I want something that loads page snippets into my main index.html, and which also allows for routing so people can hit me.com/about etc. and get the right page. Anything lightweight that does that or should I stick with ember?

Check out React and react-router.

# ? Sep 9, 2014 17:45

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

I'm whipping together a Django backend that exposes a CRUD RESTful API that has about a dozen models with various relations. The backend serves no HTML at all.

I'm going to put together a web frontend and I'm looking to try some new JS libraries/framework. Just looking to expand my toolbelt and learn some new stuff or maybe become more familiar with things I've dabbled with before.

Any recommendations for anything you like for managing the backend and frontend objects and keeping them in sync?

# ? Sep 9, 2014 18:45

fuf: Sep 12, 2004; haha

Lumpy posted:

Check out React and react-router.

I'd looked at React in the past and just had a look at react-router.

The thing I'm not sure about is React components only ever seem to have really small html snippets defined right there in the app code, like this:

code:

var Header = React.createClass({
  render: function() {
    return (
      <header>
        <ul>
          <li><a href="/">Dashboard</a></li>
          <li><a href="/inbox">Inbox</a></li>
          <li><a href="/calendar">Calendar</a></li>
        </ul>
        Logged in as Joe
      </header>
    );
  }
});

But I can't really do this for a full page's worth of content with paragraphs and images etc. Is there a method which uses external html files like with Angular's TemplateUrl?

# ? Sep 9, 2014 19:27

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

fuf posted:

I'd looked at React in the past and just had a look at react-router.

The thing I'm not sure about is React components only ever seem to have really small html snippets defined right there in the app code, like this:
code:
var Header = React.createClass({
  render: function() {
    return (
      <header>
        <ul>
          <li><a href="/">Dashboard</a></li>
          <li><a href="/inbox">Inbox</a></li>
          <li><a href="/calendar">Calendar</a></li>
        </ul>
        Logged in as Joe
      </header>
    );
  }
});
But I can't really do this for a full page's worth of content with paragraphs and images etc. Is there a method which uses external html files like with Angular's TemplateUrl?

You can use the dangerouslySetInnerHTML property to use a string as the HTML of a DOM element, but tbqh you may get along just fine with a combination of 'flatiron director' for your routing and jQuery for getting snippets and injecting them. You barely need any front end framework if that's all you're doing, but I'm saying that with no knowledge of exactly what you're doing.

# ? Sep 9, 2014 19:46

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

fuf posted:

I'd looked at React in the past and just had a look at react-router.

The thing I'm not sure about is React components only ever seem to have really small html snippets defined right there in the app code, like this:
code:
var Header = React.createClass({
  render: function() {
    return (
      <header>
        <ul>
          <li><a href="/">Dashboard</a></li>
          <li><a href="/inbox">Inbox</a></li>
          <li><a href="/calendar">Calendar</a></li>
        </ul>
        Logged in as Joe
      </header>
    );
  }
});
But I can't really do this for a full page's worth of content with paragraphs and images etc. Is there a method which uses external html files like with Angular's TemplateUrl?

I don't know of an existing component that wraps XHR and dangerouslySetInnerHTML (other than <iframe> :v:

), but DIY wouldn't be too hard. Keep the currently-loaded content in state, trigger a load of it on nav, and in render jam it in. The tutorial does this with the markdown comments, IIRC.

# ? Sep 9, 2014 20:05

fuf: Sep 12, 2004; haha

Maluco Marinero posted:

but tbqh you may get along just fine with a combination of 'flatiron director' for your routing and jQuery for getting snippets and injecting them. You barely need any front end framework if that's all you're doing, but I'm saying that with no knowledge of exactly what you're doing.

Yeah this is probably what I should do. I've been trying to use various frameworks just as a learning experience, and so that I can say I've used them. But actually most of the sites I end up making at the moment are just old-school static pages. Maybe I'm being counter-productive and should wait until I need to make something more app-like.

Or maybe using that flatiron director router would be a good compromise.

Subjunctive posted:

I don't know of an existing component that wraps XHR and dangerouslySetInnerHTML (other than <iframe> ), but DIY wouldn't be too hard. Keep the currently-loaded content in state, trigger a load of it on nav, and in render jam it in. The tutorial does this with the markdown comments, IIRC.

Thanks, I'll keep this in mind.

# ? Sep 9, 2014 20:31

Skiant: Mar 10, 2013

Thermopyle posted:

I'm whipping together a Django backend that exposes a CRUD RESTful API that has about a dozen models with various relations. The backend serves no HTML at all.

I'm going to put together a web frontend and I'm looking to try some new JS libraries/framework. Just looking to expand my toolbelt and learn some new stuff or maybe become more familiar with things I've dabbled with before.

Any recommendations for anything you like for managing the backend and frontend objects and keeping them in sync?

IIRC you're already familiar with Angular, you might have missed Restangular that helps a ton when working with a RESTful API as the name suggests.
I've got no idea how far the Ember team went on Ember Data (the binding-to-server-data part) but it was clearly the biggest flaw I could find last november when we were investigating the whole Single-Page-Application thing.

# ? Sep 9, 2014 20:57

Ochowie: Nov 9, 2007

v1nce posted:

Wait, so if you open the app in a new tab/window at all, you have to login again? Why not just store the credentials in a variable in a service that's not persisted on the client side? When the app is reloaded, they won't have their credentials.

If you have server-side authentication using session and you want to keep using that, you could just add an extra "token" credential that's generated at login and shared between client/server, but don't keep the token in persistent storage on the client side. If the request from the client doesn't include the token, then they're not logged in, and you can trash the server session for the user.

If you do that, be aware that the session persistence will be to the cookie (browser session), so if you want to be logged in on two tabs and use session credentials too, you might need a way of storing multiple tokens and to never destroy a users session, or you'll only be able to log into one tab at a time.

Thanks. I've decided to go with an expiring token that's issued and validated server side. Although that's raised some more issues, but that's for the .NET thread.

# ? Sep 10, 2014 15:33

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

What's the recommended file/way of serving a crisp quality logo on a page?

I have my logo and It looks fine on my home machine in Safari/Firefox etc. @ 30px height. But I load the same thing on my iPhone 5s and it's blurry. I tried both 8bit png and 24 bit png.

# ? Sep 15, 2014 18:19

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

You need to serve retina images to those devices. I just go with SVG when possible with PNG fallbacks to support any browser that don't support them (cough gently caress IE8 cough).

SVG means retina ready, responsive up and down to any size and you can do cool things like changing fill colors with CSS. Compress your SVGs with something like this https://github.com/svg/svgo

Reading:
http://css-tricks.com/using-svg/
http://ivomynttinen.com/blog/a-guide-for-creating-a-better-retina-web/

# ? Sep 15, 2014 18:28

Knyteguy: Jul 6, 2005; YES to love
NO to shirts; Toilet Rascal

Ahz posted:

What's the recommended file/way of serving a crisp quality logo on a page?

I have my logo and It looks fine on my home machine in Safari/Firefox etc. @ 30px height. But I load the same thing on my iPhone 5s and it's blurry. I tried both 8bit png and 24 bit png.

My guess would be the Retina screen is causing blurriness. This goes a little bit more into it:
https://support.ceros.com/posts/627788-what-dimensions-in-pixels-should-i-make-my-images/public

# ? Sep 15, 2014 18:29

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

The SVG worked out well, thx.

# ? Sep 15, 2014 19:32

The Dave: Sep 9, 2003

If you can't use svg for something you can always load a hi res image and scale it through css, and provide an <IE9 fallback by putting \9 at the end of the CSS rule. ( Like background: url('hires.jpg');background: url('lowres.jpg')\9;background-size: 100px 50px; )

# ? Sep 15, 2014 19:37

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

I did the JS fallback to png:

onerror="this.onerror=null; this.src='{% static 'img/logo_dark_pink_graphic.png' %}'"

# ? Sep 15, 2014 21:01

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

Ahz posted:

I did the JS fallback to png:

onerror="this.onerror=null; this.src='{% static 'img/logo_dark_pink_graphic.png' %}'"

As long as it's a very small image (as it d/ls twice on some browsers), you can put the PNG in an <image> tag inside in an SVG element with, an href pointing to to the SVG and a src pointing to the PNG, no js needed; older browsers ignore the SVG and correct <image> to <img>

RobertKerans fucked around with this message at 07:07 on Sep 16, 2014

# ? Sep 16, 2014 07:05

Baby Nanny: Jan 4, 2007; ftw m8.

Thermopyle posted:

I'm whipping together a Django backend that exposes a CRUD RESTful API that has about a dozen models with various relations. The backend serves no HTML at all.

I'm going to put together a web frontend and I'm looking to try some new JS libraries/framework. Just looking to expand my toolbelt and learn some new stuff or maybe become more familiar with things I've dabbled with before.

Any recommendations for anything you like for managing the backend and frontend objects and keeping them in sync?

I pretty much do this exact thing at work for a living. All my recent projects have been django rest framework back ends with so e pretty heavy angular front ends (for dashboards and data tabley kind of apps). Angular and drf go very very well together and while the mentioned restangular lib does indeed work pretty well, rolling your own angular service for your API is also super easy and is also a good way to teach yourself more about how to properly structure an angular application and such. You can do a lot with just $http and a few models.

# ? Sep 16, 2014 16:09

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

RobertKerans posted:

As long as it's a very small image (as it d/ls twice on some browsers), you can put the PNG in an <image> tag inside in an SVG element with, an href pointing to to the SVG and a src pointing to the PNG, no js needed; older browsers ignore the SVG and correct <image> to <img>

So this is both items in the same html tag, or am I editing SVG metadata?

# ? Sep 16, 2014 17:01

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

Baby Nanny posted:

I pretty much do this exact thing at work for a living. All my recent projects have been django rest framework back ends with so e pretty heavy angular front ends (for dashboards and data tabley kind of apps). Angular and drf go very very well together and while the mentioned restangular lib does indeed work pretty well, rolling your own angular service for your API is also super easy and is also a good way to teach yourself more about how to properly structure an angular application and such. You can do a lot with just $http and a few models.

I'm curious, for a design like that how do you structure complicated models? Do you have the backend process the output into nice JSON, or just serve up models and do joining in the fronted? I'm thinking about complex structures such as invoices which may include previous unpaid invoices, associated business data / addressing / taxes etc? How much do you denormalize to avoid joins?

I've always been curious about JSON-only backends and how most people handle the tricky data stuff. I always see fairly simple examples online like Blogs or simple 1-2-3 parent to child relationships.

# ? Sep 16, 2014 17:06

My Rhythmic Crotch: Jan 13, 2011

Ahz posted:

I'm curious, for a design like that how do you structure complicated models? Do you have the backend process the output into nice JSON, or just serve up models and do joining in the fronted? I'm thinking about complex structures such as invoices which may include previous unpaid invoices, associated business data / addressing / taxes etc? How much do you denormalize to avoid joins?

I've always been curious about JSON-only backends and how most people handle the tricky data stuff. I always see fairly simple examples online like Blogs or simple 1-2-3 parent to child relationships.

I think it's application dependent. I have a lot of highly tuned sql queries in the back end (tons of joins, coalesces, cases, etc) but there are still times when I mush data together in the front end. Perhaps some special snowflake page needs the resources from /api/books/5 and /api/books/10, or perhaps the API represents something like /api/magazinebook which, unfortunately, contains data that might not be 100% "clean" for performance, business logic, or legacy reasons. When you are also in control of the DB schema, a lot of these shenanigans can be avoided.

# ? Sep 16, 2014 18:25

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

Ahz posted:

So this is both items in the same html tag, or am I editing SVG metadata?

pre:

<svg>
  <image xlink:href="svg.svg" src="svg.png"/>
</svg>

That's it.

See http://css-tricks.com/svg-fallbacks/, it works really very well. You're using the SVG as an image regardless (so no manipulation via CSS etc*), it just has to be wrapped in an SVG tag. Older IE/Android ignore the <svg>, read the <image> as an <img> tag and ignore the href attribute, compliant browsers read the <image> tag correctly and ignore the src attribute. IE requests both, other browsers don't.

*one plus of this hack; if you do need that, then inline SVG works fine - the <image> tag just then just needs a 'src' attribute, leave off the 'xlink:href'.

RobertKerans fucked around with this message at 22:15 on Sep 16, 2014

# ? Sep 16, 2014 21:13

Pudgygiant: Apr 8, 2004; Garnet and black? More like gold and blue or whatever the fuck colors these are

Anybody down to unfuck a bit of CSS and show me where I went wrong for a nominal fee? It's embarrassingly bad so you're not allowed to talk poo poo or post it in the coding horrors thread.

e
Got this all (kind of) figured out. Percentages instead of pixels is magic.

Pudgygiant fucked around with this message at 22:47 on Sep 18, 2014

# ? Sep 18, 2014 08:35

enthe0s: Oct 24, 2010; In another few hours, the sun will rise!

Is there any way to adjust the bounding box of images/svgs to be non-rectangular? Right now, I have a bunch of pngs that look like triangles because of transparent backgrounds, but still have a rectangular bounding box. This is proving problematic because I want to put click events on these 'triangles', but since they have rectangular bounding boxes, when I click on one, it actually ends up hitting a nearby triangle instead of the one I want, since there is some overlap.

I've looked into setting the clip-path, but from what I've seen/tried, it's still a rectangular bounding box.

# ? Sep 22, 2014 19:23

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

Anyone have experience supporting multiple languages in their single page app? I'm looking at L20N from mozilla but I get the feeling it is new and has not seen wide deployment. What other options are out there? I am looking for something that can make it possible to deal with plural/gender rules of strange languages. I am a dumb american who has gotten by with English so far :911:

# ? Sep 25, 2014 01:07

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

L20N isn't very widely deployed, AFAIK, but it's used to localize FirefoxOS's UI, so it should be pretty robust. Staś and the team will likely be pretty supportive through mailing list or IRC if you need help.

# ? Sep 25, 2014 01:23

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

I'm using i18next, plenty of tools around it, and reasonably well though out. Usable with browserify if you need to embed it into the app bundle. http://i18next.com

# ? Sep 25, 2014 06:22

Adbot: ADBOT LOVES YOU

# ? Apr 27, 2024 18:07

Urit: Oct 22, 2010

My company is using Counterpart. It seems pretty nice, everything is just nested objects so your strings can follow the form of x.y.z and if you've got a missing translation you'll see "Translation missing for en.x.y.z"

# ? Sep 25, 2014 07:01

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›234 »