- 15
- 87 821
EmNudge
United States
เข้าร่วมเมื่อ 6 พ.ย. 2015
Hey, I'm Emnudge - web and water enthusiast.
Live, Laugh, Lasagna, Luigi
Live, Laugh, Lasagna, Luigi
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
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
Thank you very much sir
Lovely
This video confirmed to me that Unicode is just as complex as people make it out to be. 🙂 However, it does make logical sense.
But how utf-8 translate back to poop emoji? There is no code point to check it?
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
thank you. its very clear and easy to undersrtand.
Wow!!! I fully agree that this is the best tutorial on unicode utf-x. Thanks!!!
This is so hard to follow... 2h later I am still under minute 8...
Just gem of this topic, definitely!
awesome explanation!
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
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!
Lost me at surrogate pairs 😢
Best content 💯
hands down best tutorial I watched in a while
buen video
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'
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.
Thank you
What did you use to create that document?
Js metaframework (next, remix) from scratch - please
So underrated
bro ur voice is so awesome, holy sheet
are u the dude from HL2 Best Impressions ??? Your Voice Is SO DOPE
Will be saving this video, knowledge might be useful.
hello mr sexy voice.
great video, thank you so much!
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.
Thanks so much for this tutorial much appreciated
Can you please send me the link for the article shown in the end of the video
Thank you! 🎉
I can’t make a regular entity into a trigger_ teleport. How do I do it?
0:34 "And the distance from me and jail is a 30 meter restraining order." ...Which is about 1 575 HU!
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
you sound like postal dude
Who's sarah? 03:20
bad...
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?
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.
Great gods from above, make this guy popular-ish
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.
( )
Great video
This a fantastically accessible explanation -- thank you!
Are you the guy who did the hl2 citizen voice in that one tf2 video?
Awesome video man, thanks for the help!
Great video
This is so good, thanks!
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 😆😆
So well explained! Subbed!