Joshua Morony
Joshua Morony
  • Видео 342
  • Просмотров 7 505 061
A trick for highly performant shader animations in Angular applications
My Angular course: angularstart.com/
With a little sleight of hand and camera tricks, we can get what appears to be a normal 2D animation in our Angular applications that is actually created with highly performant GLSL shader code for OpenGL applied to a plane in a 3D scene.
Angular Three documentation: angularthree.netlify.app/
Chau 3D Slideshow: ruclips.net/video/za5oSw79dYE/видео.html
Get weekly content and tips exclusive to my newsletter: mobirony.ck.page/4a331b9076
Want to build mobile apps with Angular?: ionicstart.com
0:00 A 3D trick in 2D space
0:50 Fragment shaders
1:30 Shader code
2:22 Examples
2:47 Shaders in Angular
3:18 Understanding cameras
4:12 Scene graph
#angular #glsl #angularthree...
Просмотров: 3 166

Видео

A visual guide to why DECLARATIVE code is better
Просмотров 8 тыс.День назад
My Angular course: angularstart.com/ The programming opinion that I am most zealous about is that declarative code is better than imperative code, at least in the context of orchestrating data flows in front end applications. Explaining why in code can be difficult because the most important aspects get lost to less important details like syntax and lines of code differences. This video focuses...
The perfect use case for RxJS... violins?
Просмотров 7 тыс.14 дней назад
My Angular course: angularstart.com/ People say that RxJS is over complicated for most common frontend dev tasks but... what about for violins? This video explores a surprisingly fitting use case for RxJS, and also why RxJS is not actually "over complicated" even for simple scenarios. Get weekly content and tips exclusive to my newsletter: mobirony.ck.page/4a331b9076 Want to build mobile apps w...
Full development workflow with neovim on my phone
Просмотров 3,5 тыс.21 день назад
My Angular course: angularstart.com/ I started experimenting with setting up a full development environment on my Android phone, and to my surprise I got just about everything I need set up including: vim, neovim, lazyvim, git, lazygit, angular, nx, zsh, zoxide, netlify and more. Termux: termux.dev/en/ zsh/ohmyzsh: www.reddit.com/r/termux/comments/18eam9q/tutorial_customize_termux_with_zsh_ohmy...
The most cursed Angular feature I've ever built
Просмотров 6 тыс.Месяц назад
My Angular course: angularstart.com/ Using AI/a large language model is a core part of an application I am building with Angular and Electron. We look at why relying on responses from an LLM can be problematic, and how I built this Angular component to deal with that situation in my application. Source code: gist.github.com/joshuamorony/20929543188d748c4180bcb1d50410c8 More on the Analog compon...
How Nx fixed my Cloudflare development workflow
Просмотров 3,1 тыс.Месяц назад
My Angular course: angularstart.com/ I've been using Cloudflare workers for a long time, but have just been editing and deploying them through the Cloudflare dashboard. For my latest Angular project, it was time to set up a properly Cloudflare development and deploy workflow using Nx. Cloudflare API tokens: developers.cloudflare.com/fundamentals/api/get-started/create-token/ Get weekly content ...
A "hidden" side benefit of DECLARATIVE code
Просмотров 7 тыс.Месяц назад
My Angular course: angularstart.com/ I've never given much though to code folding since it has never really struck me as anything particularly useful, and perhaps potentially even something that will result in worse code. But! I had a sudden realisation in terms of declarative code and code folding which makes it far more useful and will likely end up being a permanent part of my workflow. Get ...
How billionaire Charles Munger fixed my Angular app
Просмотров 8 тыс.Месяц назад
My Angular course: angularstart.com/ 19th century mathematician Carl Jacobi is often cited for his (roughly translated) "Invert, always invert" quote. In this video we take a look at how applying this advice to state management in Angular yielded fantastic results for me recently Video on folder structure: ruclips.net/video/7SDpTOLeqHE/видео.html Get weekly content and tips exclusive to my news...
Observables are WAY easier than they seem
Просмотров 8 тыс.Месяц назад
My Angular course: angularstart.com/ Observables can seem like some sort of complex magical constructs that "stream" data, and perhaps it invokes thoughts of managing scenarios like streaming video data or web sockets. But... the fundamental concept is not all that complex, and can be built with some pretty simple functions. What is an Observable (free lesson): angularstart.com/modules/intro-to...
How Angular plans to survive the next 10 years
Просмотров 14 тыс.2 месяца назад
My Angular course: angularstart.com/ Angular v18 has been released which makes further progress towards the overall goal of making Angular viable for the next 10 years or web applications. Perhaps the most important part of this is signals, the new reactivity system, and zoneless change detection. v18 announcement video: ruclips.net/video/DK8M-ZFjaMw/видео.html v18 blog post: blog.angular.dev/a...
How Electron jailbreaks your web application
Просмотров 6 тыс.2 месяца назад
My Angular course: angularstart.com/ Electron not only allows you to distribute your web application as a native desktop application, it also allows your web application to access native APIs... but how exactly does it do that? Get weekly content and tips exclusive to my newsletter: mobirony.ck.page/4a331b9076 Want to build mobile apps with Angular?: ionicstart.com 0:00 Introduction 0:50 Inter-...
How I code in Angular when nobody is watching
Просмотров 10 тыс.2 месяца назад
My Angular course: angularstart.com/ I get surprisingly few opportunities to code Angular applications specifically the way I want to without needing to carefully consider risks and weigh trade offs. This video covers how I'm using the Analog component format, createInjectable, and signalSlice in a situation where I *do* get to code however I want. More on Analog SFC: ruclips.net/video/15vHXCMh...
Creating DESKTOP apps with Angular is easier than you think
Просмотров 18 тыс.2 месяца назад
My Angular course: angularstart.com/ Getting a native desktop application up and running with Electron and Angular is surprisingly quick. In this video, we make use of these frameworks, in conjunction with Nx, to create the basic scaffolding required to create desktop applications with web tech Get weekly content and tips exclusive to my newsletter: mobirony.ck.page/4a331b9076 Want to build mob...
Here's what I've figured out about Angular signals
Просмотров 15 тыс.3 месяца назад
My Angular course: angularstart.com/ I've been using and experimenting with signals in Angular since they came out around a year ago. This video covers some key ideas I've arrived at when using signals for state management. Get weekly content and tips exclusive to my newsletter: mobirony.ck.page/4a331b9076 Want to build mobile apps with Angular?: ionicstart.com Source code (toSignal version in ...
A 7 minute guide to SESSIONS and COOKIES for authentication in Angular
Просмотров 9 тыс.3 месяца назад
My Angular course: angularstart.com/ If we want our applications to be secure then we need to make sure our backend is secure. Before we send any data to a user, we want to make sure that they are authorised to receive that data. Sessions and cookies are a great way to facilitate this and has been the backbone of many authentication approaches for a long time. Previous video: ruclips.net/video/...
This made me NOT hate note taking (as a developer)
Просмотров 9 тыс.3 месяца назад
This made me NOT hate note taking (as a developer)
What happened to Analog's experimental ".ng" format?
Просмотров 5 тыс.3 месяца назад
What happened to Analog's experimental ".ng" format?
Full stack reactive CRUD in Angular with Go (or any REST API)
Просмотров 9 тыс.4 месяца назад
Full stack reactive CRUD in Angular with Go (or any REST API)
A workflow for complex open source contributions
Просмотров 3,8 тыс.4 месяца назад
A workflow for complex open source contributions
Don't make my toSignal mistake in Angular
Просмотров 8 тыс.4 месяца назад
Don't make my toSignal mistake in Angular
Refactoring my ugliest code with signal view queries
Просмотров 9 тыс.4 месяца назад
Refactoring my ugliest code with signal view queries
The mindset you need for a DECLARATIVE code refactor
Просмотров 11 тыс.4 месяца назад
The mindset you need for a DECLARATIVE code refactor
I didn't know snapshot testing was a thing
Просмотров 4,5 тыс.5 месяцев назад
I didn't know snapshot testing was a thing
Why Neovim nerds are so obsessed with the terminal
Просмотров 83 тыс.5 месяцев назад
Why Neovim nerds are so obsessed with the terminal
A cautionary tale about ChatGPT for advanced developers
Просмотров 318 тыс.5 месяцев назад
A cautionary tale about ChatGPT for advanced developers
Watch this BEFORE updating to signal inputs in Angular
Просмотров 10 тыс.5 месяцев назад
Watch this BEFORE updating to signal inputs in Angular
SIGNALS can make Angular "REACTIVE" forms more reactive
Просмотров 16 тыс.6 месяцев назад
SIGNALS can make Angular "REACTIVE" forms more reactive
Should this be the future of Angular applications?
Просмотров 12 тыс.6 месяцев назад
Should this be the future of Angular applications?
Why signal INPUTS in Angular are such a big deal
Просмотров 14 тыс.6 месяцев назад
Why signal INPUTS in Angular are such a big deal
How to casually change the entire way Angular components work
Просмотров 10 тыс.6 месяцев назад
How to casually change the entire way Angular components work

Комментарии

  • @Ald0Abdiel
    @Ald0Abdiel 21 час назад

    Great content! I have a question about handling state in this scenario. If we have a monorepo project, in which all the apps are with angular and are highly dependent on the libraries we created on the monorepo. Does it makes sense to create a library only for handling state? In my case all my apps will be close to identical only with some UI changes. Thanks again for these great videos, keep the awesome work!

  • @harryuk
    @harryuk 2 дня назад

    Awesome!!! This is the best tutorial till date. Thank you very much

  • @remypaak4195
    @remypaak4195 2 дня назад

    Loved this. Have been toying around with fullstack projects since the start of this year and I kept struggling on the rxjs part in the frontend. This video made it all "click". Cant thank you enough. The part Im still struggling on is clearly understanding the different use cases of simple Observables vs Subjects vs the new Angular signals.

  • @VictorHugolorenzana
    @VictorHugolorenzana 3 дня назад

    I think that the constructor is better to inject dependencies considering testing as part of most important development phase, to inject mocks to ensuee the quality of the component

    • @JoshuaMorony
      @JoshuaMorony 2 дня назад

      With inject you can still use TestBed to do this

  • @drakegao1
    @drakegao1 3 дня назад

    is this project stopped? no new videos are coming.

  • @finleybaker6008
    @finleybaker6008 4 дня назад

    This video makes my head hurt. Which is actually a compliment as someone whose rxjs codebase is a migraine factory.

  • @IgorTrushevsky
    @IgorTrushevsky 4 дня назад

    I'm curious, is there a point in using this library? Or would it make more sense to just use a more maintained react-three-fiber component, that we render in angular when we need three.js in an angular app?

    • @JoshuaMorony
      @JoshuaMorony 4 дня назад

      Disclaimer: I've never used R3F, but unless I am missing some context here I'd say the point of this library is so that you can use Angular instead of React to build your scenes - the point of NGT is pretty much to bring R3F to Angular. Technically I think you could use R3F to create a custom element or something and then render that in your Angular application, but it doesn't seem ideal.

    • @ChauTran-xc4ld
      @ChauTran-xc4ld 4 дня назад

      I thought about that as well and considered it as a general 3D solution for Angular devs. However, it becomes more of a hassle to access services, using Angular features like directives/control-flow from within the 3D scene graph. You'd have to drill everything into the React world via Context or something global which might or might not bring a good DX for the Angular devs.

  • @elkestudio
    @elkestudio 4 дня назад

    @BrandonRobertsDev lol😂 @josh yes please, do it before chau releases v2

  • @antoniocicchella7574
    @antoniocicchella7574 5 дней назад

    I really like neovim, but when projects begin to be bigger i found uncomfortable using it. Basically if I have to stay under the 200 lines of code, i prefer neovim, but if i have to go too over that amount, i prefer VS code.

    • @JoshuaMorony
      @JoshuaMorony 5 дней назад

      What is it about larger files you don't like with neovim?

    • @antoniocicchella7574
      @antoniocicchella7574 4 дня назад

      @@JoshuaMorony I find harder to debug it and if I have to copy a big block of code for some reason (for example if I want to make a function from it) sometimes it’s a pain. But I love the thing that I’m working with the terminal and I can just edit files from it or open a new terminal inside it

  • @mhmq5051
    @mhmq5051 5 дней назад

    I want to switch because its better for my hand i am suffering from the mouse

  • @luishcastroc
    @luishcastroc 5 дней назад

    Great video Josh I definitely want to see more

  • @faculupi
    @faculupi 5 дней назад

    I thought angular three wasnt supoorted anymore… are you using an poder versión of angular?

    • @JoshuaMorony
      @JoshuaMorony 5 дней назад

      This is latest Angular and the beta v2 version of Angular Three: angularthree.netlify.app/ (Chau is actively working on it)

    • @faculupi
      @faculupi 4 дня назад

      @@JoshuaMorony Those are fantastic news!, really excited to try this library now that is supported :)

  • @BrandonRobertsDev
    @BrandonRobertsDev 5 дней назад

    Are we in the Tesseract? 😅

  • @SumitN
    @SumitN 5 дней назад

    So now we can create 3d games high on performance. Right?

    • @JoshuaMorony
      @JoshuaMorony 5 дней назад

      Depends what you are building and what you mean by high performance but generally yes, there are lots of 3D games built with Three.js and there is also some info in the Angular Three docs on Angular Three specific performance considerations if you are interested: angularthree.netlify.app/core/advanced/performance/

    • @ChauTran-xc4ld
      @ChauTran-xc4ld 5 дней назад

      performance wise: nothing can really pass vanilla THREE.js but the DX can be up for debate for vanillla THREE.js versus a framework integration like Angular Three (Angular) or React Three Fiber (React) or TresJS (Vue)

  • @tanishqmanuja
    @tanishqmanuja 5 дней назад

    Felt like the video ended as soon as it started to get interesting 😅

  • @JoshuaMorony
    @JoshuaMorony 5 дней назад

    I've got a tip for using materialize and dematerialize for error handling in RxJS going out in the newsletter tomorrow: mobirony.ck.page/4a331b9076

  • @razisraeli1150
    @razisraeli1150 6 дней назад

    What a great, great explanation Joshua! Thank you so much for this :)

  • @vorant94
    @vorant94 7 дней назад

    What is your opinion on stuff like effects? They seem to bring declaration fragmentation into reactive code… like now you have your variable declaration with some logic, but this variable can also be changed inside effects hence bringing back jumping between variable usage places

    • @JoshuaMorony
      @JoshuaMorony 7 дней назад

      Generally I will use effects for side effects that don't affect the data flow in the application, things like triggering a save or playing a sound or playing a video. Although I generally avoid it I do still on occasion use effects that affect the data flow in the application, but in these cases I still won't be reassigning values I would have the effect trigger some source which other declarations would then react to.

  • @tranquillityEnthusiast
    @tranquillityEnthusiast 7 дней назад

    Rxjs everywhere everywhere 😅😅😢

  • @methuselahmark7818
    @methuselahmark7818 7 дней назад

    Nice video Joshua can you do a full tutorial on it please. A detailed tutorial for beginners I am really begging please

  • @KYO-wb9dg
    @KYO-wb9dg 7 дней назад

    Great video! Just wondering if signals can impact on this?

  • @JoshuaMorony
    @JoshuaMorony 7 дней назад

    I made another video on WHY people are obsessed with neovim (or at least why I am): ruclips.net/video/5wy2iLU5fs0/видео.html

  • @lombeelo8780
    @lombeelo8780 8 дней назад

    On Windows nvim lags af

  • @kibbewater
    @kibbewater 8 дней назад

    I had to charge my magic mouse and thought, "let's try neovim, would be cool to ditch the mouse!". Threw myself down the deepest rabbit hole, took like 2 weeks for me before switching from Windows to Arch, safe to say, neovim was actually kind of okay

  • @joeyvico
    @joeyvico 8 дней назад

    These tutorials are genius. Thanks Josh!

  • @KatJay-i9y
    @KatJay-i9y 9 дней назад

    animations are out of this world, can anyone tell me wt kind of tool or software was used?

    • @JoshuaMorony
      @JoshuaMorony 9 дней назад

      I'm using Motion Canvas, which lets you create animations with TypeScript/JSX

  • @itzmeys
    @itzmeys 10 дней назад

    Love this video as a visual learner, please make more videos like this! It really helps visual learner like me to understand and learn so much better.

  • @vivmaniaa
    @vivmaniaa 10 дней назад

    Hi Joshua, you do not know how much I've been struggling to understand what are both of them, this video really resolved my confusion. I thank you with respect and love from the bottom of my heart❤

  • @br3nto
    @br3nto 10 дней назад

    Awesome vid and explanation. It drives me nuts seeing the type of code that you describe as imperative, for exactly the reasons you describe. I think there is a lack of resources showing/teaching people alternatives.

  • @adamlawrence3651
    @adamlawrence3651 11 дней назад

    Fighting the fight in a large enterprise app. the real pain I find is when the 2 approaches meet 🤢. For example a non serializable class going into an ngrx store, and things being mutated sometimes despite being in a store. the app was originally written in angular 2, so it's easy to see how it's happened. but now it's my job to unf**k it 😅. I could still see value in imperative to knock out an admin portal quickly for example. but once you go reactive/declarative you never go back.

  • @Billiam112
    @Billiam112 11 дней назад

    Yeah, imagine doing this without RxJs.... Wouldn't even know where to start.

  • @iligol3
    @iligol3 11 дней назад

    Although I am completely on your side in this matter, the explanation is very abstract, understandable mostly to those who already use it. I don't understand how this video will encourage a user of the imperative approach to try to apply the declarative approach without some code example.

    • @JoshuaMorony
      @JoshuaMorony 11 дней назад

      Whether it's effective or not I don't know, but my goal was to be abstract here. I have a lot of code focused explanations in videos and I feel like the point often gets lost because people think the declarative code is harder/overly complex and it's *easier* to just write imperative code. My goal here was just to explain conceptually why declarative code is actually easier, without getting lost in the details, and then if people can be convinced of that they can then move on to the how (even though at a small scale the declarative approach might seem harder/unnecessarily complex)

    • @Cheesyonmytoasty
      @Cheesyonmytoasty 11 дней назад

      Same, I found this way too abstract.

    • @NehalHasnayeen
      @NehalHasnayeen 6 дней назад

      well it made sense to me and encouraged me to keep it in mind from now on about declarative approach when coding

  • @travisSimon365
    @travisSimon365 11 дней назад

    I prefer imperative code because I can read it and understand what it does. While I theoretically agree with everything you are saying, the reality turns out to be something different (e.g. rxjs). And, the code ends up being completely unreadable unless you are 100% all-in on rxjs. And if you haven't learned the incantations, they don't make sense, and you can't really debug them to understand what is going on. const myVar = http.get(''/api/items").flipflap((j) => invert(j)).flatFlam().flibbity(). And you look at that and you're just like, 'uh, OK?'. I think the middle ground that we can agree upon is signals, where it is declarative but decipherable.

  • @richardholguin3481
    @richardholguin3481 11 дней назад

    Great content

  • @gcancino
    @gcancino 12 дней назад

    A simple code to understand it better would be great.

  • @shaylevinzon540
    @shaylevinzon540 12 дней назад

    That's a cool representation of those concepts. People are so afraid of curry/pipe functions they just never attempt to use it, maybe your next diagrams could explain this process the functions go through.

  • @jeffnikelson5824
    @jeffnikelson5824 12 дней назад

    totally on your side when it comes to declarative vs imperative code. looking back at the past I would even say that an imperative approach is much more prone to errors than a declarative one. In my current project, I have had the experience that a more declarative approach just forces the developer more to think about error states ahead of time in comparison to an imperative implementation which overall resulted in a more robust implementation

  • @message59
    @message59 12 дней назад

    thanks again joshua for all the effort and thoughts you put in your videos it helped me so much grasping concepts and find my way through all this (sometimes complicated) stuff you are the man 🫡👍🏻

  • @samantwi1313
    @samantwi1313 12 дней назад

    I bought your course, Its Brilliant

  • @olegsubik
    @olegsubik 12 дней назад

    Makes total sense!

  • @_Greenflag_
    @_Greenflag_ 12 дней назад

    what would you recommand as library(ies) for declarative code outside of Angular?

    • @aravindmuthu5748
      @aravindmuthu5748 12 дней назад

      rxjs...

    • @user-zw3kc8qd1z
      @user-zw3kc8qd1z 11 дней назад

      Simple rxjs, you don't need anything more. RxJS also will allow you to carry out complex data flow processing that is based on array functionalities like filter, map and so on, as well as rxjs specific operators. This is beneficial when you need to provide multicasting (multiple components can "subscribe" to your reactive source), and again when you need to do complex manipulations on your data stream. If you need something more simple and restricted, then use one of the angular's newer features - signals. You can still observe the way a value changes, but at the cost of making simpler data manipulations and having only one "subscriber".

  • @TayambaMwanza
    @TayambaMwanza 12 дней назад

    Maybe people tend to do imperative code, because declarative code forces you to consider most of the links in your code upfront. Imperative at first glance makes you feel like there's less links, so while you're writing it feels easier but the reality is you will have to do the work of linking your code over and over again when you read it.

    • @JoshuaMorony
      @JoshuaMorony 12 дней назад

      Yes I think this is exactly it

    • @rkokie
      @rkokie 12 дней назад

      I have been stuck in imperative code for a long time, mainly due to the fact I had a hard time really understanding the mental map for declarative with RxJS. Thanks for your teachings Josh!

  • @tarquin161234
    @tarquin161234 12 дней назад

    I am the only reactive programmer in my team. They have asked me to do a presentation explaining why declarative is better. I think I will start off with this vid. Thanks!

    • @larrycoleman8149
      @larrycoleman8149 12 дней назад

      Must be nice. My team used to block my declarative code during code review. Such a pain. Share your secret to push declarative code😂

  • @TayambaMwanza
    @TayambaMwanza 12 дней назад

    Very nice and simple explanation.

  • @MrDrogoyonk
    @MrDrogoyonk 12 дней назад

    what are the difference between reactivity and declarative?

    • @JoshuaMorony
      @JoshuaMorony 12 дней назад

      You can't have a declarative application (at least one that does anything) without reactivity. Reactivity is another one of those things people disagree on the definition of, but the simplest way to think of it imo is that reactivity enables declarative code by allowing declarations to react to changes. Take the "isHot" example, that is declarative and to be declarative it needs the ability to "react" to "temp" changing - that is the reactivity part.

    • @MrDrogoyonk
      @MrDrogoyonk 10 дней назад

      @@JoshuaMorony thanks for your answer!!

  • @jaypatel-dt8bw
    @jaypatel-dt8bw 12 дней назад

    Kudos to your grate efforts for Angular community....

  • @zero14111990
    @zero14111990 12 дней назад

    this is what i have to read in the actual project im working 😭 is a big codebase and the client do not want to give us the total codebase to be able to implement new modules that they pay us to do 🙃

  • @msacket
    @msacket 12 дней назад

    Great explaination!

  • @JoshuaMorony
    @JoshuaMorony 12 дней назад

    Extra content around 3D scenes and cameras for Angular apps going out in the newsletter tomorrow: mobirony.ck.page/4a331b9076

  • @dev_bits
    @dev_bits 12 дней назад

    This kind of tips what the developers need. Thanks.