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

«‹›235 »

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

Sagacity posted:

Which line of business are you in, in which clients don't use IE8 anymore?

Presumably one where they don't use XP because it's discontinued, and the auto update process has them on IE10 or IE11

# ? Jul 7, 2014 13:57

Adbot: ADBOT LOVES YOU

# ? May 22, 2024 18:50

Sagacity: May 2, 2003; Hopefully my epitaph will be funnier than my custom title.

Ah, you're assuming that people have stopped using XP now that it's not supporte--oh right. And these are just the people that are actually paying for extended support, instead of just not caring.

This may or may not be a subset of the people that are stuck on various legacy versions of IE because their lovely intranet apps depend on it.

# ? Jul 7, 2014 14:03

Tres Burritos: Sep 3, 2009

Sagacity posted:

This may or may not be a subset of the people that are stuck on various legacy versions of IE because their lovely intranet apps depend on it.

I started my first "real" programming job out of school 6 months ago and I was super surprised that this was a problem. However my co-workers fought to have IE 10 be the minimum. :smugbert:

# ? Jul 7, 2014 14:11

Sagacity: May 2, 2003; Hopefully my epitaph will be funnier than my custom title.

If you look at the various browser statistic pages then IE8 is used by anywhere between 6% to 22% on the desktop. I hate IE8 with a passion, but I don't get why any business would want to ignore such a large number of potential customers.

# ? Jul 7, 2014 14:21

Heskie: Aug 10, 2002

Sagacity posted:

If you look at the various browser statistic pages then IE8 is used by anywhere between 6% to 22% on the desktop. I hate IE8 with a passion, but I don't get why any business would want to ignore such a large number of potential customers.

Exactly this. I'd love to be all 'gently caress you got mine' about browser support, pretending IE8 is a dead browser and everyone runs Chrome 35 but my client's analytics tell a different story :suicide:

Basically I'm jealous of anyone that can get away with this. Any time a fancy new spec comes out I feel :eng99:

because its going to be years before I actually get to use it.

# ? Jul 7, 2014 15:33

lunar detritus: May 6, 2009

Tres Burritos posted:

I started my first "real" programming job out of school 6 months ago and I was super surprised that this was a problem. However my co-workers fought to have IE 10 be the minimum.

IE9 here, although the 'real' minimum is IE8 because if a client complains management bends over to get it fixed.

# ? Jul 7, 2014 15:54

Sagacity: May 2, 2003; Hopefully my epitaph will be funnier than my custom title.

Btw, this is why I'm such a fan of KnockoutJS. Even in the upcoming release, which has something similar to web components, they're still backwards compatible to IE6. That's a HUGE plus.

# ? Jul 7, 2014 15:56

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

I wish the web development community was half this dedicated to accessibility.

# ? Jul 7, 2014 16:06

pipes!: Jul 10, 2001; Nap Ghost

Kobayashi posted:

I wish the web development community was half this dedicated to accessibility.

Can't wait for Web Components to gently caress things up even more!

# ? Jul 7, 2014 19:57

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

React.js peoples: How do you do CSS transitions in React?

Say I have a bar graph type thing:

JavaScript code:

GraphThing = React.createClass({
  render: function () {
     var myStyle = {width: this.props.val + "%"};
     return ( <div className="barWrapper">
        <div className="bar" style={ myStyle } />
     </div>);
  }
});

And let us assume that said component has code that listens for an event that will change the val prop that is not shown here. This "works" in that when my event fires and the value is modified, the bar changes length, but I'd like to animate that transition via CSS. Is this possible? I'm aware of ReactCSSTransitionGroup but since I'm not using a class name (since the value is computed) I think I might be screwed.

# ? Jul 7, 2014 20:27

Electrophotonic: Mar 14, 2010; They're gonna stop
Saturday night
So you better have fun now
I PREDICT

So I'm dicking around with both Angular and React in my off-hours projects (preferring the latter so far), but I recently got involved in a project where our most experienced developer is having us use the python web framework Pyramid. It seems capable, especially with things such as security and access rights but I'm finding it unwieldy and unnecessarily complex. I'm also not a fan of Chameleon for templating but it seems easy enough to just switch to Knockout or something (yes IE6 compatibility is a plus here).

We're pretty much locked in now but it would be interested to hear of any other developers' experience because I'm finding comparatively little discussion about it. Is it just mature enough to not be very interesting (seeing as it has a lineage back to Plone) or does it have a terrible curse we should have known about before diving it?

# ? Jul 7, 2014 21:25

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

Lumpy posted:

React.js peoples: How do you do CSS transitions in React?

Say I have a bar graph type thing:
JavaScript code:
GraphThing = React.createClass({
  render: function () {
     var myStyle = {width: this.props.val + "%"};
     return ( <div className="barWrapper">
        <div className="bar" style={ myStyle } />
     </div>);
  }
});
And let us assume that said component has code that listens for an event that will change the val prop that is not shown here. This "works" in that when my event fires and the value is modified, the bar changes length, but I'd like to animate that transition via CSS. Is this possible? I'm aware of ReactCSSTransitionGroup but since I'm not using a class name (since the value is computed) I think I might be screwed.

If its just straight css transitions, even styles which are set in the style tag gets transitioned provided you're going from numeric to numeric -- no auto.

ReactTransitionGroup is for entering and exiting DOM elements where you need some frame by frame additions of classes in creation.

# ? Jul 7, 2014 21:46

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

Maluco Marinero posted:

If its just straight css transitions, even styles which are set in the style tag gets transitioned provided you're going from numeric to numeric -- no auto.

ReactTransitionGroup is for entering and exiting DOM elements where you need some frame by frame additions of classes in creation.

Pro tip: If you typo your class name in your SASS file, your CSS transitions don't work so well. Turns out it works just fine like you said with no TransitionGroup needed. Assuming you have the right class names.... :v:

# ? Jul 7, 2014 22:15

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

Lumpy posted:

Pro tip: If you typo your class name in your SASS file, your CSS transitions don't work so well. Turns out it works just fine like you said with no TransitionGroup needed. Assuming you have the right class names....

Haha yep. Just for a bit of reference for React devs, the way React renders is a lot more straightforward than you think.

Of course there's a decent amount going on in the internals, but you can simplify it down go this:

Render cycle is done in JavaScript, and each component is given a key, this is either a number when you put in component children as arguments, or a string key when you use the property 'key' on that component. This key is how React finds the element in the real DOM, which you'll see in the only proprietary tag React uses, 'data-react-id'.

When the render cycle is done, it's diffed against the last render cycle, to see what changes need to be made. In the above case it would see that the only difference is that the {style: width: '65%'} property has changed.

With that information React does the DOM operations in as simple a way as it can. Using keys and what not to reuse elements effectively.

If a key needed to be moved, it can do it without having to rebuild the entire DOM element because it knows where it was and where it needs to go. In the case of the simple style tag, the resulting Dom operation is basically equivalent to:

code:


document.querySelector('.progress-bar').style.width = '65%';

---

The main thing to remember with the React model is that it is NOT magical, it is well thought out and detailed but not to the point of a magical black box. You have good control over rendering using keys and, in rare cases, the shouldComponentUpdate method.

This means that if something works in standard HTML,CSS and a little bit of direct JavaScript, the same concepts still apply to React, you're just doing less bookkeeping.

# ? Jul 7, 2014 23:12

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

What can you skinny jeaned, mustachioed folk tell me about integrating some of these hip js frameworks with an asp.net project? I'm building a site whose back-end is entirely c#, but whose front end will benefit from the snappy nature of client-side page generation rather than constant (say, every 5-10 seconds) client-server page render requests.

# ? Jul 8, 2014 13:07

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

Newf posted:

What can you skinny jeaned, mustachioed folk tell me about integrating some of these hip js frameworks with an asp.net project? I'm building a site whose back-end is entirely c#, but whose front end will benefit from the snappy nature of client-side page generation rather than constant (say, every 5-10 seconds) client-server page render requests.

At a high level it doesn't matter what your backend is as long as it can deliver data to the front end. Typically this is via JSON, so if you can generate JSON with your backend, you just set up an API for javascript on your frontend to GET/POST to and then write a bunch of HTML/CSS and javascript in your framework of choice.

# ? Jul 8, 2014 15:43

Bastard: Jul 13, 2001; We are each responsible for our own destiny.

Does anybody have any experience with CORS in IE10+ ? I've got the API server setup with

code:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS

I try to access the API server from another domain with an Angular POST request with some JSON data, and the request stops with the OPTIONS/preflight call, with a error message that the domain isn't in the access control allow origin list. But every domain is allowed (as per wildcard). It works in all the other browsers of course, just IE 10+ that doesn't work.

# ? Jul 8, 2014 17:34

sim: Sep 24, 2003

Maluco Marinero posted:

... the way React renders is a lot more straightforward than you think.

Of course there's a decent amount going on in the internals, but you can simplify it down go this:

Render cycle is done in JavaScript, and each component is given a key, this is either a number when you put in component children as arguments, or a string key when you use the property 'key' on that component. This key is how React finds the element in the real DOM, which you'll see in the only proprietary tag React uses, 'data-react-id'.

When the render cycle is done, it's diffed against the last render cycle, to see what changes need to be made. In the above case it would see that the only difference is that the {style: width: '65%'} property has changed.

With that information React does the DOM operations in as simple a way as it can. Using keys and what not to reuse elements effectively.

If a key needed to be moved, it can do it without having to rebuild the entire DOM element because it knows where it was and where it needs to go. In the case of the simple style tag, the resulting Dom operation is basically equivalent to:
code:
document.querySelector('.progress-bar').style.width = '65%';

Just wanted to say thanks for this. I've haven't worked with React yet, but I'd really like to. I've read multiple tutorials/introductions and while I understood the benefit, I never fully grasped exactly how it worked. This plain english description helped solidify it for me.

# ? Jul 8, 2014 18:14

wwb: Aug 17, 2004

Newf posted:

What can you skinny jeaned, mustachioed folk tell me about integrating some of these hip js frameworks with an asp.net project? I'm building a site whose back-end is entirely c#, but whose front end will benefit from the snappy nature of client-side page generation rather than constant (say, every 5-10 seconds) client-server page render requests.

What Thermopyle said. I'll add that more specifically you might want to look at angular as it does pretty well if you want to include in a page with other complex poo poo going on -- it can just carve out a section and be happy.

If it is an intranet app you can cheat a lot using ASP.NET AJAX and update panels without ever getting into modern front ends FWIW. If this is more greenfield, I would check out using the ASP.NET web api to generate the json and such. If you are just doing GETs and are on MVC then returning json from action methods isn't a horrible option and it saves you from taking on an extra framework that has a boatload of similarly named objects to confuse the poo poo out of you. If you want to get really loopy and do streaming updates or something then you might want to check out signalr which is pretty loving nifty.

# ? Jul 8, 2014 18:43

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

sim posted:

Just wanted to say thanks for this. I've haven't worked with React yet, but I'd really like to. I've read multiple tutorials/introductions and while I understood the benefit, I never fully grasped exactly how it worked. This plain english description helped solidify it for me.

For some reason React took longer for me to "get" than the other Frameworks, I think partly because it's so simple, and there's so much magic voodoo that I kept thinking I had to be doing something wrong: "OK, now how will I inform this component 6 miles down my tree that it needs to update... (30 mins of scouring docs, tutorials, etc.) ...Oh, it just does it."

I've been cranking out little React-based stuff the last few days, and I'm about to try a "real" project using React and react.backbone to make a kanban board for the Asana project management app / tool. I'm quite impressed with it.

# ? Jul 9, 2014 02:14

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

Maluco Marinero posted:

Haha yep. Just for a bit of reference for React devs, the way React renders is a lot more straightforward than you think.

Of course there's a decent amount going on in the internals, but you can simplify it down go this:

Render cycle is done in JavaScript, and each component is given a key, this is either a number when you put in component children as arguments, or a string key when you use the property 'key' on that component. This key is how React finds the element in the real DOM, which you'll see in the only proprietary tag React uses, 'data-react-id'.

When the render cycle is done, it's diffed against the last render cycle, to see what changes need to be made. In the above case it would see that the only difference is that the {style: width: '65%'} property has changed.

With that information React does the DOM operations in as simple a way as it can. Using keys and what not to reuse elements effectively.

If a key needed to be moved, it can do it without having to rebuild the entire DOM element because it knows where it was and where it needs to go. In the case of the simple style tag, the resulting Dom operation is basically equivalent to:
code:
document.querySelector('.progress-bar').style.width = '65%';
---

The main thing to remember with the React model is that it is NOT magical, it is well thought out and detailed but not to the point of a magical black box. You have good control over rendering using keys and, in rare cases, the shouldComponentUpdate method.

This means that if something works in standard HTML,CSS and a little bit of direct JavaScript, the same concepts still apply to React, you're just doing less bookkeeping.

This is great.

# ? Jul 9, 2014 03:44

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

Thanks Thermo, wwb. Will continue poking around. You'll be sure to hear from me again soon

# ? Jul 9, 2014 12:55

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

Subjunctive posted:

This is great.

If you can/ don't mind saying, what do you do at Facebook? Understandable if you don't or can't answer

I'm really grooving on React now, and found another Backbone "hook" for it that I like: https://github.com/magalhas/backbone-react-component

# ? Jul 10, 2014 17:41

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

Lumpy posted:

If you can/ don't mind saying, what do you do at Facebook? Understandable if you don't or can't answer

I'm an Engineering Director. I ran Android/iOS/mobile-web engineering for a year and a half while we were rebooting it, and most recently I've been working with our teams doing open source stuff to help them be successful. Not sure what I'm going to work on next!

# ? Jul 10, 2014 17:58

Tres Burritos: Sep 3, 2009

Has anyone seen the Kickstarter for "black-tie"? Apparently it's the same dude that made fontawesome so I'd like to send some money his way, but $90 bucks for some icons? I dunno about that.

# ? Jul 14, 2014 14:37

Count Thrashula: Jun 1, 2003; Death is nothing compared to vindication.; Buglord

Are there any good blogs or sites to follow to keep abreast of the latest trends in front end development? I feel like every week I come in to work and learn about a new framework or language or something - not that I will be using any of these quirky new frontends, but it's still fun to read about.

# ? Jul 14, 2014 14:39

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

Tres Burritos posted:

Has anyone seen the Kickstarter for "black-tie"? Apparently it's the same dude that made fontawesome so I'd like to send some money his way, but $90 bucks for some icons? I dunno about that.

Only $30 for a single weight, it looks like. Or you could just pledge $1/$5/$10 and count toward the 3000-backer Font Awesome improvement threshold.

# ? Jul 14, 2014 15:47

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

QPZIL posted:

Are there any good blogs or sites to follow to keep abreast of the latest trends in front end development? I feel like every week I come in to work and learn about a new framework or language or something - not that I will be using any of these quirky new frontends, but it's still fun to read about.

http://sidebar.io/

# ? Jul 14, 2014 16:57

Pollyanna: Mar 5, 2005; Milk's on them.

We should put that in the title.

I'm amazed at all the different choices for MV* frameworks on Javascript. What the hell do I choose :gonk:

we're interested in teaching our clients Ember for our upcoming class, but I dunno if I like it - too opinionated. I personally like more freeform/simple and obvious frameworks like Knockout and React (although I dunno if React is actually MV* instead of just V). I'm thinking my next project will be a for-real single page app with no reloading, RESTful CRUD, and cutesy little UX widgets so I can get right into a good MVC framework. Problem is which one to choose :v:

so I'm starting with just reviewing how JS implements MVC/MVVM in general. That's what made Python/Ruby frameworks make sense to me, after all. Maybe we should also cover a little bit of how MVC works in here, too.

# ? Jul 16, 2014 14:50

excidium: Oct 24, 2004; Tambahawk Soars

Pollyanna posted:

We should put that in the title.

I'm amazed at all the different choices for MV* frameworks on Javascript. What the hell do I choose we're interested in teaching our clients Ember for our upcoming class, but I dunno if I like it - too opinionated. I personally like more freeform/simple and obvious frameworks like Knockout and React (although I dunno if React is actually MV* instead of just V). I'm thinking my next project will be a for-real single page app with no reloading, RESTful CRUD, and cutesy little UX widgets so I can get right into a good MVC framework. Problem is which one to choose so I'm starting with just reviewing how JS implements MVC/MVVM in general. That's what made Python/Ruby frameworks make sense to me, after all. Maybe we should also cover a little bit of how MVC works in here, too.

If you want a bunch of resources just look at the MEAN stack - MongoDB, ExpressJS, AngularJS, Node. Full MVC framework with REST API creation through Express. Angular is going to have a bunch of resources available for learning.

# ? Jul 16, 2014 15:09

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

Pollyanna posted:

We should put that in the title.

I'm amazed at all the different choices for MV* frameworks on Javascript. What the hell do I choose

Goddamn, just pick one loving framework and learn the ever-loving poo poo out of it.

# ? Jul 16, 2014 17:35

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

Pollyanna posted:

We should put that in the title.

I'm amazed at all the different choices for MV* frameworks on Javascript. What the hell do I choose we're interested in teaching our clients Ember for our upcoming class, but I dunno if I like it - too opinionated. I personally like more freeform/simple and obvious frameworks like Knockout and React (although I dunno if React is actually MV* instead of just V). I'm thinking my next project will be a for-real single page app with no reloading, RESTful CRUD, and cutesy little UX widgets so I can get right into a good MVC framework. Problem is which one to choose so I'm starting with just reviewing how JS implements MVC/MVVM in general. That's what made Python/Ruby frameworks make sense to me, after all. Maybe we should also cover a little bit of how MVC works in here, too.

who gives a poo poo

# ? Jul 16, 2014 18:30

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

there are people like you. they spend more time debating the correct design of their software with themself than actually sitting down and writing the drat software. they are not people i like to work with.

just write your drat software.

# ? Jul 16, 2014 18:31

sim: Sep 24, 2003

Need this http://www.urbanspoon.com/spin-widget for JS frameworks.

# ? Jul 16, 2014 18:55

Count Thrashula: Jun 1, 2003; Death is nothing compared to vindication.; Buglord

Pollyanna posted:

We should put that in the title.

I'm amazed at all the different choices for MV* frameworks on Javascript. What the hell do I choose we're interested in teaching our clients Ember for our upcoming class, but I dunno if I like it - too opinionated. I personally like more freeform/simple and obvious frameworks like Knockout and React (although I dunno if React is actually MV* instead of just V). I'm thinking my next project will be a for-real single page app with no reloading, RESTful CRUD, and cutesy little UX widgets so I can get right into a good MVC framework. Problem is which one to choose so I'm starting with just reviewing how JS implements MVC/MVVM in general. That's what made Python/Ruby frameworks make sense to me, after all. Maybe we should also cover a little bit of how MVC works in here, too.

https://en.wiktionary.org/wiki/yak_shaving

edit-- Bikeshedding works too I guess

# ? Jul 16, 2014 19:04

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

Pollyanna posted:

What the hell do I choose

Problem is which one to choose

You don't have to pick the best one. Pick something with an example that's close to what you want to do, or which feels comfortable to you. Don't jump ship because you hit one problem that another framework might address better. Learn by finding the limits of the tool, stretching it, and then looking how to bridge it to other tools. If you choose anything that has more than 100 users, it'll be good enough to make your project possible. Start working.

quote:

I'm starting with just reviewing how JS implements MVC/MVVM in general.

JS doesn't "implement MVC/MVVM" at all. You have an abstraction mismatch. There isn't a servlet/ASP/whatever model tied closely to the language or deployment environment. Frameworks/developers implement MVC/MVVM/whatever in JS. You are not going to find enlightenment at the language level.

# ? Jul 16, 2014 20:49

excidium: Oct 24, 2004; Tambahawk Soars

I like http://en.wikipedia.org/wiki/Analysis_paralysis

# ? Jul 16, 2014 20:50

IM FROM THE FUTURE: Dec 4, 2006

A MEAN stack isnt just any ole MVC stack. A Node.js backend is not like normal synchronous programming.

# ? Jul 17, 2014 03:27

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

excidium posted:

I like http://en.wikipedia.org/wiki/Analysis_paralysis

My mind keeps on trying to fuse this with both "moses supposes" and "developers developers" and it's getting very confused.

# ? Jul 17, 2014 03:29

Adbot: ADBOT LOVES YOU

# ? May 22, 2024 18:50

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

IM FROM THE FUTURE posted:

A MEAN stack isnt just any ole MVC stack. A Node.js backend is not like normal synchronous programming.

Neither is front-end JS, though. If you can't handle event-based/callback-as-lame-continuation flow control fluently, you're sort of hosed on modern FE work.

(Excepting generator models I guess, where you can write straight-line stuff that spans multiple event loop turns.)

# ? Jul 17, 2014 03:37

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

«‹›235 »