Does the augmented-ui property have to live inline on the html tag, itself? ... or is there are way to define the whole exe process within the CSS class without having to inline the augmented-ui property in the HTML?
It has to live on dom element. BUT I wrote a separate plugin that does exactly what you're thinking: https://github.com/propjockey/aug-attr-spliced.js It allows you to specify .mydiv { --augmented-ui: tl-clip exe; } in the CSS file and it will automatically apply the dom element attribute to whatever matches the CSS selector. The plugin needs work and optimizing and is my current priority, but the basics are there an…
Show HN: Cyberpunk web design made easy, really easy
101–110 of 112 posts
Re: Show HN: Cyberpunk web design made easy, really easy
#102Re: Show HN: Cyberpunk web design made easy, really easy
#103Earlier quoted context omitted.
It has to live on dom element. BUT I wrote a separate plugin that does exactly what you're thinking: https://github.com/propjockey/aug-attr-spliced.js It allows you to specify .mydiv { --augmented-ui: tl-clip exe; } in the CSS file and it will automatically apply the dom element attribute to whatever matches the CSS selector. The plugin needs work and optimizing and is my current priority, but the basics are there an…
Hmmm... This doesn't work with external stylesheets due to browser security.
$('section > .outer > .inner').attr('augmented-ui', "bl-clip r-clip-y br-round br-inset-clean exe");
Re: Show HN: Cyberpunk web design made easy, really easy
#104Re: Show HN: Cyberpunk web design made easy, really easy
#105Amazing, I've always loved the design but have been a little intimidated by how intricate it can be to implement, so this looks awesomely easy!! Also, wondering; how does this use custom css properties without using javascript?
Re: Show HN: Cyberpunk web design made easy, really easy
#106When writing HTML you can invent any custom attribute you want so long as it begins with `data-` [0], and in JavaScript there's even a special dataset interface that makes working with these custom data-* attributes simple and easy [1].
This could be improved without changing any of the design at all - just by updating it to not rely on writing invalid HTML.
0: https://html.spec.whatwg.org/#embedding-custom-non-visible-d...
1: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement...
Re: Show HN: Cyberpunk web design made easy, really easy
#107Earlier quoted context omitted.
Hmmm... This doesn't work with external stylesheets due to browser security.
Preprocessing the external CSS and generating static jQuery snippets like the following, works for my use case, though: $('section > .outer > .inner').attr('augmented-ui', "bl-clip r-clip-y br-round br-inset-clean exe");
I'll make sure to mention and test around that, it hadn't crossed my mind yet.
Thank you!
Re: Show HN: Cyberpunk web design made easy, really easy
#108Looks fun, happy to see a great usage of CSS custom properties, but a little baffled and let down that it seems to use invalid HTML attributes :/ When writing HTML you can invent any custom attribute you want so long as it begins with `data-` [0], and in JavaScript there's even a special dataset interface that makes working with these custom data-* attributes simple and easy [1]. This could be improved without changi…
Here are my reasons for not including it (yet):
1) data- isn't a great fit for it. It's not specifically data, it is visible, and I didn't want to clutter the dataset property for people using it with database output
2) invalid attributes are used everywhere, constantly. Even google.com uses them a few times. (this is the reason I'm not a stickler for it any more - if you get to the point where you're using js frameworks to build scalable web apps, chances are you're going to use invalid attributes in every single viewmodel file, or your coworkers will)
3) "data-" adds 5 extra characters to clutter and type on every single element and each selector in the main project css file. People who use augmented-ui are likely to use it on many many elements, and it adds up fast when you're building something big.
4) The only likely reason an invalid attribute might break is if the spec expands to use that exact same attribute. In the unlikely event that "augmented-ui" becomes a standard attribute, I will happily write the (grunt or w/e) script to patch every file in a project since this is very very easy to detect with regular expressions. (I've written large scale migration scripts and dozens of code parsers for work AND for fun)
5) I didn't want to split the userbase, especially at launch, with different options that can't be interchangeable. (interchangeability comes at a cost of exponentially large selectors in the fallback css because of Edge - the 5 layers of fallback support for Edge becomes over 30 selectors with just 2 different options) In the future I will have a dist folder that has a safely minified option at least. I may also have data- prefixed versions as a mutually exclusive option in the dist folder at that time if there is demand for it.
6) The first few commits were using class names instead of the attribute but even that was annoying to use because the class names were prefixed to avoid stepping on toes and the class list got way too cluttered. The "augmented-ui" attribute saved typing characters, looked cleaner, and felt cooler to use. (subjective, I know)
I understand and respect if you choose not to use it because of wanting valid attribute markup. Hopefully though this at least gives you perspective into my reasons and careful considerations that ultimately lead me to choose not to include it.
Re: Show HN: Cyberpunk web design made easy, really easy
#109Normally making designs like this on the web is really tedious and a bit challenging. You'd have to do things like add a new element to the dom, rotate it 45deg, position it perfectly, draw just one border and make the background match what's outside the box to cover up the square border underneath the main element. (and that's just one corner of one element) For example: https://i.imgur.com/yY66cdv.png and https://i…
thank you so much for this. I'm currently organizing a Cyberpunk LARP, and I'm sure augmented-ui will be very useful!
Re: Show HN: Cyberpunk web design made easy, really easy
#110Earlier quoted context omitted.
Just in case you’re not aware (maybe you are making a joke?) the series consists of six games: Deus Ex (2000), Deus Ex: Invisible War (2003), Deus Ex: Human Revolution (2011), Deus Ex: The Fall (2013), Deus Ex Go (2016) and Deus Ex: Mankind Divided (2016). The original from 2000 is one of the most beloved games in the genre.
Yeah, I guess jokes don't always work in this format on the Internet. If I remember correctly, Invisible War was so bad that the entire team was fired. I've played the original several times. It's a classic. I wouldn't regard any of the supposed sequels as sequels. I played IW once. It was hot garbage. I haven't tried HR and beyond, but from gameplay videos it doesn't look as though they've captured the spirit of the…