{ "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" } }