[{"data":1,"prerenderedAt":586},["ShallowReactive",2],{"i-ic:sharp-monitor":3,"i-ic:sharp-mail":8,"i-fa6-brands:github":10,"i-fa6-brands:linkedin":14,"i-fa6-brands:telegram":17,"blog\u002F2022-01-25-classification-of-website-technologies\u002Fposition":4,"\u002Fblog\u002F2022-01-25-classification-of-website-technologies":19,"i-openmoji:flag-united-kingdom":581,"i-ic:sharp-arrow-back-ios":584},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"M22 3H2v15h5l-1 1v2h12v-2l-1-1h5zm-2 13H4V5h16z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M22 4H2v16h20zm-2 4l-8 5l-8-5V6l8 5l8-5z\"\u002F>",{"left":4,"top":4,"width":11,"height":12,"rotate":4,"vFlip":6,"hFlip":6,"body":13},496,512,"\u003Cpath fill=\"currentColor\" d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2\"\u002F>",{"left":4,"top":4,"width":15,"height":12,"rotate":4,"vFlip":6,"hFlip":6,"body":16},448,"\u003Cpath fill=\"currentColor\" d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3M135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5c0 21.3-17.2 38.5-38.5 38.5m282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7c-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5c67.2 0 79.7 44.3 79.7 101.9z\"\u002F>",{"left":4,"top":4,"width":11,"height":12,"rotate":4,"vFlip":6,"hFlip":6,"body":18},"\u003Cpath fill=\"currentColor\" d=\"M248 8C111.033 8 0 119.033 0 256s111.033 248 248 248s248-111.033 248-248S384.967 8 248 8m114.952 168.66c-3.732 39.215-19.881 134.378-28.1 178.3c-3.476 18.584-10.322 24.816-16.948 25.425c-14.4 1.326-25.338-9.517-39.287-18.661c-21.827-14.308-34.158-23.215-55.346-37.177c-24.485-16.135-8.612-25 5.342-39.5c3.652-3.793 67.107-61.51 68.335-66.746c.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142q-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123c-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7q108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789c2.052-.034 6.639.474 9.61 2.885a10.45 10.45 0 0 1 3.53 6.716a43.8 43.8 0 0 1 .417 9.769\"\u002F>",{"id":20,"title":21,"body":22,"date":562,"description":563,"draft":6,"extension":564,"image":565,"lang":566,"meta":567,"navigation":568,"path":569,"seo":570,"stem":571,"tags":572,"__hash__":574,"before":575,"after":576},"blog\u002Fblog\u002F2022-01-25-classification-of-website-technologies.md","Classification of website technologies",{"type":23,"value":24,"toc":546},"minimark",[25,29,38,45,48,53,56,59,75,78,93,98,101,107,110,120,123,126,158,161,165,168,178,181,184,221,224,228,231,241,248,257,260,263,300,304,307,314,325,328,331,341,344,348,354,357,367,370,373,396,400,403,406,416,419,456,460,466,469,479,490,494,497,512,515,526,529,540,543],[26,27,21],"h1",{"id":28},"classification-of-website-technologies",[30,31,32,33,37],"p",{},"Once my team met one challenge. We needed to create a documentation site\nfor a technology. It should be easy to work with for a non-specialist in web\ntechnologies and just give great ",[34,35,36],"em",{},"User Experience (UX)",".",[30,39,40,41,44],{},"We found some experience from ",[34,42,43],{},"DocOps"," specialists on the internet.",[30,46,47],{},"By the by, DocOps specialists are people who create documentation\nfor technologies. But I found classic DocOps technologies unsuitable for our\npurposes. Templates for documentation are designed to get information from only one repository. But technology we want to describe is more complicated than other, because it includes many repositories and we need to get fresh info about all components. So I put forward the idea of looking for something new.",[49,50,52],"h2",{"id":51},"what-do-we-know","What do we know?",[30,54,55],{},"Nowadays, as I see, web developers community identifies 3 types of\nframeworks for website development. I realized it searching a lot of documentations\nand communicating with people from my university.",[30,57,58],{},"So there is my representation of site types in the triangle:",[60,61,63,64,71,72,63],"figure",{"style":62},"text-align: center","  \n",[30,65,66],{},[67,68],"img",{"alt":69,"src":70},"Classic Sites Triangle","\u002Fblog\u002F2022-01-25\u002FClassic-Sites-Triangle.jpg","\n  ",[73,74,69],"figcaption",{},[30,76,77],{},"As you can see,",[79,80,81,85,88],"ul",{},[82,83,84],"li",{},"Static site is the best choice, if you want to use hardware as little as possible",[82,86,87],{},"Dynamic site is very useful for constantly changed data (eg forum)",[82,89,90,91],{},"Single Page Application significantly improves ",[34,92,36],{},[94,95,97],"h3",{"id":96},"static-sites","Static Sites",[30,99,100],{},"The most simple way to deploy a site is just put heap of HTML, JS, and CSS files\ninto hosting and get it from browser. And static sites are about it.",[30,102,103,104,37],{},"Of course, you can just write all pages by yourself. But there is a list of technologies,\nthat can generate all pages by template and required information. Such technologies\nare called ",[34,105,106],{},"Static Site Generators (SSG)",[30,108,109],{},"You can see how browser works with pages in this site on the diagram below:",[60,111,63,112,71,118,63],{"style":62},[30,113,114],{},[67,115],{"alt":116,"src":117},"Static Site Workflow","\u002Fblog\u002F2022-01-25\u002FStatic-Site-Workflow.jpg",[73,119,116],{},[30,121,122],{},"Working principle of static sites is pretty easy. Browser just get HTML file any time\nyou want to view a new page. Any. Time. It recreates even pattern elements, that exist\non the page (eg header, navigation, footer), that you already see. You can notice\nflashing of the screen while new page is loading on such sites.",[30,124,125],{},"Anyway, this technology provides content that we want with easy usage. Some of available SSG:",[79,127,128,137,144,151],{},[82,129,130],{},[131,132,136],"a",{"href":133,"rel":134},"https:\u002F\u002Fgohugo.io\u002F",[135],"nofollow","Go Hugo",[82,138,139],{},[131,140,143],{"href":141,"rel":142},"https:\u002F\u002Fjekyllrb.com\u002F",[135],"Ruby Jekyll",[82,145,146],{},[131,147,150],{"href":148,"rel":149},"https:\u002F\u002Fhexo.io\u002F",[135],"NodeJS Hexo",[82,152,153],{},[131,154,157],{"href":155,"rel":156},"https:\u002F\u002Fwww.sphinx-doc.org\u002Fen\u002Fmaster\u002F",[135],"Python Sphinx",[30,159,160],{},"Capabilities of all these engines are about to be equal. Rendering speed is not important\nas it happens not in real time. So the only difference is only in programming language\nsyntax while creating template.",[94,162,164],{"id":163},"dynamic-sites","Dynamic Sites",[30,166,167],{},"From the user side dynamic site can seem a static one. It's because on the browser side\nworkflow is the same. But all magic at the server side.",[60,169,63,170,71,176,63],{"style":62},[30,171,172],{},[67,173],{"alt":174,"src":175},"Dynamic Site Workflow","\u002Fblog\u002F2022-01-25\u002FDynamic-Site-Workflow.jpg",[73,177,174],{},[30,179,180],{},"Yeah, this time browser make request not to file storage, but to server,\nthat generates HTML in real time. And dynamic sites have the same problem as\nthe static ones - flashing between pages.",[30,182,183],{},"You can create dynamic site with:",[79,185,186,193,200,207,214],{},[82,187,188],{},[131,189,192],{"href":190,"rel":191},"https:\u002F\u002Flaravel.com\u002F",[135],"PHP Laravel",[82,194,195],{},[131,196,199],{"href":197,"rel":198},"https:\u002F\u002Fdocs.microsoft.com\u002Fen-us\u002Faspnet\u002Fmvc\u002F",[135],"ASP.NET MVC Pattern",[82,201,202],{},[131,203,206],{"href":204,"rel":205},"https:\u002F\u002Fspring.io\u002Fprojects\u002Fspring-boot",[135],"Java Spring Boot",[82,208,209],{},[131,210,213],{"href":211,"rel":212},"https:\u002F\u002Fwww.djangoproject.com\u002F",[135],"Python Django",[82,215,216],{},[131,217,220],{"href":218,"rel":219},"https:\u002F\u002Frubyonrails.org\u002F",[135],"Ruby on Rails",[30,222,223],{},"These technologies have different requirements to server and ways to work with database.",[94,225,227],{"id":226},"single-pages-applications","Single Pages Applications",[30,229,230],{},"This type of site provides more slightly UX as browser doesn't recreate whole page,\nbut only elements when it is needed to change content. Technically, it is static site\nwith one HTML file. But HTML files exists there only because it might exist anyway to\nrun JavaScript.",[60,232,63,233,71,239,63],{"style":62},[30,234,235],{},[67,236],{"alt":237,"src":238},"SPA Workflow","\u002Fblog\u002F2022-01-25\u002FSPA-Workflow.jpg",[73,240,237],{},[30,242,243,244,247],{},"SPA's don't flash, but browser need to download whole site while first request.\nAnd if you have a lot of content, it will be a huge file.\nThere is another way, when browser require data to show on the third-party resource.\nIn this case your site won't contain needed information on initial state. As I know,\ninitial state is important for ",[34,245,246],{},"Search Engine Optimization (SEO)",". Also, user will wait\ntwice:",[249,250,251,254],"ol",{},[82,252,253],{},"Getting SPA",[82,255,256],{},"Getting data for SPA",[30,258,259],{},"Somebody may call disadvantage that it works on the JavaScript. There you can decide: support\nHTML only site for people with old gadgets or create cool app to use it with pleasure.\nI think, that liquidation of flashing is killer feature.",[30,261,262],{},"You can try SPA with:",[79,264,265,272,279,286,293],{},[82,266,267],{},[131,268,271],{"href":269,"rel":270},"https:\u002F\u002Freactjs.org\u002F",[135],"React",[82,273,274],{},[131,275,278],{"href":276,"rel":277},"https:\u002F\u002Fvuejs.org\u002F",[135],"Vue",[82,280,281],{},[131,282,285],{"href":283,"rel":284},"https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002Fconcepts\u002Fstatic-site-generation\u002F",[135],"Nuxt.js (static mode)",[82,287,288],{},[131,289,292],{"href":290,"rel":291},"https:\u002F\u002Fsvelte.dev\u002F",[135],"Swelte",[82,294,295],{},[131,296,299],{"href":297,"rel":298},"https:\u002F\u002Fangular.io\u002F",[135],"Angular",[49,301,303],{"id":302},"what-is-wrong","What is wrong?",[30,305,306],{},"Time is running, technologies are constantly improved. Business decided that UX is the main\nfeature  for sites. Because our site should be more comfortable than competitor’s one.",[30,308,309,310,313],{},"So sites mixed with SPA began to appear: SPA with ",[34,311,312],{},"Server Side Rendering (SSR)",", SPA with SSG. Some newbie can be confused. May be he want seamless experience for site, but",[79,315,316,319,322],{},[82,317,318],{},"without any database in background for delivering content to SPA",[82,320,321],{},"with small await time for user",[82,323,324],{},"with stable SEO",[30,326,327],{},"These 3 bad associations comes to my mind when I hear SPA. But SPA with SSR and SPA with SSG don’t have these problems. Anyway, I deny these technologies because of the phrase “I am SPA” in documentation.",[30,329,330],{},"So I propose a solution for this problem. We can call this mixed types of sites as “Hybrid”. Basically they are some blend of classic static sites with SPA, dynamic sites with SPA (with inherited advantages and solved problems).",[60,332,63,333,71,339,63],{"style":62},[30,334,335],{},[67,336],{"alt":337,"src":338},"Sites Triangle","\u002Fblog\u002F2022-01-25\u002FSites-Triangle.jpg",[73,340,337],{},[30,342,343],{},"SPA is the part of the each hybrid technology. It provides seamless work. Today every hybrid framework is based on the popular SPA framework.",[94,345,347],{"id":346},"static-hybrid","Static Hybrid",[30,349,350,351,353],{},"Static Hybrid sites are just ",[34,352,106],{}," that generate all possible HTML files for your site with SPA code in JavaScript. But these HTML files have special section for the case you want not to load all page but to update some information on your site.",[30,355,356],{},"You can see workflow of the Static Hybrid Site below:",[60,358,63,359,71,365,63],{"style":62},[30,360,361],{},[67,362],{"alt":363,"src":364},"Static Hybrid Workflow","\u002Fblog\u002F2022-01-25\u002FStatic-Hybrid-Workflow.jpg",[73,366,363],{},[30,368,369],{},"Firstly, browser gets full generated page in initial state (SEO problem of SPA is solved). After that SPA starts on the page and allow site to get only useful information from page requests until it is closed (seam problem of static sites is solved).",[30,371,372],{},"You can try static hybrid sited with:",[79,374,375,382,389],{},[82,376,377],{},[131,378,381],{"href":379,"rel":380},"https:\u002F\u002Fgridsome.org\u002F",[135],"Gridsome (Vue)",[82,383,384],{},[131,385,388],{"href":386,"rel":387},"https:\u002F\u002Fwww.gatsbyjs.com\u002F",[135],"Gatsby (React)",[82,390,391],{},[131,392,395],{"href":393,"rel":394},"https:\u002F\u002Fdocusaurus.io\u002F",[135],"Docusaurus (React)",[94,397,399],{"id":398},"dynamic-hybrid","Dynamic Hybrid",[30,401,402],{},"Basically, we can say that Dynamic Hybrid sites and static hybrid ones have similar idea. Browser get full page on initial page request and then it loads useful information only.",[30,404,405],{},"The only difference is that Dynamic Hybrid site generates pages not while creating, but during runtime. This feature increases latencies a bit, but it proposes you a possibility to update data on your site often or get data from frequently changed resource.",[60,407,63,408,71,414,63],{"style":62},[30,409,410],{},[67,411],{"alt":412,"src":413},"Dynamic Hybrid Workflow","\u002Fblog\u002F2022-01-25\u002FDynamic-Hybrid-Workflow.jpg",[73,415,412],{},[30,417,418],{},"There are some dynamic hybrid technologies:",[79,420,421,428,435,442,449],{},[82,422,423],{},[131,424,427],{"href":425,"rel":426},"https:\u002F\u002Fnuxtjs.org\u002F",[135],"Nuxt.js (Vue)",[82,429,430],{},[131,431,434],{"href":432,"rel":433},"https:\u002F\u002Fnextjs.org\u002F",[135],"Next.js (React)",[82,436,437],{},[131,438,441],{"href":439,"rel":440},"https:\u002F\u002Fremix.run\u002F",[135],"Remix (React)",[82,443,444],{},[131,445,448],{"href":446,"rel":447},"https:\u002F\u002Fangular.io\u002Fguide\u002Funiversal",[135],"Angular Universal (Angular)",[82,450,451],{},[131,452,455],{"href":453,"rel":454},"https:\u002F\u002Fkit.svelte.dev\u002F",[135],"Swelte Kit (Swelte)",[49,457,459],{"id":458},"jamstack","Jamstack",[461,462,463],"blockquote",{},[30,464,465],{},"Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity.",[30,467,468],{},"Basically, Jamstack frameworks are cheaper to maintain, because there is no runtime app needed. Only technologies, that generates static files can be considered as Jamstack. You can see these frameworks on the sites triangle, proposed by me.",[60,470,63,471,71,477,63],{"style":62},[30,472,473],{},[67,474],{"alt":475,"src":476},"Sites Triangle with Jamstack Architecture","\u002Fblog\u002F2022-01-25\u002FSites-Triangle-with-Jamstack-Architecture.jpg",[73,478,475],{},[79,480,481,484,487],{},[82,482,483],{},"Static Site - generates static HTML files",[82,485,486],{},"Single Page Application - generates small HTML file and big JavaScript file with content for site",[82,488,489],{},"Static Hybrid - generate static HTML files with special script for seamless interpage transitions",[49,491,493],{"id":492},"summary","Summary",[30,495,496],{},"To sum up, in my point of view there 5 types of sites:",[249,498,499,502,505,508,510],{},[82,500,501],{},"Static",[82,503,504],{},"Dynamic",[82,506,507],{},"Single Page Application",[82,509,347],{},[82,511,399],{},[30,513,514],{},"I think, that static and dynamic sites are obsolete. But there can be reasons to use it, if:",[249,516,517,520,523],{},[82,518,519],{},"You \u002F your team know appropriate technology really well",[82,521,522],{},"UX is not the main thing you need from web site",[82,524,525],{},"You need to cover vanishingly small community with old browsers or with disabled JavaScript in browser",[30,527,528],{},"In other cases, I’d advice you to choose SPA or Hybrid sites.",[79,530,531,534,537],{},[82,532,533],{},"Single Page Application is the best choice for some GUI (eg calculator, dashboard, map).",[82,535,536],{},"Static Hybrid should be used if content on your site changes infrequently (eg blog, documentation, portfolio)",[82,538,539],{},"Dynamic Hybrid is the most expensive site type to maintain, but it provides the biggest potential for features. Mostly this type is used when content is constantly changing (eg forums, social networks)",[30,541,542],{},"If you are not sure whether static site covers all your needs, you can start from dynamic analog. And then switch to static one, if it is possible.",[30,544,545],{},"As for my choice, I chose Nuxt.js (Dynamic Hybrid) for the documentation site. It is so, because we need to fetch info about a lot of repositories, and there are some ideas of helping tools and API’s.",{"title":547,"searchDepth":548,"depth":548,"links":549},"",2,[550,556,560,561],{"id":51,"depth":548,"text":52,"children":551},[552,554,555],{"id":96,"depth":553,"text":97},3,{"id":163,"depth":553,"text":164},{"id":226,"depth":553,"text":227},{"id":302,"depth":548,"text":303,"children":557},[558,559],{"id":346,"depth":553,"text":347},{"id":398,"depth":553,"text":399},{"id":458,"depth":548,"text":459},{"id":492,"depth":548,"text":493},"2022-01-25","Nowadays there are a lot of technologies for building websites. You might be disoriented trying to choose something for your site. I did the big research, and I want share information I found.","md","\u002Fblog\u002F2022-01-25\u002Fcover.jpg","en",{},true,"\u002Fblog\u002F2022-01-25-classification-of-website-technologies",{"title":21,"description":563},"blog\u002F2022-01-25-classification-of-website-technologies",[43,573],"Frontend","M3v0rG9R77DM-w5pToiUp02ZG_Lrc9dwp6FADlaMa5g",null,{"title":577,"path":578,"stem":579,"description":580,"children":-1},"Personal website building journey","\u002Fblog\u002F2023-05-08-personal-website-journey","blog\u002F2023-05-08-personal-website-journey","Here is my experience building several versions of my personal website throughout the years.",{"left":4,"top":4,"width":582,"height":582,"rotate":4,"vFlip":6,"hFlip":6,"body":583},72,"\u003Cpath fill=\"#1e50a0\" d=\"M5 17h62v38H5z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M40 28.856V32h10.181L67 21.691V17h-7.654z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M67 17h-3.827L40 31.203V32h3.482L67 17.586z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M59.347 55H67v-4.692L50.182 40H40v3.143z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M67 55v-2.347L46.355 40h-4.787l24.474 15z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M32 43.144V40H21.819L5 50.309V55h7.654z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M5 55h3.827L32 40.797V40h-3.482L5 54.414z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M12.653 17H5v4.692L21.818 32H32v-3.143z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M5 17v2.347L25.646 32h4.786L5.958 17z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M5 31h62v10H5z\"\u002F>\u003Cpath fill=\"#fff\" d=\"M31 17h10v38H31z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M5 33h62v6H5z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M33 17h6v38h-6z\"\u002F>\u003Cpath fill=\"none\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 17h62v38H5z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":585},"\u003Cpath fill=\"currentColor\" d=\"M17.51 3.87L15.73 2.1L5.84 12l9.9 9.9l1.77-1.77L9.38 12z\"\u002F>",1787506838378]