This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Sudhir Nain
Posted Mar 23 - Read on Facebook

My first prototype, I must say the code is extremely dirty. Would love to learn the tricks so that this same prototype can be done in half as many lines of code. Any resources for becoming better at this?

http://share.framerjs.com/w68080gjckn0/

2 Comments

Benjamin Den Boer

Hey Sudhir Nain, this looks really nice! Let's see - there's not a lot of redundancy here actually. Here are a few tips/tricks you may find useful:

- You're looping over the same array twice (bankWatchLayers) - while you can simply add the second line within the first loop. Additionally, explicitly changing all layer-frames isn't really nessecary. (You can do without that last line entirely)

- You're defining both opacity + visibility for almost all of your layers to hide/show them, while using opacity (set to 0) is enough. This can save you a lot of lines.

- If you do need to assign the same property (like you're using visibility here) to a lot of layers, you can: 1. Hide them in Sketch by default. 2. Store them in an array and loop over them all, like this:

hiddenLayers = [glanceBank, watchHome, longLook, shortLook]
for layer in hiddenLayers
____layer.visible = false

- Another nifty little CoffeeScript trick you may like is using if/else statements on a single line by including "then", like this:

if snapTo > 0 then snapTo=0
else if @maxX < imageSize.width then ...

- Finally, if you're *really* looking to use as little lines as possible, you can also create one-line for loops, although they may decrease the legibility of your code, hehe. Like this:

layer.visible = false for layer in hiddenLayers

Hope these help a bit! Again, great work. :)

Sudhir Nain

Wow these are amazing tricks and exactly what I was looking for. Thanks a ton!

Read the entire post on Facebook