Framer-CoffeeScript-Javascript-FlashCards

Question 1

Which character do we use for decimal numbers?

Answer 1

The point (not the comma)

Question 2

How to insert a string

Answer 2

Strings come in quotation marks.
“This is a string”
‘This is also a string’

Question 3

How to concatenate strings?

Answer 3

Using a + sign:

"My name is " + "Tessa"
# => "My name is Tessa

Question 4

Which type of data is this:

“40”

Answer 4

This is a string (because inside quotation marks)

Question 5

“50” + “50”

Answer 5

=> “5050”

Question 6

How to assign a variable?

Answer 6

Variables are assigned using the = operator.

Question 7

What is a variable?

Answer 7

Variables let you assign a value to an arbitrary symbol for later reference. A variable is a box you can put values into. Any kind of value, like a string or a number.

Question 8

Variables can’t…

Answer 8

Variables
• can’t contain spaces
• can’t start with numbers
• can’t contain punctuation or symbols other than _

Question 9

What is the common naming convention for variable names?

Answer 9

CamelCase

Question 10

How do we make a string interpolation?

a variable inside a string

Answer 10

We can embed the variable right in the string if we surround it with #{}

print “my favorite color is #{color}, what’s yours?”

Question 11

What are boolean values?

Answer 11

Booleans are values that are either true or false. They’re indicated with just the words true or false without quotation marks.

myBoolean = true

Question 12

Which operator do we use to indicate that two values are the same?

Answer 12

is or ==

Question 13

What do we use to negate a condition?

Answer 13

To negate a condition you use the keyword “is not”. In place of “is not” you can use the shortform “isnt”.

num = 5
num isnt 10
# => true

Question 14

Which syntax for conditional statements?

Answer 14

if/else

Question 15

CoffeeScript avoids using symbols like semi-colons and parentheses. But in return, we need to follow certains rules about…

Answer 15

… indentation

Question 16

How do we insert comments in Coffee Script?

Answer 16

Using #

Question 17

myObjectA =

name: “Framer”
age: 12

How to target the name property here?

Answer 17

2 options:

myObjectA.name
myObjectA[“name”]

Question 18

How do we indicate that we’re putting a function in CoffeeScript?

Answer 18

Using the -> arrow

Question 19

checkAge()

What do the brackets mean?

Answer 19

The () part basically means “go”. It tells the computer “run the function in the checkAge variable”

Question 20

Functions can be even more useful if we can give them values to work with. These values are called…

Answer 20

Parameters when creating the function.

Arguments when calling the function and assigning values to those parameters.

Question 21

In CoffeeScript, we can give a function the ability to accept arguments. How do we do that?

Answer 21

By adding parenthesis containing the argument name before the -> sign

Question 22

What are arrays?

Answer 22

Arrays are lists or collections of multiple items

Question 23

Arrays have some built in methods (functions that they can use) for finding out information about them, like length.
fruits = [“apples”, “oranges”, “bananas”]
How to get the length of this array?

Answer 23

fruits.length

Question 24

You can access elements in an array by their index. The index is the element’s position within the array.
But there’s a warning! Which one?

Answer 24

Arrays are zero-indexed.

Question 25

How do we access an element in an array?

Answer 25

We use square brackets containing the index of the element we’re looking for.
Ex: fruits [1]

Question 26

How do we add to arrays?

Answer 26

You can add new items to an array with the method push. push adds the item you specify to the end of the array.
Ex: fruits.push(“kiwis”)

Question 27

Why arrays can be very powerful in CoffeeScript?

Answer 27

Because they let you repeat certain functionality over and over with different items by using loops. Loops let you do something for every item in an array.

Question 28

Which method would we use to uppercase the first string elements of our fruits array?

Answer 28

fruits [0]. toUpperCase ()

Question 29

How would we uppercase all our string elements inside our fruits array?

Answer 29

for fruit in fruits

fruit.toUpperCase()

Question 30

What is an object?

Answer 30

An object is a collection of properties. In programming, a property is an association between a name and a value.
If something has properties, you can store them in an object.

Question 31

Can we store arrays and booleans in objects?

Answer 31

Yes

Question 32

Can we store objects inside objects?

Answer 32

Yes

Question 33

book =
Author:
name: "Kurt Vonnegut"
born: 1922
died: 2007

What is this?
And what is the difference between = and :

Answer 33

This is an object inside another object.

Note that we use = and : in the above example. Note the difference:
“=” assigns a variable name (book) to an object, and “:” matches up names and values.
“author” is the name, and the object containing name, born, and died is the value.

Question 34

What punctuation sign do we use to access properties in an object?

Answer 34

We use dots.

Ex: book.title

Question 35

book =
author:
name: "Kurt Vonnegut"
born: 1922
died: 2007

How to print the date of birth?

Answer 35

print book.author.born

=> 1922

Question 36

book =

pages: 256
genres: [“Science Fiction”, “Satire”]
fiction: true

How to print “Satire” ?

Answer 36

print book.genres[1]

=> “Satire”

Question 37

What is a method?

Answer 37

Since we can store any kind of data in an object’s properties, we can also store functions as properties. When a function is the property of an object, it is called a method.

Question 38

book =

title: “Slaugherhouse Five”
read: -> print “All this happened, more or less.”

What is the read property and how to call it?

Answer 38

The read property is a method (a function that is the property of an object) that belongs to our book object. We can call itlike we would any function:
book.read()

# => "All this happened, more or less."
This is how the toUpperCase method works. It’s a method that belongs to allstring objects.

Question 39

What is new Layer() ?

Answer 39

This is a special kind of function that creates an object.

square = new Layer ()

By default, in Framer it will create a 100*100 square with semi transparent blue color: rgba(0, 124, 255, .5)

Question 40

square = new Layer(
width: 200
height: 200
x: 100
y: 100
)
What's inside the brackets?

Answer 40

An argument (of the new Layer function). And this argument is a configuration object. And the properties inside this configuration object are the attributes like width, height, x, y, etc.).

To make that code a bit easier to read, we can get rid of the parentheses

Question 41

How can we modify a layer’s appearance using CSS propertiesin Framer? (simple way)

Answer 41

You can modify a layer’s coordinates (x, y), as well as appearance by using camel-cased (camelCased) versions of most CSS properties, as well as some built-in framer properties. For example, color is just color but border-radius becomes borderRadius. If you want to rotate an element, you can modify the rotation property framer provides.

Question 42

Which method do we use to animate a layer?

Answer 42

layer.animate()

Question 43

What do we need to specify so that the animate method will do something?

Answer 43

By itself, .animate() isn’t goint to do anything. We need to pass it a configuration object to tell it what to animate, and how to animate it. A configuration object will follow this format:

configObject =
	properties:
		property: value
		property: value time: 1
	curve: "ease"
	delay: 2

Question 44

Time-related properties (delay and time), are specified in seconds. By default, animations in Framer take…

Answer 44

1 second

Question 45

layer.animate
	properties:
		opacity: 0
	Time: .2
What do you see here?

Answer 45

Whitespace is significant here.
“properties” is an object (it’s an object nested inside an object).
opacity is a property, so it’s indented one level further than “properties” to indicate the relationship.
Time is a property of the animation, not a property of the object animating. Hence the outdent

Question 46

How do we add repeat and delay properties to our layer animation?

Answer 46

layer.animate
	properties:
		opacity: 0
	repeat: 4
	Delay: 2

Question 47

Which method do we use to “listen” for events triggered by the user?

Answer 47

We use the «on» method

Question 48

Does the «on method» takes arguments? If yes, which ones?

Answer 48

This is actually a method being called with two arguments, though it may not look like it. The format for the on method is on(eventName, function), where the function is the code that gets run when the event is triggered. It might make more sense if we leave on the parentheses:
button.on(Events.Click , →)

Question 49

When you use a function as an argument (like in the «on method»), it’s called a…

Answer 49

…callback

Question 50

In plain english, calling the on method with a callback is like saying…

Answer 50

…“listen for and do”, and the two arguments are the thing that you’re listening for, and the thing that you should then do.

Question 51

What is the syntax in CoffeeScript to indicate a function? Let’s say we want to declare functioName as a function

Answer 51

FunctionName = →

Question 52

When we give the «on method» a function as an argument, it doesn’t need…

Answer 52

…a name or an equals sign. We just need the -> part

Question 53

button.on(Events.Click , →)

Why the comma?

Answer 53

The comma is the separation between the first argument (the name of the event), and the second (the function).

Question 54

How do we access the properties of the screen we’re working with in Framer?

Answer 54

Framer.Device.screen

Ex:
Framer.Device.screen.width
Framer.Device.screen.height

Question 55

When we specify the value of curve property, what is the data type expected in Framer?

Answer 55

A string. Therefore it is specified in quotation marks.

Ex: “ease-in”

Question 56

How to trigger something after one animation is finished?

Answer 56

Layer.on Events.AnimationEnd, →

Question 57

As for Animation Curves, Spring is an alias for…

Answer 57

spring-rk4

Question 58

How many arguments does the spring function take?

Answer 58

The spring function takes 4 arguments (the last one is optional):
	1	tension (Strength of the spring)
	2	friction (Weight of the spring)
	3	velocity (Velocity at the start)
	4	tolerance (Minimal threshold before the animation ends. (Optional))

Question 59

Which symbol means not in CoffeeScript?

Answer 59

!

Question 60

How do we set a value to its opposite?

Answer 60

We do =!

Ex: is_open = ! is_open

Question 61

Which method do we use to add states to a layer?

Answer 61

layer.states.add()

Question 62

Each state consists of…

Answer 62

…a name (string) and property pair(s). States are configuration objects.

Question 63

Which method enables to switch to the next state(s)?

Answer 63

layer.states.next()

Question 64

Which shortcut to quickly display documentation in Framer?

Answer 64

cmd + d

Question 65

How to deactivate click when scrolling on elements that are clickable otherwise?
(because we touch elements when scrolling)

Answer 65

if not scroll.isMoving

Question 66

How to prevent a draggable element which also contains a scroll from doing both interaction at the same time?
Usually, we don’t scroll while dragging

Answer 66

layer.draggable.directionLock = true

Question 67

Are invisible/hidden Sketch layers imported into Framer?

Answer 67

Yes, as long as they’re inside a group. Their visibility is set to false inside Framer

Question 68

How does Framer handle Sketch’s artboards?

Answer 68

Only the first Artboard will be visible by default. All other Artboards are hidden, and positioned on top of each other. The x and y properties of imported Artboards are always set to 0.

Question 69

There is a set of 3 keys for editing colors. Which are they?

Answer 69

layer. hueRotate (number btw 0 and 360)
layer. saturate (number btw 0 and 100)
layer. brightness ( number btw 0 and -> it depends on initial color or image)

Question 70

How to simulate a @2x rendering from a @1x Sketch import?

Can cause a slight blur rendering

Answer 70

Framer.Device.contentScale = 2

Question 71

Inside a loop, each time an element is created, can we store it inside an array?

Answer 71

Yes. We can add these lines:
myArray = [ ]
myArray.push(nameOfInstance)

Question 72

What is the other way to get/edit CSS properties of layers?

Answer 72

layer.style
Next to the standard CSS property names you can also camelCase naming. For example, layer.style[“border-color”] is the same as layer.style.borderColor

Question 73

How to edit the border of layerA? (2 ways)

Answer 73

layerA.style["border"] = "1px solid red"
layerA.style.border  = "1px solid red"

Question 74

How to edit several style propertiesof layerA?

Answer 74

layerA.style =
“outline”: “1px solid red”,
“padding”: “10px”

Question 75

How to print a specific style property? (like layerA’s outline)

Answer 75

print layerA.style[“outline”]

Question 76

When crafting animations, why is it often better to base a function on a layer property (ex: layer.height) instead of on the actual value of this property?

Answer 76

Because if we update the layer (in Sketch or by overwriting later in the code), the actual value will be outdated. Relative values are often better.