web-skills
browser-window
Our great sponsors
| web-skills | browser-window | |
|---|---|---|
| 3 | 1 | |
| 6,830 | 244 | |
| - | - | |
| 0.0 | 8.1 | |
| 11 days ago | 5 months ago | |
| JavaScript | JavaScript | |
| GNU General Public License v3.0 or later | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
web-skills
-
Web Skills – This is a nice chart of web dev skills. Could be a reminder of how far you've come, or a glimpse of how much there is to learn. Web development is hard.
I recommend reading the Readme for the project as others have mentioned https://github.com/andreasbm/web-skills, as it isn't the intention of the author to deter beginner programmers.
-
A visual web dev road map with links to useful skills to learn
GitHub repo: https://github.com/andreasbm/web-skills
browser-window
-
Web Fundamentals: Web Components Part 2
This covers all but one of the lifecycle methods that you get access to with custom elements, and in actuality, these are what you'd use most of the time. The last one is adoptedCallback and you'd most likely encounter it in the context of elements [4]. Even though I don't have plans to go through it in the series, the concepts and the way we've covered them so far should give you a good idea on how to begin unpicking it if you do. Other than that, we have enough under our belt to delve even deeper into what web components have to offer.
All of this might feel like a lot of work to put some HTML on the screen and update a few attributes, and it is. Even though we've achieved fine-grained updates in our component, it took a fair bit of reasoning about the lifecycle methods to get there. The reason the custom elements API feels a little cumbersome is because it's low level by design to give you the most control. This means that you can do anything with it, including build your own abstractions on top of it.
There are other component-based abstractions that will give you the same effect with a lot less work, and some even give you the same level of fine-grained control. Though we'll look at a few UI frameworks alongside web components, the ultimate aim of this series is to demonstrate what the web platform is capable of, and get you to start thinking about the different tradeoffs you make when picking different tools. My hypothesis is that by understanding what the platform has to offer, you'll be in a much better position to evaluate the complexity you choose to take on when building experiences. Lastly, I'll leave you with a little spoiler of what's to come: web components are cool and they are here to stay.
If you think of anything I've missed or just wanted to get in touch, you can reach me through a comment, via Mastodon, via Threads, via Twitter or through LinkedIn.
References
- Zach Leatherman's
component [GitHub] - MDN Web Components [Website]
- Component Lifecycle Reference Diagram [Website]
- Component Lifecycle Reference [Website]
- Zach Leatherman's
What are some alternatives?
SAPC-APCA - APCA (Accessible Perceptual Contrast Algorithm) is a new method for predicting contrast for use in emerging web standards (WCAG 3) for determining readability contrast. APCA is derived form the SAPC (S-LUV Advanced Predictive Color) which is an accessibility-oriented color appearance model designed for self-illuminated displays.
web-fundamentals - This repo contains the source code for the blog post series on web fundamentals.
skilltree
github-elements - GitHub's Web Component collection.
Active CSS - The epic event-driven browser language for UI with functionality in one-liner CSS. Over 100 incredible CSS commands for DOM manipulation, ajax, reactive variables, single-page application routing, and lots more. Could CSS be the JavaScript framework of the future?
lion - Fundamental white label web component features for your design system.
Turn-Off-the-Lights-Safari-extension - Safari extension
open-wc - Open Web Components: guides, tools and libraries for developing web components.
developer-roadmap - Interactive roadmaps, guides and other educational content to help developers grow in their careers.
relative-time-element - Web component extensions to the standard <time> element.
parcel - The zero configuration build tool for the web. 📦🚀
vue-custom-element - Vue Custom Element - Web Components' Custom Elements for Vue.js