lrnwebcomponents
web-components
lrnwebcomponents | web-components | |
---|---|---|
30 | 4 | |
237 | 409 | |
0.4% | 5.4% | |
9.7 | 9.8 | |
5 days ago | 5 days ago | |
JavaScript | JavaScript | |
Apache License 2.0 | - |
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.
lrnwebcomponents
-
How we automated storybook documentation for our web components
utils.makeElementFromClass(GitCorner, { source: 'https://github.com/elmsln/lrnwebcomponents', alt: "Our monorepo of all the things you see here", corner: true, size: "large" })
-
enhanced-text? Vide!
web component source
-
simple-img microfrontend
microservice source
-
htmlToDocx? No! docxToHtml! How about both?
Source for microservice
-
mdToHtml? htmlToMd? How 'bout both!
MD to HTML micro code
-
export class MicroFrontendRegistry
source for MFR
-
Duck duck go example
backend code for vercel
-
Building micro frontends with Vercel + Lit
Code Monorepo - https://github.com/elmsln/lrnwebcomponents/tree/master/ . /api has the endpoints for the microservices and /elements contains source for our web components
-
Visualizing Promise Arrays
Full source
-
Leveraging APIs for Microservices
Our url holds the link to google's mapping api and right after the /maps?q= in the link, we place in the latitude and longitude we have already found. Then, all we have left is to place that url into the src of our and the map will display, embedded in our page.
For more info on using the Google Maps Platform check out their developer page.
Externally
To create a link in our page that takes up to Google Maps with our desired location already in the view window is not too different from before. We can create a simple
tag and place the link for an external path with our long and lat we've received before.
See on Google
Enter fullscreen mode Exit fullscreen modeHere we've created a link that leads to google map's site with our long and lat coordinates and a zoom of 14 (
,14z
).Wiring with an Existing Component
Let's say you want to use the data we received to utilize a different web component.
For this example, we'll look at a tag named
that will perform a wikipedia search and embed the page found into our site.
Wikipedia-query info: Github npmjsSet Up
We'll start by wiring the component into our program so we can implement the project. First, adding the package location to our
dependencies
inpackage.json
.
Then we'll run annpm install
on our project to get all the needed assets to runwikipedia-query
.Once the install is finished, we want to add a "bare import" to our program file to be able to access the tag we just installed. A "bare import" is a convention where we let LitElement find what exact file we are looking for rather than specifically declaring one. This is important for improving the maintainability of our code since file locations and structures can change over time.
In this example, our "bare import" will look like this:
import '@lrnwebcomponents/wikipedia-query';
Enter fullscreen mode Exit fullscreen modeNotice we only specify the general area of what we are importing and not a specific file name.
Utilization
Now that we're all set up, we can do objectively the easiest part. Remember we want to use the
tag to display a wiki page of the location we received from our API earlier.
To implement our
tag we pass our location into it's
search
property and let the tag do the rest of the work for us.
//finding wiki based on city and state //finding wiki based on city //finding wiki based on state
Enter fullscreen mode Exit fullscreen modeWrap It Up
The main point in this post is the effectiveness of the
fetch
function. We are able to set a call to any API, receive the JSON data, and use that data in any way we want.Everything I talked about in this post is held in a small project that does more than is explained but is mostly centered around these topics.
Feel free to clone and play with the program on your own to see how it all plays together: Github
FYI: Everything discussed in this post is location in the LocationFromIP.js file in the src folder.
web-components
-
Creating Custom Component for NPS Feedback
Component UX. Do you need keyboard navigation? Mouse hover? Shortcuts? I suggest staying safe, combining existing components, and making your custom solutions sparingly.
-
This Instagram post... I guess backend code does't belong to git
Vaadin does the same for Java.
- Aplicaciones para Desarrollador UX/UI 👨🎨
-
Is this UI doable with only using Java Swing?
Components are ready made, code is in pure java. Do check this out https://vaadin.com/docs/latest/components
What are some alternatives?
vaadin - An evolving set of open source web components for building mobile and desktop web applications in modern browsers.
svelte-webcomponents - A ready-to-use project template to build custom elements (web components) with Svelte 3 with support and examples for web components, jest, sass, nested components with props, eslinting, stylelinting, Github actions, propagating custom events from shadow-DOM to real-DOM etc.
web-components - Nativ web components for typographic projects: <foot-note>, <inline-note>, <note-list>
lit-translate - A blazing-fast and lightweight internationalization (i18n) library for your next web-based project
lit-state - Simple shared component state management for LitElement.
yew - Rust / Wasm framework for creating reliable and efficient web applications
WCFactory - A factory that churns out web components, library agnostic with a unified development, testing, and build to production pipeline.
leptos - Build fast web applications with Rust.
TinyGo - Go compiler for small places. Microcontrollers, WebAssembly (WASM/WASI), and command-line tools. Based on LLVM.
react-native-ios-kit - The missing React Native UI Kit for iOS
nps - Net Promoter Score widget for Java
material-ui-swing - A modern, Material Design UI for Java Swing