This was absolutely fantastic! I thought I was just going to learn about Svelte, but I was wrong! You've brought some new CSS pseudo selectors to my attention for the first time that I cannot wait to put into practice! I probably used JS in the past to achieve the same effect when it was not necessary. Thank you!
This guy consistently demonstrates higher-order conceptual insights while mesmerizing consciousness with the efficacy of Applied. And for doing so, I am humbly grateful.
I actually could not get it working correctly until I realized my placeholders needed to be set up like this placeholder=" " instead of like this placeholder="". I subtle difference but it makes sense! I hope this helps
@@Fireship that would be really awesome. Please show us from the basics to intermediate... i mean make that for all skill levels... And thanks a lot your reply👍👍👍👍👍👍👍👍
For those who are planning not to use Svelte be aware ! You need to add the display : block; property to the label elment for it to work ! This happened to me because ( i love to use svelte ) but I have to use php for another project and so I tried to replicate it but the text kept aligning in a weird way whenever I applied the position : absolute property. it took me a while to figure out until I found that in the global.css of svelte there was this property. So if you end up having this problem that is the fix to it :)
I have seen most of your videos you are very fast and advanced like your channel tittle(fire), super , but followers will not fast like you , nice videos.
Hay man, you putting out some great work, definitely keep it up! But i'd love to see some more Angular stuff. I love that framework, but there are not as much content creators out there for that.
Great demo Jeff, i really like how you explain and put content together. It is super easy to follow and very concise. I like to see video on XState.js.
At 3:03 you add a with a 'for' attribute though it has no link to the element, there is no 'id' with the same value for the given. A 'for' attribute with a value "email" - or any value for that matter - does not do anything like this.
Hi Jeff. I would like to hear your opinion on hosting web applications. I am currently writing a simple web app using Express for some backend, and Angular on the frontend side. I've been searching for different hosting options, and I saw that AWS has a great free tier. Can you maybe give your in-debt opinion ? Love the content, and love the channel, you're doing great work for the web community
The pseudo-class focus-within & placeholder-show seems to be from css4 and my VS doesnt seem to like those. Seems very experimental. Any solutions that keep the label from colliding with the input field ?
So I tired to follow a long a do this but it's not working as expected. 1. For some reason the strength is always between -3 or -2. 2. This password.search don't seem to be working as expected. 3. The animations don't work on Chrome or Chromium based browsers and sefari too
Easy and cool! Which JS framework do you prefer/suggest between Svelte, Vue, React and Angular? I already know Angular, but I want to try something "lighter" like VueJS,
My node application doesnot send email while hosting on cpanel. It perfectly works on my manchine but when i host it nothing happens. I am using node mailer library. Can u please make a quick video on that
I thought about the whole video: Yeah, nice clean code. But during password validation, my head nearly exploded.
So clean and elegant, incredible.
Thanks for noticing : ) I think that's about as concise as you can get with the JS .
This was absolutely fantastic! I thought I was just going to learn about Svelte, but I was wrong! You've brought some new CSS pseudo selectors to my attention for the first time that I cannot wait to put into practice! I probably used JS in the past to achieve the same effect when it was not necessary. Thank you!
I love Svelte. It's very close to pure HTML/CSS/JS and it's not owned by Google, Facebook, or Microsoft!!!
Why not just use pure HTML5?
This video is so densely packed with information it's just amazing. You can't skip 10 second without missing something vital. Keep it up
One of the best tutorials on the Internet, thank you Fireship!
I made the material animation in a project with javascript but I knew it should be a better way without js, so thank you so much, BRUTAL!
This is easily one of my favorite TH-cam channels. I love building stuff based on these videos.
This guy consistently demonstrates higher-order conceptual insights while mesmerizing consciousness with the efficacy of Applied. And for doing so, I am humbly grateful.
How on earth can Any human write SUCH Beautiful and Elegant code. My mind is Just blown. I don't know what else to say. I'm lost for words.
Can you do a video on ::before ::after with real life example
That might make a good 100 second topic
Ya do a video on :: before and ::after
I ask for that video about ::before and ::after
Man this is a great idea, hopefully you'll do it Fireship :D
i used ::after to make a flashing underscore css animation (so it looks like terminal)
This video just blown my mind 🤯 I just took the road to learning modern Javascript
Been waiting for something like this for a while.
Took the words right outta my mouth
@Monkey_Man256
That's how a professional does the job!
Even though as a web dev, I already know a lot of this stuff, still I learned about focus-within which is really useful. Thanks man, keep it up!
I actually could not get it working correctly until I realized my placeholders needed to be set up like this placeholder=" " instead of like this placeholder="". I subtle difference but it makes sense! I hope this helps
I would love to see an admin panel ui complete video...big request to you..
I like that idea! Might have to break it down into series tho.
That would be lots of fun to watch tbh
I want that too. And if it's VueJs, that's gold above all.
Vue or React would be awesome
@@Fireship that would be really awesome. Please show us from the basics to intermediate... i mean make that for all skill levels...
And thanks a lot your reply👍👍👍👍👍👍👍👍
If I had the money right now, I would gift this man a Life Time subscription of Netflix....... You Rock !
Top content, and that description of the final design right at the beginning detailing the behaviour of each element was a touch of class.
10/10 of your tutorials are interesting and immediately applicable. Keep it up man! 👏🏼
For those who are planning not to use Svelte be aware ! You need to add the display : block; property to the label elment for it to work !
This happened to me because ( i love to use svelte ) but I have to use php for another project and so I tried to replicate it but the text kept aligning in a weird way whenever I applied the position : absolute property.
it took me a while to figure out until I found that in the global.css of svelte there was this property.
So if you end up having this problem that is the fix to it :)
I have seen most of your videos you are very fast and advanced like your channel tittle(fire), super , but followers will not fast like you , nice videos.
Your videos are the best! Especially how concise they are
Quality is amazing! I was actually looking for live form validation stuff. You are on time!
This is what I like, doing it myself. Even though there are a wide variety of libraries out there. Thank bro
the world needs more videos like this!! next episode: javascript cures cancer
When a new video uploaded by fireship is the moment of excitement eventhough working for a long boring day. Love you and your video style always Jeff.
You always deliver when it is most needed ! 👌👌👌 Super Great video !! Had to update the comment after watching it all !! Great content !!
Hay man, you putting out some great work, definitely keep it up! But i'd love to see some more Angular stuff.
I love that framework, but there are not as much content creators out there for that.
Love that it’s a Svelte tutorial. ❤️
Not surprising. Fireship.io as usually delivering high quality and unique contents.
You decreased the pace a little. That's a huge plus. Lovely. Thank you!
That's great. Please keep coming with such cool tutorials.
Amazing what you can do with just css... wow. Most of this stuff i would have handled with state in React. Learned a lot from this video.
Awesome video! I've learned so much about CSS from your videos. Please keep up the great work!
Very nice! Please more pure js/css. Not everyone wants to use heavy frameworks
Loved this format
Always love your videos man!
This was way too interesting, more videos like this please!!
You should always add that "Magic" meme with the guy from Ultra Spiritual Life to the end of your videos :)
A video on Epubjs + 🔥store.
I know I've said it before, but am keen to see how you would bring it to life.
Also, big fan of your UI skills. Always.
Great demo Jeff, i really like how you explain and put content together. It is super easy to follow and very concise. I like to see video on XState.js.
Your contents are amazing and help me improve as a student so much. Thank you for this amazing tutorial!
I don't care about what you do; Just seeing the power of CSS amazes me every time, no matter what you do.
I learned so much- this was very informative and so concise.
Awesome tutorial! Keep going, thanks.
What a next level video. Thank you!
Very cool, straight and direct, thanks
This is the content I live for
It is exciting how you are keeping up with that many technologies, and you not getting overwhelming! What are your eating and sleeping habits? :)
Very elegant approach!
Yes I want more :) Thank you very much!
Can you make a video on a quiz app using HTML, CSS, JavaScript. Really like your videos and you should keep making videos like this. 👍👍👍👍👍👍👍👍
Svelte looks elegant.
Brilliant tutorial! Thanks
Awesome. I'll make this using Vue.js
You could've just used RegExp.test(str), which returns boolean right away, instead of str.search(RegExp)
pretty sure he does it that way for readability purpose
More svelte please 👌
those pseudo selectors ❤❤❤ . could you please make a video on CSS pseudo selectors.
If my boss complains about too much animations next week I'll point him to this video.
I would like to see a complete website covering all the concepts like a complete tutorial list
Great video love this channel
thanks, used some ideas from here in prod app
always quality content
At 3:03 you add a with a 'for' attribute though it has no link to the element, there is no 'id' with the same value for the given. A 'for' attribute with a value "email" - or any value for that matter - does not do anything like this.
And he's done it again :D
Svelte is amazing. I wish it had better job opportunities. I'd leave React for it right away.
Awesome video!
Dude! Make complete video on docker! Like Full stack app or something!
Love your videos!
Hi Jeff. I would like to hear your opinion on hosting web applications. I am currently writing a simple web app using Express for some backend, and Angular on the frontend side. I've been searching for different hosting options, and I saw that AWS has a great free tier. Can you maybe give your in-debt opinion ? Love the content, and love the channel, you're doing great work for the web community
Positioning in CSS in 100 seconds and beyond, where you can explain vertical alignment and other weird things.
hey, I like your videos.. nice content keep it up..
Can you please make a video on how to use parsley js to validate if the email is already in use
See this shit right here? This the quality content I subscribed for, thanks alot!!
Outstanding!
Proggressive Web Apps video please.
Amazing 🤯
can you share the background audio details used at the beginning of this video? I love synthwave music ❤
Awesome 🔥
can you manipulate the line which you use to type words like the thing that appears anywhere we want to type and what is it called?
can you do a video on implementing the login form? like the code that makes it useful?
The pseudo-class focus-within & placeholder-show seems to be from css4 and my VS doesnt seem to like those. Seems very experimental. Any solutions that keep the label from colliding with the input field ?
another great one! out of curiosity...What's that intro song?
My boss: oh what did you use for your portfolio site? Squarespace? Wordpress?
me: nah i used Fireship
css illustration with ::before and ::after
how did i literally search for this exact thing yesterday
Big Brother is watching you
Thanks man!
Can you do a series of video on how to turn a plain (ie. no js framework) website into a PWA?
Never used svelte before. Why do I need to restart the server all the time to see the changes I've madet?
So I tired to follow a long a do this but it's not working as expected.
1. For some reason the strength is always between -3 or -2.
2. This password.search don't seem to be working as expected.
3. The animations don't work on Chrome or Chromium based browsers and sefari too
same issue for me.. i don't see the validation meter getting displayed using chrome
Easy and cool! Which JS framework do you prefer/suggest between Svelte, Vue, React and Angular? I already know Angular, but I want to try something "lighter" like VueJS,
I love you. Nuff said.
Would follow this tutorial.. but my school project did not allow Regex to be used.
Can you do the same video using web animations maybe even with angular?
Thanks for not using react🤣🤣
Just joking, love your videos brother
all versions of safari does not support animations and transitions on pseudo elements.
My node application doesnot send email while hosting on cpanel. It perfectly works on my manchine but when i host it nothing happens. I am using node mailer library. Can u please make a quick video on that
use .test instead of search, that way you get rid of the - 1
You should get a de-esser to clean up the audio a bit.
this is amazing
:not selector is not widely supported, instead you can do like input:empty+label { initial state } and .field:focus-within { selected state }
Which music beats do you use ??