Shoelace - An Awesome Web Component Library
Вставка
- Опубліковано 7 вер 2024
- Visit linode.com/desi... for a $20 credit on your new linode account.
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, we'll be checking out shoelace.style/, which is a web component library. A web component allows you to create and use custom HTML elements, in any framework. Shoelace is a collection of these web components, which are highly customizable!
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
Have you been using or making web components?
How shoeless is different from frameworks like bootstrap?
I have made apps with just native web components. It’s pretty cool :)
Would love to see this used in vue/nuxt
everything we do now is with web components. so awesome
I just wish more jobs used it.. everyone use react or other frameworks
For those who are wondering how it is different than Bootstrap:
Web components does not change your global CSS or JavaScript like Bootstrap. Web components are scoped to their individual components.
Also, you can also import individual components rather than complete set of components.
So if you have to use only 7 components, you can only import their specific CSS and JS rather than complete CSS files which contains CSS of all components thus saving you a LOT of memory and performance.
Last but not least, you can use Web Components in all Frontend Frameworks like React, Angular, Vue etc very easily because their functionality is tailored by properties like Components in these frameworks. Thus by learning these components you are not limited to frameworks like you are with Material-UI or Angular-Material.
Thanks Siddhant! Great comment!
Thanks. I can sleep now
Was made aware of web components after talking to a dev on friday and needed a good tutorial! This is the happiest coincidence
+1 for more web components videos ...
*Need More on Web Components.*
Thank you.
I love shoelace library, so many components and easy to customize, it beats tailwindcss in some way, thank you Gary for introducing this amazing library to us !!!
Definitely would like to see more web component videos!
I've avoided Bootstrap et al because I know I'd find myself customizing more than I'd leave default. But getting the functionality this offers is intriguing.
@Joel D Canfield I use bootstrap css and js for 2 reasons, response navigation and and rows and columns. (Basically i am lazy)
Thank you so much, Gary. I had no idea Shoelace existed and thanks to your video, I have an idea of how it works and will now do the rest on my own.
Thank you for introduce this awesome lib. I find something like that for a long time but some other lib was be writen for React so I cannot use them. Shoelace is fit for me and I will try it now. Again, thank you, Gary!
i didnt realize you have published great content. time to dig in from your archive. thanks for sharing
Thank You soo much i was bit worried before watching the video now i'm relaxed a lot thanks again.
This is very good - and already responsive , I will use it in my next project - many thanks
This seems to be really interesting in combination with Cube CSS!
Please make a video about primeNg as well.
If this had a bundling up process, it should print out something like, "Tying up shoelaces.." 😂
I've been using lit-element for years
I like music in the background
I really should explore native web components more. Only component based stuff I did was in angular
I learnt a new thing today Thanks sir.... ❤❤❤
OMG! This is so cool. I wish they implemented something similar to Svelte. Then I could create some killer web components!
I have been using web components since polymer 2. Currently using carbon web components, but this one looks cool
Excellent video!
Fantastic content. Thank you 🙂
"Please sir, may I have some more" (web components)
I am from Bangladesh. Excellent
make similar video on polymer project
Can you make a design analysis of Ant Design components?
That was great Gary!
is this like if bootstrap made a vue supported version for example?
Great video! Would love to see more like this
Yep, more please!
it seems , it is better than bootstrap in some way
Gary: before we begin, this video is sponsored by lionde......
Me : EVERY.GODAMN.TIME
When are we going to see a New shopify video?
I'd like to see a webpack example for sass that actually works.
This content seems interesting, I might make some
I can't use it offline... Plz reply
@DesignCourse Hi, did you try the input.setFocus in the usage section of their documentation? That one gives me problems : Uncaught TypeError: input.setFocus is not a function. However, when I do document.querySelector("sl-input").setFocus() in the console, it does find the method. Anyone else has this issue? (Firefox 79). I tried on jsfiddle, CodePen, W3c editor, JSBin and the same error appears all the time .
how to install this in loacl with framework?
Do you prefer any page builders? Besides clunky Wix, Editor X, Squarespace?
It's not working in internet explorer! Why would i use such thing...
You mean IE, right?
@@frajerek12 IE6
Is this just an alternative to bootstrap?
I would say no. It works similar to bootstrap but with bootstrap, you import all of it, and it's BIG. With other frameworks it is really easy to pick and choose just the components that you want. Much smaller and faster.
Scott Plude that makes sense ❤️
It's closer to Vuetify and Quasar where you can get only the ones you picked but without any library/framework used as a dependency.
gary please take other sponsers as well
Honestly, Linode is the worst pricing i have come across. You should try Exabytes. Cheap, effective and support is nearly instant. Very responsive too. A real 5 star cloud hosting service.
Year 3000 . We looking for developers keen on using yourreadyproject.js library.
I found it a bit confusing
I feel that i would lose more time using this kind of library.
Than making switches and star ratings by hand?
you are the best . but if you make the video more simple and faster
I don’t think you clearly explained or stated the difference between web components and frontend frameworks like bootstrap because a lot of people are comparing the two and saying they’re no different which is most definitely not the case.
Hey man, bootstrap is a library and not a framework. It's much more limited in what it can offer to a developer, mainly related to styling and responsiveness of your page. Not much beyond that.
First haha
6:46 covid sir
Too expensive and almost like Bootstrap.
6kb expensive?, i have seen worse
Literally just a another copy of bootstrap and semantic UI.
I'll just stick to community version of semantic, fomantic-UI.