17 ms·

Writing Less Code

583 points by fiatjaf 10y ago

midgetjones 10y ago
Black on white is really hard to read
1_player 10y ago
The Margin (* + *) and Font Size (font-size: calc(1em + 1vw)) declarations are really cool, it's the first time I read about them. What do more experienced designers think of them? Handling spacing between elements is usually a pain (should I add margin on the top, or the bottom?), and font sizes proportional to the display width is IMO genius, so why aren't these declarations used more often? EDIT: the article title is a little unfortunate, I thought it was about the modern Javascript ecosystem and that every tool has to have some kind of plugin system, modularity, extensibility, and require a ton of boilerplate to fit your 3-file website. Or that's what I expected, anyway.
- jordanlev 10y ago
  I want to love every technique like this (or their more involved cousins like a typography "vertical rhythm" system)... but when it comes time to build sites with some visual and/or layout complexity (for a business client, not a blog that's a relatively simple stream of primarily-text articles), I always wind up with so many exceptions to the rule that I find these catch-all declarations to just be one more thing I'm working around. For me, the single most useful technique I've discovered in the past few years has been "drop the 'C' in 'CSS'" and instead think in terms of modular components with virtually no cascading or selector nesting. E.g. BEM. Getting over the aesthetic ugliness of "class-itis" in my markup has freed me from a ton of agony trying to reason about why certain elements on the page are being styled a certain way.
  - 1_player 10y ago
    > BEM I'm partial to rscss (http://rscss.io http://rscss.io) although that's another "technique" that doesn't seem to be used a lot in the wild. Just makes sense to me.
    - piotrkubisa 10y ago
      Thanks you for sharing CSS structure guide, It is very interesting, but I found a drawback based on my experience when the role of "person responsible the look & feel" is shared between team-mates. Some developers (who raised up when jQuery was must-be library in any project) have practice to supply implicit class selector i.e. when they search elements with class name '.link' via document.querySelector. I like the rscss(-like) way, because BEM which is very difficult to follow for newbies (especially now, when react is so popular). But, hey is it a next competitive standard as in famous xkcd [1]? [1]: https://xkcd.com/927/ https://xkcd.com/927/
    - Kiro 10y ago
      Thanks. rscss seems really interesting. I've mostly used BEM but I like the syntax in rscss more. One thing I'm not sure about though is the child selector. I often have intermediate layers between the root of my component and the elements. Wrappers and stuff to make certain positioning possible. This won't be possible with child selectors only.
  - 1_player 10y ago
    Sorry for the double reply... > when it comes time to build sites with some visual and/or layout complexity I always wind up with so many exceptions to the rule I've been looking for a LONG time for articles about consistent design and typography applied to UIs and boring CRUD apps. 99% of the article about vertical rhythm, spacing, typography and general design are about designing blogs and text-heavy sites. I need something that teaches me how to design a functional, beautiful and user friendly reactor control dashboard.
  - lmm 10y ago
    I've been saying for years that CSS is more trouble than it's worth if you're not writing your pages by hand. If I know that this element is an address field, I can style it like an address field, then and there. (Maybe optimize by using a uniquely-named class, or maybe not - pages are sent gzipped, that may well be good enough). Reusable, self-contained components are a great idea - but to be truly self-contained they need to include their styling.
    - jordanlev 10y ago
      This is the idea behind the new-ish "shadow dom" feature that is slowly being implemented by browsers. (Part of the larger "web components" concept that will hopefully become a thing at some point). In the meantime... with some discipline you can keep things self-contained just by using unique classes for each component (like what BEM and other similar naming conventions espouse). Could also look into CSS linters to keep you and your team honest.
      - welanes 10y ago
        > will hopefully become a thing at some point. I replied to the parent comment here - https://news.ycombinator.com/item?id=12308352 https://news.ycombinator.com/item?id=12308352. You might find it useful.
        jordanlev 10y ago
        Thanks for the pointer. I'm actually a big fan of Vue.js and use it in several product sites/apps. However, if one is just wanting some componentization/isolation in their CSS and not actually building a javascript app, then it's kind of overkill. Also, while it does allow you to keep your component code in different files, by the time the browser is using your CSS it's still all in one big "global namespace" (so to speak), so you still need to enforce some discipline on your css class names, even if they're in different files. (Or perhaps I'm wrong about this and vueify modifies your classes or selectors or something to avoid this?)
        10y ago
  - RUG3Y 10y ago
    Your advice about dropping the "C" in "CSS" is good. I've done this and felt inferior because my CSS isn't as "good" as others. It made me feel like a hack for a long time before I finally started trusting myself and doing things the way I want to.
  - averyvery 10y ago
    Yeah, this is why the "You won’t need many" line is where I stopped reading. Developers who say "most of your LIs are gonna be indented" and "most of your elements will need a top/bottom margin" or "your font sizes will all be relative to the font size of the container" aren't building even slightly complicated UIs...but that doesn't stop them from passing around these "just write CSS, dummy" posts once every few months. If you write CSS for your personal blog and want to mass-apply styles to save time, go for it, but I think the majority of people who write CSS as a part of their daily work will find that this attitude creates more headaches than time savings.
- Bartweiss 10y ago
  That font size declaration stood out as a really clever way to get a 'responsive' page with minimal work. My one concern is that it might get weird on mobile. Android apps, though maybe not mobile pages, have all kinds of awful problems with any font that isn't a convenient integer multiple of pixel size. I'm curious whether this renders gracefully.
- ericthor 10y ago
  Adjusting font size with vw is fun, but often the rate at which the font scales is kind of loopy especially when compared to small type. This article takes the example you mentioned above and takes it much further. https://www.smashingmagazine.com/2016/05/fluid-typography/ https://www.smashingmagazine.com/2016/05/fluid-typography/ Have used * + * before. It creates this huge dependence on the placement and ordering of your html you can't create psudo elements to pull off some style trick, there are often a bunch of exceptions when using it too that it kind of defeated the purpose of using it in the first place. Best to have a .class * + * in front of it to relegate it to a specific area.
- Blaiz0r 10y ago
  The font size method is a little bit ambitious, sites I've worked on will always have caveats. The margin application though is very clever and the right way to go about it, even in complex designs you'll be able to apply this to most components (maybe not using the body selector though). These aren't used more often because many developers aren't very familiar with the complete power that CSS has to offer, take BEM for example it completely eradicates the most powerful feature that CSS has to offer.
- deleted 10y ago
  [deleted]
legulere 10y ago
No code is better than no code
- deleted 10y ago
  [deleted]
- jessaustin 10y ago
  That seems logically problematic. Perhaps "no code is as good as no code"? [EDIT:] wow!
  - akavi 10y ago
    Those seem the same to me, but the parent's is pithier. What's the difference in your eyes?
    - jessaustin 10y ago
      In parent's formulation, the phrase "no code" acts as a polyseme, carrying slightly different meanings each time it appears. It seemed like an attempt at word play, which I thought could be improved by pitting that interpretation against another strictly monosemous one that would be tautological once the ">" relation was changed to ">=". However it seems I've been overruled.
  - jonahx 10y ago
    It's perfectly logical -- the same words can have different meanings in different contexts (here, the phrase "no code" has two meanings). Un-epigramming it, you'd have something like: "No code snippet exists that is as good as the complete absence of code"
  - lorenzhs 10y ago
    No, your parser mismatched. Let me rephrase the GP: there does not exist any code that is better than not having any code at all. ∄ code c : c > ε (where the empty word ε represents no code and a>b means that code a is better than code b)
  - 10y ago
legulere 10y ago
> Do you remember ever enjoying using/reading a website with more than two columns? Pinterest
- et-al 10y ago
  I assume the author meant to emphasize reading. And when you try to speed-read/browse multi-column layouts, it's becomes slower because your eye needs to cover a larger horizontal area. For example, when Flickr transitioned from a single-column to the current row-by-row clusterfuck, it became much harder to quickly find a particular image in someone's photostream.
- pjc50 10y ago
  Also, example.tumblr.com/archive, which has the added advantage of not using people's themes.
  - bmj 10y ago
    I would only consume the archive of tumblr blog that is primarily photos that way. Trying to read a mostly print blog that way would be difficult.
  - flukus 10y ago
    Tumblr is a black hole of awful UI design. You can't even use god damn tabs with the default theme.
- yxhuvud 10y ago
  I certainly have a hard time seeing either Trello or Jira without multiple columns.
- overcast 10y ago
  There isn't anything enjoyable about a wall of posts honestly. I'm glad that trend on every copycat site died out.
- StavrosK 10y ago
  Also literally any table, but that's not what the author meant.
jomamaxx 10y ago
This
OhHeyItsE 10y ago
Yes, yes, yes. Though a rehash of https://blog.codinghorror.com/the-best-code-is-no-code-at-all/ https://blog.codinghorror.com/the-best-code-is-no-code-at-al... (which is itself a rehash)
puppetmaster3 10y ago
Hey programmers:'let us make ugly apps. No idea why we need designers.' Hey designers: 'See, you don't want a programmer touching front end. You have to have creative control. Else they'll make reddit and hacker news UX.' http://image-store.slidesharecdn.com/3f5416bc-c975-4915-a9d1-4d62b1fc0a09-original.jpeg http://image-store.slidesharecdn.com/3f5416bc-c975-4915-a9d1...
- jimmaswell 10y ago
  The UX on HN and Reddit is basically perfect, though.
  - qwertyuiop924 10y ago
    The UX on HN is good. Reddit, not so much nowadays.
    - pjc50 10y ago
      HN is pretty good after the update that introduced tree collapsing, except that the up/down arrows are implemented weirdly. So on my Windows tablet, and occasionally on Android, when clicking on the arrow the browser decides to snap to the nearest clickable link instead, which is the userid. I'm also intending to build a scraper simply so I can determine what my highest voted comments of all time are.
      - bushin 10y ago
        You can use this search API: hn.algolia.com/api/v1/search?tags=comment,author_pjc50
  - ArkyBeagle 10y ago
    Usenet is better.
- ArkyBeagle 10y ago
  This is a specialization of "let's form two tribes so we can argue about stuff." "Argue" is not a perjorative here; productive argument is a good thing. We must generally, though treat the other tribe as a customer to aid in making said discussion productive. Perhaps with Web protocols, things are ... entangled in inconvenient ways ( for, you know, ... reasons ) such that the formation of two tribes is a solution. I don't generally build Web things. When I do build a GUI, I intentionally give it an old style, because I'm really a systems programmer ( eek, a third tribe! ) and this invites someone else to express the resulting inevitable disgust in a replacement. But meanwhile, there's an interface for it.
ahallock 10y ago
While I agree with a lot of the author's points, I've actually grown to like hero images, when they're done tastefully, relate to the product, and are optimized for mobile devices.
- munificent 10y ago
  > relate to the product Based on my non-comprehensive empirical study, that describes about 3% of hero images in the wild. That is, unless almost all products are deeply related to fashionable twenty-somethings using a laptop in a coffeehouse surrounded by cute stationery with interesting organic textures.
  - PeCaN 10y ago
    > laptop Is that what Macbooks are called these days? Dammit munificent, get it right.
    - munificent 10y ago
      Wait, isn't it supposed to be an iWatchlet or something now?
CarpetBench 10y ago
To anyone who's planning to use this or Atwood's article on writing less code as a little red book: For the love of god, please use some common sense when repeating mantras like "write less code." I've seen this used to justify all sorts of ridiculous shit, like dropping basic security measures (write less code! YAGNI! Why would someone try SQL injection/XSS against our site anyway?!?). If I propose something and your thought-terminating cliche response is some form of "YAGNI," I hate you.
- jonahx 10y ago
  "If I propose something and your thought-terminating cliche response is some form of "YAGNI," I hate you." This has been my experience too. While the concept has value, I find most people that throw the term around do so as a justification for not thinking much. To armchair psychologize a bit, I think that enthusiastically embracing an acronym which, whatever its conceptual merits, is just so lame-sounding correlates negatively with taste, and taste correlates, albeit imperfectly, with programming skill, especially the skill of writing readable code.
  - gsmethells 10y ago
    So you're saying the DRY Principle is not worth harping on? https://en.wikipedia.org/wiki/Don%27t_repeat_yourself https://en.wikipedia.org/wiki/Don%27t_repeat_yourself
    - jonahx 10y ago
      Nah, DRY >> YAGNI. It's a short, easily pronounced English word whose meaning is a nice metaphorical fit for the concept expressed by the acronym. You can argue acronyms in general are lame, but I'm not taking that hard line.
  - stcredzero 10y ago
    Applying YAGNI to security should be an immediate red flag. As I say in a cousin comment, good taste is just 3rd order laziness. You're doing less by avoiding future trouble. To armchair psychologize a bit, I think that enthusiastically embracing an acronym which, whatever its conceptual merits, is just so lame-sounding correlates negatively with taste Wouldn't you prioritize conceptual taste over aesthetic taste? YAGNI probably sounds goofy because it was created in the late 90's. It was part of the original Extreme Programming formula. The concept is as solid as such concepts get, however.
zeveb 10y ago
> Do you remember ever enjoying using/reading a website with more than two columns? I don’t. Another one of the things I really miss about the pre-JavaScript, pre-CSS, document-oriented (as opposed to the current experience-oriented) web is being able to make my browser window half or a third of my screen, and having documents be eminently readable. That was really, really nice. Try it now, though, and nothing really works correctly. Which is weird, because a third-width window on a laptop or desktop has roughly the same proportions as a phone in vertical layout.
- qwertyuiop924 10y ago
  Oh, god yes. If you need a special, mobile only site, you're doing it wrong. HN is living proof.
  - cocotino 10y ago
    That's correct for many websites, but others such as Facebook have such a complicated but still correct UI on a desktop that it's appropriate to have two different websites.
    - babuskov 10y ago
      > correct UI on a desktop Nope. That was true about a year ago, but not anymore. Facebook UI on a desktop is horrible. Try using it with 1024px wide screen - most apps/games aren't fully visible because they give 760px to the canvas and the rest of their UI is not responsive - so either the ad space on the right or the content (app/game) has to suffer.
      - Bahamut 10y ago
        It certainly needs more love - another problematic part is when you have messages open but you want to see stuff on the column to the right of the newsfeed. Its design leaves some to be desired.
        10y ago
qwertyuiop924 10y ago
This is coding 101: Write/include only the code you need. No more, no less. To quote ESR (as much as I hate doing so), "Don't just do something, stand there!" And yes, security and error checking are necessary. Anybody who says otherwise should be drawn, quartered, shot, and fired. As much as I like this post, a framework sometimes has some value. If you're writing a true SPA, it'll only be loaded once, and something like React or Mithril is nice for a bit of structure. Mithril in particular, due to its small size, is handy.
- vidarh 10y ago
  I don't see the post as arguing against a framework per se, but arguing against pulling in and using code for things you can do as well or better without it, and only pulling out the heavy guns where it's actually necessary.
- omni 10y ago
  > To quote ESR (as much as I hate doing so), "Don't just do something, stand there!" I tried to figure out what ESR meant here and after a minute of Googling I'm guessing it's Eric S. Raymond[1]. Please consider not using uncommon acronyms on online forums, it obscures your meaning. [1] http://www.catb.org/esr/writings/taoup/html/ch12s01.html http://www.catb.org/esr/writings/taoup/html/ch12s01.html
  - riboflava 10y ago
    I hope you're complaining about "ESR" instead of "esr", because his initials, much like "rms" et al. are common acronyms, especially on online forums like Hacker News.
  - qwertyuiop924 10y ago
    ESR is a fairly common abreviation. Just like RMS, K&R, SICP, BDFL, BNF, TAOCP (aka Knuth), XHR, AFAIK, and RTFM.
    - AceJohnny2 10y ago
      I'm glad you included RMS, but what about JWZ [1], GKH [2] or JGC [3] ? :] [1] https://www.jwz.org/about.html https://www.jwz.org/about.html [2] https://plus.google.com/+gregkroahhartman https://plus.google.com/+gregkroahhartman [3] http://blog.jgc.org/ http://blog.jgc.org/
deleted 10y ago
[deleted]
deleted 10y ago
[deleted]
BinaryIdiot 10y ago
I love it. Not only were the tricks interesting (I'll have to explore those more to see if they scale in some projects I'm working on) but the advice rings exceptionally true. Well at least in my opinion. I've done web development for a little over 12 years now and the amount of times I've seen someone pull in a huge framework, fonts, tons of libraries just to make a simple page is astounding. I once worked at a job where they abused ASP.Net to such a degree that they were delivering a page to the user of over 70MB (about 60MB of that was only ViewState!!!) and while the application had its complex pieces that was only on a homepage that showed a very, very crude dashboard with only the functionality to re-order boxes. Boxes! Frameworks have their place. Libraries have their place. They're helpful. But you don't need to bring them in every single time you write a web site or application. That code eventually has to be downloaded and viewed by a user and if you can do it with as few dependencies as possible your users will subconsciously thank you.
- JustSomeNobody 10y ago
  Because developers today grow up in a world of computing abundance. They don't realize what it's like to develop on limited resources. There needs to be a balance between bare bones and throw everything at it that you can find on Github.
- lloyd-christmas 10y ago
  > I've seen someone pull in a huge framework, fonts, tons of libraries just to make a simple page is astounding... But you don't need to bring them in every single time you write a web site or application. I'm a back end developer. I learned JS in the context of Node. The amount of time it would take me to learn some useful CSS would decimate my ability to get something out the door compared to just pulling in bootstrap. It's often the case that there simply isn't enough to be done to necessitate hiring someone correctly suited for the job. Additionally, whenever I leave my company and they find someone to replace me, there's a strong chance that person knows bootstrap. There is a balance to be had with user joy and developer joy.
  - welanes 10y ago
lolive 10y ago
The mantra of "write less" coding : "Never EVER copy/paste code. Refactor!"
- chrisan 10y ago
  Unless you follow the Rule of 3 https://en.wikipedia.org/wiki/Rule_of_three_(computer_programming) https://en.wikipedia.org/wiki/Rule_of_three_(computer_progra...
K0nserv 10y ago
I agree with the sentiment of this post and the techniques shown are smart(and new to me). I do want to point this out however[0]. 0: http://imgur.com/a/v1rbB http://imgur.com/a/v1rbB
wangchow 10y ago
A lot of it has to do with the sloppy tricks people are trying to implement to get multimedia ads and whatnot on their sites. We are bombarded with ads in our day-to-day life and people's attention is more-and-more difficult to grab. Unfortunately they don't realize form follows function and their function is getting fucked. The internet is more about money and less about spreading ideas nowadays.
- new_hackers 10y ago
  "their function is getting fucked" It sounds like they are practicing the oldest profession
korethr 10y ago
I appreciate that he practices what he preaches here. Perhaps I've been made cynical by my experience with several other sites, but I was half-expecting to have to enable JS from a bunch of other domains just to get the content to render correctly, if at all, and still be blocking a bunch of ads and social media plugins atop that. There would be a disappointing irony were that the case. But no, the whole site loads quickly and correctly with no intervention on my part. The only thing uMatrix is detecting _to_ block is Google Analytics, and blocking it is having no impact upon the content on the page. I wish this were the rule, not the exception.
- em3rgent0rdr 10y ago
  Privacy badger noticed 3 trackers for disqus, that when disabled removed the comments section.
  - ajosh 10y ago
    Disqus is the comments section for a lot of sites so this one is probably no different.
jessaustin 10y ago
What about changing this from TFA: <input type="checkbox" id="checkbox1" name="checkbox1"> <label for="checkbox1">My checkbox label</label> to this? <label><input type="checkbox" name="checkbox1"> My checkbox label</label> I'm sure there are styling implications, but often one doesn't care about those. "Don't repeat yourself" seems like a rule that goes along with "write less code".
- EdSharkey 10y ago
  There is goodness to putting your label tag, with the for attribute that points to the input, AFTER the input tag in the DOM that you may not be aware of! Here are some selectors you can use with that setup: input + label { ... } input ~ label { ... } input:checked + label { ... } input:checked ~ label { ... } Those selectors let you style the label based on the STATE of the checkbox, and they work all the way back to IE7. This stateful CSS is very powerful because you can make the input tag visibly hidden and style your label tag to appear as a custom widget or checkbox - and have it look different when toggled. Take a look at html5 boilerplate's visuallyhidden CSS class to see a particularly ninja way of hiding an element. Think of what can you achieve with just CSS and markup that maybe you needed jQuery or JavaScript to achieve in the past! By the way, using the visuallyhidden class is the ideal way of hiding a tabbable element like a checkbox while keeping it adjacent in the flow to its related elements. This method of hiding is especially kind to low vision users of your site who use tab to navigate your forms. From an accessibility standpoint, having label-with-for is helpful to screen readers of varying quality out in the wild. label-with-for ensures the screen readers will never be mistaken about which label goes with which checkbox. .visuallyhidden, input:checked, label-with-for, and the +, ~, and > combinators, plus WAI-ARIA attributes can be used to make visually appealing, yet accessible, widgets without JavaScript.
  - nostrademons 10y ago
    tracker1 has a sibling thread with an alternate formulation that achieves this but still has the label as a parent of the checkbox: https://news.ycombinator.com/item?id=12307236 https://news.ycombinator.com/item?id=12307236
dalacv 10y ago
How about writing no code? https://www.udemy.com/bubble-course/ https://www.udemy.com/bubble-course/
stcredzero 10y ago
> Not only is the following checkbox implementation verbose HTML, but it needs a JavaScript dependency to control state changes and to follyfill standard, basic behavior* I like this coder!
230329101 10y ago
So, we are discussing this pablum here, while submissions like https://www.oneeyedman.net/?p=2581 https://www.oneeyedman.net/?p=2581 are censored by the ministry of truth.
230329101 10y ago
So, we are discussing this pablum here, while submissions like https://www.oneeyedman.net/?p=2581 https://www.oneeyedman.net/?p=2581 are censored by the ministry ot truth.
heydenberk 10y ago
This domain is really throwing me for a loop.
joeblau 10y ago
While I'm all for writing less code, it seems like most development teams are optimizing for maximum number of people working on code at the same time over writing less code.
deleted 10y ago
[deleted]
cel1ne 10y ago
Check out http://tachyons.io http://tachyons.io. It has a scale for widths, margins, paddings and fontsizes. Specify pl1 to pl7 and get padding-left from 0.25 to 16rem. w1 to w5 for width of 1,2,4,8,16rem. f1 to f6 and f-headline for a proven typographic scale that makes sense. Everything is relative to the fontsize. No more magic values! Plus the scale are powers of two so integers only and everything always adds up. No more off-by-1-pixel errors! And there's even a port for react-native: http://github.com/fab1an/react-native-style-tachyons http://github.com/fab1an/react-native-style-tachyons.
mark_l_watson 10y ago
I like the sentiment of the article, not just with CSS, but also with imperative code: use really light weight frameworks like Spock or Sinatra and build in just what you need. That said, I have been using Bootstrap, which is heavy weight, but I like how my mobile web sites also look nice on the desktop and on tablets.
ElijahLynn 10y ago
To Heydon: Good article, especially love your simplicity and typography of your own site, very easy to read. You should consider updating your WP Supercache or maybe just WP? to have a max-age longer > 3. Maybe you have a use case I am unaware of that effectively voids browser cache though.
Animats 10y ago
Remember when we had tools like Dreamweaver to do HTML for us? What went wrong?
- jtolmar 10y ago
  Dreamweaver let you try to do things that wouldn't play nice with HTML and it would use the limited tools available at the time to make bloated sites that still didn't look right in most browsers. Then since Dreamweaver was garbage people decided that any WYSIWYG HTML-editor is guaranteed to be terrible and nobody ever tried again.
  - Animats 10y ago
    There's a disruption possibility. CSS is now good enough and browsers are now compliant enough that a WYSIWYG HTML editor is feasible again. The parent article points out that you barely need Javascript any more. Lay off those overpaid "web designers". Someone is trying: "https://www.tinymce.com" https://www.tinymce.com". No idea how good this is.
    - Scea91 10y ago
      Tinymce is not a WYSIWYG editor for creating HTML sites. But a text editor implemented in HTML.
  - flukus 10y ago
    > Then since Dreamweaver was garbage people decided that any WYSIWYG HTML-editor is guaranteed to be terrible and nobody ever tried again. Dreamweaver is still the best WYSIWYG HTML editor, and it's still garbage at it.
myst 10y ago
The title mentions code. The article is about HTML. IDGI
fragola 10y ago
I know this article is mostly about web development, but if you're interested in writing less Java code I encourage you to consider Lombok: https://projectlombok.org/ https://projectlombok.org/
- djhworld 10y ago
  Some things in Lombok seem redundant to me, especially with Java 7 and 8. For example the @Cleanup annotation.
tracker1 10y ago
Regarding checkboxes/radio <label> <input type="checkbox" ... /> <span>Label Text</span> </label> This way the label magically works, similar to H2, also, the nested span is so that you can target `input[type=checkbox]` with `+ span` in order to do custmized glyphs for checkboxes without JS. ... For fonts, have a base size for `html, body` then use `rem` everywhere else.
davidhariri 10y ago
> The less I write, the less there is to break Not when you're writing consumable services IMO. The less you write in building a REST API, for example, the _more_ opportunity there is for someone to break it. It's important to catch exceptions, write detailed models, write tests for fail/success cases etc... It's a good principle (optimizing for less code), but not always.
lucb1e 10y ago
I see no other comments mentioning this. Nobody else thought the font was way too big and when zooming out until about 50% it's finally a nice size to read?
jcoffland 10y ago
There is nothing quite as pleasurable (with reference to technical work) as sending large amounts of obsolete code to the bit bucket. I often judge my refactoring decisions based on how much code gets removed. If a change results in the removal of code at many locations then I take that as confirmation that I made a good decision.
rileymat2 10y ago
One distinction that should be made is when some elements are the same intentionally while others are the same by coincidence. I see no problem with duplicate code in the latter case.
- mlvljr 10y ago
  Everything is there intentionally, in a sense; but some shapes of codebase adapt to some requirements changes better, and some less -- and thus, this becomes a choice of implementation strategy given current requirements and some sort of probabilistic model for their change (both in theory and practice, where the probabilities have to be assumed creatively, as there is no other way). Basic and worth-thinking-over stuff, yet in no book or blogs (as bloggers seem to like to express themselves on "cohesion" and such, w/o using any metrics, of course, even for simpler examples :)).
cel1ne 10y ago
(Note: There's a duplicate of this comment) Check out http://tachyons.io http://tachyons.io. It has a scale for widths, margins, paddings and fontsizes. Specify pl1 to pl7 and get padding-left from 0.25 to 16rem. w1 to w5 for width of 1,2,4,8,16rem. f1 to f6 and f-headline for a proven typographic scale that makes sense. Everything is relative to the fontsize. No more magic values! Plus the scale are powers of two so integers only and everything always adds up. No more off-by-1-pixel errors! And there's even a port for react-native: http://github.com/fab1an/react-native-style-tachyons http://github.com/fab1an/react-native-style-tachyons.
snambi 10y ago
Make the title "write cleaner HTML Code". Author some point, but the title is totally misleading.
andrepd 10y ago
Let me just say, for an article about writing less, this is sure a roundabout way of saying something that could be said in 1/3rd of the length. No, I don't want to hear you ramble on with the discourse of someone who thinks they are hilarious and likes the sound of their own voice too much. Just get to the point. /rant
partycoder 10y ago
You write less code by: - Removing dead code - Applying a coding standard to emphasize code consistency, so similar problems have similar solutions. - Once you have similar problems, you can generalize code to solve a family of problems instead of a single problem. Otherwise known as code reuse. - Diminish coupling so code can be reused as much as possible.
peterbotond 10y ago
Too many columns and talk about it..... My take: one single column that the rendering visible area can figure out how to render. No hidden agenda. only and just information worth reading: learning, discussing, agreeing ir disagreeing. (my first papers were from a teletext or a stencil or a typewriter they were of the information I wish for to read today at least 3-4 times a week. instead of 3-4 days go by for one.) Bring back the pure unadulterated brain output.
frostymarvelous 10y ago
I facilitated a class yesterday and I hammered on proper semantic html and only using WAI-ARIA where totally necessary like in tabs. Glad to see its more or less a consensus.
rachkovsky 10y ago
This is the only web site I had to make font size smaller to read it comfortably.
ackalker 10y ago
TL;DR: KISS+YAGNI :-)

583 points by fiatjaf 10y ago

Black on white is really hard to read

The Margin (* + *) and Font Size (font-size: calc(1em + 1vw)) declarations are really cool, it's the first time I read about them. What do more experienced designers think of them? Handling spacing between elements is usually a pain (should I add margin on the top, or the bottom?), and font sizes proportional to the display width is IMO genius, so why aren't these declarations used more often? EDIT: the article title is a little unfortunate, I thought it was about the modern Javascript ecosystem and that every tool has to have some kind of plugin system, modularity, extensibility, and require a ton of boilerplate to fit your 3-file website. Or that's what I expected, anyway.

jordanlev 10y ago
I want to love every technique like this (or their more involved cousins like a typography "vertical rhythm" system)... but when it comes time to build sites with some visual and/or layout complexity (for a business client, not a blog that's a relatively simple stream of primarily-text articles), I always wind up with so many exceptions to the rule that I find these catch-all declarations to just be one more thing I'm working around. For me, the single most useful technique I've discovered in the past few years has been "drop the 'C' in 'CSS'" and instead think in terms of modular components with virtually no cascading or selector nesting. E.g. BEM. Getting over the aesthetic ugliness of "class-itis" in my markup has freed me from a ton of agony trying to reason about why certain elements on the page are being styled a certain way.
- 1_player 10y ago
  > BEM I'm partial to rscss (http://rscss.io http://rscss.io) although that's another "technique" that doesn't seem to be used a lot in the wild. Just makes sense to me.
  - piotrkubisa 10y ago
    Thanks you for sharing CSS structure guide, It is very interesting, but I found a drawback based on my experience when the role of "person responsible the look & feel" is shared between team-mates. Some developers (who raised up when jQuery was must-be library in any project) have practice to supply implicit class selector i.e. when they search elements with class name '.link' via document.querySelector. I like the rscss(-like) way, because BEM which is very difficult to follow for newbies (especially now, when react is so popular). But, hey is it a next competitive standard as in famous xkcd [1]? [1]: https://xkcd.com/927/ https://xkcd.com/927/
  - Kiro 10y ago
    Thanks. rscss seems really interesting. I've mostly used BEM but I like the syntax in rscss more. One thing I'm not sure about though is the child selector. I often have intermediate layers between the root of my component and the elements. Wrappers and stuff to make certain positioning possible. This won't be possible with child selectors only.
- 1_player 10y ago
  Sorry for the double reply... > when it comes time to build sites with some visual and/or layout complexity I always wind up with so many exceptions to the rule I've been looking for a LONG time for articles about consistent design and typography applied to UIs and boring CRUD apps. 99% of the article about vertical rhythm, spacing, typography and general design are about designing blogs and text-heavy sites. I need something that teaches me how to design a functional, beautiful and user friendly reactor control dashboard.
- lmm 10y ago
  I've been saying for years that CSS is more trouble than it's worth if you're not writing your pages by hand. If I know that this element is an address field, I can style it like an address field, then and there. (Maybe optimize by using a uniquely-named class, or maybe not - pages are sent gzipped, that may well be good enough). Reusable, self-contained components are a great idea - but to be truly self-contained they need to include their styling.
  - jordanlev 10y ago
    This is the idea behind the new-ish "shadow dom" feature that is slowly being implemented by browsers. (Part of the larger "web components" concept that will hopefully become a thing at some point). In the meantime... with some discipline you can keep things self-contained just by using unique classes for each component (like what BEM and other similar naming conventions espouse). Could also look into CSS linters to keep you and your team honest.
    - welanes 10y ago
      > will hopefully become a thing at some point. I replied to the parent comment here - https://news.ycombinator.com/item?id=12308352 https://news.ycombinator.com/item?id=12308352. You might find it useful.
      - jordanlev 10y ago
        Thanks for the pointer. I'm actually a big fan of Vue.js and use it in several product sites/apps. However, if one is just wanting some componentization/isolation in their CSS and not actually building a javascript app, then it's kind of overkill. Also, while it does allow you to keep your component code in different files, by the time the browser is using your CSS it's still all in one big "global namespace" (so to speak), so you still need to enforce some discipline on your css class names, even if they're in different files. (Or perhaps I'm wrong about this and vueify modifies your classes or selectors or something to avoid this?)
        10y ago
- RUG3Y 10y ago
  Your advice about dropping the "C" in "CSS" is good. I've done this and felt inferior because my CSS isn't as "good" as others. It made me feel like a hack for a long time before I finally started trusting myself and doing things the way I want to.
- averyvery 10y ago
  Yeah, this is why the "You won’t need many" line is where I stopped reading. Developers who say "most of your LIs are gonna be indented" and "most of your elements will need a top/bottom margin" or "your font sizes will all be relative to the font size of the container" aren't building even slightly complicated UIs...but that doesn't stop them from passing around these "just write CSS, dummy" posts once every few months. If you write CSS for your personal blog and want to mass-apply styles to save time, go for it, but I think the majority of people who write CSS as a part of their daily work will find that this attitude creates more headaches than time savings.
Bartweiss 10y ago
That font size declaration stood out as a really clever way to get a 'responsive' page with minimal work. My one concern is that it might get weird on mobile. Android apps, though maybe not mobile pages, have all kinds of awful problems with any font that isn't a convenient integer multiple of pixel size. I'm curious whether this renders gracefully.
ericthor 10y ago
Adjusting font size with vw is fun, but often the rate at which the font scales is kind of loopy especially when compared to small type. This article takes the example you mentioned above and takes it much further. https://www.smashingmagazine.com/2016/05/fluid-typography/ https://www.smashingmagazine.com/2016/05/fluid-typography/ Have used * + * before. It creates this huge dependence on the placement and ordering of your html you can't create psudo elements to pull off some style trick, there are often a bunch of exceptions when using it too that it kind of defeated the purpose of using it in the first place. Best to have a .class * + * in front of it to relegate it to a specific area.
Blaiz0r 10y ago
The font size method is a little bit ambitious, sites I've worked on will always have caveats. The margin application though is very clever and the right way to go about it, even in complex designs you'll be able to apply this to most components (maybe not using the body selector though). These aren't used more often because many developers aren't very familiar with the complete power that CSS has to offer, take BEM for example it completely eradicates the most powerful feature that CSS has to offer.
deleted 10y ago
[deleted]

legulere 10y ago

No code is better than no code

deleted 10y ago
[deleted]
jessaustin 10y ago
That seems logically problematic. Perhaps "no code is as good as no code"? [EDIT:] wow!
- akavi 10y ago
  Those seem the same to me, but the parent's is pithier. What's the difference in your eyes?
  - jessaustin 10y ago
    In parent's formulation, the phrase "no code" acts as a polyseme, carrying slightly different meanings each time it appears. It seemed like an attempt at word play, which I thought could be improved by pitting that interpretation against another strictly monosemous one that would be tautological once the ">" relation was changed to ">=". However it seems I've been overruled.
- jonahx 10y ago
  It's perfectly logical -- the same words can have different meanings in different contexts (here, the phrase "no code" has two meanings). Un-epigramming it, you'd have something like: "No code snippet exists that is as good as the complete absence of code"
- lorenzhs 10y ago
  No, your parser mismatched. Let me rephrase the GP: there does not exist any code that is better than not having any code at all. ∄ code c : c > ε (where the empty word ε represents no code and a>b means that code a is better than code b)
- 10y ago

legulere 10y ago

> Do you remember ever enjoying using/reading a website with more than two columns? Pinterest

et-al 10y ago
I assume the author meant to emphasize reading. And when you try to speed-read/browse multi-column layouts, it's becomes slower because your eye needs to cover a larger horizontal area. For example, when Flickr transitioned from a single-column to the current row-by-row clusterfuck, it became much harder to quickly find a particular image in someone's photostream.
pjc50 10y ago
Also, example.tumblr.com/archive, which has the added advantage of not using people's themes.
- bmj 10y ago
  I would only consume the archive of tumblr blog that is primarily photos that way. Trying to read a mostly print blog that way would be difficult.
- flukus 10y ago
  Tumblr is a black hole of awful UI design. You can't even use god damn tabs with the default theme.
yxhuvud 10y ago
I certainly have a hard time seeing either Trello or Jira without multiple columns.
overcast 10y ago
There isn't anything enjoyable about a wall of posts honestly. I'm glad that trend on every copycat site died out.
StavrosK 10y ago
Also literally any table, but that's not what the author meant.

jomamaxx 10y ago

This

OhHeyItsE 10y ago

Yes, yes, yes. Though a rehash of https://blog.codinghorror.com/the-best-code-is-no-code-at-all/ https://blog.codinghorror.com/the-best-code-is-no-code-at-al... (which is itself a rehash)

puppetmaster3 10y ago

Hey programmers:'let us make ugly apps. No idea why we need designers.' Hey designers: 'See, you don't want a programmer touching front end. You have to have creative control. Else they'll make reddit and hacker news UX.' http://image-store.slidesharecdn.com/3f5416bc-c975-4915-a9d1-4d62b1fc0a09-original.jpeg http://image-store.slidesharecdn.com/3f5416bc-c975-4915-a9d1...

jimmaswell 10y ago
The UX on HN and Reddit is basically perfect, though.
- qwertyuiop924 10y ago
  The UX on HN is good. Reddit, not so much nowadays.
  - pjc50 10y ago
    HN is pretty good after the update that introduced tree collapsing, except that the up/down arrows are implemented weirdly. So on my Windows tablet, and occasionally on Android, when clicking on the arrow the browser decides to snap to the nearest clickable link instead, which is the userid. I'm also intending to build a scraper simply so I can determine what my highest voted comments of all time are.
    - bushin 10y ago
      You can use this search API: hn.algolia.com/api/v1/search?tags=comment,author_pjc50
- ArkyBeagle 10y ago
  Usenet is better.
ArkyBeagle 10y ago
This is a specialization of "let's form two tribes so we can argue about stuff." "Argue" is not a perjorative here; productive argument is a good thing. We must generally, though treat the other tribe as a customer to aid in making said discussion productive. Perhaps with Web protocols, things are ... entangled in inconvenient ways ( for, you know, ... reasons ) such that the formation of two tribes is a solution. I don't generally build Web things. When I do build a GUI, I intentionally give it an old style, because I'm really a systems programmer ( eek, a third tribe! ) and this invites someone else to express the resulting inevitable disgust in a replacement. But meanwhile, there's an interface for it.

ahallock 10y ago

While I agree with a lot of the author's points, I've actually grown to like hero images, when they're done tastefully, relate to the product, and are optimized for mobile devices.

munificent 10y ago
> relate to the product Based on my non-comprehensive empirical study, that describes about 3% of hero images in the wild. That is, unless almost all products are deeply related to fashionable twenty-somethings using a laptop in a coffeehouse surrounded by cute stationery with interesting organic textures.
- PeCaN 10y ago
  > laptop Is that what Macbooks are called these days? Dammit munificent, get it right.
  - munificent 10y ago
    Wait, isn't it supposed to be an iWatchlet or something now?

CarpetBench 10y ago

To anyone who's planning to use this or Atwood's article on writing less code as a little red book: For the love of god, please use some common sense when repeating mantras like "write less code." I've seen this used to justify all sorts of ridiculous shit, like dropping basic security measures (write less code! YAGNI! Why would someone try SQL injection/XSS against our site anyway?!?). If I propose something and your thought-terminating cliche response is some form of "YAGNI," I hate you.

jonahx 10y ago
"If I propose something and your thought-terminating cliche response is some form of "YAGNI," I hate you." This has been my experience too. While the concept has value, I find most people that throw the term around do so as a justification for not thinking much. To armchair psychologize a bit, I think that enthusiastically embracing an acronym which, whatever its conceptual merits, is just so lame-sounding correlates negatively with taste, and taste correlates, albeit imperfectly, with programming skill, especially the skill of writing readable code.
- gsmethells 10y ago
  So you're saying the DRY Principle is not worth harping on? https://en.wikipedia.org/wiki/Don%27t_repeat_yourself https://en.wikipedia.org/wiki/Don%27t_repeat_yourself
  - jonahx 10y ago
    Nah, DRY >> YAGNI. It's a short, easily pronounced English word whose meaning is a nice metaphorical fit for the concept expressed by the acronym. You can argue acronyms in general are lame, but I'm not taking that hard line.
- stcredzero 10y ago
  Applying YAGNI to security should be an immediate red flag. As I say in a cousin comment, good taste is just 3rd order laziness. You're doing less by avoiding future trouble. To armchair psychologize a bit, I think that enthusiastically embracing an acronym which, whatever its conceptual merits, is just so lame-sounding correlates negatively with taste Wouldn't you prioritize conceptual taste over aesthetic taste? YAGNI probably sounds goofy because it was created in the late 90's. It was part of the original Extreme Programming formula. The concept is as solid as such concepts get, however.

zeveb 10y ago

> Do you remember ever enjoying using/reading a website with more than two columns? I don’t. Another one of the things I really miss about the pre-JavaScript, pre-CSS, document-oriented (as opposed to the current experience-oriented) web is being able to make my browser window half or a third of my screen, and having documents be eminently readable. That was really, really nice. Try it now, though, and nothing really works correctly. Which is weird, because a third-width window on a laptop or desktop has roughly the same proportions as a phone in vertical layout.

qwertyuiop924 10y ago
Oh, god yes. If you need a special, mobile only site, you're doing it wrong. HN is living proof.
- cocotino 10y ago
  That's correct for many websites, but others such as Facebook have such a complicated but still correct UI on a desktop that it's appropriate to have two different websites.
  - babuskov 10y ago
    > correct UI on a desktop Nope. That was true about a year ago, but not anymore. Facebook UI on a desktop is horrible. Try using it with 1024px wide screen - most apps/games aren't fully visible because they give 760px to the canvas and the rest of their UI is not responsive - so either the ad space on the right or the content (app/game) has to suffer.
    - Bahamut 10y ago
      It certainly needs more love - another problematic part is when you have messages open but you want to see stuff on the column to the right of the newsfeed. Its design leaves some to be desired.
      - 10y ago

qwertyuiop924 10y ago

This is coding 101: Write/include only the code you need. No more, no less. To quote ESR (as much as I hate doing so), "Don't just do something, stand there!" And yes, security and error checking are necessary. Anybody who says otherwise should be drawn, quartered, shot, and fired. As much as I like this post, a framework sometimes has some value. If you're writing a true SPA, it'll only be loaded once, and something like React or Mithril is nice for a bit of structure. Mithril in particular, due to its small size, is handy.

vidarh 10y ago
I don't see the post as arguing against a framework per se, but arguing against pulling in and using code for things you can do as well or better without it, and only pulling out the heavy guns where it's actually necessary.
omni 10y ago
> To quote ESR (as much as I hate doing so), "Don't just do something, stand there!" I tried to figure out what ESR meant here and after a minute of Googling I'm guessing it's Eric S. Raymond[1]. Please consider not using uncommon acronyms on online forums, it obscures your meaning. [1] http://www.catb.org/esr/writings/taoup/html/ch12s01.html http://www.catb.org/esr/writings/taoup/html/ch12s01.html
- riboflava 10y ago
  I hope you're complaining about "ESR" instead of "esr", because his initials, much like "rms" et al. are common acronyms, especially on online forums like Hacker News.
- qwertyuiop924 10y ago
  ESR is a fairly common abreviation. Just like RMS, K&R, SICP, BDFL, BNF, TAOCP (aka Knuth), XHR, AFAIK, and RTFM.
  - AceJohnny2 10y ago
    I'm glad you included RMS, but what about JWZ [1], GKH [2] or JGC [3] ? :] [1] https://www.jwz.org/about.html https://www.jwz.org/about.html [2] https://plus.google.com/+gregkroahhartman https://plus.google.com/+gregkroahhartman [3] http://blog.jgc.org/ http://blog.jgc.org/

deleted 10y ago

[deleted]

deleted 10y ago

[deleted]

BinaryIdiot 10y ago

I love it. Not only were the tricks interesting (I'll have to explore those more to see if they scale in some projects I'm working on) but the advice rings exceptionally true. Well at least in my opinion. I've done web development for a little over 12 years now and the amount of times I've seen someone pull in a huge framework, fonts, tons of libraries just to make a simple page is astounding. I once worked at a job where they abused ASP.Net to such a degree that they were delivering a page to the user of over 70MB (about 60MB of that was only ViewState!!!) and while the application had its complex pieces that was only on a homepage that showed a very, very crude dashboard with only the functionality to re-order boxes. Boxes! Frameworks have their place. Libraries have their place. They're helpful. But you don't need to bring them in every single time you write a web site or application. That code eventually has to be downloaded and viewed by a user and if you can do it with as few dependencies as possible your users will subconsciously thank you.

JustSomeNobody 10y ago
Because developers today grow up in a world of computing abundance. They don't realize what it's like to develop on limited resources. There needs to be a balance between bare bones and throw everything at it that you can find on Github.
lloyd-christmas 10y ago
> I've seen someone pull in a huge framework, fonts, tons of libraries just to make a simple page is astounding... But you don't need to bring them in every single time you write a web site or application. I'm a back end developer. I learned JS in the context of Node. The amount of time it would take me to learn some useful CSS would decimate my ability to get something out the door compared to just pulling in bootstrap. It's often the case that there simply isn't enough to be done to necessitate hiring someone correctly suited for the job. Additionally, whenever I leave my company and they find someone to replace me, there's a strong chance that person knows bootstrap. There is a balance to be had with user joy and developer joy.
- welanes 10y ago

lolive 10y ago

The mantra of "write less" coding : "Never EVER copy/paste code. Refactor!"

chrisan 10y ago
Unless you follow the Rule of 3 https://en.wikipedia.org/wiki/Rule_of_three_(computer_programming) https://en.wikipedia.org/wiki/Rule_of_three_(computer_progra...

K0nserv 10y ago

I agree with the sentiment of this post and the techniques shown are smart(and new to me). I do want to point this out however[0]. 0: http://imgur.com/a/v1rbB http://imgur.com/a/v1rbB

wangchow 10y ago

A lot of it has to do with the sloppy tricks people are trying to implement to get multimedia ads and whatnot on their sites. We are bombarded with ads in our day-to-day life and people's attention is more-and-more difficult to grab. Unfortunately they don't realize form follows function and their function is getting fucked. The internet is more about money and less about spreading ideas nowadays.

new_hackers 10y ago
"their function is getting fucked" It sounds like they are practicing the oldest profession

korethr 10y ago

I appreciate that he practices what he preaches here. Perhaps I've been made cynical by my experience with several other sites, but I was half-expecting to have to enable JS from a bunch of other domains just to get the content to render correctly, if at all, and still be blocking a bunch of ads and social media plugins atop that. There would be a disappointing irony were that the case. But no, the whole site loads quickly and correctly with no intervention on my part. The only thing uMatrix is detecting _to_ block is Google Analytics, and blocking it is having no impact upon the content on the page. I wish this were the rule, not the exception.

em3rgent0rdr 10y ago
Privacy badger noticed 3 trackers for disqus, that when disabled removed the comments section.
- ajosh 10y ago
  Disqus is the comments section for a lot of sites so this one is probably no different.

jessaustin 10y ago

What about changing this from TFA: <input type="checkbox" id="checkbox1" name="checkbox1"> <label for="checkbox1">My checkbox label</label> to this? <label><input type="checkbox" name="checkbox1"> My checkbox label</label> I'm sure there are styling implications, but often one doesn't care about those. "Don't repeat yourself" seems like a rule that goes along with "write less code".

EdSharkey 10y ago
There is goodness to putting your label tag, with the for attribute that points to the input, AFTER the input tag in the DOM that you may not be aware of! Here are some selectors you can use with that setup: input + label { ... } input ~ label { ... } input:checked + label { ... } input:checked ~ label { ... } Those selectors let you style the label based on the STATE of the checkbox, and they work all the way back to IE7. This stateful CSS is very powerful because you can make the input tag visibly hidden and style your label tag to appear as a custom widget or checkbox - and have it look different when toggled. Take a look at html5 boilerplate's visuallyhidden CSS class to see a particularly ninja way of hiding an element. Think of what can you achieve with just CSS and markup that maybe you needed jQuery or JavaScript to achieve in the past! By the way, using the visuallyhidden class is the ideal way of hiding a tabbable element like a checkbox while keeping it adjacent in the flow to its related elements. This method of hiding is especially kind to low vision users of your site who use tab to navigate your forms. From an accessibility standpoint, having label-with-for is helpful to screen readers of varying quality out in the wild. label-with-for ensures the screen readers will never be mistaken about which label goes with which checkbox. .visuallyhidden, input:checked, label-with-for, and the +, ~, and > combinators, plus WAI-ARIA attributes can be used to make visually appealing, yet accessible, widgets without JavaScript.
- nostrademons 10y ago
  tracker1 has a sibling thread with an alternate formulation that achieves this but still has the label as a parent of the checkbox: https://news.ycombinator.com/item?id=12307236 https://news.ycombinator.com/item?id=12307236

dalacv 10y ago

How about writing no code? https://www.udemy.com/bubble-course/ https://www.udemy.com/bubble-course/

stcredzero 10y ago

> Not only is the following checkbox implementation verbose HTML, but it needs a JavaScript dependency to control state changes and to follyfill standard, basic behavior* I like this coder!

230329101 10y ago

So, we are discussing this pablum here, while submissions like https://www.oneeyedman.net/?p=2581 https://www.oneeyedman.net/?p=2581 are censored by the ministry of truth.

230329101 10y ago

So, we are discussing this pablum here, while submissions like https://www.oneeyedman.net/?p=2581 https://www.oneeyedman.net/?p=2581 are censored by the ministry ot truth.

heydenberk 10y ago

This domain is really throwing me for a loop.

joeblau 10y ago

While I'm all for writing less code, it seems like most development teams are optimizing for maximum number of people working on code at the same time over writing less code.

deleted 10y ago

[deleted]

cel1ne 10y ago

Check out http://tachyons.io http://tachyons.io. It has a scale for widths, margins, paddings and fontsizes. Specify pl1 to pl7 and get padding-left from 0.25 to 16rem. w1 to w5 for width of 1,2,4,8,16rem. f1 to f6 and f-headline for a proven typographic scale that makes sense. Everything is relative to the fontsize. No more magic values! Plus the scale are powers of two so integers only and everything always adds up. No more off-by-1-pixel errors! And there's even a port for react-native: http://github.com/fab1an/react-native-style-tachyons http://github.com/fab1an/react-native-style-tachyons.

mark_l_watson 10y ago

I like the sentiment of the article, not just with CSS, but also with imperative code: use really light weight frameworks like Spock or Sinatra and build in just what you need. That said, I have been using Bootstrap, which is heavy weight, but I like how my mobile web sites also look nice on the desktop and on tablets.

ElijahLynn 10y ago

To Heydon: Good article, especially love your simplicity and typography of your own site, very easy to read. You should consider updating your WP Supercache or maybe just WP? to have a max-age longer > 3. Maybe you have a use case I am unaware of that effectively voids browser cache though.

Animats 10y ago

Remember when we had tools like Dreamweaver to do HTML for us? What went wrong?

jtolmar 10y ago
Dreamweaver let you try to do things that wouldn't play nice with HTML and it would use the limited tools available at the time to make bloated sites that still didn't look right in most browsers. Then since Dreamweaver was garbage people decided that any WYSIWYG HTML-editor is guaranteed to be terrible and nobody ever tried again.
- Animats 10y ago
  There's a disruption possibility. CSS is now good enough and browsers are now compliant enough that a WYSIWYG HTML editor is feasible again. The parent article points out that you barely need Javascript any more. Lay off those overpaid "web designers". Someone is trying: "https://www.tinymce.com" https://www.tinymce.com". No idea how good this is.
  - Scea91 10y ago
    Tinymce is not a WYSIWYG editor for creating HTML sites. But a text editor implemented in HTML.
- flukus 10y ago
  > Then since Dreamweaver was garbage people decided that any WYSIWYG HTML-editor is guaranteed to be terrible and nobody ever tried again. Dreamweaver is still the best WYSIWYG HTML editor, and it's still garbage at it.

myst 10y ago

The title mentions code. The article is about HTML. IDGI

fragola 10y ago

I know this article is mostly about web development, but if you're interested in writing less Java code I encourage you to consider Lombok: https://projectlombok.org/ https://projectlombok.org/

djhworld 10y ago
Some things in Lombok seem redundant to me, especially with Java 7 and 8. For example the @Cleanup annotation.

tracker1 10y ago

Regarding checkboxes/radio <label> <input type="checkbox" ... /> <span>Label Text</span> </label> This way the label magically works, similar to H2, also, the nested span is so that you can target `input[type=checkbox]` with `+ span` in order to do custmized glyphs for checkboxes without JS. ... For fonts, have a base size for `html, body` then use `rem` everywhere else.

davidhariri 10y ago

> The less I write, the less there is to break Not when you're writing consumable services IMO. The less you write in building a REST API, for example, the _more_ opportunity there is for someone to break it. It's important to catch exceptions, write detailed models, write tests for fail/success cases etc... It's a good principle (optimizing for less code), but not always.

lucb1e 10y ago

I see no other comments mentioning this. Nobody else thought the font was way too big and when zooming out until about 50% it's finally a nice size to read?

jcoffland 10y ago

There is nothing quite as pleasurable (with reference to technical work) as sending large amounts of obsolete code to the bit bucket. I often judge my refactoring decisions based on how much code gets removed. If a change results in the removal of code at many locations then I take that as confirmation that I made a good decision.

rileymat2 10y ago

One distinction that should be made is when some elements are the same intentionally while others are the same by coincidence. I see no problem with duplicate code in the latter case.

mlvljr 10y ago
Everything is there intentionally, in a sense; but some shapes of codebase adapt to some requirements changes better, and some less -- and thus, this becomes a choice of implementation strategy given current requirements and some sort of probabilistic model for their change (both in theory and practice, where the probabilities have to be assumed creatively, as there is no other way). Basic and worth-thinking-over stuff, yet in no book or blogs (as bloggers seem to like to express themselves on "cohesion" and such, w/o using any metrics, of course, even for simpler examples :)).

cel1ne 10y ago

(Note: There's a duplicate of this comment) Check out http://tachyons.io http://tachyons.io. It has a scale for widths, margins, paddings and fontsizes. Specify pl1 to pl7 and get padding-left from 0.25 to 16rem. w1 to w5 for width of 1,2,4,8,16rem. f1 to f6 and f-headline for a proven typographic scale that makes sense. Everything is relative to the fontsize. No more magic values! Plus the scale are powers of two so integers only and everything always adds up. No more off-by-1-pixel errors! And there's even a port for react-native: http://github.com/fab1an/react-native-style-tachyons http://github.com/fab1an/react-native-style-tachyons.

snambi 10y ago

Make the title "write cleaner HTML Code". Author some point, but the title is totally misleading.

andrepd 10y ago

Let me just say, for an article about writing less, this is sure a roundabout way of saying something that could be said in 1/3rd of the length. No, I don't want to hear you ramble on with the discourse of someone who thinks they are hilarious and likes the sound of their own voice too much. Just get to the point. /rant

partycoder 10y ago

You write less code by: - Removing dead code - Applying a coding standard to emphasize code consistency, so similar problems have similar solutions. - Once you have similar problems, you can generalize code to solve a family of problems instead of a single problem. Otherwise known as code reuse. - Diminish coupling so code can be reused as much as possible.

peterbotond 10y ago

Too many columns and talk about it..... My take: one single column that the rendering visible area can figure out how to render. No hidden agenda. only and just information worth reading: learning, discussing, agreeing ir disagreeing. (my first papers were from a teletext or a stencil or a typewriter they were of the information I wish for to read today at least 3-4 times a week. instead of 3-4 days go by for one.) Bring back the pure unadulterated brain output.

frostymarvelous 10y ago

I facilitated a class yesterday and I hammered on proper semantic html and only using WAI-ARIA where totally necessary like in tabs. Glad to see its more or less a consensus.

rachkovsky 10y ago

This is the only web site I had to make font size smaller to read it comfortably.

ackalker 10y ago

TL;DR: KISS+YAGNI :-)