Pair programming Web Components with Paul Lewis
HTML-код
- Опубликовано: 10 сен 2024
- 🔗Brilliant.org - Learn Machine learning through interactive challenges (Sponsor, thank you!)
brilliant.org/...
🔗 Paul Lewis on RUclips
/ @aerotwist
🔗 Paul Lewis on Twitter
/ aerotwist
🔗 Fun Fun Forum topic dedicated to this episode [ Forum Patrons only ]
www.funfunforu...
🔗 Behind-the-scenes retrospective of this episode [ Super Patrons only ]
/ 22664991
💡Editor and plugins
- VS Code
- Quokka (quokka.funfunfu...)
🔗 mpj on Twitter
/ mpjme
🔗 Help translate the show to your language
www.youtube.com...
Me an Paul Lewis had such a great time teaching me how to use Web Components in JavaScript. Paul Lewis also discovers, to his great horror, how I cannot even do basic CSS animations.
nice idea to have that echo on Brilliant ad and blow my brains out
Yeah, really sorry, that was an editing error of mine due to misclick just before the export. I discovered it too late to fix it in time for the release :(
@@funfunfunction It would have been fine if just the first part had an echo.
You sound like Protoss there!
I thought it was a feature
I don't watch this to see how the coding is done, but how two developers co-ordinate and create. The learning process via pair programming is a valuable practice.
This is a great format for a tutorial
The curvy ones"()" are called parentheses, and the curly ones that somehow weren't "the seagull ones" "{}" are called curly braces or curly brackets
I call them round brackets, curly brackets, square brackets, and angle brackets
Wow, this is one of my favorite episodes! There is so much I like about this. The collaboration is awesome!
This episode was brilliant! Can you guys make another completely about the web animation API some time?
my goodness, parts of this remind me of interviewing with google, which is actually a fun experience. Or actually, dev interviewing in general, the whole practice of speaking out loud about every decision is such a skill
Thank you for this great introduction to web components. If you would like to continue on the subject, I would suggest a video on how to pass parameters to them. Unlike props in React, web components have both attributes and properties, which have different APIs that usually handle the same data that have to be manually synchronized. I think this is an interesting topic because it is difficult to grasp and is the key to understanding interoperability between web components and frameworks.
My two favorite devs in same video
awesome!!!
Proud of you guys
Thank you, Khagesh! ❤️
Really enjoyed this episode! It got me curious about web components.
Would love to see a tutorial or deep dive into webcomponents.
Especially the named slots which where mentioned and styling options.
On the right bottom is still space for David. Think this would be great chaos 😁
haha the thought has struck us! The production process is complicated enough with two people at the moment but as we level up we definitely want to get to that point!
@@funfunfunction Then it'll be one and a half hours of looking up documentations, being confused as hell and eating Fikas. Sounds fun! 😁😉
the corner stays blank most of the time, but every 15 minutes or so it shows a 30 second shot of David eating a cinnamon roll or something
I'm gonna do this until my brain stops dropping dopamine from this effect 😂
look forward to these videos every week !!! brilliant stuff every time !
I'm new to web components so I've given this video a few spins. The curly bracket description gets me every time 😂😂😂
This was great , another one on web components would be awesome with paul!
6:40 or so: Not to be your 'tooling enabler' but come on, type ! and hit tab after you've saved the file with a .html extension and whaa-laa, a full HTML5 document structure will appear. It's built in to VS Code, no extensions needed (along with many other usuale emmett shorcuts).
lit-html and lit-element are good if people are interested, it makes it a bit easier
This was fun fun FUN!!!
I see Paul Lewis, I click
Not much of a webdev but def use VSCode because of you, also was able to convince a couple of my web-devs to use it.
dear Paul
if the guy says he does not know what is a Web component, dont ask him about the api. good opportunity for you to grow here :)
33:39 I cringed at "The seagull ones"
How do you move the template for the custom element into its own file? Like fff-logo.html. I'd want to seperate the HTML, CSS, and JS for my custom element.
Most ambitious anime crossover
hahaha
seagull brackets ftw
56:42 - Borat in the house :D
I'm evaluating this tech for our team, but I'm not sure how well web components correlates with SEO? Searches on the topic leads me to believe there's problems in that aspect.
Brilliant dynamic duo :)
Goooood monday morning guys!
Good monday morning!
Awesome! Thanks guys!
Enjoyed this overview. Curious how many actual companies are using web components in production today?
That tag is in parent DOM so stylesheet of parent will be applied to it. How can I override the css properties of that img from my custom elements?
Your connectedCallback method is called there, why do I write the console.log as you do not have solt, this connectedCallback method does not seem to be called
Awesome video! Good view of web components
I would love to see how you would implement web components into react, angularjs and vue. Best practices sort of way :)
Wow i'm gonna like this one.
This is the best. Awesome
I was doing stuff wrong this whole time! btw how is the browser support for custom elements?
How are you not star struck mpj? But np, I got your back and Im struck for you! The two most entertaining developers in the same show, could probably only be triumphed by adding Surma to the mix with some dry yet funny deliveries 😂
oh I'm star struck like hell. Fortunately, I'm very, very good at faking confidence :) Thank you so much for your kind words 💛
Paul, you need to do live codings. I watched every stream you did with Surma
the collaboration of the giants
{ } Shift-Option-8, then 9 on Mac on a Swedish keyboard =) I would have thought you'd be used to that key combination by now.
If you ever be to a comedy show, I really want an invitation.
By the way, I LOVE💕 both of you.
I wanted to know your opinion about the decisions that are being made to build web components, mainly because they are working using a more OO approach.
What do you think about that? Especially comparing what you said in your older videos, such as the series about functional
"There is no point in making anything that's actually useful. That would seem silly!" - Paul Lewis on programming (I'm a fan now :)
Is this code reachable in some place.. some github repo or something? tnx!
Paul 😍 I miss his chrome Dev tips
Hi, what's Paul episode titled todo app?
Okay, I'm not an expert on typography, but I'm pretty sure that a parenthesis or "paren" is '(' while a bracket or square bracket is one of these; '[' and a curly bracket or a brace is what you called a seagull bracket; '{' and the html tag one is an angle bracket; '
44:39 this man was deeply disturbed by the sound he heard from MPJ
Chrome has an 'animations inspector' under the More Tools in Chrome Dev Tools. Triple-stack menu on the right-hand side | More Tools | Animations. FF has it too. Dunno about Safari.
css-tricks.com/inspecting-animations-in-devtools/
Oh that is an amazing tip, thank you!
What editor are you using to pair?
visual studio code
Can I use Web Components to alter existing HTML tags, like or ?
You are asking for customized built-in elements! developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Customized_built-in_elements
One note there, you can extend any element and add extra super powers but when it comes to adding a shadow root is limited to a few elements(because many already have a native one) developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow luckily and are part of the list :)
Does it affect SEO?
NPM install under 5 seconds?
Your pronunciation of Bezier is terrible :)
Paul Lewis is a great inspiration for me, so cool to see you two collaborating
PS: I can't say "throughout" nor "focus" properly
next time you need a static server, just `python -m http.server` (or SimpleHTTPServer for python2)
I'm an 29y American English native speaker, and I've never heard "not" to mean zero.
💚
💛
That advert.... wtf 🤣🤣😂
Brain connection helper service: curly brackets curly sue
20:10 Glarus maybe?
this is like vue but a lot messier
I think Vue use this under the hood.
@@javierRC82857 not really, they used web-components approach of building component but custom version
Next time when you want to talk about seagulls, recall Steven Seagal :D
I love the idea of CustomElements but I don't like that they're supported in just Chrome, at least last I checked which admittedly it's been awhile.
Polyfill for Safari, Edge and old browsers are here:
www.webcomponents.org/polyfills/
Custom elements are supported by default in Firefox, Chrome and Opera. Safari so far supports only autonomous custom elements, and Edge is working on an implementation as well.
Source: developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
@@funfunfunction Thanks much, I'll take a look
You don't need a polyfills for Safari, they shipped last year, Firefox just shipped and Edge is in development. Definitely not Chrome only :)
That's not really Chrome's problem though, is it?
@@griffadev This is great, as I said it's been a while since I looked. Probably last Spring.
Could you share the unfollow friends on facebook script ? :D
Great episode!
Paul got a new follower!
It was Toolkit For FB by PlugEx! :)
What happened to the sponsorspot sound ? Xd
Yeah, really sorry, that was an editing error of mine due to misclick just before the export. I discovered it too late to fix it in time for the release :(
Holy shit i missed u, bald guy from google kk'
4:00 npm i reload
Seeing those geniuses forget attributes names and stuff makes me feel not very stupid after all!
Top 10 anime crossovers
{} = moswinga !!!
I recently started working at this Swedish company and this is the first thing my friends here taught me :D
Brilliant.org/funfunfunfufunction didn't work.
Well, that is because you're typing in a completely different url than the one in the video and in the episode description. :)
You know, photos of regular (non-vegan) food almost always have animals in it.
Good point
It's a honour to be the first
I make you count of youtube county
Its a honer to be first
I dub thee knight of the youtube comment field
"One thing that Ive done, that has increased my happiness so much is to unfollow all of my friends on Facebook." During the elections, I do the same :D
I really appreciate you guys and think it is important that you create this kind of content but I'm afraid that this video is highly disorganised and misleading (unless I am misinterpreting your intention).
It slaps bunch of browser APIs together in a way that is very messy and makes little sense and spends a lot of time adding animations on top (which is a topic on its own but is not related to web components whatsoever). You could achieve that spinning logo effect with pure CSS , which is fully re-usable across framework :). This example really misrepresents what web components are all about.
It also provides no real insight into these different APIs/ specs. Web Components are actually four main specifications: Custom Elements, Shadow DOM, ES Modules and HTML Templates. They can be combined in different ways or used separately (ES Modules cough cough) and are immensely powerful.
Some examples: you can create get huge benefits from custom elements without attaching shadow root (which will allow normal access to its children btw). Doing that will let you pass-in parameters to the constructor (if you instantiate it in JS) and call methods on the element while still treating it like any build in DOM node. No slots or html templates needed in this case, you can use ES6 template literals instead to a much greater effect. HTML templates can be used on their own for reusing HTML fragments without putting it in the DOM and so on…
I hope the viewers don’t let this video kill their curiosity about web components. As far as I can tell after using them for awhile, they are much more than a way to share code between Angular and React (down the line they aspire to make these frameworks what jQuery is today).
All these new videos are too long for me to watch them.
Is it just me or the API of Web Components is horrible?
I think horrible is a really strong word for it - I'd say that it's perfectly acceptable for something that is in the standard. We need to have a different set of expectations for standardized apis because they have to take many more practical issues, people and organizations into account. They are not as sleek as React or Vue, as those have the advantage of being designed in their own little world instead of standards bodies, but Web Components have the advantage of being usable and understandable across frameworks and over time as frameworks evolve and gets replaced.
@@funfunfunction At the moment it has taken 7 years for Web Components to get to where it is-granted, it is a larger task to implement and coordinate APIs for the W3C spec, but also consider what Web Components offers compared to what is already available-without the combined effort by multiple browser vendors to land this.
Regarding your last statement, "Web Components having the advantage of being usable and understandable across frameworks". Web Components will be-and already is-seen by a lot of developers as yet another framework, not an API even though we both know what the intent is. You'll likely use a framework that generates Web Components anyway, and this is where questions begin to unfold of what benefits it makes and whether they are necessary compared to today's tooling.
The current benefit that people may wan't is the ability to use Web Components across projects and teams with different frameworks. But there is already made interoperability across today's frameworks, which aren't being adopted widely enough.
I don't see web components having more benefits over generated HTML, when using frameworks anyway. Now, this is just my point of view that I have gathered through experiences and observations through the years and I could very well be wrong.