EmNudge
EmNudge
  • 15
  • 87 821
The Implicit Props Pattern - React vs Vue vs Svelte vs Solid
A big one as usual! I actually had a whole script written for the code section, but I quickly saw there was not enough time.
Implicit Props Repo: github.com/EmNudge/implicit-props-pattern
Vanilla DOM context: jsfiddle.net/kduhtLzw/
0:00 - Implicit Props vs Context
2:03 - IPP Astro Demos
5:10 - React Tabs
8:01 - Solid Tabs
10:30 - Svelte Tabs
12:40 - Vue Tabs
15:09 - Vue Audio
21:08 - Svelte Audio
23:28 - Solid Audio
27:31 - React Audio
35:00 - Closing
มุมมอง: 1 241

วีดีโอ

Rate Limiting - From Scratch Episode 3
มุมมอง 1.3K3 ปีที่แล้ว
Woah, a 43-minute one! I kind of knew this would get long, but I didn't want to compress the information too much. It's unfortunate that the leaky bucket implementation didn't work as planned, but I hope it was informative nonetheless ! 0:00 - intro 0:45 - list filtering problem 3:21 - debounce 7:28 - scrolling problem 9:55 - throttle 13:27 - UI rendering problem 18:40 - autobatch 25:00 - fixed...
Understanding The Standard For Loop
มุมมอง 7033 ปีที่แล้ว
article: dev.to/emnudge/how-for-loops-really-work-4lhj http 203 video: th-cam.com/video/Nzokr6Boeaw/w-d-xo.html bendtherules video: th-cam.com/video/LRWA9rdcK8o/w-d-xo.html babel plugin demo: codesandbox.io/s/for-while-loops-ws0wh links to socials are at emnudge.dev 0:00 - Intro 1:12 - The Snippet 1:34 - 2 Changes 2:19 - Explaining Var 2:40 - Hoisting 3:50 - Scoping 5:30 - Explaining setTimeout...
World Champion Typist 320wpm - How I did it
มุมมอง 1.4K3 ปีที่แล้ว
Was that enough clickbait? site: monkeytype.com/ repo: github.com/Miodec/monkeytype follow me on twitter: emnudge
Understanding Loose Equality In JavaScript
มุมมอง 1.2K3 ปีที่แล้ว
tool - emnudge.dev/abs-eq/ ToPrimitive in JS - jsitor.com/5ktE3jQzt8 0:00 - Introduction 0:49 - Implicit Coercion & Loose Equality 2:15 - The Spec And you 3:15 - The Abs Eq Stepper 6:50 - The Headscratcher 8:48 - Understanding ToPrimitive 12:08 - Throwing Errors 15:00 - Closure
Unicode Encoding! UTF-32, UCS-2, UTF-16, & UTF-8!
มุมมอง 52K3 ปีที่แล้ว
I have been working on this diagram to explain the encoding formats. I haven't released it yet, but I figured this video might help some people out when it comes to understanding this stuff. UTF-8 encoder: svelte.dev/repl/9d89e50badbd458599fc62cde67fc9b3?version=3.31.0 decoding UTF-8: dev.to/emnudge/decoding-utf-8-3947 Unicode Deep Dive with UTF-16: th-cam.com/video/ZQRAMHiVEzs/w-d-xo.html PDF:...
Codependent Reactive Values - Issues In Reactivity
มุมมอง 2324 ปีที่แล้ว
I think the video was a bit more scattered than usual. I didn't have a script or a bunch of fancy diagrams or slides, but I thought it might be a useful video to get out there in case it helps someone. Svelte REPL: svelte.dev/repl/27db4c6426a246afa5866d60b57fe67a?version=3.31.0 JSitor REPL: jsitor.com/mS-T7XPjj 0:00 - Intro 1:43 - code preview 2:46 - vanilla JS REPL 6:43 - solution 1 10:29 - so...
Tweening - From Scratch Episode 2
มุมมอง 8094 ปีที่แล้ว
Slides at: emnudge.dev/fs-tween-slides/ Git Repo: resources.emnudge.dev/files/tween-library.zip 0:00 - introduction 0:22 - slides 5:50 - code version 1 7:20 - code version 2 14:47 - code version 3 21:50 - code version 4
Reactive Data Structures - From Scratch Episode 1
มุมมอง 1.7K4 ปีที่แล้ว
This is the video form of an article I wrote recently: dev.to/emnudge/from-scratch-reactive-values-c9h Git Repo: resources.emnudge.dev/files/reactive-framework.zip Special thanks again to Ryan Carniato and Jimmy Breck-McKye who were instrumental in my understanding of this. It's a bit of a long video, but hopefully useful to someone that finds videos preferable to articles. 0:00 - introduction ...
Unicode Extras - Coding Deep Dive E1.1
มุมมอง 7554 ปีที่แล้ว
Some of the cool aspects of Unicode I found while making the original video! This one required a bit less editing as I used google chrome tabs to show a lot of the code examples. original video: th-cam.com/video/vHkM6RwA7Wk/w-d-xo.html links shown: dmitripavlutin.com/what-every-javascript-developer-should-know-about-unicode mathiasbynens.be/notes/javascript-encoding links not shown (but used fo...
Invisible Unicode - Coding Deep Dive
มุมมอง 2.1K4 ปีที่แล้ว
Heyo! This is something I've wanted to do for a while that, as mentioned, is largely influenced from Sebastian Lague's series - th-cam.com/play/PLFt_AvWsXl0ehjAfLFsp1PGaatzAwo0uK.html . This time it's particular to code and won't show much of game development, but we'll see how it goes! This video is largely based off of an article I wrote in March of this year. Check it out here if reading is ...
Hammer Units - WHAT?
มุมมอง 7K7 ปีที่แล้ว
What's this?! A video literally no one asked for?! Oh, man! what'll he do next!? ➤ Hammer units to real world measurements: developer.valvesoftware.com/wiki/Dimensions ➤ TF2 specific units: developer.valvesoftware.com/wiki/Team_Fortress_2_Mapper's_Reference ➤ Download the test map for whatever reason, I guess: goo.gl/GG9LQz
[HAMMER] The Magical AddOutput
มุมมอง 3.5K7 ปีที่แล้ว
0:00 Intro 0:48 Adding Outputs (in game) 4:30 Adding Outputs (in hammer) 9:06 Changing Values (in game) 12:34 Changing Values (in hammer) As usual I was a tad sick. I recorded half the video at night and the other in the morning. I also messed up on the dimensions for the first hammer recording. My bad. ➤map(s) download: first map: tf2maps.net/attachments/addinganoutput-vmf.48900/ second map: t...
[HAMMER] Pushing/Launching Players
มุมมอง 10K7 ปีที่แล้ว
0:00 intro 0:18 Trigger_Push (in game) 2:21 Trigger_Push (in hammer ) 5:38 Trigger_Catapult (in game) 7:38 Trigger_Catapult (in hammer ) 9:53 Trigger_Apply_Impulse (in game) 11:51 Trigger_Apply_Impulse (in hammer) This was recorded late at night when both my voice and body were very tired. Please excuse my everything. ➤ map download: tf2maps.net/attachments/moving-throwing_tutorial-vmf.40677/ ➤...
[HAMMER] Teleporting Players
มุมมอง 4K8 ปีที่แล้ว
I probably left something out. Who cares, Scream Fortress is here! Download the VMF with all 3 types of teleportation: goo.gl/u0kstG More info at: tf2maps.net/posts/398245

ความคิดเห็น

  • @UrGuru
    @UrGuru 13 วันที่ผ่านมา

    Thank you very much sir

  • @malik.alimoekhamedov
    @malik.alimoekhamedov 2 หลายเดือนก่อน

    Lovely

  • @jez9999
    @jez9999 3 หลายเดือนก่อน

    This video confirmed to me that Unicode is just as complex as people make it out to be. 🙂 However, it does make logical sense.

  • @tchubang
    @tchubang 4 หลายเดือนก่อน

    But how utf-8 translate back to poop emoji? There is no code point to check it?

    • @EmNudge
      @EmNudge 4 หลายเดือนก่อน

      We do the same thing in reverse. * We read 11110000 which tells us this is part of a 4 byte chunk (since there are 4 1s) * We read the next 3 bytes (10011111 - 10010010 - 10101001) and remove the first 2 bits from each (10) * We stitch them together to get "011111010010101001" which is our code point - 128169

  • @sendev
    @sendev 5 หลายเดือนก่อน

    thank you. its very clear and easy to undersrtand.

  • @AnglRivera
    @AnglRivera 5 หลายเดือนก่อน

    Wow!!! I fully agree that this is the best tutorial on unicode utf-x. Thanks!!!

  • @TheNoirKamui
    @TheNoirKamui 6 หลายเดือนก่อน

    This is so hard to follow... 2h later I am still under minute 8...

  • @ShDShD-sv6yx
    @ShDShD-sv6yx 6 หลายเดือนก่อน

    Just gem of this topic, definitely!

  • @ivmIndi
    @ivmIndi 6 หลายเดือนก่อน

    awesome explanation!

  • @TrynaLearn-b3h
    @TrynaLearn-b3h 7 หลายเดือนก่อน

    7:40 It only holds 65,000 code points, what the point of a Surrogqte point only in the 50,000’s?? Don’t you need 128,000

    • @EmNudge
      @EmNudge 7 หลายเดือนก่อน

      Good question! Instead of thinking about it in terms of numbers, try thinking about it as "bits". We're using 2 ranges of 1000 numbers, but let's look at what the starting numbers of these ranges are. 55296 -> d800 (in hex) -> 1101100000000000 (in binary). 56320 -> dc00 (in hex) -> 1101110000000000 (in binary). These each have about 10 zeros at the end. If we store one big number in these 10 zeros, then we can use 20 bits in total across 2 surrogate pairs! We just need a way of adding a number into these surrogates and extracting it out later. 10 bits only gets us 1023 numbers, but by combining these 2 pairs of 10 bits together, we can express numbers as large as 20 bits, giving us 1,048,575 possible numbers!

  • @TrynaLearn-b3h
    @TrynaLearn-b3h 7 หลายเดือนก่อน

    Lost me at surrogate pairs 😢

  • @vigneshwaranj1958
    @vigneshwaranj1958 7 หลายเดือนก่อน

    Best content 💯

  • @limitless-codes
    @limitless-codes 7 หลายเดือนก่อน

    hands down best tutorial I watched in a while

  • @programacion3694
    @programacion3694 8 หลายเดือนก่อน

    buen video

  • @enisten
    @enisten 8 หลายเดือนก่อน

    2:30 When I convert "Ha 💩" into binary, I get a different result. >>> b_string = "Ha 💩".encode('utf-8') >>> b_string b'Ha \xf0\x9f\x92\xa9' >>> ' '.join(f"{byte:08b}" for byte in b_string) '01001000 01100001 00100000 11110000 10011111 10010010 10101001'

  • @christopheriman4921
    @christopheriman4921 10 หลายเดือนก่อน

    In theory you would only need one rule to make something similar to UTF-8, that is a characters last byte has a 0 in the most significant bit and a 1 in the most significant bit of all the previous bytes so an 4 byte character would look something like 1XXXXXXX1XXXXXXX1XXXXXXX0XXXXXXX and a 2 byte character would look like 1XXXXXXX0XXXXXXX and a 1 byte character would look like 0XXXXXXX where the Xs represent any value of 0 or 1. This is interesting because you can extend this to any bit width optimization for instance if most of the numbers you store will be of 64 bit width you just make a variation of this that has a 0 in the most significant bit for a length of 64 bits after the zero and a 1 means that there is at least another block of 64 bits after + the bit that tells you if there is another block after.

  • @thaidoan868
    @thaidoan868 11 หลายเดือนก่อน

    Thank you

  • @calebwebster4158
    @calebwebster4158 ปีที่แล้ว

    What did you use to create that document?

  • @usercl3ev2pt1b
    @usercl3ev2pt1b ปีที่แล้ว

    Js metaframework (next, remix) from scratch - please

  • @AliBerro-c1s
    @AliBerro-c1s ปีที่แล้ว

    So underrated

  • @lagoozri9568
    @lagoozri9568 ปีที่แล้ว

    bro ur voice is so awesome, holy sheet

  • @lagoozri9568
    @lagoozri9568 ปีที่แล้ว

    are u the dude from HL2 Best Impressions ??? Your Voice Is SO DOPE

  • @simplytom1213
    @simplytom1213 ปีที่แล้ว

    Will be saving this video, knowledge might be useful.

  • @saltypepper3340
    @saltypepper3340 ปีที่แล้ว

    hello mr sexy voice.

  • @KirillMvS
    @KirillMvS ปีที่แล้ว

    great video, thank you so much!

  • @thekwoka4707
    @thekwoka4707 ปีที่แล้ว

    The export let WILL act as a let if this is bundled by most bundlers, btw. It's a strange difference between the code you writes native behavior and the bundled behavior.

  • @waleedfahmy8174
    @waleedfahmy8174 ปีที่แล้ว

    Thanks so much for this tutorial much appreciated

  • @waleedfahmy8174
    @waleedfahmy8174 ปีที่แล้ว

    Can you please send me the link for the article shown in the end of the video

  • @theeverleinhour9616
    @theeverleinhour9616 ปีที่แล้ว

    Thank you! 🎉

  • @landenplaze9764
    @landenplaze9764 ปีที่แล้ว

  • @Dude-48
    @Dude-48 ปีที่แล้ว

    I can’t make a regular entity into a trigger_ teleport. How do I do it?

  • @Persun_McPersonson
    @Persun_McPersonson ปีที่แล้ว

    0:34 "And the distance from me and jail is a 30 meter restraining order." ...Which is about 1 575 HU!

  • @mefaba5363
    @mefaba5363 ปีที่แล้ว

    so computed value is highscore- we call it with subscribe in index.js, subscribed values are score1 and score2- we call it with computed why this stuff is so hard, my brain

  • @InfoBot_Shiny
    @InfoBot_Shiny ปีที่แล้ว

    you sound like postal dude

  • @yofou3776
    @yofou3776 ปีที่แล้ว

    Who's sarah? 03:20

  • @enver_gant3026
    @enver_gant3026 ปีที่แล้ว

    bad...

  • @lucaban
    @lucaban ปีที่แล้ว

    Great breakdown! I personally have experienced that usage of provide/inject caused us more headaches than benefits in large code bases, especially with team members of various levels. In small projects these things don't really matter, but with large teams we ended up choosing the less "magical" way of doing things and now just avoid project/inject. We only have 3 components (of our total of 300+) that use project/inject which are closely related components with similar names, similar to your Tab examples. In general it's usually more beneficial to see exactly where props are coming from and going to in the DOM, despite it takes a bit more code. It's also way easier to ⌘-click-go-to definition for IDE's. Other than "it looks nice when looking at the DOM" are there other benefits you see this having?

    • @EmNudge
      @EmNudge ปีที่แล้ว

      Really insightful comment, thanks! I think practically the best use cases are probably limited to situations like the Tab component where the other option (props that must stay consistent) can look like a worse option. Spreading this pattern to more situations than that can probably cause more harm than good. Outside of that, the best use case is for 3rd party libraries that try to create an XML interface for their API design. That would mean something like the audio example I gave, a 3D renderer (react 3 fiber), or anything that feels like it fits well with the model of "this is a child of that". Similar to the difference of Canvas vs SVG. I think there is a real benefit there because we're moving to a more declarative pattern in general. We can start describing the result instead of making individual function calls and mutations.

  • @RecLatr
    @RecLatr ปีที่แล้ว

    Great gods from above, make this guy popular-ish

  • @duckyhub142
    @duckyhub142 2 ปีที่แล้ว

    Ah yes adding an output within an output, doesn’t make sense. But this video made it make at least 75% sense, so thank you. Can you make an output within an output within an output and so on? Can you make an addOutput inside an addOutput? I want to try these myself, thank you again for helping me somewhat comprehend this i/o technique.

  • @TengenKimetsuNoYaiba
    @TengenKimetsuNoYaiba 2 ปีที่แล้ว

    ( )

  • @MB-or1kh
    @MB-or1kh 2 ปีที่แล้ว

    Great video

  • @seanolson8246
    @seanolson8246 2 ปีที่แล้ว

    This a fantastically accessible explanation -- thank you!

  • @Yozak
    @Yozak 2 ปีที่แล้ว

    Are you the guy who did the hl2 citizen voice in that one tf2 video?

  • @YmanYoutube
    @YmanYoutube 2 ปีที่แล้ว

    Awesome video man, thanks for the help!

  • @ayodejiakinborewa282
    @ayodejiakinborewa282 2 ปีที่แล้ว

    Great video

  • @nolorecuerdes
    @nolorecuerdes 2 ปีที่แล้ว

    This is so good, thanks!

  • @dashameze
    @dashameze 2 ปีที่แล้ว

    thank you SO SO much!!!!! i'm russian and couldn't find any good video about UTF-8 on my language but you saved my student's ass 😆😆

  • @robpuchyr7407
    @robpuchyr7407 2 ปีที่แล้ว

    So well explained! Subbed!