Comments (7)
Hey, I built a similar project based on your ideas https://github.com/jukben/stylog You might want to check it out. 🚀
from log.
Hey again, Rick! I’ve never been particularly satisfied with log('this is [c="color: red"]red[c]')
but I’m not sure I find this syntax much more appealing. I’m definitely open to suggestion though.
from log.
Once I've played with regexp I will see if I can generate some other suggestions!
from log.
@adamschwartz the only other syntax I feel isn't difficult to read is something akin to the handlebars templating syntax, perhaps like log('this is <"color: red">{{red}}');
Beyond that, I haven't been able to create anything that isn't pretty ugly. I did a small poll on a slack channel I'm a member of and most people preferred the one initially suggested as it mimics HTML style tags.
Any thoughts?
from log.
Thanks for conducting that poll!
As strange as it may sound, I might be more of a fan of something like log('this is <span style="color: red">red</span>')
. While this arbitrarily adds support for <span>
elements, and is more verbose, I think I find it preferable to creating a pseudo-HTML syntax like <style="...">
or <"...">
.
Another possible syntax which might be worth considering is something like "custom element" support, with an associated style object. This would allow for style reusability which none of the current options support (without manually using variables and string concatenation).
Something like this:
log(`
<header>Result</header>
<green>The result was successful.</green>
<header>Instructions</header>
- Re-run the test by refreshing the page.
- Add query parameters <code>?safe=true</code> to run the test in safe mode.
`, {
header: {
'font-family': 'system-ui, sans-serif',
'font-size': '13px',
'color': '#444',
'padding': '8px 0',
'line-height': '40px'
},
green: {
'color': 'green'
},
code: {
'font-family': 'monospaced',
'background': '#eee'
}
})
from log.
Wow, that is quite an idea - I can see your thinking for sure. In my opinion, it would be a huge improvement to the current implementation. This is a sizeable piece of work for someone of my ability - would you like me to try and implement this? I would be keen to give it a go.
from log.
Up to you!
from log.
Related Issues (20)
- Safari 7 (WebKit 537.43) should be supported HOT 1
- Bower Installation HOT 4
- Incorrect Line Numbers HOT 1
- Fallback for unsupported browsers HOT 1
- [] characters not supported inside custom syntax blocks
- integrarlo a Chrome Logger HOT 1
- [enhancement] Add missing bower.json. HOT 1
- Embedded styles don't work HOT 2
- Undefined in requirejs HOT 6
- Update url in repo description
- Console.log Backtrace HOT 1
- PR: Table Log HOT 4
- npm version isn't up to date HOT 2
- Colorize an object HOT 1
- Offer a way to include the library into an arbitrary namespace HOT 2
- Add broarder Markdown support HOT 3
- How to integrate? HOT 1
- Chrome error message HOT 2
- Not able to style comma separated inputs
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 log.