shoelace-css
React
shoelace-css | React | |
---|---|---|
73 | 1,720 | |
12,208 | 223,895 | |
1.5% | 0.9% | |
9.5 | 9.9 | |
7 days ago | 6 days ago | |
TypeScript | JavaScript | |
MIT License | MIT License |
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.
shoelace-css
-
Htmx and the Rule of Least Power
HTMX gets all the hype right now, but there are other tools in the same vain, my favorite being Unpoly (https://unpoly.com). Together with Shoelace (https://shoelace.style) you get nice GUIs real fast, without the burden of complicated dependency management and build steps. Also, you don't have to write a lot of JS, just what is needed for small enhancements, as it was meant to be. Some might say the main drawback is the tight coupling to your backend. In my case, this is also the main benefit as it integrates perfectly with the backend framework (Django).
-
Show HN: Hyperdiv β Reactive, immediate-mode web UI framework for Python
Hello HN,
I'm releasing Hyperdiv (https://hyperdiv.io), a framework for rapidly developing reactive browser UIs in Python, with immediate-mode syntax and using Shoelace (https://shoelace.style) as its built-in component system.
This short coding video will give you a good idea of what it is: https://www.youtube.com/watch?v=4XJKfxaqvGE
I wrote a brief article about the motivation and approach: https://hyperdiv.io/intro.html
Hyperdiv doesn't aim to compete with serious full-stack frameworks. The core aim was to make it easy and fast to prototype apps and build UI-based tools. I was originally motivated by internal tools at work -- feeling the need to quickly put together UI-based tools to share with both technical and non-technical coworkers, without having to stand up and maintain a full internal stack.
This is my first major open source release. I really appreciate your feedback and support. - Marius
-
Making Web Component properties behave closer to the platform
For example, all the following design systems can be used without tooling (some of them provide ready-to-use bundles, others can be used through import maps): Google's Material Web, Microsoft's Fluent UI, IBM's Carbon, Adobe's Spectrum, Nordhealth's Nord, Shoelace, etc.
- Shadcn: Beautifully designed components that you can copy-paste into your apps
- Shoelace: A forward-thinking library of web components
-
Stream Updates to Your Users with LiteCable for Ruby on Rails
Here's what this looks like - note that I'm using Shoelace components for styling purposes.
- Ask HN: Is there something like shadcn/UI for vanilla HTML and JavaScript?
-
Lit 3 Release Announcement
There are lots of open-source design systems built with Lit. Shoelace is a popular component set that you might check out: https://github.com/shoelace-style/shoelace There are many others...
Would it help if we listed more open source projects on our site?
Because of our focus on components and the fact that you really can use just about any libraries and scaffolding for apps, we don't really have an app starter kit, but it's something we've talked about.
-
Framework Interoperable Component Libraries Using Lit Web Components.
I'm really excited about all this, and it makes me have some faith in the web again. I think that Lit is a step in the right direction especially the ability to do SSR / SSG and hydrate a web page. Hopefully π€ Shoelace can get SSR running, which is currently one hurdle, but I think it is achievable.
React
-
Building a Travel Agency Website with the Rapyd Payment Gateway
React.js
-
Not π©, here's how to write actually good commit messages (hint: It's not just adding commit-lint)
See the releases section of the React codebase, and see how many reactions each release note has!
-
Why, after 6 years, I'm over GraphQL
You know you can just check before making these claims?
> In fact, for years, react didn't even tell in the doc you could use it without a transpiler so people had to learn a whole build chain before even getting to the hello world.
React's original documentation site from June of 2013 (when React was first introduced):
https://web.archive.org/web/20130607085014/http://facebook.g...
Feel free to click around that original documentation site.
Here's the README.md from the commit at the same time:
https://github.com/facebook/react/tree/a41aa76ef36471ba07b29...
> You'll notice that we used an XML-like syntax; we call it JSX. JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest.
At this point I would kindly ask you to go away.
-
Mastering React: A Mindset for Component-Centric Development
For further insights, refer to the React documentation to learn more about the library.
- π Cherry-Picked Nx v19 Updates
-
Deploy a Static React Site Using AWS S3 and CloudFront
To get started, let's quickly create a sample React app that has a build configured to export a static site. Even if you have a project in mind to deploy, I recommend going through the motions with a simple sample site, as you may run into implementation specific issues with your project & if you've never gone through the motions, it can be hard to determine whether you made a mistake in the deployment processes or if there are implementation specific issues you're facing.
- Comment bien gΓ©rer les erreurs avec Remix ? (ErrorBoundary)
-
Series - Converting Large Codebase Project to Vite
In the company I work at, our frontend codebase consists of couple of thousands files. The framework is React 16 and the bundler used was webpack 4.
-
Introducing Rocketicons: The Perfect Companion for React and Tailwind CSS Developers
Enter React, React Native, and Expo. By unifying our development stack, we streamlined our workflow considerably. Yet, one crucial piece was missing: a comprehensive library for essential tasks like icons and components. As we delved further into our development journey, we realized there were more gaps to fill, including robust boilerplates and other essential necessities.
-
Introduction to Frontend: React, Creating a Single Page App
React doc: https://react.dev/
What are some alternatives?
carbon-components-svelte - Svelte implementation of the Carbon Design System
qwik - Instant-loading web apps, without effort
ng-bootstrap - Angular powered Bootstrap
Alpine.js - A rugged, minimal framework for composing JavaScript behavior in your markup.
storybook - Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
Vue.js - This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
material - Material design for AngularJS
SvelteKit - web development, streamlined
stencil - A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
lit-element - LEGACY REPO. This repository is for maintenance of the legacy LitElement library. The LitElement base class is now part of the Lit library, which is developed in the lit monorepo.
spectrum-web-components - Spectrum Web Components
Tailwind CSS - A utility-first CSS framework for rapid UI development.