diff --git a/chinese-version/images/frontend.png b/chinese-version/images/frontend.png
new file mode 100644
index 000000000..85f0c4045
Binary files /dev/null and b/chinese-version/images/frontend.png differ
diff --git a/chinese-version/project/frontend-map.json b/chinese-version/project/frontend-map.json
new file mode 100644
index 000000000..5cf33e561
--- /dev/null
+++ b/chinese-version/project/frontend-map.json
@@ -0,0 +1,5594 @@
+{
+ "mockup": {
+ "controls": {
+ "control": [
+ {
+ "ID": "0",
+ "typeID": "Arrow",
+ "zOrder": "2",
+ "w": "15",
+ "h": "147",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "871",
+ "y": "3443",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 14,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.5864611260053622,
+ "y": 0.008042895442359291
+ },
+ "p2": {
+ "x": 0,
+ "y": 146
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "1",
+ "typeID": "Arrow",
+ "zOrder": "3",
+ "w": "34",
+ "h": "105",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "783",
+ "y": "1949",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 2,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.6327349725048985,
+ "y": 0.3148663169205486
+ },
+ "p2": {
+ "x": 0,
+ "y": 104
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "2",
+ "typeID": "Arrow",
+ "zOrder": "4",
+ "w": "15",
+ "h": "147",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "865",
+ "y": "3635",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 14,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.5864611260053622,
+ "y": 0.008042895442359291
+ },
+ "p2": {
+ "x": 0,
+ "y": 146
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "3",
+ "typeID": "Arrow",
+ "zOrder": "5",
+ "w": "76",
+ "h": "4",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "210",
+ "y": "3624",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 75,
+ "y": 3
+ },
+ "p1": {
+ "x": 0.36110618684630386,
+ "y": -0.02074100336819713
+ },
+ "p2": {
+ "x": 0,
+ "y": 1
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "4",
+ "typeID": "Arrow",
+ "zOrder": "6",
+ "w": "205",
+ "h": "29",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "375",
+ "y": "3596",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 204,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.539516737981374,
+ "y": 0.0033979360684621034
+ },
+ "p2": {
+ "x": 0,
+ "y": 28
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "5",
+ "typeID": "Arrow",
+ "zOrder": "7",
+ "w": "76",
+ "h": "5",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "199",
+ "y": "3585",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 75,
+ "y": 4
+ },
+ "p1": {
+ "x": 0.36110618684630386,
+ "y": -0.020741003368197126
+ },
+ "p2": {
+ "x": 0,
+ "y": 0
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "6",
+ "typeID": "Arrow",
+ "zOrder": "8",
+ "w": "82",
+ "h": "7",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "193",
+ "y": "3544",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 81,
+ "y": 6
+ },
+ "p1": {
+ "x": 0.3956343792633015,
+ "y": -0.007730786721236948
+ },
+ "p2": {
+ "x": 0,
+ "y": 0
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "7",
+ "typeID": "Arrow",
+ "zOrder": "9",
+ "w": "90",
+ "h": "36",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "182",
+ "y": "3502",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 89,
+ "y": 35
+ },
+ "p1": {
+ "x": 0.3787677176742842,
+ "y": -0.1675441133931154
+ },
+ "p2": {
+ "x": 0,
+ "y": 1
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "8",
+ "typeID": "Arrow",
+ "zOrder": "10",
+ "w": "191",
+ "h": "2",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "379",
+ "y": "3586",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 190,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.5395167379813743,
+ "y": 0.003397936068462092
+ },
+ "p2": {
+ "x": 0,
+ "y": 1
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "9",
+ "typeID": "Arrow",
+ "zOrder": "11",
+ "w": "177",
+ "h": "30",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "383",
+ "y": "3547",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 176,
+ "y": 29
+ },
+ "p1": {
+ "x": 0.5395167379813742,
+ "y": 0.0033979360684620896
+ },
+ "p2": {
+ "x": 0,
+ "y": 0
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "10",
+ "typeID": "Arrow",
+ "zOrder": "12",
+ "w": "208",
+ "h": "15",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "370",
+ "y": "3421",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 207,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.5395167379813742,
+ "y": 0.0033979360684621147
+ },
+ "p2": {
+ "x": 0,
+ "y": 14
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "11",
+ "typeID": "Arrow",
+ "zOrder": "13",
+ "w": "192",
+ "h": "15",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "376",
+ "y": "3397",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 191,
+ "y": 14
+ },
+ "p1": {
+ "x": 0.5395167379813742,
+ "y": 0.0033979360684618654
+ },
+ "p2": {
+ "x": 0,
+ "y": 0
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "12",
+ "typeID": "Arrow",
+ "zOrder": "14",
+ "w": "176",
+ "h": "1",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "384",
+ "y": "3101",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 175,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.5395167379813742,
+ "y": 0.0033979360684621178
+ },
+ "p2": {
+ "x": 0,
+ "y": 0
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "13",
+ "typeID": "Arrow",
+ "zOrder": "15",
+ "w": "132",
+ "h": "3",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "374",
+ "y": "2763",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 131,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.46052631578947356,
+ "y": -1.821373747360583e-17
+ },
+ "p2": {
+ "x": 0,
+ "y": 2
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "14",
+ "typeID": "Arrow",
+ "zOrder": "16",
+ "w": "94",
+ "h": "11",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "235",
+ "y": "2617",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 93,
+ "y": 2
+ },
+ "p1": {
+ "x": 0.40573434757167937,
+ "y": -0.03639555295494441
+ },
+ "p2": {
+ "x": 0,
+ "y": 10
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "15",
+ "typeID": "Arrow",
+ "zOrder": "17",
+ "w": "77",
+ "h": "315",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "750",
+ "y": "2613",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 7,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.5032750563580599,
+ "y": -0.10103814932708959
+ },
+ "p2": {
+ "x": 76,
+ "y": 314
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "16",
+ "typeID": "Arrow",
+ "zOrder": "18",
+ "w": "217",
+ "h": "3",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "846",
+ "y": "2591",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 0,
+ "y": 2
+ },
+ "p1": {
+ "x": 0.47388515577275514,
+ "y": 0.00229077580940742
+ },
+ "p2": {
+ "x": 216,
+ "y": 1
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "17",
+ "typeID": "Arrow",
+ "zOrder": "19",
+ "w": "2",
+ "h": "158",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "166",
+ "y": "2703",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 0,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.46125955702687793,
+ "y": 0.009064396626468038
+ },
+ "p2": {
+ "x": 0,
+ "y": 157
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "18",
+ "typeID": "Arrow",
+ "zOrder": "20",
+ "w": "9",
+ "h": "92",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "377",
+ "y": "2679",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 8,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.4461538461538461,
+ "y": -0.03076923076923077
+ },
+ "p2": {
+ "x": 1,
+ "y": 91
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "19",
+ "typeID": "Arrow",
+ "zOrder": "21",
+ "w": "111",
+ "h": "50",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "466",
+ "y": "2607",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 110,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.4738851557727549,
+ "y": 0.002290775809407395
+ },
+ "p2": {
+ "x": 0,
+ "y": 49
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "20",
+ "typeID": "Arrow",
+ "zOrder": "22",
+ "w": "126",
+ "h": "41",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "459",
+ "y": "2578",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 125,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.4738851557727551,
+ "y": 0.0022907758094072093
+ },
+ "p2": {
+ "x": 0,
+ "y": 40
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "21",
+ "typeID": "Arrow",
+ "zOrder": "23",
+ "w": "89",
+ "h": "96",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "238",
+ "y": "2482",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 88,
+ "y": 95
+ },
+ "p1": {
+ "x": 0.45524634313777257,
+ "y": 0.2454982309763954
+ },
+ "p2": {
+ "x": 0,
+ "y": 0
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "22",
+ "typeID": "TextArea",
+ "zOrder": "24",
+ "w": "205",
+ "h": "208",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "153",
+ "y": "2287",
+ "properties": {
+ "color": "16777215"
+ }
+ },
+ {
+ "ID": "23",
+ "typeID": "Arrow",
+ "zOrder": "25",
+ "w": "115",
+ "h": "11",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "460",
+ "y": "2568",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 114,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.47388515577275503,
+ "y": 0.002290775809407418
+ },
+ "p2": {
+ "x": 0,
+ "y": 10
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "24",
+ "typeID": "Arrow",
+ "zOrder": "26",
+ "w": "16",
+ "h": "116",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "763",
+ "y": "2448",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 1,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.5380311507636474,
+ "y": 0.12641766218055345
+ },
+ "p2": {
+ "x": 0,
+ "y": 115
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "25",
+ "typeID": "Arrow",
+ "zOrder": "27",
+ "w": "53",
+ "h": "244",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "657",
+ "y": "2103",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 52,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.471276613180796,
+ "y": -0.2026617278284945
+ },
+ "p2": {
+ "x": 47,
+ "y": 243
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "26",
+ "typeID": "Arrow",
+ "zOrder": "28",
+ "w": "147",
+ "h": "23",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "800",
+ "y": "2172",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 146,
+ "y": 22
+ },
+ "p1": {
+ "x": 0.4467326732673264,
+ "y": -0.07267326732673271
+ },
+ "p2": {
+ "x": 0,
+ "y": 3
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "27",
+ "typeID": "Arrow",
+ "zOrder": "29",
+ "w": "3",
+ "h": "68",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "781",
+ "y": "2095",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 1,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.517950123321458,
+ "y": 0.023842148533844896
+ },
+ "p2": {
+ "x": 0,
+ "y": 67
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "28",
+ "typeID": "Arrow",
+ "zOrder": "30",
+ "w": "143",
+ "h": "12",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "340",
+ "y": "2051",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 142,
+ "y": 10
+ },
+ "p1": {
+ "x": 0.5196039603960396,
+ "y": 0.03603960396039605
+ },
+ "p2": {
+ "x": 0,
+ "y": 0
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "29",
+ "typeID": "Arrow",
+ "zOrder": "31",
+ "w": "113",
+ "h": "12",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "603",
+ "y": "2058",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 112,
+ "y": 11
+ },
+ "p1": {
+ "x": 0.6096633663366336,
+ "y": -0.031366336633663366
+ },
+ "p2": {
+ "x": 0,
+ "y": 2
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "30",
+ "typeID": "Arrow",
+ "zOrder": "32",
+ "w": "112",
+ "h": "140",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "607",
+ "y": "1670",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 0,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.5380822956829531,
+ "y": 0.12426521711649068
+ },
+ "p2": {
+ "x": 111,
+ "y": 139
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "31",
+ "typeID": "Arrow",
+ "zOrder": "33",
+ "w": "23",
+ "h": "116",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "332",
+ "y": "1499",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 22,
+ "y": 115
+ },
+ "p1": {
+ "x": 0.5263097382439734,
+ "y": 0.09554286590273256
+ },
+ "p2": {
+ "x": 5,
+ "y": 0
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "32",
+ "typeID": "Arrow",
+ "zOrder": "34",
+ "w": "68",
+ "h": "80",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "805",
+ "y": "1202",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 67,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.5075471698113209,
+ "y": -0.1264150943396224
+ },
+ "p2": {
+ "x": 0,
+ "y": 79
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "33",
+ "typeID": "Arrow",
+ "zOrder": "35",
+ "w": "22",
+ "h": "97",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "559",
+ "y": "1515",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 11,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.5354229282954058,
+ "y": -0.15993988836410478
+ },
+ "p2": {
+ "x": 21,
+ "y": 96
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "34",
+ "typeID": "Arrow",
+ "zOrder": "36",
+ "w": "205",
+ "h": "8",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "815",
+ "y": "1655",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 204,
+ "y": 2
+ },
+ "p1": {
+ "x": 0.4186861064441723,
+ "y": -0.01606059743144346
+ },
+ "p2": {
+ "x": 0,
+ "y": 7
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "35",
+ "typeID": "Arrow",
+ "zOrder": "37",
+ "w": "69",
+ "h": "381",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "727",
+ "y": "917",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 5,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.51012414933679,
+ "y": 0.17392640436254733
+ },
+ "p2": {
+ "x": 0,
+ "y": 380
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "36",
+ "typeID": "Arrow",
+ "zOrder": "38",
+ "w": "77",
+ "h": "265",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "237",
+ "y": "743",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 76,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.4565573307740078,
+ "y": -0.2215039801275899
+ },
+ "p2": {
+ "x": 42,
+ "y": 264
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "37",
+ "typeID": "TextArea",
+ "zOrder": "39",
+ "w": "427",
+ "h": "245",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "278",
+ "y": "1001",
+ "properties": {
+ "color": "16770457"
+ }
+ },
+ {
+ "ID": "38",
+ "typeID": "Arrow",
+ "zOrder": "40",
+ "w": "10",
+ "h": "55",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "655",
+ "y": "277",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 3,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.510715363718684,
+ "y": 0.13884696649562314
+ },
+ "p2": {
+ "x": 0,
+ "y": 54
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "39",
+ "typeID": "Arrow",
+ "zOrder": "41",
+ "w": "50",
+ "h": "202",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "622",
+ "y": "454",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 15,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.452773248314634,
+ "y": -0.13470758597191462
+ },
+ "p2": {
+ "x": 48,
+ "y": 200
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "40",
+ "typeID": "Arrow",
+ "zOrder": "42",
+ "w": "75",
+ "h": "94",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "778",
+ "y": "448",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 0,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.5330996249796185,
+ "y": -0.13117560736996578
+ },
+ "p2": {
+ "x": 74,
+ "y": 93
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "41",
+ "typeID": "Arrow",
+ "zOrder": "43",
+ "w": "68",
+ "h": "62",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "786",
+ "y": "449",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 0,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.5199305086381621,
+ "y": -0.09275166489721068
+ },
+ "p2": {
+ "x": 67,
+ "y": 61
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "42",
+ "typeID": "Arrow",
+ "zOrder": "44",
+ "w": "57",
+ "h": "38",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "789",
+ "y": "441",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 0,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.5300904977375566,
+ "y": -0.03190045248868781
+ },
+ "p2": {
+ "x": 56,
+ "y": 37
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "43",
+ "typeID": "Arrow",
+ "zOrder": "45",
+ "w": "54",
+ "h": "4",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "797",
+ "y": "422",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 0,
+ "y": 3
+ },
+ "p1": {
+ "x": 0.4583941605839416,
+ "y": 0.03941605839416058
+ },
+ "p2": {
+ "x": 53,
+ "y": 3
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "44",
+ "typeID": "Arrow",
+ "zOrder": "46",
+ "w": "56",
+ "h": "16",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "794",
+ "y": "437",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 0,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.45488081725312146,
+ "y": 0.03887627695800227
+ },
+ "p2": {
+ "x": 55,
+ "y": 15
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "45",
+ "typeID": "Arrow",
+ "zOrder": "47",
+ "w": "72",
+ "h": "20",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "478",
+ "y": "397",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 0,
+ "y": 19
+ },
+ "p1": {
+ "x": 0.43817104776008886,
+ "y": -0.04683450573861533
+ },
+ "p2": {
+ "x": 71,
+ "y": 0
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "46",
+ "typeID": "Arrow",
+ "zOrder": "48",
+ "w": "120",
+ "h": "13",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "440",
+ "y": "385",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 0,
+ "y": 1
+ },
+ "p1": {
+ "x": 0.42861896838602337,
+ "y": 0.022628951747088195
+ },
+ "p2": {
+ "x": 119,
+ "y": 12
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "47",
+ "typeID": "Arrow",
+ "zOrder": "49",
+ "w": "125",
+ "h": "43",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "436",
+ "y": "352",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 0,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.4346557759626609,
+ "y": 0.026254375729288137
+ },
+ "p2": {
+ "x": 124,
+ "y": 42
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "48",
+ "typeID": "Arrow",
+ "zOrder": "50",
+ "w": "113",
+ "h": "66",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "438",
+ "y": "320",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 0,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.47200190828314154,
+ "y": 0.03285825034289463
+ },
+ "p2": {
+ "x": 112,
+ "y": 65
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "49",
+ "typeID": "Arrow",
+ "zOrder": "51",
+ "w": "62",
+ "h": "49",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "787",
+ "y": "285",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 61,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.45522128005575574,
+ "y": -0.054942502032756454
+ },
+ "p2": {
+ "x": 0,
+ "y": 48
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "50",
+ "typeID": "Arrow",
+ "zOrder": "52",
+ "w": "69",
+ "h": "19",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "787",
+ "y": "356",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 68,
+ "y": 18
+ },
+ "p1": {
+ "x": 0.45747670462949247,
+ "y": 0.021150717349504505
+ },
+ "p2": {
+ "x": 0,
+ "y": 0
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "51",
+ "typeID": "Arrow",
+ "zOrder": "53",
+ "w": "60",
+ "h": "4",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "794",
+ "y": "347",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 59,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.4929203539823009,
+ "y": -0.006194690265486749
+ },
+ "p2": {
+ "x": 0,
+ "y": 3
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "52",
+ "typeID": "Arrow",
+ "zOrder": "54",
+ "w": "49",
+ "h": "23",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "792",
+ "y": "320",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 48,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.4652789342214823,
+ "y": -0.001332223147377283
+ },
+ "p2": {
+ "x": 0,
+ "y": 22
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "53",
+ "typeID": "TextArea",
+ "zOrder": "55",
+ "w": "250",
+ "h": "41",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "543",
+ "y": "322",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "54",
+ "typeID": "Label",
+ "zOrder": "56",
+ "measuredW": "222",
+ "measuredH": "40",
+ "x": "513",
+ "y": "121",
+ "properties": {
+ "bold": "true",
+ "size": "32",
+ "text": "前端 Front-end"
+ }
+ },
+ {
+ "ID": "55",
+ "typeID": "Arrow",
+ "zOrder": "57",
+ "w": "19",
+ "h": "74",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "637",
+ "y": "47",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 8,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.45894941634241254,
+ "y": 0.19319066147859923
+ },
+ "p2": {
+ "x": 0,
+ "y": 73
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "56",
+ "typeID": "Arrow",
+ "zOrder": "58",
+ "w": "16",
+ "h": "61",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "626",
+ "y": "177",
+ "properties": {
+ "color": "2848996",
+ "curvature": "-1",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 2,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.46391752577319545,
+ "y": -0.1030927835051546
+ },
+ "p2": {
+ "x": 15,
+ "y": 60
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "57",
+ "typeID": "Label",
+ "zOrder": "59",
+ "measuredW": "108",
+ "measuredH": "26",
+ "x": "595",
+ "y": "244",
+ "properties": {
+ "bold": "true",
+ "size": "18",
+ "text": "學習基礎知識"
+ }
+ },
+ {
+ "ID": "58",
+ "typeID": "Label",
+ "zOrder": "60",
+ "measuredW": "86",
+ "measuredH": "25",
+ "x": "589",
+ "y": "330",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "學習 HTML"
+ }
+ },
+ {
+ "ID": "59",
+ "typeID": "Icon",
+ "zOrder": "61",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "555",
+ "y": "330",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "60",
+ "typeID": "Label",
+ "zOrder": "62",
+ "measuredW": "5",
+ "measuredH": "21",
+ "x": "563",
+ "y": "332",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "text": "1"
+ }
+ },
+ {
+ "ID": "61",
+ "typeID": "TextArea",
+ "zOrder": "63",
+ "w": "250",
+ "h": "41",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "543",
+ "y": "370",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "62",
+ "typeID": "Label",
+ "zOrder": "64",
+ "measuredW": "125",
+ "measuredH": "25",
+ "x": "589",
+ "y": "378",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "CSS 的基礎知識"
+ }
+ },
+ {
+ "ID": "63",
+ "typeID": "Icon",
+ "zOrder": "65",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "555",
+ "y": "378",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "64",
+ "typeID": "Label",
+ "zOrder": "66",
+ "w": "10",
+ "measuredW": "8",
+ "measuredH": "21",
+ "x": "563",
+ "y": "380",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "text": "2"
+ }
+ },
+ {
+ "ID": "65",
+ "typeID": "TextArea",
+ "zOrder": "67",
+ "w": "250",
+ "h": "41",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "544",
+ "y": "417",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "66",
+ "typeID": "Label",
+ "zOrder": "68",
+ "measuredW": "176",
+ "measuredH": "25",
+ "x": "589",
+ "y": "424",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "JavaScript 的基礎知識"
+ }
+ },
+ {
+ "ID": "67",
+ "typeID": "Icon",
+ "zOrder": "69",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "556",
+ "y": "424",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "68",
+ "typeID": "Label",
+ "zOrder": "70",
+ "w": "10",
+ "measuredW": "8",
+ "measuredH": "21",
+ "x": "564",
+ "y": "426",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "text": "3"
+ }
+ },
+ {
+ "ID": "69",
+ "typeID": "Label",
+ "zOrder": "71",
+ "measuredW": "164",
+ "measuredH": "25",
+ "x": "262",
+ "y": "303",
+ "properties": {
+ "size": "17",
+ "text": "瞭解 CSS 的基本知識"
+ }
+ },
+ {
+ "ID": "70",
+ "typeID": "Label",
+ "zOrder": "72",
+ "measuredW": "379",
+ "measuredH": "25",
+ "x": "56",
+ "y": "338",
+ "properties": {
+ "size": "17",
+ "text": "瞭解如何使用網格（Grid）和彈性盒子（Flexbox）"
+ }
+ },
+ {
+ "ID": "71",
+ "typeID": "Label",
+ "zOrder": "73",
+ "measuredW": "435",
+ "measuredH": "25",
+ "x": "0",
+ "y": "371",
+ "properties": {
+ "size": "17",
+ "text": "媒體查詢（Media Query）和響應式*（Responsive）網站"
+ }
+ },
+ {
+ "ID": "72",
+ "typeID": "Label",
+ "zOrder": "74",
+ "measuredW": "368",
+ "measuredH": "25",
+ "x": "111",
+ "y": "404",
+ "properties": {
+ "size": "17",
+ "text": "在上一步你做的 HTML 網頁中套上樣式（Style）"
+ }
+ },
+ {
+ "ID": "73",
+ "typeID": "TextArea",
+ "zOrder": "75",
+ "w": "325",
+ "h": "41",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "153",
+ "y": "512",
+ "properties": {
+ "borderColor": "13576743",
+ "color": "16777215"
+ }
+ },
+ {
+ "ID": "74",
+ "typeID": "Label",
+ "zOrder": "76",
+ "measuredW": "112",
+ "measuredH": "25",
+ "x": "167",
+ "y": "520",
+ "properties": {
+ "bold": "true",
+ "color": "0",
+ "size": "17",
+ "text": "jQuery – 可選"
+ }
+ },
+ {
+ "ID": "75",
+ "typeID": "Arrow",
+ "zOrder": "77",
+ "w": "137",
+ "h": "2",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "489",
+ "y": "531",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 0,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.5073529411764706,
+ "y": -0.007352941176470588
+ },
+ "p2": {
+ "x": 136,
+ "y": 0
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "76",
+ "typeID": "Icon",
+ "zOrder": "78",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "613",
+ "y": "519",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "77",
+ "typeID": "TextArea",
+ "zOrder": "79",
+ "w": "767",
+ "h": "41",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "314",
+ "y": "593",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "78",
+ "typeID": "Label",
+ "zOrder": "80",
+ "measuredW": "432",
+ "measuredH": "25",
+ "x": "356",
+ "y": "601",
+ "properties": {
+ "size": "17",
+ "text": "做一些響應式網站，並使用 JavaScript 新增一些互動功能"
+ }
+ },
+ {
+ "ID": "79",
+ "typeID": "Icon",
+ "zOrder": "81",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "324",
+ "y": "601",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "80",
+ "typeID": "Label",
+ "zOrder": "82",
+ "w": "10",
+ "measuredW": "9",
+ "measuredH": "21",
+ "x": "332",
+ "y": "603",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "text": "4"
+ }
+ },
+ {
+ "ID": "81",
+ "typeID": "ScratchOut",
+ "zOrder": "83",
+ "w": "66",
+ "h": "36",
+ "measuredW": "205",
+ "measuredH": "107",
+ "x": "409",
+ "y": "514",
+ "properties": {
+ "color": "13576743"
+ }
+ },
+ {
+ "ID": "82",
+ "typeID": "TextArea",
+ "zOrder": "84",
+ "w": "767",
+ "h": "178",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "314",
+ "y": "641",
+ "properties": {
+ "color": "16777215",
+ "text": ""
+ }
+ },
+ {
+ "ID": "83",
+ "typeID": "Label",
+ "zOrder": "85",
+ "measuredW": "485",
+ "measuredH": "25",
+ "x": "356",
+ "y": "655",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "在 GitHub 上搜尋一些專案，並開一些 PR。下面列了一些想法："
+ }
+ },
+ {
+ "ID": "84",
+ "typeID": "Icon",
+ "zOrder": "86",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "325",
+ "y": "656",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "85",
+ "typeID": "Label",
+ "zOrder": "87",
+ "w": "10",
+ "measuredW": "8",
+ "measuredH": "21",
+ "x": "333",
+ "y": "658",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "text": "5"
+ }
+ },
+ {
+ "ID": "86",
+ "typeID": "Label",
+ "zOrder": "88",
+ "measuredW": "483",
+ "measuredH": "25",
+ "x": "356",
+ "y": "684",
+ "properties": {
+ "size": "17",
+ "text": "增進 UI，讓他們的 demo 頁具有響應式功能或改進他們的設計。"
+ }
+ },
+ {
+ "ID": "87",
+ "typeID": "Label",
+ "zOrder": "89",
+ "measuredW": "276",
+ "measuredH": "25",
+ "x": "356",
+ "y": "711",
+ "properties": {
+ "size": "17",
+ "text": "尋找你可以解決的任何 open issue。"
+ }
+ },
+ {
+ "ID": "88",
+ "typeID": "Label",
+ "zOrder": "90",
+ "measuredW": "561",
+ "measuredH": "25",
+ "x": "356",
+ "y": "738",
+ "properties": {
+ "size": "17",
+ "text": "重構任何程式碼，或實作你在此過程中學到的最佳實踐（best practice）。"
+ }
+ },
+ {
+ "ID": "89",
+ "typeID": "Label",
+ "zOrder": "91",
+ "measuredW": "635",
+ "measuredH": "23",
+ "x": "356",
+ "y": "777",
+ "properties": {
+ "bold": "true",
+ "color": "10027263",
+ "size": "15",
+ "text": "連結這個 repo，告訴他們你正在學習，並請他們針對你的 PR 提供意見回饋、告訴你如何改進。"
+ }
+ },
+ {
+ "ID": "90",
+ "typeID": "Icon",
+ "zOrder": "92",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "325",
+ "y": "776",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "lightbulb-o",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "91",
+ "typeID": "Icon",
+ "zOrder": "93",
+ "measuredW": "32",
+ "measuredH": "32",
+ "x": "920",
+ "y": "81",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "github",
+ "size": "medium"
+ }
+ }
+ },
+ {
+ "ID": "93",
+ "typeID": "TextArea",
+ "zOrder": "94",
+ "w": "767",
+ "h": "135",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "314",
+ "y": "827",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "94",
+ "typeID": "Label",
+ "zOrder": "95",
+ "measuredW": "255",
+ "measuredH": "25",
+ "x": "355",
+ "y": "842",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "給自己一個讚。你現在到這裡了："
+ }
+ },
+ {
+ "ID": "95",
+ "typeID": "Icon",
+ "zOrder": "96",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "325",
+ "y": "842",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "96",
+ "typeID": "Label",
+ "zOrder": "97",
+ "w": "10",
+ "measuredW": "8",
+ "measuredH": "21",
+ "x": "333",
+ "y": "844",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "text": "6"
+ }
+ },
+ {
+ "ID": "97",
+ "typeID": "Label",
+ "zOrder": "98",
+ "measuredW": "442",
+ "measuredH": "25",
+ "x": "356",
+ "y": "868",
+ "properties": {
+ "size": "17",
+ "text": "你到目前為止掌握到的技能，已經符合很多職缺的需求了。"
+ }
+ },
+ {
+ "ID": "98",
+ "typeID": "Label",
+ "zOrder": "99",
+ "measuredW": "510",
+ "measuredH": "25",
+ "x": "356",
+ "y": "893",
+ "properties": {
+ "size": "17",
+ "text": "如果你想的話，你可以輕鬆地開始接案，或是找一個自己的工作了。"
+ }
+ },
+ {
+ "ID": "99",
+ "typeID": "Label",
+ "zOrder": "100",
+ "measuredW": "544",
+ "measuredH": "25",
+ "x": "357",
+ "y": "919",
+ "properties": {
+ "size": "17",
+ "text": "但是，不要就此打住，如果你想要有個更好的職涯，還有很長的路要走。"
+ }
+ },
+ {
+ "ID": "100",
+ "typeID": "Label",
+ "zOrder": "101",
+ "measuredW": "215",
+ "measuredH": "25",
+ "x": "294",
+ "y": "1015",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "可選 – 需要一些 `git` 的知識"
+ }
+ },
+ {
+ "ID": "101",
+ "typeID": "Label",
+ "zOrder": "102",
+ "measuredW": "391",
+ "measuredH": "25",
+ "x": "295",
+ "y": "1043",
+ "properties": {
+ "size": "17",
+ "text": "這部分是可選的，我加在這裡是因為這是一個很好的"
+ }
+ },
+ {
+ "ID": "102",
+ "typeID": "Label",
+ "zOrder": "103",
+ "measuredW": "340",
+ "measuredH": "25",
+ "x": "295",
+ "y": "1067",
+ "properties": {
+ "size": "17",
+ "text": "學習方式，並瞭解你是否踏上了正確的軌道。"
+ }
+ },
+ {
+ "ID": "103",
+ "typeID": "Label",
+ "zOrder": "104",
+ "measuredW": "323",
+ "measuredH": "25",
+ "x": "294",
+ "y": "1092",
+ "properties": {
+ "size": "17",
+ "text": "你會驚訝地發現有很多人都很樂意幫助你。"
+ }
+ },
+ {
+ "ID": "105",
+ "typeID": "Icon",
+ "zOrder": "105",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "290",
+ "y": "1156",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "lightbulb-o",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "106",
+ "typeID": "Label",
+ "zOrder": "106",
+ "measuredW": "368",
+ "measuredH": "23",
+ "x": "322",
+ "y": "1153",
+ "properties": {
+ "bold": "true",
+ "color": "10027263",
+ "size": "15",
+ "text": "不要害怕 git，這是在目前所學的所有東西中最簡單的。"
+ }
+ },
+ {
+ "ID": "107",
+ "typeID": "Label",
+ "zOrder": "107",
+ "measuredW": "255",
+ "measuredH": "23",
+ "x": "322",
+ "y": "1174",
+ "properties": {
+ "bold": "true",
+ "color": "10027263",
+ "size": "15",
+ "text": "你可以在幾個小時內就瞭解基本知識，"
+ }
+ },
+ {
+ "ID": "108",
+ "typeID": "Label",
+ "zOrder": "108",
+ "measuredW": "255",
+ "measuredH": "23",
+ "x": "322",
+ "y": "1195",
+ "properties": {
+ "bold": "true",
+ "color": "10027263",
+ "size": "15",
+ "text": "然後在接下來的時間裡完成其他工作。"
+ }
+ },
+ {
+ "ID": "109",
+ "typeID": "Label",
+ "zOrder": "109",
+ "measuredW": "170",
+ "measuredH": "25",
+ "x": "859",
+ "y": "363",
+ "properties": {
+ "size": "17",
+ "text": "先還不用擔心美觀問題"
+ }
+ },
+ {
+ "ID": "110",
+ "typeID": "Label",
+ "zOrder": "110",
+ "measuredW": "423",
+ "measuredH": "25",
+ "x": "854",
+ "y": "302",
+ "properties": {
+ "size": "17",
+ "text": "將頁面分成多個部分（section）以及如何正確建立 DOM"
+ }
+ },
+ {
+ "ID": "111",
+ "typeID": "Label",
+ "zOrder": "111",
+ "measuredW": "314",
+ "measuredH": "25",
+ "x": "858",
+ "y": "268",
+ "properties": {
+ "size": "17",
+ "text": "瞭解基本知識和如何撰寫 semantic HTML"
+ }
+ },
+ {
+ "ID": "112",
+ "typeID": "Label",
+ "zOrder": "112",
+ "measuredW": "313",
+ "measuredH": "25",
+ "x": "859",
+ "y": "335",
+ "properties": {
+ "size": "17",
+ "text": "至少製作 5 個 HTML 頁面 –– 重點在結構"
+ }
+ },
+ {
+ "ID": "113",
+ "typeID": "Label",
+ "zOrder": "113",
+ "measuredW": "153",
+ "measuredH": "25",
+ "x": "855",
+ "y": "414",
+ "properties": {
+ "size": "17",
+ "text": "瞭解語法和基本結構"
+ }
+ },
+ {
+ "ID": "114",
+ "typeID": "Label",
+ "zOrder": "114",
+ "measuredW": "146",
+ "measuredH": "25",
+ "x": "855",
+ "y": "442",
+ "properties": {
+ "size": "17",
+ "text": "瞭解如何操作 DOM"
+ }
+ },
+ {
+ "ID": "115",
+ "typeID": "Label",
+ "zOrder": "115",
+ "measuredW": "603",
+ "measuredH": "25",
+ "x": "850",
+ "y": "471",
+ "properties": {
+ "size": "17",
+ "text": "瞭解提升（hoisting）、事件冒泡（event bubbling）、原型（prototype）等概念"
+ }
+ },
+ {
+ "ID": "116",
+ "typeID": "Label",
+ "zOrder": "116",
+ "measuredW": "418",
+ "measuredH": "25",
+ "x": "858",
+ "y": "535",
+ "properties": {
+ "size": "17",
+ "text": "瞭解 ES6 以上版本的新功能並撰寫模組化的 JavaScript"
+ }
+ },
+ {
+ "ID": "117",
+ "typeID": "Label",
+ "zOrder": "117",
+ "measuredW": "142",
+ "measuredH": "25",
+ "x": "858",
+ "y": "504",
+ "properties": {
+ "size": "17",
+ "text": "瞭解 Ajax（XHR）"
+ }
+ },
+ {
+ "ID": "118",
+ "typeID": "TextArea",
+ "zOrder": "118",
+ "w": "543",
+ "h": "136",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "310",
+ "y": "1594",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "119",
+ "typeID": "Icon",
+ "zOrder": "119",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "323",
+ "y": "1610",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "120",
+ "typeID": "Label",
+ "zOrder": "120",
+ "w": "19",
+ "measuredW": "8",
+ "measuredH": "22",
+ "x": "330",
+ "y": "1612",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "size": "14",
+ "text": "9"
+ }
+ },
+ {
+ "ID": "121",
+ "typeID": "Label",
+ "zOrder": "121",
+ "w": "276",
+ "measuredW": "266",
+ "measuredH": "26",
+ "x": "356",
+ "y": "1610",
+ "properties": {
+ "bold": "true",
+ "size": "18",
+ "text": "CSS 預處理器（Preprocessor）"
+ }
+ },
+ {
+ "ID": "122",
+ "typeID": "TextInput",
+ "zOrder": "122",
+ "w": "136",
+ "measuredW": "56",
+ "measuredH": "32",
+ "x": "284",
+ "y": "1369",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "Sass"
+ }
+ },
+ {
+ "ID": "123",
+ "typeID": "TextInput",
+ "zOrder": "123",
+ "w": "136",
+ "measuredW": "54",
+ "measuredH": "32",
+ "x": "284",
+ "y": "1445",
+ "properties": {
+ "align": "center",
+ "color": "16777215",
+ "size": "18",
+ "text": "Less"
+ }
+ },
+ {
+ "ID": "124",
+ "typeID": "TextInput",
+ "zOrder": "124",
+ "w": "136",
+ "measuredW": "65",
+ "measuredH": "32",
+ "x": "284",
+ "y": "1483",
+ "properties": {
+ "align": "center",
+ "color": "16777215",
+ "size": "18",
+ "text": "Stylus"
+ }
+ },
+ {
+ "ID": "125",
+ "typeID": "TextInput",
+ "zOrder": "125",
+ "w": "136",
+ "measuredW": "87",
+ "measuredH": "32",
+ "x": "284",
+ "y": "1406",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "PostCSS"
+ }
+ },
+ {
+ "ID": "126",
+ "typeID": "Label",
+ "zOrder": "126",
+ "measuredW": "482",
+ "measuredH": "25",
+ "x": "356",
+ "y": "1638",
+ "properties": {
+ "size": "17",
+ "text": "預處理器讓你基於 CSS 新增更多功能，讓你做一些 CSS 做不到"
+ }
+ },
+ {
+ "ID": "127",
+ "typeID": "Label",
+ "zOrder": "127",
+ "measuredW": "340",
+ "measuredH": "25",
+ "x": "356",
+ "y": "1663",
+ "properties": {
+ "size": "17",
+ "text": "的事情。任選一個看看它們提供了什麼功能，"
+ }
+ },
+ {
+ "ID": "128",
+ "typeID": "Label",
+ "zOrder": "128",
+ "measuredW": "187",
+ "measuredH": "25",
+ "x": "356",
+ "y": "1689",
+ "properties": {
+ "size": "17",
+ "text": "然後選擇適合你的一個。"
+ }
+ },
+ {
+ "ID": "129",
+ "typeID": "TextArea",
+ "zOrder": "129",
+ "w": "421",
+ "h": "187",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "915",
+ "y": "1564",
+ "properties": {
+ "color": "16770457"
+ }
+ },
+ {
+ "ID": "130",
+ "typeID": "Label",
+ "zOrder": "130",
+ "measuredW": "79",
+ "measuredH": "25",
+ "x": "928",
+ "y": "1576",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "先學 Sass"
+ }
+ },
+ {
+ "ID": "131",
+ "typeID": "Label",
+ "zOrder": "131",
+ "measuredW": "401",
+ "measuredH": "25",
+ "x": "930",
+ "y": "1633",
+ "properties": {
+ "size": "17",
+ "text": "PostCSS 是一個不錯的選擇，像是 CSS 的 \"Babel\"。"
+ }
+ },
+ {
+ "ID": "132",
+ "typeID": "Label",
+ "zOrder": "132",
+ "measuredW": "237",
+ "measuredH": "25",
+ "x": "930",
+ "y": "1658",
+ "properties": {
+ "size": "17",
+ "text": "你也可以在 Sass 之上使用它。"
+ }
+ },
+ {
+ "ID": "133",
+ "typeID": "Label",
+ "zOrder": "133",
+ "measuredW": "176",
+ "measuredH": "25",
+ "x": "930",
+ "y": "1712",
+ "properties": {
+ "size": "17",
+ "text": "之後再去看 PostCSS。"
+ }
+ },
+ {
+ "ID": "134",
+ "typeID": "Label",
+ "zOrder": "134",
+ "measuredW": "215",
+ "measuredH": "25",
+ "x": "930",
+ "y": "1684",
+ "properties": {
+ "size": "17",
+ "text": "但是，我會推薦你學 Sass，"
+ }
+ },
+ {
+ "ID": "135",
+ "typeID": "TextArea",
+ "zOrder": "135",
+ "w": "344",
+ "h": "52",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "527",
+ "y": "1273",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "136",
+ "typeID": "Icon",
+ "zOrder": "136",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "538",
+ "y": "1285",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "137",
+ "typeID": "Label",
+ "zOrder": "137",
+ "w": "12",
+ "measuredW": "8",
+ "measuredH": "22",
+ "x": "546",
+ "y": "1286",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "size": "14",
+ "text": "7"
+ }
+ },
+ {
+ "ID": "138",
+ "typeID": "TextArea",
+ "zOrder": "138",
+ "w": "89",
+ "h": "52",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "876",
+ "y": "1273",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "139",
+ "typeID": "Label",
+ "zOrder": "139",
+ "w": "299",
+ "measuredW": "294",
+ "measuredH": "26",
+ "x": "572",
+ "y": "1285",
+ "properties": {
+ "bold": "true",
+ "size": "18",
+ "text": "套件管理系統（Package Manager）"
+ }
+ },
+ {
+ "ID": "140",
+ "typeID": "Label",
+ "zOrder": "140",
+ "w": "47",
+ "measuredW": "39",
+ "measuredH": "26",
+ "x": "901",
+ "y": "1286",
+ "properties": {
+ "bold": "true",
+ "size": "18",
+ "text": "NPM"
+ }
+ },
+ {
+ "ID": "141",
+ "typeID": "TextArea",
+ "zOrder": "141",
+ "w": "89",
+ "h": "52",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "969",
+ "y": "1273",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "142",
+ "typeID": "Label",
+ "zOrder": "142",
+ "w": "47",
+ "measuredW": "38",
+ "measuredH": "26",
+ "x": "991",
+ "y": "1286",
+ "properties": {
+ "bold": "true",
+ "size": "18",
+ "text": "Yarn"
+ }
+ },
+ {
+ "ID": "143",
+ "typeID": "TextArea",
+ "zOrder": "143",
+ "w": "417",
+ "h": "225",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "845",
+ "y": "1001",
+ "properties": {
+ "color": "16770457"
+ }
+ },
+ {
+ "ID": "144",
+ "typeID": "Label",
+ "zOrder": "144",
+ "measuredW": "359",
+ "measuredH": "25",
+ "x": "861",
+ "y": "1051",
+ "properties": {
+ "size": "17",
+ "text": "套件管理系統會協助你將外部函式庫（Library）"
+ }
+ },
+ {
+ "ID": "145",
+ "typeID": "Label",
+ "zOrder": "145",
+ "measuredW": "326",
+ "measuredH": "25",
+ "x": "861",
+ "y": "1077",
+ "properties": {
+ "size": "17",
+ "text": "和外掛程式（plugins）導入到你的專案中。"
+ }
+ },
+ {
+ "ID": "146",
+ "typeID": "Label",
+ "zOrder": "146",
+ "measuredW": "391",
+ "measuredH": "25",
+ "x": "861",
+ "y": "1103",
+ "properties": {
+ "size": "17",
+ "text": "這樣您就不必擔心手動複製函式庫或處理麻煩的更新"
+ }
+ },
+ {
+ "ID": "147",
+ "typeID": "Label",
+ "zOrder": "147",
+ "measuredW": "85",
+ "measuredH": "25",
+ "x": "861",
+ "y": "1129",
+ "properties": {
+ "size": "17",
+ "text": "之類的問題"
+ }
+ },
+ {
+ "ID": "148",
+ "typeID": "Label",
+ "zOrder": "148",
+ "measuredW": "323",
+ "measuredH": "25",
+ "x": "861",
+ "y": "1156",
+ "properties": {
+ "size": "17",
+ "text": "這兩者幾乎是相同的，只是實作上的差異，"
+ }
+ },
+ {
+ "ID": "149",
+ "typeID": "Label",
+ "zOrder": "149",
+ "measuredW": "119",
+ "measuredH": "25",
+ "x": "861",
+ "y": "1181",
+ "properties": {
+ "size": "17",
+ "text": "隨便挑一個吧。"
+ }
+ },
+ {
+ "ID": "150",
+ "typeID": "TextArea",
+ "zOrder": "150",
+ "w": "759",
+ "h": "202",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "527",
+ "y": "1331",
+ "properties": {
+ "color": "16777215"
+ }
+ },
+ {
+ "ID": "151",
+ "typeID": "Label",
+ "zOrder": "151",
+ "measuredW": "479",
+ "measuredH": "25",
+ "x": "572",
+ "y": "1349",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "在你的應用程式中安裝一些外部相依（External Dependency）"
+ }
+ },
+ {
+ "ID": "152",
+ "typeID": "Icon",
+ "zOrder": "152",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "541",
+ "y": "1350",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "153",
+ "typeID": "Label",
+ "zOrder": "153",
+ "w": "10",
+ "measuredW": "8",
+ "measuredH": "21",
+ "x": "549",
+ "y": "1352",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "text": "8"
+ }
+ },
+ {
+ "ID": "154",
+ "typeID": "Label",
+ "zOrder": "154",
+ "measuredW": "442",
+ "measuredH": "25",
+ "x": "572",
+ "y": "1376",
+ "properties": {
+ "size": "17",
+ "text": "現在繼續前進，在你前面做的網頁中安裝一些外部函式庫。"
+ }
+ },
+ {
+ "ID": "155",
+ "typeID": "Label",
+ "zOrder": "155",
+ "measuredW": "676",
+ "measuredH": "25",
+ "x": "572",
+ "y": "1402",
+ "properties": {
+ "size": "17",
+ "text": "例如：安裝 toast 外掛，當使用者點選按鈕時，就顯示一個快顯訊息（toast message）。"
+ }
+ },
+ {
+ "ID": "156",
+ "typeID": "Label",
+ "zOrder": "156",
+ "measuredW": "527",
+ "measuredH": "25",
+ "x": "572",
+ "y": "1429",
+ "properties": {
+ "size": "17",
+ "text": "或者，建立一個登入表單，使用一些表單驗證的函式庫進行表單驗證，"
+ }
+ },
+ {
+ "ID": "157",
+ "typeID": "Label",
+ "zOrder": "157",
+ "measuredW": "357",
+ "measuredH": "25",
+ "x": "573",
+ "y": "1454",
+ "properties": {
+ "size": "17",
+ "text": "玩玩看不同的選項和研究如何安裝不同的版本。"
+ }
+ },
+ {
+ "ID": "158",
+ "typeID": "Icon",
+ "zOrder": "158",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "545",
+ "y": "1489",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "lightbulb-o",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "159",
+ "typeID": "Label",
+ "zOrder": "159",
+ "measuredW": "400",
+ "measuredH": "23",
+ "x": "573",
+ "y": "1490",
+ "properties": {
+ "bold": "true",
+ "color": "10027263",
+ "size": "15",
+ "text": "閱讀有關語意化版本控制（Semantic Versioning）的資訊。"
+ }
+ },
+ {
+ "ID": "160",
+ "typeID": "Label",
+ "zOrder": "160",
+ "measuredW": "238",
+ "measuredH": "25",
+ "x": "861",
+ "y": "1018",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "學一個，你就自動學會了另一個"
+ }
+ },
+ {
+ "ID": "161",
+ "typeID": "TextArea",
+ "zOrder": "161",
+ "w": "550",
+ "h": "84",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "696",
+ "y": "2036",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "162",
+ "typeID": "Icon",
+ "zOrder": "162",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "709",
+ "y": "2052",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "163",
+ "typeID": "Label",
+ "zOrder": "163",
+ "w": "19",
+ "measuredW": "15",
+ "measuredH": "22",
+ "x": "713",
+ "y": "2054",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "size": "14",
+ "text": "12"
+ }
+ },
+ {
+ "ID": "164",
+ "typeID": "Label",
+ "zOrder": "164",
+ "w": "188",
+ "measuredW": "188",
+ "measuredH": "26",
+ "x": "742",
+ "y": "2051",
+ "properties": {
+ "bold": "true",
+ "size": "18",
+ "text": "構建工具（Build tool）"
+ }
+ },
+ {
+ "ID": "165",
+ "typeID": "Label",
+ "zOrder": "165",
+ "measuredW": "498",
+ "measuredH": "25",
+ "x": "742",
+ "y": "2077",
+ "properties": {
+ "size": "17",
+ "text": "幫你構建（building）或打包（bundling），以及協助開發的工具。"
+ }
+ },
+ {
+ "ID": "166",
+ "typeID": "TextInput",
+ "zOrder": "166",
+ "w": "147",
+ "measuredW": "116",
+ "measuredH": "32",
+ "x": "471",
+ "y": "2045",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "NPM Scripts"
+ }
+ },
+ {
+ "ID": "167",
+ "typeID": "TextInput",
+ "zOrder": "167",
+ "w": "147",
+ "measuredW": "51",
+ "measuredH": "32",
+ "x": "471",
+ "y": "2082",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "Gulp"
+ }
+ },
+ {
+ "ID": "168",
+ "typeID": "TextArea",
+ "zOrder": "168",
+ "w": "261",
+ "h": "188",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "153",
+ "y": "2036",
+ "properties": {
+ "color": "16770457"
+ }
+ },
+ {
+ "ID": "169",
+ "typeID": "Label",
+ "zOrder": "169",
+ "measuredW": "227",
+ "measuredH": "25",
+ "x": "167",
+ "y": "2051",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "任務執行器（Task Runners）"
+ }
+ },
+ {
+ "ID": "170",
+ "typeID": "Label",
+ "zOrder": "170",
+ "measuredW": "181",
+ "measuredH": "25",
+ "x": "930",
+ "y": "1608",
+ "properties": {
+ "size": "17",
+ "text": "我會推薦你先學 Sass。"
+ }
+ },
+ {
+ "ID": "171",
+ "typeID": "Label",
+ "zOrder": "171",
+ "measuredW": "113",
+ "measuredH": "25",
+ "x": "167",
+ "y": "2105",
+ "properties": {
+ "size": "17",
+ "text": "NPM Scripts。"
+ }
+ },
+ {
+ "ID": "172",
+ "typeID": "Label",
+ "zOrder": "172",
+ "measuredW": "238",
+ "measuredH": "25",
+ "x": "167",
+ "y": "2130",
+ "properties": {
+ "size": "17",
+ "text": "但是，如果你想要其他的選擇，"
+ }
+ },
+ {
+ "ID": "173",
+ "typeID": "Label",
+ "zOrder": "173",
+ "measuredW": "108",
+ "measuredH": "25",
+ "x": "167",
+ "y": "2158",
+ "properties": {
+ "size": "17",
+ "text": "去看看 Gulp，"
+ }
+ },
+ {
+ "ID": "174",
+ "typeID": "Label",
+ "zOrder": "174",
+ "measuredW": "187",
+ "measuredH": "25",
+ "x": "167",
+ "y": "2185",
+ "properties": {
+ "size": "17",
+ "text": "看看它可以幫助你什麼。"
+ }
+ },
+ {
+ "ID": "175",
+ "typeID": "TextInput",
+ "zOrder": "175",
+ "w": "147",
+ "measuredW": "90",
+ "measuredH": "32",
+ "x": "726",
+ "y": "2158",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "Webpack"
+ }
+ },
+ {
+ "ID": "176",
+ "typeID": "TextInput",
+ "zOrder": "176",
+ "w": "147",
+ "measuredW": "64",
+ "measuredH": "32",
+ "x": "726",
+ "y": "2195",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "Rollup"
+ }
+ },
+ {
+ "ID": "177",
+ "typeID": "TextInput",
+ "zOrder": "177",
+ "w": "147",
+ "measuredW": "63",
+ "measuredH": "32",
+ "x": "726",
+ "y": "2233",
+ "properties": {
+ "align": "center",
+ "color": "16777215",
+ "size": "18",
+ "text": "Parcel"
+ }
+ },
+ {
+ "ID": "178",
+ "typeID": "TextArea",
+ "zOrder": "178",
+ "w": "468",
+ "h": "113",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "905",
+ "y": "2155",
+ "properties": {
+ "color": "16770457",
+ "text": ""
+ }
+ },
+ {
+ "ID": "179",
+ "typeID": "Label",
+ "zOrder": "179",
+ "measuredW": "354",
+ "measuredH": "25",
+ "x": "919",
+ "y": "2169",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "寫應用程式用 Webpack，寫函式庫用 Rollup！"
+ }
+ },
+ {
+ "ID": "180",
+ "typeID": "Label",
+ "zOrder": "180",
+ "measuredW": "184",
+ "measuredH": "25",
+ "x": "167",
+ "y": "2079",
+ "properties": {
+ "size": "17",
+ "text": "在 2018 年，我只會選擇"
+ }
+ },
+ {
+ "ID": "181",
+ "typeID": "Label",
+ "zOrder": "181",
+ "measuredW": "439",
+ "measuredH": "25",
+ "x": "919",
+ "y": "2200",
+ "properties": {
+ "size": "17",
+ "text": "你現在不需要 Rollup 了，Webpack 就可以完成所有任務，"
+ }
+ },
+ {
+ "ID": "182",
+ "typeID": "Label",
+ "zOrder": "182",
+ "measuredW": "273",
+ "measuredH": "25",
+ "x": "920",
+ "y": "2227",
+ "properties": {
+ "size": "17",
+ "text": "但你之後可以隨時再去看看 Rollup。"
+ }
+ },
+ {
+ "ID": "183",
+ "typeID": "TextArea",
+ "zOrder": "183",
+ "w": "787",
+ "h": "176",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "484",
+ "y": "2340",
+ "properties": {
+ "color": "16777215"
+ }
+ },
+ {
+ "ID": "184",
+ "typeID": "Label",
+ "zOrder": "184",
+ "measuredW": "228",
+ "measuredH": "25",
+ "x": "530",
+ "y": "2359",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "創造一些東西 -- 也許是函式庫"
+ }
+ },
+ {
+ "ID": "185",
+ "typeID": "Icon",
+ "zOrder": "185",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "499",
+ "y": "2360",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "186",
+ "typeID": "Label",
+ "zOrder": "186",
+ "w": "20",
+ "measuredW": "13",
+ "measuredH": "21",
+ "x": "504",
+ "y": "2363",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "text": "13"
+ }
+ },
+ {
+ "ID": "187",
+ "typeID": "Label",
+ "zOrder": "187",
+ "measuredW": "613",
+ "measuredH": "25",
+ "x": "530",
+ "y": "2388",
+ "properties": {
+ "size": "17",
+ "text": "恭喜！你現在可以說你自己是 75% 現代 JavaScript 開發人員了。現在繼續前進，"
+ }
+ },
+ {
+ "ID": "188",
+ "typeID": "Label",
+ "zOrder": "188",
+ "measuredW": "690",
+ "measuredH": "25",
+ "x": "530",
+ "y": "2416",
+ "properties": {
+ "size": "17",
+ "text": "用你所學到的一切創造一些東西。 也許是把你必須用 Sass 和 JavaScript 的地方建立成一些"
+ }
+ },
+ {
+ "ID": "189",
+ "typeID": "Label",
+ "zOrder": "189",
+ "measuredW": "737",
+ "measuredH": "25",
+ "x": "530",
+ "y": "2445",
+ "properties": {
+ "size": "17",
+ "text": "函式庫。然後使用 webpack 將 Sass 轉換成 CSS，使用 Babel 轉譯（Transpile）ES6 的程式碼。"
+ }
+ },
+ {
+ "ID": "190",
+ "typeID": "Label",
+ "zOrder": "190",
+ "measuredW": "343",
+ "measuredH": "25",
+ "x": "530",
+ "y": "2472",
+ "properties": {
+ "size": "17",
+ "text": "一旦你完成了，在 GitHub 和 npm 上發布它。"
+ }
+ },
+ {
+ "ID": "193",
+ "typeID": "TextArea",
+ "zOrder": "191",
+ "w": "319",
+ "h": "82",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "534",
+ "y": "2554",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "194",
+ "typeID": "Icon",
+ "zOrder": "192",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "547",
+ "y": "2570",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "195",
+ "typeID": "Label",
+ "zOrder": "193",
+ "w": "19",
+ "measuredW": "15",
+ "measuredH": "22",
+ "x": "552",
+ "y": "2572",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "size": "14",
+ "text": "14"
+ }
+ },
+ {
+ "ID": "196",
+ "typeID": "Label",
+ "zOrder": "194",
+ "w": "238",
+ "measuredW": "235",
+ "measuredH": "26",
+ "x": "580",
+ "y": "2569",
+ "properties": {
+ "bold": "true",
+ "size": "18",
+ "text": "選擇一個框架（Framework）"
+ }
+ },
+ {
+ "ID": "197",
+ "typeID": "Label",
+ "zOrder": "195",
+ "w": "184",
+ "measuredW": "182",
+ "measuredH": "25",
+ "x": "580",
+ "y": "2595",
+ "properties": {
+ "size": "17",
+ "text": "React、Angular 或 Vue"
+ }
+ },
+ {
+ "ID": "198",
+ "typeID": "TextInput",
+ "zOrder": "196",
+ "w": "147",
+ "measuredW": "81",
+ "measuredH": "32",
+ "x": "324",
+ "y": "2562",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "React.js"
+ }
+ },
+ {
+ "ID": "199",
+ "typeID": "TextInput",
+ "zOrder": "197",
+ "w": "176",
+ "measuredW": "66",
+ "measuredH": "32",
+ "x": "167",
+ "y": "2304",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "Redux"
+ }
+ },
+ {
+ "ID": "200",
+ "typeID": "TextInput",
+ "zOrder": "198",
+ "w": "176",
+ "measuredW": "57",
+ "measuredH": "32",
+ "x": "167",
+ "y": "2343",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "Mobx"
+ }
+ },
+ {
+ "ID": "201",
+ "typeID": "Label",
+ "zOrder": "199",
+ "measuredW": "153",
+ "measuredH": "25",
+ "x": "167",
+ "y": "2385",
+ "properties": {
+ "size": "17",
+ "text": "這些沒有限定只能跟"
+ }
+ },
+ {
+ "ID": "202",
+ "typeID": "Label",
+ "zOrder": "200",
+ "measuredW": "171",
+ "measuredH": "25",
+ "x": "167",
+ "y": "2408",
+ "properties": {
+ "size": "17",
+ "text": "React 搭配，你可以在"
+ }
+ },
+ {
+ "ID": "203",
+ "typeID": "Label",
+ "zOrder": "201",
+ "measuredW": "170",
+ "measuredH": "25",
+ "x": "167",
+ "y": "2432",
+ "properties": {
+ "size": "17",
+ "text": "任何框架或應用程式中"
+ }
+ },
+ {
+ "ID": "204",
+ "typeID": "Label",
+ "zOrder": "202",
+ "measuredW": "85",
+ "measuredH": "25",
+ "x": "167",
+ "y": "2456",
+ "properties": {
+ "size": "17",
+ "text": "使用它們。"
+ }
+ },
+ {
+ "ID": "205",
+ "typeID": "TextInput",
+ "zOrder": "203",
+ "w": "147",
+ "measuredW": "62",
+ "measuredH": "32",
+ "x": "324",
+ "y": "2601",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "Vue.js"
+ }
+ },
+ {
+ "ID": "206",
+ "typeID": "TextInput",
+ "zOrder": "204",
+ "w": "147",
+ "measuredW": "79",
+ "measuredH": "32",
+ "x": "324",
+ "y": "2640",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "Angular"
+ }
+ },
+ {
+ "ID": "207",
+ "typeID": "TextArea",
+ "zOrder": "205",
+ "w": "276",
+ "h": "123",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "443",
+ "y": "2710",
+ "properties": {
+ "color": "16770457"
+ }
+ },
+ {
+ "ID": "208",
+ "typeID": "TextInput",
+ "zOrder": "206",
+ "w": "176",
+ "measuredW": "54",
+ "measuredH": "32",
+ "x": "220",
+ "y": "2750",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "Rx.js"
+ }
+ },
+ {
+ "ID": "209",
+ "typeID": "TextInput",
+ "zOrder": "207",
+ "w": "176",
+ "measuredW": "51",
+ "measuredH": "32",
+ "x": "220",
+ "y": "2786",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "ngrx"
+ }
+ },
+ {
+ "ID": "210",
+ "typeID": "Label",
+ "zOrder": "208",
+ "measuredW": "235",
+ "measuredH": "25",
+ "x": "459",
+ "y": "2723",
+ "properties": {
+ "size": "17",
+ "text": "就算你沒有選擇使用 angular，"
+ }
+ },
+ {
+ "ID": "211",
+ "typeID": "Label",
+ "zOrder": "209",
+ "measuredW": "213",
+ "measuredH": "25",
+ "x": "459",
+ "y": "2746",
+ "properties": {
+ "size": "17",
+ "text": "Rx.js 是個非常棒的函式庫，"
+ }
+ },
+ {
+ "ID": "212",
+ "typeID": "Label",
+ "zOrder": "210",
+ "measuredW": "218",
+ "measuredH": "25",
+ "x": "459",
+ "y": "2770",
+ "properties": {
+ "size": "17",
+ "text": "而且可以不用搭配 angular。"
+ }
+ },
+ {
+ "ID": "213",
+ "typeID": "Label",
+ "zOrder": "211",
+ "measuredW": "119",
+ "measuredH": "25",
+ "x": "459",
+ "y": "2795",
+ "properties": {
+ "size": "17",
+ "text": "之後嘗試看看！"
+ }
+ },
+ {
+ "ID": "214",
+ "typeID": "TextInput",
+ "zOrder": "212",
+ "w": "205",
+ "measuredW": "94",
+ "measuredH": "32",
+ "x": "81",
+ "y": "2686",
+ "properties": {
+ "align": "center",
+ "borderColor": "13576743",
+ "color": "16777215",
+ "size": "18",
+ "text": "Angular.js"
+ }
+ },
+ {
+ "ID": "215",
+ "typeID": "ScratchOut",
+ "zOrder": "213",
+ "w": "44",
+ "h": "27",
+ "measuredW": "205",
+ "measuredH": "107",
+ "x": "238",
+ "y": "2688",
+ "properties": {
+ "color": "13576743"
+ }
+ },
+ {
+ "ID": "216",
+ "typeID": "TextArea",
+ "zOrder": "214",
+ "w": "354",
+ "h": "123",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "97",
+ "y": "2854",
+ "properties": {
+ "color": "16770457"
+ }
+ },
+ {
+ "ID": "217",
+ "typeID": "Label",
+ "zOrder": "215",
+ "measuredW": "85",
+ "measuredH": "25",
+ "x": "111",
+ "y": "2866",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "入圍佳作！"
+ }
+ },
+ {
+ "ID": "218",
+ "typeID": "Label",
+ "zOrder": "216",
+ "measuredW": "323",
+ "measuredH": "25",
+ "x": "111",
+ "y": "2892",
+ "properties": {
+ "size": "17",
+ "text": "除了舊的應用程式外，已經沒有人再使用它"
+ }
+ },
+ {
+ "ID": "219",
+ "typeID": "Label",
+ "zOrder": "217",
+ "measuredW": "322",
+ "measuredH": "25",
+ "x": "111",
+ "y": "2917",
+ "properties": {
+ "size": "17",
+ "text": "了。如果你選擇使用 Angular，請確認版本"
+ }
+ },
+ {
+ "ID": "220",
+ "typeID": "Label",
+ "zOrder": "218",
+ "measuredW": "303",
+ "measuredH": "25",
+ "x": "111",
+ "y": "2942",
+ "properties": {
+ "size": "17",
+ "text": "是 Angular 2 以上，而不是 angular.js。"
+ }
+ },
+ {
+ "ID": "221",
+ "typeID": "TextArea",
+ "zOrder": "219",
+ "w": "540",
+ "h": "145",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "871",
+ "y": "2529",
+ "properties": {
+ "color": "16770457",
+ "text": ""
+ }
+ },
+ {
+ "ID": "222",
+ "typeID": "Label",
+ "zOrder": "220",
+ "measuredW": "261",
+ "measuredH": "25",
+ "x": "885",
+ "y": "2547",
+ "properties": {
+ "size": "17",
+ "text": "最近對 React.js 的需求越來越多。"
+ }
+ },
+ {
+ "ID": "223",
+ "typeID": "Label",
+ "zOrder": "221",
+ "measuredW": "323",
+ "measuredH": "25",
+ "x": "885",
+ "y": "2574",
+ "properties": {
+ "size": "17",
+ "text": "你可以選擇列表中的任何一個，那也很好。"
+ }
+ },
+ {
+ "ID": "224",
+ "typeID": "Label",
+ "zOrder": "222",
+ "w": "381",
+ "measuredW": "221",
+ "measuredH": "25",
+ "x": "885",
+ "y": "2600",
+ "properties": {
+ "size": "17",
+ "text": "都看看它們，看你喜歡哪個。"
+ }
+ },
+ {
+ "ID": "225",
+ "typeID": "TextArea",
+ "zOrder": "223",
+ "w": "740",
+ "h": "193",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "541",
+ "y": "2870",
+ "properties": {
+ "color": "16777215",
+ "text": ""
+ }
+ },
+ {
+ "ID": "226",
+ "typeID": "Label",
+ "zOrder": "224",
+ "measuredW": "68",
+ "measuredH": "25",
+ "x": "588",
+ "y": "2883",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "實作時間"
+ }
+ },
+ {
+ "ID": "227",
+ "typeID": "Icon",
+ "zOrder": "225",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "557",
+ "y": "2884",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "228",
+ "typeID": "Label",
+ "zOrder": "226",
+ "w": "17",
+ "measuredW": "13",
+ "measuredH": "21",
+ "x": "562",
+ "y": "2886",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "text": "15"
+ }
+ },
+ {
+ "ID": "229",
+ "typeID": "Label",
+ "zOrder": "227",
+ "measuredW": "505",
+ "measuredH": "25",
+ "x": "588",
+ "y": "2912",
+ "properties": {
+ "size": "17",
+ "text": "現在，您知道了構建一個現代 JavaScript 應用程式所需要的 _一切_。"
+ }
+ },
+ {
+ "ID": "230",
+ "typeID": "Label",
+ "zOrder": "228",
+ "measuredW": "374",
+ "measuredH": "25",
+ "x": "588",
+ "y": "2942",
+ "properties": {
+ "size": "17",
+ "text": "繼續前進，用你挑選的任何框架做一些應用程式。"
+ }
+ },
+ {
+ "ID": "231",
+ "typeID": "Label",
+ "zOrder": "229",
+ "measuredW": "492",
+ "measuredH": "25",
+ "x": "588",
+ "y": "2971",
+ "properties": {
+ "size": "17",
+ "text": "你可以在 `ideas` 目錄中找到一些想法。 挑選點什麼東西開始吧！"
+ }
+ },
+ {
+ "ID": "232",
+ "typeID": "TextArea",
+ "zOrder": "230",
+ "w": "740",
+ "h": "213",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "543",
+ "y": "3070",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "233",
+ "typeID": "TextInput",
+ "zOrder": "231",
+ "w": "176",
+ "measuredW": "54",
+ "measuredH": "32",
+ "x": "79",
+ "y": "2611",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "vuex"
+ }
+ },
+ {
+ "ID": "234",
+ "typeID": "Label",
+ "zOrder": "232",
+ "measuredW": "229",
+ "measuredH": "25",
+ "x": "592",
+ "y": "3089",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "測試（Testing）你的應用程式"
+ }
+ },
+ {
+ "ID": "235",
+ "typeID": "Icon",
+ "zOrder": "233",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "561",
+ "y": "3089",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "236",
+ "typeID": "Label",
+ "zOrder": "234",
+ "w": "17",
+ "measuredW": "13",
+ "measuredH": "21",
+ "x": "566",
+ "y": "3091",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "text": "16"
+ }
+ },
+ {
+ "ID": "237",
+ "typeID": "TextInput",
+ "zOrder": "235",
+ "w": "162",
+ "measuredW": "50",
+ "measuredH": "32",
+ "x": "220",
+ "y": "3051",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "Jest"
+ }
+ },
+ {
+ "ID": "238",
+ "typeID": "TextInput",
+ "zOrder": "236",
+ "w": "162",
+ "measuredW": "66",
+ "measuredH": "32",
+ "x": "220",
+ "y": "3086",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "Mocha"
+ }
+ },
+ {
+ "ID": "239",
+ "typeID": "TextInput",
+ "zOrder": "237",
+ "w": "162",
+ "measuredW": "68",
+ "measuredH": "32",
+ "x": "220",
+ "y": "3161",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "Karma"
+ }
+ },
+ {
+ "ID": "240",
+ "typeID": "TextInput",
+ "zOrder": "238",
+ "w": "162",
+ "measuredW": "80",
+ "measuredH": "32",
+ "x": "220",
+ "y": "3197",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "Enzyme"
+ }
+ },
+ {
+ "ID": "241",
+ "typeID": "Label",
+ "zOrder": "239",
+ "measuredW": "418",
+ "measuredH": "25",
+ "x": "594",
+ "y": "3120",
+ "properties": {
+ "size": "17",
+ "text": "有非常非常多不同的工具用來設計給 *不同的目的* 使用。"
+ }
+ },
+ {
+ "ID": "242",
+ "typeID": "Label",
+ "zOrder": "240",
+ "measuredW": "289",
+ "measuredH": "25",
+ "x": "594",
+ "y": "3143",
+ "properties": {
+ "size": "17",
+ "text": "我大多發現自己使用左邊列出的那些。"
+ }
+ },
+ {
+ "ID": "243",
+ "typeID": "Label",
+ "zOrder": "241",
+ "measuredW": "459",
+ "measuredH": "25",
+ "x": "594",
+ "y": "3167",
+ "properties": {
+ "size": "17",
+ "text": "但是，在你學習它們之前，我建議你先瞭解不同的測試類型，"
+ }
+ },
+ {
+ "ID": "244",
+ "typeID": "TextInput",
+ "zOrder": "242",
+ "w": "162",
+ "measuredW": "96",
+ "measuredH": "32",
+ "x": "220",
+ "y": "3123",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "Protractor"
+ }
+ },
+ {
+ "ID": "245",
+ "typeID": "Label",
+ "zOrder": "243",
+ "measuredW": "391",
+ "measuredH": "25",
+ "x": "594",
+ "y": "3191",
+ "properties": {
+ "size": "17",
+ "text": "看看所有可用的選項，並使用最適合你需求的那個。"
+ }
+ },
+ {
+ "ID": "246",
+ "typeID": "Label",
+ "zOrder": "244",
+ "measuredW": "462",
+ "measuredH": "25",
+ "x": "594",
+ "y": "3235",
+ "properties": {
+ "color": "13576743",
+ "size": "17",
+ "text": "這裡有個不錯的摘要可以協助你起步：https://goo.gl/D77a4K"
+ }
+ },
+ {
+ "ID": "247",
+ "typeID": "Icon",
+ "zOrder": "245",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "562",
+ "y": "3234",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "lightbulb-o",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "248",
+ "typeID": "TextArea",
+ "zOrder": "246",
+ "w": "740",
+ "h": "122",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "543",
+ "y": "3376",
+ "properties": {
+ "color": "16777215"
+ }
+ },
+ {
+ "ID": "249",
+ "typeID": "Label",
+ "zOrder": "247",
+ "measuredW": "336",
+ "measuredH": "25",
+ "x": "587",
+ "y": "3395",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "靜態類型檢查工具（Static Type Checker）"
+ }
+ },
+ {
+ "ID": "250",
+ "typeID": "Icon",
+ "zOrder": "248",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "557",
+ "y": "3395",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "251",
+ "typeID": "Label",
+ "zOrder": "249",
+ "w": "17",
+ "measuredW": "13",
+ "measuredH": "21",
+ "x": "562",
+ "y": "3397",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "text": "18"
+ }
+ },
+ {
+ "ID": "252",
+ "typeID": "Label",
+ "zOrder": "250",
+ "measuredW": "561",
+ "measuredH": "25",
+ "x": "589",
+ "y": "3425",
+ "properties": {
+ "size": "17",
+ "text": "你不需要學這些，但它們真的會給你超能力，而且只要幾小時就可以掌握。"
+ }
+ },
+ {
+ "ID": "253",
+ "typeID": "TextInput",
+ "zOrder": "251",
+ "w": "162",
+ "measuredW": "103",
+ "measuredH": "32",
+ "x": "221",
+ "y": "3382",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "TypeScript"
+ }
+ },
+ {
+ "ID": "254",
+ "typeID": "TextInput",
+ "zOrder": "252",
+ "w": "162",
+ "measuredW": "50",
+ "measuredH": "32",
+ "x": "221",
+ "y": "3418",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "Flow"
+ }
+ },
+ {
+ "ID": "255",
+ "typeID": "Label",
+ "zOrder": "253",
+ "measuredW": "395",
+ "measuredH": "25",
+ "x": "589",
+ "y": "3450",
+ "properties": {
+ "size": "17",
+ "text": "我會選擇 TypeScript，但你可以兩個都看看、都用。"
+ }
+ },
+ {
+ "ID": "256",
+ "typeID": "TextArea",
+ "zOrder": "254",
+ "w": "739",
+ "h": "81",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "544",
+ "y": "3535",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "257",
+ "typeID": "Icon",
+ "zOrder": "255",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "558",
+ "y": "3549",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "258",
+ "typeID": "Label",
+ "zOrder": "256",
+ "w": "16",
+ "measuredW": "14",
+ "measuredH": "22",
+ "x": "563",
+ "y": "3551",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "size": "14",
+ "text": "17"
+ }
+ },
+ {
+ "ID": "259",
+ "typeID": "Label",
+ "zOrder": "257",
+ "w": "341",
+ "measuredW": "338",
+ "measuredH": "26",
+ "x": "589",
+ "y": "3548",
+ "properties": {
+ "bold": "true",
+ "size": "18",
+ "text": "伺服器端渲染（Server Side Rendering）"
+ }
+ },
+ {
+ "ID": "260",
+ "typeID": "Label",
+ "zOrder": "258",
+ "measuredW": "272",
+ "measuredH": "25",
+ "x": "590",
+ "y": "3575",
+ "properties": {
+ "size": "17",
+ "text": "瞭解你選擇的框架的伺服器端渲染。"
+ }
+ },
+ {
+ "ID": "261",
+ "typeID": "TextInput",
+ "zOrder": "259",
+ "w": "135",
+ "measuredW": "63",
+ "measuredH": "32",
+ "x": "258",
+ "y": "3532",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "React"
+ }
+ },
+ {
+ "ID": "262",
+ "typeID": "TextInput",
+ "zOrder": "260",
+ "w": "135",
+ "measuredW": "79",
+ "measuredH": "32",
+ "x": "258",
+ "y": "3570",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "Angular"
+ }
+ },
+ {
+ "ID": "263",
+ "typeID": "TextInput",
+ "zOrder": "261",
+ "w": "135",
+ "measuredW": "70",
+ "measuredH": "32",
+ "x": "91",
+ "y": "3487",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "Next.js"
+ }
+ },
+ {
+ "ID": "264",
+ "typeID": "TextInput",
+ "zOrder": "262",
+ "w": "135",
+ "measuredW": "72",
+ "measuredH": "32",
+ "x": "91",
+ "y": "3524",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "After.js"
+ }
+ },
+ {
+ "ID": "265",
+ "typeID": "TextInput",
+ "zOrder": "263",
+ "w": "135",
+ "measuredW": "89",
+ "measuredH": "32",
+ "x": "93",
+ "y": "3570",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "Universal"
+ }
+ },
+ {
+ "ID": "266",
+ "typeID": "TextInput",
+ "zOrder": "264",
+ "w": "135",
+ "measuredW": "62",
+ "measuredH": "32",
+ "x": "259",
+ "y": "3608",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "Vue.js"
+ }
+ },
+ {
+ "ID": "267",
+ "typeID": "TextInput",
+ "zOrder": "265",
+ "w": "135",
+ "measuredW": "70",
+ "measuredH": "32",
+ "x": "93",
+ "y": "3608",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "Nuxt.js"
+ }
+ },
+ {
+ "ID": "268",
+ "typeID": "Arrow",
+ "zOrder": "266",
+ "w": "139",
+ "h": "96",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "569",
+ "y": "2088",
+ "properties": {
+ "color": "2848996",
+ "curvature": "1",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 138,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.49968892955169264,
+ "y": -0.07513266239707227
+ },
+ "p2": {
+ "x": 0,
+ "y": 95
+ },
+ "rightArrow": "false",
+ "shape": "bezier",
+ "stroke": "dotted"
+ }
+ },
+ {
+ "ID": "269",
+ "typeID": "TextInput",
+ "zOrder": "267",
+ "w": "147",
+ "measuredW": "68",
+ "measuredH": "32",
+ "x": "449",
+ "y": "2163",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "ESLint"
+ }
+ },
+ {
+ "ID": "270",
+ "typeID": "TextInput",
+ "zOrder": "268",
+ "w": "147",
+ "measuredW": "68",
+ "measuredH": "32",
+ "x": "449",
+ "y": "2200",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "JSLint"
+ }
+ },
+ {
+ "ID": "271",
+ "typeID": "TextInput",
+ "zOrder": "269",
+ "w": "147",
+ "measuredW": "69",
+ "measuredH": "32",
+ "x": "449",
+ "y": "2238",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "JSHint"
+ }
+ },
+ {
+ "ID": "272",
+ "typeID": "TextInput",
+ "zOrder": "270",
+ "w": "147",
+ "measuredW": "63",
+ "measuredH": "32",
+ "x": "449",
+ "y": "2276",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "JSCS"
+ }
+ },
+ {
+ "ID": "273",
+ "typeID": "TextArea",
+ "zOrder": "271",
+ "w": "739",
+ "h": "81",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "544",
+ "y": "3289",
+ "properties": {
+ "color": "16777215"
+ }
+ },
+ {
+ "ID": "274",
+ "typeID": "Icon",
+ "zOrder": "272",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "558",
+ "y": "3303",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "275",
+ "typeID": "Label",
+ "zOrder": "273",
+ "w": "16",
+ "measuredW": "14",
+ "measuredH": "22",
+ "x": "563",
+ "y": "3305",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "size": "14",
+ "text": "17"
+ }
+ },
+ {
+ "ID": "276",
+ "typeID": "Label",
+ "zOrder": "274",
+ "w": "391",
+ "measuredW": "378",
+ "measuredH": "26",
+ "x": "589",
+ "y": "3302",
+ "properties": {
+ "bold": "true",
+ "size": "18",
+ "text": "漸進式網頁應用程式（Progressive Web App）"
+ }
+ },
+ {
+ "ID": "277",
+ "typeID": "Label",
+ "zOrder": "275",
+ "measuredW": "579",
+ "measuredH": "25",
+ "x": "590",
+ "y": "3329",
+ "properties": {
+ "size": "17",
+ "text": "瞭解服務工作線程（Service Worker），以及如何製作漸進式網頁應用程式。"
+ }
+ },
+ {
+ "ID": "278",
+ "typeID": "Label",
+ "zOrder": "276",
+ "measuredW": "289",
+ "measuredH": "25",
+ "x": "588",
+ "y": "3002",
+ "properties": {
+ "color": "13576743",
+ "size": "17",
+ "text": "瞭解如何測量和提高應用程式的性能。"
+ }
+ },
+ {
+ "ID": "279",
+ "typeID": "Icon",
+ "zOrder": "277",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "556",
+ "y": "3006",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "lightbulb-o",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "280",
+ "typeID": "Label",
+ "zOrder": "278",
+ "measuredW": "520",
+ "measuredH": "25",
+ "x": "587",
+ "y": "3027",
+ "properties": {
+ "color": "13576743",
+ "size": "17",
+ "text": "例如：Interactivity Time、Page Speed Index、Lighthouse 分數等。"
+ }
+ },
+ {
+ "ID": "281",
+ "typeID": "Label",
+ "zOrder": "279",
+ "measuredW": "96",
+ "measuredH": "32",
+ "x": "815",
+ "y": "3805",
+ "properties": {
+ "bold": "true",
+ "size": "24",
+ "text": "繼續探索"
+ }
+ },
+ {
+ "ID": "282",
+ "typeID": "Arrow",
+ "zOrder": "280",
+ "w": "200",
+ "h": "7",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "309",
+ "y": "1945",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "bottom",
+ "leftArrow": "false",
+ "p0": {
+ "x": 199,
+ "y": 0
+ },
+ "p1": {
+ "x": 0.5395167379813743,
+ "y": 0.003397936068462093
+ },
+ "p2": {
+ "x": 0,
+ "y": 6
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "283",
+ "typeID": "Arrow",
+ "zOrder": "281",
+ "w": "196",
+ "h": "23",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "308",
+ "y": "1915",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 195,
+ "y": 22
+ },
+ "p1": {
+ "x": 0.5395167379813742,
+ "y": 0.0033979360684621165
+ },
+ "p2": {
+ "x": 0,
+ "y": 0
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "284",
+ "typeID": "Arrow",
+ "zOrder": "282",
+ "w": "182",
+ "h": "52",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "308",
+ "y": "1876",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 181,
+ "y": 51
+ },
+ "p1": {
+ "x": 0.5395167379813742,
+ "y": 0.0033979360684621134
+ },
+ "p2": {
+ "x": 0,
+ "y": 0
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "285",
+ "typeID": "Arrow",
+ "zOrder": "283",
+ "w": "201",
+ "h": "89",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "313",
+ "y": "1840",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 200,
+ "y": 88
+ },
+ "p1": {
+ "x": 0.5395167379813742,
+ "y": 0.0033979360684621043
+ },
+ "p2": {
+ "x": 0,
+ "y": 0
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "286",
+ "typeID": "Arrow",
+ "zOrder": "284",
+ "w": "184",
+ "h": "111",
+ "measuredW": "150",
+ "measuredH": "100",
+ "x": "320",
+ "y": "1808",
+ "properties": {
+ "color": "2848996",
+ "curvature": "0",
+ "direction": "top",
+ "leftArrow": "false",
+ "p0": {
+ "x": 182,
+ "y": 109
+ },
+ "p1": {
+ "x": 0.5479508196721311,
+ "y": 0.0024590163934426227
+ },
+ "p2": {
+ "x": 0,
+ "y": 0
+ },
+ "rightArrow": "false",
+ "shape": "bezier"
+ }
+ },
+ {
+ "ID": "287",
+ "typeID": "TextInput",
+ "zOrder": "285",
+ "w": "162",
+ "measuredW": "51",
+ "measuredH": "32",
+ "x": "158",
+ "y": "1790",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "BEM"
+ }
+ },
+ {
+ "ID": "288",
+ "typeID": "TextInput",
+ "zOrder": "286",
+ "w": "162",
+ "measuredW": "79",
+ "measuredH": "32",
+ "x": "158",
+ "y": "1827",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "OOCSS"
+ }
+ },
+ {
+ "ID": "289",
+ "typeID": "TextArea",
+ "zOrder": "287",
+ "w": "584",
+ "h": "105",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "480",
+ "y": "1775",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "290",
+ "typeID": "Icon",
+ "zOrder": "288",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "494",
+ "y": "1801",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "291",
+ "typeID": "Label",
+ "zOrder": "289",
+ "w": "16",
+ "measuredW": "15",
+ "measuredH": "22",
+ "x": "499",
+ "y": "1803",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "size": "14",
+ "text": "10"
+ }
+ },
+ {
+ "ID": "292",
+ "typeID": "Label",
+ "zOrder": "290",
+ "w": "293",
+ "measuredW": "206",
+ "measuredH": "26",
+ "x": "525",
+ "y": "1800",
+ "properties": {
+ "bold": "true",
+ "size": "18",
+ "text": "CSS 框架（Framework）"
+ }
+ },
+ {
+ "ID": "293",
+ "typeID": "Label",
+ "zOrder": "291",
+ "measuredW": "340",
+ "measuredH": "25",
+ "x": "526",
+ "y": "1828",
+ "properties": {
+ "size": "17",
+ "text": "你其實真的不需要它們，但它們還是不錯的。"
+ }
+ },
+ {
+ "ID": "294",
+ "typeID": "TextInput",
+ "zOrder": "292",
+ "w": "149",
+ "measuredW": "92",
+ "measuredH": "32",
+ "x": "1071",
+ "y": "1775",
+ "properties": {
+ "align": "center",
+ "color": "16776960",
+ "size": "18",
+ "text": "Bootstrap"
+ }
+ },
+ {
+ "ID": "295",
+ "typeID": "TextInput",
+ "zOrder": "293",
+ "w": "149",
+ "measuredW": "145",
+ "measuredH": "32",
+ "x": "1071",
+ "y": "1812",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "Materialize CSS"
+ }
+ },
+ {
+ "ID": "296",
+ "typeID": "TextInput",
+ "zOrder": "294",
+ "w": "150",
+ "measuredW": "64",
+ "measuredH": "32",
+ "x": "1070",
+ "y": "1848",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "Bulma"
+ }
+ },
+ {
+ "ID": "297",
+ "typeID": "TextArea",
+ "zOrder": "295",
+ "w": "739",
+ "h": "105",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "480",
+ "y": "1885",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "298",
+ "typeID": "Icon",
+ "zOrder": "296",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "494",
+ "y": "1900",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "299",
+ "typeID": "Label",
+ "zOrder": "297",
+ "w": "16",
+ "measuredW": "11",
+ "measuredH": "22",
+ "x": "499",
+ "y": "1902",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "size": "14",
+ "text": "11"
+ }
+ },
+ {
+ "ID": "300",
+ "typeID": "Label",
+ "zOrder": "298",
+ "w": "293",
+ "measuredW": "258",
+ "measuredH": "26",
+ "x": "525",
+ "y": "1899",
+ "properties": {
+ "bold": "true",
+ "size": "18",
+ "text": "CSS 架構規範（Architecture）"
+ }
+ },
+ {
+ "ID": "301",
+ "typeID": "Label",
+ "zOrder": "299",
+ "measuredW": "431",
+ "measuredH": "25",
+ "x": "526",
+ "y": "1927",
+ "properties": {
+ "size": "17",
+ "text": "有很多方法可以更好的建構 CSS，並且讓它更容易維護。"
+ }
+ },
+ {
+ "ID": "302",
+ "typeID": "Label",
+ "zOrder": "300",
+ "measuredW": "480",
+ "measuredH": "25",
+ "x": "527",
+ "y": "1952",
+ "properties": {
+ "size": "17",
+ "text": "你應該要瞭解它們之間的差異 –– 我發現自己更喜歡使用 BEM。"
+ }
+ },
+ {
+ "ID": "303",
+ "typeID": "TextInput",
+ "zOrder": "301",
+ "w": "162",
+ "measuredW": "88",
+ "measuredH": "32",
+ "x": "158",
+ "y": "1864",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "SMACSS"
+ }
+ },
+ {
+ "ID": "304",
+ "typeID": "TextInput",
+ "zOrder": "302",
+ "w": "162",
+ "measuredW": "94",
+ "measuredH": "32",
+ "x": "158",
+ "y": "1901",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "SUITCSS"
+ }
+ },
+ {
+ "ID": "305",
+ "typeID": "TextInput",
+ "zOrder": "303",
+ "w": "162",
+ "measuredW": "69",
+ "measuredH": "32",
+ "x": "159",
+ "y": "1937",
+ "properties": {
+ "align": "center",
+ "color": "16770457",
+ "size": "18",
+ "text": "Atomic"
+ }
+ },
+ {
+ "ID": "306",
+ "typeID": "TextArea",
+ "zOrder": "304",
+ "w": "739",
+ "h": "106",
+ "measuredW": "200",
+ "measuredH": "140",
+ "x": "544",
+ "y": "3623",
+ "properties": {
+ "color": "16776960"
+ }
+ },
+ {
+ "ID": "307",
+ "typeID": "Icon",
+ "zOrder": "305",
+ "measuredW": "24",
+ "measuredH": "24",
+ "x": "558",
+ "y": "3637",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "circle",
+ "size": "small"
+ }
+ }
+ },
+ {
+ "ID": "308",
+ "typeID": "Label",
+ "zOrder": "306",
+ "w": "16",
+ "measuredW": "14",
+ "measuredH": "22",
+ "x": "563",
+ "y": "3639",
+ "properties": {
+ "bold": "true",
+ "color": "16777215",
+ "size": "14",
+ "text": "18"
+ }
+ },
+ {
+ "ID": "309",
+ "typeID": "Label",
+ "zOrder": "307",
+ "w": "391",
+ "measuredW": "198",
+ "measuredH": "26",
+ "x": "589",
+ "y": "3636",
+ "properties": {
+ "bold": "true",
+ "size": "18",
+ "text": "所有上面沒有提到的事情"
+ }
+ },
+ {
+ "ID": "310",
+ "typeID": "Label",
+ "zOrder": "308",
+ "measuredW": "620",
+ "measuredH": "25",
+ "x": "590",
+ "y": "3663",
+ "properties": {
+ "size": "17",
+ "text": "Canvas、HTML-5 API、SVG、sourcemap、functional programming、TC39 等。"
+ }
+ },
+ {
+ "ID": "311",
+ "typeID": "Label",
+ "zOrder": "309",
+ "w": "512",
+ "measuredW": "322",
+ "measuredH": "25",
+ "x": "885",
+ "y": "2632",
+ "properties": {
+ "bold": "true",
+ "size": "17",
+ "text": "重要 –– 不要盲目跟風，比較和理解它們！"
+ }
+ },
+ {
+ "ID": "313",
+ "typeID": "Label",
+ "zOrder": "1",
+ "measuredW": "294",
+ "measuredH": "25",
+ "x": "959",
+ "y": "75",
+ "properties": {
+ "bold": "true",
+ "color": "10027263",
+ "size": "17",
+ "text": "kamranahmedse/developer-roadmap"
+ }
+ },
+ {
+ "ID": "314",
+ "typeID": "Icon",
+ "zOrder": "310",
+ "measuredW": "32",
+ "measuredH": "32",
+ "x": "920",
+ "y": "135",
+ "properties": {
+ "color": "10027263",
+ "icon": {
+ "ID": "twitter",
+ "size": "medium"
+ }
+ }
+ },
+ {
+ "ID": "315",
+ "typeID": "Label",
+ "zOrder": "0",
+ "measuredW": "133",
+ "measuredH": "25",
+ "x": "960",
+ "y": "127",
+ "properties": {
+ "bold": "true",
+ "color": "10027263",
+ "size": "17",
+ "text": "kamranahmedse"
+ }
+ },
+ {
+ "ID": "316",
+ "typeID": "Label",
+ "zOrder": "311",
+ "measuredW": "440",
+ "measuredH": "25",
+ "x": "959",
+ "y": "96",
+ "properties": {
+ "bold": "true",
+ "color": "10027263",
+ "size": "17",
+ "text": "goodjack/developer-roadmap-chinese（台灣正體中文）"
+ }
+ },
+ {
+ "ID": "317",
+ "typeID": "Label",
+ "zOrder": "312",
+ "measuredW": "246",
+ "measuredH": "25",
+ "x": "960",
+ "y": "148",
+ "properties": {
+ "bold": "true",
+ "color": "10027263",
+ "size": "17",
+ "text": "littlegoodjack（台灣正體中文）"
+ }
+ },
+ {
+ "ID": "318",
+ "typeID": "Paragraph",
+ "zOrder": "313",
+ "w": "129",
+ "h": "19",
+ "measuredW": "275",
+ "measuredH": "80",
+ "x": "347",
+ "y": "435",
+ "properties": {
+ "text": "*譯註：又譯為回應式"
+ }
+ },
+ {
+ "ID": "319",
+ "typeID": "Label",
+ "zOrder": "314",
+ "measuredW": "119",
+ "measuredH": "25",
+ "x": "590",
+ "y": "3688",
+ "properties": {
+ "size": "17",
+ "text": "去弄懂它們吧！"
+ }
+ }
+ ]
+ },
+ "mockupH": "3790",
+ "mockupW": "1453",
+ "measuredW": "1453",
+ "measuredH": "3837",
+ "version": "1.0"
+ }
+}
\ No newline at end of file
diff --git a/readme.md b/readme.md
index c9ceab0f8..f8cd3d8ae 100644
--- a/readme.md
+++ b/readme.md
@@ -20,9 +20,8 @@
## 🎨 前端 Frontend 路線圖
-> 譯註：尚未翻譯完成...
-
+
## 👽 後端 Back-end 路線圖