8 ms·
Show HN: Brutal.js – a small framework for building brutalist web applications
- wybiral 8y agoI was wondering how they pulled of the R`` expressions because I didn't realize that JS added "tagged templates" like this [1]. So if nothing I learned something new by reading this tiny bit of code. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- antonvs 8y agoIt's ironic that this is being used in a "brutalist" framework, because tagged templates seem really poorly designed and overcomplex - using a monolithic function to process an entire template, instead of compositionally building it from components that can be independent (but don't have to be.) The example in your link could easily be implemented by a much simpler templating feature in which you just call functions to transform the parameters, e.g.: "That ${ person } is a ${ characterize(age) }" If you want shared state between your template expansions, you can create an object that exposes the required transformations, and it'll still be better designed than that example.
- nsx147 8y agoForgive my ignorance, but what is a brutalist web application? Edit: I see - To me, brutalist means as close to the basic raw HTML/ JavaScript as possible.
- dewey 8y agoThat was pretty high up on the HN start-page yesterday, probably inspired by that: https://brutalist-web.design https://brutalist-web.design
- deleted 8y ago[deleted]
- devmunchies 8y agoits a trend that has been slowly gaining popularity but now is becoming more mainstream. http://brutalistwebsites.com/ http://brutalistwebsites.com/
- iamdave 8y agoI'm inclined to say if that article/manifesto on brutalist design that hit the front page yesterday is even remotely authoritative then some of these sites are breaking what I assumed to be fundamental tenents of brutalist web design already. Or have I overthought the joke? It's possible, I've done it before.
- devmunchies 8y agono i've been following this design style for about 6 months now, and its not something to be boiled down to that manifesto from yesterday. Its actually been a style for a while as seen in the intro for A Clockwork Orange ( https://vimeo.com/49553745 https://vimeo.com/49553745 ) Its not a joke either. there are some big companies in that list I shared like Nike, Snapchat, Gucci, etc.
- iamdave 8y agoI recognized the style, it wasn't until said manifesto that I even learned it had a name. Or rather that I learned what the name was. Would you say the manifesto is missing concepts and explanations of the style or are there inaccuracies and in your opinion what are they? You've got a captive audience in me on the affair, I'm not a designer but I oddly like the language of design and hearing specialists discuss it.
- deleted 8y ago[deleted]
- stef25 8y agoYesterday it was described as "left align your text and every change you make has to be to improve that starting point". Almost none of these sites follow that principle. Personally I think they look just awful, regardless of what principles they follow.
- b_b 8y agoMight just be me, but it feels a little weird that brutalist design needs a framework. But perhaps I'm misconstruing the design/look of it to how it is actually built, in which case I would rather just do a brutalist design but do it with some more fleshed-out alternative like jquery+bulma.
- deleted 8y ago[deleted]
- dewey 8y agoJust because it's "brutalist" doesn't mean it should be hard to read. I guess the point is just to reduce it to the basics while still being nice to look at with proper line breaks, padding and line heights. I think a simple framework to provide the basics could be helpful, the one mentioned yesterday was http://tachyons.io http://tachyons.io.
- devmunchies 8y agobrutalist is simply a design style (fonts, colors, layout) and doesn't need to be a philosophy that influences the tech stack.
- franciscop 8y agoI tried making something like this (JSX with Template Literals) few times, they are languishing in unfinished JSFiddles. The main issue was making it XSS-safe by default, which as I see this hasn't achieved at all! XSS demo 1: https://jsfiddle.net/hegLkz4s/2/ https://jsfiddle.net/hegLkz4s/2/ XSS demo 2: https://jsfiddle.net/hegLkz4s/4/ https://jsfiddle.net/hegLkz4s/4/ So, please do not use this, use React or similar well-tested libraries instead. There might be a way to make something like this that is XSS-safe by default (I got pretty close), but brutal.js does not seem to be it.
- dothis 8y agoWhat is the attack vector?
- 11235813213455 8y agoXSS, can't you read?
- rictic 8y agoThere are a number of HTML attributes and properties that can result in redirects, HTTP requests, and evaluation of arbitrary code. If the developer uses databinding with untrusted input into any of these attributes or properties, their site may be exploitable. A databinding engine can do some things to protect against this. One way of handling this is to treat strings as untrusted by default, and require explicit wrapping types for trusted content, e.g. https://google.github.io/closure-library/api/goog.html.SafeUrl.html https://google.github.io/closure-library/api/goog.html.SafeU...
- jamescostian 8y agoDemo 2 seems to be a problem with jsfiddle: https://jsfiddle.net/hegLkz4s/22/ https://jsfiddle.net/hegLkz4s/22/ It's also already been reported: https://github.com/jsfiddle/jsfiddle-issues/issues/963 https://github.com/jsfiddle/jsfiddle-issues/issues/963 You're right about there being an XSS vulnerability here though. But you can fix it pretty easily by escaping the HTML: https://jsfiddle.net/hegLkz4s/17/ https://jsfiddle.net/hegLkz4s/17/
- chowes 8y agoThis is satire, right?
- Mahn 8y agoIt'd better be.
- calibas 8y agoSeems to me that "brutalism" is two separate things that don't necessarily need to be mixed together. There's brutalist design, which is about keeping the design as simple and straightforward as possible. Then there's brutalist coding philosophy, which is keeping the code as simple and straightforward as possible.
- tzahola 8y agoA brutalist website - by definition - should hardly contain any JS/CSS.
- 11235813213455 8y agoLooks like my dom-tagged-template https://github.com/caub/dom-tagged-template/blob/master/index.js https://github.com/caub/dom-tagged-template/blob/master/inde... that I should simplify a bit The code in https://github.com/dosyago-coder-0/brutal.js/blob/master/r.js https://github.com/dosyago-coder-0/brutal.js/blob/master/r.j... is unsafe, as pointed out in some comments, and quite bad
- sergiotapia 8y agoLOL brutalism is all about removing these frameworks, but maybe this is a joke? good stuff!
- dictum 8y agoI. Every once in a while, a new fad appears that is described by the infatuated as not a fad, just the way things are innately or intuitively supposed to be. They never live up to this promise; the creative destruction along the way does pave the way for new and often better things, but it also destroys good tenets. II. Why is it that those who make the best works of a certain style are usually the ones who are least willing to associate themselves with the "movement" around that style?
- ChefboyOG 8y agoYour second point is especially salient to me. I think you see it in all creative fields, from development to painting. People who are religious about a style—viewing the style's doctrine as an ends in and of itself, as opposed to a tool to help achieve their vision—tend to be the creatives no one remembers.
- richjdsmith 8y agoReminds me in an odd way of Stimulus JS. (https://stimulusjs.org/ https://stimulusjs.org/) Actually, in the current project I am working on, I have been using Stimulus JS and VanillaJS™ exclusively and it is like a breath of fresh air. Shit just works as expected and setup was easy. I'd definitely recommend anyone who doesn't need a full frontend but rather just to add a bit of JS functionality to their site, without it becoming noodle soup that they check out Stimulus. If Brutal.js is going in that direction, props to it!
- tarboreus 8y agoI think this is kind of missing the point. The movement toward brutalism tries to bring back the uniqueness of sites on the early web in all their bizarre diversity. It's also about just using HTML and CSS, which used to be written by hand and which give sites an off-the-beaten-track personality.
- warent 8y agoAgreed. Not to sound too harsh, but this "framework" (actually a library) smells very strongly of bandwagon. Why should I use this when I could use something like Hyperapp or Preact, and what does Brutal.js have anything to do with specifically brutalism?
- rutierut 8y agoYes, could not agree more, Brutalism is quite hot right now (although HN seems to hold a bit of an alternative definition about what Brutalism entails) which really seems like the only reason this exists in its current form. A framework for Brutalism almosts sounds like an oxymoron to be honest.
- pvg 8y agoI don't think it's about bringing back the 'uniqueness' of early web sites. They aren't advocating putting visitor counters and unfolding envelope gifs on every page.
- omegote 8y agoSecond article regarding brutalism I've sent today in HN. Sheesh, time to redesign all of my websites with brutalist style.
- foxhop 8y agoI like the ideas behind "Brutalist Web Design" [0] and "minimalist web design", and flat design aesthetics where content is treated as most important over presentation. Personally I'm more in favor of what I term "Capability Driven Development" [1], known by others others as "Resilient Web Design"[2]. I think good "visual design" should often be minimal or even abstract, just enough to invoke a feeling or emotion related to the content. True to form or materials, like a brutalist. I think "web design" should work for the lowest common denominator and level up depending on the capabilities of the end user. This means using real HTML form submissions instead of AJAX. The page should work without Javascript, but the user experience may be enhanced with AJAX if Javascript is present. Web pages are built out of HTML elements, it should work that way from bottom up. From my perspective a Javascript only websites (AngularJS) is the same as a Flash only website (which the industry has formally shunned). [0] blog post: https://brutalist-web.design/ https://brutalist-web.design/ [1] blog post: https://russell.ballestrini.net/capability-driven-presentation/ https://russell.ballestrini.net/capability-driven-presentati... [2] (free online book): https://resilientwebdesign.com/ https://resilientwebdesign.com/
- corodra 8y agoLet's beat that dead horse. Part of the pillars of brutalist web design is "no framework". Sugarless sweetener now made from sugar cane!
- numtel 8y agoLit-html seems like a more fleshed-out version of this: https://github.com/Polymer/lit-html https://github.com/Polymer/lit-html
- spankalee 8y agoLooking at the code, lit-html should be more efficient at rendering, much more efficient at updating, and safer. Lit-html parses each JS template only once, before interpolation, then caches the resulting HTML template. It clones that template for each new instance, then critically, finds the dynamic parts and directly updates the instance DOM on re-renders. This library looks like even though it uses HTML templates, it creates a new one for each render and update. Not only will that be slower (from parsing, DOM manipulation, layout and paint) because it recreates all the DOM nodes it won't play nice with anything stateful like forms, or many custom elements. It also looks like it might have XSS vulnerabilities from interpolating data before parsing. I'm happy to see more libraries use tagged template literals though. They're purpose-built for embedding DSLs like HTML, their cachability means you can get amazing performance from them, and they're not non-standard syntax extensions like JSX, so don't require a custom compiler.
- kowdermeister 8y agoThe brutal truth is you need a static site generator if you want some structure and tweak the "bare bones" template that usually for 15 minutes.
- reilly3000 8y agoDo kids these days even write raw HTML, CSS, and JS?
- lcnmrn 8y agoBrutalism is about avoiding all kinds of front-end frameworks that ruined the web. It’s about writing vanilla JS/HTML/CSS and rendering most of the site server side.
- krsdcbl 8y agoI kinda feel a js framework for building brutalist websites almost ironically misses the point. Though brutalist doesn't per se imply a _technical_ reduction to barebones web pages, like in any design dicipline, a larger theory of design like this deginitely has a lot to say about underlying technology. Maybe it's just me, but kind of the point of brutalist design is to say: "you're overengineering it. Keep it raw to what it is, and as expressive as possible". I wouldn't go as far to say this is all "wrong" to me, but it strongly feels like "stone washed designer jeans with holes in them" - just faking it.
- antonvs 8y agoIt says it's for web applications, which is a slightly different goal that can justify the use of JS. That said, "brutalist" strikes me as a pretty silly concept to apply to the web. In the architecture of buildings, there can be a direct relationship between the technology used and the visual result. The same doesn't really apply to the web, unless for example you use pure HTML with no CSS or JS. As soon as you introduce CSS, you're putting a "facade" on the system that's the equivalent of draping a brutalist building in, say, marble or glass. Deliberately using that styling to look "as if" it's something else turns brutalism into a facade itself. And as you say, once you introduce JS, all bets are off. So, the philosophical and artistic foundations here seem dubious, undermining the integrity behind the original idea, and making the whole exercise seem faddish.
- krsdcbl 8y agoThis is another way to look at it, for sure - but the same would hold true of Google's "Materials", in the digital realms everything is just a metaphor. But the idea of "barebones" in brutalism really means to embrace the scaffolding and raw form of what you build. The comparison of css to the facade or to "ornament" in architecture can't be made here, as css also takes up a big part in the actual "shape of the building". The reference to brutalism in regards of css can therefore be understood as a directive to moderation, paint, not marble. But what disturbs the concept of brutalism to me is building the dom with js - this is where we leave the "building block of the web" part of js and go off the original intention of the brutalist metaphor. As i said, why not? But it does feel like a bandwagon thing, defiant of the general idea
- _bxg1 8y agoMaybe building a "brutalist framework" is all just a big artistic statement
- kvczor 8y agoI don't get the example code. It is possible to write even simpler code in React than it is showed in the documentation. const ButtonWidget = ({name}) => (<button onClick={() => showModal(name)}>Show {name} Modal</button>);