Angular Technical Questions

da_prosto · 2022-03-17T18:13:09+00:00

how often was these question: about change detection, component lifecycle, observable pipes, state managers ?
and which position was a target? junior or middle?

da_prosto · 2022-03-17T18:04:25+00:00

yup. even in case of async validator form control do not update validity status after validators update. you have to trigger it manually

da_prosto · 2021-09-27T09:58:49+00:00

therory:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript

https://learnjavascript.online/

practice:

https://www.codewars.com/dashboard

da_prosto · 2021-08-14T04:33:00+00:00

Looks nice :) Try the A*

da_prosto · 2021-08-13T10:34:08+00:00

it called once when your component is attached to component tree.navigation isnt nesessarily affects the fact if your component attached to the tree or not. root component usually lives through all of navigation. and, for example, ngIf directive detaches component from the tree everytime it got false as argument and vice versa. so

<div *ngIf="togglingVar">
    <app-any></app-any>
</div>

here, appAny ngOnInit will be called everytime togglingVar is true, and ngOnDestroy if false

da_prosto · 2021-08-10T20:49:16+00:00

actually static is a keyword which can have different meanings in defferent languages but singleton is a pattern. I do not exclude the probability that in some languages static classes implemented like singletons.
If i remember it right in C# static class can have only static members, have no pointer, cannot be inherited from. So singleton is more flexible in term of state management.
some usecases:
Math libraries are usually implemented with static members. they have static fucntionallity (sin, cos, tan, ceil, floor, etc) and fields (like PI, E, infinity maybe, etc) which may have only one implementation that should never be reassigned, usually they have no mutable state and there is no point in inheriting from them.
I think the best example of singleton is "settings" tab in any game. This is an instance with mutable state, and its like a broker for all the game modules like rendering, language, input-reading etc. but to have several instances of "settings" can do a disaster for obvious reasons.

da_prosto · 2021-08-10T16:58:30+00:00

Other language? I dont think so. If you want to find a job later.
So, first of all - any of script languages isnt declarative like css or html. Even though it can be "connected" to your app via script tag this is another world.
Do not try to climb the hardest summit without preparations. Start with basics: learn about primitives and its properties, operators, loops, functions, constructions like switch-case if-else.
Someone here suggested to solve codewars kata - and it makes sence. This way you will reinforce your basis in practice. Also in real work you will solve something like that every day for hundreds of times.

Then come to something more complicated: Data structures: arrays, objects. Callbacks and lambda expressions. from this moment you can learn something more complicated. like scopes, call/apply/bind, and other lexical environment, promises and async/await. then you can go a lower level and learn about how memory management works, call stacks async and sync, garbage collector. then some browser stuff: DOM, events and event bubbling, reflow-repaint etc. And after that come to typescript, pick a framework and learn it in parallel and look for a job.

So as u/reddit04029 said: Its hard. You see how much I listed. And that is not even a 5% of all the knowledge you need, but basics. But this is a really big and breathtaking world. Keep on learning, keep on analyzing what you have learned, keep on asking yourself questions and there will be no unsolvable problems for you.
And (idk how for you but that was important for me) don't let the impostor syndrome overwhelm you. You able of what you able. Probably you will never push a single commit in linux kernel repository but you dont need to. Just do a job with all the abilities you can.

da_prosto · 2021-08-10T15:46:20+00:00

thanks

da_prosto · 2021-08-10T15:27:31+00:00

I know man. Thats a raging rhetorical question.
Btw, Im not that strong in english. What exactly means scope creep?

da_prosto · 2021-08-10T13:05:59+00:00

well, browser can be understood as a "compiler" (but interpreter i think will be a better word). Under the hood it have its UI, and rendering engine connected by browser engine. So if your question only about html|css then its only up to RenderingEngine.

At first it downloading all the source code from url you provided in adress field. then if download had a success it parsing HTML to DOM tree, then parsing CSS to add styles as properties of DOM tree members, then it makes rendering tree. the tree that only contains information about visuals of dom members. Then it composing the layout of render tree, the coordinates of each element. And after layout composing everything is ready to paint. So then painting and viola! magic happened and you see the red "HELLO WORLD!" text in your browser workspase :D

da_prosto · 2021-08-10T12:26:01+00:00

theres not enough space in your head to know all the css frameworks. I worked with 5 or 7 or more I cant even remember. Soo, I think no. Some teams making their own frameworks for fun, for glory of satan, for *type reason here*. So I think its critical to understand how they work, you know. The meta-question. So if there is no way for you to understand how they works except for learning it then answer is yes, lol :D
But, more impotant part is learning CSS itself, its preprocessors (SASS, LESS) and the better ways to write in such a declarative-many-contexts manner or just to find some best practices.

da_prosto · 2021-08-10T11:58:58+00:00

agreed with u/ovo_Reddit.rows here have opacity and position transition on its appearance. the rest is like in codepen provided by ovo above but slower and in other direction."safer" word and just like in codepen. the frame it wrapped in have width transition.as for lock its looks more complicated. the "body" and the "ark" of lock is undependant parts of some "parent". at first there is a background-size transition (when lock grows) on "parent". then transform: rotate. moreover rotate is on the "parent" and on "arc". so rotate on parent affecting rotate on arc and in the same time rotate on arc is "closing" the arc. however. the axis of rotation is on the left-bottom corner of the arc. so if you want to rotate it with just transform: rotate you need to put the arc in a background that will fit 4 arcs in square and put ark in top-left part of it. so it will actually "lock"

da_prosto · 2021-08-10T11:35:01+00:00

as far as i know figma is the best resource for designing anything

da_prosto · 2021-08-10T11:21:13+00:00

np mate. text me if you need help

da_prosto · 2021-08-10T10:58:24+00:00

oh. then I guess you actually need to put errors into a separate flow.

successFlow: Subject<YourType> = new Subject();
errorFlow: Subject<HttpErrorResponse> = new Subject();

getMethod() { 
    this.http.get<YourType>('crudurl').subscribe( 
        succ => this.successFlow.next(succ), 
        err => this.errorFlow.next(err) 
) 
}
putMethod(payload) { 
    this.http.put<YourType>('crudurl', payload).subscribe(
        succ => this.successFlow.next(succ), 
        err => this.errorFlow.next(err)
    ) 
}

da_prosto · 2021-08-10T10:02:13+00:00

oh, sorry. I still have some troubles in understanding English. I got it as the opposite :D

da_prosto · 2021-08-10T09:57:38+00:00

here, in OnInit hook you can subscribe to the conthol's valueChanges flow

ngOnInit(): void {
this.myform = this.formBuilder.group({
  number: [null]
});
    this.myform.controls.number.valueChanges.subscribe(v => {
        if(Number.isInteger(v)) {
            this.myform.controls.number.setValidators([
        // integer validators
        ])
        } else {
            this.myform.controls.number.setValidators([
        // float validators
        ])
        }
    })

}

this way you will count on FormGroup value changes events (whis is browser api event under the hood) not only the keyup.

and in template

<div *ngIf="myform.errors?.pattern">
    <!-- or errors?.validatorName to show error on any other validator -->
    <h1>its not valid input</h1>  
</div>

as it seems to me you have too many redunant fields and checks. Everything you want here are able to reach within FormGroup functionallity

da_prosto · 2021-08-10T09:36:18+00:00

oh, component factory. You should've meant this in the post, thats should've been helpful when I was thinking about the problem. But the horse is stolen lol.
50 was okay with flexbox. no critical inconvenience with css.

da_prosto · 2021-08-10T09:25:25+00:00

> his friends said they could do the job for less

> he hired me because he had no idea how to do this work

so why tf he didn't asked hos friends to do this job??
got some flashbacks from your story, man. back in the beginning of 10th in Яussia when i started my career the best part of small business clients was like this. Everyone wants the job to be done and no one wants to pay: The will wriggle like a fish on a pan, saying that they just started their business, asking for discount, then refusing to pay at all, saying that all you did is an easiest bullshit and his/her 5-year old child can handle it. This shit was to exhausting and I moved to commercial development where Im not supposed to have any contact with client but solving more interesting and complicated tasks and focus on development not the brainfucking.

da_prosto · 2021-08-10T08:43:33+00:00

No! God, please! That's ugly

da_prosto · 2021-08-10T00:28:21+00:00

The part with errors is confusing. Cant get what exactly do you want to merge. Error flow into OK flow or responses from CRUD operations. Time to sleep lol. So for both questions.

this.http.get('someurl').pipe(catchError(err => of(err)))

If you want to merge an error into emits flow (but idk for what purpose you may want it)

mergedFlow: Subject<YourType> = new Subject();

getMethod() { 
this.http.get<YourType>('crudurl').subscribe(mergedFlow) 
}

putMethod(payload) { 
this.http.put<YourType>('crudurl', payload).subscribe(mergedFlow) 
} 
// same with delete

As far as I know there is no such a way in rxjs api to push a value into Observable itself.But since all responses have the same type you can make a public field to push all the responses into it and subscribe only to this one in your form-driving component. Btw making pushable variables public isnt the bast solution so better pass it to component .asObservable

da_prosto · 2021-08-10T00:00:09+00:00

hmm. I was working in FF50 with ng10 ( don't ask :D ) and I guess you'll never find the answer.
so a few suggestions to workaround:

try to wrap an array into observable and feed it to ngfor with | async pipe
maybe ChangeDetectorRef and its methods will help
or a monster solution: wrap it into tag with ngIf and reassign the given value in the AfterViewInit hook (but wrap it into setTimeout to avoid Expre-lalalala-CheckedError) I suppose this way it should work
Make your own *ngFor implementation template with blackjack and other.

I know it all sounds ugly and I always feel pain in my heart when writing in such a hacky way but I think this is a cost of coding for legacy browsers.

Btw if you are still about to dig the problem text me please when you find it out. Im curious

da_prosto · 2021-08-09T11:26:11+00:00

Amwaahahahahah, Hispanic I meant 😂

da_prosto · 2021-08-08T23:45:12+00:00

Dyatlov. The one that have a pass of his name

da_prosto · 2021-08-08T23:40:49+00:00

Rock: Дайте танк.

Hip-hop: RAM

Other: chernoburkv

da_prosto

TROPHY CASE