');-webkit-background-clip:text;background-clip:text;color:transparent;text-align:right}.Logo__Container .Logo .text{color:#a3cacd;font-size:14.4px;font-style:italic}.Logo__Container .Logo .stateof{left:0;top:0}.Logo__Container .Logo .year{bottom:0;right:0;text-align:right}.Logo__Container .Logo .triangle{left:4.8px;top:54px;width:43.2px}.Logo__Container .Logo .triangle .inner{border:30px solid transparent;border-bottom-color:#3c52d1;border-width:0 21.6px 30px;width:100%}.Logo__Container .Logo .stripe{background:#a3cacd;height:1.5px;width:30px}.Logo__Container .Logo .stripe1{left:28.8px;top:74.4px}.Logo__Container .Logo .stripe2{left:26.4px;top:80.4px}.Logo__Container .Logo .stripe3{left:24px;top:86.4px}.Logo__Container .Logo .stripe4{left:26.4px;top:92.4px}.Logo__Container .Logo .blobs{align-items:center;display:flex;filter:url(#blob);height:60px;justify-content:center;left:30px;top:36px;transform:rotate(-20deg);width:120px}.Logo__Container .Logo .blob{background:#a3cacd;border-radius:50%;height:100%;width:50%}.Logo__Container .Logo .blob2{transform:translateX(-12px)}.Logo__Container .Logo .circle{left:calc(50% - 3px);top:50%;width:76.8px}.Logo__Container .Logo .circle .inner{transform:translateX(-50%) translateY(-50%)}.Logo__Container .Logo .circle .inner div{border:3px dashed #576de7;border-radius:100%;box-sizing:content-box;height:0;padding-bottom:100%;width:100%}.Logo__Container .Logo .frame{right:26.4px;top:50%;width:64.8px}.Logo__Container .Logo .frame .inner{transform:translateY(-50%) rotate(45deg)}.Logo__Container .Logo .frame .inner div{border:3px solid #576de7;box-shadow:2.1px 2.1px 0 0 #a3cacd;box-sizing:content-box;height:0;padding-bottom:100%;width:100%}.Logo__Container .Logo .tilde{font-size:33.6px;line-height:1}.Logo__Container .Logo .tilde1{right:12px;top:24px}.Logo__Container .Logo .tilde2{right:9.6px;top:30px}.Logo__Container .Logo .tilde3{right:7.2px;top:36px}.Logo__Container .Logo--animated .c>div{animation-delay:.1s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .s1>div{animation-delay:.2s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .s2>div{animation-delay:.3s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .circle>div>div{animation-delay:.5s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:popspin;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0)}.Logo__Container .Logo--animated .frame{animation-delay:.8s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slidetop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0) translateY(-60px) rotate(180deg)}.Logo__Container .Logo--animated .blob1{animation-delay:.9s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .blob2{animation-delay:1.1s;animation-duration:.5s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:blob;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-100%)}.Logo__Container .Logo--animated .stripe1{animation-delay:1.4s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(12px)}.Logo__Container .Logo--animated .stripe2{animation-delay:1.5s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(12px)}.Logo__Container .Logo--animated .stripe3{animation-delay:1.6s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(12px)}.Logo__Container .Logo--animated .stripe4{animation-delay:1.7s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(12px)}.Logo__Container .Logo--animated .tilde1{animation-delay:1.9s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-12px)}.Logo__Container .Logo--animated .tilde2{animation-delay:2s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-12px)}.Logo__Container .Logo--animated .tilde3{animation-delay:2.1s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-12px)}.Logo__Container .Logo--animated .triangle{animation-delay:2.8s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:popspin;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0)}.Logo__Container .Logo--animated .stateof{animation-delay:2.2s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:appear;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0}.Logo__Container .Logo--animated .year{animation-delay:2.5s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:appear;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0}}@media screen and (min-width:600px)and (max-width:999px){.Logo__Container .Logo{height:200px;position:relative;text-shadow:none;width:400px}.Logo__Container .Logo>*{position:absolute}.Logo__Container .Logo .letter{color:#f95db2;font-size:144px;font-weight:800;line-height:1}.Logo__Container .Logo .c{left:48px;text-shadow:5px 5px 0 #576de7;top:50%;transform:translateY(-50%)}.Logo__Container .Logo .s1{left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}.Logo__Container .Logo .s2{right:48px;top:50%;transform:translateY(-50%)}.Logo__Container .Logo .s2 div{background:url('data:image/svg+xml;utf8, ');-webkit-background-clip:text;background-clip:text;color:transparent;text-align:right}.Logo__Container .Logo .text{color:#a3cacd;font-size:24px;font-style:italic}.Logo__Container .Logo .stateof{left:0;top:0}.Logo__Container .Logo .year{bottom:0;right:0;text-align:right}.Logo__Container .Logo .triangle{left:8px;top:90px;width:72px}.Logo__Container .Logo .triangle .inner{border:50px solid transparent;border-bottom-color:#3c52d1;border-width:0 36px 50px;width:100%}.Logo__Container .Logo .stripe{background:#a3cacd;height:2.5px;width:50px}.Logo__Container .Logo .stripe1{left:48px;top:124px}.Logo__Container .Logo .stripe2{left:44px;top:134px}.Logo__Container .Logo .stripe3{left:40px;top:144px}.Logo__Container .Logo .stripe4{left:44px;top:154px}.Logo__Container .Logo .blobs{align-items:center;display:flex;filter:url(#blob);height:100px;justify-content:center;left:50px;top:60px;transform:rotate(-20deg);width:200px}.Logo__Container .Logo .blob{background:#a3cacd;border-radius:50%;height:100%;width:50%}.Logo__Container .Logo .blob2{transform:translateX(-20px)}.Logo__Container .Logo .circle{left:calc(50% - 5px);top:50%;width:128px}.Logo__Container .Logo .circle .inner{transform:translateX(-50%) translateY(-50%)}.Logo__Container .Logo .circle .inner div{border:5px dashed #576de7;border-radius:100%;box-sizing:content-box;height:0;padding-bottom:100%;width:100%}.Logo__Container .Logo .frame{right:44px;top:50%;width:108px}.Logo__Container .Logo .frame .inner{transform:translateY(-50%) rotate(45deg)}.Logo__Container .Logo .frame .inner div{border:5px solid #576de7;box-shadow:3.5px 3.5px 0 0 #a3cacd;box-sizing:content-box;height:0;padding-bottom:100%;width:100%}.Logo__Container .Logo .tilde{font-size:56px;line-height:1}.Logo__Container .Logo .tilde1{right:20px;top:40px}.Logo__Container .Logo .tilde2{right:16px;top:50px}.Logo__Container .Logo .tilde3{right:12px;top:60px}.Logo__Container .Logo--animated .c>div{animation-delay:.1s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .s1>div{animation-delay:.2s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .s2>div{animation-delay:.3s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .circle>div>div{animation-delay:.5s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:popspin;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0)}.Logo__Container .Logo--animated .frame{animation-delay:.8s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slidetop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0) translateY(-100px) rotate(180deg)}.Logo__Container .Logo--animated .blob1{animation-delay:.9s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .blob2{animation-delay:1.1s;animation-duration:.5s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:blob;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-100%)}.Logo__Container .Logo--animated .stripe1{animation-delay:1.4s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(20px)}.Logo__Container .Logo--animated .stripe2{animation-delay:1.5s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(20px)}.Logo__Container .Logo--animated .stripe3{animation-delay:1.6s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(20px)}.Logo__Container .Logo--animated .stripe4{animation-delay:1.7s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(20px)}.Logo__Container .Logo--animated .tilde1{animation-delay:1.9s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-20px)}.Logo__Container .Logo--animated .tilde2{animation-delay:2s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-20px)}.Logo__Container .Logo--animated .tilde3{animation-delay:2.1s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-20px)}.Logo__Container .Logo--animated .triangle{animation-delay:2.8s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:popspin;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0)}.Logo__Container .Logo--animated .stateof{animation-delay:2.2s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:appear;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0}.Logo__Container .Logo--animated .year{animation-delay:2.5s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:appear;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0}}@media screen and (min-width:1000px){.Logo__Container .Logo{height:320px;position:relative;text-shadow:none;width:640px}.Logo__Container .Logo>*{position:absolute}.Logo__Container .Logo .letter{color:#f95db2;font-size:230.4px;font-weight:800;line-height:1}.Logo__Container .Logo .c{left:76.8px;text-shadow:8px 8px 0 #576de7;top:50%;transform:translateY(-50%)}.Logo__Container .Logo .s1{left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}.Logo__Container .Logo .s2{right:76.8px;top:50%;transform:translateY(-50%)}.Logo__Container .Logo .s2 div{background:url('data:image/svg+xml;utf8, ');-webkit-background-clip:text;background-clip:text;color:transparent;text-align:right}.Logo__Container .Logo .text{color:#a3cacd;font-size:38.4px;font-style:italic}.Logo__Container .Logo .stateof{left:0;top:0}.Logo__Container .Logo .year{bottom:0;right:0;text-align:right}.Logo__Container .Logo .triangle{left:12.8px;top:144px;width:115.2px}.Logo__Container .Logo .triangle .inner{border:80px solid transparent;border-bottom-color:#3c52d1;border-width:0 57.6px 80px;width:100%}.Logo__Container .Logo .stripe{background:#a3cacd;height:4px;width:80px}.Logo__Container .Logo .stripe1{left:76.8px;top:198.4px}.Logo__Container .Logo .stripe2{left:70.4px;top:214.4px}.Logo__Container .Logo .stripe3{left:64px;top:230.4px}.Logo__Container .Logo .stripe4{left:70.4px;top:246.4px}.Logo__Container .Logo .blobs{align-items:center;display:flex;filter:url(#blob);height:160px;justify-content:center;left:80px;top:96px;transform:rotate(-20deg);width:320px}.Logo__Container .Logo .blob{background:#a3cacd;border-radius:50%;height:100%;width:50%}.Logo__Container .Logo .blob2{transform:translateX(-32px)}.Logo__Container .Logo .circle{left:calc(50% - 8px);top:50%;width:204.8px}.Logo__Container .Logo .circle .inner{transform:translateX(-50%) translateY(-50%)}.Logo__Container .Logo .circle .inner div{border:8px dashed #576de7;border-radius:100%;box-sizing:content-box;height:0;padding-bottom:100%;width:100%}.Logo__Container .Logo .frame{right:70.4px;top:50%;width:172.8px}.Logo__Container .Logo .frame .inner{transform:translateY(-50%) rotate(45deg)}.Logo__Container .Logo .frame .inner div{border:8px solid #576de7;box-shadow:5.6px 5.6px 0 0 #a3cacd;box-sizing:content-box;height:0;padding-bottom:100%;width:100%}.Logo__Container .Logo .tilde{font-size:89.6px;line-height:1}.Logo__Container .Logo .tilde1{right:32px;top:64px}.Logo__Container .Logo .tilde2{right:25.6px;top:80px}.Logo__Container .Logo .tilde3{right:19.2px;top:96px}.Logo__Container .Logo--animated .c>div{animation-delay:.1s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .s1>div{animation-delay:.2s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .s2>div{animation-delay:.3s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .circle>div>div{animation-delay:.5s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:popspin;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0)}.Logo__Container .Logo--animated .frame{animation-delay:.8s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slidetop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0) translateY(-160px) rotate(180deg)}.Logo__Container .Logo--animated .blob1{animation-delay:.9s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:pop;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:scale(0)}.Logo__Container .Logo--animated .blob2{animation-delay:1.1s;animation-duration:.5s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:blob;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-100%)}.Logo__Container .Logo--animated .stripe1{animation-delay:1.4s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(32px)}.Logo__Container .Logo--animated .stripe2{animation-delay:1.5s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(32px)}.Logo__Container .Logo--animated .stripe3{animation-delay:1.6s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(32px)}.Logo__Container .Logo--animated .stripe4{animation-delay:1.7s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideleft;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(32px)}.Logo__Container .Logo--animated .tilde1{animation-delay:1.9s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-32px)}.Logo__Container .Logo--animated .tilde2{animation-delay:2s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-32px)}.Logo__Container .Logo--animated .tilde3{animation-delay:2.1s;animation-duration:.4s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:slideright;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0;transform:translateX(-32px)}.Logo__Container .Logo--animated .triangle{animation-delay:2.8s;animation-duration:.6s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:popspin;animation-timing-function:cubic-bezier(.25,.46,.45,.94);transform:scale(0)}.Logo__Container .Logo--animated .stateof{animation-delay:2.2s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:appear;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0}.Logo__Container .Logo--animated .year{animation-delay:2.5s;animation-duration:.3s;animation-fill-mode:forwards;animation-iteration-count:1;animation-name:appear;animation-timing-function:cubic-bezier(.25,.46,.45,.94);opacity:0}}.Feature__Links,.Feature__Support{font-size:.9rem;font-weight:400}.FTBlock__Links__Item{margin-bottom:6.6666666667px}.Features__Overview{display:flex;flex-wrap:wrap;justify-content:space-between}.Features__Overview__Item{display:grid;grid-template-rows:210px 50px;height:260px;margin-bottom:40px;width:240px}.Features__Overview__Item__Footer{align-items:center;border-bottom:2px solid #9ac6c9;border-top:2px solid #9ac6c9;display:flex;font-size:.9rem;font-weight:800;justify-content:center}.Features__Overview__Item__Footer:hover{background:#9ac6c9;color:#fff;cursor:pointer}.capture .FTBlock__Description{grid-column:1/3}@media screen and (max-width:599px){.FTBlock__Resources{margin-top:20px}}.FTBlock__Resources h3{font-size:1rem;margin-bottom:10px}.FTBlock__Resources ul{padding-left:20px}.capture .FTBlock__Resources{display:none}.OpinionScaleChart{padding-top:20px}.OpinionScaleChart svg{overflow:visible}.FeaturesOverviewChart{height:100%}@media screen and (max-width:599px){.FeaturesSectionOverviewChart{height:200px;height:400px}}@media screen and (min-width:600px)and (max-width:999px){.FeaturesSectionOverviewChart{height:500px}}@media screen and (min-width:1000px){.FeaturesSectionOverviewChart{height:500px}}.ToolsOverviewCirclePackingChart svg{overflow:visible}@media screen and (max-width:599px){.TechnologiesOverviewChart{height:800px}}@media screen and (min-width:600px)and (max-width:999px){.TechnologiesOverviewChart{height:800px}}@media screen and (min-width:1000px){.TechnologiesOverviewChart{height:800px}}.Scatterplot__Crosshair__Line{stroke-dasharray:8,4;animation:svgAnts 50s linear infinite;animation-fill-mode:forwards}.text-highlight{background:#41c7c7;background:#000}.text-green,.text-highlight{border-radius:15px;color:#232840;display:inline-block;font-weight:800;padding:0 12px}.text-green{background:#41c7c7;background:#85eba2}.text-pink{background:#41c7c7;background:#f95db2}.text-pink,.text-pink-light{border-radius:15px;color:#232840;display:inline-block;font-weight:800;padding:0 12px}.text-pink-light{background:#41c7c7;background:#ec75cb}.text-pink-lighter{background:#41c7c7;background:#d68df0}.text-pink-lighter,.text-red{border-radius:15px;color:#232840;display:inline-block;font-weight:800;padding:0 12px}.text-red{background:#41c7c7;background:#fe6a6a}.text-blue{background:#41c7c7;background:#576de7}.text-blackred,.text-blue{border-radius:15px;color:#232840;display:inline-block;font-weight:800;padding:0 12px}.text-blackred{background:#41c7c7;background:rgba(0,0,0,.3);border:1px solid #fe6a6a;color:#41c7c7}.text-bold{font-weight:800}.Chip{display:block;height:12px;margin-right:7px;overflow:hidden;position:relative;width:12px}.Chip__Inner{display:block;height:100%;width:100%}.Chip--split .Chip__Inner{bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}.Chip--split .Chip__Inner:last-child{height:100%;transform:translateX(-3px) translateY(5px) rotate(-45deg);width:200%;z-index:2}.react-tabs{-webkit-tap-highlight-color:transparent}.react-tabs__tab-list{border-bottom:1px solid #aaa;margin:0 0 10px;padding:0}.react-tabs__tab{border:1px solid transparent;border-bottom:none;bottom:-1px;cursor:pointer;display:inline-block;list-style:none;padding:6px 12px;position:relative}.react-tabs__tab--selected{background:#fff;border-color:#aaa;border-radius:5px 5px 0 0;color:#000}.react-tabs__tab--disabled{color:GrayText;cursor:default}.react-tabs__tab:focus{border-color:#0188fe;box-shadow:0 0 5px #0188fe;outline:none}.react-tabs__tab:focus:after{background:#fff;bottom:-5px;content:"";height:5px;left:-4px;position:absolute;right:-4px}.react-tabs__tab-panel{display:none}.react-tabs__tab-panel--selected{display:block}.ToolsArrowsChart{display:flex;margin:auto auto 2.5rem;position:relative}@media(max-width:800px){.ToolsArrowsChart{padding-left:0;padding-right:0}}.ToolsArrowsChart svg{fill:#e0e4e4;overflow:visible}.ToolsArrowsChart__svg{bottom:0;left:0;position:absolute;right:0;top:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.ToolsArrowsChart__axis{stroke:#484f73;stroke-width:1px}.ToolsArrowsChart__axis__label{fill-opacity:.5;dominant-baseline:middle;font-size:.66em;font-weight:600;letter-spacing:.1em;text-transform:uppercase}@keyframes gradientLineSegmentIn{0%{stroke-opacity:0}to{stroke-opacity:1}}.ToolsArrowsChart__tool--is-hidden{opacity:0;pointer-events:none}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line{stroke-opacity:0;animation:gradientLineSegmentIn .2s ease-out;animation-fill-mode:forwards}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-0{animation-delay:0s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-1{animation-delay:.03s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-2{animation-delay:.06s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-3{animation-delay:.09s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-4{animation-delay:.12s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-5{animation-delay:.15s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-6{animation-delay:.18s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-7{animation-delay:.21s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-8{animation-delay:.24s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-9{animation-delay:.27s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-10{animation-delay:.3s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-11{animation-delay:.33s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-12{animation-delay:.36s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-13{animation-delay:.39s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-14{animation-delay:.42s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-15{animation-delay:.45s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-16{animation-delay:.48s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-17{animation-delay:.51s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-18{animation-delay:.54s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-19{animation-delay:.57s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-20{animation-delay:.6s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-21{animation-delay:.63s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-22{animation-delay:.66s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-23{animation-delay:.69s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-24{animation-delay:.72s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-25{animation-delay:.75s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-26{animation-delay:.78s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-27{animation-delay:.81s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-28{animation-delay:.84s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-29{animation-delay:.87s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-30{animation-delay:.9s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-31{animation-delay:.93s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-32{animation-delay:.96s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-33{animation-delay:.99s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-34{animation-delay:1.02s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-35{animation-delay:1.05s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-36{animation-delay:1.08s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-37{animation-delay:1.11s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-38{animation-delay:1.14s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-39{animation-delay:1.17s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-40{animation-delay:1.2s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-41{animation-delay:1.23s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-42{animation-delay:1.26s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-43{animation-delay:1.29s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-44{animation-delay:1.32s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-45{animation-delay:1.35s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-46{animation-delay:1.38s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-47{animation-delay:1.41s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-48{animation-delay:1.44s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-49{animation-delay:1.47s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-50{animation-delay:1.5s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-51{animation-delay:1.53s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-52{animation-delay:1.56s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-53{animation-delay:1.59s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-54{animation-delay:1.62s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-55{animation-delay:1.65s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-56{animation-delay:1.68s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-57{animation-delay:1.71s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-58{animation-delay:1.74s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-59{animation-delay:1.77s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-60{animation-delay:1.8s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-61{animation-delay:1.83s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-62{animation-delay:1.86s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-63{animation-delay:1.89s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-64{animation-delay:1.92s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-65{animation-delay:1.95s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-66{animation-delay:1.98s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-67{animation-delay:2.01s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-68{animation-delay:2.04s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-69{animation-delay:2.07s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-70{animation-delay:2.1s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-71{animation-delay:2.13s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-72{animation-delay:2.16s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-73{animation-delay:2.19s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-74{animation-delay:2.22s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-75{animation-delay:2.25s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-76{animation-delay:2.28s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-77{animation-delay:2.31s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-78{animation-delay:2.34s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-79{animation-delay:2.37s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-80{animation-delay:2.4s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-81{animation-delay:2.43s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-82{animation-delay:2.46s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-83{animation-delay:2.49s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-84{animation-delay:2.52s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-85{animation-delay:2.55s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-86{animation-delay:2.58s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-87{animation-delay:2.61s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-88{animation-delay:2.64s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-89{animation-delay:2.67s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-90{animation-delay:2.7s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-91{animation-delay:2.73s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-92{animation-delay:2.76s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-93{animation-delay:2.79s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-94{animation-delay:2.82s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-95{animation-delay:2.85s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-96{animation-delay:2.88s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-97{animation-delay:2.91s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-98{animation-delay:2.94s}.ToolsArrowsChart__tool--is-active .ToolsArrowsChart__gradient-line--nth-99{animation-delay:2.97s}.ToolsArrowsChart__tool--is-hovering .ToolsArrowsChart__year{fill-opacity:1}.ToolsArrowsChart__tool--is-hovering-other text{fill-opacity:0;stroke-opacity:0}.ToolsArrowsChart__tool--is-hovering-other .ToolsArrowsChart__gradient-line{stroke:#232840;stroke-width:1!important}.ToolsArrowsChart__tool--is-hovering-other .ToolsArrowsChart__now{fill-opacity:.2!important}.ToolsArrowsChart__hover-background{stroke-width:30px;stroke:transparent;fill:none}.ToolsArrowsChart__year{fill-opacity:0}.ToolsArrowsChart__gradient-line{fill:none;stroke-width:4.5px;stroke-linecap:round;stroke-linejoin:round;mix-blend-mode:lighten;pointer-events:none}@keyframes fadeInSlideUp{0%{fill-opacity:0;transform:translateY(1em)}to{fill-opacity:1;transform:translateY(0)}}.ToolsArrowsChart__year{font-size:.8em;font-weight:600;pointer-events:none}.ToolsArrowsChart__label-background{stroke:#1a1f35;stroke-width:3px;font-size:.8em;font-weight:600}.ToolsArrowsChart__label{font-size:.8em;font-weight:600}.ToolsArrowsChart__label__box{cursor:default}.ToolsArrowsChart__label__box text{pointer-events:none;-webkit-user-select:none;user-select:none}.ToolsArrowsChart__listener{fill:transparent}.ToolsArrowsChart__label{cursor:pointer}.ToolsArrowsChart__label:hover{fill:#fff}.hide_visually{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.legend{margin-top:-6rem;max-width:25rem;position:absolute;right:0}.legend_label{fill:#e1e1e1;text-anchor:start;box-sizing:border-box;font-size:.8rem;line-height:1.25rem;margin-bottom:0;margin-top:0;max-width:12rem}.legend_label.left{border-left:1px solid #e1e1e1;padding-left:.5rem;padding-top:.25rem}.legend_label.right{border-right:1px solid #e1e1e1;padding-bottom:.35rem;padding-right:.5rem;padding-top:.1rem;text-align:right}.legend_colors{background-position:top;background-repeat:no-repeat;background-size:100% 100%;border-left:1px solid #e1e1e1;border-right:1px solid #e1e1e1;display:block;height:1rem;margin-top:0;width:12rem}
The State of JS 2021: Despre Salt la conținut
Sondajul State of JavaScript din 2021 a avut loc în perioada 13 ianuarie - 2 februarie 2022 și a colectat 16.085 de răspunsuri. Sondajul a fost organizat de mine, Sacha Greif , cu ajutorul unei echipe de colaboratori și consultanți open-source. Logo-ul și tricoul din acest an au fost create de Christopher Kirk-Nielsen .
Obiectiv
Acest sondaj, împreună cu sondajul State of CSS , a fost creat pentru a identifica tendințe viitoare din ecosistemul dezvoltării web, cu scopul de ajuta developerii să facă alegeri tehnologice. Prin urmare, aceste sondaje se concentrează mai degrabă pe anticiparea a ceea ce va avea loc în următorii câțiva ani decât pe analizarea a ceea ce se bucură acum de succes. Din acest motiv, funcționalitățile și tehnologiile care sunt în prezent cele mai răspândite nu sunt întotdeauna incluse.
De asemenea, acestea ar trebui privite ca un snapshot al unui anumit grup de developeri , nefiind menite să vorbească în numele întregului ecosistem.
Design
Sondajul a fost creat parțial pe baza sondajului de anul trecut, cu o perioadă deschisă de feedback în care schița acestuia a fost pusă în discuție pe GitHub .
Toate întrebările sondajului au fost opționale.
Audiență
Sondajul a fost accesibil online, iar respondenții nu au fost filtrați sau selectați în niciun fel. Respondenții au fost în mare parte o combinație de respondenți ai sondajelor anterioare (anunțați pe baza unei liste dedicate de email-uri) și trafic din social media.
Trebuie menționat că framework-urile, libăriile etc. au fost libere să-și încurajeze comunitatea să participe la sondaj, iar unele dintre ele au profitat de acest avantaj prin bannere, tweet-uri etc. O defalcare detaliată a surselor de trafic este inclusă în graficul „Surse”.
Reprezentativitate și incluziune
Deși credem că e important să dăm o voce fiecărei comunități, realitatea este că un sondaj deschis cum e acesta va avea întotdeauna dificultăți în a reprezenta cu succes pe toată lumea, mai ales atunci când operează prin sisteme care au deja propriile biasuri inerente.
Pentru a contrabalansa acest lucru, am implementat 3 strategii distincte:
Extinderea : încercăm în permanență să luăm legătura cu diferite organizații (cum sunt cele
specializate BIPOC sau LGBTQ ori platformele de predare online) în speranța de a ne diversifica audiența.
Analiza datelor : prin funcționalități precum fațetele și variantele, încercăm permanent să scoatem în
evidență vocea oricărui segment demografic, indiferent cât de puțin ar reprezenta acesta în datele noastre.
Reducerea barierelor : un sondaj prea lung, inaccesibil, care se încarcă greu, scris doar în limba engleză
etc. - toate pot contribui la impunerea unei „taxe de efort” care îi exclude pe cei ce nu-și permit să o
plătească. Rezolvarea acestor probleme poate reduce bariera de intrare și, în acest proces, să aducă un public
mai divers.
Finanțarea proiectului
Finanțarea acestui proiect provine dintr-o varietate de surse:
Vânzarea de tricouri .
Sponsorizările graficelor : membrii comunității pot dona pentru sondaj, iar numele lor va fi afișat în raport.
Link-uri sponsorizate : link-urile către resursele recomandate din josul fiecărei pagini sunt furnizate de
partenerul nostru Frontend Masters .
Alte finanțări : în acest an, echipa Google Chrome a alocat un mic buget
pentru a ne ajuta să angajăm un consultant în accesibilitate care să lucreze la
sondajele CSS și JS.
Cu toate aceste finanțări, sondajul rămâne în mare parte un proiect autofinanțat, așadar orice contribuție sau
sponsorizare este foarte apreciată. Mi-aș dori să lucrez mai mult în special cu furnizorii de browsere deoarece
joacă un rol esențial în ecosistemul web.
Prezentare tehnică
Poți găsi o prezentare tehnică detaliată despre cum se desfășoară sondajele aici .
Colectarea de date : custom Vulcan.js app.
Stocarea/prelucrarea datelor : MongoDB & MongoDB Aggregations.
Data API : API Node.js GraphQL.
Site-ul cu rezultate : Gatsby React app.
Vizualizarea datelor : Nivo React dataviz library.
Font : IBM Plex Mono și Bebas Neue .