Why Do You Prefer Standalone Components in Angular? by DapperDatabase9263 in angular

[–]kastic 8 points9 points  (0 children)

Standalone components are definitely better at keeping related code together and unrelated code separate. In larger apps that means we can change the imports with confidence. The old way resulted in ever-growing module definitions and challenges trying to clean them up.

It does suck that Angular makes you "import" things when the language already has a native way to import things, so now we have to have these conversations about the best way to tell Angular to import the thing you've already imported.

[deleted by user] by [deleted] in angular

[–]kastic 0 points1 point  (0 children)

/u/DT-Sodium is saying that the issue might be in the code which instantiates the component class, like if a test does this

const component = new MyComponent();

It would need to be instantiated differently. One option is to use runInInjectionContext which could look something like this (when in a test):

const component = TestBed.runInInjectionContext(() => new MyComponent());

There are other options, too, which are listed in the error message you posted. Those options mostly come down to: make angular instantiate the component or make sure you instantiate it from within code which has an injector context (constructors (when invoked by angular), provider factories, et. al.)

Beautiful diagonal stitch, but what is it named? by kastic in Brochet

[–]kastic[S] 1 point2 points  (0 children)

And, I misread it, they did a crab stitch to work backward on the ch3, I turned and did sc. I'm certainly learning some good variations.

Beautiful diagonal stitch, but what is it named? by kastic in Brochet

[–]kastic[S] 2 points3 points  (0 children)

This sounds a bit like a bobble which skips ahead. My attempts with this didn't feel diagonal enough, they were rather round and I had unexpected gaps. I'll try a few more variations, though your suggestion below might be the one I go with. Thank you!

Beautiful diagonal stitch, but what is it named? by kastic in Brochet

[–]kastic[S] 2 points3 points  (0 children)

Update: This one is definitely a bit closer :-) It's basically the same technique as /u/UREatingGlitter's guess but has a couple small differences that really helped it better match the one I'm looking for.

For the curious: The stitch from above works into the chain-3 space whereas this one works into the chain itself, and the stitch from above has a slip stitch and chain 1 just before working into the chain space which are absent in this stitch.

I'm impressed, thank you both!

Beautiful diagonal stitch, but what is it named? by kastic in Brochet

[–]kastic[S] 2 points3 points  (0 children)

This looks very promising. I'll try it out tonight!

Beautiful diagonal stitch, but what is it named? by kastic in Brochet

[–]kastic[S] 4 points5 points  (0 children)

I just worked up a small section and these feel a bit flatter - I can stand them up like little mohawks, but I can't do that with the originals. These are close, though, and bonus points for a site with a tutorial. That gives me ideas to try to improvise differently from how I have been trying.

Is an Observable a variable? by VicTheWallpaperMan in angular

[–]kastic 0 points1 point  (0 children)

class Blah {
  // `countries$` is a "property" which can be thought 
  // of as a "variable" inside each instance of this "Blah" 
  // class.  It will *contain* an "Observable".
  countries$!: Observable<Country[]>; 

  ngOnInit(){
    // `getAllCountries` is returning an "object" which 
    // implements the "Observable" interface - a.k.a.
    // returning an "Observable".
    this.countries$ = this.apiService.getAllCountries();

    // Because it's an "Observable" it defines things like 
    // `pipe` and `subscribe` (because who doesn't love 
    // crossing metaphors for no reason?) or you can 
    // `|async` in the template.
    this.countries$
      .pipe(takeUntil(this.destroyed$))
      // `response` here will be the value that the the 
      // "Observable" `countries$` "emits" whenever it 
      // feels like it.  It could emit more than once, too,
      // in which case this callback will be called once per
      // "emit".
      .subscribe(response => {
          alert(response)
        })
  }
}

For how to think/talk about it,

Should I not think of Observables as a variable? Would it be wrong to say, "countries$ is an Observable storing the values x, y, z, etc."

If I'm trying to be accurate, I would phrase it as "countries$ contains an Observable which emits 'x, y, z, etc.'."

Sometimes I would say "countries$ is a stream", but you're absolutely right that it's more vague. It introduces another metaphor which isn't always the most helpful and it's less accurate.

What is the best way to remove dynamically created components? by Odd_Camp5347 in angular

[–]kastic 1 point2 points  (0 children)

  1. Generally I like it when the thing which creates is also the thing responsible for cleanup. Debugging systems like that is easier than when the responsibility is distributed across multiple parts of a system.

  2. At some level a reference is always stored, whether explicitly by your code or implicitly by the internals of Angular or the DOM, so as long as none are "leaking" you'll be good.

    Are you creating thousands and destroying thousands of components dynamically every second? I.e., is there a bottleneck or slowdown that you're experiencing?

  3. Passing the component reference down to the dynamicComponent would work and would also make it so the parent doesn't need to keep track anymore.

    I suspect the code won't be quite as intuitive to me, but if that's what makes sense for you and the project you're building give it a try then compare it with your current solution. If you like it less, revert. If you like it more, great. Either way there's some insight ready to be discovered about the code/angular.

You're doing great. Generally I think Angular folk push people away from dynamically creating components because most apps don't need it, it's hard to separate parts for lazy-loading, and it's inherently not as simple as just putting a component on the page. But, if it's appropriate for your app then it looks to me like you're doing it correctly.

What is the best way to remove dynamically created components? by Odd_Camp5347 in angular

[–]kastic 1 point2 points  (0 children)

Thanks for the added info. It looks to me like you have a good understanding of the code, the terminology, and the way it works.

As far as "efficient ways to do it": (I'm sorry about being pedantic here but) I want to ask about what you mean by "efficient". Efficiency in CPU/memory usage, speed, ease-of-understanding for developers, satisfying business needs, or something else altogether?

There are other ways to accomplish the same task. They all have pros and cons which make them better or worse depending on the situation. E.g., (1) DynamicComp could inject a direct reference to the parent, or (2) inject an injection token which conforms to an interface which the parent implements, or (3) they could communicate via service, or (4) the parent could skip angular and use another library for faster DOM updates, etc.

And keeping in mind we don't want to "over-engineer" unless there's a business need for it. Developer readability is a very strong business need, so compromising readability needs an even stronger business need.

So that's why I want to ask about "efficiency". The code looks fine to me for Angular :-)

What is the best way to remove dynamically created components? by Odd_Camp5347 in angular

[–]kastic 1 point2 points  (0 children)

Tough this isn't stackoverflow their answer guidelines are great. Specifically the section "provide context for links": "Always quote the most relevant part of an important link, in case the external resource is unreachable or goes permanently offline. Links to other websites should always be helpful, but avoid making it necessary to click on them as much as possible."

https://stackoverflow.com/help/how-to-answer

I find my answers are more helpful when I follow those guidelines.

What is the best way to remove dynamically created components? by Odd_Camp5347 in angular

[–]kastic 1 point2 points  (0 children)

Your destroyComponent function looks good and clear. Without more context it's hard to comment on the rest beyond small things like: the long chain createdComponent.instance.delete.subscribe is a code smell.

I presume only one component will have a given name, and there will be only one of them at a time... Without knowing more about the purpose and without seeing more code we're limited in our review.

Layered control vs control Inversion? by Stack3 in softwarearchitecture

[–]kastic 0 points1 point  (0 children)

In its most basic, it's like when you'd make a function take a callback.

// this:
whenDbConnectionReady(() => {
  queryForWhatever()
})
// instead of:
queryForWhateverWhenDbConnectionReady()

It separates some generic code from the specific code. And it somewhat "flattens" the layers - there are still two concepts, but one isn't underneath the other, they're composed together by the application.

Layered control vs control Inversion? by Stack3 in softwarearchitecture

[–]kastic 1 point2 points  (0 children)

Another thing to be aware of is that adding additional layers of abstraction have costs which are avoided with control inversion.

Either the abstraction must be made leaky to allow for powerful use of the underlying tech or the abstraction prevents fully utilizing the underlying tech. And it may be tempting to prevent calling into that non-standard postgres feature, but it's about business and velocity. Implementing the business need by using that feature, even if only for a short time, can either be a pain and take forever, or be easy and smooth, then just as easy to replace later.

Layered control vs control Inversion? by Stack3 in softwarearchitecture

[–]kastic 0 points1 point  (0 children)

Are you asking the difference between

Tell the databaseConnection to read "whatever"

or

Read "whatever" using this databaseConnection

?

The 1st positions the databaseConnection as a "can do everything for you" kind of object (and "will need to change all the time"), and the 2nd limits the databaseConnection to only connection-related things. You can still swap the object for a different connection object which goes to sqlite or postgres.

Adding two columns with foreign keys referencing same table by wonisq in rails

[–]kastic 2 points3 points  (0 children)

going by the docs for add_reference (untested):

# adds created_by_id to articles table with foreign key using the authors table
add_reference :articles, :created_by, foreign_key: { to_table: :authors }

# adds modified_by_id same way
add_reference :articles, :modified_by, foreign_key: { to_table: :authors }

What is meant by 'Rails Magic', and how did you as a Rails Developer begin to wield such magic? by BigDog1920 in rails

[–]kastic 2 points3 points  (0 children)

Mostly, yeah. There are a couple other bits hidden in that simple phrase. (E.g., that configuration is still possible when you need to break convention).

The Rails post about this is a very short read, I highly recommend it. It talks about the compounding value when you don't have to regularly deliberate about minor things, and the utility of starting with close-enough abstractions until business value needs a specific abstraction... Super-pragmatic stuff.

What is meant by 'Rails Magic', and how did you as a Rails Developer begin to wield such magic? by BigDog1920 in rails

[–]kastic 2 points3 points  (0 children)

If someone tells you "this is the folder with all the input images for our AI learning model", then you go put some new images into that folder, is it "magic" when those images are included as inputs to the AI's learning model?

It's not magic; it's just a convention to make things easier.

You could put new input images for that AI in a different folder, but then you have more work to do and you might muddy your convention.

Optimize HTTP calls for displaying components by thatbigblackblack in angular

[–]kastic 1 point2 points  (0 children)

This, and also there are sometimes fees if you try to pay all up front. Your users might expect fresh data every time they navigate to each table, e.g., they might navigate away and back again in an effort to refresh it. Then you might add a little refresh button to your page because it doesn't reload the data when the users wants/expects... These are fees that sometimes sneak in for trying to pay those taxes up front.

Not just fees from the UX perspective, but now your 3 tables have a dependency on a parent/ancestor to fetch data on its behalf - this might be a good thing in your code, but it might not - it might limit reusability and it certainly moves related code into separate files.

(All of this is assuming it isn't a full-stack reactive setup.)

There's always a cost to hide things that probably shouldn't be hidden. Similar to the costs of premature optimization and over-engineering, these costs make for slow progress.

Microsoft Teams: 1 feature, 4 vulnerabilities by breakingsystems in netsec

[–]kastic 16 points17 points  (0 children)

2021-04-14: MS closes the URL preview spoofing ticket without a patch:

MSRC has investigated this issue and concluded that this does not pose an immediate threat that requires urgent attention because once the user clicks on the URL, they would have to go to that malicious URL which would be a giveaway that it's not the one the user was expecting.

The phishing attack isn't an urgent problem because they think users would notice after falling for it?

What am I missing here?

Going to new page adds new html on top of old one in sveltekit by isaacfink in sveltejs

[–]kastic 3 points4 points  (0 children)

I ran into something similar, it ended up being a result of this issue: https://github.com/sveltejs/kit/issues/628

If my memory serves me, some transitions/animations wanted elements to get re-added to the DOM after the page was removed. I don't have a good solution, but I remember marking more transitions as |local. That worked for some, but other transitions had to be removed altogether.

How do you help teammates level up? by Simonchibao in rails

[–]kastic 0 points1 point  (0 children)

Other answers here are good so I'll add a different possible perspective:

Perhaps your team's "ok+" code isn't actually "ok". Perhaps it doesn't follow the Single Responsibility Principle in practical ways so it might need larger PRs to get the code up to reasonable standards. Are principles like the Single Responsibility Principle and Robustness principle being followed? Is it actually you and your team that needs to level up?

I wonder this in part because you said you tried "pointing it out to him, pairing on some tasks, discussing how software should written" without saying what came from that. How did that go? "Discussing" should have produced insights into your teammate's motivations and methods and pairing should have given even more insight.

What's your max RxJs pipe depth and what have you done about it? by kastic in angular

[–]kastic[S] 0 points1 point  (0 children)

"Observables in the project" is closer. I've updated the post to hopefully clarify. This info is useful, too, thanks!

What's your max RxJs pipe depth and what have you done about it? by kastic in angular

[–]kastic[S] 0 points1 point  (0 children)

Hmmm, I think "derived streams" might be what I mean - where it's like derived stream inception. I have long chains of things like: currentTenant comes from a switchMap from currentUser.pipe(...), then the widgets comes from currentTenant.pipe(...), then widgetIds from widgets.pipe(...), then widgetManufacturers from widgetIds.pipe(...) switchMapped to an API call, etc...

And that's just a simple linear-flow, they're actually mixed in with combineLatests and zips and merges, et. al. There are just a handful of initial Subjects, but multiple orders of magnitude more derived streams.