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 »

geeves: Sep 16, 2004

quote:

learning a whole new technology stack while I'm still really only just learning front-end myself.

IMHO, learn it. Don't make excuses. It may seem overwhelming, but just take it a chunk at a time.

Make a simple DB and DB table. (Make a table with just an id, emailAddress and password)

Now make a form and learn how to submit data to the DB.

Now learn how to read from it and display it on the page.

Now learn how to secure that data (hash passwords, etc.)

Then take off from there.

The very basics might take you a day at tops if you really want to learn this stuff. And if you really want to learn this stuff you're going to be consuming this information in at enormous rates because you want to get better and you want to make something good.

Good work still takes time and understanding. So if it takes you 5 days instead of 2 to get what you want, big deal. What's the rush? Learn it and learn it well.

# ? Jun 2, 2018 01:12

Adbot: ADBOT LOVES YOU

# ? Jun 2, 2024 02:40

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

It's incredibly easy to do all of this with Rails or Django.

# ? Jun 2, 2018 04:02

Vincent Valentine: Feb 28, 2006; Murdertime

Guy who has been a front end developer at my company for over two years(which is longer than me) just informed me today that he feels uncomfortable working with our new in-development app because he has never worked on a back end before at all. It's a node/express back end that is not very complicated yet, and he's a JavaScript dev.

I felt like this was an extremely timely anecdote for reiterating the earlier point to just learn it. In fairness his job is front end and he does it well so I can't hold this against him, but I'm still equal parts surprised and bitter.

# ? Jun 2, 2018 07:17

GeorgieMordor: Jan 23, 2015

I'm porting over a "flat" Vue app I had been messing with to a webpack powered one and I am learning more how much I hate webpack so goddamned much.

The flat version was just a big ugly Vue JS file filling in a massive index.html. It used no components, it was unwieldy, but it ran. I was using HowlerJS to play some audio, and it worked great.

When I try to do this within a .vue component file in the new project I can load Howler as a module though now it cannot find the .wav files. Requests for .wav files are answered with a response that serves the site's main HTML.

I've tried referencing them to the static in my Howler declarations many different ways, and poked through the million config files webpack but cannot find out why a file in the static folder cannot get found.

Example of my folder structure:

/
-/src
--/components
--/router
--/static
---/audio
----/snd_click1.wav
--App.vue <- where the declaration to the .wav file is
--main.js

And an example of said delcaration from that .vue files <script> block below. The current path is just one of many I've tried to get to assets.

code:

this.sounds.grow = new Howl({
    src: ['./static/audio/snd_grow1.wav'],
    preload: true
})

What am I missing? Do I need to config something specifically to serve .wav files?

UPDATE Found there was a *different* /static folder on the highest level of the webpack app, and that's where assets needed to be. I'm glad it's working but I do not understand this pattern -- I was expecting that the only relevant files to the site (especially assets) would be kept within the /src of the working files, yet here there are saved on the same level as config, build scripts and node modules. Hmmm.

GeorgieMordor fucked around with this message at 19:11 on Jun 2, 2018

# ? Jun 2, 2018 18:37

HaB: Jan 5, 2001; What are the odds?

GeorgieMordor posted:

I'm porting over a "flat" Vue app I had been messing with to a webpack powered one and I am learning more how much I hate webpack so goddamned much.

The flat version was just a big ugly Vue JS file filling in a massive index.html. It used no components, it was unwieldy, but it ran. I was using HowlerJS to play some audio, and it worked great.

When I try to do this within a .vue component file in the new project I can load Howler as a module though now it cannot find the .wav files. Requests for .wav files are answered with a response that serves the site's main HTML.

I've tried referencing them to the static in my Howler declarations many different ways, and poked through the million config files webpack but cannot find out why a file in the static folder cannot get found.

Example of my folder structure:

/
-/src
--/components
--/router
--/static
---/audio
----/snd_click1.wav
--App.vue <- where the declaration to the .wav file is
--main.js

And an example of said delcaration from that .vue files <script> block below. The current path is just one of many I've tried to get to assets.
code:
this.sounds.grow = new Howl({
    src: ['./static/audio/snd_grow1.wav'],
    preload: true
})
What am I missing? Do I need to config something specifically to serve .wav files?

UPDATE Found there was a *different* /static folder on the highest level of the webpack app, and that's where assets needed to be. I'm glad it's working but I do not understand this pattern -- I was expecting that the only relevant files to the site (especially assets) would be kept within the /src of the working files, yet here there are saved on the same level as config, build scripts and node modules. Hmmm.

As far as I know, no path inside of /src should be referenced statically from your app, because that folder gets compiled into whatever your output folder is. (/dist by default, iirc).

So since in the final app /src doesn't exist, webpack is expecting static paths to be referenced at the top-level, because that's where they will be in the built version.

# ? Jun 2, 2018 22:49

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Yeah - any path being referenced from your javascript that isn't a reference to something being bundled should be written as if it was from the index.html, because that's where the browser will be looking for it.

# ? Jun 3, 2018 14:26

GeorgieMordor: Jan 23, 2015

HaB posted:

As far as I know, no path inside of /src should be referenced statically from your app, because that folder gets compiled into whatever your output folder is. (/dist by default, iirc).

So since in the final app /src doesn't exist, webpack is expecting static paths to be referenced at the top-level, because that's where they will be in the built version.

Chenghiz posted:

Yeah - any path being referenced from your javascript that isn't a reference to something being bundled should be written as if it was from the index.html, because that's where the browser will be looking for it.

Ah, ok. I understand a lot better now, thanks! I have the craziest time wrapping my head around the bundling and virtualization between file paths between dev and prod with webpack.

# ? Jun 4, 2018 12:48

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

Cross-posting from the JavaScript thread because this thread seems to get more traffic

------

JavaScript code:

export interface State {
  foo: string;
  bar: number
}
class MyComponent extends React.Component<Props, State> {
  state: State = {
    foo: 'hello',
    bar: 3,
  }

  // ensure we're only allowed to update state that exists in this component
  updateState = (key: keyof Partial<State>, value: any) => {
    this.setState({ [key]: value });
  }

  render(){
    <SomeOtherComponent
      updateParentState={this.updateState}
    />
  }
}

-----------------------------------

import {State as ParentState} from './MyComponent';

interface Props {
  updateState: (key: keyof Partial<ParentState>, value: any) => void
}
const SomeOtherComponent = (props) => {
  return (
    <Button 
      // the below should give an error because it's not part of
      // the State types for the parent component
      // ...but it's not????
      onClick={() => props.updateState('nonsense', 1000)}
    />
  )
}

I have a newbie TypeScript/React question. How come the onClick for SomeOtherComponent isn�t yelling at me? To preface, I know this is a bad programming pattern, but I want pass down an update state function, so that my child component can update the parent�s state, but want to make it safe so that the only state that can be updated is state keys that already exist.

How would I go about fixing the above?

# ? Jun 6, 2018 04:36

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

I figured it out

# ? Jun 6, 2018 18:35

The Fool: Oct 16, 2003

Don't be DenverCoder9

# ? Jun 6, 2018 18:39

Vincent Valentine: Feb 28, 2006; Murdertime

For the record, that's not only NOT a bad programming pattern, it's an officially endorsed method of controlling state present as an example in the react docs.

I mention this because I also thought it was a lovely way of doing it, and when my code broke I looked it up and the stack overflow post that answered it said they also felt like it was a lovely pattern. The response linked to the react docs where exactly that is done.

# ? Jun 6, 2018 18:50

huhu: Feb 24, 2006

The Fool posted:

Don't be DenverCoder9

Edit: fixed it myself.

# ? Jun 6, 2018 18:57

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

The issue was that I had this in my State interface

JavaScript code:

[index: string]: any;

which meant that when I was using the keyof State, it was being typed as a string rather than the keys as string literals.

I just got rid of that key value pair from my State interface. Legacy code ya know :shrug:

Vincent Valentine posted:

For the record, that's not only NOT a bad programming pattern, it's an officially endorsed method of controlling state present as an example in the react docs.

I mention this because I also thought it was a lovely way of doing it, and when my code broke I looked it up and the stack overflow post that answered it said they also felt like it was a lovely pattern. The response linked to the react docs where exactly that is done.

Brb telling my team leads this exact thing

E: can you link me to this?

# ? Jun 6, 2018 19:06

Vincent Valentine: Feb 28, 2006; Murdertime

https://reactjs.org/docs/lifting-state-up.html

The reason it's a good code pattern makes sense once it's explained. The official docs do a better job than I can, but the gist is that passing state down as props means that you can store all State in a single parent component as a single source of truth. Then when you change state on the parent, state flows down to all relevant children causing appropriate rerendering where necessary, without a component needing to rely on perhaps multiple components letting it know when to rerender.

When I was fairly new I thought it was a bad idea because I thought a components state should be its own self contained concern, a feeling shared by apparently many others. This is because as fairly new devs we had not experienced complicated components, state and code in general, where this kind of top down flow not only makes sense, it's completely necessary.

# ? Jun 6, 2018 19:33

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

Ooooh i was talking more to the fact that passing a function to a child that takes the state key as an argument to update the parent component�s state might not be a good paradigm.

In my example, i�m passing a updateFormState function that takes a key value pair (what state to update and the new value). Which means i�m defining which state i want to update in the child for the parent....if that makes sense. That is what seems a little wonky to me.

# ? Jun 6, 2018 19:39

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

Grump posted:

Ooooh i was talking more to the fact that passing a function to a child that takes the state key as an argument to update the parent component�s state might not be a good paradigm.

In my example, i�m passing a updateFormState function that takes a key value pair (what state to update and the new value). Which means i�m defining which state i want to update in the child for the parent....if that makes sense. That is what seems a little wonky to me.

Yes, that is wonky. You should expose functions that manipulate state in a very explicit way. If you need some amorphous operation, use Object.assign (or object spread ES6 syntax):

JavaScript code:

class Main extends React.Component {

    state = {dog: {id:'dog', count: 1}, cat: {id:'cat', count: 2}}

    mergeState = (newState) => {this.setState(Object.assign({}, this.state, newState))}

    render() {
        return(
            <div>
                <Child animal={this.state.dog} mergeState={this.mergeState}/>
                <Child animal={this.state.cat} mergeState={this.mergeState}/>
            </div>
        )
    }
}

const Child = (props) => {
    return (
        <div>
            <span>{props.animal.id}: {props.animal.count}</span>
            <button onClick={() => {props.animal.count++;  props.mergeState(props.animal)}}>Increment {props.animal.id}</button>
            <button onClick={() => {props.animal.count--;  props.mergeState(props.animal)}}>Decrement {props.animal.id}</button>
        </div>
    )
}

https://codesandbox.io/s/ox3qv7vql6

Not a perfect example because I'd probably write separate increment and decrement functions that explicitly do what I want to a given part of state rather than that generalized one, but you probably get the general jist.

Ruggan fucked around with this message at 20:39 on Jun 6, 2018

# ? Jun 6, 2018 20:36

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

And in your example, you probably do want to write targeted functions for the pieces of state that could update.

Your child components shouldn't need to be aware of the structure of parent component state. I think that's why what you describe is an anti-pattern.

# ? Jun 6, 2018 20:42

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

Ruggan posted:

And in your example, you probably do want to write targeted functions for the pieces of state that could update.

Your child components shouldn't need to be aware of the structure of parent component state. I think that's why what you describe is an anti-pattern.

See, that�s exactly what I was struggling with. What if I need like 10 helper functions to update 10 pieces of state? That component is gonna get really big really quickly, no?

# ? Jun 7, 2018 00:16

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

Grump posted:

See, that�s exactly what I was struggling with. What if I need like 10 helper functions to update 10 pieces of state? That component is gonna get really big really quickly, no?

If you�re able to make it generic like this, do it:

JavaScript code:

function setter(prop, val) {
    this.setState({ [prop]: val });
}

//
setFoo = setter.bind(this, 'foo')
setBar = setter.bind(this, 'bar')
setBaz = setter.bind(this, 'baz')

All in the parent, then pass the setter functions to the children that need them.

Does that work for your purposes?

# ? Jun 7, 2018 02:53

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

that might just do the trick. Thanks!

# ? Jun 7, 2018 03:13

geeves: Sep 16, 2004

I thought this was interesting. Nearly every complaint I have had about Node (and by extension NPM) since its introduction is mentioned in this talk from Dahl. The one thing I disagree with is package.json - package.json is just like pom.xml or build.gradle it lists out everything that is in the project including license, authors, etc. But it's interesting that he wants to go the Go route for imports. The downfall I see for that is always having to be online to build then.

He thinks it's impossible to move to a centralized NODE_PATH so that you're machine only has 1 node_modules semantically laid out (perhaps in ~/.node_modules like ~/.m2 or ~/.gradle in java land). That's a shame because all of files in all of my node_modules on my machine is 20 gigs. 20 loving gigs of bullshit javascript projects like "is-odd". My .m2 / .gradle by comparison is 3 gigs.

If NPM and Yarn would move to a central node_modules, babel, webpack, etc. I'm sure would be on board for future versions.

https://www.youtube.com/watch?v=M3BM9TB-8yA

geeves fucked around with this message at 03:44 on Jun 7, 2018

# ? Jun 7, 2018 03:41

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

geeves posted:

I thought this was interesting. Nearly every complaint I have had about Node (and by extension NPM) since its introduction is mentioned in this talk from Dahl. The one thing I disagree with is package.json - package.json is just like pom.xml or build.gradle it lists out everything that is in the project including license, authors, etc. But it's interesting that he wants to go the Go route for imports. The downfall I see for that is always having to be online to build then.

He thinks it's impossible to move to a centralized NODE_PATH so that you're machine only has 1 node_modules semantically laid out (perhaps in ~/.node_modules like ~/.m2 or ~/.gradle in java land). That's a shame because all of files in all of my node_modules on my machine is 20 gigs. 20 loving gigs of bullshit javascript projects like "is-odd". My .m2 / .gradle by comparison is 3 gigs.

If NPM and Yarn would move to a central node_modules, babel, webpack, etc. I'm sure would be on board for future versions.

https://www.youtube.com/watch?v=M3BM9TB-8yA

Yeah I have something like 2GB across just a handful of projects, that's pretty dumb. Not sure why you couldn't have a central folder... yeah yeah versioning across projects, who cares - just keep a distinct list of project-version combos.

# ? Jun 7, 2018 06:49

huhu: Feb 24, 2006

How do you guys manage state with pagination? for example, say you have a food website and you browse recipes for pizza. The store would only be full of pizza recipes. When you go back to view all recipes, what would you do? My thought as I'm writing this would be when the search result changes, emptying the store of recipes and performing a new request to update the contents of the list of recipes in the store.

# ? Jun 7, 2018 18:46

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

huhu posted:

How do you guys manage state with pagination? for example, say you have a food website and you browse recipes for pizza. The store would only be full of pizza recipes. When you go back to view all recipes, what would you do? My thought as I'm writing this would be when the search result changes, emptying the store of recipes and performing a new request to update the contents of the list of recipes in the store.

That depends greatly on a few factors:

1. Are you getting ALL recipes at once, and paginating on the client? (I assume not, but you don't specify)
2. Are you getting back pages from the server per category ('all' being one of them) and displaying them as pages to the user or as "endless scroll"
3. How much data is there in the results per page

I'd probably have a recipes key at the top level, then under that have a key for each category (again, with 'all' being one) and cache the results and data you'd need for each. If you have huge volumes of data, then you can purge as needed, probably keeping the first page for each one around for a snappy user experience.

So a made up example would be:

JavaScript code:

state = {
  recipes: {
    all: {
      perPage: 20,
      currentPage: 3,
      nextPageURL: 'something',
      recipes: [1, 4, 231, 5341, 7, ...],
      recipiesById: {
        1: { name: "snack cake", ...},
        ...
      }
    },
    pizza: {
      perPage: 20,
      ...
    },
  otherState: 'blah',
  ...
}

# ? Jun 7, 2018 19:08

huhu: Feb 24, 2006

Lumpy posted:

That depends greatly on a few factors:

1. Are you getting ALL recipes at once, and paginating on the client? (I assume not, but you don't specify)
2. Are you getting back pages from the server per category ('all' being one of them) and displaying them as pages to the user or as "endless scroll"
3. How much data is there in the results per page

I'd probably have a recipes key at the top level, then under that have a key for each category (again, with 'all' being one) and cache the results and data you'd need for each. If you have huge volumes of data, then you can purge as needed, probably keeping the first page for each one around for a snappy user experience.

So a made up example would be:
JavaScript code:
state = {
  recipes: {
    all: {
      perPage: 20,
      currentPage: 3,
      nextPageURL: 'something',
      recipes: [1, 4, 231, 5341, 7, ...],
      recipiesById: {
        1: { name: "snack cake", ...},
        ...
      }
    },
    pizza: {
      perPage: 20,
      ...
    },
  otherState: 'blah',
  ...
}

The way you structured the store looks like exactly what I need. Thanks!

# ? Jun 7, 2018 19:31

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 here have experience reading/writing URL parameters with Angular 6?
I tried following some Googling but then I just end up with

code:

Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?)

app.component.ts

code:

import { ActivatedRoute } from '@angular/router';
....
constructor( private route: ActivatedRoute) {
    console.log('Called Constructor');
    this.route.queryParams.subscribe(params => {
        this.param1 = params['param1'];
        this.param2 = params['param2'];
    });
   }

app.module.ts

code:

...
import { ActivatedRoute } from '@angular/router';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [ActivatedRoute],
  bootstrap: [AppComponent]
})
export class AppModule { }

# ? Jun 8, 2018 19:50

my bony fealty: Oct 1, 2008

One of our sites at work is a static thing that's currently done in AngularJS and today I started rebuilding it with Gatsby. It has been a joy already, Gatsby and Netlify are awesome together.

# ? Jun 9, 2018 03:23

MrMoo: Sep 14, 2000

Has anyone worked with inline cross-domain login mechanisms? It seems to need the wonderful world of MessagePort which isn't too popular. I've prototyped two implementations and it seems to work, albeit slightly cumbersome.

I'm trying to add a login page to the steaming 💩 that is Tizen TV. Apps on Tizen run on a file:// URL so you're not going to have much fun with redirects, and forget popups. Google recommends authenticating with a separate mobile device, because hey we need things to be more complicated, and confuse the hell out of everyone.

# ? Jun 9, 2018 04:22

LOOK I AM A TURTLE: May 22, 2003; "I'm actually a tortoise."; Grimey Drawer

The Merkinman posted:

Anyone here have experience reading/writing URL parameters with Angular 6?
I tried following some Googling but then I just end up with

code:

Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?)

app.component.ts

code:

import { ActivatedRoute } from '@angular/router';
....
constructor( private route: ActivatedRoute) {
    console.log('Called Constructor');
    this.route.queryParams.subscribe(params => {
        this.param1 = params['param1'];
        this.param2 = params['param2'];
    });
   }

app.module.ts

code:

...
import { ActivatedRoute } from '@angular/router';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [ActivatedRoute],
  bootstrap: [AppComponent]
})
export class AppModule { }

You need to add RouterModule to your imports. Adding ActivatedRoute to providers won't do much on its own because it depends on a bunch of other services, which is what the question marks are telling you about. Those error message could really be better.

If your app has any complexity to it at all you'll probably want to have different routes for different components, so look into https://angular.io/guide/router.

# ? Jun 9, 2018 16:06

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

MrMoo posted:

Has anyone worked with inline cross-domain login mechanisms? It seems to need the wonderful world of MessagePort which isn't too popular. I've prototyped two implementations and it seems to work, albeit slightly cumbersome.

callback version

Promise version

I'm trying to add a login page to the steaming 💩 that is Tizen TV. Apps on Tizen run on a file:// URL so you're not going to have much fun with redirects, and forget popups. Google recommends authenticating with a separate mobile device, because hey we need things to be more complicated, and confuse the hell out of everyone.

Everything about this post makes me lol and cry a little bit too.

Not that anything is wrong with what you've said, it's just all the poo poo you've got to deal with because of Tizen and the way this works.

# ? Jun 9, 2018 17:36

MrMoo: Sep 14, 2000

Also consider that this brand new TV that is a 2016 model has browser software equivalent to Safari 6 from 2012. Thankfully you can throw polyfills and Babel at it to cover most of the warts. The biggest issue has been that it doesn't support setting multiple cookies in one response header, and I guess no one has noticed.

Some amazingly dumb design though, like you can launch a Chrome developer tools session but you cannot catch the console log of page startup. So, yes, setup a 20s setTimeout to delay the page from starting to execute. They did add a "deviceready" event to Tizen 3 but as Samsung is a hardware company only bug fixes get applied to any released software, you will never see a version bump.

Surprisingly there is a Samsung TV Bounty program, but if Google are pushing out fixes every two weeks how does Samsung think they can get away with a browser on new hardware that is 6 years old?

:lol:

look how broken that site is in pretty much anything:

MrMoo fucked around with this message at 03:51 on Jun 10, 2018

# ? Jun 10, 2018 03:41

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

LOOK I AM A TURTLE posted:

You need to add RouterModule to your imports. Adding ActivatedRoute to providers won't do much on its own because it depends on a bunch of other services, which is what the question marks are telling you about. Those error message could really be better.

If your app has any complexity to it at all you'll probably want to have different routes for different components, so look into https://angular.io/guide/router.

hmm I updated my app.module.ts to have:

code:

...
import { RouterModule, ActivatedRoute } from '@angular/router';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule
  ],
  providers: [ActivatedRoute],
  bootstrap: [AppComponent]
})
export class AppModule { }

I also added it as an import to app.component.ts but it's unused. I don't see it used in the example either.

code:

...
import { Router, ActivatedRoute } from '@angular/router';
...
  constructor(private router: Router, private route: ActivatedRoute) {
...
}

# ? Jun 11, 2018 14:45

LOOK I AM A TURTLE: May 22, 2003; "I'm actually a tortoise."; Grimey Drawer

The Merkinman posted:

hmm I updated my app.module.ts to have:
code:
...
I also added it as an import to app.component.ts but it's unused. I don't see it used in the example either.
code:
...

You have to go through the guide step by step to get a fully working example. When you import RouterModule you have to provide a list of components that can be activated through a URL and pass them to the module with the forRoot method.

I've put together a StackBlitz with a basic setup: https://stackblitz.com/edit/angular-mzzuy4. Visit https://angular-mzzuy4.stackblitz.io/test;key1=value1;key2=value2 in the Stackblitz browser window to see the parameter handling in action.

The TLDR is this part:

code:

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: MainComponent },
  { path: 'test', component: TestComponent }
];

@NgModule({
  ...
  imports: [
    ...,
    RouterModule.forRoot(appRoutes),
    ...,
  ]
  ...
})
export class AppModule { }

In addition to that the component where you're injecting ActivatedRoute needs to be activated through the <router-outlet> tag for the ActivatedRoute to actually contain anything. The typical way to do this is to put the router-outlet in a shell component which also contains a navigation menu. If your app is so small that you don't need any sort of menu you can just have a single default route pointing to your component (like the { path: '', component: MainComponent } in the example above) and put <router-outlet> in your AppComponent without anything else.

But I'd like to ask you to take a step back. Why do you want to look at URL parameters? Do you want to show different things on the page depending on what's in the URL? Do you want to load two different components depending on what's in the URL, or do you just need the URL parameters as a list? Do you want to change the URL in response to user actions? Depending on the answers to these questions you may want to define different routes for different URL parameters and use the RouterLink directive, and you may not need to do any manual parsing of the URL at all. The router module is quite powerful. For instance it's perfectly possible to have two different routes that activate the same component, but with different initial parameters.

If you do need to look at arbitrary parameters from ActivatedRoute it should work fine as long as the component you're doing it is activated through router-link.

# ? Jun 11, 2018 16:55

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

LOOK I AM A TURTLE posted:

...

But I'd like to ask you to take a step back. Why do you want to look at URL parameters? Do you want to show different things on the page depending on what's in the URL? Do you want to load two different components depending on what's in the URL, or do you just need the URL parameters as a list? Do you want to change the URL in response to user actions? Depending on the answers to these questions you may want to define different routes for different URL parameters and use the RouterLink directive, and you may not need to do any manual parsing of the URL at all. The router module is quite powerful. For instance it's perfectly possible to have two different routes that activate the same component, but with different initial parameters.

If you do need to look at arbitrary parameters from ActivatedRoute it should work fine as long as the component you're doing it is activated through router-link.

Thanks for all this. I'll give it a deeper look in a moment.
I have a little tangential experience with router-oulet, I just didn't realize I needed it when only changing the URL params too.

I'm mirroring something else that exists, product listings, that doesn't use Angular. I would like to keep the same URL structure for ease of porting, SEO, etc.
The parameters are stuff like current page X, optional filters, optional sort method.

# ? Jun 11, 2018 17:07

Analytic Engine: May 18, 2009; not the analytical engine

Anyone here used both D3 and either React/Vue in an application? I've done it with Angular but nobody seems to have a consensus on the "right" way to handle D3 visualizations and virtual DOM

# ? Jun 12, 2018 00:23

MrMoo: Sep 14, 2000

Really? I just punt that stuff in a WebComponent.

New toy for the week, if you are using Canvas and custom fonts use Google's WebFont loader and something like this: (because font monitoring is rear end)

JavaScript code:

if(document.documentElement.classList.contains("wf-active")) {
        requestAnimationFrame(paint);
}
else
{       
        let observer = new MutationObserver(e => {
                observer.disconnect();
                setTimeout(() => {
                        this.set('observation_count', this.observation_count + 1);
                }, 1 * 1000);
        });
        observer.observe(document.documentElement, {
                attributes: true,
                attributeFilter: ['class'],
        });
}

I'm using observation_count to trigger repeated calls of the enclosing function.

Here's what using WebFont loader looks like, with the weird looking Font Variation Descriptor

JavaScript code:

WebFont.load({
	custom: {
		families: [
			  'Gotham:n7,n5,n3', 'Gotham Narrow:n5', 'Gotham XNarrow:n5'
			, 'Gotham Narrow Book:n4'
		]
	}
});

# ? Jun 12, 2018 01:49

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

Analytic Engine posted:

Anyone here used both D3 and either React/Vue in an application? I've done it with Angular but nobody seems to have a consensus on the "right" way to handle D3 visualizations and virtual DOM

I have used D3 with React quite a bit. There is no "right" way to do it.... but I use this semi-rule of thumb: For mostly static stuff, D3 handles calculations, and React renders. For stuff with a lot of animation / data changing, D3 renders to React Faux DOM

# ? Jun 12, 2018 19:14

Analytic Engine: May 18, 2009; not the analytical engine

Lumpy posted:

I have used D3 with React quite a bit. There is no "right" way to do it.... but I use this semi-rule of thumb: For mostly static stuff, D3 handles calculations, and React renders. For stuff with a lot of animation / data changing, D3 renders to React Faux DOM

Thanks, will check this out

# ? Jun 12, 2018 20:31

MrMoo: Sep 14, 2000

Making a webapp with no logs, no log server, and no window scrolling or pretty much any useful input device, what to do with fatal errors?

I stick an ErrorStackTrace into the QR code that you can easily look at with an iPhone.

I pinched the HTML/CSS from a Codepen, although that is a bit broken. QR Code from kjua.

😜

# ? Jun 14, 2018 02:14

Adbot: ADBOT LOVES YOU

# ? Jun 2, 2024 02:40

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Why are there no logs? How do you look at historical events?

# ? Jun 14, 2018 09:14

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

«‹›235 »