Here are some examples of how to streamline your developments thanks to wpiece. Using web components you can modularize the frontend of your projects. And with wpiece store them in the cloud so you do not have to deploy your main application every time you have to change them.
Thanks to this you can also reuse those same components in other projects. Let's call them Cloud Web Components.
<ascii-image src="http://your.image.com/name.jpg"> </ascii-image>
We bring you some art (Ascii Art) with this web component that will transform any image into characters. Set the size, color and background color to make beautiful creations.
An example of how to encapsulate in a custom element complex html structures to make our html code more readable, maintainable and reusable. Especially when these structures are used repetitively.
<contact-card avatar="img_avatar2.png" name="Contact name" position="Contact position" url="http://www.wpiece.com"> </contact-card>
With this Cloud Web Component you no longer need to create load icons for each website. Set the size, color and effect of the icon for any website where you need it.
Add a lightweight notification system to your website. With it you can present messages and warnings to your users when you need.
<site-notifier href="http://url.notification.list"> </site-notifier>
Include a video with autoplay as your website background to have impactful landing pages.
<background-video> <source src="video.mp4" type="mp4"> </background-video>
Control the elements of your web to decide which to present to the user based on the device and the width of the screen from which it accesses.
<device-view type="phone" min-width="300" max-width="900"> Content that will be displayed if the device is a mobile with screen width between 300 and 900 pixels. </device-view>
Present messages to your users with the appearance of sticky notes. You can configure their position, their color or how much time should be visible before hiding it.
<sticky-note data-title="title #1" data-text="Description #1" data-link="http://www.foo.com"> </sticky-note>
<shadow-wrapper url-content="http://www.foo.com/component/your-html-component.html"> </shadow-wrapper>
A simple way to make any web element always visible to the user. We can indicate where we want it (top/bottom and left/right).
<floating-banner> banner content (html, text,...) </floating-banner>