Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

A minimal, UI-focused programming language for web designers

uilang.com

Post reply on HN
Print view View original

41–48 of 48 posts

Re: A minimal, UI-focused programming language for web designers

#41

Post by emehrkay »

I like this. Hate his non xhtml-strict compliant markup (old school).

This is a very creative way to tackle a problem and I love the fact that his JS doesn't add any elements to the existing markup. I feel that once your JS starts drawing dom elements, you've messed up somewhere (unless your front-end is completely JS, different topic). There are of course cases where it is necessary -- supporting older browsers or shimming functionality -- but I've grown to love the separation of markup and interaction.

One could probably build on this idea (wrap your favorite lib) and do things like:

'clicking on ".selector" sends post ".selector[:href]" ..."

But that may make things a bit more complicated in the long run.

Either way, should be fun seeing the 2048-ification of this in the upcoming weeks

Re: A minimal, UI-focused programming language for web designers

#43

Post by nfoz »

jonrimmer wrote: post #10
benjamindc wrote: post #4

Earlier quoted context omitted.

If these things are easy for you, then you're probably not uilang's target audience ;)

So who is the target audience? How many web designers are capable of writing the HTML and CSS necessary to create animated tabs, accordions and overlays, but can't figure out the few lines of JavaScript/jQuery necessary to toggle classes on elements? I've never met a single person who would fit that description.

Do you remember when hand-written HTML was common and encouraged for librarians, teachers, and other public-service workers?

Re: A minimal, UI-focused programming language for web designers

#45

Post by snide »

bshimmin wrote: post #34

Chiming in with a few others here - I think uilang looks like a lovely idea, and very clever really given how few line of code are required, but I'm not sure it's genuinely all that useful. I used to work with a brilliant designer (seriously great - he could realise the most terrible and tangled client ideas in the most stunningly creative and beautiful ways), but code was just gibberish to him. He'd managed to muddl…

Just to add some anecdote to your post.

I'd consider myself an expert at CSS, at a level where I can and have built very large frameworks with deep mixins, extends and variable use in Sass that need to be used across multiple projects.

I know the basics of Javascript, mostly around JQuery and setting up things like Grunt and Bower. The types of actions this framework solve are too low level even for me. As you mentioned earlier, I can copy paste or lookup any onclick or toggle events, which are about 90% of all display side JavaScript. Add this class, remove this class... etc.

Re: A minimal, UI-focused programming language for web designers

#46

Post by sequoia »

This tool would be better named "ClassAdder", the extent of what it does is "add, remove, or toggle classes." The headings on the different examples on the homepage ("Accordion", "Tabs", "Animated Switch", "Overlay" etc.) suggests that the tool itself does all these things, when in fact the tool itself just handles adding/removing classes, and the fancy transitions are from the CSS (not bundled with the tool). This feels a bit misleading.

Incidentally I did not know that element.classList had these methods (add/remove/toggle https://developer.mozilla.org/en-US/docs/Web/API/Element.cla... ) so it was worthwhile reading the source to learn this! https://github.com/bendc/uilang/blob/master/development/uila...

-1000 for no comments in the source code. No,

   function InstructionParsing(instruction) {
     var separator = instruction.charAt(0)
     var instructionSplit = instruction.split(separator)
 
     this.clickSelector = instructionSplit[1]
     this.classBehavior = instructionSplit[2].trim().split(" ")[0]
     this.classValue = instructionSplit[3]
     this.targetSelector = instructionSplit[5]
   }
is not "self-documenting." Tool is not useful but it is a cool study in writing a limited DSL. Kudos to author for this.

Re: A minimal, UI-focused programming language for web designers

#47

Post by _lce0 »

wow this reminds me some years ago I toyed with a mash-up language for the web. The whole idea was attempt to combine css declarations vs js imperative.. code looked like this.

  

  .button:click {
    this.addClass('foo');
  }
    
  #foo a:click(e) {
    this.hide();
    parent.show();
    e.stopPropagation();
  }
Post reply on HN