LBRY Block Explorer

LBRY Claims • 5+-css-features-that-will-change-how-you

c7aaf49bc644133a868be7666fd2b937ed16a377

Published By
@WebDevSimplified
Created On
5 Sep 2023 16:19:36 UTC
Transaction ID
9aa8cffca85ab4630c0cdecc5e9a7797f77871d65e4aa87ed0b0cda44b240f74
Cost
Safe for Work
Free
Yes
5+ CSS Features That Will Change How You Code
2023/2024 will be crazy years for CSS. The number of new features being added is unreal, but most importantly those new features are absolute game changers. Things like anchor, native CSS scoping, animating display, and so much more have me incredibly excited for the future of CSS. I haven’t been this excited for new CSS since Flexbox/Grid came out.


? Materials/References:

CSS Nesting Video: https://youtu.be/SVScyx4cJi8
Anchor CSS Video: https://youtu.be/B4Y9Ed4lLAI

? Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:29 - Scoped CSS
05:36 - nth-child of
08:42 - initial-letter
10:36 - @starting-styles
14:08 - Anchor


#CSS #WDS #ModernCSS
...
https://www.youtube.com/watch?v=y8CYSwHXVNE
Author
Content Type
Unspecified
video/mp4
Language
English
Open in LBRY

More from the publisher

Controlling
VIDEO
THE N
the-new-use-hook-is-a-react-game-changer
lbry://@WebDevSimplified/the-new-use-hook-is-a-react-game-changer
Full Video: https://youtu.be/zdNF9FJWJ8o ? Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified #Shorts ... https://www.youtube.com/watch?v=0HJPmvJWVBg
Transaction
Created
7 months ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
JAVAS
javascript-was-so-bad-they-had-to-add-a
lbry://@WebDevSimplified/javascript-was-so-bad-they-had-to-add-a
JavaScript used to be the wild west when it came to hidden errors. So many unintuitive mistakes/errors were hidden which is why JavaScript introduced strict mode to clean up those weird interactions. Strict mode adds a bunch of different rules mostly around fixing potential bugs and surfacing them to the developer. ? Materials/References: ES6 Modules Video: https://youtu.be/cRHQNNcYf6s ES6 Modules Article: https://blog.webdevsimplified.com/2021-11/es6-modules ? Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified ⏱️ Timestamps: 00:00 - Introduction 00:27 - How to enter strict mode 02:30 - Reason #1 for strict mode 04:10 - Reason #2 for strict mode 05:56 - Reason #3 for strict mode 06:18 - Reason #4 for strict mode 07:19 - Reason #5 for strict mode 08:35 - Reason #6 for strict mode 09:47 - Reason #7 for strict mode 11:28 - Reason #8 for strict mode #StrictMode #WDS #JavaScript ... https://www.youtube.com/watch?v=G9QTBS2x8U4
Transaction
Created
1 year ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
THIS
this-is-unbelievably-powerful
lbry://@WebDevSimplified/this-is-unbelievably-powerful
Mutation Observer is an amazing tool in JavaScript that allows you to easily and efficiently observe any form of DOM changes. This can include anything from simply adding/removing nodes, all the way to more complex things like changing text/attributes. ? Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified ⏱️ Timestamps: 00:00 - Introduction 00:40 - Mutation Observer Basics 05:50 - Observe Attributes 07:45 - Observe Text 09:35 - Observe Subtree #MutationObserver #WDS #JavaScript ... https://www.youtube.com/watch?v=Mi4EF9K87aM
Transaction
Created
1 year ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
CSS A
css-anchor-is-the-best-new-css-feature
lbry://@WebDevSimplified/css-anchor-is-the-best-new-css-feature
I cannot believe this is a feature coming to HTML/CSS. Anchoring elements used to be only something you could do with hundreds of lines of complex JavaScript code, but now it can be done with a single line of CSS. I am incredibly excited for this feature to be production ready as it has the potential to massively change web development. ? Materials/References: Chrome Flags: chrome://flags/#enable-experimental-web-platform-features Anchor Chrome Blog Article: https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning ? Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified ⏱️ Timestamps: 00:00 - Introduction 00:26 - Demo 01:20 - Popover API 02:50 - Anchor Basics 07:40 - Advanced Anchor Features 11:45 - Advanced Example #CSSAnchor #WDS #CSS ... https://www.youtube.com/watch?v=B4Y9Ed4lLAI
Transaction
Created
2 months ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
HOW T
how-to-limit-lines-of-text-with-css-only
lbry://@WebDevSimplified/how-to-limit-lines-of-text-with-css-only
Doing vertical text overflow in CSS is incredibly difficult and many people think it is impossible, but that is not true. In this video I will show you 2 different ways to limit the number of lines of text in a box. I will also show you how to expand/collapse those lines of text using only CSS with no JavaScript. ? Materials/References: Kevin’s Video: https://youtu.be/b6iVByCOx8A :has Selector Video: https://youtu.be/K6CWjkDgQnE :has Selector Article: https://blog.webdevsimplified.com/2022-09/css-has-selector CSS Max Lines Article: https://blog.webdevsimplified.com/2020-01/dynamic-expandable-content ? Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified ⏱️ Timestamps: 00:00 - Introduction 00:48 - Webkit Technique 03:35 - My Technique 07:44 - Expand/Collapse Buttons #CSSExpandCollapse #WDS #CSS ... https://www.youtube.com/watch?v=OhCzEjXvY9A
Transaction
Created
11 months ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
HOW T
how-to-create-skeleton-loading-animation
lbry://@WebDevSimplified/how-to-create-skeleton-loading-animation
CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html Skeleton loading is one of the best loading experiences a user can experience. It is used on nearly every large site including YouTube and in this video I will show you just how easy it is to set up your own Skeleton loading animation. ? Materials/References: CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html GitHub Code: https://github.com/WebDevSimplified/skeleton-loading ? Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified ⏱️ Timestamps: 00:00 - Introduction 00:30 - Demo 01:45 - Image skeleton loading 05:35 - Text skeleton loading 07:50 - Implementing skeleton loading #SkeletonLoading #WDS #CSS ... https://www.youtube.com/watch?v=ZVug65gW-fc
Transaction
Created
1 year ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
HOW T
how-to-create-an-advanced-shopping-cart
lbry://@WebDevSimplified/how-to-create-an-advanced-shopping-cart
FREE React Hooks Course: https://courses.webdevsimplified.com/react-hooks-simplified Learn React Today Course: https://courses.webdevsimplified.com/learn-react-today Shopping carts are one of the most common things you will build as a web developer, but there is a lot that goes into building a good shopping cart. In this video I will show you how to build a fully functional shopping cart using React, TypeScript, and Bootstrap. This is a great intermediate level project. ? Materials/References: FREE React Hooks Course: https://courses.webdevsimplified.com/react-hooks-simplified Learn React Today Course: https://courses.webdevsimplified.com/learn-react-today GitHub Code: https://github.com/WebDevSimplified/react-ts-shopping-cart ? Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified ⏱️ Timestamps: 00:00 - Introduction 00:30 - Demo 01:08 - Project Setup 04:45 - Routing 08:02 - Navbar 15:35 - Store Page 30:00 - Shopping Cart Context 44:40 - Shopping Cart Component 56:45 - useLocalStorage Hook #TypeScript #WDS #React ... https://www.youtube.com/watch?v=lATafp15HWA
Transaction
Created
1 year ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
ARE Y
are-you-programming-too-much
lbry://@WebDevSimplified/are-you-programming-too-much
? IMPORTANT: My Courses: https://courses.webdevsimplified.com If you are anything like me then you probably wish you had more time to program and you never feel you have enough time to get everything done. I used to feel this way all the time when learning until I realized my issue was actually programming too much. When I limited my programming time I was able to improve not only my coding skill but also other skills in my life. ? Materials/References: Among Us Makes You A Better Programmer: https://youtu.be/BdajZmUGcF4 ? Concepts Covered: - Why coding too much is a bad thing - How to avoid burnout - Why other skills important to learn ? Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified ⏱️ Timestamps: 00:00 - Introduction 00:20 - Caveats 00:46 - Burnout 03:21 - Have Time For Other Activities 06:08 - Parkinson's Law #CodeLess #WDS #LifeAdvice ... https://www.youtube.com/watch?v=qDdJ6RKuE1s
Transaction
Created
1 year ago
Content Type
Language
video/mp4
English
Controlling
VIDEO
STOP
stop-using-margins-with-flexbox
lbry://@WebDevSimplified/stop-using-margins-with-flexbox
? Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified #Shorts ... https://www.youtube.com/watch?v=zqrmL6HEZtg
Transaction
Created
1 year ago
Content Type
Language
video/mp4
English