Comments (29)
I was kind of busy lately, will push the page by the end of the week hopefully.
from css-in-js.
We would need an interactive page, like: http://reactcheatsheet.com/
from css-in-js.
Finally pushed first table implementation. One can sort by clicking column headers, search by package names and filter requirements. Still we need to improve the UX/UI as it basically is ugly right now, but it works.
Also I will add a mobile-friendly version soon, but first I guess we now need all the data for all the packages. Basically a simple PR with changes to https://github.com/MicheleBertoli/css-in-js/blob/webpage/data.js would do the job. I will add a static build as more data is added so we can push to ghpages.
Also I will add some column descriptions, credits etc.
from css-in-js.
I guess we can merge the first 2 and just call it XSS vulnerability? The others seem to be fine. I may add those later on :) Thank you @buildbreakdo
from css-in-js.
I want to add more columns to https://stereobooster.github.io/css-in-js/ and I thought it would be nice actually define what each feature mean, illustrate it with example, show advantages disadvantages of each approach. So I started this repo https://github.com/stereobooster/css-in-js-systematic-approach/ cc @markdalgleish
Small correction: @import
is open to CSRF, not XSS
from css-in-js.
hey @kof,
adding some columns and descriptions would help.
For example, it would be nice to know if a package supports the server-side rendering or not.
In general, I would prefer to keep the table as minimalistic as possible listing just the "key" features.
In my opinion, the most important things are the code examples for each package.
For people who wants a massive list of features the Radium's one is perfect.
from css-in-js.
Well, how do you know what a key feature is and what not) it depends on use case. I thought the intent is to compare those components from all possible aspects.
from css-in-js.
You are right, @kof
I just think that if the columns are too many, the table becomes less useful ;)
from css-in-js.
Yes, we need a better format.
from css-in-js.
There should also be a column for solutions that work outside of React, like the exceptional JSStyles API. Being bound to only one framework is automatically not that great.
from css-in-js.
@HighOnDrive agreed on having another column that indicates whether React is a dependency or not.
@MicheleBertoli I would be interested in helping create the interactive page (presumably to be hosted on a gh-pages branch for this repo?).
It would be nice to have a comprehensive table that isn't https://github.com/FormidableLabs/radium/tree/master/docs/comparison which IMHO is patently biased towards Radium's css-in-js implementation and is littered with unhelpful platitudes such as "same pitfalls as CSS."
from css-in-js.
That would be awesome @rtsao.
from css-in-js.
If there's something I can help you with, just text me :) I'd love to have a rich and dynamic comparison page. @MicheleBertoli
I also think @kof s arguments should be included somewhere as they are quite important features.
I think it could also be helpful to have e.g. a list of other useful tools/repositories that help using inline styles, but are not actually a discrete CSS in JS solution but rather used in combination with one.
from css-in-js.
Sounds great @rofrischmann.
I'll be more than happy to create a web app all together.
Are you still in @rtsao?
@kof's feature are very important, we just need something better than a table to show them.
from css-in-js.
@MicheleBertoli Yes, I'm down!
from css-in-js.
Here we go @rofrischmann @rtsao
from css-in-js.
Short update @kof @MicheleBertoli I have started drafting a simple interactive, responsive listing. I will push a first version soon :P
from css-in-js.
awesome @rofrischmann, thanks!
can't wait to see it :)
from css-in-js.
We should perhaps also shoutout to all the owners to add additional information soon. ;)
from css-in-js.
I hope to see it soon; about to build a new tech stack from scratch, so the extra info will help.
from css-in-js.
added "rendering technics" to the description
from css-in-js.
Having a column to say if a lib is compatible with react native would be nice (eg: react-look does via react-look-native).
from css-in-js.
@rofrischmann if you have any progress feel free to push it in a separate repo and someone can maybe help you out.
Is there no list of reserved keys for this project available to developers? I am looking for the equivalent to transition-delay I assumed it would be transitionDelay: '0.2s',
from css-in-js.
Some pretty big items missing from this like:
- Are CSS rule declaration bodies safe by default? React Inline runs everything through escapeTextContentForBrowser to avoid XSS.
- Are at-media selectors safe by default (@import is open to XSS)?
- Is there a build step?
- Unique syntax?
- Selectors scoped or still in global namespace?
from css-in-js.
How about push existing version + every undefined value mark in table as grey area e.g. unknown. After working version will be online it will be fastly populated by volunteers
from css-in-js.
New version of website #58
from css-in-js.
🎉 http://michelebertoli.github.io/css-in-js/ 🎉
Thanks @stereobooster
from css-in-js.
Almost finished polishing of "CSS-in-JS 101"
As soon as we agree on terminology. I want to start to add more features (columns) to table.
from css-in-js.
I'm closing this in favor of #73
from css-in-js.
Related Issues (20)
- Best way to update renamed/deprecated projects?
- Add css-modules?
- Blog post on measuring performances between CSS-in-JS libraries on the server. HOT 4
- `last update` column in css-in-js table HOT 3
- Column request: Uses CSS syntax HOT 1
- Link to benchmark HOT 1
- Add react-cssom HOT 1
- Add restyles
- Use NPM Badge for version HOT 2
- Use `x` to represent `support`, there will be some ambiguity. HOT 5
- Request for adding stars in the data sheet HOT 8
- Add i-css HOT 3
- Roadmap HOT 6
- Avoid globals HOT 3
- Abandoned libraries HOT 5
- "Extract CSS File" seems misleading HOT 23
- Thoughts on CSS Blocks? HOT 1
- Format numbers in README HOT 1
- How on earth are we going to pick the right library if we can choose from 80 candidates? HOT 2
- Thank you for doing this.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from css-in-js.