Category: javascript

I was asking How to do Unicode aware fold-case to lower case in JavaScript?. And the comment suggest to use CaseFolding.txt file and the implementatio is trivial, but I have a problem with the implementation.

I create this code in Scheme (LIPS Scheme dialect) to create a mapping from lower case to upper case:

#!/usr/bin/env lips

(define fs (require "node:fs/promises"))

(define (get-data)
  (let ((path (string-append __dirname "/../assets/CaseFolding.txt")))
    (fs.readFile path "utf8")))

(define (get-mapping data)
  (--> data
       (split "n")
       (filter (lambda (line)
                  (and (not (string=? line ""))
                       (null? (line.match #/^#/))
                       (not (null? (line.match #/; C/))))))
       (map (lambda (line)
              (let* ((parts (line.split "; "))
                     (small (not (null? (line.match #/SMALL/))))
                     (upper (string->number (. parts (if small 2 0)) 16))
                     (lower (string->number (. parts (if small 0 2)) 16)))
                (string-append """ (number->string upper) """  ": " (number->string lower)))))))




(print (string-append "const fold_case_mapping = {"
                      (--> (get-mapping (get-data))
                           (reduce (lambda (acc expr index arr)
                                     (if (zero? index)
                                         (string-append "n    " expr ", ")
                                         (let ((suffix (if (= (- arr.length 1) index) "" ", ")))
                                           (if (zero? (remainder index 4))
                                               (string-append acc "n    " expr suffix)
                                               (string-append acc expr suffix)))))
                                         ""))
                      "n}"))"))

This is the output of the script

const fold_case_mapping = {
    "65": 97, "66": 98, "67": 99, "68": 100,
    "69": 101, "70": 102, "71": 103, "72": 104,
    "73": 105, "74": 106, "75": 107, "76": 108,
    "77": 109, "78": 110, "79": 111, "80": 112,
    "81": 113, "82": 114, "83": 115, "84": 116,
    "85": 117, "86": 118, "87": 119, "88": 120,
    "89": 121, "90": 122, "181": 956, "192": 224,
    "193": 225, "194": 226, "195": 227, "196": 228,
    "197": 229, "198": 230, "199": 231, "200": 232,
    "201": 233, "202": 234, "203": 235, "204": 236,
    "205": 237, "206": 238, "207": 239, "208": 240,
    "209": 241, "210": 242, "211": 243, "212": 244,
    "213": 245, "214": 246, "216": 248, "217": 249,
    "218": 250, "219": 251, "220": 252, "221": 253,
    "222": 254, "256": 257, "258": 259, "260": 261,
    "262": 263, "264": 265, "266": 267, "268": 269,
    "270": 271, "272": 273, "274": 275, "276": 277,
    "278": 279, "280": 281, "282": 283, "284": 285,
    "286": 287, "288": 289, "290": 291, "292": 293,
    "294": 295, "296": 297, "298": 299, "300": 301,
    "302": 303, "306": 307, "308": 309, "310": 311,
    "313": 314, "315": 316, "317": 318, "319": 320,
    "321": 322, "323": 324, "325": 326, "327": 328,
    "330": 331, "332": 333, "334": 335, "336": 337,
    "338": 339, "340": 341, "342": 343, "344": 345,
    "346": 347, "348": 349, "350": 351, "352": 353,
    "354": 355, "356": 357, "358": 359, "360": 361,
    "362": 363, "364": 365, "366": 367, "368": 369,
    "370": 371, "372": 373, "374": 375, "376": 255,
    "377": 378, "379": 380, "381": 382, "115": 383,
    "385": 595, "386": 387, "388": 389, "390": 596,
    "391": 392, "393": 598, "394": 599, "395": 396,
    "398": 477, "399": 601, "400": 603, "401": 402,
    "403": 608, "404": 611, "406": 617, "407": 616,
    "408": 409, "412": 623, "413": 626, "415": 629,
    "416": 417, "418": 419, "420": 421, "422": 640,
    "423": 424, "425": 643, "428": 429, "430": 648,
    "431": 432, "433": 650, "434": 651, "435": 436,
    "437": 438, "439": 658, "440": 441, "444": 445,
    "452": 454, "454": 453, "455": 457, "457": 456,
    "458": 460, "460": 459, "461": 462, "463": 464,
    "465": 466, "467": 468, "469": 470, "471": 472,
    "473": 474, "475": 476, "478": 479, "480": 481,
    "482": 483, "484": 485, "486": 487, "488": 489,
    "490": 491, "492": 493, "494": 495, "497": 499,
    "499": 498, "500": 501, "502": 405, "503": 447,
    "504": 505, "506": 507, "508": 509, "510": 511,
    "512": 513, "514": 515, "516": 517, "518": 519,
    "520": 521, "522": 523, "524": 525, "526": 527,
    "528": 529, "530": 531, "532": 533, "534": 535,
    "536": 537, "538": 539, "540": 541, "542": 543,
    "544": 414, "546": 547, "548": 549, "550": 551,
    "552": 553, "554": 555, "556": 557, "558": 559,
    "560": 561, "562": 563, "570": 11365, "571": 572,
    "573": 410, "574": 11366, "577": 578, "579": 384,
    "580": 649, "581": 652, "582": 583, "584": 585,
    "587": 586, "588": 589, "590": 591, "837": 953,
    "880": 881, "882": 883, "886": 887, "895": 1011,
    "902": 940, "904": 941, "905": 942, "906": 943,
    "908": 972, "910": 973, "911": 974, "913": 945,
    "914": 946, "915": 947, "916": 948, "917": 949,
    "918": 950, "919": 951, "920": 952, "921": 953,
    "922": 954, "923": 955, "924": 956, "925": 957,
    "926": 958, "927": 959, "928": 960, "929": 961,
    "931": 963, "932": 964, "933": 965, "934": 966,
    "935": 967, "936": 968, "937": 969, "938": 970,
    "939": 971, "963": 962, "975": 983, "976": 946,
    "977": 952, "981": 966, "982": 960, "984": 985,
    "986": 987, "988": 989, "990": 991, "992": 993,
    "994": 995, "996": 997, "998": 999, "1000": 1001,
    "1002": 1003, "1004": 1005, "1006": 1007, "1008": 954,
    "1009": 961, "1012": 952, "1013": 949, "1015": 1016,
    "1017": 1010, "1018": 1019, "1021": 891, "1022": 892,
    "1023": 893, "1024": 1104, "1025": 1105, "1026": 1106,
    "1027": 1107, "1028": 1108, "1029": 1109, "1030": 1110,
    "1031": 1111, "1032": 1112, "1033": 1113, "1034": 1114,
    "1035": 1115, "1036": 1116, "1037": 1117, "1038": 1118,
    "1039": 1119, "1040": 1072, "1041": 1073, "1042": 1074,
    "1043": 1075, "1044": 1076, "1045": 1077, "1046": 1078,
    "1047": 1079, "1048": 1080, "1049": 1081, "1050": 1082,
    "1051": 1083, "1052": 1084, "1053": 1085, "1054": 1086,
    "1055": 1087, "1056": 1088, "1057": 1089, "1058": 1090,
    "1059": 1091, "1060": 1092, "1061": 1093, "1062": 1094,
    "1063": 1095, "1064": 1096, "1065": 1097, "1066": 1098,
    "1067": 1099, "1068": 1100, "1069": 1101, "1070": 1102,
    "1071": 1103, "1120": 1121, "1122": 1123, "1124": 1125,
    "1126": 1127, "1128": 1129, "1130": 1131, "1132": 1133,
    "1134": 1135, "1136": 1137, "1138": 1139, "1140": 1141,
    "1142": 1143, "1144": 1145, "1146": 1147, "1148": 1149,
    "1150": 1151, "1152": 1153, "1162": 1163, "1164": 1165,
    "1166": 1167, "1168": 1169, "1170": 1171, "1172": 1173,
    "1174": 1175, "1176": 1177, "1178": 1179, "1180": 1181,
    "1182": 1183, "1184": 1185, "1186": 1187, "1188": 1189,
    "1190": 1191, "1192": 1193, "1194": 1195, "1196": 1197,
    "1198": 1199, "1200": 1201, "1202": 1203, "1204": 1205,
    "1206": 1207, "1208": 1209, "1210": 1211, "1212": 1213,
    "1214": 1215, "1216": 1231, "1217": 1218, "1219": 1220,
    "1221": 1222, "1223": 1224, "1225": 1226, "1227": 1228,
    "1229": 1230, "1232": 1233, "1234": 1235, "1236": 1237,
    "1238": 1239, "1240": 1241, "1242": 1243, "1244": 1245,
    "1246": 1247, "1248": 1249, "1250": 1251, "1252": 1253,
    "1254": 1255, "1256": 1257, "1258": 1259, "1260": 1261,
    "1262": 1263, "1264": 1265, "1266": 1267, "1268": 1269,
    "1270": 1271, "1272": 1273, "1274": 1275, "1276": 1277,
    "1278": 1279, "1280": 1281, "1282": 1283, "1284": 1285,
    "1286": 1287, "1288": 1289, "1290": 1291, "1292": 1293,
    "1294": 1295, "1296": 1297, "1298": 1299, "1300": 1301,
    "1302": 1303, "1304": 1305, "1306": 1307, "1308": 1309,
    "1310": 1311, "1312": 1313, "1314": 1315, "1316": 1317,
    "1318": 1319, "1320": 1321, "1322": 1323, "1324": 1325,
    "1326": 1327, "1329": 1377, "1330": 1378, "1331": 1379,
    "1332": 1380, "1333": 1381, "1334": 1382, "1335": 1383,
    "1336": 1384, "1337": 1385, "1338": 1386, "1339": 1387,
    "1340": 1388, "1341": 1389, "1342": 1390, "1343": 1391,
    "1344": 1392, "1345": 1393, "1346": 1394, "1347": 1395,
    "1348": 1396, "1349": 1397, "1350": 1398, "1351": 1399,
    "1352": 1400, "1353": 1401, "1354": 1402, "1355": 1403,
    "1356": 1404, "1357": 1405, "1358": 1406, "1359": 1407,
    "1360": 1408, "1361": 1409, "1362": 1410, "1363": 1411,
    "1364": 1412, "1365": 1413, "1366": 1414, "4256": 11520,
    "4257": 11521, "4258": 11522, "4259": 11523, "4260": 11524,
    "4261": 11525, "4262": 11526, "4263": 11527, "4264": 11528,
    "4265": 11529, "4266": 11530, "4267": 11531, "4268": 11532,
    "4269": 11533, "4270": 11534, "4271": 11535, "4272": 11536,
    "4273": 11537, "4274": 11538, "4275": 11539, "4276": 11540,
    "4277": 11541, "4278": 11542, "4279": 11543, "4280": 11544,
    "4281": 11545, "4282": 11546, "4283": 11547, "4284": 11548,
    "4285": 11549, "4286": 11550, "4287": 11551, "4288": 11552,
    "4289": 11553, "4290": 11554, "4291": 11555, "4292": 11556,
    "4293": 11557, "4295": 11559, "4301": 11565, "5104": 5112,
    "5105": 5113, "5106": 5114, "5107": 5115, "5108": 5116,
    "5109": 5117, "1074": 7296, "1076": 7297, "1086": 7298,
    "1089": 7299, "1090": 7300, "1090": 7301, "1098": 7302,
    "1123": 7303, "42571": 7304, "7312": 4304, "7313": 4305,
    "7314": 4306, "7315": 4307, "7316": 4308, "7317": 4309,
    "7318": 4310, "7319": 4311, "7320": 4312, "7321": 4313,
    "7322": 4314, "7323": 4315, "7324": 4316, "7325": 4317,
    "7326": 4318, "7327": 4319, "7328": 4320, "7329": 4321,
    "7330": 4322, "7331": 4323, "7332": 4324, "7333": 4325,
    "7334": 4326, "7335": 4327, "7336": 4328, "7337": 4329,
    "7338": 4330, "7339": 4331, "7340": 4332, "7341": 4333,
    "7342": 4334, "7343": 4335, "7344": 4336, "7345": 4337,
    "7346": 4338, "7347": 4339, "7348": 4340, "7349": 4341,
    "7350": 4342, "7351": 4343, "7352": 4344, "7353": 4345,
    "7354": 4346, "7357": 4349, "7358": 4350, "7359": 4351,
    "7680": 7681, "7682": 7683, "7684": 7685, "7686": 7687,
    "7688": 7689, "7690": 7691, "7692": 7693, "7694": 7695,
    "7696": 7697, "7698": 7699, "7700": 7701, "7702": 7703,
    "7704": 7705, "7706": 7707, "7708": 7709, "7710": 7711,
    "7712": 7713, "7714": 7715, "7716": 7717, "7718": 7719,
    "7720": 7721, "7722": 7723, "7724": 7725, "7726": 7727,
    "7728": 7729, "7730": 7731, "7732": 7733, "7734": 7735,
    "7736": 7737, "7738": 7739, "7740": 7741, "7742": 7743,
    "7744": 7745, "7746": 7747, "7748": 7749, "7750": 7751,
    "7752": 7753, "7754": 7755, "7756": 7757, "7758": 7759,
    "7760": 7761, "7762": 7763, "7764": 7765, "7766": 7767,
    "7768": 7769, "7770": 7771, "7772": 7773, "7774": 7775,
    "7776": 7777, "7778": 7779, "7780": 7781, "7782": 7783,
    "7784": 7785, "7786": 7787, "7788": 7789, "7790": 7791,
    "7792": 7793, "7794": 7795, "7796": 7797, "7798": 7799,
    "7800": 7801, "7802": 7803, "7804": 7805, "7806": 7807,
    "7808": 7809, "7810": 7811, "7812": 7813, "7814": 7815,
    "7816": 7817, "7818": 7819, "7820": 7821, "7822": 7823,
    "7824": 7825, "7826": 7827, "7828": 7829, "7777": 7835,
    "7840": 7841, "7842": 7843, "7844": 7845, "7846": 7847,
    "7848": 7849, "7850": 7851, "7852": 7853, "7854": 7855,
    "7856": 7857, "7858": 7859, "7860": 7861, "7862": 7863,
    "7864": 7865, "7866": 7867, "7868": 7869, "7870": 7871,
    "7872": 7873, "7874": 7875, "7876": 7877, "7878": 7879,
    "7880": 7881, "7882": 7883, "7884": 7885, "7886": 7887,
    "7888": 7889, "7890": 7891, "7892": 7893, "7894": 7895,
    "7896": 7897, "7898": 7899, "7900": 7901, "7902": 7903,
    "7904": 7905, "7906": 7907, "7908": 7909, "7910": 7911,
    "7912": 7913, "7914": 7915, "7916": 7917, "7918": 7919,
    "7920": 7921, "7922": 7923, "7924": 7925, "7926": 7927,
    "7928": 7929, "7930": 7931, "7932": 7933, "7934": 7935,
    "7944": 7936, "7945": 7937, "7946": 7938, "7947": 7939,
    "7948": 7940, "7949": 7941, "7950": 7942, "7951": 7943,
    "7960": 7952, "7961": 7953, "7962": 7954, "7963": 7955,
    "7964": 7956, "7965": 7957, "7976": 7968, "7977": 7969,
    "7978": 7970, "7979": 7971, "7980": 7972, "7981": 7973,
    "7982": 7974, "7983": 7975, "7992": 7984, "7993": 7985,
    "7994": 7986, "7995": 7987, "7996": 7988, "7997": 7989,
    "7998": 7990, "7999": 7991, "8008": 8000, "8009": 8001,
    "8010": 8002, "8011": 8003, "8012": 8004, "8013": 8005,
    "8025": 8017, "8027": 8019, "8029": 8021, "8031": 8023,
    "8040": 8032, "8041": 8033, "8042": 8034, "8043": 8035,
    "8044": 8036, "8045": 8037, "8046": 8038, "8047": 8039,
    "8120": 8112, "8121": 8113, "8122": 8048, "8123": 8049,
    "8126": 953, "8136": 8050, "8137": 8051, "8138": 8052,
    "8139": 8053, "8152": 8144, "8153": 8145, "8154": 8054,
    "8155": 8055, "8168": 8160, "8169": 8161, "8170": 8058,
    "8171": 8059, "8172": 8165, "8184": 8056, "8185": 8057,
    "8186": 8060, "8187": 8061, "8486": 969, "8490": 107,
    "8491": 229, "8498": 8526, "8544": 8560, "8545": 8561,
    "8546": 8562, "8547": 8563, "8548": 8564, "8549": 8565,
    "8550": 8566, "8551": 8567, "8552": 8568, "8553": 8569,
    "8554": 8570, "8555": 8571, "8556": 8572, "8557": 8573,
    "8558": 8574, "8559": 8575, "8579": 8580, "9398": 9424,
    "9399": 9425, "9400": 9426, "9401": 9427, "9402": 9428,
    "9403": 9429, "9404": 9430, "9405": 9431, "9406": 9432,
    "9407": 9433, "9408": 9434, "9409": 9435, "9410": 9436,
    "9411": 9437, "9412": 9438, "9413": 9439, "9414": 9440,
    "9415": 9441, "9416": 9442, "9417": 9443, "9418": 9444,
    "9419": 9445, "9420": 9446, "9421": 9447, "9422": 9448,
    "9423": 9449, "11264": 11312, "11265": 11313, "11266": 11314,
    "11267": 11315, "11268": 11316, "11269": 11317, "11270": 11318,
    "11271": 11319, "11272": 11320, "11273": 11321, "11274": 11322,
    "11275": 11323, "11276": 11324, "11277": 11325, "11278": 11326,
    "11279": 11327, "11280": 11328, "11281": 11329, "11282": 11330,
    "11283": 11331, "11284": 11332, "11285": 11333, "11286": 11334,
    "11287": 11335, "11288": 11336, "11289": 11337, "11290": 11338,
    "11291": 11339, "11292": 11340, "11293": 11341, "11294": 11342,
    "11295": 11343, "11296": 11344, "11297": 11345, "11298": 11346,
    "11299": 11347, "11348": 11300, "11349": 11301, "11302": 11350,
    "11351": 11303, "11304": 11352, "11305": 11353, "11306": 11354,
    "11307": 11355, "11308": 11356, "11309": 11357, "11310": 11358,
    "11311": 11359, "11360": 11361, "11362": 619, "11363": 7549,
    "11364": 637, "11367": 11368, "11369": 11370, "11371": 11372,
    "11373": 593, "11374": 625, "11375": 592, "11376": 594,
    "11378": 11379, "11381": 11382, "11390": 575, "11391": 576,
    "11392": 11393, "11394": 11395, "11396": 11397, "11398": 11399,
    "11400": 11401, "11402": 11403, "11404": 11405, "11406": 11407,
    "11408": 11409, "11410": 11411, "11412": 11413, "11414": 11415,
    "11416": 11417, "11418": 11419, "11420": 11421, "11422": 11423,
    "11424": 11425, "11426": 11427, "11428": 11429, "11430": 11431,
    "11432": 11433, "11434": 11435, "11436": 11437, "11438": 11439,
    "11440": 11441, "11442": 11443, "11444": 11445, "11446": 11447,
    "11448": 11449, "11450": 11451, "11452": 11453, "11454": 11455,
    "11456": 11457, "11458": 11459, "11460": 11461, "11462": 11463,
    "11464": 11465, "11466": 11467, "11468": 11469, "11470": 11471,
    "11472": 11473, "11474": 11475, "11476": 11477, "11478": 11479,
    "11480": 11481, "11482": 11483, "11484": 11485, "11486": 11487,
    "11488": 11489, "11490": 11491, "11499": 11500, "11501": 11502,
    "11506": 11507, "42560": 42561, "42562": 42563, "42564": 42565,
    "42566": 42567, "42568": 42569, "42570": 42571, "42572": 42573,
    "42574": 42575, "42576": 42577, "42578": 42579, "42580": 42581,
    "42582": 42583, "42584": 42585, "42586": 42587, "42588": 42589,
    "42590": 42591, "42592": 42593, "42594": 42595, "42596": 42597,
    "42598": 42599, "42600": 42601, "42602": 42603, "42604": 42605,
    "42624": 42625, "42626": 42627, "42628": 42629, "42630": 42631,
    "42632": 42633, "42634": 42635, "42636": 42637, "42638": 42639,
    "42640": 42641, "42642": 42643, "42644": 42645, "42646": 42647,
    "42648": 42649, "42650": 42651, "42786": 42787, "42788": 42789,
    "42790": 42791, "42792": 42793, "42794": 42795, "42796": 42797,
    "42798": 42799, "42802": 42803, "42804": 42805, "42806": 42807,
    "42808": 42809, "42810": 42811, "42812": 42813, "42814": 42815,
    "42816": 42817, "42818": 42819, "42820": 42821, "42822": 42823,
    "42824": 42825, "42826": 42827, "42828": 42829, "42830": 42831,
    "42832": 42833, "42834": 42835, "42836": 42837, "42838": 42839,
    "42840": 42841, "42842": 42843, "42844": 42845, "42846": 42847,
    "42848": 42849, "42850": 42851, "42852": 42853, "42854": 42855,
    "42856": 42857, "42858": 42859, "42860": 42861, "42862": 42863,
    "42873": 42874, "42875": 42876, "42877": 7545, "42878": 42879,
    "42880": 42881, "42882": 42883, "42884": 42885, "42886": 42887,
    "42891": 42892, "42893": 613, "42896": 42897, "42898": 42899,
    "42902": 42903, "42904": 42905, "42906": 42907, "42908": 42909,
    "42910": 42911, "42912": 42913, "42914": 42915, "42916": 42917,
    "42918": 42919, "42920": 42921, "42922": 614, "42923": 604,
    "42924": 609, "42925": 620, "618": 42926, "42928": 670,
    "42929": 647, "42930": 669, "42931": 43859, "42932": 42933,
    "42934": 42935, "42936": 42937, "42938": 42939, "42940": 42941,
    "42942": 42943, "42944": 42945, "42946": 42947, "42948": 42900,
    "42949": 642, "42950": 7566, "42951": 42952, "42953": 42954,
    "42960": 42961, "42966": 42967, "42968": 42969, "42997": 42998,
    "5024": 43888, "5025": 43889, "5026": 43890, "5027": 43891,
    "5028": 43892, "5029": 43893, "5030": 43894, "5031": 43895,
    "5032": 43896, "5033": 43897, "5034": 43898, "5035": 43899,
    "5036": 43900, "5037": 43901, "5038": 43902, "5039": 43903,
    "5040": 43904, "5041": 43905, "5042": 43906, "5043": 43907,
    "5044": 43908, "5045": 43909, "5046": 43910, "5047": 43911,
    "5048": 43912, "5049": 43913, "5050": 43914, "5051": 43915,
    "5052": 43916, "5053": 43917, "5054": 43918, "5055": 43919,
    "5056": 43920, "5057": 43921, "5058": 43922, "5059": 43923,
    "5060": 43924, "5061": 43925, "5062": 43926, "5063": 43927,
    "5064": 43928, "5065": 43929, "5066": 43930, "5067": 43931,
    "5068": 43932, "5069": 43933, "5070": 43934, "5071": 43935,
    "5072": 43936, "5073": 43937, "5074": 43938, "5075": 43939,
    "5076": 43940, "5077": 43941, "5078": 43942, "5079": 43943,
    "5080": 43944, "5081": 43945, "5082": 43946, "5083": 43947,
    "5084": 43948, "5085": 43949, "5086": 43950, "5087": 43951,
    "5088": 43952, "5089": 43953, "5090": 43954, "5091": 43955,
    "5092": 43956, "5093": 43957, "5094": 43958, "5095": 43959,
    "5096": 43960, "5097": 43961, "5098": 43962, "5099": 43963,
    "5100": 43964, "5101": 43965, "5102": 43966, "5103": 43967,
    "65313": 65345, "65314": 65346, "65315": 65347, "65316": 65348,
    "65317": 65349, "65318": 65350, "65319": 65351, "65320": 65352,
    "65321": 65353, "65322": 65354, "65323": 65355, "65324": 65356,
    "65325": 65357, "65326": 65358, "65327": 65359, "65328": 65360,
    "65329": 65361, "65330": 65362, "65331": 65363, "65332": 65364,
    "65333": 65365, "65334": 65366, "65335": 65367, "65336": 65368,
    "65337": 65369, "65338": 65370, "66560": 66600, "66561": 66601,
    "66562": 66602, "66563": 66603, "66564": 66604, "66565": 66605,
    "66566": 66606, "66567": 66607, "66568": 66608, "66569": 66609,
    "66570": 66610, "66571": 66611, "66572": 66612, "66573": 66613,
    "66574": 66614, "66575": 66615, "66576": 66616, "66577": 66617,
    "66578": 66618, "66579": 66619, "66580": 66620, "66581": 66621,
    "66582": 66622, "66583": 66623, "66584": 66624, "66585": 66625,
    "66586": 66626, "66587": 66627, "66588": 66628, "66589": 66629,
    "66590": 66630, "66591": 66631, "66592": 66632, "66593": 66633,
    "66594": 66634, "66595": 66635, "66596": 66636, "66597": 66637,
    "66598": 66638, "66599": 66639, "66736": 66776, "66737": 66777,
    "66738": 66778, "66739": 66779, "66740": 66780, "66741": 66781,
    "66742": 66782, "66743": 66783, "66744": 66784, "66745": 66785,
    "66746": 66786, "66747": 66787, "66748": 66788, "66749": 66789,
    "66750": 66790, "66751": 66791, "66752": 66792, "66753": 66793,
    "66754": 66794, "66755": 66795, "66756": 66796, "66757": 66797,
    "66758": 66798, "66759": 66799, "66760": 66800, "66761": 66801,
    "66762": 66802, "66763": 66803, "66764": 66804, "66765": 66805,
    "66766": 66806, "66767": 66807, "66768": 66808, "66769": 66809,
    "66770": 66810, "66771": 66811, "66928": 66967, "66929": 66968,
    "66930": 66969, "66931": 66970, "66932": 66971, "66933": 66972,
    "66934": 66973, "66935": 66974, "66936": 66975, "66937": 66976,
    "66938": 66977, "66940": 66979, "66941": 66980, "66942": 66981,
    "66943": 66982, "66944": 66983, "66945": 66984, "66946": 66985,
    "66947": 66986, "66948": 66987, "66949": 66988, "66950": 66989,
    "66951": 66990, "66952": 66991, "66953": 66992, "66954": 66993,
    "66956": 66995, "66957": 66996, "66958": 66997, "66959": 66998,
    "66960": 66999, "66961": 67000, "66962": 67001, "66964": 67003,
    "66965": 67004, "68736": 68800, "68737": 68801, "68738": 68802,
    "68739": 68803, "68740": 68804, "68741": 68805, "68742": 68806,
    "68743": 68807, "68744": 68808, "68745": 68809, "68746": 68810,
    "68747": 68811, "68748": 68812, "68749": 68813, "68750": 68814,
    "68751": 68815, "68752": 68816, "68753": 68817, "68754": 68818,
    "68755": 68819, "68756": 68820, "68757": 68821, "68758": 68822,
    "68759": 68823, "68760": 68824, "68761": 68825, "68762": 68826,
    "68763": 68827, "68764": 68828, "68765": 68829, "68766": 68830,
    "68767": 68831, "68768": 68832, "68769": 68833, "68770": 68834,
    "68771": 68835, "68772": 68836, "68773": 68837, "68774": 68838,
    "68775": 68839, "68776": 68840, "68777": 68841, "68778": 68842,
    "68779": 68843, "68780": 68844, "68781": 68845, "68782": 68846,
    "68783": 68847, "68784": 68848, "68785": 68849, "68786": 68850,
    "71840": 71872, "71841": 71873, "71842": 71874, "71843": 71875,
    "71844": 71876, "71845": 71877, "71846": 71878, "71847": 71879,
    "71848": 71880, "71849": 71881, "71850": 71882, "71851": 71883,
    "71852": 71884, "71853": 71885, "71854": 71886, "71855": 71887,
    "71856": 71888, "71857": 71889, "71858": 71890, "71859": 71891,
    "71860": 71892, "71861": 71893, "71862": 71894, "71863": 71895,
    "71864": 71896, "71865": 71897, "71866": 71898, "71867": 71899,
    "71868": 71900, "71869": 71901, "71870": 71902, "71871": 71903,
    "93760": 93792, "93761": 93793, "93762": 93794, "93763": 93795,
    "93764": 93796, "93765": 93797, "93766": 93798, "93767": 93799,
    "93768": 93800, "93769": 93801, "93770": 93802, "93771": 93803,
    "93772": 93804, "93773": 93805, "93774": 93806, "93775": 93807,
    "93776": 93808, "93777": 93809, "93778": 93810, "93779": 93811,
    "93780": 93812, "93781": 93813, "93782": 93814, "93783": 93815,
    "93784": 93816, "93785": 93817, "93786": 93818, "93787": 93819,
    "93788": 93820, "93789": 93821, "93790": 93822, "93791": 93823,
    "125184": 125218, "125185": 125219, "125186": 125220, "125187": 125221,
    "125188": 125222, "125189": 125223, "125190": 125224, "125191": 125225,
    "125192": 125226, "125193": 125227, "125194": 125228, "125195": 125229,
    "125196": 125230, "125197": 125231, "125198": 125232, "125199": 125233,
    "125200": 125234, "125201": 125235, "125202": 125236, "125203": 125237,
    "125204": 125238, "125205": 125239, "125206": 125240, "125207": 125241,
    "125208": 125242, "125209": 125243, "125210": 125244, "125211": 125245,
    "125212": 125246, "125213": 125247, "125214": 125248, "125215": 125249,
    "125216": 125250, "125217": 125251
};

I use Scheme because the first implementation was generating Scheme code instead of JavaScript.

But the problem is that this JavaScript code:

function foldcase_string(string) {
    string = string.valueOf();
    return Array.from(string).map(str => {
        const ord = str.codePointAt(0);
        console.log({ord, str});
        const output = fold_case_mapping[ord];
        if (output) {
            return String.fromCodePoint(output);
        }
        return str;
    }).join('');
}

Return wrong results. As you can see from the scheme code (sorry don’t have JavaScript implementation) I detect if the character is lower case or upper case. Since fold case file don’t have any detection of upper case or lowercase, it’s just case folding (switching of the case from upper to lower and lower to upper).

And the problem is with simple text:

foldcase_string("t.is");

It returns "t.iſ" because the line that is responsible for this:

017F; C; 0073; # LATIN SMALL LETTER LONG S

Description suggest that it’s lower case to upper case, but it’s actually the opposite. The first character is upper case and the lower case is "s". The scheme code just look if the line contains text “SMALL”.

So the question how to properly create foldcase to lowercase with this data? Are there any other files that can be used? I would prefer to use the source file and not derviative implementation that may not be up to date with Unicode.

I’m trying to upload two separate csv files and then do a “join” between the two in javascript. I was able to read both files and assigned them to an object but now I don’t know how to pass both objects to a function for me to combine the data based of the same named column to transform my data.

<form id="categoryform">   
<input type="file" id="projectCsvFileInput" multiple><br><br>
<input type="submit">
</form>

categoryform.addEventListener("submit", function (e) {
 e.preventDefault();

 const projectFile = projectCsvFileInput.files;

 // loop through each file
 for (var i = 0, len = projectFile.length; i < len; i++) {
   const file = projectFile[i];
   const reader = new FileReader();

   var project = {}
   var participants = {}

   reader.onload = (function(f) {
    return function(event) {
      let result = event.target.result;

      // separate out file data into separate obj
      if (result.includes('Project Name')) {
        project = csvToArr(result, ",");
      } else {
        participants = csvToArr(result, ",");
      }
             };
    })(file);

    reader.readAsText(file);
}
});
function csvToArr(stringVal, splitter) {
  const [keys, ...rest] = stringVal
    .trim()
    .split("n")
    .map((item) => item.split(splitter));

  const formedArr = rest.map((item) => {
  const object = {};
  keys.forEach((key, index) => {
      object[key.replace('r','')] = item.at(index).replace('r','').replace('"','').replace('/S','');
   });
   return object;
});
return formedArr;
}

I am new to ASP.net and trying to modify a page where it shows list of data into html. Due to the fact that bindata being enormous, it takes longer to load this page.

When I think of solution to this, I thought of creating a event for each individual button @item.zone, process bindata, and append to the html. SO if I click on one of header tag/button, It would then process bindata and show the data correspond to it. However, since I can not access c# variable from client side, I wasn’t able to do so.

I measured the execution time for the C# code, noticed that the nested forloop is taking most of loading time.

Is there any right? preferable? recommended approach to this issue?

@model ValueDataSet[]
@{
ViewBag.Title = "Bin List View";
Pallet[] ActivePallets = ViewBag.ActivePalletArr;
var bindata = Model.GroupBy(x => new { x.description }).Select(x => new
{
    Zone = x.Key.description,
    Location = x.Select(s => new
    {
        PalletItem = ActivePallets.FirstOrDefault(a => a.GetLocation() == s.key),
        BIN = s.key,
        LOCATION = s.value
    }).Select(s => new
    {
        PalletItem = s.PalletItem,
        Aging = (DateTime.Now - (s.PalletItem?.CreatedOn ?? DateTime.Now)).Days,
        BIN = s.BIN,
        LOCATION = s.LOCATION
    })
}).OrderByDescending(x => x.Zone).ToArray();
List<StagingPallets> StagingPalletList = ViewBag.StagingPalletList;

var widthpercent = (100m / (decimal)bindata.Length).ToString("0.00");
}



@{ var zoneidx = 0;}
@foreach (var item in bindata)
{
    <h5><b onclick="toggledetails(@(zoneidx))" style="cursor:pointer;">@item.Zone (@(item.Location.Where(x => x.PalletItem != null).Count()) / @(item.Location.Count()))</b></h5>
         <div class="zonewidth toggledetail_@zoneidx" style="display:none;">
              @foreach (var bin in item.Location)
              {
                  var order = bin.PalletItem?.ContainerItem?.OrderItem ?? new OrderItem();
                  <div class="binlocation @(bin.Aging > 12 ? "aging2" : bin.Aging > 0 ? "aging1" : "")">
                       @bin.BIN (@bin.Aging)
                       <div>
                             <small>@(bin.PalletItem?.LicensePlate)</small>
                             <small><a href="/order/edit/@order.ItemKey" target="_blank">@order.OrderNumber</a></small>
                       </div>
                 </div>
              }
        </div>
  zoneidx++;
}

I’m working on a project that uses Vue.js and Bootstrap-Vue. Inside a Bootstrap modal, I’ve integrated a Select2 dropdown. I encountered an issue where the modal wouldn’t scroll when the Select2 dropdown was open. I found a partial solution on the Select2 forum (link: https://forums.select2.org/t/scrolling-prevented-on-page/1851/2) that enabled scrolling within the modal while the Select2 dropdown is open, using the following code::

    $(this.$el).on('select2:open', function (e) {
        const evt = "scroll.select2";
        $(e.target).parents().off(evt);
        $(window).off(evt);
    });

With this fix, I can now scroll the modal content with the Select2 dropdown open, which is a significant improvement. However, a new issue has arisen: as I scroll through the modal, the open Select2 dropdown moves along with the scroll, changing its intended position relative to its input field. I’m seeking a way to keep the dropdown anchored to its input field regardless of the modal’s scroll position.

How can I prevent the Select2 dropdown from moving with the scroll inside a Bootstrap modal? Ideally, I’m looking for a solution that allows the dropdown to stay aligned with its corresponding input field, regardless of the modal’s scroll position.

Hello i got a problem when i want to split msg.payload Object into 4 separate payloads.

when i run my function i only got the first

Log1.Log2

function node

//
var payload = msg.payload;

// Create separate messages for each key
var msgAddress = { payload: {} };
var msgUtetemp = { payload: {} };
var msgBorvarde = { payload: {} };
var msgTempElement = { payload: {} };

// Loop through the payload keys and assign them to the appropriate message
for (var key in payload) {
    if (payload.hasOwnProperty(key)) {
        if (key.endsWith('_address')) {
            msgAddress.payload[key] = payload[key];
        } else if (key.endsWith('_utetemp')) {
            msgUtetemp.payload[key] = payload[key];
        } else if (key.endsWith('_borvarde')) {
            msgBorvarde.payload[key] = payload[key];
        } else if (key.endsWith('_tempElement')) {
            msgTempElement.payload[key] = payload[key];
        }
    }
}
// Log the separated payloads
console.log("msgAddress:", msgAddress);
console.log("msgUtetemp:", msgUtetemp);
console.log("msgBorvarde:", msgBorvarde);
console.log("msgTempElement:", msgTempElement);


// Return an array containing the separated payloads
return [msgAddress, msgUtetemp, msgBorvarde, msgTempElement]

but when i run code i only get the first msg.payload “msgAddress:” in the message .
msgAdress

debugIm logging complete msg.object,

Unlike most, I am presently using a JS object to store data used to populate (text) form field values residing on an interactive PDF form. To make this work, the JS object is converted to a JSON string stored inside a hidden (text) form field. The JSON object is parsed and converted to a JS object when the PDF form first opens ready for use. This noted, I am wanting to know if it’s actually necessary to stringify and save the JS object in JSON format to the hidden (text) form field following each and every change made to the data stored in the JS object or is it sufficient to wait until the session ends when the PDF form is closed/saved and no longer in use to stringify and save the JS object to the hidden text form field? Your response to this inquiry is most appreciated. Thank you ahead of time.

Not applicable as the answer to be provided is based on preference and common practice.

This is code obtained from Ant Design.
The content remains the same regardless of which option is chosen. How should I modify the code so that each option displays different content? I’ve tried various approaches, but it didn’t work out well. I want to modify the code so that each option displays different content

import React from 'react';
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
const items1 = ['1', '2', '3'].map((key) => ({
  key,
  label: `nav ${key}`,
}));
const items2 = [UserOutlined, LaptopOutlined, NotificationOutlined].map((icon, index) => {
  const key = String(index + 1);
  return {
    key: `sub${key}`,
    icon: React.createElement(icon),
    label: `subnav ${key}`,
    children: new Array(4).fill(null).map((_, j) => {
      const subKey = index * 4 + j + 1;
      return {
        key: subKey,
        label: `option${subKey}`,
      };
    }),
  };
});
const App = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <Layout>
      <Header
        style={{
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <div className="demo-logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['2']}
          items={items1}
          style={{
            flex: 1,
            minWidth: 0,
          }}
        />
      </Header>
      <Content
        style={{
          padding: '0 48px',
        }}
      >
        <Breadcrumb
          style={{
            margin: '16px 0',
          }}
        >
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        <Layout
          style={{
            padding: '24px 0',
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Sider
            style={{
              background: colorBgContainer,
            }}
            width={200}
          >
            <Menu
              mode="inline"
              defaultSelectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              style={{
                height: '100%',
              }}
              items={items2}
            />
          </Sider>
          <Content
            style={{
              padding: '0 24px',
              minHeight: 280,
            }}
          >
            Content
          </Content>
        </Layout>
      </Content>
      <Footer
        style={{
          textAlign: 'center',
        }}
      >
        Ant Design ©{new Date().getFullYear()} Created by Ant UED
      </Footer>
    </Layout>
  );
};
export default App;

function usr_control(type, username, mail, password)
{

    const spawner = require('child_process').spawn;
    const python_process = spawner('python', ['./python.py', type, username, mail, password]);

    python_process.stdout.on('data', (data) => {
        data.toString();
    }); 
}

usr_control("login", "randomusr", "[email protected]", "randompass")

I want to return data from this function, or return data from stdout.on to variable

I don’t know what I can do

I have a rest call that Get’s a product’s ingredients and I use the product name as the path variable. I do allow any character used and I understand I need to do encodeURIComponent(name) to encode chars like “/” since they could be misinterpreted otherwise:

ProductController.js

loadProduct = function() {
....
this.productService.getProduct(encodeURIComponent(this.selectedProduct)).then{ ....}
}

productService.js

getProduct: function(productName) {
   let fullPath = "products/" + encodeURIComponent(productName);
   $http.get(fullPath) ....
}

I did some debugging on firefox and I noticed this:
Scenario 1: using only 1 encodeURI at the “getProduct” function (original assumption):
GET /products/test%2F
%2F is /
status 400 bad request
The “file column” in the Network tab shows the path as “test/” without the encoding

Scenario 2: using only 2 encodeURI at the both locations:
GET /products/test%252F it seems because of 2nd encoding, the %25 is eocoding the % from %2F
status OK – returned the correct product “test/”
The “file column” in the Network tab shows the path as “test%2F” with the encoding correct on /

I am really confused here. I am not decoding on the fly or anything so really confused why i need to encode it twice or maybe I am using something wrong?

I have a long string 9940 characters, the string contains {FOOTER}, in JavaScript I call:

strPage = strPage.replace(/"{FOOTER}/g, "some other text");

However {FOOTER} is not being replaced, what could explain it? I’ve checked the string and the content is exactly as I have put.

It Shows
Objects are not valid as a React child (found: [object Error]). If you meant to render a collection of children, use an array instead.
and for some math’s shows
enter image description here
and with the inline math’s issue , can we somehow break line

i tried the css flexbox in react native for line break ,but not working, and for the object error i tried several methods but the maths latex when gets curly braces it executes as code

Well im using Swiper component to handle multistep signup, with these current slides + conditionally rended depending on the way the user wants to proceed, for now it works just fine, buuuut when antother slide added to the end of the swiper, the slides orders and rending condition gets messed, basically slides that should only render when fillOutManualy is true, are rendering when fillOutManually is false, also not rendering in ther respective order

here is the swiper

  <Swiper
                spaceBetween={50}
                slidesPerView={1}
                onSlideChange={() => {
                  setActiveIndex(swiperRef.activeIndex);
                    if (fillOutManually) {
                      if (swiperRef.activeIndex === 0) {
                        setNext("Introduction");
                        setPrev("");
                      }
                      if (swiperRef.activeIndex === 1) {
                        setNext("Educational Journey");
                        setPrev("CV");
                      }
                      if (swiperRef.activeIndex === 2) {
                        setNext("Internship Experiences");
                        setPrev("Introduction");
                      }
                      if (swiperRef.activeIndex === 3) {
                        setNext("Skills & Expertise");
                        setPrev("Educational Journey");
                      }
                      if (swiperRef.activeIndex === 4) {
                        setNext("Language Proficiency");
                        setPrev("Internship Experiences");
                      }
                      if (swiperRef.activeIndex === 5) {
                        setNext("Profile Picture");
                        setPrev("Skills & Expertise");
                      }
                      if (swiperRef.activeIndex === 6) {
                        setNext("Interests");
                        setPrev("Language Proficiency");
                      }
                      if (swiperRef.activeIndex === 7) {
                        setNext("Links");
                        setPrev("Profile Picture");
                      }
                      if (swiperRef.activeIndex === 8) {
                        setNext("Review Information");
                        setPrev("Interests");
                      }
                      if (swiperRef.activeIndex === 9) {
                        setNext("Verify Email");
                        setPrev("Links");
                      }
                    } else {
                      if (swiperRef.activeIndex === 0) {
                        setNext("Profile Picture");
                        setPrev("");
                      }
                      if (swiperRef.activeIndex === 1) {
                        setNext("Interests");
                        setPrev("CV");
                      }
                      if (swiperRef.activeIndex === 2) {
                        setNext("Links");
                        setPrev("Profile Picture");
                      }
                      if (swiperRef.activeIndex === 3) {
                        setNext("Verify Email");
                        setPrev("Interests");
                      }
                    }
                    if ((swiperRef.activeIndex === 10 && fillOutManually) || (swiperRef.activeIndex === 4 && !fillOutManually)) {
                      sendEmailVerification();
                      setEmailSent(true);
                    }
                  
                }}
                onSwiper={(swiper) => {
                  setSwiperRef(swiper);
                  setActiveIndex(swiper.activeIndex);
                  // if (swiper.activeIndex === 0) {
                  //   setNext("Introduction");
                  //   setPrev("");
                  // }
                }}
                allowTouchMove={false}
              >
                <>
                <SwiperSlide>
                <div>
                  <h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Empower Your Professional Journey!</h1>
                  <p className='text-lg text-[#333333] font-inter mt-2 ml-5'>Take Control of Your Narrative and Showcase Your Expertise</p>
                </div>
                <div className='mx-5 mt-5 flex gap-5'>
                <div className='bg-white p-3 rounded-xl w-fit'>
                  <p className='text-[#333333] font-inter font-bold'>How would you like to populate your profile?</p>
                  <div className='mt-5 space-y-2'>
                    <label>
                      <input type="file" className='hidden' onChange={handleCVUpload} />
                      <div className={`bg-primary p-2 rounded-md flex items-center gap-2 cursor-pointer ${selectedCV ? 'bg-primary/50 text-primary' : 'text-white'}`}>
                        <PiReadCvLogoFill className='' />
                        <p className=' font-inter'>Upload your CV</p>
                      </div>
                    </label>
                    <div className={`bg-primary p-2 rounded-md flex items-center gap-2 cursor-pointer ${fillOutManually ? 'bg-primary/50 text-primary' : 'text-white'}`}
                    onClick={handleFillOutManually}
                    >
                      <FaFilePen className='' />
                      <p className='font-inter'>Fill it out manually</p>
                    </div>
                  </div>
      
                </div>
                {selectedCV && (
                  <div className='bg-white p-3 rounded-xl w-fit flex flex-col justify-between'>
                    <div className="flex justify-between">
                    <p className='text-[#333333] font-inter font-bold'>Your CV</p>
                    <FaFilePdf className='text-primary text-4xl' />
                    </div>
                    <div className='mt-2 space-y-2'>
                      <p className='text-[#333333] font-inter'>{selectedCV.name}</p>
                    </div>
                    <div className='flex justify-end'>
                      <button className='bg-[#FF5050] p-2 rounded-md text-white font-inter mt-2'
                      onClick={() => {
                        setSelectedCV(null)
                        setNext("");
                      }}>Remove</button>
                    </div>
                  </div>
                )}
                </div>
                </SwiperSlide>
                </>
                {fillOutManually && (
                  <>
                <SwiperSlide>
                <div>
                  <h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Provide a Comprehensive Introduction!</h1>
                  <p className='text-lg text-[#333333] font-inter mt-2 ml-5'>Share Your Story and Highlight Your Accomplishments</p>
                </div>
                <div className="flex items-center gap-5 mx-5 mt-5">
                <div className='bg-white p-3 rounded-xl'>
                <p className='text-[#333333] font-inter font-bold mb-3'>Contact</p>
                <input type="number"
                              min={0}
                              placeholder='Phone number...'
                              value={userInformation.phoneNumber ? userInformation.phoneNumber : ''}
                              className='bg-gray-100 p-3 rounded-lg w-full outline-none border border-gray-300 focus:border-primary' 
                              onChange={(e) => 
                                setUserInformation({
                                  ...userInformation,
                                  phoneNumber: e.target.value
                                })}/>
                </div>
                <div className='bg-white p-3 rounded-xl w-1/3'>
                <p className='text-[#333333] font-inter font-bold mb-3'>Title</p>
                <input type="text"
                              min={0}
                              placeholder='What best describes you?... (e.g. Software Developer)'
                              value={userInformation.title ? userInformation.title : ''}
                              className='bg-gray-100 p-3 rounded-lg w-full outline-none border border-gray-300 focus:border-primary' 
                              onChange={(e) => 
                                setUserInformation({
                                  ...userInformation,
                                  title: e.target.value
                                })}/>
                </div>
                </div>
                  <div className='bg-white p-3 rounded-xl w-2/3 mx-5 mt-5'>
                <p className='text-[#333333] font-inter font-bold mb-3'>Comprehensive Introduction</p>
                  <div className='w-full h-full'>
                    <label>
                      <textarea className={`bg-gray-100 w-full h-44 p-3 rounded-md border focus:outline-none ${introductionLimitError ? 'border-[#FF5050] focus:border-[#FF5050]' : 'focus:border-primary'}`} 
                      placeholder='Comprehensive introduction about yourself'
                      value={userInformation.detailedDescription ? userInformation.detailedDescription : ''}
                      maxLength={500}
                      onChange={handleIntroductionChange}
                      re
                      ></textarea>
                    </label>
                    <p className={`text-sm mt-1 text-end ${introductionLimitError ? 'text-[#FF5050]' : 'text-[#9D9D9D]'}`}>{remainingCharacters} characters remaining</p>
                  </div>
                </div>
                </SwiperSlide>
                <SwiperSlide>
                <div>
                  <h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Educational Journey Overview!</h1>
                  <p className='text-lg text-[#333333] font-inter mt-2 ml-5'>Highlight Your Educational Background and Achievements</p>
                </div>
                <div className='bg-white p-3 w-2/4 rounded-xl flex-1 mx-5 mt-5'>
                <p className='text-[#333333] font-inter font-bold mb-3'>Recent Educations</p>
                  <div>
                    <div className='grid grid-rows-3 grid-flow-col gap-4'>
                    {userInformation.recentEducations?.length > 0 && userInformation.recentEducations.map((education, index) => (
                      <div key={index} className='flex items-center justify-between gap-2'>
                        <div className='bg-gray-100 p-2 rounded-md w-full'>
                        <div className='flex items-center gap-2'>
                          <p className=' font-inter'>{education.institution}</p>
                          <p className=' font-inter text-primary text-xs'>{education.graduationYear}</p>
                        </div>
                        <p className=' font-inter text-sm'>{education.degree}</p>
                        </div>
                        <div className="bg-[#FF5050] text-white rounded-md cursor-pointer p-5 hover:bg-[#FF5050]/50 hover:text-[#FF5050]"
                          onClick={() => handleRemoveRecentEducation(index)}>
                          <FaTrash className='' />
                          </div>
                      </div>
                    ))}
                    </div>
                  <div className={`bg-primary p-2 mt-5 rounded-md flex items-center gap-2 cursor-pointer text-white`}
                  onClick={handleShowRecentEducationModal}>
                      <FaPlus className='' />
                      <p className=' font-inter'>Add Education</p>
                    </div>
                  </div>
                </div>
                </SwiperSlide>
                <SwiperSlide>
                <div>
                  <h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Recent Internship Experiences! <span className='text-xs font-normal text-[#FF7A50]'>(Optional)</span></h1>
                  <p className='text-lg text-[#333333] font-inter mt-2 ml-5'>Showcase Your Practical Learning and Professional Development</p>
                </div>
                <div className='bg-white p-3 w-2/4 rounded-xl flex-1 mx-5 mt-5'>
                <p className='text-[#333333] font-inter font-bold mb-3'>Recent Intenrships</p>
                  <div>
                  <div className='grid grid-rows-3 grid-flow-col gap-4'>
                    {userInformation.recentInternships?.length > 0 && userInformation.recentInternships.map((internships, index) => (
                      <div key={index} className='flex items-center justify-between gap-2'>
                        <div className='bg-gray-100 p-2 rounded-md w-full'>
                        <div className='flex items-center gap-2'>
                          <p className=' font-inter'>{internships.enterpriseName}</p>
                          <p className=' font-inter text-primary text-xs'>{internships.duration}</p>
                        </div>
                        <p className=' font-inter text-sm'>{internships.role}</p>
                        </div>
                        <div className="bg-[#FF5050] text-white rounded-md cursor-pointer p-5 hover:bg-[#FF5050]/50 hover:text-[#FF5050]"
                          onClick={() => handleRemoveRecentInternship(index)}>
                          <FaTrash className='' />
                          </div>
                      </div>
                    ))}
                    </div>
                  <div className={`bg-primary p-2 mt-5 rounded-md flex items-center gap-2 cursor-pointer text-white`}
                  onClick={handleShowRecentInternshipModal}>
                      <FaPlus className='' />
                      <p className=' font-inter'>Add Internship</p>
                    </div>
                  </div>
                </div>
                </SwiperSlide>
                <SwiperSlide>
                <div>
                  <h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Skills and Expertise Insight!</h1>
                  <p className='text-lg text-[#333333] font-inter mt-2 ml-5'>Demonstrate Your Diverse Abilities and Specializations</p>
                </div>
                  <div className='bg-white p-3 w-2/4 rounded-xl mx-5 mt-5'>
                    <p className='text-[#333333] font-inter font-bold mb-3'>Skills & Expertise</p>
                    <div>
                      <div className='grid grid-rows-3 grid-flow-col gap-4'>
                        {userInformation.skills?.length > 0 && userInformation.skills.map((skill, index) => (
                          <div key={index} className='flex items-center justify-between gap-2'>
                            <div className='bg-gray-100 p-2 rounded-md w-full'>
                              <p className=' font-inter'>{skill.skill}</p>
                              <p className=' font-inter text-primary text-xs'>{skill.proficiency}</p>
                            </div>
                            <div className="bg-[#FF5050] text-white rounded-md cursor-pointer p-5 hover:bg-[#FF5050]/50 hover:text-[#FF5050]"
                              onClick={() => handleRemoveSkill(index)}>
                              <FaTrash className='' />
                            </div>
                          </div>
                        ))}
                      </div>
                      <div className={`bg-primary p-2 mt-5 rounded-md flex items-center gap-2 cursor-pointer text-white`}
                        onClick={handleShowSkillsModal}>
                        <FaPlus className='' />
                        <p className=' font-inter'>Add Skills & Expertise</p>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
                <SwiperSlide>
                <div>
                  <h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Language Proficiency Breakdown!</h1>
                  <p className='text-lg text-[#333333] font-inter mt-2 ml-5'>Display Your Linguistic Abilities and Skills</p>
                </div>
                  <div className='bg-white p-3 w-2/4 rounded-xl mx-5 mt-5'>
                  <p className='text-[#333333] font-inter font-bold mb-3'>Languages</p>
                    <div>
                    <div className='grid grid-rows-3 grid-flow-col gap-4'>
                    {userInformation.languages?.length > 0 && userInformation.languages.map((language, index) => (
                      <div key={index} className='flex items-center justify-between gap-2'>
                        <div className='bg-gray-100 p-2 rounded-md w-full'>
                          <p className=' font-inter'>{language.language}</p>
                          <p className=' font-inter text-primary text-xs'>{language.proficiency}</p>
                        </div>
                        <div className="bg-[#FF5050] text-white rounded-md cursor-pointer p-5 hover:bg-[#FF5050]/50 hover:text-[#FF5050]"
                          onClick={() => handleRemoveLanguage(index)}>
                          <FaTrash className='' />
                          </div>
                      </div>
                    ))}
                    </div>
                    <div className={`bg-primary p-2 mt-5 rounded-md flex items-center gap-2 cursor-pointer text-white`}
                    onClick={handleShowLanguagesModal}>
                        <FaPlus className='' />
                        <p className=' font-inter'>Add Language</p>
                      </div>
                    </div>
                  </div>
                </SwiperSlide>
                  </>
                  )}
                  <>
                <SwiperSlide>
                <div>
                  <h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Make Your Profile Stand Out!</h1>
                  <p className='text-lg text-[#333333] font-inter mt-2 ml-5 lg:w-1/2'>Your profile picture is the first thing others will see. A profile picture is needed for better identification and to personalize your account. Choose an image that represents you professionally or personally. </p>
                </div>
                <div className='flex gap-5 mt-9 mx-5'>
                <div className='bg-white p-3 rounded-lg w-fit'>
                  <p className='text-[#333333] font-inter font-bold'>Upload a photo to personalize your account</p>
                  <div className='mt-5 space-y-2'>
                    <label>
                      <input type="file" className='hidden' onChange={handleProfilePictureUpload} />
                      <div className='bg-primary p-2 rounded-md flex items-center gap-2 cursor-pointer'>
                        <MdAddPhotoAlternate className='text-white' />
                        <p className='text-white font-inter'>Upload your photo</p>
                      </div>
                    </label>
                  </div>
                </div>
                  {profilePicture && (
                    <div className='bg-white rounded-lg p-3'>
                      <p className='text-[#333333] font-inter font-bold'>Profile Picture</p>
                      <img src={URL.createObjectURL(profilePicture)} alt='' className='w-32 h-32 rounded-md object-cover mt-5' />
                    </div>
                  )}
      
                </div>
                </SwiperSlide>
                <SwiperSlide>
                <div>
                  <h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Share Your Interests!</h1>
                  <p className='text-lg text-[#333333] font-inter mt-2 ml-5 lg:w-1/2'>Understanding your interests helps us provide you with relevant information and resources that align with what you enjoy. Your input is valuable in shaping your experience on our platform.</p>
                </div>
                <div className='mt-9 ml-5'>
                <Interests userInformation={userInformation} setUserInformation={setUserInformation} />
                </div>
                </SwiperSlide>
                <SwiperSlide>
                  <div>
                  <h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Link Your Accounts! <span className='text-xs font-normal text-[#FF7A50]'>(Optional)</span></h1>
                  <p className='text-lg text-[#333333] font-inter mt-2 ml-5 lg:w-1/2'>Linking your profile simplifies the search process for enterprises, making it easier for them to discover and connect with you.</p>
                  <div className='mt-9 ml-5 flex gap-5'>
                    <div className='bg-white p-3 rounded-xl w-fit flex items-center gap-2'>
                        <CgWebsite className='text-[#333333] text-4xl' />
                        <input type="text"
                              placeholder='Portfolio website...'
                              className='bg-gray-100 p-3 rounded-lg w-full outline-none border border-gray-300 focus:border-primary' 
                              />
                      </div>
                      <div className='bg-white p-3 rounded-xl w-fit flex items-center gap-2'>
                        <FaGithub className='text-[#333333] text-4xl' />
                        <input type="text"
                              placeholder='Github profile...'
                              className='bg-gray-100 p-3 rounded-lg w-full outline-none border border-gray-300 focus:border-primary' 
                              />
                      </div>
                      <div className='bg-white p-3 rounded-xl w-fit flex items-center gap-2'>
                        <FaLinkedin className='text-[#333333] text-4xl' />
                        <input type="text"
                              placeholder='Linkedin profile...'
                              className='bg-gray-100 p-3 rounded-lg w-full outline-none border border-gray-300 focus:border-primary' 
                              />
                      </div>
                  </div>
                </div>
                </SwiperSlide>
                </>
                {fillOutManually && (
                  <>
                <SwiperSlide>
                    <div className='mt-9 ml-5'>
                <div className='w-1/2'>
                  <h1 className='text-4xl font-semibold text-[#333333] font-inter'>Make Sure Your Information is Correct!</h1>
                  <p className='text-lg text-[#333333] font-inter mt-2'>Ensure accuracy and completeness in your profile details. </p>
                </div>
                <button className='bg-primary px-9 py-2 rounded-md text-white mt-5'
                onClick={() => {
                  setShowCV(true)
                  console.log(userInformation)
                }}>View Information</button>
                
                    </div>
                </SwiperSlide>
                  </>
                )}
                
 
              </Swiper>

I tried manipulating the swiper in every way possible, only resulting in more mess

I’d like to develop a web app that would allow the user to centralize various product information from different sites (via the api of these sites, which is normally requested when the user visits them). However, in the event of too many requests (5-10 requests, which in itself isn’t much), a captcha has to be resolved. To simplify the procedure for the user, I’m trying to find out if there isn’t a way to open a popup, have him resolve the captcha and intercept the request that returns the token to validate it.

Is this possible (I’m not sure if it’s technically feasible, at least I haven’t found it), or do I have to use a desktop application?

thanks in advance

I want to create scrollable chart using chart.js library in angular 11 version.

1. I want to create bar chart scrollable in which x axis should be scrollable and static the y axis
2. I want to create horizontalbar chart in which y axis should be scrollable and static the x axis.
   I want to create multiple charts using chart. Js with scroll functionality

How can i achieve this please help me with given some idea using some generic function only just passing the dat in function?

I tried something using canvas to set height and width to show in a given space to set height and width but it’s not fruitful and no any effect on canvas.

The default behavior of ECharts causes mouse wheel to zoom the chart.
I have several vertically arranged ECharts that do not fit on one screen. So I have a scrollable page.

I want mouse wheel to scroll the page up/down.
The problem is that ECharts zooms its content and consumes the event so that it is not propagated to the parent.

Even if I turn off the zooming e.g. via DataZoom.zoomOnMouseWheel = 'ctrl', ECharts still consumes the event so that the page is not scrolled.
Is there a possibility that ECharts propagates the event high as long as Ctrl is not pressed so that the page is scrolled?

for (i = 0; i < 3; ++i) {
  var chartDom = document.getElementById('main' + i);
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    dataZoom: [
      {
        type: 'inside'
      }
    ],
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  };

  option && myChart.setOption(option);

}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<div id="main0" style="width: 600px;height:400px;"></div>
<div id="main1" style="width: 600px;height:400px;"></div>
<div id="main2" style="width: 600px;height:400px;"></div>