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 »

Dogcow: Jun 21, 2005

Skandranon posted:

Also, feel free to PM me any questions about Angular, half my day job these days is answering questions about it.

Any tips on state management stuff for Angular2 if you're not doing routing? What's the cool kid thing these days? Coworker pointed me to an article on using Redux though I'm unsure if that's overkill for our app which is relatively simple in terms of state.

Right now I have a service with an observable that broadcasts state changes as strings for the app component to plop into an ngSwitch and show the right thing. Probably as simple as it gets, unsure how much of a mess it might become trying to scale.

# ? Nov 16, 2016 01:44

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 19:18

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

Dogcow posted:

Any tips on state management stuff for Angular2 if you're not doing routing? What's the cool kid thing these days? Coworker pointed me to an article on using Redux though I'm unsure if that's overkill for our app which is relatively simple in terms of state.

Right now I have a service with an observable that broadcasts state changes as strings for the app component to plop into an ngSwitch and show the right thing. Probably as simple as it gets, unsure how much of a mess it might become trying to scale.

I haven't had much chance to do Angular 2 beyond plan for a future upgrade... but I've had a few thoughts on the matter. Redux is good for having a central store of state, but it does involve swallowing a lot of extra things to get it. I've been toying with the idea of creating a central state holder that does not require the action-reducer stuff of Redux, but still allows things like saving/restoring the entire state object easily.

For simple cases, you can just have dedicated services for managing state (applies to Angular 1 as well), and use controller methods to dynamically fetch at digest time. For most cases this is sufficient, and reduces the need to broadcast it outwards.

# ? Nov 16, 2016 01:55

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

What are your guys' thoughts on AngularJS 1.5's require component property for allowing children components to invokes methods on the parent controller? I'm a fan of keeping components isolated from each other and using bindings in component definitions to pass data from parent to child (and occasionally from child to parent via a two-way binding) because it's way more explicit and feels like it keeps components more modular. I can see how require would be convenient for doing things like allowing a "modal" component to close itself by way of invoking a method on the controller of the main view. That said, I still think it would too-tightly couple the modal controller to some arbitrary "parent" controller and implicitly require specific method names be defined in the parent, versus reading the component's bindings to figure out how to pass in a callback, then allowing the parent controller to pass an arbitrary method into the modal.

# ? Nov 16, 2016 03:32

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

IAmKale posted:

What are your guys' thoughts on AngularJS 1.5's require component property for allowing children components to invokes methods on the parent controller? I'm a fan of keeping components isolated from each other and using bindings in component definitions to pass data from parent to child (and occasionally from child to parent via a two-way binding) because it's way more explicit and feels like it keeps components more modular. I can see how require would be convenient for doing things like allowing a "modal" component to close itself by way of invoking a method on the controller of the main view. That said, I still think it would too-tightly couple the modal controller to some arbitrary "parent" controller and implicitly require specific method names be defined in the parent, versus reading the component's bindings to figure out how to pass in a callback, then allowing the parent controller to pass an arbitrary method into the modal.

I don't like it, as you say, it tightly couples the components. IF you have a situation where coupling makes sense, say, a list component and then it's companion list-item component, I guess? However, I prefer to try to write components such that this would not be the case, so you COULD use the list-item elsewhere, outside a list. You can pass functions into components using the & binding, so you can specify a function that can be called by a child, without mandating the child know anything or depend on functionality of it's parent.

# ? Nov 16, 2016 04:12

Rocko Bonaparte: Mar 12, 2002; Every day is Friday!

Skandranon posted:

Are you sure you included the styles for angular-ui? Creating a modal IS basically making GBS threads out the HTML attached to the body or html element, but if it isn't styled, it won't look like anything remotely resembling a modal dialog box.

Also, feel free to PM me any questions about Angular, half my day job these days is answering questions about it.

Yeah I might but it looks like everybody is already publicly dogpiling you so I will just :getin:

.

According to their site, I need to include ui-bootstrap-csp.css, which I did. I can see that getting requested from Django without a 404. It also mentioned I need the stylesheets from Bootstrap. I personally didn't do anything special to try to get them. Is there a way to overtly tell that I'm short a stylesheet? I mean, beyond things just acting up like they are?

# ? Nov 16, 2016 04:18

piratepilates: Mar 28, 2004; So I will learn to live with it. Because I can live with it. I can live with it.

Rocko Bonaparte posted:

Yeah I might but it looks like everybody is already publicly dogpiling you so I will just .

According to their site, I need to include ui-bootstrap-csp.css, which I did. I can see that getting requested from Django without a 404. It also mentioned I need the stylesheets from Bootstrap. I personally didn't do anything special to try to get them. Is there a way to overtly tell that I'm short a stylesheet? I mean, beyond things just acting up like they are?

Open up the Chrome dev-tools and poke around the console and network tabs, you should see which requests are being fired and how they're failing.

I don't know why Django is requesting your css, unless you're seeing the logs of the site sending the requests to Django, in which case I don't know why your Django is failing to serve static files that should be there.

# ? Nov 16, 2016 04:45

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

Rocko Bonaparte posted:

Yeah I might but it looks like everybody is already publicly dogpiling you so I will just .

According to their site, I need to include ui-bootstrap-csp.css, which I did. I can see that getting requested from Django without a 404. It also mentioned I need the stylesheets from Bootstrap. I personally didn't do anything special to try to get them. Is there a way to overtly tell that I'm short a stylesheet? I mean, beyond things just acting up like they are?

Is the JS file you are using the tpls version? There are two files available, one which has the various templates bundled in it, and one which does not.

# ? Nov 16, 2016 06:49

Rocko Bonaparte: Mar 12, 2002; Every day is Friday!

I needed to include the base Bootstrap stylesheets. I worked immediately afterwards.

New thing. Is there a better way to present a list of items based on a property in each item's object in an array? I have this moon language in my template:

code:

                <td><div ng-repeat="license in $details_ctrl.descriptor.licenses">{{license.short_name}}{{$last ? '' : ', '}}</div></td>

I was trying to write a filter:

code:

                <td>$details_ctrl.descriptor.licenses | joinfields:short_name</div></td>

But filters cannot take raw JavaScript like that; my parameter is just undefined. I don't want the controller to distort this data since there are some IDs in the JSON data that I want to possible use as a springboard to other views in the application that this template needs to pass along.

Edit: Aw hell, the ng-repeat doesn't even work!

Rocko Bonaparte fucked around with this message at 19:36 on Nov 17, 2016

# ? Nov 17, 2016 19:23

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

Rocko Bonaparte posted:

I needed to include the base Bootstrap stylesheets. I worked immediately afterwards.

New thing. Is there a better way to present a list of items based on a property in each item's object in an array? I have this moon language in my template:
code:
                <td><div ng-repeat="license in $details_ctrl.descriptor.licenses">{{license.short_name}}{{$last ? '' : ', '}}</div></td>
I was trying to write a filter:
code:
                <td>$details_ctrl.descriptor.licenses | joinfields:short_name</div></td>
But filters cannot take raw JavaScript like that; my parameter is just undefined. I don't want the controller to distort this data since there are some IDs in the JSON data that I want to possible use as a springboard to other views in the application that this template needs to pass along.

Edit: Aw hell, the ng-repeat doesn't even work!

I'm not a fan of Angular filters, they usually end up causing unnecessary/slow digests and often make things more complex, not less. I don't see a problem with your original ng-repeat solution, it is as simple as I think it can be.

# ? Nov 17, 2016 20:03

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

What's a solid place for practical Javascript exercises? I'm reading from a textbook which is great, but I'm not really getting any hands-on experience that I need.

# ? Nov 18, 2016 23:45

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

Grump posted:

What's a solid place for practical Javascript exercises? I'm reading from a textbook which is great, but I'm not really getting any hands-on experience that I need.

Codecademy is a decent place to start, especially if you are new and don't want to deal with figuring out tooling.

# ? Nov 18, 2016 23:52

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

Grump posted:

What's a solid place for practical Javascript exercises? I'm reading from a textbook which is great, but I'm not really getting any hands-on experience that I need.

Something like https://www.codewars.com/ might be useful for you.

# ? Nov 20, 2016 03:33

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

COOL CORN posted:

Something like https://www.codewars.com/ might be useful for you.

I might be a little too inexperienced for some of these assignments, but this website is super cool

Skandranon posted:

Codecademy is a decent place to start, especially if you are new and don't want to deal with figuring out tooling.

Been using this the past couple days. Looking forward to finishing the course.

# ? Nov 20, 2016 04:45

luchadornado: Oct 7, 2004; A boombox is not a toy!

PlaneGuy posted:

Out of curiosity, could you elaborate? Like, I haven't changed my gulp workflow since the thing came out so unless there's like a behind the scene thing I haven't noticed...?

Sorry, I took a long break from the web....

Gulp's biggest problem for me is that it's another tool that you need to learn, and it's a rather un-opinionated tool. Standardizing on one tool across multiple project hasn't been easy with Gulp, especially when you have to bring in dozens of micro-dependencies for large projects and they'd sometimes conflict or be difficult to duct tape together. We're currently struggling with the same problem that prompted the creation of Yarn - our CI builds and tests are kicked off automatically for PRs and is a major pain point for us because of how slow that is with multiple projects and 3 dozen devs submitting PRs for each feature/bug.

The lack of movement on 4.0 was kind of the straw that broke the camel's back for our team, but it's a minor complaint vs what I typed above.

Our answer has been to use Webpack 2 (with all its faults) for JS processing, and shell scripts for everything else. It's standardized across projects with no issues, it's easy for non-JS developers to figure out, and it's stable going forward.

When you have a single project, it is probably helpful to spend weeks getting your tooling just perfect for your needs by setting up Redux time machine stuff, Webpack hot loading, etc. When you have multiple projects, managing all that duct tape can take more time than delivering features. I'm paid to ship, not to have a sweet build process with bells and whistles.

And while it would be cool to use hot reloading, Redux time machine, etc. I never really found myself missing those things while developing in any other language. I'm a proponent of thinking things through before throwing code up and continually tweaking it until the results are good. Even when I am spiking, I don't feel like the lack of those things has slowed me down.

Gulp isn't a bad tool, but at my current and previous employer, it didn't scale in a maintainable way for our specific needs. To each their own.

edit: Catching up on the thread, re: documentation chat

Thermopyle posted:

That's probably the first time I've ever heard anyone call the webpack documentation "quite good".

Yeah, webpack is a good example of poor documentation. I used to think documentation was a lost cause until two things. The first was starting at my current employer, where everyone is expected to keep our internal wiki up to date and track any tribal knowledge. It's an amazing source of knowledge and really reduces the dependency on SMEs. The other thing is setting up Arch Linux on my Chromebook. Arch's wiki is hands-down some of the best documentation I've ever seen. It's also been easier writing C (I've never written C) and re-compiling my suckless.org tools than getting certain things working in the JS ecosystem, which says a lot about needless complexity.

luchadornado fucked around with this message at 19:41 on Nov 26, 2016

# ? Nov 26, 2016 17:00

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

I'm still a big dumb idiot using Webpack when I should be using Gulp, but..
Isn't there a way I can get Webpack to look in a single folder for all js/ts/es6 files? Right now I have:

code:

...
module.exports = {
    context: path.resolve('js'),
	entry: {
		foo: './foo.js',
		bar: './bar.js',
		baz: './baz.js',
		...
	},
	output: {
		path: 'builds/js/',
		filename: "[name]-gz.js"
	},
...

But I'd really rather not explicity include every file.
I tried replacing entry with:

code:

entry:  glob.sync("./"),

but then it either doesn't edit the js at all (wrong folder?) or complains that it can't find package.json because it looks in /js instead of root.

# ? Nov 30, 2016 15:47

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

The Merkinman posted:

complains that it can't find package.json because it looks in /js instead of root.

It's complaining about that due to your enclosing context telling it to look in resolved path 'js'.

(I'm the weirdo out on a limb who's been happily using jspm for the last year instead of the struggling with webpack, gulp and grunt.)

# ? Nov 30, 2016 16:02

Depressing Box: Jun 27, 2010; Half-price sideshow.

The Merkinman posted:

I'm still a big dumb idiot using Webpack when I should be using Gulp, but..
Isn't there a way I can get Webpack to look in a single folder for all js/ts/es6 files?

You need an object with a key for each file to output multiple entry points. I did something like this in an old project (so excuse the messy code):

JavaScript code:

var entry = {
    common: ['jquery', 'babel-polyfill']
};

// Loop through "entry" folder to get entry points
glob.sync('./js/entry/*.+(js|jsx)')
    .forEach(function(filePath) {
        var file = path.parse(filePath);
        if (!entry.hasOwnProperty(file.name)) {
            entry[file.name] = './' + path.relative(__dirname, filePath);
        }
    });

[...]

var webpackConfig = {
    entry: entry
}

# ? Nov 30, 2016 16:24

Kekekela: Oct 28, 2004

Front end survey results: https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

Glad to see my favorites doing well. Pretty comfortably in the mainstream except for my neanderthal css approach.

# ? Nov 30, 2016 19:37

luchadornado: Oct 7, 2004; A boombox is not a toy!

The Merkinman posted:

I'm still a big dumb idiot using Webpack when I should be using Gulp, but..

Nah, if you look at the results of that survey - people are dumping Grunt, but also Gulp, and using Webpack and npm/bash scripts for their builds. It's actually very nice and sane.

Side note: we're evaluating dumping Redux because of how cumbersome it is to use, especially with Typescript. Devs are getting free lunches to rewrite one of our existing apps with another state manager to get a feel for the state management landscape. Anyone here have any production experience with MobX?

# ? Dec 1, 2016 01:14

qntm: Jun 17, 2009

How am I supposed to manipulate the DOM from an Angular (1) component? I've seen that you can inject $element into the controller, but the controller isn't supposed to do DOM manipulation, or know anything about the DOM at all.

# ? Dec 1, 2016 11:49

zorch: Nov 28, 2006

edit: nevermind

# ? Dec 1, 2016 17:25

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

qntm posted:

How am I supposed to manipulate the DOM from an Angular (1) component? I've seen that you can inject $element into the controller, but the controller isn't supposed to do DOM manipulation, or know anything about the DOM at all.

There are two (good) ways... One would be to create a pure Directive with a Link function that does your DOM manipulation. This can be used alongside components. However, if it makes sense to be doing your DOM manipulation inside your component... it's not the end of the world to use $element in a component.

# ? Dec 1, 2016 17:34

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

qntm posted:

How am I supposed to manipulate the DOM from an Angular (1) component? I've seen that you can inject $element into the controller, but the controller isn't supposed to do DOM manipulation, or know anything about the DOM at all.

It's a hassle for a reason as you should probably have your DOM manipulation/view as a dependency on your state rather than doing direct manipulation via controllers. But depends on your case.

# ? Dec 1, 2016 18:41

qntm: Jun 17, 2009

In my case my component contains an external, non-Angular object which I need to configure and set event listeners on, a Code Mirror instance. We're trying to use components rather than directives because we're expecting to move to Angular 2 soon.

# ? Dec 1, 2016 18:45

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

qntm posted:

In my case my component contains an external, non-Angular object which I need to configure and set event listeners on, a Code Mirror instance. We're trying to use components rather than directives because we're expecting to move to Angular 2 soon.

In this case, I would first use $element and $onInit. Once that's working fine, I would consider doing a custom directive aimed at doing Angular bindings for CodeMirror, with the ultimate objective to be able to use in multiple components wherever you are using CodeMirror. Remember, things like ng-click are just Angular provided directives which do simple DOM binding to onclick. There's no reason you can't create similar ones.

# ? Dec 1, 2016 19:09

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

ynohtna posted:

It's complaining about that due to your enclosing context telling it to look in resolved path 'js'.

(I'm the weirdo out on a limb who's been happily using jspm for the last year instead of the struggling with webpack, gulp and grunt.)

But why does it not look in that folder when the js files are explictly defined even thought the context is unchanged?

Depressing Box posted:

You need an object with a key for each file to output multiple entry points. I did something like this in an old project (so excuse the messy code):

I think this is kinda working but it's returning ./js\ instead of ./js/

code:

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./js\foo.js in c:\working\path\here\js

does that for all the js files in that folder

# ? Dec 2, 2016 16:54

Depressing Box: Jun 27, 2010; Half-price sideshow.

The Merkinman posted:

I think this is kinda working but it's returning ./js\ instead of ./js/
code:
ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./js\foo.js in c:\working\path\here\js
does that for all the js files in that folder

Hmm, that seems like it might be an issue with Windows paths vs. POSIX paths. Let's try leaning on Node's path library a little more:

JavaScript code:

const glob = require('glob');
const path = require('path');

const entry = glob.sync(path.join(__dirname, 'src', 'entry', '*.js'))
    .reduce(function(entry, filePath) {
        const file = path.parse(filePath);
        entry[file.name] = path.resolve(filePath);
        return entry;
    }, {});

module.exports = {
    entry: entry,
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    }
};

And here's a quick test implementation.

# ? Dec 4, 2016 07:36

an skeleton: Apr 23, 2012; scowls @ u

Anyone have a recommendation for a good (front-end) lightbox/image carousel-y type library? Slick wasn't quite cutting it for us in terms of responsiveness. Just need to be able to cycle through a list of images and look good on mobile or desktop.

# ? Dec 5, 2016 23:08

Depressing Box: Jun 27, 2010; Half-price sideshow.

an skeleton posted:

Anyone have a recommendation for a good (front-end) lightbox/image carousel-y type library? Slick wasn't quite cutting it for us in terms of responsiveness. Just need to be able to cycle through a list of images and look good on mobile or desktop.

Flickity has worked well the few times I've needed carousels.

# ? Dec 6, 2016 03:31

Plavski: Feb 1, 2006; I could be a revolutionary

I used jcarousel ( http://sorgalla.com/jcarousel/ ) in my last project. Worked very well for what I needed.

I've also used royalslider before, which is a pretty feature heavy slider so could be good for complicated stuff.

# ? Dec 6, 2016 08:59

huhu: Feb 24, 2006

code:

export class Hero {
	id: number;
	name: string;
}

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>
			 <h2>{{hero.name}} details!</h2>	
  `,
})
export class AppComponent  {
	title = "Tour of Heroes";
	hero: Hero = {
		id: 1,
		name: "Windstorm"
	};
}

What ties @Component and AppComponent together? Like how does Angular know the two are linked?

# ? Dec 6, 2016 17:07

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

huhu posted:

code:

export class Hero {
	id: number;
	name: string;
}

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>
			 <h2>{{hero.name}} details!</h2>	
  `,
})
export class AppComponent  {
	title = "Tour of Heroes";
	hero: Hero = {
		id: 1,
		name: "Windstorm"
	};
}

What ties @Component and AppComponent together? Like how does Angular know the two are linked?

@Component is a Decorator, just does some syntactic sugar. You can write Angular2 via ES5 (http://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html). How Angular2 knows is that you bootstrapped your application with a component (your root component), and that contained dependencies, which Angular2 loads, which contain more, etc. Your entire application should be a complete tree of components.

# ? Dec 6, 2016 17:24

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

huhu posted:

code:

export class Hero {
	id: number;
	name: string;
}

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>
			 <h2>{{hero.name}} details!</h2>	
  `,
})
export class AppComponent  {
	title = "Tour of Heroes";
	hero: Hero = {
		id: 1,
		name: "Windstorm"
	};
}

What ties @Component and AppComponent together? Like how does Angular know the two are linked?

@Component is a class decorator which is essentially a function that gets called with AppComponent as a parameter, for Angular to do with as it pleases. Check out the decorator docs.

# ? Dec 6, 2016 17:25

huhu: Feb 24, 2006

Looking through those docs, it seems that a decorator would be applied to the class it precedes?

# ? Dec 6, 2016 18:10

Redmark: Dec 11, 2012; This one's for you, Morph.
-Evo 2013

Are decorators on-track for browser support any time soon? I have a hard time not getting confused with which features are in which ES version.

# ? Dec 6, 2016 18:14

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

huhu posted:

Looking through those docs, it seems that a decorator would be applied to the class it precedes?

Yes, exactly. They are similar to C# class attributes in that respect.

# ? Dec 6, 2016 19:18

Plavski: Feb 1, 2006; I could be a revolutionary

Decorators are really cool; it's really nice to be able to add all that metadata to your classes and methods.

# ? Dec 6, 2016 19:59

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

Plavski posted:

Decorators are really cool; it's really nice to be able to add all that metadata to your classes and methods.

There is one problem with them, in that they won't work with fat arrow syntax ( () => {} ).

# ? Dec 6, 2016 21:30

Flat Daddy: Dec 3, 2014; by Nyc_Tattoo

idgi. are you saying you cant do this?

code:

@decorate()
() => { };

because to get the same result, all you have to do is remove the @ sign and i guess wrap in parens, unless im misunderstanding something

code:

decorate() ( ()=>{} );

this doesnt seem like a very big problem

# ? Dec 7, 2016 01:33

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 19:18

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Redmark posted:

Are decorators on-track for browser support any time soon? I have a hard time not getting confused with which features are in which ES version.

They're currently at stage 2 in this process: https://tc39.github.io/process-document/

At stage 4, a feature will be included in the yearly version of the ECMAscript standard.

# ? Dec 7, 2016 02:56

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

«‹›235 »