Shoelace - An Awesome Web Component Library
HTML-код
- Опубликовано: 14 авг 2020
- Visit linode.com/designcourse 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: logodesigner
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! 
Хобби
![Sean Rii, Karyon, Sharzkii - Taungule [My Love] (Official Music Video)](http://i.ytimg.com/vi/eJoMuypbSzQ/mqdefault.jpg)
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
+1 for more web components videos ...
*Need More on Web Components.*
Thank you.
Was made aware of web components after talking to a dev on friday and needed a good tutorial! This is the happiest coincidence
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 !!!
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.
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)
Definitely would like to see more web component videos!
This is very good - and already responsive , I will use it in my next project - many thanks
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 seems to be really interesting in combination with Cube CSS!
That was great Gary!
Great video! Would love to see more like this
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 learnt a new thing today Thanks sir.... ❤❤❤
Please make a video about primeNg as well.
Yep, more please!
Fantastic content. Thank you 🙂
If this had a bundling up process, it should print out something like, "Tying up shoelaces.." 😂
OMG! This is so cool. I wish they implemented something similar to Svelte. Then I could create some killer web components!
Excellent video!
I've been using lit-element for years
I really should explore native web components more. Only component based stuff I did was in angular
I am from Bangladesh. Excellent
"Please sir, may I have some more" (web components)
I have been using web components since polymer 2. Currently using carbon web components, but this one looks cool
I like music in the background
Gary: before we begin, this video is sponsored by lionde......
Me : EVERY.GODAMN.TIME
it seems , it is better than bootstrap in some way
Can you make a design analysis of Ant Design components?
make similar video on polymer project
is this like if bootstrap made a vue supported version for example?
I'd like to see a webpack example for sass that actually works.
@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 .
Do you prefer any page builders? Besides clunky Wix, Editor X, Squarespace?
When are we going to see a New shopify video?
gary please take other sponsers as well
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.
Year 3000 . We looking for developers keen on using yourreadyproject.js library.
I can't use it offline... Plz reply
how to install this in loacl with framework?
It's not working in internet explorer! Why would i use such thing...
You mean IE, right?
@@frajerek12 IE6
This content seems interesting, I might make some
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?
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.
First haha
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.
you are the best . but if you make the video more simple and faster
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.