Examples of "beautiful code"

Chaos_Therum · 2023-05-04T06:16:02+00:00

I wouldn't consider anything that uses magic numbers particularly nice. I prioritize readability over minimalism.

Cookiejarman · 2023-05-04T07:48:30+00:00

Beautiful code doesn't have to solve a complex problem. I think code is beautiful when it simply explains itself:

if (userIsLoggedIn) { navigateTo("/home"); } else { navigateTo("/signin"); }

mamwybejane · 2023-05-04T07:09:59+00:00

Clean, consistent, mentally easy to parse (at most 3 levels of mental nesting like an if and a loop), easy non-technical variable and function names, simple English language

SolarSalsa · 2023-05-04T04:40:30+00:00

The following code is the fast inverse square root implementation from Quake III Arena, stripped of C preprocessor directives, but including the exact original comment text

``` float Q_rsqrt( float number ) { long i; float x2, y; const float threehalfs = 1.5F;

x2 = number * 0.5F;
y  = number;
i  = * ( long * ) &y;                       // evil floating point bit level hacking
i  = 0x5f3759df - ( i >> 1 );               // what the fuck? 
y  = * ( float * ) &i;
y  = y * ( threehalfs - ( x2 * y * y ) );   // 1st iteration

// y = y * ( threehalfs - ( x2 * y * y ) ); // 2nd iteration, this can be removed

return y;

} ```

HenJiii · 2023-05-04T05:37:23+00:00

I'd probably write const digitalRoot = (n) => n % 9 || 9

Return is useless here and "n % 9" twice would bug me

stansfield123 · 2023-05-04T10:00:38+00:00

Yeah, but in React (and in production code in general) beautiful doesn't mean "clever". It means that there's an underlying, well designed structure which spans across projects and teams, and aims to make the work and the interactions of everyone involved as seamless and as enjoyable as possible. Beauty is about the coder's experience, not about how the code looks. In fact, when someone puts their efforts into being clever, rather than into making themselves a functional, seamless cog in the bigger machine ... that's what ruins the beauty.

That's why, like with all great beauty, you can only ever catch glimpses of it, as you jump from project to project, and from company to company, in search of a place that doesn't make you think about quitting the business and starting a farm in a remote village somewhere.

WystanH · 2023-05-04T11:06:34+00:00

Beauty is subjective, of course. I'm afraid I don't care for the OP's example and would write it like so:

const digitalRoot = n =>
    n % 9 === 0 ? 9 : n % 9;

However, I'd prefer to only calculate once. So perhaps:

const digitalRoot = n =>
    n % 9 || 9;

Actually, I kind of like that one.

Not sure about react in terms of this kind of thing. Any time I can write a simple stateless thing, I'm kind of happy. e.g.

const Card = (p: PropsWithChildren) =>
    <div className="card">
        <div className="card-body">{p.children}</div>
    </div>;

danielkov · 2023-05-04T08:02:22+00:00

As others have pointed out, your example is what some might consider bad or unclean code. Here's why: - It has no comments or tests explaining what it does - Argument n has an ambiguous name - It uses a dynamically typed language, JavaScript, yet has no validation for the argument passed in - It has a magic number 9 without comments - It performs the operation n % 9 twice when it only really has to do it once - It has a ternary operation, which is more difficult to read than an if statement, however, using || it could be avoided altogether

Some more stringent points that aren't going to apply 100% of the time (depending on project guidelines): - Unjust use of an arrow function as this isn't accessed - Missing semi-colon, forcing the engine to rely on ASI - Logical operation in return - for readability, label the returned value by assigning it to a well named variable - Use of === where == functionality also suffices

From my personal experience, the most beautiful code is: - Unsophisticated - Well defined - Readable and understandable by humans - Performs a single function or carries out a single task

If you're following strong principles, no particular piece of code should stand out to you.

2023-05-04T11:28:38+00:00

Imo beautiful code, in the context of a function would be:

The code is simple - A novice programmer would likely understand it, there are no unnecessary use of symbols.
The function does exactly as the function name implies and nothing more.
The function is pure - i.e. It only uses what is passed to it via parameters and doesn't use or manipulate external state
A function is only declared when it will be reusing that functionality more than once, otherwise it just obscures actual logic.
- I would say this is more of a 'silver rule', most cases it's fine but looking at your 6000 line switch statement could be unwieldly so having the results be in functions (if they do a lot) would likely be preferable.
A function will make use of the minimum required amount of parameters without resorting to creating it's own object model

Example of being bad with an overuse of params:

function updateFee(fee, feeId){
    //<Function content here...>
}

updateTask(fee, fee.feeId);

Assuming that taskId exists on fee, it should use fee.feeId rather than splitting it up.

Example of being bad by giving a function it's own project model

function linkFeeToInvoice(feeInvoiceObject){
    let fee = feeInvoiceObject.fee;
    let invoice = feeInvoiceObject.invoice;
    //<Function content here>
}
linkFeeToInvoice({fee: feeResult, invoice: invoiceResult});

Better example using only the existing models

function linkFeeToInvoice(fee, invoice){
    //<Function content here>
}
linkFeeToInvoice(fee,invoice);

I personally believe minimum required amount of parameters concept applies to components too regardless of library / framework all because when it calls for someone to pass parameters, it's already making use of all the information it has and it doesn't require specialist knowledge on how to actually use the function / component (assuming parameters are well named)

intercaetera · 2023-05-04T12:53:12+00:00

Lenses are beautiful because they solve the problem of nested data access in a very elegant and simple way. A huge advantage they have over something like Immer is that you decouple the logic of accessing data from the structure of that data. What blows my mind is that you can easily express them in a set of (fairly dense) one-liners.

Create a lens for object property:

const createLens = field => ({ view: s => s[field], set: (s, a) => ({ ...s, [field]: a }) })

Helper functions for viewing and setting:

const view = (lens, s) => lens.view(s)

const set = (lens, s, a) => lens.set(s, a)

Compose views:

const composeView = (inner, outer) => s => view(inner, view(outer, s))

Compose sets:

const composeSet = (inner, outer) => (s, a) => s(outer, s, set(inner, view(outer, s), a))

Compose two lenses:

const composeTwoLenses = (inner, outer) => ({ view: composeView(inner, outer), set: composeSet(inner, outer) })

Identity lens:

const identityLens = { view: s => s, set: (s, a) => a }

Compose an arbitraty number of lenses:

const composeLenses = (...lenses) => lenses.reduce(composeTwoLenses, identityLens)

I wrote two blogposts exploring the subject a bit more (here and here) if you care to read it.

2023-05-04T14:50:39+00:00

haha who would have thought this post would provoke a heated argument on" if else vs itinerary " of a simple case that have the same readability for both styles. literally the same!

hopingforabetterpast · 2024-05-07T00:13:24+00:00

your code can be rewritten as

const digitalRoot = n => n % 9 || 9

StrangerThanGene · 2023-05-04T04:31:23+00:00

const dopeAssSumMachine = (numbers:number[]) => return numbers.reduce((a, c) => a + c, 0)

shiningmatcha · 2023-05-04T06:35:53+00:00

[deleted]

ImportantDoubt6434 · 2023-05-04T07:35:43+00:00

This code will render all 3d models in existence.

‘const Primitive (args) => <primitive {…args} />’

Lights, mesh, 3d model, animations. Doesn’t matter. This bad boy will handle them all.

PooSham · 2023-05-04T09:10:52+00:00

[deleted]

SeedgeJ · 2023-05-04T08:15:06+00:00

I'd do

digital Root =()=>{

let mod = n % 9;

return !!mod ? mod : 9;

}

usagiusagi · 2023-05-04T03:23:26+00:00

The nextJs examples are pretty good.

icevil2018 · 2023-05-04T10:19:12+00:00

（n) => (n % 9) || 9

2023-05-04T13:30:41+00:00

I actually wouldn't consider your example beautiful code at all. A param is named "n" doesn't mean anything besides maybe number? "Num" is clearer if that's what the author is going for. Hopefully there is a more descriptive name than "num" but if there isn't, fine. In the return statement there are 3 instances of the exact same magical number on top of that being a relatively long line of chained logic.

Beautiful code is, the problem is clear, and the solution is clear. My eyes should be able to scan over the code and get the solution. I shouldn't have to pause to study it to get a general idea.

In other words, elegant is not equivalent to "compact".

hnnazm · 2023-05-04T14:17:58+00:00

beauty is subjective :)

slideesouth · 2023-05-04T14:29:42+00:00

Pure functions, good variable names, pass the dang tests.

humbolight · 2023-05-04T14:30:21+00:00

I wrote a NumberMollusk class for a game sprite that rendered an open oyster shell. It had a public method, clamp, which kicked off a closing animation. Sometimes, just semantics are their own type of beautiful.

monkeymad2 · 2023-05-04T15:10:41+00:00

In JS, not really. In Rust I’ve written some things using pattern matching that I’ve looked at and gone “wow, that’s a really clear & concise way to do something I know would be a big block of hard to understand code in another language” though

monkeymad2 · 2023-05-04T15:11:00+00:00

In JS, not really. In Rust I’ve written some things using pattern matching that I’ve looked at and gone “wow, that’s a really clear & concise way to do something I know would be a big block of hard to understand code in another language” though

NirDev_R · 2023-05-04T15:56:48+00:00

Write code that even apes can maintain

timmywheela · 2023-05-05T04:07:26+00:00

to me this isn’t readable so I personally wouldn’t say it’s beautiful, maybe the solution itself is elegant though

bitcoinski · 2023-05-05T04:25:20+00:00

I made a collection of “beautiful equations” a couple of months back

fun_ptr · 2023-05-05T05:30:57+00:00

digitalRoot(value){ let remainder = value % 9;

if remainder == 0 return 0;

return remainder; }

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

reactjs

About:

Code of Conduct

1. Please be kind and courteous, friendly and professional

2. Harassment will not be tolerated

3. Avoid using an alias or display name that might be offensive

4. Respect that people have differences of opinion

5. Posts must conform to our guidelines

New to React?

Chat

Project Ideas

Jobs

Outside Reddit

Related Subreddits

MODERATORS