5
points
xem
Joined 421 karma
js code golfer
- xem parentthanks bro :3
- I'm just going through it.
I'm 35, Web Dev since 2009, work from home (2 hours away from work) since 2020, and my company just decided that they want everyone back at the office immediately, or quit.
So I quat. And I decided I'll never be an employee ever again. I'm gonna make a living out of my passions: write a book, create video games, adopt pets, photo, video, and if I run out of money I can still do Web Dev as freelance.
Frightening but also exciting!
- Here's my implementation, also inspired by these videos
It was made in 1kb for the JS1K demo competition: https://js1k.com/2018-coins/demo/3124
Detailed source code: https://github.com/xem/epicycles/blob/gh-pages/index.html
Controls:
- Arrow keys: up / down to change the number of gears, left to toggle intermediate paths, right to clear the scene.
- Mouse: click to add points to the path
- The "ungolfed" code looks like this:
<input id=i> <a onclick='u.innerHTML+="<li onclick=innerHTML=innerHTML.strike()>"+i.value'>+ <a onclick=u.innerHTML="">X</a> <ol id=u>
There are 4 occurrences of "innerHTML" and 3 occurrences of " onclick='" so I replaced those two substrings with H and o.
The whole HTML is rendered using an ES6 template literal (document.write(` ... `))
Everytime a ${H} or a ${o} is present in the template, the value of H or o is copied here.
It's a native feature of JS since ES6.
Besides that, the second <a> implicitly closes the first <a>, so no need to use </a>. The id's are global, that's why we can access i.value or u.innerHTML directly. In onclick, "this" (the current element) is implicit. Finally, the strikethrough is done using the (deprecated but still working) .strike() String method.
- My solution in 155 chars, vanilla JS
<script>document.write(`<input id=i><a${o=" onclick="}'u.${H="innerHTML"}+="<li${o}${H}=${H}.strike()>"+i.value'>+<a${o}u.${H}="">x</a><ol id=u>`)</script>
Demo: https://codepen.io/xem/pen/dypVzaw?editors=1100
Cheers :)
- Hi, Here's my tutorial for going much further than a colored triangle, with very few code too: https://xem.github.io/articles/webgl-guide.html
- - CSS3D, a fun and easy way to make 3D scenes / games in the browser without WebGL. To my knowledge, we are about 5 people to use it (https://xem.github.io/articles/css3dgames.html)
- JS code-golfing... I'm not alone but we're a small community, who enjoy making JS programs / art / games with the smallest possible amount of code (js1k.com, js13kgames.com, dwitter.net, ...)
- Unicode, its quirks, its updates (not only emoji), its encodings and its predecessors charsets
- Regexes (everyone hates them but I enjoy using them)
- Browsers hacks and polyfills (remember IE6? Firefox 3? Chrome 1? With enough effort, you could make them do almost everything that modern browsers can do today. My job has been to do exactly that for many years, and it was actually pretty fun)
- 1 point
- http://xem.github.io
I'm Maxime, front-end developer and passionate of JavaScript code-golfing.
I make tiny JS demos & games for fun or for contests like JS1K.com and JS13Kgames.com, and write about them (among other front-end experiments) here.
There's also a lot of tech watch and projects involving other topics like retro consoles emulation, Unicode, WebGL, and even a collection of memes and jokes.
Feel free to send feedback, even negative.
(I know the site's style is a bit old now, but I'm updating it!)
Cheers :)
- Real estate
Bought 3 student apartments in 2012 (when I was 24) and finished paying them at the beginning of 2018.
The apartments are entirely managed by an agency that finds the student, collects the money, does all the maintainance, and give me a fixed, guaranteed income.
This income is about 50% of what the students pay (about 330€ for me when the student pays 600).
So now I have 1000€ of passive income per month and only need to do my accounts once a year.
(In France, you can use a company to rent your apartments and avoid paying taxes, so I do that)
I'll probably buy 2 or 3 more in the future to be able to "retire early" and become an indie game dev full time.
- 3 points
- For the record, here's the smallest notepad with local persistence we've golfed in JS: http://xem.github.io/postit/ (github: https://github.com/xem/postit/)
- If you're interested in demoscene, this explains how to make x86 programs in 256b or less: http://sizecoding.org/
...
and yes, I consider it beautiful x86 code :)
- Here's a similar app but golfed in 280b: https://twitter.com/MaximeEuziere/status/987222337081704448
- Hey, the new version and its updated code are live! http://xem.github.io/sheet/
- Hi! yup, only CSS and emoji. :) if you want to know a bit more, here's a making-of: http://xem.github.io/articles#js13k17
- Thanks man! I made this game by (ab)using the power of CSS and CSS3D, and really focused on the player experience, so I'm glad you enjoyed it! If you continue playing, you'll see even more surprises :) Also, here's a making-of: http://xem.github.io/articles#js13k17