menu
Channels
Team

Tips n' tricks

April 6, 2019 at 9:36am (Edited 8 months ago)
I think it'd be nice to share some specific tricks we've stumbled into while grinding through these, here are some I found helpful:
  • position:fixed almost always beats position:absolute;
  • never use rotate(180deg) in transforms, use scaleY(-1)
  • don't quote attributes, just use + instead of a space, eg:<img style=box-shadow:0+0+0+2px#FFF> vs <img style="box-shadow:0 0 0 2px#FFF">
  • if you use a border-radius of over 99% consider in as a unit instead (eg, 9in)
  • in a pinch, you can add made-up attributes and select them. <p i> is selectable via [i]: {}
Show previous messages

April 6, 2019 at 8:30pm
like-fill
2
  • reply
  • like
2 shapes formed once you play with border, margin and border-radius. 1 for the html and 1 for the body. Using the box-shadow trick, the outer one can be hidden.
  • reply
  • like
Wow! How did you arrive at 123 chars? SVG?
  • reply
  • like
Hmm interesting, gonna see if I can recreate that. I actually did something similar to Alex, but with some more optimization I just got it to 123 characters 🤐
like-fill
1
  • reply
  • like
Just managed to recreate your method , now I'm at 122 🤯
like-fill
1
  • reply
  • like
Touchè
  • reply
  • like
I think I'm gonna waste my sleep today figuring out this optimization
  • reply
  • like
pretty sure there's some svg stuff happening
Sure thing! I guess, creators underestimate the power of SVG! Had to do some pixel-hunting before 99.9% issue were fixed. Still, some levels solutions are mistery for me like 4 chars saved in #8, or high scores in #2 and #3 or #9.
Edited
  • reply
  • like
Getting third place on #9 was not easy, but I'm perplexed at the two scores above me that are 20 chars less.
  • reply
  • like
hi ! If you have any general high-level tips for svg golfing I'd be interested in hearing them, you're consistently like 50+ bytes ahead of me, feels like I'm missing some basic tricks
  • reply
  • like
#2 is probably the one I'm furthest from understanding, I've just been ignoring it :D
like-fill
1
  • reply
  • like
Hmm interesting, gonna see if I can recreate that. I actually did something similar to Alex, but with some more optimization I just got it to 123 characters 🤐
Can you point me in the right direction without giving it away?
  • reply
  • like
Well, there are many tricks. First of all, SVG has default size for replaced element 150×150. However, you can set size via width and height attributes, or set an aspect-ratio with viewBox, then it will have 100% width and corresponding height. viewBox can be also used for scaling SVG units (by default they equal to pixels)–it can cut a number of bytes. One fine usage of it is to normalize scale in such a manner, that stroke-width you want to use had size equal to one, so it can omitted as a default value.
like-fill
3
  • reply
  • like
Wow that makes so much sense
  • reply
  • like
welp there goes my whole day
  • reply
  • like
Btw, SVGO is handy for scaling images, e.g. one can add transform and ran it in a manner
$ svgo -s '<path d="M50,50h50v50h-50" transform="scale(.02)">`
and you get values like d=M1,1h1v1H1.
Some minor tricks: paths are get closed automatically, so you can omit the last segment or z, if you don't need them (can have use for strokes). There is arcto command in <path/>, that helps building circular segments. One trick, that I learnt recently myself is that space after flags can be omitted. E.g. a50,50,0,0110,0.
Edited
  • reply
  • like
2 shapes formed once you play with border, margin and border-radius. 1 for the html and 1 for the body. Using the box-shadow trick, the outer one can be hidden.
Just tied you for 124 chars on Target 7 but I'm not using border: 🤔
  • reply
  • like
Can you point me in the right direction without giving it away?
I even managed to get to 121 using your method! 🎉 So there are still 3 small optimizations you're missing. Small hint: I've only used the character x twice in my solution.
  • reply
  • like
I totally respect the SVG magic going on - really impressive – but that's a whole other thing as far as I'm concerned. I can't possibly get close. I thought it was supposed to be a CSS thing? Is there any way to have a mode of play where SVG is not allowed? I'm a lot more interested in that.
like-fill
1
  • reply
  • like
Well, they are closely related. Also, personally I think that drawing with CSS generally is not that good idea for most not-trivial cases. SVG fits better, and results proof it.
  • reply
  • like
🎉120!
Edited
like-fill
1
  • reply
  • like
Well, they are closely related. Also, personally I think that drawing with CSS generally is not that good idea for most not-trivial cases. SVG fits better, and results proof it.
I agree with you completely of course – SVG is perfect for drawing shapes. But that's my whole point. It's hard to do these levels with just CSS which is what made it fun. My understanding is that this is what the game was about, so I was surprised when I saw that SVG solutions were allowed. Still - major respect for your skills :)
  • reply
  • like
Also rather stumped at Target 7. Can't get it below 131 chars using only <style>*{}body{}...
What's really bugging me though is Target 2. Can't figure out how to get past 108 chars, let alone the board at 100.
If only there was some way to color the corners of border...(hope that gets you started)
like-fill
1
  • reply
  • like
One more tip about SVG. Browsers recently allowed using href attrubute without xlink: prefix and—more importantly—corresponding namespace. It's handy for referencing elements with <use/> tag. E.g.:
<rect width="100" height="50" id="r" /><use href="#r" x="50" y="100" fill="green" />
(just remember that attributes within refererenced elements cannot be overwritten. It's kinda like predecessor of shadow DOM.)
Edited
like-fill
2
  • reply
  • like
🎉120!
Still without using border:? 🤔
  • reply
  • like
Show more messages