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 »

EVIL Gibson: Mar 23, 2001; Internet of Things is just someone else's computer that people can't help attaching cameras and door locks to!; Switchblade Switcharoo

Ape Fist posted:

I've been fiddling with MEAN, I do Angular 2 professionally but I wanted to extend that into the MEAN stack, and over the last couple of weeks I've really hammered down the creation of a pretty rudimentary MEAN application using Express & CosmosDB, Microsoft's forked MongoDB. So far it's pretty cool tbh. I'd also like to say that VSTS/Azure deployment is really loving nice and having it connect with Github to just do a build every time you do a commit it really nice.

Also, using MongoDB requires this youtube to be posted:

https://www.youtube.com/watch?v=b2F-DItXtZs

I always think of this when using MongoDB

I know I know it's Mungo but I keep thinking of this song each time I hear it's name

# ? Jun 25, 2018 20:51

Adbot: ADBOT LOVES YOU

# ? Jun 9, 2024 15:05

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

Also not gonna lie, Azure is the most nickel & dime poo poo ever.

# ? Jun 25, 2018 21:49

The Fool: Oct 16, 2003

Ape Fist posted:

Also not gonna lie, Azure is the most nickel & dime poo poo ever.

Using Azure Functions? That's cool, here have 1 million executions for $0.20. Oh, but you need a storage account too. And can I interest you in App Insights? Need a database? Can I interest you in Cosmos? How many RU's do you need? Your app starting to get some traffic? Here's the bandwidth pricing chart. Users complaining about performance? Let's setup a CDN.

# ? Jun 25, 2018 22:03

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Azure�s GitHub integration is nice until you want to integrate real CI tools into your development process. Then you�re stuck with azure cli basically, where they will randomly decide that they don�t need to support all of azure�s features, like function app slots, and deploys will just randomly fail for no apparent reason.

# ? Jun 26, 2018 15:07

Doh004: Apr 22, 2007; Mmmmm Donuts...

I finally forced myself to "launch" my GatsbyJS blog:

https://blog.bayphillips.com

The entire thing is free as it's hosted on Github Pages, uses Contentful as the CMS and uses CircleCI to deploy updates. This poo poo is pretty cool.

# ? Jun 26, 2018 15:23

smackfu: Jun 7, 2004

How do people deal with feature tests (using selenium) causing build times to creep up and up as more features are added? We could just take the feature tests out of the build but I bet that would cause them to break forever in about three commits.

# ? Jun 26, 2018 19:42

prom candy: Dec 16, 2005; Only I may dance

Doh004 posted:

I finally forced myself to "launch" my GatsbyJS blog:

https://blog.bayphillips.com

The entire thing is free as it's hosted on Github Pages, uses Contentful as the CMS and uses CircleCI to deploy updates. This poo poo is pretty cool.

Gatsby is great, I'm really looking forward to finding another project to do with it.

# ? Jun 26, 2018 23:58

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

smackfu posted:

How do people deal with feature tests (using selenium) causing build times to creep up and up as more features are added? We could just take the feature tests out of the build but I bet that would cause them to break forever in about three commits.

Eventually it will balloon to a point where its a house of cards and impedes development. Do you have "test/qa engineers"? That's a sign your tests *might* be getting out of control. Integration/smoke/acceptance tests, or really any long-running tests, should be isolated and run less frequently - perhaps as a daily build. They should be continually assessed for what value they provide in light of their downsides.

# ? Jun 27, 2018 00:17

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

smackfu posted:

How do people deal with feature tests (using selenium) causing build times to creep up and up as more features are added? We could just take the feature tests out of the build but I bet that would cause them to break forever in about three commits.

Use Grid to run multiple browsers at once or use nose to run each test in a separate process maybe?

# ? Jun 27, 2018 01:27

the talent deficit: Dec 20, 2003; self-deprecation is a very british trait, and problems can arise when the british attempt to do so with a foreign culture

smackfu posted:

How do people deal with feature tests (using selenium) causing build times to creep up and up as more features are added? We could just take the feature tests out of the build but I bet that would cause them to break forever in about three commits.

we don't run them in ci. just on deployment to staging

# ? Jun 27, 2018 03:41

abraham linksys: Sep 6, 2010

lotta places I've seen limit it so that feature tests only run on PRs into master. you gotta be careful with that stuff and make a coherent process, though.

once worked at a company where feature tests took ~40 minutes and were supposed to be manually run before you merged, and engineers were really bad about just... not... running them, or running them early while working on a feature but not running them on the finalized commit set. we did have it set up so that they ran automatically before deploy to staging on master, as part of our larger daily deploy process, but it loving suuuuuuuuuucked when that failed and the deploying engineer had to ping every engineer who had merged in new commits to figure out who broke it

# ? Jun 27, 2018 03:58

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

When you don't lint your code you're basically telling the next Developer that views that file that you don't actually like or give a poo poo about your job.

# ? Jun 27, 2018 11:34

Doh004: Apr 22, 2007; Mmmmm Donuts...

prom candy posted:

Gatsby is great, I'm really looking forward to finding another project to do with it.

I'm slowly trying to influence folks at work for us to start using it for marketing pages...

# ? Jun 27, 2018 12:19

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

Anyone else have an idea of why the back button doesn't work properly in my Angular App? Rather, it does update the URL, but not the content.

# ? Jun 27, 2018 13:39

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

Set the function it calls to return null; at the end of the body of the function.

# ? Jun 27, 2018 13:42

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

Doh004 posted:

I finally forced myself to "launch" my GatsbyJS blog:

https://blog.bayphillips.com

The entire thing is free as it's hosted on Github Pages, uses Contentful as the CMS and uses CircleCI to deploy updates. This poo poo is pretty cool.

So that UIkit framework you are using "just works" with React?

# ? Jun 27, 2018 15:46

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

So I'm developing this webApp using Angular, Express and Mongo.

I've got it so that when a user registers the first thing that happens is that we query the db for the "dbState" document which returns a single numerical value indicating what number of completed user accounts there is. So if I have 10 users then the dbState is at 10, etc. When the user completes the registration 3 documents are created which contain various important information tables. Login details, account details, and functional data. Each of these documents has a listId property which is the dbState + 1, so if the dbState is 10, you register, all of your documents are set to 11, and finally we update the dbState document to 11. If the user wants to delete their account we don't actually delete their document we just scramble their data and it becomes a dead document but the listId is preserved.

Anyway none of that is incredibly important but when the user logs in all I do is query the db based on a standard findOne express function using the email and password parameters which returns the listId which in turn triggers a series of queries to get the rest of the matching data. Once we've done this all of this data is stored in a Storage service which is modified by user input and then PUT on save etc. We don't actually place the user email and password into the Storage service, we just use the listId. We also time out the storage service so it self-destructs after a period of time if the user has idled for too long. User logouts also simply destroy the Storage service object and redirect them back to the login screen.

Ultimately I think this is an ok data structure save for one part: Getting the user data with a simple match query feels unsafe to me. Like if the user has anything on their machine which intercepts HTTP requests it'll easily snag the request and just read the dumb JSON object it passed in.

So does anyone know of a decent security measure to keep this stuff secret? Ideally within the NODE environment.

Ape Fist fucked around with this message at 23:46 on Jun 27, 2018

# ? Jun 27, 2018 23:44

Doh004: Apr 22, 2007; Mmmmm Donuts...

Lumpy posted:

So that UIkit framework you are using "just works" with React?

No issues so far! It's been interesting getting UIKit + React + Gatsby specific components working as I'll have to add some of the specific classes to various wrappers (particularly the gatsby-image), but it seems to work fine.

It took me a while to realize I had to pass in the UIKit specific html attributes as `data-uk-whatever` in React because it kept yelling at me. I thought the `data` part would break UIKit but it didn't.

# ? Jun 28, 2018 15:32

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

Ape Fist posted:

Set the function it calls to return null; at the end of the body of the function.

Is this in response to my question?

# ? Jun 28, 2018 17:05

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

The Merkinman posted:

Is this in response to my question?

Yeah.

# ? Jun 29, 2018 13:29

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

Ape Fist posted:

Yeah.

Uh, the built in function in Angular that happens when you click 'back'??

I think my issue (or at least a separate one) is that it's not reading the URL parameters correctly. Clicking something to go forward fakes it, it changes the content and changes the URL, but it's not changing the content because of teh URL, so when back happens it's not working? Also when it's first loading, if there are parameters in the URL it's not reading them. After unhelpful searches elsewhere, I'm using this queryParamMap thing, but that doesn't actually give you the key/values if any, no that'd make sense. Instead it gives you some garbage object with hundreds of things that make no sense and you have to put asnyc just to interpolate it. That's great for displaying, but acting upon it? nah, can't do that. maybe what I want isn't actually possible because it seems no one on the planet has needed to do it?

# ? Jun 29, 2018 16:01

my bony fealty: Oct 1, 2008

Doh004 posted:

I'm slowly trying to influence folks at work for us to start using it for marketing pages...

That's what I've been doing at my new job, well more so taking some of our older marketing sites that were built in AngularJS and rebuilding them in Gatsby. It has been a great experience. I'm the only dev on our team though so I get to use whatever tools I want (and get solely blamed when something breaks yay).

Netlify is my free host of choice, has CI built in once you link it to the repo. Works with Github and Gitlab and Bitbucket.

Anyone that can speak to Gatsby V2 vs V1? Is it worth moving to V2 or no real point right now?

# ? Jun 29, 2018 16:38

Doh004: Apr 22, 2007; Mmmmm Donuts...

my bony fealty posted:

That's what I've been doing at my new job, well more so taking some of our older marketing sites that were built in AngularJS and rebuilding them in Gatsby. It has been a great experience. I'm the only dev on our team though so I get to use whatever tools I want (and get solely blamed when something breaks yay).

Netlify is my free host of choice, has CI built in once you link it to the repo. Works with Github and Gitlab and Bitbucket.

Anyone that can speak to Gatsby V2 vs V1? Is it worth moving to V2 or no real point right now?

I moved over to v2 and it was fine and easy, but keep in mind it's for my stupid personal site and not used in any real production way. The upgrades to babel and webpack are cool and good, as well as making the layout a component is a smart move.

I'm not sure if I'm a fan of the introduction of StaticQuery, which allows you to hit GraphQL from within components instead of having to pass things down from props. I'm still grappling with this one because I've never used a static site generator, but the notion of requesting data from within individual components sounds like a really bad code smell to me. I could foresee that being a huge issue if you start relying on it for complex systems, but alas, we're dealing with static sites. :iiam:

# ? Jun 29, 2018 16:52

susan b buffering: Nov 14, 2016

The Merkinman posted:

Uh, the built in function in Angular that happens when you click 'back'??

I think my issue (or at least a separate one) is that it's not reading the URL parameters correctly. Clicking something to go forward fakes it, it changes the content and changes the URL, but it's not changing the content because of teh URL, so when back happens it's not working? Also when it's first loading, if there are parameters in the URL it's not reading them. After unhelpful searches elsewhere, I'm using this queryParamMap thing, but that doesn't actually give you the key/values if any, no that'd make sense. Instead it gives you some garbage object with hundreds of things that make no sense and you have to put asnyc just to interpolate it. That's great for displaying, but acting upon it? nah, can't do that. maybe what I want isn't actually possible because it seems no one on the planet has needed to do it?

Are you subscribing to the queryParamMap or using the snapshot method? If the route isn't changing but the query string is, you need to subscribe to it.
Here's an ngOnInit method for a radio station website I've been working on, hope it's helpful:

code:

ngOnInit() {
    const d = new Date();
    this.date = d.getFullYear().toString() + '-' + (d.getMonth() + 1).toString() + '-' +  d.getDate();
    this.paramSub = this.route.queryParams.subscribe(params => {
      if (params.hasOwnProperty('date')) {
        this.date = params['date'];
      }
      this.getPlaylist(this.date);
    });
  }

# ? Jun 29, 2018 18:50

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

skull mask mcgee posted:

Are you subscribing to the queryParamMap or using the snapshot method? If the route isn't changing but the query string is, you need to subscribe to it.
Here's an ngOnInit method for a radio station website I've been working on, hope it's helpful:
code:
ngOnInit() {
    const d = new Date();
    this.date = d.getFullYear().toString() + '-' + (d.getMonth() + 1).toString() + '-' +  d.getDate();
    this.paramSub = this.route.queryParams.subscribe(params => {
      if (params.hasOwnProperty('date')) {
        this.date = params['date'];
      }
      this.getPlaylist(this.date);
    });
  }

Well that uses queryParams you're supposed to use queryParamMap now because...reasons?

Though that does illustrate the trouble in getting an answer, by the time it's figured out it's deprecated and wrong but no one has documented the right way yet.

# ? Jun 29, 2018 20:03

susan b buffering: Nov 14, 2016

I guess I missed that. I refactored it using paramMap and it seems to work.

code:

ngOnInit() {
    const d = new Date();
    this.date = d.getFullYear().toString() + '-' + (d.getMonth() + 1).toString() + '-' +  d.getDate();
    this.paramSub = this.route.queryParamMap.subscribe(params => {
      if (params.get('date')) {
        this.date = params.get('date');
      }
      this.getPlaylist(this.date);
    });
  }

# ? Jun 29, 2018 20:42

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

skull mask mcgee posted:

I guess I missed that. I refactored it using paramMap and it seems to work.

code:

ngOnInit() {
    const d = new Date();
    this.date = d.getFullYear().toString() + '-' + (d.getMonth() + 1).toString() + '-' +  d.getDate();
    this.paramSub = this.route.queryParamMap.subscribe(params => {
      if (params.get('date')) {
        this.date = params.get('date');
      }
      this.getPlaylist(this.date);
    });
  }

Now the back button just instantly replaces the URL with the page the person was going back from...

I guess I'm going to just have to re-re-re-re-re-refactor this stuff again. Maybe I'll get it done before the release of Angular 20.

I guess it doesn't help that either I get distracted by other tasks I'm supposed to do, or if given enough solid time, disenfranchised that I can't get it to work after hours of nothing.

EDIT: I refreshed and it worked?
EDIT: Built again, making 0 changes and now not even the first page is correct??
:psyduck:

EDIT: Tried a different search term (the thing I'm using the query parameters for), no refreshing at all, and it worked again? :psypop:

The Merkinman fucked around with this message at 22:06 on Jun 29, 2018

# ? Jun 29, 2018 21:52

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

Integrating Passport.js into my MEAN application has been neither a fun, nor tidy experience. In fact it's taken like 3 days and cycling through 3 tutorials to get it working and all of them were lovely and badly explained. Passport likes to pretend its super easy and fun to integrate and in theory it's not that complex but gently caress it, gently caress it in the rear end.

# ? Jul 2, 2018 21:42

Vincent Valentine: Feb 28, 2006; Murdertime

Passport is super easy to get working with your app if you write hello world and then immediately implement passport afterwards. It's getting it working with existing tech that makes it difficult

# ? Jul 3, 2018 12:43

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

Vincent Valentine posted:

Passport is super easy to get working with your app if you write hello world and then immediately implement passport afterwards. It's getting it working with existing tech that makes it difficult

This I discovered. In future I'll be building it in at the ground level.

# ? Jul 3, 2018 14:35

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

Vincent Valentine posted:

[ insert JS Library here ] is super easy to get working with your app if you write hello world and then immediately implement [ insert JS Library here ] afterwards. It's getting it working with existing tech that makes it difficult

# ? Jul 3, 2018 17:17

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

That's why I advocate ditching VCS and each commit be a rewrite from scratch.

# ? Jul 3, 2018 18:15

aBagorn: Aug 26, 2004

Thermopyle posted:

That's why I advocate ditching VCS and each commit be a rewrite from scratch.

I endorse this

# ? Jul 3, 2018 18:46

reversefungi: Nov 27, 2003; Master of the high hat!

Ape Fist posted:

Integrating Passport.js into my MEAN application has been neither a fun, nor tidy experience. In fact it's taken like 3 days and cycling through 3 tutorials to get it working and all of them were lovely and badly explained. Passport likes to pretend its super easy and fun to integrate and in theory it's not that complex but gently caress it, gently caress it in the rear end.

This was easily the worst part of my entire bootcamp. We had to implement 6 different OAuth strategies using the different versions of passport.js for Twitter/Facebook/etc. and holy dear god was that painful. :pwn:

# ? Jul 3, 2018 20:07

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

The Dark Wind posted:

This was easily the worst part of my entire bootcamp. We had to implement 6 different OAuth strategies using the different versions of passport.js for Twitter/Facebook/etc. and holy dear god was that painful.

Thats sounds... absolutely loving horrible.

I haven't even loving bothered adding any kind of google or facebook integration I'm leaving it at e-mail and password and that's it.

This poo poo better be secure as gently caress given how much lovely effort I put into it.

# ? Jul 3, 2018 20:12

Vincent Valentine: Feb 28, 2006; Murdertime

Oauth owns extremely hard and you should jump on that train as fast as possible

# ? Jul 4, 2018 05:29

Tei: Feb 19, 2011; Can't post for 4 hours!

[dumb post removed]

Tei fucked around with this message at 10:48 on Jul 5, 2018

# ? Jul 4, 2018 10:34

duz: Jul 11, 2005; Come on Ilhan, lets go bag us a shitpost

Thermopyle posted:

That's why I advocate ditching VCS and each commit be a rewrite from scratch.

Keep up that attitude and you'll be running your own enterprise software firm in no time!

# ? Jul 4, 2018 19:39

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

Vincent Valentine posted:

Oauth owns extremely hard and you should jump on that train as fast as possible

Yeah I read some docs. I'll try it on my next personal project I guess.

# ? Jul 5, 2018 14:04

Adbot: ADBOT LOVES YOU

# ? Jun 9, 2024 15:05

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 so glad I just took a vacation. Though I would have gotten the same amount accomplished if I had tried to work that week anyway.

# ? Jul 9, 2018 21:50

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

«‹›235 »