Commits: 7
Correct the format of the code sample with pink background
index 9f2145e..b3585cc 100644
--- a/content/day-1.txt
+++ b/content/day-1.txt
@@ -171,10 +171,12 @@ Second, it's because the SVG space doesn't fill the browser window. Don't believ
= import Svg
= import Svg.Attributes
=
+
= main =
= Svg.svg [ Svg.Attributes.style "background: pink" ]
= [ Svg.circle
- [ Svg.Attributes.r "10" ] []
+ [ Svg.Attributes.r "10" ]
+ []
= ]
=
=When you reload the browser, you'll see this:Fix the line numbers in Code block to count from 1 instead of 0
index 193f700..bf2f03e 100644
--- a/src/Mark/Custom.elm
+++ b/src/Mark/Custom.elm
@@ -97,7 +97,7 @@ code =
= , css "-o-user-select" "none"
= , css "-moz-user-select" "none"
= ]
- (Element.text (String.fromInt n))
+ (Element.text (String.fromInt (n + 1)))
= , Element.el
= [ Element.width Element.fill
= ]Make the build script copy .well-known/ directory to public/
So we can pass the ECMA challenge.
index d9def3c..1330ef5 100755
--- a/scripts/build
+++ b/scripts/build
@@ -15,6 +15,7 @@ npx elm make src/Main.elm --output built/index.js
=cp -r content/ public/content/
=cp -r assets/ public/assets/
=cp -r built/* public/assets/
+cp -r .well-known/ public/.well-known/
=
=
=mkdir -p built/captured/Disable the pages CI task for custom-domain branch
It works, so we are going to merge it to master soon. No need for this entry anymore.
index 28e2f71..4472935 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -15,4 +15,3 @@ pages:
=
= only:
= - master
- - custom-domainMerge branch 'custom-domain' into 'master'
Setup software.garden domain
See merge request software-garden/software-garden.gitlab.io!5
Edit day-2
index edb1bc0..5cd1456 100644
--- a/content/day-2.txt
+++ b/content/day-2.txt
@@ -15,7 +15,7 @@
=| Header
= The Problem
=
-We want to place the dots in a circle, like this:
+Previously we have created a program that displays five colorful dots. Today we want to place our five dots in a circle, like this:
=
=| Window
= | Circle
@@ -26,12 +26,10 @@ We want to place the dots in a circle, like this:
= radius = 0 1
= scatter = False
=
-We will also make the dots have different colors... so it's more fun!
-
=| Header
= What does it mean to be placed on a circle?
=
-We all have some intuition about a circle. You can tell if you see one and if you have a steady hand, you can probably draw one with a pencil. It's a thing that looks like this:
+We all have some intuition about a circle. You can tell if you see one and if you have a steady hand, you can probably draw one with a pencil. It's a shape that looks like this:
=
=| Circle
= dots = 0
@@ -42,7 +40,7 @@ We all have some intuition about a circle. You can tell if you see one and if yo
= scatter = False
=
=
-But what is it that makes a circle what it is? First of all we have to realize that a circle has a center. It's a point that lays exactly in the middle:
+But what is it that makes a circle what it is? First of all we have to realize that every circle has a center. It's a point that lays exactly in the middle:
=
=| Circle
= dots = 0
@@ -52,8 +50,7 @@ But what is it that makes a circle what it is? First of all we have to realize t
= radius = 0 1
= scatter = False
=
-
-We can say that four or more things lay on a circle, if the distance to the center is the same for each of them, like this:
+We can say that four or more dots lay on a circle, if the distance to the center is the same for each of them, like this:
=
=| Circle
= dots = 5
@@ -64,9 +61,9 @@ We can say that four or more things lay on a circle, if the distance to the cent
= scatter = False
=
=| Note
- Why more than three? One, two or three things always lay on at least one circle, so it's not much of a challenge that way.
+ Why more than three? One, two or three dots always lay on at least one circle, so it's not much of a challenge that way.
=
- One thing lay on any circle that crosses the place. You could draw very many circles like that (in fact as many as you want).
+ One dot lay on any circle that crosses the place. You could draw very many circles like that (in fact as many as you want).
=
= Similar for two things. Not every circle will do, but still you could draw many different circles that they will lay on.
=
@@ -81,17 +78,28 @@ We can say that four or more things lay on a circle, if the distance to the cent
= TODO: An example showing that for three different points there will always be a circle that crosses them, see {Link|circumcircle|url=https://package.elm-lang.org/packages/ianmackenzie/elm-geometry/latest/Triangle2d#circumcircle}
=
=
-Because we are all about challenges, let's make five dots.
+Because we are all about challenges, let's make five dots. Also, we already have five dot's we created on {Link|Day 1|url=/day-1.html}, so why not reuse them?
=
-So, once again - we can say that several things (in our case dots) lay on a circle if the distance between each of them and the center of the circle is the same. We call this distance /a *radius* of a circle/.
+So, once again - we can say that several things (in our case dots) lay on a circle if the distance between each of them and the center of the circle is the same.
=
=| Note
- Matematician would say:
+ A matematician would say:
=
= /Four or more points belong to a circle when there is a point (called center) that is equally distant from each of the points./
=
= That is more precise, but perhaps a little more difficult to visualize.
=
+We call this distance /a *radius* of a circle/. We already saw radius used as an attribute of a circle when we were making our first dot. Remember:
+
+| Code
+ Svg.circle
+ [ Svg.Attributes.r "10"]
+ []
+
+The {Code|r} attribute stands for radius. Then it was basically dictating the size of the dot. The larger the radius the bigger the circle, and a dot is just a filled circle!
+
+This time the radius will affect the size of an imaginary circle on which the dots are laying.
+
=Ok, so this describes what it means to lay on a circle. But what are some efficient methods of putting things there? How about the following.
=
=You choose a center (anywhere, say {Code|(0, 0)}) and radius (any length you like, say 80).
@@ -105,7 +113,7 @@ Next slightly rotate the ruler around the center (keep point {Code|0} of the rul
=
=In other words, you can put a thing in the center and then move it in any direction, let's say 1 meter. If you do the same to several things in several directions (but same length), you will make them lay on a circle. The direction must be different each time. Otherwise the things would just stack one on top of another! We wouldn't call it a circle, right?
=
-Now, notice that the dots displayed by the program we are creating are not laying just anywhere on the circle. They are evenly distributed. It means that not only the distance between each dot and the center is the same. Also each dots lay the same distance away from it's two nearest neighbors. Just compare the following two pictures:
+Now, notice that the dots displayed by the program we are creating are not laying just anywhere on the circle. They are evenly distributed. It means that not only the distance between each dot and the center is the same. Also each dot lay the same distance away from it's two nearest neighbors. Just compare the following two pictures:
=
=| Row
= | Circle
@@ -124,7 +132,7 @@ Now, notice that the dots displayed by the program we are creating are not layin
= radius = 0 1
= scatter = False
=
-Both are showing 5 dots laying on a circle. Look:
+On the right, you immediately see a patern. They form a circle. But in fact both pictures are showing 5 dots laying on a circle. Look:
=
=| Row
= | Circle
@@ -156,7 +164,7 @@ So the dots on the left lay on a circle, but there is a striking difference. The
=
=Since the center and radius is the same for each dot, the only thing we can play with is the angle that we rotate the ruler each time.
=
-A common way of representing rotation is in degrees. It works like that: imagine a circle around you. You are in the center. Now imagine that the circle is divided in 360 equal segments. If you turn from the segment you face to the next one on the right (a very small turn) then you have turned one degree. If you turn around to face the opposite direction, that's a turn of 180 degrees. Do it again and you are facing the same direction as before (a 360 degree turn). If you turn to the right (as on a corner of a street), then you have turned 90 degrees (half of 180, quarter of 360).
+A common way of representing rotation is in degrees. It works like this: imagine a circle around you. You are in the center. Now imagine that the circle is divided in 360 equal segments. If you turn from one segment to the next one on the right (a very small turn) then you have turned one degree. If you turn around to face the opposite direction, that's a turn of 180 degrees. Do it again and you are facing the same direction as before (a 360 degree turn). If you turn to the right (as on a corner of a street), then you have turned 90 degrees (half of 180, quarter of 360).
=
=In physical world we often use a tool called protractor to measure angles. It typically has one degree segments already marked for you. It looks like this:
=
@@ -326,7 +334,7 @@ For that we need to add another transformation before the move. First we will ro
=
=This will rotate the element by 72 degrees. On it's own it wouldn't make any difference, because the dot is round - it doesn't matter how you rotate it, it always looks the same. But It also rotates it's internal coordinates system. So the translation will move it in a different direction then the first dot.
=
-Now it's time to add the fird, red dot. Duplicate the second one, change fill to `"red"` and put `144` for rotate function, like this:
+Now it's time to add the third, red dot. Duplicate the second one, change fill to `"red"` and put `144` for rotate function, like this:
=
=| Code
= [ Svg.circle