Purple was the favorite color of Rebecca Alison Meyer who passed away twelve hours into her sixth birthday from brain cancer. Rebecca was the daughter of prolific CSS standards pioneer Eric Meyer. Eric kept his online colleagues informed of the battle his daughter and family were waging through blog posts and brief updates on Twitter.
I will forever love this logo. I have a 4 year old son and would be so devastated if I lost him. I cried watching this, and it makes me wonder if while maintaining my CSS classes might be painful at times, it could never be as painful as losing your own child.
@@SuperM789 The most used JavaScript logo is the solid yellow square and JS lettered in black at the lower right corner. It is universally accepted and closest to being called the “Official JavaScript Logo”. Many high-profile websites like Wikipedia and Codeacademy use this logo to represent JavaScript. The new CSS logo is intended to be inline with this one, not the badge.
@@SuperM789 They made this to fit better with the (new) square logos. JS, TS, WA, etc. all are squares. The only thing with badge logo now is HTML. Who knows, they might make that square soon aswell.
Dont bother, its still a garbage fire. Now you are going to have 20 components to update as they all have different light and dark colour variables on top of your native stuff.
0:47 align-content 1:05 @property 1:34 @starting-style 2:05 round(), rem() & mod() math functions 2:23 light-dark function 2:42 user-valid & user-invalid pseudo-classes 3:17 interpolate-size 3:41 the heart-wrenching story behind "rebeccapurple", the background color for the new official CSS logo 💜
This video prompted me to seek out Eric Meyer's blog and read his posts from 2013 and 2014 and I was genuinely sobbing until I calmed down enough to write this comment. He is an incredible writer. He is so full of love and so full of grief, and he has such a beautiful way of writing about his love for his daughter. He has a unique ability to let me feel how much he loves Rebecca through just a couple of blog posts. Few things are more cruel than that she only got to experience being Rebecca for six hours, but no one could be a better witness of her life than her father Eric. No one could share the gift of Rebecca's life with the world better than Eric can.
I read and used all his books and articles before reading his accounts of Rebecca's passing, back in 2014. He was incredibly open and they were beautifully written.
Eric Meyer is a legend, back in 2006 I was reading his CSS book every morning when commuting to my HTML/CSS job, he taught the basics I still remember 18 years later ❤
Man that video really made my eyes in tears. Thank you for sharing the story of the CSS creator with us i didn't know that. I am a father of 6 years old girl and i can't imagine the pain that he went through :(
You *can* affectively interpolate from height: 0 to height: auto, by interpolating grid-template-columns: 0fr to grid-template-columns: 1fr (with overflow: hidden). Kevin Powell showed that in one of his vids
Awesome video as always! Btw although you can't animate on height: auto; as you said, and sadly interpolate-size is only available in Chrome atm.. But you can animate on the fr unit, so if you make a grid container and change the row from 0fr to 1fr it will transition smoothly
They've managed to improve CSS continuously over the last 25 years (the features in this video to prove it). In 5 years CSS will be better, but not replaced. What might change, in the next decade is whether people are still in enough control of the language as to include a touching memorial into it.
1:00 "Why nobody thought to make this a thing 25 years ago." But we still won't be able to use it for another 10 years because browser upgrade adoption takes forever.
Everyone I know has their browser on very close to the newest version, because it does that automatically like every month nowadays. So I'd say at most a year, if somebody hasn't updated their browser in that time they can enjoy their security issues and broken websites.
@@svenbjorn9700 The newest versions do anyway. Not supported on chrome 122 and safari 17.3, according to caniuse. They were released this year and a good chunk of our users are definitely using that or worse. So I can't use it anyway. Would be nice if everyone was on the latest but they're not.
You didn't have to break my heart right when the video was about to end 😭 I'm not an emotional man, but since I've had my daughter and I hear something like a child passing away it brings tears to my eyes and fills my heart with sadness. I can't imagine going through losing a child, it's unbearable to even think about.
That's a heartbreaking story that serves to reinforce how fortunate I am to have a healthy four-year-old. I can only imagine his grief, and imagining alone is more than enough to bear. I expect I'll think of her story every time I see a similar shade of purple. It's also always heartwarming and bittersweet to see the "hi mom" in your videos. Thank you for sharing so Rebecca can live on in some small way with all of us.
Purple is a color similar in appearance to violet light. In the RYB color model historically used in the arts, purple is a secondary color created by combining red and blue pigments. In the CMYK color model used in modern printing, purple is made by combining magenta pigment with either cyan pigment, black pigment, or both. In the RGB color model used in computer and television screens, purple is created by mixing red and blue light in order to create colors that appear similar to violet light.
@@chillyvanilly6352 Thank you, yes you are correct. I meant the importance of the colour not the composition. It is also the colour that represents my daughters illness. The internet is the internet, just a big collation of brains trying to swim to the surface. Apparently colour composition is important to some. :P
I don’t think I have fiddled with raw CSS since the first version of Bootstrap. Hard to believe I even have a career in web development. I can barely wield it.
I have recently started Typescript and realized why it is called "Type"Script? And then did a Tsc sample.ts sample.js and the difference was clear to me.
@@CathrineMacNiel all these frameworks it has and its popularity make it seem serious. But if a good developer sees someone do backend in JS, can’t take them seriously
Depends on what you're animating, just like it does now. Plus the impact depends heavily on how much you do it and, I'd assume, how much of the page needs its layout redone. I'd be more worried about the :has() right before. That one's a real pain to optimize for a browser.
@cameron7374 That's the thing: Going about animating layout related properties (height, width) with translate, scale, etc is a bit more cumbersome in some cases but it does make a tangible difference. Since search engines appear to be a bit paranoid about the CLS too, I was just wondering if that was taken into consideration by browser vendors or if it's out of focus for what's otherwise a great addition. Regarding :has(), I agree, but I haven't seen any noticable drop in performance in my projects this far (using it sparingly though). Anecdotal evidence, I know. :D It will be really interesting to see what the best practises are going to be for using it (if at all).
@@copperbadge1 Though if you need the animation to affect the layout, you can't do that with transforms, except maybe emulating it in really hacky ways for some situations.
Not a programmer, but I still watch your uploads because there is always something interesting, new. I wouldn’t know about Rebeccapurple otherwise, now I know :)
3:41 I had to use `interpolate-size` to fix an accordion animation last week! So glad to see that its now part of baseline css. Edit: I was wrong, looks like it's not part of baseline css. Only available in chromium, and experimental in opera.
CSS has never ceased to amaze me. I remember back when CSS3 Dropped, I could now do rounded borders without using the “image corner” trick, I could use text and box shadows without images, and so much more. It’s always browser adoption that concerns me about the new features. (Oh yeah CSS3 Also introduced flex box and grid which allowed you to create gridded layouts without tables)😊
Centring a div is not hard. You can simply use display: flex; justify-content: center; align: items: center; (On mother div) and all the children should get centred. Or use stuff as "self" -> self-align: center; etc etc.OK whatever, this update is cool.
I hit $113k today. Thank you for all the knowledge and nuggets you had thrown my way over the last months. Started last month 2024. Financial education is indeed required for more than 70% of the society in the country as very few are literate on the subject.
It's essential for you to have a mentor to keep you accountable. Myself, I'm guided by Evelyn Vera. for years and highly recommend her I focus on him. To be honest, I almost didn't buy the idea of letting someone handle growing my finance, but so glad I did.
That's the first time a Fireship video brought a tear to my eye.
Same
Father of a daughter of 8 here. Literally crying right now.
For sad reasons. Some of them have made me laugh hard enough to have tears.
This is my second, the one with his mom's story got me too 🥲
@@yuri0001 egzactly
Going from happy that CSS got better to almost crying was not on my to do list Fireship
Character development
same here, same here, my eyes did produce water
*Almost* ^^
I only didn’t cry cause I was in my universities library
I am still going to use Flexbox though.
Purple was the favorite color of Rebecca Alison Meyer who passed away twelve hours into her sixth birthday from brain cancer. Rebecca was the daughter of prolific CSS standards pioneer Eric Meyer. Eric kept his online colleagues informed of the battle his daughter and family were waging through blog posts and brief updates on Twitter.
Rebecca purple is the saddest color I now know...
That's so sad
RIP, her name and favorite color lives on
do you even GPT bro?
Companies must stop poisoning our food period. Stop adding ingredients like red No. 3 to candy and cereal
RIP Rebecca
Cyberpunk Edgrunners also apply
I cried when I read it. First time crying to a fireship video.
"For almost twelve hours, she was six" really hit me hard tbh
That Rebecca purple emotional hit was not something I expected to be hit with on a Fireship video but I love it.
Now I will want to cry every time I see CSS logo...
@AVANGARD25 just replying to your comment so you can see it got 0 likes after 1 month
I will forever love this logo. I have a 4 year old son and would be so devastated if I lost him. I cried watching this, and it makes me wonder if while maintaining my CSS classes might be painful at times, it could never be as painful as losing your own child.
i prefer the old one. they should've just changed the background color of the old logo. now it doesn't fit visually with the html5 and js badge logos
@@SuperM789 The most used JavaScript logo is the solid yellow square and JS lettered in black at the lower right corner. It is universally accepted and closest to being called the “Official JavaScript Logo”. Many high-profile websites like Wikipedia and Codeacademy use this logo to represent JavaScript.
The new CSS logo is intended to be inline with this one, not the badge.
@@SuperM789 HTML is the odd one now... JS logo is also square
@@SuperM789 They made this to fit better with the (new) square logos. JS, TS, WA, etc. all are squares. The only thing with badge logo now is HTML. Who knows, they might make that square soon aswell.
@@patrickrijkee that sucks. i prefer the badges
00:55 1. Align Content for Block Elements
01:07 2. @property at-rule
01:35 3. @starting-style
02:13 4. round(), rem(), mod()
02:27 5. light-dark function
02:46 6. :user-valid pseudo class
03:19 7. interpolate-size
03:41 is someone cutting onions?
03:41 8. cry sequence
3:57 8. Unironically crying session :(
@@NovaTech2010 Came here to add this XD
Im pretty sure align-content property was added way before that, i literally remember using it and all it does is aligns content vertically
@@Lumither-404 Only for display:flex/display:grid elements, not block elements! centering an element vertically no longer requires flex or grid
As a backend dev, I look forward to less vehemently avoiding CSS.
Dont bother, its still a garbage fire. Now you are going to have 20 components to update as they all have different light and dark colour variables on top of your native stuff.
I recently discovered that ChatGPT is much better at CSS than me. I'm happy with this.
CSS, HTML and Javascript were the worst things to ever hit the internet! PHP was pretty shit too!
@@PrivateSi If you say so, you must be really young and didn't know the HTML world before CSS
@@PrivateSi and how would you use the internet without html? :o
0:47 align-content
1:05 @property
1:34 @starting-style
2:05 round(), rem() & mod() math functions
2:23 light-dark function
2:42 user-valid & user-invalid pseudo-classes
3:17 interpolate-size
3:41 the heart-wrenching story behind "rebeccapurple", the background color for the new official CSS logo 💜
This video prompted me to seek out Eric Meyer's blog and read his posts from 2013 and 2014 and I was genuinely sobbing until I calmed down enough to write this comment. He is an incredible writer. He is so full of love and so full of grief, and he has such a beautiful way of writing about his love for his daughter. He has a unique ability to let me feel how much he loves Rebecca through just a couple of blog posts. Few things are more cruel than that she only got to experience being Rebecca for six hours, but no one could be a better witness of her life than her father Eric. No one could share the gift of Rebecca's life with the world better than Eric can.
I read and used all his books and articles before reading his accounts of Rebecca's passing, back in 2014.
He was incredibly open and they were beautifully written.
well said
We could align center 25 years ago because the whole page was a element
... and we had a element too!
@@PaulMcCannWebBuilder I know!
we got dark-light mode in CSS before GTA VI
and silksong too
And the end of America! Rockstar fell off hard.
😂😂 @@KingThrillgore
@@KingThrillgore the end of woke more like
@@KingThrillgore You mean the golden age of America
Eric Meyer is a legend, back in 2006 I was reading his CSS book every morning when commuting to my HTML/CSS job, he taught the basics I still remember 18 years later ❤
Man that video really made my eyes in tears. Thank you for sharing the story of the CSS creator with us i didn't know that. I am a father of 6 years old girl and i can't imagine the pain that he went through :(
I wasn't expecting to get a feels at the end of a Fireship video
I prefered the old logo until the end. May you rest in peace, Rebecca ❤️.
Now I'll cry every time i write CSS.
You didn't cry every time you wrote CSS before?
@@arcaegecengiz LMAO
+sadness on the usual frustration
@@arcaegecengiz best reply award goes too ...
I wish they'd update the old logo to feature the RebeccaPurple color instead of the blue to truly make it perfect.
how you managed to start from sarcasm and ended in wholesome in 4 minutes is beyond me
Didn't expect to be bawling my eyes out at a fireship video
You *can* affectively interpolate from height: 0 to height: auto, by interpolating grid-template-columns: 0fr to grid-template-columns: 1fr (with overflow: hidden).
Kevin Powell showed that in one of his vids
but no height: auto to height: auto
Awesome video as always!
Btw although you can't animate on height: auto; as you said, and sadly interpolate-size is only available in Chrome atm..
But you can animate on the fr unit, so if you make a grid container and change the row from 0fr to 1fr it will transition smoothly
My dude, thank you so much for talking about Rebecca--well done.
The last part of the video hits right in the feels. I'm glad that the color is named RebeccaPurple 💜💜💜
It's my forever test color! Hope whatever technology replaces CSS in 5-10 years will keep this color for ever!
i dont think css gets replaced unless the building blocks of the web itself changes
They've managed to improve CSS continuously over the last 25 years (the features in this video to prove it). In 5 years CSS will be better, but not replaced.
What might change, in the next decade is whether people are still in enough control of the language as to include a touching memorial into it.
I support this calmer tone to your presentation. Wogwon, my guy.
1:00 "Why nobody thought to make this a thing 25 years ago." But we still won't be able to use it for another 10 years because browser upgrade adoption takes forever.
I thought he said all major browsers support it right now today.
Everyone I know has their browser on very close to the newest version, because it does that automatically like every month nowadays.
So I'd say at most a year, if somebody hasn't updated their browser in that time they can enjoy their security issues and broken websites.
@@svenbjorn9700 The newest versions do anyway. Not supported on chrome 122 and safari 17.3, according to caniuse. They were released this year and a good chunk of our users are definitely using that or worse. So I can't use it anyway. Would be nice if everyone was on the latest but they're not.
Your comment is from 25 years ago buddy. LOL
Just use it and let it break. The long tail is caused by coddling stragglers.
You didn't have to break my heart right when the video was about to end 😭 I'm not an emotional man, but since I've had my daughter and I hear something like a child passing away it brings tears to my eyes and fills my heart with sadness. I can't imagine going through losing a child, it's unbearable to even think about.
I want that mug 0:31
also, RIP Rebecca
I want that mug
You get it for free if you attend css day in Amsterdam, I have 2 : )
Rebecca purple lore hit me different....
At First, I thought the new logo was ugly, now it's absolutely beautiful and I want to hug my loved ones 😢❤
different? normal people would feel the sadness, so if you're different, does that mean.....
Damn. Wasn't ready for that hard hitting ending!
That's a heartbreaking story that serves to reinforce how fortunate I am to have a healthy four-year-old. I can only imagine his grief, and imagining alone is more than enough to bear. I expect I'll think of her story every time I see a similar shade of purple. It's also always heartwarming and bittersweet to see the "hi mom" in your videos.
Thank you for sharing so Rebecca can live on in some small way with all of us.
Centering that just works. After all these years. I'm floored.
yep gotta update my tutorial\ website site now lol - thank you as always man, your videos never disappoint
I can't code, why am i here?
coz
I dont know man, I dont know
What they sed ^
Lol, I used to watch these vids before i became a dev, before i even considered becoming one 😂
CSS isn't code :^)
This was an excellent video. I love CSS and the new changes and this little tidbit about Rebecca Purple was touching. Keep being awesome Mr. Fireship!
3:44 Geezz I didn’t see that coming
I was not expecting the feels at the end. Damn it fireship! That's so sad, but such a beautiful gesture
This color shows how empathetic humans can be. I really like that you included that.
Thanks for the feels, fire ship guy.
My daughter is also six, her favourite colour was also purple before she got sick. Purple is a very special colour.
Purple is a color similar in appearance to violet light. In the RYB color model historically used in the arts, purple is a secondary color created by combining red and blue pigments. In the CMYK color model used in modern printing, purple is made by combining magenta pigment with either cyan pigment, black pigment, or both. In the RGB color model used in computer and television screens, purple is created by mixing red and blue light in order to create colors that appear similar to violet light.
@@Specoups I don't think he/she meant "special" in the sense of "its composition"/etc. ...
@loadiam sorry to "hear" that! :/
@@chillyvanilly6352 Thank you, yes you are correct. I meant the importance of the colour not the composition. It is also the colour that represents my daughters illness. The internet is the internet, just a big collation of brains trying to swim to the surface. Apparently colour composition is important to some. :P
@@chillyvanilly6352 might be a bot/AI
@@loadiam I am very sorry to hear about your daughter. Rebeccapurple is the favorite color of brave wise girls, and your daughter is one of them.
Thanks so very much for your bringing the latest to us!
Rebecca will live forever in our memories 🕊️
I'm using Rebeccapurple now for my side projects from now on. She'll live forever in our code too!
The end was truly great. Thanks.
0:45 Alternatively, it's on Jumada al-Awwal 16, 1446 AH and you're watching the Fireship Code Report Series about CSS Fixes and 7 New Features.
Up
based
Based 😂❤
I don't get it
why should he use the Hijri calendar?
cringe
I needed interpolate-size two years ago ... really nice changes, can't wait to use them!
CSS = Chronic Styling Stress
CSS: Can't style shit
This was just amazing. I love the way you convey the information. It's just spectacular
2:29 tf was that. Should've warned us.
Wow, hitting me hard with the drive-by feels right at the end there
I don’t think I have fiddled with raw CSS since the first version of Bootstrap. Hard to believe I even have a career in web development. I can barely wield it.
Never too late to learn :)
Damn, the last part hit me in the heart. I didn't start this video expecting this kinda heartbreak.. Wow...
1:00 Seriously, why did it took so long??
Go back for english class and pay attention this time. 😂
What is that?😂😂😂😂
@@M0dr0 If you looked into his channel, you'd see English is not his first language
You're right, I didn't know about those features, thanks bro
Well, that video was definitely !important
thats nice we were needing this
I did NOT expect that trauma drop at the end, wtf. Caught me way off guard.
R.I.P Rebecca, 6 is far too early :(
Didn’t expect to tear up from a fireship video
1:24 CSS getting types before JavaScript is brutal
I have recently started Typescript and realized why it is called "Type"Script?
And then did a Tsc sample.ts sample.js and the difference was clear to me.
JavaScript will NEVER EVER get types.
@@CathrineMacNiel that’s why it will never ever be a serious language. Only for front-end user interaction.
@@saeruji it already is a serious language, everywhere. Maybe not for you, but that doesn't matter in the grand scheme of things.
@@CathrineMacNiel all these frameworks it has and its popularity make it seem serious. But if a good developer sees someone do backend in JS, can’t take them seriously
Thank you for featuring Eddy Wally. 😊
0:25 The video ends here. Thanks for watching, don't forget to like the video, comment, subscribe and activate the notification bell.
That wholesome touch to this report was just 🔥 You're the shit man
As a person who couldn't create a decent front-end of the application to save my life, I must say: yes.
As the father of my first child this month, and someone that read Eric Meyer stuff back in the day, this code report hits different.
RebeccaPurple is not only a touching back story, it's also a really nice shade of purple to build and test with.
Indeed, and luckily (?) for me I like purple, so I'm definitely gonna use it.
Can we finally limit the number of items displayed under a dropdown with a scrollbar?
I have been writing CSS for years now and I didn't know that align-content works on a block element.
Because it hasn't worked like that for years, this is a recent-ish thing.
just the other day was doing some quick css for something and out of no where that Rebecca purple came on top and damn
3:17 hold on a sec, doesn't this trigger layout shifts, leading to a poor CLS score?
Depends on what you're animating, just like it does now.
Plus the impact depends heavily on how much you do it and, I'd assume, how much of the page needs its layout redone.
I'd be more worried about the :has() right before.
That one's a real pain to optimize for a browser.
@cameron7374 That's the thing: Going about animating layout related properties (height, width) with translate, scale, etc is a bit more cumbersome in some cases but it does make a tangible difference.
Since search engines appear to be a bit paranoid about the CLS too, I was just wondering if that was taken into consideration by browser vendors or if it's out of focus for what's otherwise a great addition.
Regarding :has(), I agree, but I haven't seen any noticable drop in performance in my projects this far (using it sparingly though).
Anecdotal evidence, I know. :D
It will be really interesting to see what the best practises are going to be for using it (if at all).
@@copperbadge1 Though if you need the animation to affect the layout, you can't do that with transforms, except maybe emulating it in really hacky ways for some situations.
Not a programmer, but I still watch your uploads because there is always something interesting, new. I wouldn’t know about Rebeccapurple otherwise, now I know :)
I can't believe I'd come across a jumpscare in a fireship video 💀 1:47
My favourite narration on TH-cam by a long shot.
3:41 I had to use `interpolate-size` to fix an accordion animation last week! So glad to see that its now part of baseline css.
Edit: I was wrong, looks like it's not part of baseline css. Only available in chromium, and experimental in opera.
It is supported only in Chrome right now
@cool_boyua you're right! Looking at the MDN docs, it's not part of baseline css.
CSS has never ceased to amaze me. I remember back when CSS3 Dropped, I could now do rounded borders without using the “image corner” trick, I could use text and box shadows without images, and so much more. It’s always browser adoption that concerns me about the new features. (Oh yeah CSS3 Also introduced flex box and grid which allowed you to create gridded layouts without tables)😊
now we know he has a daugter. we need a full biography of fireship!
HE did an interview a few months ago and they show his house and his family so we already had that lore
Love that `light-dark` is getting some love. Great for theming!
2:14 Who's rem() ?
Broo 🥰🥰🥰
A man of culture, but Gluttony takes
nice reference but too bad someone got too hungry
Everyone talking about getting hit in the feels while watching a Fireship video and I was fine until I saw this comment.
You are by far the best programmer channel.
No one does it like you do.
RIP Rebecca ❤
Eric's reset sheet has helped me so much.
Good luck, Eric.
aitutorialmaker AI fixes this. CSS changed forever; 7 new features.
You kick some serious ass man !
Tanks
Centring a div is not hard. You can simply use display: flex; justify-content: center; align: items: center; (On mother div) and all the children should get centred. Or use stuff as "self" -> self-align: center; etc etc.OK whatever, this update is cool.
The only video that brought tears to my eyes that isn't data structures and algorithm... Thanks fireship
Fireship WebDev videos sure are more interesting since I started learning HTML, CSS and Javascript in school. Also RIP Rebecca
Light dark css prop made my decade, thanks Fireship
To his early statement, I mean center tag was a thing in html remember.
I never imagined to cry watching a Fireship video, yet here we are.
Soooo genius how he mentions all major browser and uuups….intentionally EDGE is forgotten 😂 0:38
Edge is chrome wearing a blue trench-coat.
Chrome is Edge's father
Edge is based on Chromium, which is the base code of Chrome. It's practically the same. Edge is barely a separate browser
The browser support is the same
In what world, what timeline, did I fell to cry on a Fireship video :( Thanks for the vid, it was great, as always.
I hit $113k today. Thank you for all the knowledge and nuggets you had thrown my way over the last months. Started last month 2024. Financial education is indeed required for more than 70% of the society in the country as very few are literate on the subject.
wow this awesome 👏 I'm 37 and have been looking for ways to be successful, please how??
It's essential for you to have a mentor to keep you accountable. Myself, I'm guided by Evelyn Vera. for years and highly recommend her I focus on him. To be honest, I almost didn't buy the idea of letting someone handle growing my finance, but so glad I did.
My family needs saving from poverty 😭, can I get Ms. Evelyn Vera direct info.🙏
Sure!!..I have her WhatsApp digits
+1
This is my first time commenting on fireshipio videos 🙌🏾🙌🏾
Can't even imagine what they're going through. Fuck Cancer.
RIP Rebecca.
This is some EXCELLENT timing for my return to webdev
Who's cutting onions? What a thoughtful tribute. RIP Rebecca.
Thank you purple 🙏🏾💜
Bro 0:12!!!
Too soon
Love your content, Sudanese fan
:first-child
wow. I did not anticipate tearing up over a video about CSS.
What a beautiful color. I am not crying, you are. Best color ever.
That last info hit hard.