Better reading and writing URLs in modern JavaScript
Vložit
- čas přidán 9. 01. 2023
- You can read more about what else you can do with the URL constructor in my latest article on the Builder.io blog here: www.builder.io/blog/new-url
#js #javascript #webdev
More on what you can do with the URL constructor, and related patterns, in my full article: www.builder.io/blog/new-url
These videos are really making a good case for YT Shorts.
As a sales pitch?
no they're not. you can't even save them to a playlist
@@nnrmnlg Just bookmark them or save them to an external platform
@@nnrmnlg Watch history
Binge watching these shorts has taught me so much!!! Feel way more confident
BRO you are quickly becoming my favorite shorts coder!! You don’t just tell us what to use, but present a problem, explain why it’s a problem, and lastly a solution and why it solves previously said problem!! 🤩😮💨❤️ goddamn you gotta love a content creator like this
I totally agree with you, this style of teaching is so good it makes information stick into watchers’ head.
I like to imagine that these kind of video's prevents many bugs in the future, which means less money wasted on debugging, less frustration for the end users and many careers saved.
Bro I learned JavaScript in 2012 coming back to it over 10 years later is so wild 😂 there's so much new shit
This was a really good video, I almost forgot about template literals and how they behave with linebreaks.
Such quality in youtube shorts is hard to come by 🔥. Just watching this has improved the quality of my JS code
Wow this is so useful. Never knew about the URL constructor
Finally a video where the auto generated captions doesn't hide the actual captions. Thanks!
this is the first channel that gives solid advices, not opinionated "use this framework cause is better" stuff
nodejs tutorials be like "use the uuid package to generate uuid4" when nodejs has TWO ways of generating uuid4 natively lmao
I'm glad I spotted the new line char first.
Always putting out gems Steve
Thanks Josh!
Had ZERO clue about this. This is awesome
I like the idea of using a tagged template with a key-Val parameter object to make it more concise.
You are making great videos learning so much from them you are my fav youtuber now keep going and thank you making the videos.
Actually a useful short
love your content, not shallow knowledge, really helpful stuff 🎉
new URL is a cool trick, thanks! 😊
That tip is gold
oh boy! this is just my lucky day! thanks for such video man. keep up on doing great stuff!
your tips are always awesome. 🤯 i will start documenting your tips in my notes blog, so I'll always remember.
Thank you very much for that tiny, yet incredibly valuable, piece of information 🤝
thank you so much. I just encoded a url like the bug you shared couple of days ago. love your content
Good to know the Url stuff. But it's not necessarily a bug without encoding parameters.
it is, if you pass a line with + or another converted parameter it behave really different
Learned a lot in 1 min video😂 thanks!
Basic principles for BE developers... it always astounds me how script-kiddy FE/JS world is.
I don't know a damn thing about coding, but still found this interesting.
you will one day. since youtube shows this content, you will become eventually a coder
Very cool. I was actually tested on this during an interview. 😊
Fantastic pacing and very informative!
Best tech channel of all times
Love the content, keep up good work!
Learned something new today. Thanks!!
I’m getting addicted to your these hacks thanks you
Learning so much from you! Thanks!!!!
Congrats JS you've found out OOP. Nice video btw :)
Big thank you. Learned something new today
Nice one. You should have also added why encoding query Param is necessary.
Amazing!
Thanks for it I've always done it the "bad way"
Really helpful !! Thanks !!
Love this one. Another bug in the code is xss. Not only can malicious user supplied input cause an open URL redirect, but you can pull session cookies, jwts, etc.
Yes use this all the time🎉
Very very helpful
Thank you so much!
I like to use URLSearchParams so I can just pass an object and not setting each param separately like this.
Loved this
Oh nice and simple
Great tips!
Can you more videos please this is awesome ❤
This is gold
You can also easily make tags for template strings
Super great. keep going!
good one
Tnx bro 😎
Nice and clean
Thanks
Wow. Awesome
Really cool
The bigged "bug" her is the absence of Semicola :D
oh man this is great!
Thank you❤
There’s another potential bug… await doesn’t make sense outside of the context of an asynchronous function…
How good!
Thank you so much
Youre so genius
Good. Thank you
Amazing 🤩
you have to use await inside an async function, that is the first thing I noticed
Great ❤
Same vibes as learning about SQL parameters
Wow Thanks
I might be wrong but as far as I can remember, you can also pass query params as an object
Ok ok ok. Subscribed. ❤
holy shit, this is NICE
Didn't know about that. I usually set the URL as a string and then use URLSearchParams and pass in an object to the constructor and then pop it in the string and there you go
great video. wish i can save it
for handling rest apis in a type safe way give ts-rest a go!
Amazing
Like it
Nice
This is a cool tip but axios makes this super easy too. Just add the Params obj
I love it! thanks tho!
nice
Enjoy your reels with JavaScript better ways to use
That’s $100 worth of knowledge there in just 60 seconds and it’s free 🤯
Don’t you also need to be in an async function when using await?
True 😂
No need for modern Node :)
not always
you can download these if required
Also URLs have maximum length
You can also create an object with the query params and values and pass it to fetch directly.
Correct me if Im wrong plz
I don't have much experience with fetch but I think just one await will not lead to your desirable response as you will get stream of response. Instead you will want to use .json method or something along that and await it again to get response in json format. I just think it's an error too.
Also there's no error handling in the fetch
so usefull. We can use qs-string package too
why use a package when there's a native class for it
@@soniablanche5672 some db need query like {a:{b:3}} => [a][b]=3
You will need that
Also the top-level await
Top level await is supported in all modern browsers, and even Node.JS and Deno developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#
Steve how long have u been coding , i have never heard of this in my entire life :O
Welcome to Object world
Fun fact - the URL constructor is actually flawed! However it's unlikely to affect standard use
Good stuff here, but shouldn't that block of code be wrapped in a async function also?
The viewer doesn't get to see the three parameter variables' assignment, so for all we know they could've been encoded already. Hard to notice this as a big without a bit more context.
Also, when refactoring the code with searchParam.set, you turned query.text into just text.
Do you have any video for js performance?
Depending on how those variables get their values, there might also be a risk of an SQL-injection-like bug.
That is BE to worry about since it can only know what the db expects for escape. You can do some cleanup, but never trust it.