Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Readme
Elix is a community-driven collection of high-quality web components for common user interface patterns.
Most applications make use of common, general-purpose user interface patterns such lists, menus, dialogs, carousels, and so on. Such patterns can be efficiently implemented and packaged as web components. Their modular nature lets you easily incorporate web components into your web application, and their standard definition ensures good results across browsers.
This arrangement permits a beneficial economy of scale, as common patterns only have to be implemented once. But that is not to say that it’s easy to develop general-purpose user interface patterns as solid components. To the contrary, implementing even simple patterns with a very high degree of quality can entail substantial complexity.
For that reason, the Elix project believes that implementing high-quality, general-purpose components is best done as a community effort. This spreads the cost of creating the components across organizations, and ensures that the resulting components satisfy a broad range of concerns and can be used in many contexts.
For full details and demos, see the Elix documentation.
Add the Elix package to your package.json:
{
"dependencies": {
"elix": "<latest version number here>"
}
}
Then run npm install
. We generally recommend locking your package.json
to a fixed Elix version number (1.0.0
rather than ^1.0.0
or 1.x
, for example). See more at Versioning.
In markup, you can then reference the components you need:
<html>
<head>
<script type="module" src="node_modules/elix/define/Carousel.js"></script>
</head>
<body>
<elix-carousel>
<!-- Images and other elements go here -->
</elix-carousel>
</body>
</html>
Alternatively, in JavaScript, you can directly import
components:
import Carousel from "elix/define/Carousel.js";
const carousel = new Carousel();
// Add images, etc., to the carousel.
const image1 = new Image();
image1.src = "image1.jpg";
carousel.append(image1);
// Add the carousel to the page.
document.body.append(carousel);
The Elix project itself requires no build step. You are free to use your preferred tools to bundle the Elix modules for better network performance.
You can try out the plain HTML and JavaScript project on your own machine.
See the sample React project showing how to use Elix components in a React application.
See the sample TypeScript project showing how to use Elix components in a TypeScript application. Elix includes TypeScript declaration files so that you can confirm that interactions with Elix components are type safe.
Elix is an ambitious attempt to deconstruct complex user interface elements into constituent parts at various levels of abstraction. We regularly feel like the project is breaking new ground at the frontier of front-end design and implementation. That can be exciting, but also means that promising implementation strategies will sometimes turn out to be dead ends. Moving forward will often entail breaking changes.
Please see our Contributor's guide.
The Elix project is led by Component Kitchen, which offers professional support for Elix.
FAQs
High-quality web components for common user interface patterns
The npm package elix receives a total of 1,493 weekly downloads. As such, elix popularity was classified as popular.
We found that elix demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.