astro-reactive
Tailwind CSS
astro-reactive | Tailwind CSS | |
---|---|---|
9 | 1,287 | |
80 | 78,889 | |
- | 1.6% | |
7.4 | 9.4 | |
6 months ago | 6 days ago | |
Astro | TypeScript | |
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.
astro-reactive
-
Release 0.4 - Results
generate a favicon.ico for our apps This issue looks to update the favicon logo to match the current logo that they are using. My PR.
-
DPS909 Blog: Final Pull Requests
I completed my work on issue #201 and PR #224 for that issue. The PR was eventually merged into the main branch after a couple of necessary adjustments. I ended up having to adjust the querySelector in order to remove a condition. The querySelector now only selects elements with the attribute data-validation-on. This allowed me to simplify the code while only selecting elements from the page that were created by the library. Furthermore, I had to add a nullish operator to set the default event listener if there is no attribute specifying one. I also added optional chaining to check whether the attribute actually exists, to avoid any errors.
-
Release 0.4 - My Progress So Far
First, I tackled the issue here. This issue looks to update the favicon logo to match the current logo that they are using. To do this, I used the .svg logo they had and generated a favicon.ico with it. I created a pull request and had some feedback about it. I had only tested it visually using light mode and had not considered how it would look using dark mode. On dark mode, the icon had bad contrast since the it was dark blue on a dark grey background. So to fix this, I added a circular white background to the logo so that it would look good on both light and dark mode.
-
DPS909 Blog: Issue Progression
I began my work on issue #201. I was initially confused by the the description of the feature to be implemented, so I asked the project maintainer to explain it further. Another project contributor also further explained what was needed and this really helped me out. I also read up further on the Astro framework to understand how the project is put together. I started with the documentation explaining how Astro components work and read on from there.
-
Release 0.4 Planning
This week I have chosen to work on the Astro Reactive Library repo for release 0.4. I chose this repo because I have been contributing to it for the last couple of months and I am familiar with the project. I will be working on two issues:
-
DPS909 Blog: Planning Issues to Fix
I chose to work on 2 or more smaller but related issues. The issues I chose were from a project that I've previously worked on called Astro Reactive Library. This project builds components and architecture for other projects that use the Astro framework for their reactive user interfaces.
-
DPS909 Blog: External Pull Request
So after this learning process I felt comfortable looking at issues and determining which one I could tackle. I took a look at issue #140 which was related to the components used to create forms. To summarize, the way they assigned the id attribute of the tag the same value as the name. However, the project owner believed that this would cause issues since they use IDs as selectors, so the id attribute needs to be unique. The ideal solution was to create an id attribute that is not the same as the name attribute by making a function that creates a Short Unique ID (UUID). The UUID should be prefixed with arl and assigned that as the id value for every tag.
-
Making another PR to a repo
The issue was to add a setValue method to the FormGroup class. This would allow anyone using Astro to set the values of any form controls in that form group. For example:
-
My fourth Hacktoberfest PR
This week I completed my final Hacktoberfest PR. For my final PR, I chose to contribute to Astro reactive library. Astro reactive library uses the Astro framework to let you build reactive user interfaces.
Tailwind CSS
-
Essential Tools & Technologies for New Developers
Lastly, Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup.
-
E-commerce checkout components built with Tailwind CSS and Flowbite
Tailwind CSS
-
Hanami and HTMX - progress bar
Sidekiq is already configured along with assets, tailwindsCSS.
- Qu'est-ce qu'un projet MERN Stack et comment créer une application CRUD avec? Partie 2/2, Tutoriel
-
How to Build Your Own ChatGPT Clone Using React & AWS Bedrock
Finally, for our front end, we’re going to be pairing Next.js with the great combination of TailwindCSS and shadcn/ui so we can focus on building the functionality of the app and let them handle making it look awesome!
-
Building an Email Assistant Application with Burr
You can use any frontend framework you want — react-based tooling, however, has a natural advantage as it models everything as a function of state, which can map 1:1 with the concept in Burr. In the demo app we use react, react-query, and tailwind, but we’ll be skipping over this largely (it is not central to the purpose of the post).
-
Shared Data-Layer Setup For Micro Frontend Application with Nx Workspace
Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
-
Preline UI + Gowebly CLI = ❤️
First, you need to make sure that you have a working Tailwind CSS project…
-
Customer service pages for e-commerce built with Tailwind CSS
Tailwind CSS
-
The best testing strategies for frontends
With better CSS approaches like TailwindCSS and Vanilla Extract (which we're heavily using) it's much easier to maintain the UI and make sure it doesn't change unexpectedly. No more conflicting CSS classes, much less CSS specificity issues and much less CSS code in general.
What are some alternatives?
astro-seo-meta - Astro component to add tags that are relevant for search engine optimization (SEO) to your pages.
flowbite - Open-source UI component library and front-end development framework based on Tailwind CSS
9speech - Speech of 9arm (wip)
antd - An enterprise-class UI design language and React UI library
gitbar-2023 - New release of gitbar website
unocss - The instant on-demand atomic CSS engine.
astro - The web framework for content-driven websites. ⭐️ Star to support our work!
windicss - Next generation utility-first CSS framework.
emotion - 👩🎤 CSS-in-JS library designed for high performance style composition
Material UI - Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
vuetify - 🐉 Vue Component Framework
chakra-ui - ⚡️ Simple, Modular & Accessible UI Components for your React Applications